springboot+vue搭建后台

抬头满天星星

已于 2022-07-02 15:36:30 修改

阅读量1.5k

点赞数

分类专栏：笔记文章标签： vue.js spring boot javascript

于 2022-07-02 15:21:49 首次发布

本文链接：https://blog.csdn.net/weixin_46088280/article/details/125573430

版权

本文档详细记录了使用SpringBoot和Vue搭建后台系统的全过程，包括前端环境的Vue后台主体搭建、整体完善，后端环境的创建、数据库配置、分页查询，以及SpringBoot集成Mybatis-Plus，实现数据的导入导出和用户登录等功能。同时，涵盖了前端跨域、数据绑定等常见问题的解决方案。

摘要由CSDN通过智能技术生成

代码地址：https://github.com/hyblist/SpringBoot-Vue2.git

jdk1.8

mysql

node

navicat

idea

SpringBoot + Vue

1、前端环境搭建

1、Vue后台主体搭建

地址：https://element.eleme.cn/#/zh-CN/component/installation

弹窗：https://layuion.com/docs/

docsify动态生成您的文档网站:https://docsify.js.org/#/

安装：

npm i element-ui -S

搭建项目

1、vue-cli安装：

# 设置淘宝镜像
npm config set registry https://registry.npm.taobao.org

# 安装vue-cli
npm install -g @vue/cli

2、创建一个名为vue的工程

vue create vue

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Y75jaYg2-1656746400673)(springboot+vue.assets/image-20220626135443407.png)]

3、测试启动

cd vue
npm run serve

4、项目结构

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tCpKvhrY-1656746400675)(springboot+vue.assets/image-20220626135932147.png)]

5、安装element-ui

npm i element-ui -S

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

//{small}指定空间大小
Vue.use(ElementUI,{
   small})

6、修样式

新建goloable.css,并在main.js导入import ‘./assets/goloable.css’

/*全局去除边框*/
html,body,div{
   
    margin: 0;
    padding: 0;
}
/*设置高度*/
html,body{
   
    height: 100%;
}

Home.vue

<!--https://element.eleme.cn/#/zh-CN/component/container#container-bu-ju-rong-qi  搜布局容器，取其中代码，并做修改-->
<template>
<div style="height: 100%">
<!--菜单下面的横线border: 1px solid #eee"，去掉-->
  <el-container style="height: 100%">
<!--页面架构-->
<!--el-aside侧边栏-->
<!--el-container有el-header主体 设置颜色：border-bottom: 1px solid #ccc;居中line-height: 60px-->
<!--el-container-->
    <el-aside width="200px" style="background-color: rgb(238, 241, 246);height: 100%" >
      <el-menu :default-openeds="['1', '3']" style="height: 100%">
        <el-submenu index="1">
          <template slot="title"><i class="el-icon-message"></i>导航一</template>
          <el-menu-item-group>
            <template slot="title">分组一</template>
            <el-menu-item index="1-1">选项1</el-menu-item>
            <el-menu-item index="1-2">选项2</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group title="分组2">
            <el-menu-item index="1-3">选项3</el-menu-item>
          </el-menu-item-group>
          <el-submenu index="1-4">
            <template slot="title">选项4</template>
            <el-menu-item index="1-4-1">选项4-1</el-menu-item>
          </el-submenu>
        </el-submenu>
        <el-submenu index="2">
          <template slot="title"><i class="el-icon-menu"></i>导航二</template>
          <el-menu-item-group>
            <template slot="title">分组一</template>
            <el-menu-item index="2-1">选项1</el-menu-item>
            <el-menu-item index="2-2">选项2</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group title="分组2">
            <el-menu-item index="2-3">选项3</el-menu-item>
          </el-menu-item-group>
          <el-submenu index="2-4">
            <template slot="title">选项4</template>
            <el-menu-item index="2-4-1">选项4-1</el-menu-item>
          </el-submenu>
        </el-submenu>
        <el-submenu index="3">
          <template slot="title"><i class="el-icon-setting"></i>导航三</template>
          <el-menu-item-group>
            <template slot="title">分组一</template>
            <el-menu-item index="3-1">选项1</el-menu-item>
            <el-menu-item index="3-2">选项2</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group title="分组2">
            <el-menu-item index="3-3">选项3</el-menu-item>
          </el-menu-item-group>
          <el-submenu index="3-4">
            <template slot="title">选项4</template>
            <el-menu-item index="3-4-1">选项4-1</el-menu-item>
          </el-submenu>
        </el-submenu>
      </el-menu>
    </el-aside>

    <el-container>
      <el-header style="text-align: right; font-size: 12px;border-bottom: 1px solid #ccc;line-height: 60px">
        <el-dropdown>
          <i class="el-icon-setting" style="margin-right: 15px"></i>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>查看</el-dropdown-item>
            <el-dropdown-item>新增</el-dropdown-item>
            <el-dropdown-item>删除</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <span>王小虎</span>
      </el-header>

      <el-main>
        <el-table :data="tableData">
          <el-table-column prop="date" label="日期" width="140">
          </el-table-column>
          <el-table-column prop="name" label="姓名" width="120">
          </el-table-column>
          <el-table-column prop="address" label="地址">
          </el-table-column>
        </el-table>
      </el-main>
    </el-container>
  </el-container>
