(手把手带你写) SpringBoot+Mybatis+MySQL+Vue实现CRUD+分页

养乐多滋滋滋

已于 2024-03-11 08:25:10 修改

阅读量1.5k

点赞数 44

文章标签： vue.js spring boot mybatis

于 2024-01-10 09:54:25 首次发布

本文链接：https://blog.csdn.net/qq_45690736/article/details/135495854

版权

#创作灵感#

最近闲着没事，顺便复习下Springboot、vue，于是就写了这份代码
该项目具体功能：简单的crud和分页
项目采用前后分离（springboot+vue）

一：项目展示

1效果展示如下：

2首页：

3修改：

添加：

删除：

二：创建项目

1：创建后端代码

左侧导航栏选择Spring Initializr

点击下一步,选择Spring Web和Mysql Driver依赖如下图：

点击创建即可：

配置文件源码：

在resources下创建application.yml

配置文件代码如下：

##改变端口号
server:
  port: 8081

#配置数据源  datasource
spring:
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://localhost:3306/encryptdb?serverTimezone=UTC
    username: root
    password: root
#mybatis配置
mybatis:
  type-aliases-package: org.spring.springboot.domain
  mapper-locations: classpath:mapper/*.xml

　　我所用到的maven（在项目的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>

    <groupId>com.jl</groupId>

    <artifactId>Crud_Two</artifactId>

    <version>0.0.1-SNAPSHOT</version>

    <name>Crud_Two</name>

    <description>Crud_Two</description>

    <properties>

        <java.version>1.8</java.version>

        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>

        <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>

        <spring-boot.version>2.6.13</spring-boot.version>

    </properties>



    <dependencies>

        <dependency>

            <groupId>org.projectlombok</groupId>

            <artifactId>lombok</artifactId>

            <optional>true</optional>

        </dependency>

        <dependency>

            <groupId>org.springframework.boot</groupId>

            <artifactId>spring-boot-starter-jdbc</artifactId>

        </dependency>

        <dependency>

            <groupId>org.springframework.boot</groupId>

            <artifactId>spring-boot-starter-web</artifactId>

        </dependency>

        <dependency>

            <groupId>com.mysql</groupId>

            <artifactId>mysql-connector-j</artifactId>

            <scope>runtime</scope>

        </dependency>

        <dependency>

            <groupId>org.mybatis.spring.boot</groupId>

            <artifactId>mybatis-spring-boot-starter</artifactId>

            <version>2.1.3</version>

        </dependency>

        <!--Junit 单元测试依赖-->

        <dependency>

            <groupId>junit</groupId>

            <artifactId>junit</artifactId>

            <version>4.12</version>

        </dependency>

        <!--SpringBoot Test依赖-->

        <dependency>

            <groupId>org.springframework.boot</groupId>

            <artifactId>spring-boot-starter-test</artifactId>

            <scope>test</scope>

            <exclusions>

                <exclusion>

                    <groupId>org.junit.vintage</groupId>

                    <artifactId>junit-vintage-engine</artifactId>

                </exclusion>

            </exclusions>

        </dependency>

    </dependencies>





    <dependencyManagement>

        <dependencies>

            <dependency>

                <groupId>org.springframework.boot</groupId>

                <artifactId>spring-boot-dependencies</artifactId>

                <version>${spring-boot.version}</version>

                <type>pom</type>

                <scope>import</scope>

            </dependency>

        </dependencies>

    </dependencyManagement>



    <build>

        <plugins>

            <plugin>

                <groupId>org.apache.maven.plugins</groupId>

                <artifactId>maven-compiler-plugin</artifactId>

                <version>3.8.1</version>

                <configuration>

                    <source>1.8</source>

                    <target>1.8</target>

                    <encoding>UTF-8</encoding>

                </configuration>

            </plugin>

            <plugin>

                <groupId>org.springframework.boot</groupId>

                <artifactId>spring-boot-maven-plugin</artifactId>

                <version>${spring-boot.version}</version>

                <configuration>

                    <mainClass>com.jl.crud.CrudApplication</mainClass>

                    <skip>true</skip>

                </configuration>

                <executions>

                    <execution>

                        <id>repackage</id>

                        <goals>

                            <goal>repackage</goal>

                        </goals>

                    </execution>

                </executions>

            </plugin>

        </plugins>

    </build>

</project>

　　项目整体结构如下：

首先在Pojo目录下创建实体类User

源码：

package com.jl.crud_two.Pojo;



import lombok.Data;



/**

 * @Author Jin

 * @Description

 * @Date 2024/1/6 14:52

 **/

