Springboot+vue后台管理系统-前后端分离数据传递

零：最终实现图片展览：

一：前端项目搭建； 1:使用cmd下载vue：

2：npm install -g @vue/cli （如果安装过就不用啦） 3:vue create springboot-vue-demo(自己的名字)：

4： 5：将目标移动到第一个选项然后按回车到达下面这个界面，选择一个vue版本，我们这里选择vue3x

6：下一个界面依次按下： y in package.json y 这三个，第三个是是否保存当前配置可以按N 7：

进入：退出打开idea去开启项目编写二：前端框架搭建，首先看一下最终的实现效果：

1：首先我们发现这个后台管理系统有三个部分，内容，顶部栏，左边导航栏，所以我们要将顶部和左侧两个不变的地方写在components中：

Header.vue：

插入一下：新版element引入图标使用的script：import { ArrowDown } from '@element-plus/icons-vue';，项目中加入element是需要手动npm导入的，这里可以通过看官网介绍 Aside.vue：

Main.js:

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import 'dayjs/locale/zh-cn'
import locale from 'element-plus/es/locale/lang/zh-cn'


import router from './router'
import store from './store'
import '@/assets/css/global.css'



createApp(App).use(store).use(router).use(ElementPlus,{locale}).mount('#app')

App.vue:

Home.vue：

全局css：

index.js:(router)

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
]

const router = createRouter({
  history: createWebHistory(process.env.base_URL),
  routes
})

export default router

store:index.js

import { createStore } from 'vuex'

export default createStore({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

三：后端基本结构：使用springboot+mybatis-plus

pom.xml：



	4.0.0
	
		org.springframework.boot
		spring-boot-starter-parent
		2.5.2
		 
	
	com.example
	demo
	0.0.1-SNAPSHOT
	demo
	Demo project for Spring Boot
	
		1.8
	
	
		
			com.baomidou
			mybatis-plus-boot-starter
			3.4.3.1
		


		
			org.springframework.boot
			spring-boot-starter-web
		
		
			org.mybatis.spring.boot
			mybatis-spring-boot-starter
			2.2.2
		

		
			mysql
			mysql-connector-java
			runtime
		
		
			org.projectlombok
			lombok
			true
		
		
			org.springframework.boot
			spring-boot-starter-test
			test
		
	

	
		
			
				org.springframework.boot
				spring-boot-maven-plugin
				
					
						
							org.projectlombok
							lombok

实体类：user：

package com.example.demo.entity;

import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@TableName("user")
@Data
@AllArgsConstructor
@NoArgsConstructor
public class User {

    @TableId(type = IdType.AUTO)
    private Integer id;

    private String username;
    private String password;
    private String nickName;
    private Integer age;
    private String sex;
    private String address;
    private String avatar;

}

Mapper接口：

package com.example.demo.mapper;

import com.baomidou.mybatisplus.core.mapper.baseMapper;
import com.example.demo.entity.User;

public interface UserMapper extends baseMapper {
}

返回结果封装类：Result：

package com.example.demo.common;



public class Result {
    private String code;
    private String msg;
    private T data;

    public String getCode() {
        return code;
    }

    public void setCode(String code) {
        this.code = code;
    }

    public String getMsg() {
        return msg;
    }

    public void setMsg(String msg) {
        this.msg = msg;
    }

    public T getData() {
        return data;
    }

    public void setData(T data) {
        this.data = data;
    }

    public Result() {
    }

    public Result(T data) {
        this.data = data;
    }

    public static Result success() {
        Result result = new Result<>();
        result.setCode("0");
        result.setMsg("成功");
        return result;
    }

    public static  Result success(T data) {
        Result result = new Result<>(data);
        result.setCode("0");
        result.setMsg("成功");
        return result;
    }

    public static Result error(String code, String msg) {
        Result result = new Result();
        result.setCode(code);
        result.setMsg(msg);
        return result;
    }
}

Mybatis-plus插件：

package com.example.demo.common;

import com.baomidou.mybatisplus.annotation.DbType;
import com.baomidou.mybatisplus.extension.plugins.MybatisPlusInterceptor;
import com.baomidou.mybatisplus.extension.plugins.inner.PaginationInnerInterceptor;
import org.mybatis.spring.annotation.MapperScan;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;


@Configuration
@MapperScan("com.example.demo.mapper")
public class MybatisPlusConfig {

    
    @Bean
    public MybatisPlusInterceptor mybatisPlusInterceptor() {
        MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();
        interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL));
        return interceptor;
    }

}

控制层：controller：

package com.example.demo.controller;

import com.example.demo.common.Result;
import com.example.demo.entity.User;
import com.example.demo.mapper.UserMapper;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import javax.annotation.Resource;



@RestController
@RequestMapping("/user")
public class UserController {

    @Resource
    UserMapper userMapper;
    
    @PostMapping
    public Result save(@RequestBody User user){
        userMapper.insert(user);
        return Result.success();
    }




}

三：数据交互：这里首先说前端我们怎样将home.vue里面的数据传输给后端？答案是使用axios！配置axios:

import axios from 'axios'

const request = axios.create({
    // 注意！！ 这里是全局统一加上了 '/api' 前缀，也就是说所有接口都会加上'/api'前缀在，页面里面写接口的时候就不要加 '/api'了，否则会出现2个'/api'，类似 '/api/api/user'这样的报错，切记！！！
    baseURL: '/api',
    timeout: 5000
})

// request 拦截器
// 可以自请求发送前对请求做一些处理
// 比如统一加token，对请求参数统一加密
request.interceptors.request.use(config => {
    config.headers['Content-Type'] = 'application/json;charset=utf-8';

    // config.headers['token'] = user.token;  // 设置请求头
    return config
}, error => {
    return Promise.reject(error)
});
// response 拦截器
// 可以在接口响应后统一处理结果
request.interceptors.response.use(
    response => {
        let res = response.data;
        // 如果是返回的文件
        if (response.config.responseType === 'blob') {
            return res
        }
        // 兼容服务端返回的字符串数据
        if (typeof res === 'string') {
            res = res ? JSON.parse(res) : res
        }
        return res;
    },
    error => {
        console.log('err' + error) // for debug
        return Promise.reject(error)
    }
)
export default request

配好这个以后在数据交互的home.vue界面就可以使用了：

浏览器还有一个跨域访问的问题：配置vue.config.js:

// 跨域配置
module.exports = {
    devServer: {                //记住，别写错了devServer//设置本地默认端口  选填
        port: 9876,
        proxy: {                 //设置代理，必须填
            '/api': {              //设置拦截器  拦截器格式   斜杠+拦截器名字，名字可以自己定
                target: 'http://localhost:7099',     //代理的目标地址
                changeOrigin: true,              //是否设置同源，输入是的
                pathRewrite: {                   //路径重写
                    '^/api': ''                     //选择忽略拦截器里面的内容
                }
            }
        }
    }
}

现在就可以测试了：

最新的home.vue:

这就是一个简单的前后端交互数据，接下来我们完善这个项目…未完… 加急更新…

Springboot+vue后台管理系统-前后端分离数据传递

Java相关栏目本月热门文章