</div>
</template>

<script>

export default {
  data() {
    const item = {
      date: '2016-05-02',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1518 弄'
    };
    return {
      tableData: Array(10).fill(item)
    }
  }
}
</script>

2、Vue后台整体完善（一）

1、设置整体页面100%

goloable.css

/* * 全局元素生效 */
*{
   
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

App.vue

<template>
  <div id="app">
    <router-view/>
  </div>
</template>
<style>
    
</style>

2、调整Home.vue

Home.vue 去除div，并设置<el-container style=“height: 100vh”>；并进行以下设置

<!--https://element.eleme.cn/#/zh-CN/component/container#container-bu-ju-rong-qi  搜布局容器，取其中代码，并做修改-->
<template>
  <!--菜单下面的横线border: 1px solid #eee"，去掉-->
  <el-container style="height: 100vh">
    <!--页面架构-->
    <!--el-aside侧边栏-->
    <!--el-container有el-header主体 设置颜色：border-bottom: 1px solid #ccc;居中line-height: 60px-->
    <!--el-container-->
    <!--:width="sideWidth+'px'",绑定，并使其自动更换宽度-->
    <el-aside :width="sideWidth+'px'" style="background-color: rgb(238, 241, 246); box-shadow: 2px 0 20px  #888888;" >
      <!--overflow: hidden 多层子菜单菜单超出，设置样式；background-color：颜色；text-color字体颜色-->
      <!--active-text-color="#ffdo4b" 选中菜单的颜色；绑定  :collapse-transition="false"菜单的动漫:
      collapse="isCollapse"菜单收缩根据这个变量来变化  -->
      <el-menu :default-openeds="['1', '3']" style="min-height: 100%; overflow: hidden"
      background-color="rgb(48,65,86)"
      text-color="#fff"
      active-text-color="#ffdo4b"
      :collapse-transition="false"
      :collapse="isCollapse"
      >
        <!--设置log,新增一个div;style="height: 60px;line-height: 60px;设置高度text-align: center"位置居中，左（默认），右-->
        <!--style="width: 20px"设置图片大小;position: relative;位置相对 top: 5px 下移动；-->
        <div style="height: 60px;line-height: 60px;text-align: center">
          <img src="../assets/logo.png" alt="" style="width: 20px;position: relative;top: 5px;margin-right: 5px">
          <!--是否展示绑定一个变量v-show="logoTextShow"-->
          <b style="color: white" v-show="logoTextShow">后台管理系统</b>
        </div>
        <el-submenu index="1">
          <template slot="title">
            <!--样式有问题调整导航-->
            <i class="el-icon-message"></i>
            <span>导航一</span>
          </template>
          <el-menu-item-group>
            <template slot="title">分组一</template>
            <el-menu-item index="1-1">选项1</el-menu-item>
            <el-menu-item index="1-2">选项2</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group title="分组2">
            <el-menu-item index="1-3">选项3</el-menu-item>
          </el-menu-item-group>
          <el-submenu index="1-4">
            <template slot="title">选项4</template>
            <el-menu-item index="1-4-1">选项4-1</el-menu-item>
          </el-submenu>
        </el-submenu>
        <el-submenu index="2">
          <template slot="title">
            <i class="el-icon-menu"></i>
            <span>导航二</span>
          </template>
          <el-menu-item-group>
            <template slot="title">分组一</template>
            <el-menu-item index="2-1">选项1</el-menu-item>
            <el-menu-item index="2-2">选项2</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group title="分组2">
            <el-menu-item index="2-3">选项3</el-menu-item>
          </el-menu-item-group>
          <el-submenu index="2-4">
            <template slot="title">选项4</template>
            <el-menu-item index="2-4-1">选项4-1</el-menu-item>
          </el-submenu>
        </el-submenu>
        <el-submenu index="3">
          <template slot="title">
            <i class="el-icon-setting"></i>
            <span>导航三</span>
          </template>
          <el-menu-item-group>
            <template slot="title">分组一</template>
            <el-menu-item index="3-1">选项1</el-menu-item>
            <el-menu-item index="3-2">选项2</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group title="分组2">
            <el-menu-item index="3-3">选项3</el-menu-item>
          </el-menu-item-group>
          <el-submenu index="3-4">
            <template slot="title">选项4</template>
            <el-menu-item index="3-4-1">选项4-1</el-menu-item>
          </el-submenu>
        </el-submenu>
      </el-menu>
    </el-aside>

    <el-container>
      <!--菜单顶部调整-->
      <el-header style=" font-size: 12px;border-bottom: 1px solid #ccc;line-height: 60px;display: flex">
        <div style="flex: 1;font-size: 18px">
          <!--绑定点击事件-->
          <span v-bind:class="collapseBtnClass" style="cursor:pointer; " @click="collapse"></span>
        </div>
        <!--el-dropdown下展图标设置，可以通过f12知道其位置-->
        <el-dropdown style="width: 70px; cursor:pointer">
          <!--class="el-icon-caret-bottom"图标样式；style="margin-left: 5px"可以设置与文字距离-->
          <span>王小虎</span><i class="el-icon-caret-bottom" style="margin-left: 5px"></i>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>个人信息</el-dropdown-item>
            <el-dropdown-item>退出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-header>

      <el-main>
        <el-table :data="tableData">
          <el-table-column prop="date" label="日期" width="140">
          </el-table-column>
          <el-table-column prop="name" label="姓名" width="120">
          </el-table-column>
          <el-table-column prop="address" label="地址">
          </el-table-column>
        </el-table>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>

export default {
  data() {
    const item = {
      date: '2016-05-02',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1518 弄'
    };
    return {
      tableData: Array(10).fill(item),
      collapseBtnClass:'el-icon-s-fold',
      isCollapse:false,
      sideWidth:200,
      //logo处理
      logoTextShow:true
    }
  },
  methods:{
    collapse(){ //点击按钮触发修改
      this.isCollapse = !this.isCollapse
      if (this.isCollapse){ //收缩
        this.sideWidth = 64
        //并更换图标
        this.collapseBtnClass='el-icon-s-unfold'
        this.logoTextShow = false
      }else {//展开
        this.sideWidth = 200
        //并更换图标
        this.collapseBtnClass='el-icon-s-fold'
        this.logoTextShow = true
      }

    }
  }
}
</script>

3、Vue后台整体完善（二）

1、添加分页

<!--完整版-->
<!--分页:style="padding: 20px(高度) 10px(margin-left[默认隐藏]:10px)[左距离] 设置位置-->
<div style="padding: 20px 10px">
<el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[100, 200, 300, 400]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400">
    </el-pagination>
</div>

2、定制样式

/*定制样式*/

/* * 全局元素生效 */
*{
   
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/*可以随意起名字*/
.ml-5{
   
    margin-left: 10px;
}

.ml-5{
   
    margin-right: 5px;
}

.pd-10{
   
    padding: 10px 0;
}

3、调整Home.vue

<!--https://element.eleme.cn/#/zh-CN/component/container#container-bu-ju-rong-qi  搜布局容器，取其中代码，并做修改-->
<template>
  <!--菜单下面的横线border: 1px solid #eee"，去掉-->
  <el-container style="height: 100vh">
    <!--页面架构-->
    <!--el-aside侧边栏-->
    <!--el-container有el-header主体 设置颜色：border-bottom: 1px solid #ccc;居中line-height: 60px-->
    <!--el-container-->
    <!--:width="sideWidth+'px'",绑定，并使其自动更换宽度-->
    <el-aside :width="sideWidth+'px'" style="background-color: rgb(238, 241, 246);  box-shadow: 2px 0 20px  #888888;" >
      <!--overflow: hidden 多层子菜单菜单超出，设置样式；background-color：颜色；text-color字体颜色-->
      <!--active-text-color="#ffdo4b" 选中菜单的颜色；绑定  :collapse-transition="false"菜单的动漫:
      collapse="isCollapse"菜单收缩根据这个变量来变化  -->
      <el-menu :default-openeds="['1', '3']" style="min-height: 100%; overflow: hidden"
      background-color="rgb(48,65,86)"
      text-color="#fff"
      active-text-color="#ffdo4b"
      :collapse-transition="false"
      :collapse="isCollapse"
      >
        <!--设置log,新增一个div;style="height: 60px;line-height: 60px;设置高度text-align: center"位置居中，左（默认），右-->
        <!--style="width: 20px"设置图片大小;position: relative;位置相对 top: 5px 下移动；-->
        <div style="height: 60px;line-height: 60px;text-align: center">
          <img src="../assets/logo.png" alt="" style="width: 20px;position: relative;top: 5px;margin-right: 5px">
          <!--是否展示绑定一个变量v-show="logoTextShow"-->
          <b style="color: white" v-show="logoTextShow">后台管理系统</b>
        </div>
        <el-submenu index="1">
          <template slot="title">
            <!--样式有问题调整导航-->
            <i class="el-icon-message"></i>
            <span>导航一</span>
          </template>
          <el-menu-item-group>
            <template slot="title">分组一</template>
            <el-menu-item index="1-1">选项1</el-menu-item>
            <el-menu-item index="1-2">选项2</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group title="分组2">
            <el-menu-item index="1-3">选项3</el-menu-item>
          </el-menu-item-group>
          <el-submenu index="1-4">
            <template slot="title">选项4</template>
            <el-menu-item index="1-4-1">选项4-1</el-menu-item>
          </el-submenu>
        </el-submenu>
        <el-submenu index="2">
          <template slot="title">
            <i class="el-icon-menu"></i>
            <span>导航二</span>
          </template>
          <el-menu-item-group>
            <template slot="title">分组一</template>
            <el-menu-item index="2-1">选项1</el-menu-item>
            <el-menu-item index="2-2">选项2</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group title="分组2">
            <el-menu-item index="2-3">选项3</el-menu-item>
          </el-menu-item-group>
          <el-submenu index="2-4">
            <template slot="title">选项4</template>
            <el-menu-item index="2-4-1">选项4-1</el-menu-item>
          </el-submenu>
        </el-submenu>
        <el-submenu index="3">
          <template slot="title">
            <i class="el-icon-setting"></i>
            <span>导航三</span>
          </template>
          <el-menu-item-group>
            <template slot="title">分组一</template>
            <el-menu-item index="3-1">选项1</el-menu-item>
            <el-menu-item index="3-2">选项2</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group title="分组2">
            <el-menu-item index="3-3">选项3</el-menu-item>
          </el-menu-item-group>

        </el-submenu>
      </el-menu>
    </el-aside>

    <el-container>
      <!--菜单顶部调整-->
      <el-header style=" font-size: 12px;border-bottom: 1px solid #ccc;line-height: 60px;display: flex">
        <div style="flex: 1;font-size: 18px">
          <!--绑定点击事件-->
          <span v-bind:class="collapseBtnClass" style="cursor:pointer; " @click="collapse"></span>
        </div>
        <!--el-dropdown下展图标设置，可以通过f12知道其位置-->
        <el-dropdown style="width: 70px; cursor:pointer">
          <!--class="el-icon-caret-bottom"图标样式；style="margin-left: 5px"可以设置与文字距离-->
          <span>王小虎</span><i class="el-icon-caret-bottom" style="margin-left: 5px"></i>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>个人信息</el-dropdown-item>
            <el-dropdown-item>退出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-header>

      <el-main>
        <!--添加面包屑-->
        <div style = "margin-bottom: 30px">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>用户管理</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <!--搜索position: relative ; top:-10px连这用的-->
        <div style="position: relative ; top:-10px">
          <!--width英 [wɪdθ]宽度；placeholder="请输入名称"提示语，suffix-icon="el-icon-search"嵌套图标-->
          <el-input style="width: 200px" placeholder="请输入名称" suffix-icon="el-icon-search" class="mr-10"></el-input>
          <el-input style="width: 200px" placeholder="邮箱" suffix-icon="el-icon-message" class="mr-10"></el-input>
          <el-input style="width: 200px" placeholder="地址" suffix-icon="el-icon-position" class="mr-10"></el-input>
          <el-button class="ml-5" type="primary">搜索</el-button>
        </div>
        <!--按钮 <i class="el-icon-circle-plus-outline" >嵌套按钮-->
        <div style=" position: relative; top:-6px ">
          <el-button type="primary">新增   <i class="el-icon-circle-plus-outline" ></i></el-button>
          <el-button type="danger">批量删除   <i class="el-icon-circle-close"></i></el-button>
          <el-button type="primary">导入  <i class="el-icon-top"></i></el-button>
          <el-button type="primary">导出  <i class="el-icon-bottom"></i></el-button>
        </div>

        <!--表格设置边框border stripe有线-->
        <!--:header-cell-class-name="headerBg"和下面的<script><script>有联系-->
        <el-table :data="tableData" border stripe :header-cell-class-name="headerBg">
          <el-table-column prop="date" label="日期" width="120">
          </el-table-column>
          <el-table-column prop="name" label="姓名"  width="120" >
          </el-table-column>
          <el-table-column prop="address" label="地址">
          </el-table-column>
          <!--添加编辑操作-->
          <el-table-column label="操作" width="150" >
            <template slot-scope="scope" >
              <el-button >编辑</el-button>
              <el-button type="danger">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--分页:style="padding: 20px(高度) 10px(margin-left[默认隐藏]:10px)[左距离] 设置位置-->
        <div style="padding: 20px 10px">
          <el-pagination
              :page-sizes="[5, 10, 15, 20]"
              :page-size="10"
              layout="total, sizes, prev, pager, next, jumper"
              :total="400">
          </el-pagination>
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>

export default {
  data() {
    const item = {
      date: '2016-05-02',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1518 弄'
    };
    return {
      tableData: Array(10).fill(item),
      collapseBtnClass:'el-icon-s-fold',
      isCollapse:false,
      sideWidth:200,
      //logo处理
      logoTextShow:true,
      headerBg:'headerBg'
    }
  },
  methods:{
    collapse(){ //点击按钮触发修改
      this.isCollapse = !this.isCollapse
      if (this.isCollapse){ //收缩
        this.sideWidth = 64
        //并更换图标
        this.collapseBtnClass='el-icon-s-unfold'
        this.logoTextShow = false
      }else {//展开
        this.sideWidth = 200
        //并更换图标
        this.collapseBtnClass='el-icon-s-fold'
        this.logoTextShow = true
      }

    }
  }
}
</script>

<style>
.headerBg{
  background: rgba(204, 204, 204, 0.59) !important;
}
</style>

2、后端环境搭建

1、创建springboot项目，和配置数据库

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KQyXRYtX-1656746400677)(springboot+vue.assets/image-20220626212732545.png)]

