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

版权声明:本文版权归作者所有,遵循 CC 4.0 BY-SA 许可协议, 转载请注明原文链接
https://segmentfault.com/a/1190000016777870

来认识一下venus-init——一个让你仅需一个命令开始java开发的命令行工具 - 编程思维

源代码地址: Github仓库地址 个人网站:个人网站地址 前言 不知道你是否有过这样的经历。不管你是什么岗位,前端也好,后端也罢,想去了解一下Java开发到底是什么样的,它是不是真的跟传说中的一样。 于是你拿起键盘,用触控板 ? '' : 抄起鼠标',开始了Java淌坑之旅。在一把梭的操作之后,面对你搭建的环境,你陷

springcloud(第 027 篇)集成异构微服务系统到 springcloud 生态圈中(比如集成 nodejs 微服务) - 编程思维

SpringCloud(第 027 篇)集成异构微服务系统到 SpringCloud 生态圈中(比如集成 nodejs 微服务) - 一、大致介绍 1、在一些稍微复杂点系统中,往往都不是单一代码写的服务,而恰恰相反集成了各种语言写的系统,并且我们还要很好的解耦合集成到自己的系统中; 2、出于上述现状,SpringClo

弃用java 8,apache kafka发布3.0正式版 - 编程思维

昨天,Apache Kafka 3.0 版本正式发布,这是一个涉及多方面的大版本。在这个版本中,Apache Kafka 3.0 引入了各种新功能、突破性的 API 更改以及对 KRaft 的改进:Apache Kafka 的内置共识机制将取代 Apache ZooKeeper™。虽然 KRaft 尚未被推荐用于生产(

node微信支付踩坑日记(公众号支付) - 编程思维

前言:花了好几天的时间搞了下微信公众号支付,期间历程无比心酸,总的来说还是理解能力不够和经验不足,现在归纳下支付中遇到的坑。 先看业务流程 前期猜想及准备工作 首先,公众号支付采用的是,利用微信的js-sdk调起支付的方式进行的,其中分为两种情况:微信jssdk调起和微信支付开放平台调起。但是,无论是采用什么方法首先都

node.js项目中操作mysql - 编程思维

本文是一篇使用mysql这个npm模块操作MySQL数据库的基础教程。 不涉及MySQL的安装和配置,如果电脑中还未安装MySQL, 推荐安装WAMP、XAMPP等集成环境。本文中还使用到了轻量级的Node.js框架Koa搭建web程序,为的是通过前端浏览器请求的方式来模拟项目场景,你无需掌握Koa框架的语法也是可以轻

vue2-多入口配置 - 编程思维

能点进来的,肯定是对单入口了解透彻,对Vue2了解的人了。话不多说。上干货。 前期准备 1.一个完成能运行的Vue单页项目.(本文以Vue提供的单页模板为例子)2.若没有,请找度娘。 目录 我的src目录有修改,如下: 本例要修改的配置文件如下: config/index.js修改 修改如下: 代码如下:在config

使用jest测试javascript(mock篇) - 编程思维

在本篇教程中,我们会介绍 Jest 中的三个与 Mock 函数相关的API,分别是jest.fn()、jest.spyOn()、jest.mock()。使用它们创建Mock函数能够帮助我们更好的测试项目中一些逻辑较复杂的代码,例如测试函数的嵌套调用,回调函数的调用等。 如果你还不知道Jest的基本使用方法,请先阅读:

vue源码构建代码分析 - 编程思维

这是xue源码学习记录,如有错误请指出,谢谢!相互学习相互进步。 vue源码目录为 vue ├── src #vue源码 ├── flow #flow定义的数据类型库(vue通过flow来检测数据类型是否正确) ├── examples #demo ├──