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

導讀

記錄一次基於原有的後端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