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);
    }
}