Spring Boot [Vue + Vue CLI3 + Vant 快速構建你的移動商城]

Eidesen 發布于2019-08-16 13:29 / 2575人閱讀

摘要：導讀記錄一次基于原有的后端構建移動端商城，參照已有的安卓應用設計圖開發。

導讀

記錄一次基于原有的后端api構建移動端商城，參照已有的安卓應用UI設計圖開發。技術選型后端 Spring Cloud OAuth2 + Spring Cloud Eureka + Spring Boot 前端 Vue + Vue Router + Vue CLI3 + Vant ；移動商城從技術選型到項目上線花費一個星期后期優化測試花費3天，團隊規模2人 14人天后端api基于原有的安卓api 后續增加了一些沒有的接口工作劃分3天頁面開發 4天對接聯調測試在這期間使用了移動端頁面選型使用了有贊的Vant節省了很多時間 Vant 大法好哈哈

開始思路

將靜態頁面部署到阿里云oss上配置我們自己的域名；靜態頁面通過OAuth2密碼模式登錄獲取Token 攜帶Token 請求api網關

因為部署在不同的域名下存在跨域問題后臺需顯示的聲明
如 api 中

ResourceServer 需要添加 .cors()

@Configuration
@EnableResourceServer
public class ResourceServerConfig  extends ResourceServerConfigurerAdapter  {

    /**
    * 省略其他
    **/
    
    @Override
    public void configure(HttpSecurity http) throws Exception {
        http.authorizeRequests().antMatchers("/user/**", "/upload", "/version").permitAll()
                .and().cors() // 
                .and().csrf().disable()
                .exceptionHandling()
                .authenticationEntryPoint((request, response, authException) -> response.sendError(HttpServletResponse.SC_UNAUTHORIZED))
                .and()
                .authorizeRequests()
                .anyRequest().authenticated()
                .and()
                .httpBasic();
    }
}

MvcConfig 中

@Configuration
public class MvcConfig extends WebMvcConfigurerAdapter {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("http://m.xx.com", "http://localhost:8080")
                .allowedMethods("*")
                .allowedHeaders("*")
                .allowCredentials(true).maxAge(3600);
    }
}

頁面效果

優化

還在進行中使用PWA對其改造，目前僅支持谷歌瀏覽器百度瀏覽器新版的safari 獲得接近與原生應用的體驗目前只落地了可以添加主屏幕啟動后期在加入緩存提升用戶體驗及減小后端壓力

參考資料

vant 文檔
Vue CLI3

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/71839.html

關于Vue2一些值得推薦的文章 -- 五、六月份

摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。五、六月份推薦集合查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。蘇...

sutaking 2019-08-02 15:17 評論0 收藏0
關于Vue2一些值得推薦的文章 -- 五、六月份

摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。五、六月份推薦集合查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。蘇...

khs1994 2019-08-23 18:08 評論0 收藏0
前方來報，八月最新資訊--關于vue2&3的最佳文章推薦

摘要：哪吒別人的看法都是狗屁，你是誰只有你自己說了才算，這是爹教我的道理。哪吒去他個鳥命我命由我，不由天是魔是仙，我自己決定哪吒白白搭上一條人命，你傻不傻敖丙不傻誰和你做朋友太乙真人人是否能夠改變命運，我不曉得。我只曉得，不認命是哪吒的命。 showImg(https://segmentfault.com/img/bVbwiGL?w=900&h=378); 出處查看github最新的Vue...

izhuhaodev 2019-08-26 10:44 評論0 收藏0
Vant - 高效的 Vue 組件庫，再造一個有贊移動商城也不在話下

摘要：優惠券選擇器優惠券選擇器提供了優惠券單元格和優惠券選擇功能。優惠券單元格只需傳入優惠券列表和當前使用的優惠券即可正確展示。使用參數可以控制優惠券單元格是否展示右側箭頭，這個可以用于提醒用戶能否切換優惠券。 Vant ( ?v?nt ) 是有贊前端團隊基于有贊統一的規范實現的 Vue 組件庫，提供了一整套 UI 基礎組件和業務組件。通過 Vant，可以快速搭建出風格統一的頁面，提升開發效...

tunny 2019-08-21 16:47 評論0 收藏0