2、把vue项目拉到springboot里面，并在springboot配置启动前端的配置[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CJRv56q0-1656746400678)(springboot+vue.assets/image-20220626214628189.png)]

测试前后端是否正常运行

3、搭建/连接数据库

1、创建sys_user表

1-1、一个表要有唯一的主键,勾选自动递增

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QzmMIKAF-1656746400678)(springboot+vue.assets/image-20220627093836101.png)]

1-2、创建时间字段默认值CURRENT_TIMESTAMP

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tv75T5gL-1656746400679)(springboot+vue.assets/image-20220627094426869.png)]

1-3、创建表的sql

CREATE TABLE `sys_user` (
  `id` int(11) NOT NULL AUTO_INCREMENT COMMENT 'id',
  `username` varchar(50) DEFAULT NULL,
  `password` varchar(50) DEFAULT NULL,
  `nickname` varchar(50) DEFAULT NULL COMMENT '昵称',
  `email` varchar(50) DEFAULT NULL,
  `phone` varchar(50) DEFAULT NULL,
  `address` varchar(50) DEFAULT NULL,
  `create_time` timestamp NULL DEFAULT CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=utf8;

2、测试查询数据

entity 英 [ˈentəti] 实体：User.java

//entity 英 [ˈentəti] 实体

package com.yebin.springboot.entity;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
//实体类。get/set
@Data
public class User {
   
    private Integer id;
    private String username;
    private String password;
    private String nickname;
    private String email;
    private String phone;
    private String address;
}

mapper(作用：与数据库交互)：UserMapper.java

package com.yebin.springboot.mapper;

import com.yebin.springboot.entity.User;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;

import java.util.List;

//Mapper专门用来与数据库交互的
@Mapper //把UserMapper，注入bean
public interface UserMapper {
   

    //@Select,mybatis的注解
    @Select("select * from sys_user")
    //泛型方法
    List<User> findAll();
}

controller: UserController.java

package com.yebin.springboot.controller;

import com.yebin.springboot.entity.User;
import com.yebin.springboot.mapper.UserMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;

@RestController
public class UserController {
   

    @Autowired //注入其他类的注解
    private UserMapper userMapper;
    @GetMapping("/")
    private List<User> index(){
   
        return userMapper.findAll();
    }
}

4、实现增删改查

安装mybatisx插件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-depPnMzp-1656746400680)(springboot+vue.assets/image-20220627115620336.png)]

