SpringBoot-Vue实现增删改查及分页小DEMO

SpringBoot-Vue实现增删改查及分页小DEMO

前言

主要通过后端 Spring Boot 技术和前端 Vue 技术来简单开发一个demo，实现增删改查、分页功能以及了解Springboot搭配vue完成前后端分离项目的开发流程。

开发栈

前端

• 开发工具：WebStorm
• 开发框架：vue + axios
• 包管理工具: npm
• 打包工具：webpack

后端

• 开发工具：IDEA
• 开发框架：Springboot + mybatis
• 打包工具：maven
• 数据库： MySQL

PS：假设以上的的工具你都安装好啦，写CRUD小DEMO时进坑了，这篇blog参考一下，仅供参考，仅供参考?，，如有不足请不吝赐教。

后端开发环境搭建

1、File->New->Project…

2、选择 Spring Initializr ，然后选择默认的 url 点击next

3、勾选Spring Web、SQL模板，next

4、点击finish，搭建完成

后端开发过程

1、更新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 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>com.example</groupId>
    <artifactId>demo</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>springboot-mybatis</name>

    <!-- Spring Boot 启动父依赖 -->
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.1.3.RELEASE</version>
    </parent>

    <properties>
        <mybatis-spring-boot>1.2.0</mybatis-spring-boot>
        <mysql-connector>5.1.39</mysql-connector>
    </properties>

    <dependencies>

        <!-- Spring Boot Web 依赖 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <!-- Spring Boot Test 依赖 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>

        <!-- Spring Boot Mybatis 依赖 -->
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>${mybatis-spring-boot}</version>
        </dependency>

        <!-- MySQL 连接驱动依赖 -->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>${mysql-connector}</version>
        </dependency>

        <!-- Junit -->
        <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
            <version>4.12</version>
        </dependency>
    </dependencies>
</project>

2、新建 demo\src\main\java\com\example\demo\entity\User.java

package com.example.demo.entity;

public class User {
   
    private int userId;
    private String userDate;
    private String userName;
    private String userAddress;

   //省略get() and set()
}

3、更新demo\src\main\resources\application.properties

## 数据源配置
spring.datasource.url=jdbc:mysql://localhost:3306/test1?useUnicode=true&characterEncoding=utf8
spring.datasource.username=root
spring.datasource.password=123
spring.datasource.driver-class-name=com.mysql.jdbc.Driver

## Mybatis 配置
mybatis.typeAliasesPackage=org.spring.springboot.domain
mybatis.mapperLocations=classpath:mapper/*.xml

## 端口
server.port=8081

4、新建demo\src\main\java\com\example\demo\mapper\UserMapper.java

package com.example.demo.mapper;

import com.example.demo.entity.User;
import org.apache.ibatis.annotations.Mapper;

import java.util.List;

Mapper
public interface UserMapper {
   

    public List<User> findUserByName(String userName);

    public List<User> ListUser();

    public List<User> queryPage(Integer startRows);

    public int getRowCount();

    public int insertUser(User user);

    public int delete(int userId);

    public int Update(User user);
}

5、新建demo\src\main\resources\mapper\UserMapper.xml

<?xml version = "1.0" encoding = "UTF-8"?>
<!DOCTYPE mapper PUBLIC
        "-//mybatis.org//DTD com.example.Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.example.demo.mapper.UserMapper">

    <resultMap id="result" type="com.example.demo.entity.User">
        <result property="userId" column="userId" />
		<result property="userDate" column="userDate" />
        <result property="userName" column="userName" />
        <result property="userAddress" column="userAddress"/>
    </resultMap>

    <select id="ListUser" resultMap="result">
		SELECT * FROM user
	</select>

    <select id="findUserByName" resultMap="result" parameterType="String">
		SELECT * FROM user
			where userName like concat(concat('%',#{userName}),'%')
			order by userId desc
	</select>

	<select id="queryPage" resultMap="result"  parameterType="Integer">
		select * from user
			order by userId desc
			limit #{startRows},5
	</select>

	<select id="getRowCount" resultType="Integer">
		select count(*) from user
	</select>

    <insert id="insertUser" parameterType="com.example.demo.entity.User">
		INSERT INTO user
		(
		userId,userDate,userName,userAddress
		)
		VALUES (
		#{userId},
		#{userDate, jdbcType=VARCHAR},
		#{userName, jdbcType=VARCHAR},
		#{userAddress, jdbcType=VARCHAR}
		)
	</insert>

    <delete id="delete" parameterType="int">
		delete from user where userId=#{userId}
	</delete>

    <update id="Update" parameterType="com.example.demo.entity.User">
		update user
			set user.userDate=#{userDate},user.userName=#{userName},user.userAddress=#{userAddress}
			where user.userId=#{userId}
	</update>
</mapper>

6、新建demo\src\main\java\com\example\demo\service\UserService.java

package com.example.demo.service;

import com.example.demo.entity.User;
import com.example.demo.mapper.UserMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;


Service
public class UserService {
   

    @Autowired
    private UserMapper userMapper;

    public List<User> findByName(String userName) {
   
        return userMapper.findUserByName(userName);
    }

    public List<User> queryPage(Integer startRows) {
   
        return userMapper.queryPage(startRows);
    }

    public int getRowCount() {
   
        return userMapper.getRowCount();
    }

    public User insertUser(User user) {
   
        userMapper.insertUser(user);
        return user;
    }

    public List<User> ListUser(){
   
        return userMapper.ListUser();
    }

    public int Update(User user){
   
        return userMapper.Update(user);
    }

    public int delete(int userId){
   
        return userMapper.delete(userId);
    }

}

7、新建demo\src\main\java\com\example\demo\controller\UserCtrl.java

package com.example.demo.controller;

import com.example.demo.entity.User;
import com.example.demo.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import java.util.List;

RestController
public class UserCtrl {
   

    @Autowired
    private UserService userService;