@Data

public class User {

    private Integer id;

    private String name;

    private Integer age;

}

　　在Mapper目录下创建UserMapper：

源码：

package com.jl.crud_two.Mapper;



import com.jl.crud_two.Pojo.User;

import org.apache.ibatis.annotations.Mapper;



import java.util.List;



/**

 * @Author Jin

 * @Description

 * @Date 2024/1/6 14:59

 **/

@Mapper

public interface UserMapper {

    /**

     * 分页查询员工信息

     * @param starRows

     * @return 每一页的员工信息的集合

     */

    public List<User> queryPage(Integer starRows);



    /**

     * 每一行的个数

     * @return

     */

    public int getRowCount();



    /**

     * 插入

     * @param user

     * @return

     */

    public int insertUser(User user);



    /**

     * 通过id删除员工信息

     * @param id

     * @return 是否成功

     */

    public Integer delete(int id);



    /**

     * 更新员工信息

     * @param user

     * @return 是否成功

     */

    public int Update(User user);



    /**

     * 根据id查询

     * @param id

     * @return

     */

    public User byId(Integer id);

}

　　在Service目录下创建UserService：

源码：

package com.jl.crud_two.Service;



import com.jl.crud_two.Mapper.UserMapper;

import com.jl.crud_two.Pojo.User;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.stereotype.Service;



import java.util.List;



/**

 * @Author Jin

 * @Description

 * @Date 2024/1/6 15:09

 **/

@Service

public class UserService {

    @Autowired

    UserMapper userMapper;





    /**

     * 分页

     * @param starRows

     * @return

     */

    public List<User> queryPage(Integer starRows){

        return userMapper.queryPage(starRows);

    }



    /**

     * 每一行的个数

     * @return

     */

    public int getRowCount(){

        return userMapper.getRowCount();

    }



    /**

     * 插入

     * @param user

     * @return

     */

    public User insertUser(User user){

        userMapper.insertUser(user);

       return user;

    }



    /**

     * 通过id删除员工信息

     * @param id

     * @return 是否成功

     */

    public Integer delete(int id){

        return userMapper.delete(id);

    }



    /**

     * 更新员工信息

     * @param user

     * @return 是否成功

     */

    public int Update(User user){

        return userMapper.Update(user);

    }



    /**

     * 根据id查询

     * @param id

     * @return

     */

    public User byId(Integer id){

        return userMapper.byId(id);

    }

}

　　在resources目录下创建mapper目录：