controller: UserController.java

package com.yebin.springboot.controller;

import com.yebin.springboot.entity.User;
import com.yebin.springboot.mapper.UserMapper;
import com.yebin.springboot.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import java.util.List;

@RestController
@RequestMapping("/user")//统一加/user，如
public class UserController {
   

    @Autowired //注入其他类的注解
    private UserMapper userMapper;

    @Autowired
    private UserService userService;

    @GetMapping
    private List<User> index(){
   
        return userMapper.findAll();
    }

    @PostMapping    //post请求
    private Integer save(@RequestBody User user){
     //@RequestBody可以把前端传来的对象转成java对象
        //新增或更新
        return userService.save(user);
    }

    @DeleteMapping("/{id}")
    private Integer delete(@PathVariable Integer id){
     //@PathVariable接收id
        return userMapper.deleteById(id);
    }
}

mapper(作用：与数据库交互)：UserMapper.java

package com.yebin.springboot.mapper;

import com.yebin.springboot.entity.User;
import org.apache.ibatis.annotations.*;

import java.util.List;

//Mapper专门用来与数据库交互的
@Mapper //把UserMapper，注入bean
public interface UserMapper {
   

    //@Select,mybatis的注解
    @Select("select * from sys_user")
    //泛型方法
    List<User> findAll();

    @Insert("INSERT INTO sys_user(username,password,nickname,email,phone,address) VALUES(#{username},#{password},#{nickname},#{email},#{phone},#{address})")
    int insert(User user);

//    //这样写会导致，有些字段我本来不想更新的，但是却给了个null，所有要使用动态sql，在resources里面创建mapper文件夹，并新增User.xml(mybatis的xml)
//    @Update("update sys_user set username = #{username}, password = #{password}, nickname= #{nickname}," +
//            "email = #{email},phone = #{phone},address = #{address} where id = #{id}")
    int update(User