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：

<template><divstyle="height: 50px;line-height: 50px;border-bottom: 1px solid #ccc;display: flex;background-color:#545c64"><divstyle="width: 200px;padding-left: 30px;font-weight: bold;color: white">后台管理</div><divstyle="flex: 1"></div><divstyle="width: 100px"><el-dropdownstyle="line-height: 3.5 ;color: white"><spanclass="el-dropdown-link">
          张三 <el-iconclass="el-icon--right"><arrow-down/></el-icon></span><template#dropdown><el-dropdown-menu><el-dropdown-item>个人信息</el-dropdown-item><el-dropdown-item>退出系统</el-dropdown-item></el-dropdown-menu></template></el-dropdown></div></div></template><script>import{ ArrowDown }from'@element-plus/icons-vue';exportdefault{
  components:{ArrowDown},
  name:"Header"}</script>

插入一下：新版element引入图标使用的script：i

mport { ArrowDown } from '@element-plus/icons-vue';

，项目中加入element是需要手动npm导入的，这里可以通过看官网介绍

Aside.vue：

<template><div><el-menustyle="width: 200px;min-height:calc(100vh - 50px)":uniqueOpened="true"default-active="2"class="el-menu-vertical-demo"background-color="#545c64"text-color="#fff"active-text-color="#ffd04b"><el-sub-menuindex="1"><template#title><iclass="el-icon-location"></i><span>导航一</span></template><el-menu-itemindex="1-4"><template#title>选项1-1</template></el-menu-item></el-sub-menu><el-menu-itemindex="2"><el-icon><document/></el-icon><template#title>导航二</template></el-menu-item><el-menu-itemindex="3"><el-icon><document/></el-icon><template#title>导航三</template></el-menu-item><el-menu-itemindex="4"><el-icon><setting/></el-icon><template#title>导航四</template></el-menu-item></el-menu></div></template><script>import{
  Location,
  Document,
  Menu as IconMenu,
  Setting,}from'@element-plus/icons-vue'exportdefault{
  components:{
    Location,
    Document,
    IconMenu,
    Setting
  },

  name:"Aside"}</script><stylescoped></style>

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:

<template><div><!--    头部--><Header/><!--    主体--><divstyle="display: flex"><!--      侧边栏--><Aside/><!--      内容区域--><router-viewstyle="flex: 1"/></div></div><!--  <router-view/>--></template><style></style><script>import Header from"@/components/Header";import Aside from"@/components/Aside";exportdefault{
  name:"Layout",
  components:{
    Header,
    Aside
  }}</script>

Home.vue：

<template><divstyle="padding: 10px"><!--    功能区域--><divstyle="margin: 10px 0px"><el-buttontype="primary"@click="add">新增</el-button><el-buttontype="primary">导入</el-button><el-buttontype="primary">导出</el-button></div><!--    搜索区域--><divstyle="margin: 10px 0px"><el-inputv-model="search"placeholder="请输入关键字"style="width: 20%"></el-input><el-buttontype="primary"style="margin-left: 5px">查询</el-button></div><el-table:data="tableData"borderstyle="width: 100%"><el-table-columnprop="id"label="ID"sortable="sortable"></el-table-column><el-table-columnprop="username"label="用户名"></el-table-column><el-table-columnprop="nickName"label="昵称"></el-table-column><el-table-columnprop="age"label="年龄"></el-table-column><el-table-columnprop="sex"label="性别"></el-table-column><el-table-columnprop="address"label="地址"></el-table-column><el-table-columnfixed="right"label="操作"width="100"><template#default="scope"><el-button@click="handleEdit(scope.row)"type="text"size="small">编辑</el-button><el-popconfirmtitle="确定删除吗？"><template#reference><el-buttontype="text">删除</el-button></template></el-popconfirm></template></el-table-column></el-table><divstyle="margin: 10px 0"><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="currentPage":page-sizes="[5, 10, 20]":page-size="10"layout="total, sizes, prev, pager, next, jumper":total="total"></el-pagination><el-dialogtitle="提示"v-model="dialogVisible"width="30%"><el-form:model="form"label-width="120px"><el-form-itemlabel="用户名"><el-inputv-model="form.username"style="width: 80%"></el-input></el-form-item><el-form-itemlabel="昵称"><el-inputv-model="form.nickName"style="width: 80%"></el-input></el-form-item><el-form-itemlabel="年龄"><el-inputv-model="form.age"style="width: 80%"></el-input></el-form-item><el-form-itemlabel="性别"><el-radiov-model="form.sex"label="男">男</el-radio><el-radiov-model="form.sex"label="女">女</el-radio></el-form-item><el-form-itemlabel="地址"><el-inputtype="textarea"v-model="form.address"style="width: 80%"></el-input></el-form-item></el-form><template#footer><spanclass="dialog-footer"><el-button@click="dialogVisible = false">取 消</el-button><el-buttontype="primary"@click="save">确 定</el-button></span></template></el-dialog></div></div></template><script>import request from"@/util/request";exportdefault{
  name:'Home',
  components:{},data(){return{
      form:{},
      dialogVisible:false,
      search:"",
      currentPage:1,
      total:10,
      tableData:[]}},
  methods:{// 新增用户add(){this.dialogVisible =true// 先清空表单域this.form ={}},// 保存用户传送给后台，使用常见的api:axiossave(){
      request.post("/user",this.form).then(res=>{
        console.log(res)})},handleEdit(){},handleSizeChange(){},handleCurrentChange(){}}}</script>