在mapper目录下创建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.jl.crud_two.Mapper.UserMapper">

    <resultMap id="result" type="com.jl.crud_two.Pojo.User">

        <result property="id" column="id"></result>

        <result property="name" column="name"></result>

        <result property="age" column="age"></result>

    </resultMap>



    <!--分页查询-->

    <select id="queryPage" parameterType="Integer" resultMap="result">

        select *

        from user

        order by id desc limit #{startRows}, 5;

    </select>



    <!--查询用户的总条数-->

    <select id="getRowCount" resultType="Integer">/*返回值类型是Integer*/

    select count(*)

    from user;

    </select>



    <!--插入数据-->

    <insert id="insertUser" parameterType="com.jl.crud_two.Pojo.User">

        insert into user(name, age)

        values (#{name}, #{age})

    </insert>



    <!--删除-->

    <delete id="delete" parameterType="int">

        delete

        from user

        where id = #{id}

    </delete>



    <!--更新-->

    <update id="Update" parameterType="com.jl.crud_two.Pojo.User">

        update user

        set user.name=#{name},

            user.age=#{age}

        where user.id = #{id};

    </update>



    <!--    根据id查询-->

    <select id="byId" resultMap="result">

        select *

        from user

        where id = #{id}

    </select>

</mapper>

　　在Controller目录下创建UserController

源码：

package com.jl.cx.Controller;

import com.jl.cx.Pojo.User;
import com.jl.cx.Service.UserService;
import org.apache.ibatis.annotations.Param;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import java.util.List;

/**
 * @Author Jin
 * @Description
 * @Date 2024/1/9 14:03
 **/
@RestController
@RequestMapping("/UserController")
public class UserController {
    @Autowired
    UserService userService;

    /**
     * 通过员工id删除员工
     *
     * @param id
     * @return
     */
    @RequestMapping(value = "/delete", method = RequestMethod.POST)
    public Integer delete(@Param("id") Integer id) {
        System.out.println(id);

        return userService.delete(id);
    }

    /**
     * 更新员工
     *
     * @param user
     * @return
     */
    @RequestMapping(value = "/update", method = RequestMethod.POST)
    @ResponseBody
    public String update(@RequestBody User user) {
        int result = userService.Update(user);
        if (result >= 1) {
            return "修改成功";
        } else {
            return "修改失败";
        }
    }

    /**
     * 插入员工
     *
     * @param user
     * @return
     */
    @RequestMapping(value = "/insert", method = RequestMethod.POST)
    public User insert(@RequestBody User user) {
        return userService.insertUser(user);
    }

    @RequestMapping(value = "/byId")
    @ResponseBody
    public User byId(Integer id) {
        return userService.byId(id);
    }

    /**
     * 查询页数
     *
     * @param page
     * @return
     */
    @RequestMapping(value = "/page", method = RequestMethod.POST)
    @ResponseBody
    public List<User> page(Integer page) {
        int pageNow = page == null ? 1 : page;//传入的页数是null  就查询第一页   否则就根据传入的页数进行查询
        int pageSize = 5;
        int startRows = pageSize * (pageNow - 1);//开始的行数
        List<User> list = userService.queryPage(startRows);
        return list;
    }

    @RequestMapping(value = "rows")
    @ResponseBody
    public int rows() {
        return userService.getRowCount();
    }

}

　　后端代码编写完成，随后启动项目

vue开始操作！！！

2：创建vue项目

1：根据自己的需求，在对应的路径，输入cmd，

2：在cmd里面输入：vue ui，如下图：

3：点击create，开始创建vue项目

4：点击Create a new project here，开始创建项目，详细操作如下图：

注意：在创建项目的时候，系统给了3种方式创建项目。

①：默认创建操作都一样，这里以vue2版本为主，

②：选择第二个，如下图

③：等待系统创建

④：出现如下图，就代表这项目已成功创建，在这里可以对项目下载插件

⑤：通过开发软件，来启动项目，分别输入指令：

npm-install; npm run serve；
npm i vue-router@3.5.2 -S；
npm i element-ui；
npm install axios

如下图：

首先输入：npm-install

以上下载依赖安装成功后，记得在main.xml里面引入依赖：

源码：

import Vue from 'vue'

import App from './App.vue'

import router from './router'



import VueRouter from 'vue-router'



// 前后端分离,必须装配这两个1.引入axios

import axios from 'axios'



// 引入elementUI

import ElementUi from 'element-ui'

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

import store from 'core-js/internals/shared-store'



Vue.config.productionTip = false



// 2.配置axios,Jquery对象$符号开头

Vue.prototype.$http = axios

Vue.config.productionTip = false

Vue.use(ElementUi, VueRouter)



new Vue({

  router,

  store,

  render: h => h(App)

}).$mount('#app')

　输入启动项目指令

npm run serve

看到该页面，项目创建成功

1：配置vue.config.js：

源码：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  lintOnSave: false, // 关闭eslint校验
  transpileDependencies: true,

  devServer: {
    open: true, // 自动打开
    port: 8081, // 设置端口号
    host: '127.0.0.1', // 设置host
    proxy: {
      '/api': {
        target: 'http://localhost:8081',
        changeOrigin: true,
        chunkOrigins: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }

})

　　开始编写crud页面

创建首页vue界面，index.vue

源码：

<template>

  <div align="center">

    <!--tableData存放数据的数组-->

    <el-table

      :data="tableData"

      border

      style="width: 60%">

      <el-table-column

        prop="id"

        label="唯一标识"

        width="120">

      </el-table-column>

      <el-table-column

        prop="name"

        label="名称"

        width="120">

      </el-table-column>



      <el-table-column

        prop="age"

        label="年龄"

        width="120">

      </el-table-column>



      <el-table-column

        fixed="right"

        label="操作"

        width="150">

        <template slot-scope="scope"><!--scope作用域-->

          <!--当前所有字段值-->

          <el-button @click="update(scope.row)"><i class="el-icon-edit"></i></el-button>

          <el-button @click="deleteClick(scope.row)"><i class="el-icon-delete"></i></el-button>

        </template>

      </el-table-column>

    </el-table>

    <el-button @click="addBanner" type="text" size="small">添加</el-button>



    <!-- 分页开始 -->

    <!-- 分页器 -->

    <div class="block" style="margin-top:15px;">

      <el-pagination

        @size-change="handleSizeChange"

        @current-change="handleCurrentChange"

        :current-page="currentPage"

        :page-sizes="[10, 15, 20, 25]"

        :page-size="pageSize"

        layout="total, prev, pager, next, jumper"

        :total="total">

      </el-pagination>

    </div>

    <!-- 分页结束 -->



  </div>

</template>



<script>

export default {

  name: 'HelloWorld',

  data () {

    return {

      tableData: [], // 查询所有数组

      id: null,

      delsselection: [], // 接收多选的列表

      imageUrl: '',

      // 分页相关数据

      currentPage: 1, // 当前页码

      total: 20, // 总条数

      pageSize: 3 // 每页的数据条数



    }

  },

  mounted () {

    this.getlivestockInfo(1)

  },

  methods: {

    // 分页

    // 每页条数改变时触发 选择一页显示多少行

    handleSizeChange (val) {

      console.log(`每页 ${val} 条`)

      // this.currentPage = 1;

      this.pageSize = val

    },

    // 当前页改变时触发 跳转其他页

    handleCurrentChange (val) {

      console.log(`当前页: ${val}`)

      this.currentPage = val

      this.getlivestockInfo(val)

    },

    getlivestockInfo (num1) {

      const params = new URLSearchParams()

      params.append('pageNum', num1)

      this.$http.post('/api/UserController/page', params) // 补上后台接口即可

        .then(response => { // 请求成功

          console.log('请求成功')



          console.log(this.tableData)

          // this.currentPage=num1;

          this.total = response.data.length

          this.tableData = response.data.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize)

          // console.log(this.tableData.list.length);

        }).catch(error => { // 请求失败

          console.log('请求失败')

          console.log(error)

        })

    },



    // getAll() {

    //   this.$http.get('/api/StudentController/ListStudent').then(res => {

    //     console.log("res.data==============>", res.data)

    //     this.tableData = res.data

    //   })

    // },

    handleClick (row) {

      console.log('点击查看携带的参数', row)

      this.$router.push({

        path: '/GetOne',

        name: 'GetOne',

        params: {

          id: row.id

        }

      })

    },

    addBanner () {

      this.$router.push({

        path: '/add',

        name: 'add'

      })

    },

    update (row) {

      // 跳转页面,携带参数

      this.$router.push({

        // 路径 名称 参数

        path: '/update',

        name: 'update',

        params: {

          id: row.id

        }

      })

    },

    deleteClick (row) {

      this.$confirm('确定删除吗？', { type: 'warning' }).then(res => {

        this.$http.post('/api/UserController/delete?id=' + row.id).then(res => {

          this.$message.success('true')

          console.log('res.data=======================>', res.data)

          this.getAll()

        })

      }).catch(() => {

        this.$message.info('取消')x

      })

    },

    handleSelectionChange (val) {

      console.log('打印val的值', val)

      this.delsselection = val

    },



    uploading () {

      this.$router.push({

        path: '/Fileupload',

        name: 'Fileupload'

      })

    }

  },



  created () {

    this.getAll()

  }

}

