文章目录
VBlog项目代码理解之前后端交互
资源
项目地址
前端代码理解
后端代码理解
推荐:整个项目几乎是只用到了SpringBoot、Vue、Mybatis、ElementUI,没有用到Redis、RabbitMQ等内容,很适合刚学完SpringBoot和Vue的同学练手,感谢作者!帮作者打个广告吧~
PS:这是本人第一个学习的项目,难免会有错误的地方,哪里有问题烦请指正,感谢!
前后端交互
跨域:使用前端的config/index.js
来解决开发时的跨域问题。
权限验证:使用Spring Security
来做权限验证。
其他依赖:使用了mavon-editor
和vue-echarts
,这个包都在package.json
表示了,直接安装就行。
使用与二次开发:
这个项目是把Vue
资源都整合到了SpringBoot
中,运行npm run build
来将前端资源打包,vueblog目录下生成一个dist
文件夹,将该文件夹中的两个文件static
和index.html
拷贝到SpringBoot
项目中resources/static/
目录下,就可以直接访问了。
二次开发的时候要使用Vue,设置了端口转发(是在config/index.js中),可以与Springboot联动,开发完了重新build再打包到SpringBoot中。
前后端分离特点:
后端controller
全都是@RestController
,只负责返回结果,跳转都被前端Vue
负责了。
交互方法:
通过使用这些内容来与后端的Controller
交互,传递参数过去,然后前端用then
接收后端输出的RespBean
类结果。
import axios from 'axios'
// base意义是啥
let base = '';
// 这些要在component用到的时候import
export const postRequest = (url, params) => {
return axios({
method: 'post',
url: `${
base}${
url}`,
data: params,
transformRequest: [function (data) {
// 这边就是参数传递的标准表达式了
let ret = ''
for (let it in data) {
ret += encodeURIComponent