SpringBoot+MyBatis+VUE前后端分离

秒速五厘米 2021-09-25 12:46 552阅读 0赞

### 文章目录 ###

*  需求分析
 *  1、创建表
 *  2、创建SpringBoot项目
 *   *  2.1 选择项目类型
     *  2.2 设置组名包名等（根据个人需求更改）
     *  2.3 选择依赖
     *   *  2.3.1 选择Web依赖
         *  2.3.2 选择MySQL和MyBatis依赖
     *  2.4 设置项目名和模板名（根据个人需求进行更改）
 *  3、在resources下新建配置文件application.yml
 *   *  3.1 在application.yml文件中设置mapper.xml文件所在位置
     *  3.2 第二种方法
 *  4、分页插件的配置以及文件映射的配置
 *   *  4.1 分页插件（使用pagehelper-spring-boot依赖）
     *  4.2 文件映射的配置
 *  5、后台代码编写
 *   *  5.1 文件分级（mapper.xml文件选择了第二种方法）
     *  5.2 Application中加入注解
     *  5.3 User.class
     *  5.4 UserMapper.class
     *  5.5 UserMapper.xml
     *  5.6 UserService.class
     *  5.7 UserServiceImpl.class
     *  5.8 UserController
 *  6、前端代码编写（使用WebStorm）
 *   *  6.1 创建vue项目
     *   *  6.1.1 在终端输入指令
         *  6.1.2 在main.js文件中加入以下配置（根据自己的main.js做出修改即可）
     *  6.2 文件分级
     *  6.3 导入组件
     *  6.4 List
     *  6.5 Add
     *  6.6 Update
 *  7、页面浏览效果

# 需求分析 #

题目：使用vue和elementui实现界面,使用springboot+mybatis实现后台,使用axios实现user(id,name,age)增删改查

# 1、创建表 #

三个字段

1.  id 类型int 主键 自动递增
2.  name 类型varchar
3.  age 类型int  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h5cGVydGV4dDEyMw_size_16_color_FFFFFF_t_70_pic_center]  
    ![在这里插入图片描述][f0e42032da8b4c9497019c12bafc450c.png_pic_center]

# 2、创建SpringBoot项目 #

## 2.1 选择项目类型 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h5cGVydGV4dDEyMw_size_16_color_FFFFFF_t_70_pic_center 1]

## 2.2 设置组名包名等（根据个人需求更改） ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h5cGVydGV4dDEyMw_size_16_color_FFFFFF_t_70_pic_center 2]

## 2.3 选择依赖 ##

### 2.3.1 选择Web依赖 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h5cGVydGV4dDEyMw_size_16_color_FFFFFF_t_70_pic_center 3]

### 2.3.2 选择MySQL和MyBatis依赖 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h5cGVydGV4dDEyMw_size_16_color_FFFFFF_t_70_pic_center 4]

## 2.4 设置项目名和模板名（根据个人需求进行更改） ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h5cGVydGV4dDEyMw_size_16_color_FFFFFF_t_70_pic_center 5]

设置完成后，选择Finish

# 3、在resources下新建配置文件application.yml #

## 3.1 在application.yml文件中设置mapper.xml文件所在位置 ##

spring:
      datasource:
        driver-class-name: com.mysql.cj.jdbc.Driver
        url: jdbc:mysql://localhost:3306/app0728?serverTimezone=GMT%2B8&useSSL=true
        username: root
        password: 123456
    
    
    mybatis:
      mapper-locations: classpath:mapping/*.xml

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h5cGVydGV4dDEyMw_size_16_color_FFFFFF_t_70_pic_center 6]

如果是这种方法，则需要在resources文件加下新建文件夹mapping  
![在这里插入图片描述][7a15fcb3c0bb40f6bbf34737aa4bf2db.png_pic_center]

## 3.2 第二种方法 ##

注意：application.yml中关于mybatis的mapper-locations配置也可以有另一种解决方法  
在pom.xml中加入resources（此时application.yml中不再需要配置mybatis:mapper-locations），写法如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h5cGVydGV4dDEyMw_size_16_color_FFFFFF_t_70_pic_center 7]

<build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
        <resources>
            <resource>
                <directory>src/main/java</directory>
                <includes>
                    <include>**/*.xml</include>
                </includes>
            </resource>
        </resources>
    </build>

# 4、分页插件的配置以及文件映射的配置 #

## 4.1 分页插件（使用pagehelper-spring-boot依赖） ##

<dependency>
                <groupId>com.github.pagehelper</groupId>
                <artifactId>pagehelper-spring-boot-starter</artifactId>
                <version>1.3.0</version>
            </dependency>

注意：如果使用的是pagehelper依赖（pagehelper，不是pagehelper-spring-boot-starter），则不能直接使用，还需要在application.yml中配置相关参数，不推荐这样做