</script>



<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>



</style>

　　配置index路由：

源码：

import Vue from 'vue'

import VueRouter from 'vue-router'

import index from '../components/index.vue'

Vue.use(VueRouter)



const routes = [

  {

    path: '/',

    name: 'index',

    component: index

  }

]



const router = new VueRouter({

  routes

})



export default router

　　创建修改vue界面，update

源码：

<template>

  <div align="center">

    <el-form :model="banner" status-icon ref="ruleForm" style="width: 20%" label-width="100px" class="demo-ruleForm">

      <el-form-item label="名称" prop="name">

        <el-input v-model.number="formLabelAlign.name"></el-input>

      </el-form-item>



      <el-form-item label="年龄" prop="age">

        <el-input v-model.number="formLabelAlign.age"></el-input>

      </el-form-item>



      <el-form-item>

        <el-button type="primary" @click="update">提交</el-button>

        <el-button>取消</el-button>

      </el-form-item>

    </el-form>



  </div>



</template>



<script>

export default {

  data () {

    return {

      id: null,

      formLabelAlign: {}, // 接收返回对象

      bannertypes: []

    }

  },

  methods: {

    getOne () {

      this.$http.get('/api/UserController/byId', { params: { id: this.id } }).then(res => {

        console.log('res.data查询单个==============>', res.data)

        this.formLabelAlign = res.data

      }).catch(err => {

        this.$message.error('查询单个错误!')

      })

    },

    // getBannerTypes(){

    //   this.$http.get('/api/banner/getTypes').then(res=>{

    //     this.bannertypes=res.data;

    //   })

    // },

    update () {

      this.$http.post('/api/UserController/update', this.formLabelAlign).then(res => {

        console.log('res.data修改返回结果==============>', res.data)

        if (res.status === 200) {

          this.$message.success('修改成功')

          this.$router.push({

            path: '/'

          })

        } else {

          this.$message.error('修改失败')

        }

      })

    }

  },

  created () {

    this.id = this.$route.params.id

    this.getOne()

    // this.getBannerTypes()

  }

}

