VBlog项目代码理解之前后端交互

本文主要介绍VBlog项目的前后端交互,包括资源、跨域解决方案和权限验证。项目基于SpringBoot、Vue、Mybatis和ElementUI,适合初学者实践。采用前端解决开发跨域,利用JWT进行权限验证,并介绍了如何进行二次开发和端口转发设置。前端通过axios调用后端API,后端返回JSON数据。
摘要由CSDN通过智能技术生成


VBlog项目代码理解之前后端交互

资源

项目地址
前端代码理解
后端代码理解
推荐:整个项目几乎是只用到了SpringBoot、Vue、Mybatis、ElementUI,没有用到Redis、RabbitMQ等内容,很适合刚学完SpringBoot和Vue的同学练手,感谢作者!帮作者打个广告吧~
在这里插入图片描述
PS:这是本人第一个学习的项目,难免会有错误的地方,哪里有问题烦请指正,感谢!


前后端交互

跨域:使用前端的config/index.js来解决开发时的跨域问题。

权限验证:使用Spring Security来做权限验证。

其他依赖:使用了mavon-editorvue-echarts,这个包都在package.json表示了,直接安装就行。

使用与二次开发
这个项目是把Vue资源都整合到了SpringBoot中,运行npm run build来将前端资源打包,vueblog目录下生成一个dist文件夹,将该文件夹中的两个文件staticindex.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
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值