全局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
})exportdefault router

store:index.js

import{ createStore }from'vuex'exportdefaultcreateStore({
  state:{},
  mutations:{},
  actions:{},
  modules:{}})

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

pom.xml：

<?xml version="1.0" encoding="UTF-8"?><project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd"><modelVersion>4.0.0</modelVersion><parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>2.5.2</version><relativePath/><!-- lookup parent from repository --></parent><groupId>com.example</groupId><artifactId>demo</artifactId><version>0.0.1-SNAPSHOT</version><name>demo</name><description>Demo project forSpringBoot</description><properties><java.version>1.8</java.version></properties><dependencies><dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus-boot-starter</artifactId><version>3.4.3.1</version></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>org.mybatis.spring.boot</groupId><artifactId>mybatis-spring-boot-starter</artifactId><version>2.2.2</version></dependency><dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><scope>runtime</scope></dependency><dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId><optional>true</optional></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-test</artifactId><scope>test</scope></dependency></dependencies><build><plugins><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId><configuration><excludes><exclude><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId></exclude></excludes></configuration></plugin></plugins></build></project>

实体类：user：

packagecom.example.demo.entity;importcom.baomidou.mybatisplus.annotation.IdType;importcom.baomidou.mybatisplus.annotation.TableId;importcom.baomidou.mybatisplus.annotation.TableName;importlombok.AllArgsConstructor;importlombok.Data;importlombok.NoArgsConstructor;@TableName("user")@Data@AllArgsConstructor@NoArgsConstructorpublicclassUser{@TableId(type =IdType.AUTO)privateInteger id;privateString username;privateString password;privateString nickName;privateInteger age;privateString sex;privateString address;privateString avatar;}

Mapper接口：

packagecom.example.demo.mapper;importcom.baomidou.mybatisplus.core.mapper.BaseMapper;importcom.example.demo.entity.User;publicinterfaceUserMapperextendsBaseMapper<User>{}

返回结果封装类：Result：

packagecom.example.demo.common;/**
 * 返回结果的包装类
 * @param <T>
 */publicclassResult<T>{privateString code;privateString msg;privateT data;publicStringgetCode(){return code;}publicvoidsetCode(String code){this.code = code;}publicStringgetMsg(){return msg;}publicvoidsetMsg(String msg){this.msg = msg;}publicTgetData(){return data;}publicvoidsetData(T data){this.data = data;}publicResult(){}publicResult(T data){this.data = data;}publicstaticResultsuccess(){Result result =newResult<>();
        result.setCode("0");
        result.setMsg("成功");return result;}publicstatic<T>Result<T>success(T data){Result<T> result =newResult<>(data);
        result.setCode("0");
        result.setMsg("成功");return result;}publicstaticResulterror(String code,String msg){Result result =newResult();
        result.setCode(code);
        result.setMsg(msg);return result;}}

Mybatis-plus插件：