## 4.2 文件映射的配置 ##

spring:
      datasource:
        driver-class-name: com.mysql.cj.jdbc.Driver
        url: jdbc:mysql://localhost:3306/app0728?serverTimezone=GMT%2B8
        username: root
        password: 123456
      resources:
        static-locations: file:D:\image  #访问系统外部资源，将该目录下的文件映射到系统下
      mvc:
        static-path-pattern: /upload/**  #该属性的默认值是/**

注意：resources和mvc需要和datasource保持同级

# 5、后台代码编写 #

## 5.1 文件分级（mapper.xml文件选择了第二种方法） ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h5cGVydGV4dDEyMw_size_16_color_FFFFFF_t_70_pic_center 8]

## 5.2 Application中加入注解 ##

package com.tjetc;
    
    import org.mybatis.spring.annotation.MapperScan;
    import org.springframework.boot.SpringApplication;
    import org.springframework.boot.autoconfigure.SpringBootApplication;
    
    @MapperScan("com.tjetc.mapper") //扫描mapper接口
    @SpringBootApplication
    public class Application { 
    
        public static void main(String[] args) { 
            SpringApplication.run(Application.class, args);
        }
    
    }

## 5.3 User.class ##

package com.tjetc.domain;
    
    public class User { 
        private Integer id;
        private String name;
        private Integer age;
    
        @Override
        public String toString() { 
            return "User{" +
                    "id=" + id +
                    ", name='" + name + '\'' +
                    ", age=" + age +
                    '}';
        }
    
        public User() { 
        }
    
        public User(Integer id, String name, Integer age) { 
            this.id = id;
            this.name = name;
            this.age = age;
        }
    
        public Integer getId() { 
            return id;
        }
    
        public void setId(Integer id) { 
            this.id = id;
        }
    
        public String getName() { 
            return name;
        }
    
        public void setName(String name) { 
            this.name = name;
        }
    
        public Integer getAge() { 
            return age;
        }
    
        public void setAge(Integer age) { 
            this.age = age;
        }
    }

## 5.4 UserMapper.class ##

package com.tjetc.mapper;
    
    import com.tjetc.domain.User;
    import org.springframework.stereotype.Repository;
    
    import java.util.List;
    
    @Repository
    public interface UserMapper { 
    
        List<User> listByName(String name);
    
        void add(User user);
    
        void update(User user);
    
        void del(Integer id);
    }

## 5.5 UserMapper.xml ##

<?xml version="1.0" encoding="utf-8" ?>
    <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
    <mapper namespace="com.tjetc.mapper.UserMapper">
        <select id="listByName" resultType="com.tjetc.domain.User">
            select * from user where name like concat('%',#{name},'%')
        </select>
    
        <insert id="add">
            insert into user(name,age) values(#{name},#{age})
        </insert>
    
        <update id="update">
            update user
            <set>
                <if test="name!=null">
                    name = #{name},
                </if>
                <if test="age!=null">
                    age = #{age},
                </if>
            </set>
            where id  = #{id}
        </update>
    
        <delete id="del">
            delete from user where id = #{id}
        </delete>
    </mapper>

## 5.6 UserService.class ##

package com.tjetc.service;
    
    import com.github.pagehelper.PageInfo;
    import com.tjetc.domain.User;
    
    public interface UserService { 
        PageInfo<User> listByName(String name, Integer curPage, Integer pageSize);
    
        void add(User user);
    
        void update(User user);
    
        void del(Integer id);
    }

## 5.7 UserServiceImpl.class ##

package com.tjetc.service.impl;
    
    import com.github.pagehelper.PageHelper;
    import com.github.pagehelper.PageInfo;
    import com.tjetc.domain.User;
    import com.tjetc.mapper.UserMapper;
    import com.tjetc.service.UserService;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Service;
    
    import java.util.List;
    
    @Service
    public class UserServiceImpl implements UserService { 
        @Autowired
        private UserMapper userMapper;
    
        @Override
        public PageInfo<User> listByName(String name, Integer curPage, Integer pageSize) { 
            PageHelper.startPage(curPage,pageSize);
            List<User> userList =  userMapper.listByName(name);
            PageInfo<User> page = new PageInfo<>(userList);
            return page;
        }
    
        @Override
        public void add(User user) { 
            userMapper.add(user);
        }
    
        @Override
        public void update(User user) { 
            userMapper.update(user);
        }
    
        @Override
        public void del(Integer id) { 
            userMapper.del(id);
        }
    }

## 5.8 UserController ##

package com.tjetc.controller;
    
    
    import com.github.pagehelper.PageInfo;
    import com.tjetc.domain.User;
    import com.tjetc.service.UserService;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.web.bind.annotation.CrossOrigin;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RequestParam;
    import org.springframework.web.bind.annotation.RestController;
    @RestController
    @CrossOrigin
    @RequestMapping("/user")
    public class UserController { 
    @Autowired
    private UserService userService;
    
    
        @RequestMapping("/list")
        public PageInfo<User> list(@RequestParam(defaultValue = "") String name,@RequestParam(defaultValue = "1")Integer curPage,@RequestParam(defaultValue = "2")Integer pageSize){ 
            PageInfo<User> page =    userService.listByName(name,curPage,pageSize);
            return page;
        }
    
    
        @RequestMapping("/add")
        public void add(User user){ 
            userService.add(user);
        }
        @RequestMapping("/update")
        public void update(User user){ 
            userService.update(user);
        }
        @RequestMapping("/del")
        public void del(Integer id){ 
            userService.del(id);
        }
    }

# 6、前端代码编写（使用WebStorm） #

## 6.1 创建vue项目 ##

### 6.1.1 在终端输入指令 ###

在Terminal终端输入以下命令  
vue init webpack 项目名称 安装模板 第一个y 其他都是n  
cnpm install vuex 安装vuex  
cnpm install element-ui 安装element-ui  
cnpm install axios

### 6.1.2 在main.js文件中加入以下配置（根据自己的main.js做出修改即可） ###

import Vue from 'vue'
    import ElementUI from 'element-ui'
    import 'element-ui/lib/theme-chalk/index.css'
    import App from './App'
    import router from './router'
    import VueRouter from 'vue-router'
    import axios from 'axios'
    Vue.config.productionTip = false
    Vue.prototype.$axios = axios
    axios.defaults.baseURL = 'http://localhost:8080/'
    Vue.use(ElementUI)
    Vue.use(VueRouter)
    new Vue({ 
      el: '#app',
      router,
      components: {  App },
      template: '<App/>'
    })

## 6.2 文件分级 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h5cGVydGV4dDEyMw_size_16_color_FFFFFF_t_70_pic_center 9]

## 6.3 导入组件 ##

在index.js中加入

import Vue from 'vue'
    import Router from 'vue-router'
    import HelloWorld from '@/components/HelloWorld'
    
    
    //用户表
    import UserList from '@/components/user/List'
    import UserAdd from '@/components/user/Add'
    import UserUpdate from '@/components/user/Update'
    Vue.use(Router)
    
    export default new Router({ 
      routes: [
        { 
          path: '/',
          redirect:'/user/list',
        },
        { 
          path:'/user/list',
          name:'UserList',
          component:UserList
        },
        { 
          path:'/user/add',
          name:'UserAdd',
          component:UserAdd
        },
        { 
          path:'/user/update',
          name:'UserUpdate',
          component:UserUpdate
        },
      ]
    })

## 6.4 List ##

<template>
      <div>
        <center>
          <div>
            <span style="font-size: 100px">用户表</span>
          </div>
          <div style="width:1000px">
            <el-card>
              <el-row :gutter="15">
                <el-col :span="8" :offset="4">
                  <el-input v-model="name" placeholder="名称"></el-input>
                </el-col>
                <el-col :span="2">
                  <el-button type="primary" class="el-icon-search" @click="paging(1)">点击搜索</el-button>
                </el-col>
                <el-col :span="6">
                  <el-button type="success" class="el-icon-circle-plus-outline" @click="toAdd">添加用户</el-button>
                </el-col>
              </el-row>
            </el-card>
          </div>
          <div style="width:1000px">
            <el-card>
              <el-table :data="page.list" >
                <el-table-column prop="id" label="序号" width="200"></el-table-column>
                <el-table-column prop="name" label="姓名" width="200"></el-table-column>
                <el-table-column prop="age" label="年龄" width="200"></el-table-column>
                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <el-button type="warning" class="el-icon-edit" @click="update(scope.row)">修改</el-button>
                    <el-button type="danger" class="el-icon-delete" @click="del(scope.row.id)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <el-pagination @size-change="sizeChange" @current-change="curChange" :current-page="page.pageNum" :page-size="page.pageSize" :page-sizes="[2,3,4,5]" layout="total,sizes,prev,pager,next,jumper" :total="page.total">
              </el-pagination>
            </el-card>
          </div>
    
        </center>
      </div>
    
    </template>
    
    <script> export default { data(){ return { page:{ }, name:'', pageSize:2, user:{ } } }, methods:{ paging(curPage){ this.$axios.get('/user/list?curPage='+curPage+'&pageSize='+this.pageSize+'&name='+this.name).then(resp=>{ this.page = resp.data }) }, update(b){ this.$router.push('/user/update?b='+JSON.stringify(b)) }, del(id){ this.$axios.get('/user/del?id=' + id).then(resp => { this.paging(1) }) }, sizeChange(newSize){ this.pageSize=newSize; this.paging(1) }, curChange(newPage){ this.paging(newPage) }, toAdd(){ this.$router.push('/user/add') } }, created() { this.paging(1) } } </script>
    
    <style scoped> </style>

## 6.5 Add ##

<template>
      <div>
        <center>
          <div style="width: 500px;">
            <el-card >
              <el-form ref="form" :model="user" label-width="80px">
                <el-form-item label="用户姓名">
                  <el-input v-model="user.name" placeholder="名称" ></el-input>
                </el-form-item>
                <el-form-item label="用户年龄">
                  <el-input v-model="user.age" placeholder="年龄" ></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="save">立即添加</el-button>
                  <el-button type="info" @click="cancel()">取消</el-button>
                </el-form-item>
              </el-form>
            </el-card>
          </div>
        </center>
      </div>
    </template>
    
    <script> export default { data(){ return{ user:{ } } }, methods:{ save() { this.$refs.form.validate((valid) => { if (valid) { var formData = new FormData() Object.keys(this.user).forEach(key => { formData.append(key, this.user[key]) }) this.$axios.post('/user/add', formData) .then(resp => { this.$router.push('/user/list') }) .catch(function(error) { console.log(error) }) } else { console.log('error submit!!') return false } })}, cancel(){ this.$router.push('/user/list') } }, created() { } } </script>
    
    <style scoped> </style>

## 6.6 Update ##

<template>
      <div>
        <center>
          <div style="width: 500px;">
            <el-card >
              <el-form ref="form" :model="user" label-width="80px">
                <el-form-item label="用户姓名">
                  <el-input v-model="user.name" placeholder="名称" ></el-input>
                </el-form-item>
                <el-form-item label="用户年龄">
                  <el-input v-model="user.age" placeholder="年龄" ></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="save">立即修改</el-button>
                  <el-button type="info" @click="cancel()">取消</el-button>
                </el-form-item>
              </el-form>
            </el-card>
          </div>
        </center>
      </div>
    </template>
    
    <script> export default { data(){ return{ user:{ } } }, methods:{ save() { this.$refs.form.validate((valid) => { if (valid) { var formData = new FormData() Object.keys(this.user).forEach(key => { formData.append(key, this.user[key]) }) this.$axios.post('/user/update', formData) .then(resp => { this.$router.push('/user/list') }) .catch(function(error) { console.log(error) }) } else { console.log('error submit!!') return false } })}, cancel(){ this.$router.push('/user/list') } }, created() { this.user = JSON.parse(this.$route.query.b) } } </script>
    
    <style scoped> </style>

# 7、页面浏览效果 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h5cGVydGV4dDEyMw_size_16_color_FFFFFF_t_70_pic_center 10]  
增删改查功能都是可以用的

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h5cGVydGV4dDEyMw_size_16_color_FFFFFF_t_70_pic_center]: /images/20210923/cb5e043ee0e545a69985e9264dda4cc0.png
[f0e42032da8b4c9497019c12bafc450c.png_pic_center]: /images/20210923/be3c9bb2f59a4bd09e31cecebce5f12e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h5cGVydGV4dDEyMw_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20210923/3fb060e841d544b4aa401ee165e1c704.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h5cGVydGV4dDEyMw_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20210923/6fb0e826898a477d94fdd2bf2cdb83e1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h5cGVydGV4dDEyMw_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20210923/fa49a95a6974427496847de402433aa3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h5cGVydGV4dDEyMw_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20210923/2b1f0d58b2344ba1a342fca70e100184.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h5cGVydGV4dDEyMw_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20210923/19d66ea66a6946e2bc9a0dbd0def469a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h5cGVydGV4dDEyMw_size_16_color_FFFFFF_t_70_pic_center 6]: /images/20210923/de75055f7a584944bc28bb2b97d0e1f1.png
[7a15fcb3c0bb40f6bbf34737aa4bf2db.png_pic_center]: /images/20210923/22f7b28901b74a5cba55c924387ad8c7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h5cGVydGV4dDEyMw_size_16_color_FFFFFF_t_70_pic_center 7]: /images/20210923/b8c944bc31d242b4800c024c281fc3b3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h5cGVydGV4dDEyMw_size_16_color_FFFFFF_t_70_pic_center 8]: /images/20210923/9e8ae2e56ef2468a97d064095e000d5c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h5cGVydGV4dDEyMw_size_16_color_FFFFFF_t_70_pic_center 9]: /images/20210923/e33eb73b918245de8fa079011e4b1e69.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h5cGVydGV4dDEyMw_size_16_color_FFFFFF_t_70_pic_center 10]: /images/20210923/1bf6fd074d534ec69aba1f8dce047218.png