前后端分离
关注
分享
扫一扫
shrek11
我好 才是大家好
展开
-
一个好的系统的自我修养
前言一般一个系统大概分3个部分，前端 - 后端 - 数据库。前端 可能是N台电脑，N个手机，所以压力最小后端 很多个用户操作电脑端或者手机端请求 压力很大数据库 又有1个或者多个后端程序来请求它， 所以它的压力是最大，资源也是最紧张的所以我们设计的系统的准则是什么：尽量把一些计算，存储信息往前推。大概意思就是，能在前端完成的...原创 2019-12-16 17:39:39 · 435 阅读 · 1 评论 -
钉钉 H5微应用开发 免密登录
近2年钉钉很火，很多企业在用，要做一个钉钉的微应用打算用VUE做前端，springboot做后端。其中比较重要的就是钉钉的免密登录，网上资料比较少而且很多都过时了，下面我这个官方SDK包是20190926发布的钉钉微应用开发者文档：https://ding-doc.dingtalk.com/doc#/bgb96b/aw3h75本博客项目源码：https://github.com...原创 2019-10-13 11:57:50 · 10536 阅读 · 8 评论 -
springcloud 学习记录 二 开源架构 PIG
码云上找了个最近比较火的开源架构 PIG搭建了一天，终于大功告成，可以慢慢研究学习，再发上微博。下面介绍一下PIG基于Spring Cloud、OAuth2.0、Vue的前后端分离的系统。 通用RBAC权限设计及其数据权限和分库分表 支持服务限流、动态路由、灰度发布、 支持常见登录方式， 多系统SSO登录完善登录：账号密码模式、短信验证码模式、社交账号模式均整合Spring s...原创 2018-11-11 18:51:48 · 1650 阅读 · 0 评论 -
springcloud 学习记录 三 开源架构 PIG 搭建
PIG是开源的，PIGX是收费的，扩展了很多功能PIG跑起来需要装几个软件。1,RABBITMQ 2,MYSQL 3,REDIS 4,NODEJS装了以后，下载代码，后端 https://gitee.com/log4j/pig前端 https://gitee.com/log4j/pig-uiconfig https://gitee.com/cqzqxq...原创 2018-11-17 12:39:05 · 2385 阅读 · 1 评论 -
springcloud 学习五 springsecurityoauth 2 (二)
代码库在 https://github.com/wushu0725/shrekshrek-service 注册中心shrek-gateway 网关服务，目前只做了到auth服务的网关shrek-auth 认证服务 ， 标准springsecurityoauth 2.0认证，实现了密码模式认证，shrek-upms 用户权限管理模块 ，提供用户权限管理功能，目前只提供...原创 2018-12-26 15:15:02 · 234 阅读 · 0 评论 -
springcloud 学习记录四 spring security oauth2
oauth2 定义了下面四种授权方式：前面有讲授权码模式（authorization code） 简化模式（implicit） 密码模式（resource owner password credentials） 客户端模式（client credentials代码地址 https://github.com/wushu0725/shrek资源 contrllor类Oaut...原创 2018-12-23 22:14:20 · 293 阅读 · 0 评论 -
springcloud 学习六 增加vue-element-admin 作为前端 springcloud 后端
后端的认证服务器，UPMS（用户权限服务）已完成。前端选择vue-admin-template 进行改造，代码提交更新至GIT库: shrek 后端： https://github.com/wushu0725/shrekshrek-ui 前端 ： https://github.com/wushu0725/shrek-ui 线上DEMO : http://www.shrek1...原创 2019-01-11 15:44:57 · 1439 阅读 · 1 评论 -
前后端分离（VUE+SPRINGBOOT+SHIRO+MYBAITIS）整理导航
springboot + shiro + vue 前后端分离项目后端demo网址 http://www.shrek11.cn:82微信端页面扫码：微信端功能未完成目前把代码整理后提交至github上，地址https://github.com/wushu0725/shrek-springboot-vue目前代码分 前端和后端，移动端代码找了仿ELM前端，也是用VUE写的，准备...原创 2019-01-25 15:30:19 · 5932 阅读 · 6 评论 -
springcloud 学习七 项目打包 报 没有主清单属性
项目通过MVN打包，发现打包的文件很小,大概几十KB，估计打包有问题，执行JAVA -JAR 的时候发现果然报错，报 没有主清单属性，网上找了一堆，都说加<build> <plugins> <plugin> <groupId>org.springframework.boot</...原创 2019-01-22 14:54:39 · 1276 阅读 · 2 评论 -
前后端分离 开发模式的探讨
现在前后端模式都比较流行，但是怎么开发比较有效率了？以后维护起来也比较方便了，我推荐2个工具，一个是RAP2,一个是POSTMAN,RAP2是项目接口文档管理系统，项目经理或者产品经理等可以在开发之前根据你的需求和原型定义各种接口数据，包括入参，出参以及各个参数的意义。如果接口有任何改动，必须知会相关人等。重新生成新的测试数据。定义好以后，前端和后端就要根据定义好的接口...原创 2019-01-23 10:39:26 · 900 阅读 · 0 评论 -
VUE 中 的深拷贝和浅拷贝
前端发现一个问题，我v-for 出来的组件绑定下来的时候，改了一个下拉的值其他的下拉也跟着改变。下拉的选项根据数据动态增加，但是改变一个下拉，其他跟着改，找了半天，最后https://www.cnblogs.com/pangguoming/p/8438613.html找到了问题原来JS的对象和JAVA的对象类似，一个值引用，一个地址引用。所以在JS数组PUSH的时...原创 2019-03-12 17:27:04 · 2322 阅读 · 0 评论 -
springboot+vue 架构 （一）
springboot+vue 一般是采用前后端分离模式，不像传统模式，通过页面表单FORM BODY上传参数，前后端通讯一般都是采取标准的JSON格式来交互。现在RAP定义JSON格式，如下图：定义这个格式 就是前端调用地址为scCharterBustop/doAddbody JSON 参数为{ "stopName": "test", "stopAddress...原创 2019-04-04 11:34:30 · 7135 阅读 · 0 评论 -
springboot+vue 架构 （二）
很多后端项目互相调用都是传实体对象，比如增加，修改等 insert(BusSotp busStop)等。最近在GITHUB上看见也有很多人现在不传实体对象了像我上篇，VUE传到后端的是JSON格式，一般的做法是通过SPRINGBOOT的把JSON转成实体对象。那为什么不直接用JSON对象了controller层service层dao层myb...原创 2019-04-04 11:47:42 · 3080 阅读 · 0 评论 -
前后端分离（VUE+SPRINGBOOT）十九 文件的下载
前后端分离架构的文件下载和单体应用不一样，单体应用后台直接把下载文件写入到输出流里，IE浏览器会自动下载，前后端不一样，springboot 后端代码：把后端要下载的文件写入到输出流里，代码如下：前端VUE 点击下载的代码，注意一下，这里传了responseType=arraybuffer,在VUE的前端response拦截器里判断，会判断我要请求大的是否...原创 2019-04-03 10:03:49 · 3413 阅读 · 0 评论 -
总结 项目中的技术方案选型和为什么
1，为什么要前后端分离。 1.1 前后端分离可以让开发人员更专注于自己的专业，开发效率更高 1.2 前端和后端分开部署在各自的服务器，性能更好2, 前端为什么用vue。 2.1 国人产的，支持国货 2.2 响应式编程，前端给客户体验更好 2.3 社区活跃度非常高，众多大神在后面支持你， ...原创 2019-09-21 18:46:21 · 1447 阅读 · 0 评论 -
前后端分离（VUE+SPRINGBOOT）十六 微信移动端开发 扫一扫开发
VUE在微信中浏览器，通过接口可以调用手机相应的硬件，比如微信的扫一扫。同样，VUE也有微信相应的组件，做了一些封装，我们也可以拿来用1，安装 npm install weixin-js-sdk2, 需要调用扫一扫的页面引用 import wx from 'weixin-js-sdk'3，点击扫一扫事件代码busOutCheck(){ let _thi...原创 2018-10-30 16:57:22 · 2028 阅读 · 0 评论 -
前后端分离（VUE+SPRINGBOOT）十五 微信移动端 企业微信的开发token和jsapi_ticket的存取
调用接口很简单，写2个方法，先写一个POST，一个GET，配置文件里配置好每次需要用token或者是jsapi_ticket的时候，先去数据库查找有效的token如果有则返回需要的token或者jsapi_ticket或者txlaccesstoken，找不到，则清除表，重新调用微信接口，保存至数据库并返回，相关代码如下。/*** * 获取acess_token...原创 2018-10-30 16:38:21 · 2582 阅读 · 0 评论 -
前后端分离（VUE+SPRINGBOOT）十四 微信移动端 企业微信的开发1
因为项目中设计到要调用微信接口，接口如下：1，获取用户的 code redirect_uri 做URLENCODE处理https://open.weixin.qq.com/connect/oauth2/authorize?appid=CORPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&...原创 2018-10-30 16:25:59 · 3089 阅读 · 1 评论 -
前后端分离（VUE+SPRINGBOOT）六 登陆
登陆可以用上节上的axios进行登陆操作登陆后本地保存登陆状态，具体代码如下：handleLogin() { this.$refs.loginForm.validate(valid => { if (valid) { this.loading = true this.$store.dispatch('Login', this.loginForm)...原创 2018-10-25 22:57:26 · 463 阅读 · 0 评论 -
前后端分离（VUE+SPRINGBOOT）七 动态加载路由权限
用户往往需要根据每个用户的不同权限来显示不同的菜单之前我做过通过后台的权限动态生成router对象，比较麻烦这里，我们可以通过增加一个menu的属性，这个属性后台返回的权限列表来展现不同的菜单和按钮这个是我的一个router的配置{ path: 'role', name: '权限管理', component: _import('user/role'), met...原创 2018-10-25 23:25:03 · 2961 阅读 · 0 评论 -
前后端分离（VUE+SPRINGBOOT）十八 echarts报表开发
昨天刚好有个人问报表开发问题，今天就把这个补齐，所以说VUE好用，基本上用的多的组件都能找到，图形报表这个也一样，话不多说，源码地址：https://github.com/ecomfe/vue-echarts1，安装 npm install vue-echarts -S2，引入 main.jsp import VCharts from 'v-charts'Vue...原创 2018-10-31 09:27:37 · 7572 阅读 · 0 评论 -
前后端分离（VUE+SPRINGBOOT）十七 后台介绍
因为我本身是做后端开发的，感觉SPRINGBOOT没什么好说的，无非就是正常的开发，我的项目结构如下：项目大体分层是，PC端或者微信端通过HTTP/JSON的方式提交数据，开发时通过nodejs的动态反向代理，部署时用NGINX反向代理请求到我的后端。后端通过SHIRO认证，然后到controller,再调用service层做业务逻辑，再调用DAO层做数据存取，最近在研...原创 2018-10-31 09:47:50 · 598 阅读 · 0 评论 -
前后端分离（VUE+SPRINGBOOT）八 VUEX
VUEX是vue一个很重要的组件，它就相当于store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)这个状态就是你存的变量。比如你的用户信息等当你的浏览器刷新或者关闭浏览器，VUEX将清空。其实我们浏览器有自己的localstorage和sessionStorage來保存变量，为什么VUE又来弄过VUEX来保存自己变量了因为、Vu...原创 2018-10-29 19:49:24 · 364 阅读 · 0 评论 -
前后端分离（VUE+SPRINGBOOT）九 ELEMENT UI
写页面，页面风格，样式对于我们来说是件很烦的事，由于现在VUE用的很火，所以网上出了很多对应的组件库。https://blog.youkuaiyun.com/mongo_node/article/details/78879330而这里用的element Ui ，饿了吗出品git网上星星最多的具体使用如下：1，安装npm i element-ui -S2，全局引用（也可以部分引用...原创 2018-10-29 20:01:33 · 633 阅读 · 0 评论 -
前后端分离（VUE+SPRINGBOOT）十 单文件文件上传 以及图片展示
VUE 的ELEMENT上传文件组件可以用el-upload标签具体用法如下<el-upload class="upload-demo" ref="upload" action="api/busstop/singlefile" --上传地址 accept="image/jpeg,image/jpg,image/png" :data="tempBusStop"..原创 2018-10-29 20:20:38 · 6385 阅读 · 6 评论 -
前后端分离（VUE+SPRINGBOOT）一
很久没写代码了，之前用的技术都是一些很老的技术，突然要做一个项目，包括后台，微信端，15天做完，没办法，只能硬着头皮上，网上找了很多资料，发现最近前端用VUE很火，SPRINGBOOT开发后台也是开发比较快。就算之后整合到SPRING COULD也比较方便就用这2个技术，由于刚开始做，不熟悉，还要搭架构，没办法，还是用老办法，从GIT下找一个合适的干净点项目拿下了改。https...原创 2018-10-24 19:34:50 · 762 阅读 · 0 评论 -
前后端分离（VUE+SPRINGBOOT）二
先把代码从上面DONwLOAD下来，可以看到有前台代码和后台代码分开的我用IEAD打开前台，ELIPSE打开后台，可以把数据库初始化，配置数据库信息，即可启动后端后端是用SPRINGBOOT写的，直接启动启动类，记住启动端口，然后前端的config/index.js修改前端指向后端程序的IP和端口。这里通过Nodejs开发工具（见最后）反射代理的，意思是我的所有请求会判断是...原创 2018-10-24 19:59:49 · 540 阅读 · 0 评论 -
前后端分离（VUE+SPRINGBOOT）三
下面我们来看一下前端的目录结构1、build文件夹是保存一些webpack的初始化配置。config文件夹保存一些项目初始化的配置。2、node_modules是npm加载的项目依赖的模块。3、src目录是我们要开发的目录，打开是这样的：4、static文件夹用来放置静态资源目录5、index.html是首页入口文件6、package.json是项目配置文件而我们主要开发的S...原创 2018-10-24 20:18:32 · 431 阅读 · 0 评论 -
前后端分离（VUE+SPRINGBOOT）四 数据交互
前后端分离，我发现很多困扰大家的一个问题，就是前端数据怎么和后台进行数据交互，这里和一般的单体应用不一样，涉及到的地方有几个 1，跨域的问题，2，session保存问题刚开始也一直困扰我，尝试了很多方法，也成功过，用过java后端设置允许跨域，这样的话，后端能正常接收你前端的请求但是如果你做了认证，你会发现，简单请求（get）还好，如果是POST请求，浏览器发现你是跨域的时...原创 2018-10-24 20:45:10 · 7239 阅读 · 0 评论 -
前后端分离（VUE+SPRINGBOOT）十一 VUE中axios异步请求同步的问题
在vue项目里面，需要循环发送ajax请求，出现的问题就是循环结束，第一次服务器可能还没返回，比如，你做批量删除，你本来的业务代码是先遍历循环删除记录，在tolist()，加载数据，这时你可能发现，你本来想删除5条记录，而页面显示只删除了3条这是因为，axios是异步请求，并不会等你删除完以后才会调tolist这个时候，我们就可以用Promise.all,相当于前面请求都做...原创 2018-10-30 10:01:30 · 857 阅读 · 0 评论 -
前后端分离（VUE+SPRINGBOOT）十二 页面集成高德地图
VUE集成高德地图很简单，但是首先你的有个高德地图开发者的key,怎么申请key见 https://blog.youkuaiyun.com/qq_38211852/article/details/80289412VUE的高德地图组件在：https://github.com/ElemeFE/vue-amap老规矩： 1，安装 npm install vue-amap -S2, main...原创 2018-10-30 15:52:02 · 2753 阅读 · 2 评论 -
前后端分离（VUE+SPRINGBOOT）十三 微信移动端开发
因为VUE是HTML5,所有它也支持移动端，我之前的后台代码也可以用手机端来访问，功能效果都正常但我用的后端组件是element ui,它是饿了吗专为后端开发设计的UI组件所以，移动微信端开发必须用其他组件，现有很多成熟的VUE移动端组件而我选用的是MINT组件，同样也是饿了吗出品。地址是 ： https://mint-ui.github.io/#!/zh-cn移动端的项目...原创 2018-10-30 16:08:47 · 2295 阅读 · 0 评论 -
前后端分离（VUE+SPRINGBOOT）五 AXIOS
vue有几种异步请求方式，官方推荐用AXIOS，那我们也用这个。本项目中已经引入了，所以不需要自己引入。怎么引入模块，大家可以百度。AXIOS在每次请求时，我们可以设置它的请求信息import axios from 'axios'import {Message, MessageBox} from 'element-ui'import {getToken} from '@/ut...原创 2018-10-25 22:17:53 · 593 阅读 · 0 评论