vue+springboot前后分离
开发中一些问题和工具的分享
shrek11
我好 才是大家好
展开
-
钉钉 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 评论 -
前后端分离(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)十六 微信移动端开发 扫一扫开发
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)十二 页面集成高德地图
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)十一 VUE中axios异步请求同步的问题
在vue项目里面,需要循环发送ajax请求,出现的问题就是循环结束,第一次服务器可能还没返回,比如,你做批量删除,你本来的业务代码是先遍历循环删除记录,在tolist(),加载数据,这时你可能发现,你本来想删除5条记录,而页面显示只删除了3条这是因为,axios是异步请求,并不会等你删除完以后才会调tolist这个时候,我们就可以用Promise.all,相当于前面请求都做...原创 2018-10-30 10:01:30 · 857 阅读 · 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)九 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)八 VUEX
VUEX是vue一个很重要的组件,它就相当于store(仓库)。“store”基本上就是一个容器,它包含着你的应用中大部分的状态 (state)这个状态就是你存的变量。比如你的用户信息等当你的浏览器刷新或者关闭浏览器,VUEX将清空。其实我们浏览器有自己的localstorage和sessionStorage來保存变量,为什么VUE又来弄过VUEX来保存自己变量了因为、Vu...原创 2018-10-29 19:49:24 · 364 阅读 · 0 评论 -
前后端分离(VUE+SPRINGBOOT)七 动态加载路由权限
用户往往需要根据每个用户的不同权限来显示不同的菜单之前我做过通过后台的权限动态生成router对象,比较麻烦这里,我们可以通过增加一个menu的属性,这个属性后台返回的权限列表来展现不同的菜单和按钮这个是我的一个router的配置{ path: 'role', name: '权限管理', component: _import('user/role'), met...原创 2018-10-25 23:25:03 · 2961 阅读 · 0 评论 -
前后端分离(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)五 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 评论 -
前后端分离(VUE+SPRINGBOOT)四 数据交互
前后端分离,我发现很多困扰大家的一个问题,就是前端数据怎么和后台进行数据交互,这里和一般的单体应用不一样,涉及到的地方有几个 1,跨域的问题,2,session保存问题刚开始也一直困扰我,尝试了很多方法,也成功过,用过java后端设置允许跨域,这样的话,后端能正常接收你前端的请求但是如果你做了认证,你会发现,简单请求(get)还好,如果是POST请求,浏览器发现你是跨域的时...原创 2018-10-24 20:45:10 · 7239 阅读 · 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)二
先把代码从上面DONwLOAD下来,可以看到有前台代码和后台代码分开的我用IEAD打开前台,ELIPSE打开后台,可以把数据库初始化,配置数据库信息,即可启动后端后端是用SPRINGBOOT写的,直接启动启动类,记住启动端口,然后前端的config/index.js修改前端指向后端程序的IP和端口。这里通过Nodejs开发工具(见最后)反射代理的,意思是我的所有请求会判断是...原创 2018-10-24 19:59:49 · 540 阅读 · 0 评论 -
前后端分离(VUE+SPRINGBOOT)一
很久没写代码了,之前用的技术都是一些很老的技术,突然要做一个项目,包括后台,微信端,15天做完,没办法,只能硬着头皮上,网上找了很多资料,发现最近前端用VUE很火,SPRINGBOOT开发后台也是开发比较快。就算之后整合到SPRING COULD也比较方便就用这2个技术,由于刚开始做,不熟悉,还要搭架构,没办法,还是用老办法,从GIT下找一个合适的干净点项目拿下了改。https...原创 2018-10-24 19:34:50 · 762 阅读 · 0 评论