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

Eidesen 发布于2019-08-16 13:29 / 2536人阅读

摘要：导读记录一次基于原有的后端构建移动端商城，参照已有的安卓应用设计图开发。

导读

记录一次基于原有的后端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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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