SpringBoot+Mybatis+MySQL+Vue实现CRUD+分页

##改变端口号
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

<?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>

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;
}

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);
}

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);
    }
}

<?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>

package com.jl.crud_two.Controller;

import com.jl.crud_two.Mapper.UserMapper;
import com.jl.crud_two.Pojo.User;
import com.jl.crud_two.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/6 15:21
 **/
@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();
    }

}

'use strict'
// Template version: 1.3.1
// see http://vuejs-templates.github.io/webpack for documentation.

const path = require('path')

module.exports = {
  dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/api':{
        target:'http://localhost:8081',
        changeOrigin:true,
        chunkOrigins:true,
        pathRewrite:{
          '^/api':''
        }
      }
    },

    // Various Dev Server settings
    host: 'localhost', // can be overwritten by process.env.HOST
    port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
    autoOpenBrowser: false,
    errorOverlay: true,
    notifyOnErrors: true,
    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-


    /**
     * Source Maps
     */

    // https://webpack.js.org/configuration/devtool/#development
    devtool: 'cheap-module-eval-source-map',

    // If you have problems debugging vue-files in devtools,
    // set this to false - it *may* help
    // https://vue-loader.vuejs.org/en/options.html#cachebusting
    cacheBusting: true,

    cssSourceMap: true
  },

  build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',

    /**
     * Source Maps
     */

    productionSourceMap: true,
    // https://webpack.js.org/configuration/devtool/#production
    devtool: '#source-map',

    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],

    // Run the build command with an extra argument to
    // View the bundle analyzer report after build finishes:
    // `npm run build --report`
    // Set to `true` or `false` to always turn it on or off
    bundleAnalyzerReport: process.env.npm_config_report
  }
}

<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){
    var 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('取消');
    })
  },
  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>

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
  
  ]
})

<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>

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import add from "../components/add";
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/add',
      name: 'add',
      component: add
    },
  ]
})

<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>

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import add from "../components/add";
import update from "../components/update";

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/add',
      name: 'add',
      component: add
    },
    {
      path: '/update',
      name: 'update',
      component: update
    }
  ]
})