Vue_综合案例

1.1 案例需求

完成用户的查询、修改、删除等操作

前端（浏览器端）：vue

后端（服务器端）：spring boot+spring mvc+mybatis

1.2 数据库设计与表结构

CREATE TABLE T_USER(
id INT PRIMARY KEY AUTO_INCREMENT,
age INT,
username VARCHAR(20),
password VARCHAR(50),
email VARCHAR(50),
sex VARCHAR(20)
)

导入数据：

INSERT INTO T_USER (username,PASSWORD,age,sex,email) VALUES ('张三','123',22,'男','zhangsan@163.com'),('李四','123',20,'女','lisi@163.com')

1.3 服务器端

1.3.1 创建SpringBoot项目

过程略。

1.3.2 导入jar包

pom.xml

<!-- 统一版本维护 -->
<properties>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
    <java.version>1.8</java.version>
    <mybatis.starter.version>1.3.2</mybatis.starter.version>
    <mapper.starter.version>2.0.2</mapper.starter.version>
    <mysql.version>5.1.32</mysql.version>
    <pageHelper.starter.version>1.2.5</pageHelper.starter.version>
    <durid.starter.version>1.1.10</durid.starter.version>
</properties>
<dependencies>
    <!-- SpringBoot整合SpringMVC的启动器 -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <!-- SpringBoot整合jdbc和事务的启动器 -->
    <dependency>
        <groupId>org.springframework.boot</groupId