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

最新推荐文章于 2024-08-13 08:45:42 发布

KirutoCode

最新推荐文章于 2024-08-13 08:45:42 发布

阅读量427

点赞数 1

分类专栏：项目经验

本文链接：https://blog.csdn.net/mceason/article/details/108022197

版权

本文主要介绍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-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