packagecom.example.demo.common;importcom.baomidou.mybatisplus.annotation.DbType;importcom.baomidou.mybatisplus.extension.plugins.MybatisPlusInterceptor;importcom.baomidou.mybatisplus.extension.plugins.inner.PaginationInnerInterceptor;importorg.mybatis.spring.annotation.MapperScan;importorg.springframework.context.annotation.Bean;importorg.springframework.context.annotation.Configuration;/**
 *  mybatis-plus 分页插件
 */@Configuration@MapperScan("com.example.demo.mapper")publicclassMybatisPlusConfig{/**
     * 分页插件
     */@BeanpublicMybatisPlusInterceptormybatisPlusInterceptor(){MybatisPlusInterceptor interceptor =newMybatisPlusInterceptor();
        interceptor.addInnerInterceptor(newPaginationInnerInterceptor(DbType.MYSQL));return interceptor;}}

控制层：controller：

packagecom.example.demo.controller;importcom.example.demo.common.Result;importcom.example.demo.entity.User;importcom.example.demo.mapper.UserMapper;importorg.springframework.web.bind.annotation.PostMapping;importorg.springframework.web.bind.annotation.RequestBody;importorg.springframework.web.bind.annotation.RequestMapping;importorg.springframework.web.bind.annotation.RestController;importjavax.annotation.Resource;/**
 * @RestController:返回数据
 * @Controller：渲染界面
 */@RestController@RequestMapping("/user")publicclassUserController{@ResourceUserMapper userMapper;/**
     * 新增  @RequestBody:前台传过来的json转换为java对象
     * @return
     */@PostMappingpublicResult<?>save(@RequestBodyUser user){
        userMapper.insert(user);returnResult.success();}}

三：数据交互：

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

配置axios:

importaxios 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 =>{returnPromise.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 debugreturnPromise.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:

<template><divstyle="padding: 10px"><!--    功能区域--><divstyle="margin: 10px 0px"><el-buttontype="primary"@click="add">新增</el-button><el-buttontype="primary">导入</el-button><el-buttontype="primary">导出</el-button></div><!--    搜索区域--><divstyle="margin: 10px 0px"><el-inputv-model="search"placeholder="请输入关键字"style="width: 20%"></el-input><el-buttontype="primary"style="margin-left: 5px">查询</el-button></div><el-table:data="tableData"borderstyle="width: 100%"><el-table-columnprop="id"label="ID"sortable="sortable"></el-table-column><el-table-columnprop="username"label="用户名"></el-table-column><el-table-columnprop="nickName"label="昵称"></el-table-column><el-table-columnprop="age"label="年龄"></el-table-column><el-table-columnprop="sex"label="性别"></el-table-column><el-table-columnprop="address"label="地址"></el-table-column><el-table-columnfixed="right"label="操作"width="100"><template#default="scope"><el-button@click="handleEdit(scope.row)"type="text"size="small">编辑</el-button><el-popconfirmtitle="确定删除吗？"><template#reference><el-buttontype="text">删除</el-button></template></el-popconfirm></template></el-table-column></el-table><divstyle="margin: 10px 0"><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="currentPage":page-sizes="[5, 10, 20]":page-size="10"layout="total, sizes, prev, pager, next, jumper":total="total"></el-pagination><el-dialogtitle="提示"v-model="dialogVisible"width="30%"><el-form:model="form"label-width="120px"><el-form-itemlabel="用户名"><el-inputv-model="form.username"style="width: 80%"></el-input></el-form-item><el-form-itemlabel="昵称"><el-inputv-model="form.nickName"style="width: 80%"></el-input></el-form-item><el-form-itemlabel="年龄"><el-inputv-model="form.age"style="width: 80%"></el-input></el-form-item><el-form-itemlabel="性别"><el-radiov-model="form.sex"label="男">男</el-radio><el-radiov-model="form.sex"label="女">女</el-radio></el-form-item><el-form-itemlabel="地址"><el-inputtype="textarea"v-model="form.address"style="width: 80%"></el-input></el-form-item></el-form><template#footer><spanclass="dialog-footer"><el-button@click="dialogVisible = false">取 消</el-button><el-buttontype="primary"@click="save">确 定</el-button></span></template></el-dialog></div></div></template><script>import request from"@/util/request";exportdefault{
  name:'Home',
  components:{},data(){return{
      form:{},
      dialogVisible:false,
      search:"",
      currentPage:1,
      total:10,
      tableData:[]}},
  methods:{// 新增用户add(){this.dialogVisible =true// 先清空表单域this.form ={}},// 保存用户传送给后台，使用常见的api:axiossave(){
      request.post("/user",this.form).then(res=>{
        console.log(res)})this.dialogVisible=false},handleEdit(){},handleSizeChange(){},handleCurrentChange(){}}}</script>

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

加急更新…