使用webstorm+vue与后端开发

使用webstorm+vue与后端开发

前端用的webstorm+vue开发,后端用的idea,花了两天的时间自己搭建了一个前端框架连接后端框架。网上查了很多资料,没看到这种文章,有的也是要开会员下载,所有在测试成功后想着自己写一篇,下面进入主题
webstorm+vue框架搭建可以参考这篇文章webstorm创建vue项目

1.先创建一个页面
2.然后在路由里配置创建的页面

3.这里是主页,这这里配置页面链接
4.我用的el组件发送的axios请求,这两个在框架中导入很简单,首先引入el: 控制台输入命令 npm i element-ui -S
axios: 命令 npm install --save axios
然后在路由roulter下面的main.js里配置el组件和axios

5.到这里基本上算是完成了,因为前后端是分离的,所有连接后端端口就存在跨域问题,这个困扰了好久!
在config下面的index.js里找到proxyTable配置这一段
``proxyTable: {
‘/api’: {
target:‘http://127.0.0.1/’, // 你请求的第三方接口,这里我后端端口是80,所有不用写,可自行配置端口号
changeOrigin:true, // 在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
pathRewrite:{ // 路径重写，
‘^/api’: ‘’ // 替换target中的请求地址，也就是说以后你在请求http://api.douban.com/v2/XXXXX这个地址的时候直接写成/api即可。
}
}
},

至此前端搭建完成!

下面后端框架搭建,我用的springboot开发
1.直接new一个springboot项目

2.这个目录创建就不做详细说明了!

启动类配置
这里就配置mapper扫描路径

有一个问题就是在service层注入mapper时会有个红色下划线问题
可以去参考这篇文章

最后就是配置文件了
就一个简单的demo,所以就配了一个数据源,端口号和mybatis

到这就结束了

最后附上我页面代码和效果图
Ax.vue

订单管理

默认按钮

效果:

有不足的地方欢迎指正。(#手动滑稽)