</script>



<style scoped>



</style>

　　配置update路由：

源码：

import Vue from 'vue'
import VueRouter from 'vue-router'
import index from '../components/index.vue'
import update from '@/components/update.vue'
Vue.use(VueRouter)

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

const router = new VueRouter({
  routes
})

export default router

　　创建添加vue界面，add.vue

源码：

<template>

  <div align="center">

    <el-form :model="banner" status-icon ref="ruleForm" style="width: 20%" label-width="100px" class="demo-ruleForm">

      <el-form-item label="名称" prop="name">

        <el-input v-model.number="formLabelAlign.name"></el-input>

      </el-form-item>



      <el-form-item label="年龄" prop="age">

        <el-input v-model.number="formLabelAlign.age"></el-input>

      </el-form-item>



      <el-form-item>

        <el-button type="primary" @click="add">添加</el-button>

        <el-button>取消</el-button>

      </el-form-item>

    </el-form>



  </div>



</template>



<script>

export default {

  data () {

    return {

      /* formLabelAlign:[] */

      formLabelAlign: {

        name: '',

        gender: '',

        age: '',

        address: '',

        email: ''

      }

    }

  },

  methods: {

    add () {

      this.$http.post('/api/UserController/insert', this.formLabelAlign).then(res => {

        console.log('res.data==============>', res.data)

        if (res.status === 200) {

          this.$router.push({

            path: '/'

          })

        }

      })

    }

  },

  created () {



  }

}

</script>



<style scoped>



</style>

　　配置add路由

源码：

import Vue from 'vue'
import VueRouter from 'vue-router'
import index from '../components/index.vue'
import update from '@/components/update.vue'
import add from '@/components/add.vue'
Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'index',
    component: index
  },
  {
    path: '/update',
    name: 'update',
    component: update
  },
  {
    path: '/add',
    name: 'add',
    component: add
  }
]

const router = new VueRouter({
  routes
})

export default router

由于删除是通过触发按钮进行操作的，所以删除没有单独的页面，删除功能在index界面。

项目下载地址：

链接：https://pan.baidu.com/s/15e5XQBth3lRpg9kK9JGlZg?pwd=2002
提取码：2002