"阅读目录一、项目分析 1、需求 2、技术点二、项目地址、截图 1、项目地址 2、项目截图三、后端项目环境搭建 1、使用 IDEA 创建一个 maven 工程。 2、引入项目依赖的 jar 包（配置依赖信息）。 3、配置 ssm 整合的文件（详细过程后续展开）。 4、官方文档：三、（3.1）S ...."

someone1
AI专业者开发社区 1 号成员
AI开发者社区 • 0 回帖 • 26 浏览 • 4 个月前

SSM + VUE 实现简单的 CRUD

阅读目录

回到顶部

一、项目分析

1、需求

（1）使用 ssm + vue 实现一个 crud（数据库增删改查）的简单实现。
（2）前后端分离，前端页面展示 + 后台管理。

2、技术点

（1）基础框架： SSM（Spring，SpringMVC，Mybatis）
（2）数据库： Mysql
（3）前端： UI 框架 iView + vue
（4）项目依赖管理： maven
（5）分页： pagehelper
（6）逆向工程： Mybatis Generator
（7）开发工具：IDEA + Chrome + HBuilder X

回到顶部

二、项目地址、截图

1、项目地址

　　front：https://github.com/lyh-man/ssm_crud-front.git

　　back：https://github.com/lyh-man/ssm_crud-back.git

2、项目截图

（1）初始界面（查数据）

　　Step1：初始化界面（获取第一页数据）

　　Step2：可以设置每页数据的条数，如下，设置 20 条 / 页

　　Step3：点击设置按钮，可以设置表格样式。

　　Step4：切换页面，数据刷新（根据当前页码向后台发送请求，获取数据）

（2）修改数据

　　Step1：点击编辑按钮（如下，选择第一条数据，展示所选择的数据。）

　　Step2：修改数据

　　Step3：修改后，展示数据

（3）删除数据

　　Step1：点击删除按钮（比如第一条数据），会弹出一个提示框

　　Step2：选择 Ok，删除该数据

（3）添加数据

　　Step1：点击添加按钮

　　Step2：填写信息

　　Step3：点击确定，插入数据，并跳转到最后一页

回到顶部

三、后端项目环境搭建

　　搭建后的整个文件结构：

1、使用 IDEA 创建一个 maven 工程。

　　可以参考 https://www.cnblogs.com/l-y-h/p/11454933.html

2、引入项目依赖的 jar 包（配置依赖信息）。

　　需要配置 Spring，SpringMVC，mybatis，数据库连接池，数据库驱动包，以及其他的 jar 包，比如 junit 等。

【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>
<span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">groupId</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>com.lyh<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">groupId</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
<span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">artifactId</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>crud<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">artifactId</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
<span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">version</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>1.0-SNAPSHOT<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">version</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
<span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">packaging</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>war<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">packaging</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>

<span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">name</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>crud Maven Webapp<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">name</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
<span style="color: rgba(0, 128, 0, 1)">&lt;!--</span><span style="color: rgba(0, 128, 0, 1)"> FIXME change it to the project's website </span><span style="color: rgba(0, 128, 0, 1)">--&gt;</span>
<span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">url</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>http://www.example.com<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">url</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>

<span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">properties</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
    <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">jar.version</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>4.3.17.RELEASE<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">jar.version</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">properties</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>

<span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">dependencies</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
    <span style="color: rgba(0, 128, 0, 1)">&lt;!--</span><span style="color: rgba(0, 128, 0, 1)"> Spring WebMVC </span><span style="color: rgba(0, 128, 0, 1)">--&gt;</span>
    <span style="color: rgba(0, 128, 0, 1)">&lt;!--</span><span style="color: rgba(0, 128, 0, 1)"> https://mvnrepository.com/artifact/org.springframework/spring-webmvc </span><span style="color: rgba(0, 128, 0, 1)">--&gt;</span>
    <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">dependency</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
        <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">groupId</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>org.springframework<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">groupId</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
        <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">artifactId</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>spring-webmvc<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">artifactId</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
        <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">version</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>${jar.version}<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">version</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
    <span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">dependency</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>

    <span style="color: rgba(0, 128, 0, 1)">&lt;!--</span><span style="color: rgba(0, 128, 0, 1)"> Spring JDBC </span><span style="color: rgba(0, 128, 0, 1)">--&gt;</span>
    <span style="color: rgba(0, 128, 0, 1)">&lt;!--</span><span style="color: rgba(0, 128, 0, 1)"> https://mvnrepository.com/artifact/org.springframework/spring-jdbc </span><span style="color: rgba(0, 128, 0, 1)">--&gt;</span>
    <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">dependency</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
        <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">groupId</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>org.springframework<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">groupId</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
        <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">artifactId</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>spring-jdbc<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">artifactId</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
        <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">version</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>${jar.version}<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">version</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
    <span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">dependency</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>

    <span style="color: rgba(0, 128, 0, 1)">&lt;!--</span><span style="color: rgba(0, 128, 0, 1)"> Spring Aspects </span><span style="color: rgba(0, 128, 0, 1)">--&gt;</span>
    <span style="color: rgba(0, 128, 0, 1)">&lt;!--</span><span style="color: rgba(0, 128, 0, 1)"> https://mvnrepository.com/artifact/org.springframework/spring-aspects </span><span style="color: rgba(0, 128, 0, 1)">--&gt;</span>
    <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">dependency</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
        <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">groupId</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>org.springframework<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">groupId</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
        <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">artifactId</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>spring-aspects<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">artifactId</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
        <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">version</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>${jar.version}<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">version</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
    <span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">dependency</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>

    <span style="color: rgba(0, 128, 0, 1)">&lt;!--</span><span style="color: rgba(0, 128, 0, 1)"> Mybatis </span><span style="color: rgba(0, 128, 0, 1)">--&gt;</span>
    <span style="color: rgba(0, 128, 0, 1)">&lt;!--</span><span style="color: rgba(0, 128, 0, 1)"> https://mvnrepository.com/artifact/org.mybatis/mybatis </span><span style="color: rgba(0, 128, 0, 1)">--&gt;</span>
    <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">dependency</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
        <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">groupId</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>org.mybatis<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">groupId</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
        <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">artifactId</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>mybatis<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">artifactId</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
        <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">version</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>3.4.6<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">version</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
    <span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">dependency</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>

    <span style="color: rgba(0, 128, 0, 1)">&lt;!--</span><span style="color: rgba(0, 128, 0, 1)"> spring 与 mybatis 的整合包 </span><span style="color: rgba(0, 128, 0, 1)">--&gt;</span>
    <span style="color: rgba(0, 128, 0, 1)">&lt;!--</span><span style="color: rgba(0, 128, 0, 1)"> https://mvnrepository.com/artifact/org.mybatis/mybatis-spring </span><span style="color: rgba(0, 128, 0, 1)">--&gt;</span>
    <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">dependency</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
        <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">groupId</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>org.mybatis<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">groupId</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
        <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">artifactId</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>mybatis-spring<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">artifactId</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
        <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">version</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>1.3.2<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">version</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
    <span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">dependency</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>

    <span style="color: rgba(0, 128, 0, 1)">&lt;!--</span><span style="color: rgba(0, 128, 0, 1)"> 数据库连接池，c3p0 </span><span style="color: rgba(0, 128, 0, 1)">--&gt;</span>
    <span style="color: rgba(0, 128, 0, 1)">&lt;!--</span><span style="color: rgba(0, 128, 0, 1)"> https://mvnrepository.com/artifact/com.mchange/c3p0 </span><span style="color: rgba(0, 128, 0, 1)">--&gt;</span>
    <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">dependency</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
        <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">groupId</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>com.mchange<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">groupId</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
        <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">artifactId</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>c3p0<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">artifactId</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
        <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">version</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>0.9.5.4<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">version</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
    <span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">dependency</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>

    <span style="color: rgba(0, 128, 0, 1)">&lt;!--</span><span style="color: rgba(0, 128, 0, 1)"> mysql驱动包 </span><span style="color: rgba(0, 128, 0, 1)">--&gt;</span>
    <span style="color: rgba(0, 128, 0, 1)">&lt;!--</span><span style="color: rgba(0, 128, 0, 1)"> https://mvnrepository.com/artifact/mysql/mysql-connector-java </span><span style="color: rgba(0, 128, 0, 1)">--&gt;</span>
    <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">dependency</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
        <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">groupId</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>mysql<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">groupId</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
        <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">artifactId</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>mysql-connector-java<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">artifactId</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
        <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">version</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>8.0.18<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">version</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
    <span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">dependency</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>

    <span style="color: rgba(0, 128, 0, 1)">&lt;!--</span><span style="color: rgba(0, 128, 0, 1)"> jstl </span><span style="color: rgba(0, 128, 0, 1)">--&gt;</span>
    <span style="color: rgba(0, 128, 0, 1)">&lt;!--</span><span style="color: rgba(0, 128, 0, 1)"> https://mvnrepository.com/artifact/jstl/jstl </span><span style="color: rgba(0, 128, 0, 1)">--&gt;</span>
    <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">dependency</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
        <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">groupId</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>jstl<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">groupId</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
        <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">artifactId</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>jstl<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">artifactId</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
        <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">version</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>1.2<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">version</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
    <span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">dependency</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>

    <span style="color: rgba(0, 128, 0, 1)">&lt;!--</span><span style="color: rgba(0, 128, 0, 1)"> servlet-api </span><span style="color: rgba(0, 128, 0, 1)">--&gt;</span>
    <span style="color: rgba(0, 128, 0, 1)">&lt;!--</span><span style="color: rgba(0, 128, 0, 1)"> https://mvnrepository.com/artifact/javax.servlet/javax.servlet-api </span><span style="color: rgba(0, 128, 0, 1)">--&gt;</span>
    <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">dependency</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
        <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">groupId</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>javax.servlet<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">groupId</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
        <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">artifactId</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>javax.servlet-api<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">artifactId</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
        <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">version</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>4.0.1<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">version</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
        <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">scope</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>provided<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">scope</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
    <span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">dependency</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>

    <span style="color: rgba(0, 128, 0, 1)">&lt;!--</span><span style="color: rgba(0, 128, 0, 1)"> junit </span><span style="color: rgba(0, 128, 0, 1)">--&gt;</span>
    <span style="color: rgba(0, 128, 0, 1)">&lt;!--</span><span style="color: rgba(0, 128, 0, 1)"> https://mvnrepository.com/artifact/junit/junit </span><span style="color: rgba(0, 128, 0, 1)">--&gt;</span>
    <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">dependency</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
        <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">groupId</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>junit<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">groupId</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
        <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">artifactId</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>junit<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">artifactId</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
        <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">version</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>4.12<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">version</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
        <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">scope</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>test<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">scope</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
    <span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">dependency</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>

    <span style="color: rgba(0, 128, 0, 1)">&lt;!--</span><span style="color: rgba(0, 128, 0, 1)"> 逆向工程所需的依赖信息 </span><span style="color: rgba(0, 128, 0, 1)">--&gt;</span>
    <span style="color: rgba(0, 128, 0, 1)">&lt;!--</span><span style="color: rgba(0, 128, 0, 1)"> https://mvnrepository.com/artifact/org.mybatis.generator/mybatis-generator-core </span><span style="color: rgba(0, 128, 0, 1)">--&gt;</span>
    <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">dependency</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
        <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">groupId</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>org.mybatis.generator<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">groupId</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
        <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">artifactId</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>mybatis-generator-core<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">artifactId</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
        <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">version</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>1.3.5<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">version</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
    <span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">dependency</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>

    <span style="color: rgba(0, 128, 0, 1)">&lt;!--</span><span style="color: rgba(0, 128, 0, 1)"> Spring test </span><span style="color: rgba(0, 128, 0, 1)">--&gt;</span>
    <span style="color: rgba(0, 128, 0, 1)">&lt;!--</span><span style="color: rgba(0, 128, 0, 1)"> https://mvnrepository.com/artifact/org.springframework/spring-test </span><span style="color: rgba(0, 128, 0, 1)">--&gt;</span>
    <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">dependency</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
        <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">groupId</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>org.springframework<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">groupId</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
        <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">artifactId</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>spring-test<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">artifactId</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
        <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">version</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>${jar.version}<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">version</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
        <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">scope</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>test<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">scope</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
    <span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">dependency</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>

    <span style="color: rgba(0, 128, 0, 1)">&lt;!--</span><span style="color: rgba(0, 128, 0, 1)"> Json </span><span style="color: rgba(0, 128, 0, 1)">--&gt;</span>
    <span style="color: rgba(0, 128, 0, 1)">&lt;!--</span><span style="color: rgba(0, 128, 0, 1)"> https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind </span><span style="color: rgba(0, 128, 0, 1)">--&gt;</span>
    <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">dependency</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
        <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">groupId</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>com.fasterxml.jackson.core<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">groupId</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
        <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">artifactId</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>jackson-databind<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">artifactId</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
        <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">version</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>2.10.0<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">version</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
    <span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">dependency</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>

    <span style="color: rgba(0, 128, 0, 1)">&lt;!--</span><span style="color: rgba(0, 128, 0, 1)"> pagehelper 分页插件 </span><span style="color: rgba(0, 128, 0, 1)">--&gt;</span>
    <span style="color: rgba(0, 128, 0, 1)">&lt;!--</span><span style="color: rgba(0, 128, 0, 1)"> https://mvnrepository.com/artifact/com.github.pagehelper/pagehelper </span><span style="color: rgba(0, 128, 0, 1)">--&gt;</span>
    <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">dependency</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
        <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">groupId</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>com.github.pagehelper<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">groupId</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
        <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">artifactId</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>pagehelper<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">artifactId</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
        <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">version</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>5.0.0<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">version</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
    <span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">dependency</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">dependencies</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>

<span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">build</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
    <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">finalName</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>crud<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">finalName</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
    <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">pluginManagement</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span><span style="color: rgba(0, 128, 0, 1)">&lt;!--</span><span style="color: rgba(0, 128, 0, 1)"> lock down plugins versions to avoid using Maven defaults (may be moved to parent pom) </span><span style="color: rgba(0, 128, 0, 1)">--&gt;</span>
        <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">plugins</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
            <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">plugin</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
                <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">artifactId</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>maven-clean-plugin<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">artifactId</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
                <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">version</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>3.1.0<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">version</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
            <span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">plugin</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
            <span style="color: rgba(0, 128, 0, 1)">&lt;!--</span><span style="color: rgba(0, 128, 0, 1)"> see http://maven.apache.org/ref/current/maven-core/default-bindings.html#Plugin_bindings_for_war_packaging </span><span style="color: rgba(0, 128, 0, 1)">--&gt;</span>
            <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">plugin</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
                <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">artifactId</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>maven-resources-plugin<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">artifactId</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
                <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">version</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>3.0.2<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">version</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
            <span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">plugin</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
            <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">plugin</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
                <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">artifactId</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>maven-compiler-plugin<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">artifactId</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
                <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">version</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>3.8.0<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">version</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
            <span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">plugin</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
            <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">plugin</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
                <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">artifactId</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>maven-surefire-plugin<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">artifactId</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
                <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">version</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>2.22.1<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">version</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
            <span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">plugin</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
            <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">plugin</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
                <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">artifactId</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>maven-war-plugin<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">artifactId</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
                <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">version</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>3.2.2<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">version</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
            <span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">plugin</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
            <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">plugin</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
                <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">artifactId</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>maven-install-plugin<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">artifactId</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
                <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">version</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>2.5.2<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">version</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
            <span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">plugin</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
            <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">plugin</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
                <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">artifactId</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>maven-deploy-plugin<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">artifactId</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
                <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">version</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>2.8.2<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">version</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
            <span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">plugin</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
        <span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">plugins</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
    <span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">pluginManagement</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">build</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>

</project>

3、配置 ssm 整合的文件（详细过程后续展开）。

　　web.xml，spring，springmvc，mybatis。

4、官方文档：

　　Spring:http://spring.io/docs

　　MyBatis:http://mybatis.github.io/mybatis-3/

　　分页组件的使用： https://github.com/pagehelper/Mybatis-PageHelper/blob/master/wikis/en/HowToUse.md

回到顶部

三、（3.1）SSM 基本配置 -- 配置 web.xml

1、配置 Spring 容器

　　用于获取 Spring 配置文件（applicationContext.xml）的读取位置。
　　<context-param>直接配置在 web.xml 的<web-app>标签中，属于上下文参数，在整个 web 应用中都可以使用。它是全局的，因此存放在 servletContext 对象中 (即 application 对象)。通过 getServletContext().getInitParameter("contextParam") 的方式可以获取。

【在 web.xml 中配置】
<!-- step1: 配置全局的参数，启动 Spring 容器 -->
<context-param>
<param-name>contextConfigLocation</param-name>
<!-- 若没有提供值，默认会去找 /WEB-INF/applicationContext.xml。 -->
<param-value>classpath:applicationContext.xml</param-value>
</context-param>
<listener>
<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
</listener>

2、配置 SpringMVC 的前端控制器

　　用于拦截请求，并指定 Spring MVC 配置文件的读取位置。

　　<init-parm> 配置在 <servlet> 标签中，用来初始化当前的 Servlet 的。属于当前 Servlet 的配置，因此存放在 servletConfig 对象（servlet 对象）中。

　　通过 getServletConfig().getInitParameter("initParam") 的方式可以获取。

【在 web.xml 中配置】
<!-- step2: 配置 SpringMVC 的前端控制器，用于拦截所有的请求  -->
<servlet>
<servlet-name>springmvcDispatcherServlet</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">init-param</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
    <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">param-name</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>contextConfigLocation<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">param-name</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
    <span style="color: rgba(0, 128, 0, 1)">&lt;!--</span><span style="color: rgba(0, 128, 0, 1)"> 若没有提供值，默认会去找WEB-INF/*-servlet.xml。 </span><span style="color: rgba(0, 128, 0, 1)">--&gt;</span>
    <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">param-value</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>classpath:dispatcher-servlet.xml<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">param-value</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">init-param</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
<span style="color: rgba(0, 128, 0, 1)">&lt;!--</span><span style="color: rgba(0, 128, 0, 1)"> 启动优先级，数值越小优先级越大 </span><span style="color: rgba(0, 128, 0, 1)">--&gt;</span>
<span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">load-on-startup</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>1<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">load-on-startup</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>

</servlet>
<servlet-mapping>
<servlet-name>springmvcDispatcherServlet</servlet-name>
<!-- 将 DispatcherServlet 请求映射配置为 "/"，则 Spring MVC 将捕获 Web 容器所有的请求，包括静态资源的请求 -->
<url-pattern>/</url-pattern>
</servlet-mapping>

注：

　　spring 框架在加载 web 配置文件的时候。首先加载的是 context-param 配置的内容，而并不会去初始化 servlet。只有进行了网站的跳转，经过 DispatcherServlet 的时候，才会初始化 servlet，从而加载 init-param 中的内容。

3、配置解决乱码问题的过滤器

　　用于解决乱码问题。

【在 web.xml 中配置】
<!-- step3: characterEncodingFilter 字符编码过滤器，放在所有过滤器的前面 -->
<filter>
<filter-name>characterEncodingFilter</filter-name>
<filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
<init-param>
<!--要使用的字符集，一般我们使用 UTF-8(保险起见 UTF-8 最好)-->
<param-name>encoding</param-name>
<param-value>UTF-8</param-value>
</init-param>
<init-param>
<!--是否强制设置 request 的编码为 encoding，默认 false，不建议更改-->
<param-name>forceRequestEncoding</param-name>
<param-value>false</param-value>
</init-param>
<init-param>
<!--是否强制设置 response 的编码为 encoding，建议设置为 true-->
<param-name>forceResponseEncoding</param-name>
<param-value>true</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>characterEncodingFilter</filter-name>
<!--这里不能留空或者直接写 '/' ，否则可能不起作用-->
<url-pattern>/*</url-pattern>
</filter-mapping>

4、配置 Rest 风格的 URI

　　由于浏览器 form 表单只支持 GET 与 POST 请求，而 DELETE、PUT 等 method 并不支持，spring3.0 添加了一个过滤器（HiddenHttpMethodFilter），可以将这些请求转换为标准的 http 方法，使得支持 GET、POST、PUT 与 DELETE 请求。

【在 web.xml 中配置】
<!-- step4: 配置过滤器，将 post 请求转为 delete，put -->
<filter>
<filter-name>HiddenHttpMethodFilter</filter-name>
<filter-class>org.springframework.web.filter.HiddenHttpMethodFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>HiddenHttpMethodFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>

注：

　　web.xml 的加载顺序是：[context-param -> listener -> filter -> servlet -> spring] ，而同类型节点之间的实际程序调用的时候的顺序是根据对应的 mapping 的顺序进行调用的。

5、web.xml 完整配置

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
         version="3.1">
<span style="color: rgba(0, 128, 0, 1)">&lt;!--</span><span style="color: rgba(0, 128, 0, 1)"> step1: 配置全局的参数，启动Spring容器 </span><span style="color: rgba(0, 128, 0, 1)">--&gt;</span>
<span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">context-param</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
    <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">param-name</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>contextConfigLocation<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">param-name</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
    <span style="color: rgba(0, 128, 0, 1)">&lt;!--</span><span style="color: rgba(0, 128, 0, 1)"> 若没有提供值，默认会去找/WEB-INF/applicationContext.xml。 </span><span style="color: rgba(0, 128, 0, 1)">--&gt;</span>
    <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">param-value</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>classpath:applicationContext.xml<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">param-value</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">context-param</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
<span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">listener</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
    <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">listener-class</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>org.springframework.web.context.ContextLoaderListener<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">listener-class</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">listener</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>

<span style="color: rgba(0, 128, 0, 1)">&lt;!--</span><span style="color: rgba(0, 128, 0, 1)"> step2: 配置SpringMVC的前端控制器，用于拦截所有的请求  </span><span style="color: rgba(0, 128, 0, 1)">--&gt;</span>
<span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">servlet</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
    <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">servlet-name</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>springmvcDispatcherServlet<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">servlet-name</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
    <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">servlet-class</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>org.springframework.web.servlet.DispatcherServlet<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">servlet-class</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>

    <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">init-param</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
        <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">param-name</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>contextConfigLocation<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">param-name</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
        <span style="color: rgba(0, 128, 0, 1)">&lt;!--</span><span style="color: rgba(0, 128, 0, 1)"> 若没有提供值，默认会去找WEB-INF/*-servlet.xml。 </span><span style="color: rgba(0, 128, 0, 1)">--&gt;</span>
        <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">param-value</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>classpath:dispatcher-servlet.xml<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">param-value</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
    <span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">init-param</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
    <span style="color: rgba(0, 128, 0, 1)">&lt;!--</span><span style="color: rgba(0, 128, 0, 1)"> 启动优先级，数值越小优先级越大 </span><span style="color: rgba(0, 128, 0, 1)">--&gt;</span>
    <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">load-on-startup</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>1<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">load-on-startup</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">servlet</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
<span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">servlet-mapping</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
    <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">servlet-name</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>springmvcDispatcherServlet<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">servlet-name</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
    <span style="color: rgba(0, 128, 0, 1)">&lt;!--</span><span style="color: rgba(0, 128, 0, 1)"> 将DispatcherServlet请求映射配置为"/"，则Spring MVC将捕获Web容器所有的请求，包括静态资源的请求 </span><span style="color: rgba(0, 128, 0, 1)">--&gt;</span>
    <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">url-pattern</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>/<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">url-pattern</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">servlet-mapping</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>

<span style="color: rgba(0, 128, 0, 1)">&lt;!--</span><span style="color: rgba(0, 128, 0, 1)"> step3: characterEncodingFilter字符编码过滤器，放在所有过滤器的前面 </span><span style="color: rgba(0, 128, 0, 1)">--&gt;</span>
<span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">filter</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
    <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">filter-name</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>characterEncodingFilter<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">filter-name</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
    <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">filter-class</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>org.springframework.web.filter.CharacterEncodingFilter<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">filter-class</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
    <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">init-param</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
        <span style="color: rgba(0, 128, 0, 1)">&lt;!--</span><span style="color: rgba(0, 128, 0, 1)">要使用的字符集，一般我们使用UTF-8(保险起见UTF-8最好)</span><span style="color: rgba(0, 128, 0, 1)">--&gt;</span>
        <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">param-name</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>encoding<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">param-name</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
        <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">param-value</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>UTF-8<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">param-value</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
    <span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">init-param</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
    <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">init-param</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
        <span style="color: rgba(0, 128, 0, 1)">&lt;!--</span><span style="color: rgba(0, 128, 0, 1)">是否强制设置request的编码为encoding，默认false，不建议更改</span><span style="color: rgba(0, 128, 0, 1)">--&gt;</span>
        <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">param-name</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>forceRequestEncoding<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">param-name</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
        <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">param-value</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>false<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">param-value</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
    <span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">init-param</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
    <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">init-param</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
        <span style="color: rgba(0, 128, 0, 1)">&lt;!--</span><span style="color: rgba(0, 128, 0, 1)">是否强制设置response的编码为encoding，建议设置为true</span><span style="color: rgba(0, 128, 0, 1)">--&gt;</span>
        <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">param-name</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>forceResponseEncoding<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">param-name</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
        <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">param-value</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>true<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">param-value</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
    <span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">init-param</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">filter</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
<span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">filter-mapping</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
    <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">filter-name</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>characterEncodingFilter<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">filter-name</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
    <span style="color: rgba(0, 128, 0, 1)">&lt;!--</span><span style="color: rgba(0, 128, 0, 1)">这里不能留空或者直接写 ' / ' ，否则可能不起作用</span><span style="color: rgba(0, 128, 0, 1)">--&gt;</span>
    <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">url-pattern</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>/*<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">url-pattern</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">filter-mapping</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>

<span style="color: rgba(0, 128, 0, 1)">&lt;!--</span><span style="color: rgba(0, 128, 0, 1)"> step4: 配置过滤器，将post请求转为delete，put </span><span style="color: rgba(0, 128, 0, 1)">--&gt;</span>
<span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">filter</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
    <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">filter-name</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>HiddenHttpMethodFilter<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">filter-name</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
    <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">filter-class</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>org.springframework.web.filter.HiddenHttpMethodFilter<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">filter-class</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">filter</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
<span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">filter-mapping</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
    <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">filter-name</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>HiddenHttpMethodFilter<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">filter-name</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
    <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">url-pattern</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>/*<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">url-pattern</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">filter-mapping</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>

</web-app>

回到顶部

三、（3.2）配置 SpringMVC--dispatcher-servlet.xml

1、配置组件扫描方式

　　用于获取相关组件。一般在 SpringMVC 的配置里，只扫描 Controller 层，Spring 配置中扫描所有包，但是排除 Controller 层。

【在 dispatcher-servlet.xml 中配置】
<!-- step1: 配置 Controller 扫描方式 -->
<!-- 使用组件扫描的方式可以一次扫描多个 Controller, 只需指定包路径即可 -->
<context:component-scan base-package="com.lyh.ssm.crud" use-default-filters="false">
<!-- 一般在 SpringMVC 的配置里，只扫描 Controller 层，Spring 配置中扫描所有包，但是排除 Controller 层。
context:include-filter 要注意，如果 base-package 扫描的不是最终包，那么其他包还是会扫描、加载，如果在 SpringMVC 的配置中这么做，会导致 Spring 不能处理事务，
所以此时需要在 <context:component-scan> 标签上，增加 use-default-filters="false"，就是真的只扫描 context:include-filter 包括的内容-->
<context:include-filter type="annotation" expression="org.springframework.stereotype.Controller" />
</context:component-scan>
<!-- 配置单个 Controller 的方式（某些特殊的情况可以使用），需要指定 Controller 的全限定名 -->
<!-- <bean name="/get" class="com.wxisme.ssm.controller.Controller1"/> -->

2、配置视图解析器

　　当设置视图名时，会自动添加前缀与后缀。

【在 dispatcher-servlet.xml 中配置】
<!-- step2: 配置视图解析器，设置视图名时，会自动添加上前缀与后缀 -->
<bean id="defaultViewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<property name="prefix" value="/WEB-INF/"/><!--设置 JSP 文件的目录位置-->
<property name="suffix" value=".jsp"/>
</bean>

3、配置请求处理（标准配置一）

　　将 DispatcherServlet 请求映射配置为 "/"，则 Spring MVC 将捕获 Web 容器所有的请求（包括静态资源的请求），Spring MVC 会将它们当成一个普通请求处理，因此找不到对应处理器将导致错误。所以为了使 Spring 框架能够捕获所有 URL 的请求，同时又将静态资源的请求转由 Web 容器处理，在将 DispatcherServlet 的请求映射配置为 "/" 前提下，使用 <mvc:default-servlet-handler />，可以将静态请求交给服务器处理。

【在 dispatcher-servlet.xml 中配置】
<!-- 会在 Spring MVC 上下文中定义一个 org.springframework.web.servlet.resource.DefaultServletHttpRequestHandler，它会像一个检查员，对进入 DispatcherServlet 的 URL 进行筛查，如果发现是静态资源的请求，就将该请求转由 Web 应用服务器默认的 Servlet 处理，如果不是静态资源的请求，才由 DispatcherServlet 继续处理。 -->
<mvc:default-servlet-handler />

4、配置注解的处理器映射器和处理器适配器（标准配置二）

　　<mvc:annotation-driven /> 简化了注解配置，且提供了一些高级功能，比如支持使用 @Valid 对 javaBean 进行 JSR-303 验证、支持使用 @RequestBody、@ResponseBody。

【在 dispatcher-servlet.xml 中配置】
【方式一：】
<!-- 配置注解的处理器映射器和处理器适配器（简化配置） -->
<mvc:annotation-driven />
【方式二：】
<!-- 注解的处理器适配器 -->
<!-- <bean class="org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerAdapter"/> -->
<!-- 注解的处理器映射器 -->
<!-- <bean class="org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerMapping"/> -->

5、dispatcher-servlet.xml 完整配置

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:context="http://www.springframework.org/schema/context"
       xmlns:mvc="http://www.springframework.org/schema/mvc"
       xsi:schemaLocation="http://www.springframework.org/schema/beans
       http://www.springframework.org/schema/beans/spring-beans.xsd
       http://www.springframework.org/schema/context
       http://www.springframework.org/schema/context/spring-context.xsd
       http://www.springframework.org/schema/mvc
       http://www.springframework.org/schema/mvc/spring-mvc.xsd">
<span style="color: rgba(0, 128, 0, 1)">&lt;!--</span><span style="color: rgba(0, 128, 0, 1)"> step1: 配置Controller扫描方式 </span><span style="color: rgba(0, 128, 0, 1)">--&gt;</span>
<span style="color: rgba(0, 128, 0, 1)">&lt;!--</span><span style="color: rgba(0, 128, 0, 1)"> 使用组件扫描的方式可以一次扫描多个Controller,只需指定包路径即可 </span><span style="color: rgba(0, 128, 0, 1)">--&gt;</span>
<span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">context:component-scan </span><span style="color: rgba(255, 0, 0, 1)">base-package</span><span style="color: rgba(0, 0, 255, 1)">="com.lyh.ssm.crud"</span><span style="color: rgba(255, 0, 0, 1)"> use-default-filters</span><span style="color: rgba(0, 0, 255, 1)">="false"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
    <span style="color: rgba(0, 128, 0, 1)">&lt;!--</span><span style="color: rgba(0, 128, 0, 1)"> 一般在SpringMVC的配置里，只扫描Controller层，Spring配置中扫描所有包，但是排除Controller层。
    context:include-filter要注意，如果base-package扫描的不是最终包，那么其他包还是会扫描、加载，如果在SpringMVC的配置中这么做，会导致Spring不能处理事务，
    所以此时需要在&lt;context:component-scan&gt;标签上，增加use-default-filters="false"，就是真的只扫描context:include-filter包括的内容</span><span style="color: rgba(0, 128, 0, 1)">--&gt;</span>
    <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">context:include-filter </span><span style="color: rgba(255, 0, 0, 1)">type</span><span style="color: rgba(0, 0, 255, 1)">="annotation"</span><span style="color: rgba(255, 0, 0, 1)"> expression</span><span style="color: rgba(0, 0, 255, 1)">="org.springframework.stereotype.Controller"</span> <span style="color: rgba(0, 0, 255, 1)">/&gt;</span>
<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">context:component-scan</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>

<span style="color: rgba(0, 128, 0, 1)">&lt;!--</span><span style="color: rgba(0, 128, 0, 1)"> step2: 配置视图解析器 </span><span style="color: rgba(0, 128, 0, 1)">--&gt;</span>
<span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">bean </span><span style="color: rgba(255, 0, 0, 1)">id</span><span style="color: rgba(0, 0, 255, 1)">="defaultViewResolver"</span><span style="color: rgba(255, 0, 0, 1)"> class</span><span style="color: rgba(0, 0, 255, 1)">="org.springframework.web.servlet.view.InternalResourceViewResolver"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
    <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">property </span><span style="color: rgba(255, 0, 0, 1)">name</span><span style="color: rgba(0, 0, 255, 1)">="prefix"</span><span style="color: rgba(255, 0, 0, 1)"> value</span><span style="color: rgba(0, 0, 255, 1)">="/WEB-INF/"</span><span style="color: rgba(0, 0, 255, 1)">/&gt;</span><span style="color: rgba(0, 128, 0, 1)">&lt;!--</span><span style="color: rgba(0, 128, 0, 1)">设置JSP文件的目录位置</span><span style="color: rgba(0, 128, 0, 1)">--&gt;</span>
    <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">property </span><span style="color: rgba(255, 0, 0, 1)">name</span><span style="color: rgba(0, 0, 255, 1)">="suffix"</span><span style="color: rgba(255, 0, 0, 1)"> value</span><span style="color: rgba(0, 0, 255, 1)">=".jsp"</span><span style="color: rgba(0, 0, 255, 1)">/&gt;</span>
<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">bean</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>

<span style="color: rgba(0, 128, 0, 1)">&lt;!--</span><span style="color: rgba(0, 128, 0, 1)"> step3: 标准配置 </span><span style="color: rgba(0, 128, 0, 1)">--&gt;</span>
<span style="color: rgba(0, 128, 0, 1)">&lt;!--</span><span style="color: rgba(0, 128, 0, 1)"> 将springmvc不能处理的请求交给 spring 容器处理 </span><span style="color: rgba(0, 128, 0, 1)">--&gt;</span>
<span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">mvc:default-servlet-handler</span><span style="color: rgba(0, 0, 255, 1)">/&gt;</span>
<span style="color: rgba(0, 128, 0, 1)">&lt;!--</span><span style="color: rgba(0, 128, 0, 1)"> 简化注解配置，并提供更高级的功能 </span><span style="color: rgba(0, 128, 0, 1)">--&gt;</span>
<span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">mvc:annotation-driven </span><span style="color: rgba(0, 0, 255, 1)">/&gt;</span>

</beans>

回到顶部

三、（3.3）配置 Spring--applicationContext.xml

1、配置组件扫描方式

　　用于获取相关组件，一般在 Spring 配置文件中扫描所有包，但是排除 Controller 层。

【在 applicationContext.xml 中配置】
<!-- step1: 配置包扫描方式。扫描所有包，但是排除 Controller 层 -->
<context:component-scan base-package="com.lyh.ssm.crud">
<context:exclude-filter type="annotation" expression="org.springframework.stereotype.Controller"/>
</context:component-scan>

2、配置数据库连接池

　　用于数据库操作。

【方式一：直接填写连接参数】
【在 applicationContext.xml 中配置】
<bean id="dataSource" class="com.mchange.v2.c3p0.ComboPooledDataSource">
    <!--注入属性-->
    <property name="driverClass" value="com.mysql.cj.jdbc.Driver"></property>
    <property name="jdbcUrl" value="jdbc:mysql://localhost:3306/lyh?useUnicode=true&characterEncoding=utf8"></property>
    <property name="user" value="root"></property>
    <property name="password" value="123456"></property>
</bean>
【方式二：通过 properties 文件的方式获取连接参数】
【dbconfig.properties】
jdbc.driver = com.mysql.cj.jdbc.Driver
jdbc.url = jdbc:mysql://localhost:3306/lyh?useUnicode=true&characterEncoding=utf8
jdbc.username = root
jdbc.password = 123456
【在 applicationContext.xml 中配置】
<!-- 引入 properties 文件 -->
<context:property-placeholder location="classpath:dbconfig.properties" />
<bean id="dataSource" class="com.mchange.v2.c3p0.ComboPooledDataSource">
<!--注入属性-->
<property name="driverClass" value="${jdbc.driverClass}"></property>
<property name="jdbcUrl" value="${jdbc.jdbcUrl}"></property>
<property name="user" value="${jdbc.user}"></property>
<property name="password" value="${jdbc.password}"></property>
</bean>

回到顶部

三、（3.4）Spring 和 MyBatis 整合配置 --applicationContext.xml

　　jar 包由 MyBatis 提供。

1、配置 sqlSessionFactory

【在 applicationContext.xml 中配置】
<!-- step3: spring 与 mybatis 整合 -->
<!-- 配置 sqlSessionFactory，需要引入 mybatis-spring 包 -->
<bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
<!-- 加载 Mybatis 全局配置文件 -->
<property name="configLocation" value="classpath:mybatis-config.xml"/>
<span style="color: rgba(0, 128, 0, 1)">&lt;!--</span><span style="color: rgba(0, 128, 0, 1)"> 数据库连接池 </span><span style="color: rgba(0, 128, 0, 1)">--&gt;</span>
<span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">property </span><span style="color: rgba(255, 0, 0, 1)">name</span><span style="color: rgba(0, 0, 255, 1)">="dataSource"</span><span style="color: rgba(255, 0, 0, 1)"> ref</span><span style="color: rgba(0, 0, 255, 1)">="dataSource"</span><span style="color: rgba(0, 0, 255, 1)">/&gt;</span>

<span style="color: rgba(0, 128, 0, 1)">&lt;!--</span><span style="color: rgba(0, 128, 0, 1)"> 配置mapper文件位置，扫描映射文件 </span><span style="color: rgba(0, 128, 0, 1)">--&gt;</span>
<span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">property </span><span style="color: rgba(255, 0, 0, 1)">name</span><span style="color: rgba(0, 0, 255, 1)">="mapperLocations"</span><span style="color: rgba(255, 0, 0, 1)"> value</span><span style="color: rgba(0, 0, 255, 1)">="classpath:mappers/*.xml"</span><span style="color: rgba(0, 0, 255, 1)">/&gt;</span>

</bean>

2、配置批量执行的 sqlSession(可选操作)

【在 applicationContext.xml 中配置】
<!-- step4: 配置批量执行的 sqlSession(可选操作) -->
<bean id="sqlSession" class="org.mybatis.spring.SqlSessionTemplate">
<constructor-arg name="sqlSessionFactory" ref="sqlSessionFactory"/>
<constructor-arg name="executorType" value="BATCH"/>
</bean>

3、配置 mapper 扫描器

【在 applicationContext.xml 中配置】
<!-- step5: 配置 mapper 扫描器，将其加入到 ioc 容器中 -->
<bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
<!-- 扫描包路径，如果需要扫描多个包中间用半角逗号隔开 -->
<property name="basePackage" value="com.lyh.ssm.crud.dao"></property>
<property name="sqlSessionFactoryBeanName" value="sqlSessionFactory"/>
</bean>

4、配置事务控制与切面（可选）

【在 applicationContext.xml 中配置】
<!-- step6: 配置事务控制 -->
<bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
<!-- 配置数据源 -->
<property name="dataSource" ref="dataSource"/>
</bean>
<!-- 配置事务通知 -->
<tx:advice id="txAdvice" transaction-manager="transactionManager">
<tx:attributes>
<!-- 传播行为 -->
<tx:method name="post*" propagation="REQUIRED"/>
<tx:method name="put*" propagation="REQUIRED"/>
<tx:method name="delete*" propagation="REQUIRED"/>
<tx:method name="get*" propagation="SUPPORTS" read-only="true"/>
</tx:attributes>
</tx:advice>
<!-- 配置 aop -->
<aop:config>
<!-- 配置事务增强，指定切点表达式，第一个表示返回任意类型，第二个表示任意方法，（..）表示任意数量和类型的参数-->
<aop:advisor advice-ref="txAdvice" pointcut="execution(* com.lyh.ssm.crud.service..*(..))"/>
</aop:config>

5、applicationContext.xml 完整配置

【db.properties】
jdbc.driver = com.mysql.cj.jdbc.Driver
jdbc.url = jdbc:mysql://localhost:3306/lyh?useUnicode=true&characterEncoding=utf8
jdbc.username = root
jdbc.password = 123456
【applicationContext.xml】
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:context="http://www.springframework.org/schema/context" xmlns:p="http://www.springframework.org/schema/p"
xmlns:aop="http://www.springframework.org/schema/aop" xmlns:tx="http://www.springframework.org/schema/tx"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="
http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-4.0.xsd
http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.0.xsd
http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-4.0.xsd http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-4.0.xsd
http://www.springframework.org/schema/util http://www.springframework.org/schema/util/spring-util-4.0.xsd">
<span style="color: rgba(0, 128, 0, 1)">&lt;!--</span><span style="color: rgba(0, 128, 0, 1)"> step1: 配置包扫描方式。扫描所有包，但是排除Controller层 </span><span style="color: rgba(0, 128, 0, 1)">--&gt;</span>
<span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">context:component-scan </span><span style="color: rgba(255, 0, 0, 1)">base-package</span><span style="color: rgba(0, 0, 255, 1)">="com.lyh.ssm.crud"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
    <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">context:exclude-filter </span><span style="color: rgba(255, 0, 0, 1)">type</span><span style="color: rgba(0, 0, 255, 1)">="annotation"</span><span style="color: rgba(255, 0, 0, 1)"> expression</span><span style="color: rgba(0, 0, 255, 1)">="org.springframework.stereotype.Controller"</span><span style="color: rgba(0, 0, 255, 1)">/&gt;</span>
<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">context:component-scan</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>

<span style="color: rgba(0, 128, 0, 1)">&lt;!--</span><span style="color: rgba(0, 128, 0, 1)"> step2: 配置数据库连接信息 </span><span style="color: rgba(0, 128, 0, 1)">--&gt;</span>
<span style="color: rgba(0, 128, 0, 1)">&lt;!--</span><span style="color: rgba(0, 128, 0, 1)"> 引入properties文件 </span><span style="color: rgba(0, 128, 0, 1)">--&gt;</span>
<span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">context:property-placeholder </span><span style="color: rgba(255, 0, 0, 1)">location</span><span style="color: rgba(0, 0, 255, 1)">="classpath:db.properties"</span><span style="color: rgba(0, 0, 255, 1)">/&gt;</span>

<span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">bean </span><span style="color: rgba(255, 0, 0, 1)">id</span><span style="color: rgba(0, 0, 255, 1)">="dataSource"</span><span style="color: rgba(255, 0, 0, 1)"> class</span><span style="color: rgba(0, 0, 255, 1)">="com.mchange.v2.c3p0.ComboPooledDataSource"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
    <span style="color: rgba(0, 128, 0, 1)">&lt;!--</span><span style="color: rgba(0, 128, 0, 1)">注入属性</span><span style="color: rgba(0, 128, 0, 1)">--&gt;</span>
    <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">property </span><span style="color: rgba(255, 0, 0, 1)">name</span><span style="color: rgba(0, 0, 255, 1)">="driverClass"</span><span style="color: rgba(255, 0, 0, 1)"> value</span><span style="color: rgba(0, 0, 255, 1)">="${jdbc.driver}"</span><span style="color: rgba(0, 0, 255, 1)">&gt;&lt;/</span><span style="color: rgba(128, 0, 0, 1)">property</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
    <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">property </span><span style="color: rgba(255, 0, 0, 1)">name</span><span style="color: rgba(0, 0, 255, 1)">="jdbcUrl"</span><span style="color: rgba(255, 0, 0, 1)"> value</span><span style="color: rgba(0, 0, 255, 1)">="${jdbc.url}"</span><span style="color: rgba(0, 0, 255, 1)">&gt;&lt;/</span><span style="color: rgba(128, 0, 0, 1)">property</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
    <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">property </span><span style="color: rgba(255, 0, 0, 1)">name</span><span style="color: rgba(0, 0, 255, 1)">="user"</span><span style="color: rgba(255, 0, 0, 1)"> value</span><span style="color: rgba(0, 0, 255, 1)">="${jdbc.username}"</span><span style="color: rgba(0, 0, 255, 1)">&gt;&lt;/</span><span style="color: rgba(128, 0, 0, 1)">property</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
    <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">property </span><span style="color: rgba(255, 0, 0, 1)">name</span><span style="color: rgba(0, 0, 255, 1)">="password"</span><span style="color: rgba(255, 0, 0, 1)"> value</span><span style="color: rgba(0, 0, 255, 1)">="${jdbc.password}"</span><span style="color: rgba(0, 0, 255, 1)">&gt;&lt;/</span><span style="color: rgba(128, 0, 0, 1)">property</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">bean</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>

<span style="color: rgba(0, 128, 0, 1)">&lt;!--</span><span style="color: rgba(0, 128, 0, 1)"> step3: spring 与 mybatis 整合 </span><span style="color: rgba(0, 128, 0, 1)">--&gt;</span>
<span style="color: rgba(0, 128, 0, 1)">&lt;!--</span><span style="color: rgba(0, 128, 0, 1)"> 配置sqlSessionFactory，需要引入 mybatis-spring 包 </span><span style="color: rgba(0, 128, 0, 1)">--&gt;</span>
<span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">bean </span><span style="color: rgba(255, 0, 0, 1)">id</span><span style="color: rgba(0, 0, 255, 1)">="sqlSessionFactory"</span><span style="color: rgba(255, 0, 0, 1)"> class</span><span style="color: rgba(0, 0, 255, 1)">="org.mybatis.spring.SqlSessionFactoryBean"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
    <span style="color: rgba(0, 128, 0, 1)">&lt;!--</span><span style="color: rgba(0, 128, 0, 1)"> 加载Mybatis全局配置文件 </span><span style="color: rgba(0, 128, 0, 1)">--&gt;</span>
    <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">property </span><span style="color: rgba(255, 0, 0, 1)">name</span><span style="color: rgba(0, 0, 255, 1)">="configLocation"</span><span style="color: rgba(255, 0, 0, 1)"> value</span><span style="color: rgba(0, 0, 255, 1)">="classpath:mybatis-config.xml"</span><span style="color: rgba(0, 0, 255, 1)">/&gt;</span>

    <span style="color: rgba(0, 128, 0, 1)">&lt;!--</span><span style="color: rgba(0, 128, 0, 1)"> 数据库连接池 </span><span style="color: rgba(0, 128, 0, 1)">--&gt;</span>
    <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">property </span><span style="color: rgba(255, 0, 0, 1)">name</span><span style="color: rgba(0, 0, 255, 1)">="dataSource"</span><span style="color: rgba(255, 0, 0, 1)"> ref</span><span style="color: rgba(0, 0, 255, 1)">="dataSource"</span><span style="color: rgba(0, 0, 255, 1)">/&gt;</span>

    <span style="color: rgba(0, 128, 0, 1)">&lt;!--</span><span style="color: rgba(0, 128, 0, 1)"> 配置mapper文件位置，扫描映射文件 </span><span style="color: rgba(0, 128, 0, 1)">--&gt;</span>
    <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">property </span><span style="color: rgba(255, 0, 0, 1)">name</span><span style="color: rgba(0, 0, 255, 1)">="mapperLocations"</span><span style="color: rgba(255, 0, 0, 1)"> value</span><span style="color: rgba(0, 0, 255, 1)">="classpath:mappers/*.xml"</span><span style="color: rgba(0, 0, 255, 1)">/&gt;</span>
<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">bean</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>

<span style="color: rgba(0, 128, 0, 1)">&lt;!--</span><span style="color: rgba(0, 128, 0, 1)"> step4: 配置批量执行的sqlSession(可选操作) </span><span style="color: rgba(0, 128, 0, 1)">--&gt;</span>
<span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">bean </span><span style="color: rgba(255, 0, 0, 1)">id</span><span style="color: rgba(0, 0, 255, 1)">="sqlSession"</span><span style="color: rgba(255, 0, 0, 1)"> class</span><span style="color: rgba(0, 0, 255, 1)">="org.mybatis.spring.SqlSessionTemplate"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
    <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">constructor-arg </span><span style="color: rgba(255, 0, 0, 1)">name</span><span style="color: rgba(0, 0, 255, 1)">="sqlSessionFactory"</span><span style="color: rgba(255, 0, 0, 1)"> ref</span><span style="color: rgba(0, 0, 255, 1)">="sqlSessionFactory"</span><span style="color: rgba(0, 0, 255, 1)">/&gt;</span>
    <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">constructor-arg </span><span style="color: rgba(255, 0, 0, 1)">name</span><span style="color: rgba(0, 0, 255, 1)">="executorType"</span><span style="color: rgba(255, 0, 0, 1)"> value</span><span style="color: rgba(0, 0, 255, 1)">="BATCH"</span><span style="color: rgba(0, 0, 255, 1)">/&gt;</span>
<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">bean</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>

<span style="color: rgba(0, 128, 0, 1)">&lt;!--</span><span style="color: rgba(0, 128, 0, 1)"> step5: 配置mapper扫描器，将其加入到ioc容器中 </span><span style="color: rgba(0, 128, 0, 1)">--&gt;</span>
<span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">bean </span><span style="color: rgba(255, 0, 0, 1)">class</span><span style="color: rgba(0, 0, 255, 1)">="org.mybatis.spring.mapper.MapperScannerConfigurer"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
    <span style="color: rgba(0, 128, 0, 1)">&lt;!--</span><span style="color: rgba(0, 128, 0, 1)"> 扫描包路径，如果需要扫描多个包中间用半角逗号隔开 </span><span style="color: rgba(0, 128, 0, 1)">--&gt;</span>
    <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">property </span><span style="color: rgba(255, 0, 0, 1)">name</span><span style="color: rgba(0, 0, 255, 1)">="basePackage"</span><span style="color: rgba(255, 0, 0, 1)"> value</span><span style="color: rgba(0, 0, 255, 1)">="com.lyh.ssm.crud.dao"</span><span style="color: rgba(0, 0, 255, 1)">&gt;&lt;/</span><span style="color: rgba(128, 0, 0, 1)">property</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
    <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">property </span><span style="color: rgba(255, 0, 0, 1)">name</span><span style="color: rgba(0, 0, 255, 1)">="sqlSessionFactoryBeanName"</span><span style="color: rgba(255, 0, 0, 1)"> value</span><span style="color: rgba(0, 0, 255, 1)">="sqlSessionFactory"</span><span style="color: rgba(0, 0, 255, 1)">/&gt;</span>
<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">bean</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>

<span style="color: rgba(0, 128, 0, 1)">&lt;!--</span><span style="color: rgba(0, 128, 0, 1)"> step6: 配置事务控制 </span><span style="color: rgba(0, 128, 0, 1)">--&gt;</span>
<span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">bean </span><span style="color: rgba(255, 0, 0, 1)">id</span><span style="color: rgba(0, 0, 255, 1)">="transactionManager"</span><span style="color: rgba(255, 0, 0, 1)"> class</span><span style="color: rgba(0, 0, 255, 1)">="org.springframework.jdbc.datasource.DataSourceTransactionManager"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
    <span style="color: rgba(0, 128, 0, 1)">&lt;!--</span><span style="color: rgba(0, 128, 0, 1)"> 配置数据源 </span><span style="color: rgba(0, 128, 0, 1)">--&gt;</span>
    <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">property </span><span style="color: rgba(255, 0, 0, 1)">name</span><span style="color: rgba(0, 0, 255, 1)">="dataSource"</span><span style="color: rgba(255, 0, 0, 1)"> ref</span><span style="color: rgba(0, 0, 255, 1)">="dataSource"</span><span style="color: rgba(0, 0, 255, 1)">/&gt;</span>
<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">bean</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>

<span style="color: rgba(0, 128, 0, 1)">&lt;!--</span><span style="color: rgba(0, 128, 0, 1)"> 配置事务通知 </span><span style="color: rgba(0, 128, 0, 1)">--&gt;</span>
<span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">tx:advice </span><span style="color: rgba(255, 0, 0, 1)">id</span><span style="color: rgba(0, 0, 255, 1)">="txAdvice"</span><span style="color: rgba(255, 0, 0, 1)"> transaction-manager</span><span style="color: rgba(0, 0, 255, 1)">="transactionManager"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
    <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">tx:attributes</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
        <span style="color: rgba(0, 128, 0, 1)">&lt;!--</span><span style="color: rgba(0, 128, 0, 1)"> 传播行为 </span><span style="color: rgba(0, 128, 0, 1)">--&gt;</span>
        <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">tx:method </span><span style="color: rgba(255, 0, 0, 1)">name</span><span style="color: rgba(0, 0, 255, 1)">="post*"</span><span style="color: rgba(255, 0, 0, 1)"> propagation</span><span style="color: rgba(0, 0, 255, 1)">="REQUIRED"</span><span style="color: rgba(0, 0, 255, 1)">/&gt;</span>
        <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">tx:method </span><span style="color: rgba(255, 0, 0, 1)">name</span><span style="color: rgba(0, 0, 255, 1)">="put*"</span><span style="color: rgba(255, 0, 0, 1)"> propagation</span><span style="color: rgba(0, 0, 255, 1)">="REQUIRED"</span><span style="color: rgba(0, 0, 255, 1)">/&gt;</span>
        <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">tx:method </span><span style="color: rgba(255, 0, 0, 1)">name</span><span style="color: rgba(0, 0, 255, 1)">="delete*"</span><span style="color: rgba(255, 0, 0, 1)"> propagation</span><span style="color: rgba(0, 0, 255, 1)">="REQUIRED"</span><span style="color: rgba(0, 0, 255, 1)">/&gt;</span>
        <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">tx:method </span><span style="color: rgba(255, 0, 0, 1)">name</span><span style="color: rgba(0, 0, 255, 1)">="get*"</span><span style="color: rgba(255, 0, 0, 1)"> propagation</span><span style="color: rgba(0, 0, 255, 1)">="SUPPORTS"</span><span style="color: rgba(255, 0, 0, 1)"> read-only</span><span style="color: rgba(0, 0, 255, 1)">="true"</span><span style="color: rgba(0, 0, 255, 1)">/&gt;</span>
    <span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">tx:attributes</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">tx:advice</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>

<span style="color: rgba(0, 128, 0, 1)">&lt;!--</span><span style="color: rgba(0, 128, 0, 1)"> 配置aop </span><span style="color: rgba(0, 128, 0, 1)">--&gt;</span>
<span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">aop:config</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
    <span style="color: rgba(0, 128, 0, 1)">&lt;!--</span><span style="color: rgba(0, 128, 0, 1)"> 配置事务增强，指定切点表达式，第一个*表示返回任意类型，第二个*表示任意方法，（..）表示任意数量和类型的参数</span><span style="color: rgba(0, 128, 0, 1)">--&gt;</span>
    <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">aop:advisor </span><span style="color: rgba(255, 0, 0, 1)">advice-ref</span><span style="color: rgba(0, 0, 255, 1)">="txAdvice"</span><span style="color: rgba(255, 0, 0, 1)"> pointcut</span><span style="color: rgba(0, 0, 255, 1)">="execution(* com.lyh.ssm.crud.service..*(..))"</span><span style="color: rgba(0, 0, 255, 1)">/&gt;</span>
<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">aop:config</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>

</beans>

回到顶部

三、（3.5）Mybatis 配置 -- mybatis-config.xml

1、配置全局参数

【在 mybatis-config.xml 中配置】
<settings>
<!-- 开启驼峰命名规则 -->
<setting name="mapUnderscoreToCamelCase" value="true"/>
</settings>

2、使用分页插件（pagehelper）

【在 mybatis-config.xml 中配置】
<plugins>
<!-- 使用分页插件 -->
<plugin interceptor="com.github.pagehelper.PageInterceptor"></plugin>
</plugins>

3、mybatis-config.xml 完整配置

【mybatis-config.xml】
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE configuration
        PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-config.dtd">
<configuration>
    <settings>
        <!-- 开启驼峰命名规则 -->
        <setting name="mapUnderscoreToCamelCase" value="true"/>
    </settings>
    <plugins>
        <!-- 使用分页插件 -->
        <plugin interceptor="com.github.pagehelper.PageInterceptor"></plugin>
    </plugins>
</configuration>

回到顶部

四、逆向工程

　　参考： https://www.cnblogs.com/l-y-h/p/11748300.html

1、配置文件 -- src/mybatis-generator.xml

【src/mybatis-generator.xml】
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE generatorConfiguration
        PUBLIC "-//mybatis.org//DTD MyBatis Generator Configuration 1.0//EN"
        "http://mybatis.org/dtd/mybatis-generator-config_1_0.dtd">
<generatorConfiguration>
<context id="DB2Tables" targetRuntime="MyBatis3">
<!-- 清除注释信息 -->
<commentGenerator>
<property name="suppressAllComments" value="true" />
</commentGenerator>
    <span style="color: rgba(0, 128, 0, 1)">&lt;!--</span><span style="color: rgba(0, 128, 0, 1)"> step1: 配置数据库连接信息 </span><span style="color: rgba(0, 128, 0, 1)">--&gt;</span>
    <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">jdbcConnection </span><span style="color: rgba(255, 0, 0, 1)">driverClass</span><span style="color: rgba(0, 0, 255, 1)">="com.mysql.cj.jdbc.Driver"</span><span style="color: rgba(255, 0, 0, 1)">
                    connectionURL</span><span style="color: rgba(0, 0, 255, 1)">="jdbc:mysql://localhost:3306/lyh"</span><span style="color: rgba(255, 0, 0, 1)">
                    userId</span><span style="color: rgba(0, 0, 255, 1)">="root"</span><span style="color: rgba(255, 0, 0, 1)">
                    password</span><span style="color: rgba(0, 0, 255, 1)">="123456"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
    <span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">jdbcConnection</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>

    <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">javaTypeResolver</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
        <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">property </span><span style="color: rgba(255, 0, 0, 1)">name</span><span style="color: rgba(0, 0, 255, 1)">="forceBigDecimals"</span><span style="color: rgba(255, 0, 0, 1)"> value</span><span style="color: rgba(0, 0, 255, 1)">="false"</span><span style="color: rgba(0, 0, 255, 1)">/&gt;</span>
    <span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">javaTypeResolver</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>

    <span style="color: rgba(0, 128, 0, 1)">&lt;!--</span><span style="color: rgba(0, 128, 0, 1)"> step2: 指定java bean生成的位置
        targetProject 指的是 哪个项目
        targetPackage 指的是 项目中的路径
    </span><span style="color: rgba(0, 128, 0, 1)">--&gt;</span>
    <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">javaModelGenerator </span><span style="color: rgba(255, 0, 0, 1)">targetPackage</span><span style="color: rgba(0, 0, 255, 1)">="com.lyh.ssm.crud.bean"</span><span style="color: rgba(255, 0, 0, 1)"> targetProject</span><span style="color: rgba(0, 0, 255, 1)">=".\src"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
        <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">property </span><span style="color: rgba(255, 0, 0, 1)">name</span><span style="color: rgba(0, 0, 255, 1)">="enableSubPackages"</span><span style="color: rgba(255, 0, 0, 1)"> value</span><span style="color: rgba(0, 0, 255, 1)">="true"</span><span style="color: rgba(0, 0, 255, 1)">/&gt;</span>
        <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">property </span><span style="color: rgba(255, 0, 0, 1)">name</span><span style="color: rgba(0, 0, 255, 1)">="trimStrings"</span><span style="color: rgba(255, 0, 0, 1)"> value</span><span style="color: rgba(0, 0, 255, 1)">="true"</span><span style="color: rgba(0, 0, 255, 1)">/&gt;</span>
    <span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">javaModelGenerator</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>

    <span style="color: rgba(0, 128, 0, 1)">&lt;!--</span><span style="color: rgba(0, 128, 0, 1)"> step3：指定sql映射文件生成的位置 </span><span style="color: rgba(0, 128, 0, 1)">--&gt;</span>
    <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">sqlMapGenerator </span><span style="color: rgba(255, 0, 0, 1)">targetPackage</span><span style="color: rgba(0, 0, 255, 1)">="com.lyh.ssm.crud.mapper"</span><span style="color: rgba(255, 0, 0, 1)"> targetProject</span><span style="color: rgba(0, 0, 255, 1)">=".\src"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
        <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">property </span><span style="color: rgba(255, 0, 0, 1)">name</span><span style="color: rgba(0, 0, 255, 1)">="enableSubPackages"</span><span style="color: rgba(255, 0, 0, 1)"> value</span><span style="color: rgba(0, 0, 255, 1)">="true"</span><span style="color: rgba(0, 0, 255, 1)">/&gt;</span>
    <span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">sqlMapGenerator</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>

    <span style="color: rgba(0, 128, 0, 1)">&lt;!--</span><span style="color: rgba(0, 128, 0, 1)"> step4: 指定接口生成的位置 </span><span style="color: rgba(0, 128, 0, 1)">--&gt;</span>
    <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">javaClientGenerator </span><span style="color: rgba(255, 0, 0, 1)">type</span><span style="color: rgba(0, 0, 255, 1)">="XMLMAPPER"</span><span style="color: rgba(255, 0, 0, 1)"> targetPackage</span><span style="color: rgba(0, 0, 255, 1)">="com.lyh.ssm.crud.dao"</span><span style="color: rgba(255, 0, 0, 1)"> targetProject</span><span style="color: rgba(0, 0, 255, 1)">=".\src"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
        <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">property </span><span style="color: rgba(255, 0, 0, 1)">name</span><span style="color: rgba(0, 0, 255, 1)">="enableSubPackages"</span><span style="color: rgba(255, 0, 0, 1)"> value</span><span style="color: rgba(0, 0, 255, 1)">="true"</span><span style="color: rgba(0, 0, 255, 1)">/&gt;</span>
    <span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">javaClientGenerator</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>

    <span style="color: rgba(0, 128, 0, 1)">&lt;!--</span><span style="color: rgba(0, 128, 0, 1)"> step5: 指定表的生成策略
        tableName 指定表名
        domainObjectName 指定表对应的 实体类的名字
    </span><span style="color: rgba(0, 128, 0, 1)">--&gt;</span>
    <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">table </span><span style="color: rgba(255, 0, 0, 1)">tableName</span><span style="color: rgba(0, 0, 255, 1)">="emp"</span><span style="color: rgba(255, 0, 0, 1)"> domainObjectName</span><span style="color: rgba(0, 0, 255, 1)">="Employee"</span><span style="color: rgba(0, 0, 255, 1)">&gt;&lt;/</span><span style="color: rgba(128, 0, 0, 1)">table</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
    <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">table </span><span style="color: rgba(255, 0, 0, 1)">tableName</span><span style="color: rgba(0, 0, 255, 1)">="dept"</span><span style="color: rgba(255, 0, 0, 1)"> domainObjectName</span><span style="color: rgba(0, 0, 255, 1)">="Department"</span><span style="color: rgba(0, 0, 255, 1)">&gt;&lt;/</span><span style="color: rgba(128, 0, 0, 1)">table</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">context</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>

</generatorConfiguration>

2、执行类 -- TestMybatisGenerator

import org.mybatis.generator.api.MyBatisGenerator;
import org.mybatis.generator.config.Configuration;
import org.mybatis.generator.config.xml.ConfigurationParser;
import org.mybatis.generator.exception.InvalidConfigurationException;
import org.mybatis.generator.exception.XMLParserException;
import org.mybatis.generator.internal.DefaultShellCallback;
import java.io.File;
import java.io.IOException;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;
public class TestMybatisGenerator {
public static void main(String[] args) throws IOException, XMLParserException, InvalidConfigurationException, SQLException, InterruptedException {
List<String> warnings = new ArrayList<String>();
boolean overwrite = true;
File configFile = new File("src//mybatis-generator.xml");
System.out.println(configFile);
ConfigurationParser cp = new ConfigurationParser(warnings);
Configuration config = cp.parseConfiguration(configFile);
DefaultShellCallback callback = new DefaultShellCallback(overwrite);
MyBatisGenerator myBatisGenerator = new MyBatisGenerator(config, callback, warnings);
myBatisGenerator.generate(null);
}
}

注：

　　文件生成后，位置可能不对。需手动将文件复制到相应位置。

回到顶部

五、数据库（mysql 1.8）

1、创建数据表

emp
    -- 创建一个 emp 表，其中 id 为主键且自增。
    CREATE TABLE emp(
        id int primary key auto_increment,
        name varchar(50),
        salary double,
        age int,
        email varchar(50) );
dept
-- 创建一个 dept 表，其中 deptId 为自增主键
CREATE TABLE dept(
deptId INT(11) PRIMARY KEY AUTO_INCREMENT,
deptName VARCHAR(255)
);
</span><span style="color: rgba(0, 128, 128, 1)">--</span><span style="color: rgba(0, 128, 128, 1)"> 给 emp 表增加一个列</span>
<span style="color: rgba(0, 0, 255, 1)">ALTER</span> <span style="color: rgba(0, 0, 255, 1)">TABLE</span> emp <span style="color: rgba(0, 0, 255, 1)">ADD</span> <span style="color: rgba(0, 0, 255, 1)">COLUMN</span> deptId <span style="color: rgba(0, 0, 255, 1)">INT</span>(<span style="color: rgba(128, 0, 0, 1); font-weight: bold">11</span><span style="color: rgba(0, 0, 0, 1)">);

</span><span style="color: rgba(0, 128, 128, 1)">--</span><span style="color: rgba(0, 128, 128, 1)"> 并将 emp 中该列作为外键关联到 dept 的主键</span>
<span style="color: rgba(0, 0, 255, 1)">ALTER</span> <span style="color: rgba(0, 0, 255, 1)">TABLE</span> emp <span style="color: rgba(0, 0, 255, 1)">ADD</span> <span style="color: rgba(0, 0, 255, 1)">CONSTRAINT</span> fk_emp_dept <span style="color: rgba(0, 0, 255, 1)">FOREIGN</span> <span style="color: rgba(0, 0, 255, 1)">KEY</span>(deptId) <span style="color: rgba(0, 0, 255, 1)">REFERENCES</span> dept(deptId);</pre>

2、插入一些数据（可选操作）

dept
    INSERT INTO dept(deptId, deptName) VALUES(1, '开发部');
    INSERT INTO dept(deptId, deptName) VALUES(2, '测试部');
    INSERT INTO dept(deptId, deptName) VALUES(3, '产品部');
emp(id 自增，给其插个 null 即可 )
INSERT INTO emp(id, name, salary, age, email, deptId) VALUES(null, 'tom', '8000', 23, 'tom@163.com', 1);
INSERT INTO emp(id, name, salary, age, email, deptId) VALUES(null, 'jarry', '7000', 23, 'jarry@163.com', 2);
INSERT INTO emp(id, name, salary, age, email, deptId) VALUES(null, 'rick', '9000', 23, 'rick@163.com', 3);
INSERT INTO emp(id, name, salary, age, email, deptId) VALUES(null, 'rose', '11000', 23, 'rose@163.com', 3);
INSERT INTO emp(id, name, salary, age, email, deptId) VALUES(null, 'tim', '3300', 23, 'tim@163.com', 2);
INSERT INTO emp(id, name, salary, age, email, deptId) VALUES(null, 'silla', '9100', 23, 'silla@163.com', 1);
INSERT INTO emp(id, name, salary, age, email, deptId) VALUES(null, 'jack', '10000', 23, 'jack@163.com', 1);
INSERT INTO emp(id, name, salary, age, email, deptId) VALUES(null, 'lisa', '6000', 23, 'lisa@163.com', 2);
INSERT INTO emp(id, name, salary, age, email, deptId) VALUES(null, 'mina', '9000', 23, 'mina@163.com', 2);

3、测试后台代码与数据库的交互（可选操作）

【在 applicationContext.xml 中配置 批量执行的 sqlSession】
<bean id="sqlSession" class="org.mybatis.spring.SqlSessionTemplate">
    <constructor-arg name="sqlSessionFactory" ref="sqlSessionFactory"/>
    <constructor-arg name="executorType" value="BATCH"/>
</bean>
【测试类 TestCodeEnvironment.java】
import com.lyh.ssm.crud.bean.Department;
import com.lyh.ssm.crud.bean.Employee;
import com.lyh.ssm.crud.dao.DepartmentMapper;
import com.lyh.ssm.crud.dao.EmployeeMapper;
import org.apache.ibatis.session.SqlSession;
import org.junit.Test;
import org.junit.runner.RunWith;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.test.context.ContextConfiguration;
import org.springframework.test.context.junit4.SpringJUnit4ClassRunner;
import java.util.UUID;
@RunWith(SpringJUnit4ClassRunner.class)
@ContextConfiguration(locations = "classpath:applicationContext.xml")
public class TestCodeEnvironment {
@Autowired
EmployeeMapper employeeMapper;
@Autowired
DepartmentMapper departmentMapper;

@Autowired
SqlSession sqlSession;

@Test
</span><span style="color: rgba(0, 0, 255, 1)">public</span> <span style="color: rgba(0, 0, 255, 1)">void</span><span style="color: rgba(0, 0, 0, 1)"> testDept() {
    departmentMapper.insertSelective(</span><span style="color: rgba(0, 0, 255, 1)">new</span> Department(<span style="color: rgba(0, 0, 255, 1)">null</span>, "开发部"<span style="color: rgba(0, 0, 0, 1)">));
    departmentMapper.insertSelective(</span><span style="color: rgba(0, 0, 255, 1)">new</span> Department(<span style="color: rgba(0, 0, 255, 1)">null</span>, "测试部"<span style="color: rgba(0, 0, 0, 1)">));
}

@Test
</span><span style="color: rgba(0, 0, 255, 1)">public</span> <span style="color: rgba(0, 0, 255, 1)">void</span><span style="color: rgba(0, 0, 0, 1)"> testEmp() {
    </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 批量执行 sql 语句</span>
    EmployeeMapper employeeMapper = sqlSession.getMapper(EmployeeMapper.<span style="color: rgba(0, 0, 255, 1)">class</span><span style="color: rgba(0, 0, 0, 1)">);
    </span><span style="color: rgba(0, 0, 255, 1)">for</span> (<span style="color: rgba(0, 0, 255, 1)">int</span> i = 0; i &lt; 2; i++<span style="color: rgba(0, 0, 0, 1)">){
        String name </span>= UUID.randomUUID().toString().substring(0, 5) +<span style="color: rgba(0, 0, 0, 1)"> i;
        employeeMapper.insertSelective(</span><span style="color: rgba(0, 0, 255, 1)">new</span> Employee(<span style="color: rgba(0, 0, 255, 1)">null</span>, name, 1000.0, 20, "jarry@163.com",1<span style="color: rgba(0, 0, 0, 1)">));
    }
}

}

回到顶部

六、后端代码

1、文件结构

2、代码

【com.lyh.ssm.crud.model.BaseModel】
package com.lyh.ssm.crud.model;
import java.util.ArrayList;
import java.util.List;
/**


基础返回类型，


messages 用于保存返回的信息


level 用于保存信息的级别


Level 为枚举类型
*/
public class BaseModel {
private List<String> messages = new ArrayList<String>();
private Level level = Level.info;
private Boolean success = true;
public Boolean getSuccess() {
return success;
}
public void setSuccess(Boolean success) {
this.success = success;
}
public List<String> getMessages() {
return messages;
}
public void setMessages(List<String> messages) {
this.messages = messages;
}
public Level getLevel() {
return level;
}
public void setLevel(Level level) {
this.level = level;
}
public enum Level {
info,
warn,
error
}
public void addMessage(String message) {
this.messages.add(message);
}
}
【com.lyh.ssm.crud.model.DeptModel】
package com.lyh.ssm.crud.model;


import com.lyh.ssm.crud.bean.Department;
import java.util.List;
public class DeptModel extends BaseModel {
private List<Department> departments;
public List&lt;Department&gt; getDepartments() {
    return departments;
}

public void setDepartments(List&lt;Department&gt; departments) {
    this.departments = departments;
}

}
【com.lyh.ssm.crud.model.EmpModel】
package com.lyh.ssm.crud.model;
import com.lyh.ssm.crud.bean.Employee;
import java.util.ArrayList;
import java.util.List;
/**


员工返回信息类，用于返回员工信息
*/
public class EmpModel extends BaseModel {
private List<Employee> employeeList = new ArrayList<Employee>();
public List<Employee> getEmployeeList() {
return employeeList;
}
public void setEmployeeList(List<Employee> employeeList) {
this.employeeList = employeeList;
}
public void addEmployee(Employee emp) {
this.employeeList.add(emp);
}
}
【com.lyh.ssm.crud.model.EmpPageModel】
package com.lyh.ssm.crud.model;


import com.github.pagehelper.PageInfo;
public class EmpPageModel extends BaseModel {
private PageInfo pageInfo;
public PageInfo getPageInfo() {
    return pageInfo;
}

public void setPageInfo(PageInfo pageInfo) {
    this.pageInfo = pageInfo;
}

}
【com.lyh.ssm.crud.controller.EmpController】
package com.lyh.ssm.crud.controller;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.lyh.ssm.crud.bean.Employee;
import com.lyh.ssm.crud.model.BaseModel;
import com.lyh.ssm.crud.model.EmpModel;
import com.lyh.ssm.crud.model.EmpPageModel;
import com.lyh.ssm.crud.service.EmpService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import java.util.List;
@RestController
public class EmpController {
@Autowired
private EmpService empService;
</span><span style="color: rgba(0, 128, 128, 1)">/*</span><span style="color: rgba(0, 128, 128, 1)">*
 * 获取分页的数据
 * @param pageNum 获取第几页的数据
 * @param pageSize 返回数据的条数
 * @return 返回数据
 </span><span style="color: rgba(0, 128, 128, 1)">*/</span>
<span style="color: rgba(0, 128, 0, 1)">@GetMapping</span>("<span style="color: rgba(128, 128, 128, 1)">/</span>emps<span style="color: rgba(128, 128, 128, 1)">/</span><span style="color: rgba(0, 0, 0, 1)">{pageNum}")
</span><span style="color: rgba(0, 0, 255, 1)">public</span> EmpPageModel getAllEmp(<span style="color: rgba(0, 128, 0, 1)">@PathVariable</span> <span style="color: rgba(0, 0, 255, 1)">Integer</span> pageNum, <span style="color: rgba(0, 128, 0, 1)">@RequestParam</span> <span style="color: rgba(0, 0, 255, 1)">Integer</span><span style="color: rgba(0, 0, 0, 1)"> pageSize) {
    </span><span style="color: rgba(128, 128, 128, 1)">//</span><span style="color: rgba(0, 0, 0, 1)"> step1:引入分页插件(PageHelper)
    </span><span style="color: rgba(128, 128, 128, 1)">//</span><span style="color: rgba(0, 0, 0, 1)"> step2:每次查询前，设置查询的页面以及查询的条数，每次获取5条数据
    PageHelper.startPage(pageNum, pageSize);
    </span><span style="color: rgba(128, 128, 128, 1)">//</span><span style="color: rgba(0, 0, 0, 1)"> step3:执行分页查询
    List</span><span style="color: rgba(128, 128, 128, 1)">&lt;</span>Employee<span style="color: rgba(128, 128, 128, 1)">&gt;</span> employeeList <span style="color: rgba(128, 128, 128, 1)">=</span><span style="color: rgba(0, 0, 0, 1)"> empService.getAllEmp();
    </span><span style="color: rgba(128, 128, 128, 1)">//</span><span style="color: rgba(0, 0, 0, 1)"> step4:包装查询后的数据
    PageInfo pageInfo </span><span style="color: rgba(128, 128, 128, 1)">=</span><span style="color: rgba(0, 0, 0, 1)"> new PageInfo(employeeList);
    EmpPageModel empPageModel </span><span style="color: rgba(128, 128, 128, 1)">=</span><span style="color: rgba(0, 0, 0, 1)"> new EmpPageModel();
    </span><span style="color: rgba(0, 0, 255, 1)">if</span> (employeeList.size() <span style="color: rgba(128, 128, 128, 1)">&lt;=</span> <span style="color: rgba(128, 0, 0, 1); font-weight: bold">0</span><span style="color: rgba(0, 0, 0, 1)">) {
        empPageModel.addMessage("获取分页数据失败");
        empPageModel.setSuccess(false);
        empPageModel.setLevel(BaseModel.</span><span style="color: rgba(0, 0, 255, 1)">Level</span><span style="color: rgba(0, 0, 0, 1)">.error);
        </span><span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)"> empPageModel;
    }
    empPageModel.addMessage("获取分页数据成功");
    empPageModel.setSuccess(true);
    empPageModel.setLevel(BaseModel.</span><span style="color: rgba(0, 0, 255, 1)">Level</span><span style="color: rgba(0, 0, 0, 1)">.info);
    empPageModel.setPageInfo(pageInfo);
    </span><span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)"> empPageModel;
}

</span><span style="color: rgba(0, 128, 128, 1)">/*</span><span style="color: rgba(0, 128, 128, 1)">*
 * 获取某个员工的信息
 * REST -- GET
 * @param id 员工的id
 * @return 返回数据
 </span><span style="color: rgba(0, 128, 128, 1)">*/</span>
<span style="color: rgba(0, 128, 0, 1)">@GetMapping</span>("<span style="color: rgba(128, 128, 128, 1)">/</span>emp<span style="color: rgba(128, 128, 128, 1)">/</span><span style="color: rgba(0, 0, 0, 1)">{id}")
</span><span style="color: rgba(0, 0, 255, 1)">public</span> EmpModel getEmpById(<span style="color: rgba(0, 128, 0, 1)">@PathVariable</span> <span style="color: rgba(0, 0, 255, 1)">Integer</span><span style="color: rgba(0, 0, 0, 1)"> id) {
    EmpModel empModel </span><span style="color: rgba(128, 128, 128, 1)">=</span><span style="color: rgba(0, 0, 0, 1)"> new EmpModel();
    </span><span style="color: rgba(0, 0, 255, 1)">if</span> (empService.getEmpById(id) <span style="color: rgba(128, 128, 128, 1)">==</span> <span style="color: rgba(0, 0, 255, 1)">null</span><span style="color: rgba(0, 0, 0, 1)">) {
        empModel.addMessage("获取员工信息失败");
        empModel.setSuccess(false);
        empModel.setLevel(BaseModel.</span><span style="color: rgba(0, 0, 255, 1)">Level</span><span style="color: rgba(0, 0, 0, 1)">.error);
        </span><span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)"> empModel;
    }
    empModel.addMessage("获取员工信息成功");
    empModel.setSuccess(true);
    empModel.setLevel(BaseModel.</span><span style="color: rgba(0, 0, 255, 1)">Level</span><span style="color: rgba(0, 0, 0, 1)">.info);
    empModel.addEmployee(empService.getEmpById(id));
    </span><span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)"> empModel;
}

</span><span style="color: rgba(0, 128, 128, 1)">/*</span><span style="color: rgba(0, 128, 128, 1)">*
 * 删除某个员工的信息
 * REST -- DELETE
 * @param id 员工的id
 * @return 返回数据
 </span><span style="color: rgba(0, 128, 128, 1)">*/</span>
<span style="color: rgba(0, 128, 0, 1)">@RequestMapping</span>(value <span style="color: rgba(128, 128, 128, 1)">=</span> "<span style="color: rgba(128, 128, 128, 1)">/</span>emp<span style="color: rgba(128, 128, 128, 1)">/</span>{id}", method <span style="color: rgba(128, 128, 128, 1)">=</span> RequestMethod.<span style="color: rgba(0, 0, 255, 1)">DELETE</span><span style="color: rgba(0, 0, 0, 1)">)
</span><span style="color: rgba(0, 0, 255, 1)">public</span> BaseModel deleteEmpById(<span style="color: rgba(0, 128, 0, 1)">@PathVariable</span> <span style="color: rgba(0, 0, 255, 1)">Integer</span><span style="color: rgba(0, 0, 0, 1)"> id) {
    BaseModel baseModel </span><span style="color: rgba(128, 128, 128, 1)">=</span><span style="color: rgba(0, 0, 0, 1)"> new BaseModel();
    </span><span style="color: rgba(0, 0, 255, 1)">if</span> (empService.deleteEmpById(id) <span style="color: rgba(128, 128, 128, 1)">!=</span> <span style="color: rgba(128, 0, 0, 1); font-weight: bold">0</span><span style="color: rgba(0, 0, 0, 1)">) {
        baseModel.addMessage("删除员工信息成功");
        baseModel.setSuccess(true);
        baseModel.setLevel(BaseModel.</span><span style="color: rgba(0, 0, 255, 1)">Level</span><span style="color: rgba(0, 0, 0, 1)">.info);
        </span><span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)"> baseModel;
    }
    baseModel.addMessage("删除员工信息失败");
    baseModel.setSuccess(false);
    baseModel.setLevel(BaseModel.</span><span style="color: rgba(0, 0, 255, 1)">Level</span><span style="color: rgba(0, 0, 0, 1)">.error);
    </span><span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)"> baseModel;
}

</span><span style="color: rgba(0, 128, 128, 1)">/*</span><span style="color: rgba(0, 128, 128, 1)">*
 * 向员工表中插入员工信息
 * REST -- POST
 * 使用 @RequestBody 需注意，前台传递的参数名要与 Employee 里的参数名对应，否则接收不到值
 * @param employee 员工信息
 * @return 返回数据
 </span><span style="color: rgba(0, 128, 128, 1)">*/</span>
<span style="color: rgba(0, 128, 0, 1)">@PostMapping</span>("<span style="color: rgba(128, 128, 128, 1)">/</span><span style="color: rgba(0, 0, 0, 1)">emp")
</span><span style="color: rgba(0, 0, 255, 1)">public</span> BaseModel insertEmp(<span style="color: rgba(0, 128, 0, 1)">@RequestBody</span><span style="color: rgba(0, 0, 0, 1)"> Employee employee) {
    BaseModel baseModel </span><span style="color: rgba(128, 128, 128, 1)">=</span><span style="color: rgba(0, 0, 0, 1)"> new BaseModel();
    </span><span style="color: rgba(0, 0, 255, 1)">if</span> (empService.insertEmp(employee) <span style="color: rgba(128, 128, 128, 1)">!=</span> <span style="color: rgba(128, 0, 0, 1); font-weight: bold">0</span><span style="color: rgba(0, 0, 0, 1)">) {
        baseModel.addMessage("插入员工信息成功");
        baseModel.setSuccess(true);
        baseModel.setLevel(BaseModel.</span><span style="color: rgba(0, 0, 255, 1)">Level</span><span style="color: rgba(0, 0, 0, 1)">.info);
        </span><span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)"> baseModel;
    }
    baseModel.addMessage("插入员工信息失败");
    baseModel.setSuccess(false);
    baseModel.setLevel(BaseModel.</span><span style="color: rgba(0, 0, 255, 1)">Level</span><span style="color: rgba(0, 0, 0, 1)">.error);
    </span><span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)"> baseModel;
}

</span><span style="color: rgba(0, 128, 128, 1)">/*</span><span style="color: rgba(0, 128, 128, 1)">*
 * 更新员工信息
 * REST -- PUT
 * @param employee 员工信息
 * @return 返回数据
 </span><span style="color: rgba(0, 128, 128, 1)">*/</span>
<span style="color: rgba(0, 128, 0, 1)">@RequestMapping</span>(value <span style="color: rgba(128, 128, 128, 1)">=</span> "<span style="color: rgba(128, 128, 128, 1)">/</span>emp<span style="color: rgba(128, 128, 128, 1)">/</span>{id}", method <span style="color: rgba(128, 128, 128, 1)">=</span><span style="color: rgba(0, 0, 0, 1)"> RequestMethod.PUT)
</span><span style="color: rgba(0, 0, 255, 1)">public</span> BaseModel updateEmp(<span style="color: rgba(0, 128, 0, 1)">@RequestBody</span><span style="color: rgba(0, 0, 0, 1)"> Employee employee) {
    BaseModel baseModel </span><span style="color: rgba(128, 128, 128, 1)">=</span><span style="color: rgba(0, 0, 0, 1)"> new BaseModel();
    </span><span style="color: rgba(0, 0, 255, 1)">if</span> (empService.updateEmp(employee) <span style="color: rgba(128, 128, 128, 1)">!=</span> <span style="color: rgba(128, 0, 0, 1); font-weight: bold">0</span><span style="color: rgba(0, 0, 0, 1)">) {
        baseModel.addMessage("更新员工信息成功");
        baseModel.setSuccess(true);
        baseModel.setLevel(BaseModel.</span><span style="color: rgba(0, 0, 255, 1)">Level</span><span style="color: rgba(0, 0, 0, 1)">.info);
        </span><span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)"> baseModel;
    }
    baseModel.addMessage("更新员工信息失败");
    baseModel.setSuccess(false);
    baseModel.setLevel(BaseModel.</span><span style="color: rgba(0, 0, 255, 1)">Level</span><span style="color: rgba(0, 0, 0, 1)">.error);
    </span><span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)"> baseModel;
}

}
【com.lyh.ssm.crud.controller.DeptController】
package com.lyh.ssm.crud.controller;
import com.lyh.ssm.crud.model.BaseModel;
import com.lyh.ssm.crud.model.DeptModel;
import com.lyh.ssm.crud.service.DeptService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
@RestController
public class DeptController {
@Autowired
private DeptService deptService;
</span><span style="color: rgba(0, 128, 0, 1)">@GetMapping</span>("<span style="color: rgba(128, 128, 128, 1)">/</span><span style="color: rgba(0, 0, 0, 1)">depts")
</span><span style="color: rgba(0, 0, 255, 1)">public</span><span style="color: rgba(0, 0, 0, 1)"> DeptModel getAllDept() {
    DeptModel deptModel </span><span style="color: rgba(128, 128, 128, 1)">=</span><span style="color: rgba(0, 0, 0, 1)"> new DeptModel();
    </span><span style="color: rgba(0, 0, 255, 1)">if</span> (deptService.getAllDept().size() <span style="color: rgba(128, 128, 128, 1)">&lt;=</span> <span style="color: rgba(128, 0, 0, 1); font-weight: bold">0</span><span style="color: rgba(0, 0, 0, 1)">) {
        deptModel.addMessage("获取部门信息失败");
        deptModel.setSuccess(false);
        deptModel.setLevel(BaseModel.</span><span style="color: rgba(0, 0, 255, 1)">Level</span><span style="color: rgba(0, 0, 0, 1)">.error);
        </span><span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)"> deptModel;
    }
    deptModel.addMessage("获取部门信息成功");
    deptModel.setSuccess(true);
    deptModel.setLevel(BaseModel.</span><span style="color: rgba(0, 0, 255, 1)">Level</span><span style="color: rgba(0, 0, 0, 1)">.info);
    deptModel.setDepartments(deptService.getAllDept());
    </span><span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)"> deptModel;
}

}
【com.lyh.ssm.crud.service.DeptService】
package com.lyh.ssm.crud.service;
import com.lyh.ssm.crud.bean.Department;
import com.lyh.ssm.crud.dao.DepartmentMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;
@Service
public class DeptService {
@Autowired
private DepartmentMapper departmentMapper;
</span><span style="color: rgba(0, 0, 255, 1)">public</span> List<span style="color: rgba(128, 128, 128, 1)">&lt;</span>Department<span style="color: rgba(128, 128, 128, 1)">&gt;</span><span style="color: rgba(0, 0, 0, 1)"> getAllDept() {
    </span><span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)"> departmentMapper.selectAll();
}

}
【com.lyh.ssm.crud.service.EmpService】
package com.lyh.ssm.crud.service;
import com.lyh.ssm.crud.bean.Employee;
import com.lyh.ssm.crud.dao.EmployeeMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;
@Service
public class EmpService {
@Autowired
private EmployeeMapper employeeMapper;
</span><span style="color: rgba(0, 128, 128, 1)">/*</span><span style="color: rgba(0, 128, 128, 1)">*
 * 获取某个员工的信息
 *
 * @param id 某个员工的id
 * @return 某个员工的信息
 </span><span style="color: rgba(0, 128, 128, 1)">*/</span>
<span style="color: rgba(0, 0, 255, 1)">public</span> Employee getEmpById(<span style="color: rgba(0, 0, 255, 1)">Integer</span><span style="color: rgba(0, 0, 0, 1)"> id) {
    </span><span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)"> employeeMapper.selectByPrimaryKey(id);
}

</span><span style="color: rgba(0, 128, 128, 1)">/*</span><span style="color: rgba(0, 128, 128, 1)">*
 * 获取所有员工的信息
 *
 * @return 所有员工的信息
 </span><span style="color: rgba(0, 128, 128, 1)">*/</span>
<span style="color: rgba(0, 0, 255, 1)">public</span> List<span style="color: rgba(128, 128, 128, 1)">&lt;</span>Employee<span style="color: rgba(128, 128, 128, 1)">&gt;</span><span style="color: rgba(0, 0, 0, 1)"> getAllEmp() {
    </span><span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)"> employeeMapper.selectAll();
}

</span><span style="color: rgba(0, 128, 128, 1)">/*</span><span style="color: rgba(0, 128, 128, 1)">*
 * 插入某个员工的信息
 *
 * @param emp 某员工的信息
 * @return 返回插入影响的行数
 </span><span style="color: rgba(0, 128, 128, 1)">*/</span>
<span style="color: rgba(0, 0, 255, 1)">public</span> <span style="color: rgba(0, 0, 255, 1)">Integer</span><span style="color: rgba(0, 0, 0, 1)"> insertEmp(Employee emp) {
    </span><span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)"> employeeMapper.insertSelective(emp);
}

</span><span style="color: rgba(0, 128, 128, 1)">/*</span><span style="color: rgba(0, 128, 128, 1)">*
 * 删除某个员工的信息
 *
 * @param id 员工的id
 * @return 返回删除影响的行数
 </span><span style="color: rgba(0, 128, 128, 1)">*/</span>
<span style="color: rgba(0, 0, 255, 1)">public</span> <span style="color: rgba(0, 0, 255, 1)">Integer</span> deleteEmpById(<span style="color: rgba(0, 0, 255, 1)">Integer</span><span style="color: rgba(0, 0, 0, 1)"> id) {
    </span><span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)"> employeeMapper.deleteByPrimaryKey(id);
}

</span><span style="color: rgba(0, 128, 128, 1)">/*</span><span style="color: rgba(0, 128, 128, 1)">*
 * 更新某个员工的信息
 * @param employee 员工信息
 * @return 返回修改影响的行数
 </span><span style="color: rgba(0, 128, 128, 1)">*/</span>
<span style="color: rgba(0, 0, 255, 1)">public</span> <span style="color: rgba(0, 0, 255, 1)">Integer</span><span style="color: rgba(0, 0, 0, 1)"> updateEmp(Employee employee) {
    </span><span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)"> employeeMapper.updateByPrimaryKeySelective(employee);
}

}
【com.lyh.ssm.crud.dao.DepartmentMapper】
package com.lyh.ssm.crud.dao;
import com.lyh.ssm.crud.bean.Department;
import com.lyh.ssm.crud.bean.DepartmentExample;
import java.util.List;
import org.apache.ibatis.annotations.Param;
public interface DepartmentMapper {
long countByExample(DepartmentExample example);
int deleteByExample(DepartmentExample example);

int deleteByPrimaryKey(Integer deptid);

int insert(Department record);

int insertSelective(Department record);

List&lt;Department&gt; selectByExample(DepartmentExample example);

Department selectByPrimaryKey(Integer deptid);

int updateByExampleSelective(@Param("record") Department record, @Param("example") DepartmentExample example);

int updateByExample(@Param("record") Department record, @Param("example") DepartmentExample example);

int updateByPrimaryKeySelective(Department record);

int updateByPrimaryKey(Department record);

List&lt;Department&gt; selectAll();

}
【com.lyh.ssm.crud.dao.EmployeeMapper】
package com.lyh.ssm.crud.dao;
import com.lyh.ssm.crud.bean.Employee;
import com.lyh.ssm.crud.bean.EmployeeExample;
import java.util.List;
import org.apache.ibatis.annotations.Param;
public interface EmployeeMapper {
long countByExample(EmployeeExample example);
int deleteByExample(EmployeeExample example);

int deleteByPrimaryKey(Integer id);

int insert(Employee record);

int insertSelective(Employee record);

List&lt;Employee&gt; selectByExample(EmployeeExample example);

List&lt;Employee&gt; selectAll();

Employee selectByPrimaryKey(Integer id);

int updateByExampleSelective(@Param("record") Employee record, @Param("example") EmployeeExample example);

int updateByExample(@Param("record") Employee record, @Param("example") EmployeeExample example);

int updateByPrimaryKeySelective(Employee record);

int updateByPrimaryKey(Employee record);

}
【mappers/DepartmentMapper.xml 添加方法】
<select id="selectAll" resultMap="BaseResultMap">
select
<include refid="Base_Column_List" />
from dept
</select>
【mappers/EmployeeMapper.xml】
<select id="selectAll" resultMap="BaseResultMap">
SELECT e.id AS id, e.name AS name, e.salary AS salary, e.age AS age, e.email AS email, d.deptId AS deptId, d.deptName AS deptName
FROM emp e
LEFT JOIN dept d
ON e.deptId = d.deptId
ORDER BY e.id
</select>
<span style="color: rgba(128, 128, 128, 1)">&lt;</span><span style="color: rgba(0, 0, 255, 1)">select</span> id<span style="color: rgba(128, 128, 128, 1)">=</span>"selectByPrimaryKey" parameterType<span style="color: rgba(128, 128, 128, 1)">=</span>"java.lang.<span style="color: rgba(0, 0, 255, 1)">Integer</span>" resultMap<span style="color: rgba(128, 128, 128, 1)">=</span>"BaseResultMap"<span style="color: rgba(128, 128, 128, 1)">&gt;</span>
    <span style="color: rgba(0, 0, 255, 1)">SELECT</span> e.id <span style="color: rgba(0, 0, 255, 1)">AS</span> id, e.name <span style="color: rgba(0, 0, 255, 1)">AS</span> name, e.salary <span style="color: rgba(0, 0, 255, 1)">AS</span> salary, e.age <span style="color: rgba(0, 0, 255, 1)">AS</span> age, e.email <span style="color: rgba(0, 0, 255, 1)">AS</span> email, d.deptId <span style="color: rgba(0, 0, 255, 1)">AS</span> deptId, d.deptName <span style="color: rgba(0, 0, 255, 1)">AS</span><span style="color: rgba(0, 0, 0, 1)"> deptName
    </span><span style="color: rgba(0, 0, 255, 1)">FROM</span><span style="color: rgba(0, 0, 0, 1)"> emp e
    </span><span style="color: rgba(128, 128, 128, 1)">LEFT</span> <span style="color: rgba(128, 128, 128, 1)">JOIN</span><span style="color: rgba(0, 0, 0, 1)"> dept d
    </span><span style="color: rgba(0, 0, 255, 1)">ON</span> e.deptId <span style="color: rgba(128, 128, 128, 1)">=</span><span style="color: rgba(0, 0, 0, 1)"> d.deptId
    </span><span style="color: rgba(0, 0, 255, 1)">WHERE</span> e.id <span style="color: rgba(128, 128, 128, 1)">=</span> #{id,jdbcType<span style="color: rgba(128, 128, 128, 1)">=</span><span style="color: rgba(0, 0, 255, 1)">INTEGER</span><span style="color: rgba(0, 0, 0, 1)">}
</span><span style="color: rgba(128, 128, 128, 1)">&lt;/</span><span style="color: rgba(0, 0, 255, 1)">select</span><span style="color: rgba(128, 128, 128, 1)">&gt;</span></pre>

回到顶部

七、前端代码 -- 静态页面

1、非 template/render 模式下

此时部分组件名前需加前缀 i- 才可使用。

比如：

　　Button --> i-button

　　Table --> i-table

　　Select --> i-select

　　Option --> i-option

　　Form --> i-form

　　FormItem --> form-item

【非 template/render 模式下】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ViewUI example</title>
<link rel="stylesheet" type="text/css" href="http://unpkg.com/view-design/dist/styles/iview.css">
<script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>
<script type="text/javascript" src="http://unpkg.com/view-design/dist/iview.min.js"></script>
</head>
<body>
<div id="app">
<div style="width: 1200px; margin: 0 auto;" class="layout">
<Layout>
<header>
<row>
<Divider orientation="left">
<h1>员工列表</h1>
</Divider>
</row>
<row justify="end" type="flex">
<i-col style="margin-right: 5px"><i-button type="primary" icon="md-add" @click="create">添加</i-button></i-col>
<i-col style="margin-right: 5px"><i-button type="success" icon="md-settings" @click="setUp = true">设置</i-button></i-col>
</row>
</header>
<Content>
<i-table :data="data2" :columns="tableColumns1" :stripe="showStripe" :border="showBorder" :showHeader="showHeader" :size="tableSize" :height="fixedHeader ? 250 :''">
<template slot-scope="{row}" slot="name">
<strong>{{row.name}}</strong>
</template>
<template slot-scope="{row, index}" slot="action">
<i-button type="primary" size="small" style="margin-right: 5px" @click="show(index)" icon="ios-create-outline">编辑</i-button>
<i-button type="error" size="small" @click="remove(index)" icon="ios-trash">删除</i-button>
</template>
</i-table>
<div style="margin: 10px;overflow: hidden">
<div style="float: right;">
<!-- current 设置当前选中页,pageSize 设置每页显示数据的条数-->
<Page :total="data1.length" :pageSize="pageSize" :current="currentPage" @on-change="changePage" show-sizer show-elevator show-total @on-page-size-change="changePageSize"></Page>
</div>
</div>
</Content>
</Layout>
    <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">Drawer </span><span style="color: rgba(255, 0, 0, 1)">title</span><span style="color: rgba(0, 0, 255, 1)">="Set up"</span><span style="color: rgba(255, 0, 0, 1)"> :closable</span><span style="color: rgba(0, 0, 255, 1)">="true"</span><span style="color: rgba(255, 0, 0, 1)"> :mask</span><span style="color: rgba(0, 0, 255, 1)">="false"</span><span style="color: rgba(255, 0, 0, 1)"> v-model</span><span style="color: rgba(0, 0, 255, 1)">="setUp"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
        <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">div </span><span style="color: rgba(255, 0, 0, 1)">style</span><span style="color: rgba(0, 0, 255, 1)">="margin: 10px"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span><span style="color: rgba(0, 0, 0, 1)">
            Table Setting</span><span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">br</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
            <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">i-switch </span><span style="color: rgba(255, 0, 0, 1)">v-model</span><span style="color: rgba(0, 0, 255, 1)">="showBorder"</span><span style="color: rgba(255, 0, 0, 1)"> style</span><span style="color: rgba(0, 0, 255, 1)">="margin-right: 5px"</span><span style="color: rgba(0, 0, 255, 1)">&gt;&lt;/</span><span style="color: rgba(128, 0, 0, 1)">i-switch</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>Display border<span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">br</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
            <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">i-switch </span><span style="color: rgba(255, 0, 0, 1)">v-model</span><span style="color: rgba(0, 0, 255, 1)">="showStripe"</span><span style="color: rgba(255, 0, 0, 1)"> style</span><span style="color: rgba(0, 0, 255, 1)">="margin-right: 5px"</span><span style="color: rgba(0, 0, 255, 1)">&gt;&lt;/</span><span style="color: rgba(128, 0, 0, 1)">i-switch</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>Display stripe<span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">br</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
            <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">i-switch </span><span style="color: rgba(255, 0, 0, 1)">v-model</span><span style="color: rgba(0, 0, 255, 1)">="showIndex"</span><span style="color: rgba(255, 0, 0, 1)"> style</span><span style="color: rgba(0, 0, 255, 1)">="margin-right: 5px"</span><span style="color: rgba(0, 0, 255, 1)">&gt;&lt;/</span><span style="color: rgba(128, 0, 0, 1)">i-switch</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>Display index<span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">br</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
            <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">i-switch </span><span style="color: rgba(255, 0, 0, 1)">v-model</span><span style="color: rgba(0, 0, 255, 1)">="showCheckbox"</span><span style="color: rgba(255, 0, 0, 1)"> style</span><span style="color: rgba(0, 0, 255, 1)">="margin-right: 5px"</span><span style="color: rgba(0, 0, 255, 1)">&gt;&lt;/</span><span style="color: rgba(128, 0, 0, 1)">i-switch</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>Display multi choice<span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">br</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
            <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">i-switch </span><span style="color: rgba(255, 0, 0, 1)">v-model</span><span style="color: rgba(0, 0, 255, 1)">="showHeader"</span><span style="color: rgba(255, 0, 0, 1)"> style</span><span style="color: rgba(0, 0, 255, 1)">="margin-right: 5px"</span><span style="color: rgba(0, 0, 255, 1)">&gt;&lt;/</span><span style="color: rgba(128, 0, 0, 1)">i-switch</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>Display header<span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">br</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
            <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">i-switch </span><span style="color: rgba(255, 0, 0, 1)">v-model</span><span style="color: rgba(0, 0, 255, 1)">="fixedHeader"</span><span style="color: rgba(255, 0, 0, 1)"> style</span><span style="color: rgba(0, 0, 255, 1)">="margin-right: 5px"</span><span style="color: rgba(0, 0, 255, 1)">&gt;&lt;/</span><span style="color: rgba(128, 0, 0, 1)">i-switch</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>Table scrolling<span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">br</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
            <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">br</span><span style="color: rgba(0, 0, 255, 1)">&gt;&lt;</span><span style="color: rgba(128, 0, 0, 1)">br</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span><span style="color: rgba(0, 0, 0, 1)">
    
            Table size
            </span><span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">i-select </span><span style="color: rgba(255, 0, 0, 1)">v-model</span><span style="color: rgba(0, 0, 255, 1)">="tableSize"</span><span style="color: rgba(255, 0, 0, 1)"> style</span><span style="color: rgba(0, 0, 255, 1)">="width:200px"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
                <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">i-option </span><span style="color: rgba(255, 0, 0, 1)">value</span><span style="color: rgba(0, 0, 255, 1)">="large"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>large<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">i-option</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
                <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">i-option </span><span style="color: rgba(255, 0, 0, 1)">value</span><span style="color: rgba(0, 0, 255, 1)">="default"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>medium(default)<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">i-option</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
                <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">i-option </span><span style="color: rgba(255, 0, 0, 1)">value</span><span style="color: rgba(0, 0, 255, 1)">="small"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>small<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">i-option</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
            <span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">i-select</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
        <span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">div</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
    <span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">Drawer</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>

    <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">Modal </span><span style="color: rgba(255, 0, 0, 1)">v-model</span><span style="color: rgba(0, 0, 255, 1)">="empModal"</span><span style="color: rgba(255, 0, 0, 1)"> title</span><span style="color: rgba(0, 0, 255, 1)">="Emp Info"</span><span style="color: rgba(255, 0, 0, 1)"> @on-ok</span><span style="color: rgba(0, 0, 255, 1)">="okEditor"</span><span style="color: rgba(255, 0, 0, 1)"> @on-cancel</span><span style="color: rgba(0, 0, 255, 1)">="cancelEditor"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
        <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">i-form </span><span style="color: rgba(255, 0, 0, 1)">:label-width</span><span style="color: rgba(0, 0, 255, 1)">="80"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
            <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">form-item </span><span style="color: rgba(255, 0, 0, 1)">label</span><span style="color: rgba(0, 0, 255, 1)">="Name:"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
                <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">i-input </span><span style="color: rgba(255, 0, 0, 1)">v-model</span><span style="color: rgba(0, 0, 255, 1)">="empInfo.name"</span><span style="color: rgba(255, 0, 0, 1)"> placeholder</span><span style="color: rgba(0, 0, 255, 1)">="Name..."</span><span style="color: rgba(255, 0, 0, 1)"> style</span><span style="color: rgba(0, 0, 255, 1)">="width: 300px;"</span> <span style="color: rgba(0, 0, 255, 1)">/&gt;</span>
            <span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">form-item</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
            <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">form-item </span><span style="color: rgba(255, 0, 0, 1)">label</span><span style="color: rgba(0, 0, 255, 1)">="Salary:"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
                <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">i-input </span><span style="color: rgba(255, 0, 0, 1)">v-model</span><span style="color: rgba(0, 0, 255, 1)">="empInfo.salary"</span><span style="color: rgba(255, 0, 0, 1)"> placeholder</span><span style="color: rgba(0, 0, 255, 1)">="Salary..."</span><span style="color: rgba(255, 0, 0, 1)"> style</span><span style="color: rgba(0, 0, 255, 1)">="width: 300px;"</span> <span style="color: rgba(0, 0, 255, 1)">/&gt;</span>
            <span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">form-item</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
            <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">form-item </span><span style="color: rgba(255, 0, 0, 1)">label</span><span style="color: rgba(0, 0, 255, 1)">="Age:"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
                <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">i-input </span><span style="color: rgba(255, 0, 0, 1)">v-model</span><span style="color: rgba(0, 0, 255, 1)">="empInfo.age"</span><span style="color: rgba(255, 0, 0, 1)"> placeholder</span><span style="color: rgba(0, 0, 255, 1)">="Age..."</span><span style="color: rgba(255, 0, 0, 1)"> style</span><span style="color: rgba(0, 0, 255, 1)">="width: 300px;"</span> <span style="color: rgba(0, 0, 255, 1)">/&gt;</span>
            <span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">form-item</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
            <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">form-item </span><span style="color: rgba(255, 0, 0, 1)">label</span><span style="color: rgba(0, 0, 255, 1)">="Email:"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
                <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">i-input </span><span style="color: rgba(255, 0, 0, 1)">v-model</span><span style="color: rgba(0, 0, 255, 1)">="empInfo.email"</span><span style="color: rgba(255, 0, 0, 1)"> placeholder</span><span style="color: rgba(0, 0, 255, 1)">="Email..."</span><span style="color: rgba(255, 0, 0, 1)"> style</span><span style="color: rgba(0, 0, 255, 1)">="width: 300px;"</span> <span style="color: rgba(0, 0, 255, 1)">/&gt;</span>
            <span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">form-item</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
            <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">form-item </span><span style="color: rgba(255, 0, 0, 1)">label</span><span style="color: rgba(0, 0, 255, 1)">="DeptName:"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
                <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">i-select </span><span style="color: rgba(255, 0, 0, 1)">v-model</span><span style="color: rgba(0, 0, 255, 1)">="empInfo.deptName"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
                    <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">i-option </span><span style="color: rgba(255, 0, 0, 1)">v-for</span><span style="color: rgba(0, 0, 255, 1)">="(item, index) in dept"</span><span style="color: rgba(255, 0, 0, 1)"> :key</span><span style="color: rgba(0, 0, 255, 1)">="index"</span><span style="color: rgba(255, 0, 0, 1)"> :value</span><span style="color: rgba(0, 0, 255, 1)">="item.deptName"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span> {{item.deptName}} <span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">i-option</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
                <span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">i-select</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
            <span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">form-item</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
        <span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">i-form</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
    <span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">Modal</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">div</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>

</div>
<script>
new Vue({
el: '#app',
data() {
return {
// 添加与编辑复用 modal 框，false 为添加，true 为编辑
                createOrEditor: false,
// 是否打开员工信息框
                empModal: false,
// 用于保存一个员工的信息
                empInfo: {},
// 是否打开设置
                setUp: false,
// 当前页码
                currentPage: 1,
// 每页数据的条数
                pageSize: 10,
// 表格的列
                tableColumns1: [{
// 分页时，若要出现自动索引，设置 type = "index2"，并使用 render 来返回索引值
                        type: 'index2',
width: 80,
align: 'center',
render: (h, params) => {
return h('span', params.index + (this.currentPage - 1) * this.pageSize + 1);
}
}, {
title: 'Name',
slot: 'name'
}, {
title: 'Salary',
key: 'salary',
sortable: true
},
{
title: 'Age',
key: 'age',
sortable: true
},
{
title: 'Email',
key: 'email'
}, {
title: 'DeptName',
key: 'deptName'
},
{
title: 'Action',
slot: 'action',
width: 200,
align: 'center'
}
],
dept: [{
deptId: '1',
deptName: '开发部'
},{
deptId: '2',
deptName: '测试部'
},{
deptId: '3',
deptName: '产品部'
}],
// 表格的源数据
                data1: [{
name: 'John Brown',
salary: 6000,
age: 18,
email: '323@163.com',
deptId: '1',
deptName: '开发部'
},
{
name: 'Jim Green',
salary: 6000,
age: 24,
email: '323@163.com',
deptId: '2',
deptName: '测试部'
},
{
name: 'Joe Black',
salary: 6000,
age: 30,
email: '323@163.com',
deptId: '3',
deptName: '产品部'
},
{
name: 'Jon Snow',
salary: 6000,
age: 26,
email: '323@163.com',
deptId: '1',
deptName: '开发部'
}, {
name: 'John Brown',
salary: 6000,
age: 18,
email: '323@163.com',
deptId: '2',
deptName: '测试部'
},
{
name: 'Jim Green',
salary: 6000,
age: 24,
email: '323@163.com',
deptId: '1',
deptName: '开发部'
},
{
name: 'Joe Black',
salary: 6000,
age: 30,
email: '323@163.com',
deptId: '1',
deptName: '开发部'
},
{
name: 'Jon Snow',
salary: 6000,
age: 26,
email: '323@163.com',
deptId: '2',
deptName: '测试部'
},
{
name: 'Jim Green',
salary: 6000,
age: 24,
email: '323@163.com',
deptId: '1',
deptName: '开发部'
},
{
name: 'Joe Black',
salary: 6000,
age: 30,
email: '323@163.com',
deptId: '2',
deptName: '测试部'
},
{
name: 'Jon Snow',
salary: 6000,
age: 26,
email: '323@163.com',
deptId: '3',
deptName: '产品部'
}
],
// 表格每页的数据
                data2: [],
// 表格边框是否显示
                showBorder: false,
// 表格斑马纹是否显示
                showStripe: false,
// 表格头是否显示
                showHeader: true,
// 表格索引是否显示
                showIndex: true,
// 表格多选框是否显示
                showCheckbox: false,
// 表格滚动条是否开启
                fixedHeader: false,
// 改变表格大小
                tableSize: 'default'
}
},
methods: {
changePage(index) {
// 改变当前的页码，并获取当前页码所拥有的数据
this.currentPage = index
// 注意，此处不能直接用 = 赋值。使用 = 后（指向的地址相同），修改 data2 的同时会修改 data1
this.data2 = [].concat(this.data1.slice((index - 1)  this.pageSize, index  this.pageSize))
},
show(index) {
// 弹出一个模态框，用于展示某条数据的信息
this.empInfo = Object.assign(this.empInfo, this.data2[index])
this.empModal = true
this.createOrEditor = true
this.empInfo = Object.assign(this.empInfo, {index: index})
},
create() {
// 用于添加一条信息
this.empInfo = []
this.empModal = true
this.createOrEditor = false
},
remove(index) {
// 删除某条数据（删除源数据）
this.data1.splice((this.currentPage - 1)  10 + index, 1)
},
changePageSize(index) {
// 改变每页显示的条数
this.$Message.info({
content: '当前页面显示条数修改为： ' + index + '条 / 页'
})
// 改变后，跳转到首页，并刷新列表
this.currentPage = 1
this.pageSize = index
this.changePage(this.currentPage)
},
okEditor () {
if (this.createOrEditor) {
// 编辑的操作, 修改数据
this.data1.splice((this.currentPage - 1)  10 + this.empInfo.index, 1, this.empInfo)
} else {
// 添加的操作，修改数据
this.data1.push(Object.assign({}, this.empInfo))
}
this.empInfo = {}
},
cancelEditor () {
// 取消编辑的操作
this.$Message.info({
content: '操作取消'
})
}
},
watch: {
showIndex(newVal) {
if (newVal) {
// 为 true 时，在首部增加一个索引列
this.tableColumns1.unshift({
// 分页时，若要出现自动索引，设置 type = "index2"，并使用 render 来返回索引值
                        type: 'index2',
width: 80,
align: 'center',
render: (h, params) => {
return h('span', params.index + (this.currentPage - 1) * this.pageSize + 1);
}
})
} else {
// 为 false 时，若首部存在索引列，则移除该列
this.tableColumns1.forEach((item, index) => {
if (item.type === 'index2') {
this.tableColumns1.splice(index, 1)
}
})
}
},
showCheckbox(newVal) {
if (newVal) {
// 为 true 时，在首部增加一多选框列，
this.tableColumns1.unshift({
type: 'selection',
width: 60,
align: 'center'
})
} else {
// 为 false 时，若存在多选框列，则移除该列
this.tableColumns1.forEach((item, index) => {
if (item.type === 'selection') {
this.tableColumns1.splice(index, 1)
}
})
}
},
data1() {
// 当列表数据改变时（比如删除某数据），触发一次刷新列表的操作
if (!this.createOrEditor) {
// 若为添加数据，则跳转到最后一个页面
this.changePage(Math.ceil(this.data1.length / this.pageSize))
} else {
this.changePage(this.currentPage)
}
}
},
mounted() {
// 页面加载时，触发第一次刷新列表的操作
this.changePage(this.currentPage)
}
})
</script>
</body>
</html>

2、template/render 模式下

（1）使用 vue-cli3.0 创建项目。

　　参考地址：https://www.cnblogs.com/l-y-h/p/11241503.html

（2）使用 npm 安装使用。

　　参考地址：https://www.cnblogs.com/l-y-h/p/12001549.html#_label0_1

【main.js】
import Vue from 'vue'
import App from './App.vue'
// step1: 引入 ViewUI
import ViewUI from 'view-design'
// step2: 引入 css
import 'view-design/dist/styles/iview.css'
Vue.config.productionTip = false
// step3: 声明使用 ViewUI
Vue.use(ViewUI)
new Vue({
render: h => h(App),
}).$mount('#app')
【App.vue】
<template>
<div style="width: 1200px; margin: 0 auto;" class="layout">
<Layout>
<header>
<row>
<Divider orientation="left">
<h1>员工列表</h1>
</Divider>
</row>
<row justify="end" type="flex">
<i-col style="margin-right: 5px"><Button type="primary" icon="md-add" @click="create">添加</Button></i-col>
<i-col style="margin-right: 5px"><Button type="success" icon="md-settings" @click="setUp = true">设置</Button></i-col>
</row>
</header>
<Content>
<Table :data="data2" :columns="tableColumns1" :stripe="showStripe" :border="showBorder" :showHeader="showHeader" :size="tableSize" :height="fixedHeader ? 250 :''">
<template slot-scope="{row}" slot="name">
<strong>{{row.name}}</strong>
</template>
<template slot-scope="{row, index}" slot="action">
<Button type="primary" size="small" style="margin-right: 5px" @click="show(index)" icon="ios-create-outline">编辑</Button>
<Button type="error" size="small" @click="remove(index)" icon="ios-trash">删除</Button>
</template>
</Table>
<div style="margin: 10px;overflow: hidden">
<div style="float: right;">
<!-- current 设置当前选中页,pageSize 设置每页显示数据的条数-->
<Page :total="data1.length" :pageSize="pageSize" :current="currentPage" @on-change="changePage" show-sizer show-elevator show-total @on-page-size-change="changePageSize"></Page>
</div>
</div>
</Content>
</Layout>
    <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">Drawer </span><span style="color: rgba(255, 0, 0, 1)">title</span><span style="color: rgba(0, 0, 255, 1)">="Set up"</span><span style="color: rgba(255, 0, 0, 1)"> :closable</span><span style="color: rgba(0, 0, 255, 1)">="true"</span><span style="color: rgba(255, 0, 0, 1)"> :mask</span><span style="color: rgba(0, 0, 255, 1)">="false"</span><span style="color: rgba(255, 0, 0, 1)"> v-model</span><span style="color: rgba(0, 0, 255, 1)">="setUp"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
        <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">div </span><span style="color: rgba(255, 0, 0, 1)">style</span><span style="color: rgba(0, 0, 255, 1)">="margin: 10px"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span><span style="color: rgba(0, 0, 0, 1)">
            Table Setting</span><span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">br</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
            <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">i-switch </span><span style="color: rgba(255, 0, 0, 1)">v-model</span><span style="color: rgba(0, 0, 255, 1)">="showBorder"</span><span style="color: rgba(255, 0, 0, 1)"> style</span><span style="color: rgba(0, 0, 255, 1)">="margin-right: 5px"</span><span style="color: rgba(0, 0, 255, 1)">&gt;&lt;/</span><span style="color: rgba(128, 0, 0, 1)">i-switch</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>Display border<span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">br</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
            <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">i-switch </span><span style="color: rgba(255, 0, 0, 1)">v-model</span><span style="color: rgba(0, 0, 255, 1)">="showStripe"</span><span style="color: rgba(255, 0, 0, 1)"> style</span><span style="color: rgba(0, 0, 255, 1)">="margin-right: 5px"</span><span style="color: rgba(0, 0, 255, 1)">&gt;&lt;/</span><span style="color: rgba(128, 0, 0, 1)">i-switch</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>Display stripe<span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">br</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
            <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">i-switch </span><span style="color: rgba(255, 0, 0, 1)">v-model</span><span style="color: rgba(0, 0, 255, 1)">="showIndex"</span><span style="color: rgba(255, 0, 0, 1)"> style</span><span style="color: rgba(0, 0, 255, 1)">="margin-right: 5px"</span><span style="color: rgba(0, 0, 255, 1)">&gt;&lt;/</span><span style="color: rgba(128, 0, 0, 1)">i-switch</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>Display index<span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">br</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
            <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">i-switch </span><span style="color: rgba(255, 0, 0, 1)">v-model</span><span style="color: rgba(0, 0, 255, 1)">="showCheckbox"</span><span style="color: rgba(255, 0, 0, 1)"> style</span><span style="color: rgba(0, 0, 255, 1)">="margin-right: 5px"</span><span style="color: rgba(0, 0, 255, 1)">&gt;&lt;/</span><span style="color: rgba(128, 0, 0, 1)">i-switch</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>Display multi choice<span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">br</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
            <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">i-switch </span><span style="color: rgba(255, 0, 0, 1)">v-model</span><span style="color: rgba(0, 0, 255, 1)">="showHeader"</span><span style="color: rgba(255, 0, 0, 1)"> style</span><span style="color: rgba(0, 0, 255, 1)">="margin-right: 5px"</span><span style="color: rgba(0, 0, 255, 1)">&gt;&lt;/</span><span style="color: rgba(128, 0, 0, 1)">i-switch</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>Display header<span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">br</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
            <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">i-switch </span><span style="color: rgba(255, 0, 0, 1)">v-model</span><span style="color: rgba(0, 0, 255, 1)">="fixedHeader"</span><span style="color: rgba(255, 0, 0, 1)"> style</span><span style="color: rgba(0, 0, 255, 1)">="margin-right: 5px"</span><span style="color: rgba(0, 0, 255, 1)">&gt;&lt;/</span><span style="color: rgba(128, 0, 0, 1)">i-switch</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>Table scrolling<span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">br</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
            <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">br</span><span style="color: rgba(0, 0, 255, 1)">&gt;&lt;</span><span style="color: rgba(128, 0, 0, 1)">br</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span><span style="color: rgba(0, 0, 0, 1)">
    
            Table size
            </span><span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">Select </span><span style="color: rgba(255, 0, 0, 1)">v-model</span><span style="color: rgba(0, 0, 255, 1)">="tableSize"</span><span style="color: rgba(255, 0, 0, 1)"> style</span><span style="color: rgba(0, 0, 255, 1)">="width:200px"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
                <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">Option </span><span style="color: rgba(255, 0, 0, 1)">value</span><span style="color: rgba(0, 0, 255, 1)">="large"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>large<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">Option</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
                <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">Option </span><span style="color: rgba(255, 0, 0, 1)">value</span><span style="color: rgba(0, 0, 255, 1)">="default"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>medium(default)<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">Option</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
                <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">Option </span><span style="color: rgba(255, 0, 0, 1)">value</span><span style="color: rgba(0, 0, 255, 1)">="small"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>small<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">Option</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
            <span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">Select</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
        <span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">div</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
    <span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">Drawer</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>

    <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">Modal </span><span style="color: rgba(255, 0, 0, 1)">v-model</span><span style="color: rgba(0, 0, 255, 1)">="empModal"</span><span style="color: rgba(255, 0, 0, 1)"> title</span><span style="color: rgba(0, 0, 255, 1)">="Emp Info"</span><span style="color: rgba(255, 0, 0, 1)"> @on-ok</span><span style="color: rgba(0, 0, 255, 1)">="okEditor"</span><span style="color: rgba(255, 0, 0, 1)"> @on-cancel</span><span style="color: rgba(0, 0, 255, 1)">="cancelEditor"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
        <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">Form </span><span style="color: rgba(255, 0, 0, 1)">:label-width</span><span style="color: rgba(0, 0, 255, 1)">="80"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
            <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">FormItem </span><span style="color: rgba(255, 0, 0, 1)">label</span><span style="color: rgba(0, 0, 255, 1)">="Name:"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
                <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">Input </span><span style="color: rgba(255, 0, 0, 1)">v-model</span><span style="color: rgba(0, 0, 255, 1)">="empInfo.name"</span><span style="color: rgba(255, 0, 0, 1)"> placeholder</span><span style="color: rgba(0, 0, 255, 1)">="Name..."</span><span style="color: rgba(255, 0, 0, 1)"> style</span><span style="color: rgba(0, 0, 255, 1)">="width: 300px;"</span> <span style="color: rgba(0, 0, 255, 1)">/&gt;</span>
            <span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">FormItem</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
            <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">FormItem </span><span style="color: rgba(255, 0, 0, 1)">label</span><span style="color: rgba(0, 0, 255, 1)">="Salary:"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
                <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">Input </span><span style="color: rgba(255, 0, 0, 1)">v-model</span><span style="color: rgba(0, 0, 255, 1)">="empInfo.salary"</span><span style="color: rgba(255, 0, 0, 1)"> placeholder</span><span style="color: rgba(0, 0, 255, 1)">="Salary..."</span><span style="color: rgba(255, 0, 0, 1)"> style</span><span style="color: rgba(0, 0, 255, 1)">="width: 300px;"</span> <span style="color: rgba(0, 0, 255, 1)">/&gt;</span>
            <span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">FormItem</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
            <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">FormItem </span><span style="color: rgba(255, 0, 0, 1)">label</span><span style="color: rgba(0, 0, 255, 1)">="Age:"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
                <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">Input </span><span style="color: rgba(255, 0, 0, 1)">v-model</span><span style="color: rgba(0, 0, 255, 1)">="empInfo.age"</span><span style="color: rgba(255, 0, 0, 1)"> placeholder</span><span style="color: rgba(0, 0, 255, 1)">="Age..."</span><span style="color: rgba(255, 0, 0, 1)"> style</span><span style="color: rgba(0, 0, 255, 1)">="width: 300px;"</span> <span style="color: rgba(0, 0, 255, 1)">/&gt;</span>
            <span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">FormItem</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
            <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">FormItem </span><span style="color: rgba(255, 0, 0, 1)">label</span><span style="color: rgba(0, 0, 255, 1)">="Email:"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
                <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">Input </span><span style="color: rgba(255, 0, 0, 1)">v-model</span><span style="color: rgba(0, 0, 255, 1)">="empInfo.email"</span><span style="color: rgba(255, 0, 0, 1)"> placeholder</span><span style="color: rgba(0, 0, 255, 1)">="Email..."</span><span style="color: rgba(255, 0, 0, 1)"> style</span><span style="color: rgba(0, 0, 255, 1)">="width: 300px;"</span> <span style="color: rgba(0, 0, 255, 1)">/&gt;</span>
            <span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">FormItem</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
            <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">FormItem </span><span style="color: rgba(255, 0, 0, 1)">label</span><span style="color: rgba(0, 0, 255, 1)">="DeptName:"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
                <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">Select </span><span style="color: rgba(255, 0, 0, 1)">v-model</span><span style="color: rgba(0, 0, 255, 1)">="empInfo.deptName"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
                    <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">Option </span><span style="color: rgba(255, 0, 0, 1)">v-for</span><span style="color: rgba(0, 0, 255, 1)">="(item, index) in dept"</span><span style="color: rgba(255, 0, 0, 1)"> :key</span><span style="color: rgba(0, 0, 255, 1)">="index"</span><span style="color: rgba(255, 0, 0, 1)"> :value</span><span style="color: rgba(0, 0, 255, 1)">="item.deptName"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span> {{item.deptName}} <span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">Option</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
                <span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">Select</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
            <span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">FormItem</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
        <span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">Form</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
    <span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">Modal</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">div</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>

</template>
<script>
export default {
data() {
return {
// 添加与编辑复用 modal 框，false 为添加，true 为编辑
                createOrEditor: false,
// 是否打开员工信息框
                empModal: false,
// 用于保存一个员工的信息
                empInfo: {},
// 是否打开设置
                setUp: false,
// 当前页码
                currentPage: 1,
// 每页数据的条数
                pageSize: 10,
// 表格的列
                tableColumns1: [{
// 分页时，若要出现自动索引，设置 type = "index2"，并使用 render 来返回索引值
                        type: 'index2',
width: 80,
align: 'center',
render: (h, params) => {
return h('span', params.index + (this.currentPage - 1) * this.pageSize + 1);
}
}, {
title: 'Name',
slot: 'name'
}, {
title: 'Salary',
key: 'salary',
sortable: true
},
{
title: 'Age',
key: 'age',
sortable: true
},
{
title: 'Email',
key: 'email'
}, {
title: 'DeptName',
key: 'deptName'
},
{
title: 'Action',
slot: 'action',
width: 200,
align: 'center'
}
],
dept: [{
deptId: '1',
deptName: '开发部'
},{
deptId: '2',
deptName: '测试部'
},{
deptId: '3',
deptName: '产品部'
}],
// 表格的源数据
                data1: [{
name: 'John Brown',
salary: 6000,
age: 18,
email: '323@163.com',
deptId: '1',
deptName: '开发部'
},
{
name: 'Jim Green',
salary: 6000,
age: 24,
email: '323@163.com',
deptId: '2',
deptName: '测试部'
},
{
name: 'Joe Black',
salary: 6000,
age: 30,
email: '323@163.com',
deptId: '3',
deptName: '产品部'
},
{
name: 'Jon Snow',
salary: 6000,
age: 26,
email: '323@163.com',
deptId: '1',
deptName: '开发部'
}, {
name: 'John Brown',
salary: 6000,
age: 18,
email: '323@163.com',
deptId: '2',
deptName: '测试部'
},
{
name: 'Jim Green',
salary: 6000,
age: 24,
email: '323@163.com',
deptId: '1',
deptName: '开发部'
},
{
name: 'Joe Black',
salary: 6000,
age: 30,
email: '323@163.com',
deptId: '1',
deptName: '开发部'
},
{
name: 'Jon Snow',
salary: 6000,
age: 26,
email: '323@163.com',
deptId: '2',
deptName: '测试部'
},
{
name: 'Jim Green',
salary: 6000,
age: 24,
email: '323@163.com',
deptId: '1',
deptName: '开发部'
},
{
name: 'Joe Black',
salary: 6000,
age: 30,
email: '323@163.com',
deptId: '2',
deptName: '测试部'
},
{
name: 'Jon Snow',
salary: 6000,
age: 26,
email: '323@163.com',
deptId: '3',
deptName: '产品部'
}
],
// 表格每页的数据
                data2: [],
// 表格边框是否显示
                showBorder: false,
// 表格斑马纹是否显示
                showStripe: false,
// 表格头是否显示
                showHeader: true,
// 表格索引是否显示
                showIndex: true,
// 表格多选框是否显示
                showCheckbox: false,
// 表格滚动条是否开启
                fixedHeader: false,
// 改变表格大小
                tableSize: 'default'
}
},
methods: {
changePage(index) {
// 改变当前的页码，并获取当前页码所拥有的数据
this.currentPage = index
// 注意，此处不能直接用 = 赋值。使用 = 后（指向的地址相同），修改 data2 的同时会修改 data1
this.data2 = [].concat(this.data1.slice((index - 1)  this.pageSize, index  this.pageSize))
},
show(index) {
// 弹出一个模态框，用于展示某条数据的信息
this.empInfo = Object.assign(this.empInfo, this.data2[index])
this.empModal = true
this.createOrEditor = true
this.empInfo = Object.assign(this.empInfo, {index: index})
},
create() {
// 用于添加一条信息
this.empInfo = []
this.empModal = true
this.createOrEditor = false
},
remove(index) {
// 删除某条数据（删除源数据）
this.data1.splice((this.currentPage - 1)  10 + index, 1)
},
changePageSize(index) {
// 改变每页显示的条数
this.$Message.info({
content: '当前页面显示条数修改为： ' + index + '条 / 页'
})
// 改变后，跳转到首页，并刷新列表
this.currentPage = 1
this.pageSize = index
this.changePage(this.currentPage)
},
okEditor () {
if (this.createOrEditor) {
// 编辑的操作, 修改数据
this.data1.splice((this.currentPage - 1)  10 + this.empInfo.index, 1, this.empInfo)
} else {
// 添加的操作，修改数据
this.data1.push(Object.assign({}, this.empInfo))
}
this.empInfo = {}
},
cancelEditor () {
// 取消编辑的操作
this.$Message.info({
content: '操作取消'
})
}
},
watch: {
showIndex(newVal) {
if (newVal) {
// 为 true 时，在首部增加一个索引列
this.tableColumns1.unshift({
// 分页时，若要出现自动索引，设置 type = "index2"，并使用 render 来返回索引值
                        type: 'index2',
width: 80,
align: 'center',
render: (h, params) => {
return h('span', params.index + (this.currentPage - 1) * this.pageSize + 1);
}
})
} else {
// 为 false 时，若首部存在索引列，则移除该列
this.tableColumns1.forEach((item, index) => {
if (item.type === 'index2') {
this.tableColumns1.splice(index, 1)
}
})
}
},
showCheckbox(newVal) {
if (newVal) {
// 为 true 时，在首部增加一多选框列，
this.tableColumns1.unshift({
type: 'selection',
width: 60,
align: 'center'
})
} else {
// 为 false 时，若存在多选框列，则移除该列
this.tableColumns1.forEach((item, index) => {
if (item.type === 'selection') {
this.tableColumns1.splice(index, 1)
}
})
}
},
data1() {
// 当列表数据改变时（比如删除某数据），触发一次刷新列表的操作
if (!this.createOrEditor) {
// 若为添加数据，则跳转到最后一个页面
this.changePage(Math.ceil(this.data1.length / this.pageSize))
} else {
this.changePage(this.currentPage)
}
}
},
mounted() {
// 页面加载时，触发第一次刷新列表的操作
this.changePage(this.currentPage)
}
}
</script>

文件目录结构：

回到顶部

八、前端代码

1、解决跨域问题

　　可以参考：https://www.cnblogs.com/l-y-h/p/11815452.html

（1）在 main.js 中配置 baseURL

【main.js】
import Vue from 'vue'
import App from './App.vue'
import ViewUI from 'view-design'
import 'view-design/dist/styles/iview.css'
import Axios from 'axios'
Vue.config.productionTip = false
Vue.use(ViewUI)
Vue.prototype.$axios = Axios
Axios.defaults.baseURL = '/api'
new Vue({
render: h => h(App),
}).$mount('#app')

（2）在 vue.config.js 中配置跨域代理

【vue.config.js】
module.exports = {
devServer: {
proxy: {
'/api': {
// 此处的写法，目的是为了 将 /api 替换成 http://localhost:9000/crud
target: 'http://localhost:9000/crud/',
// 允许跨域
changeOrigin: true,
ws: true,
pathRewrite: {
'^/api': ''
}
}
}
}
}

（3）使用 axios

【自定义一个 api.js 文件】
import Axios from 'axios'
export function getAllEmps(params) {
return new Promise((resolve, reject) => {
Axios.get('/emps/' + params.pageNum, {
params
}).then(res => {
resolve(res);
}).catch(res => {
reject(res)
})
})
}
【使用时，在需要使用的地方引入这个 js 文件即可】
<template>
</template>
<script>
import {getAllEmps} from './api/api.js'
export default {
data() {
return {
currentPage: 1,
pageSize: 2
}
},
mounted() {
// 不需要使用 this.getAllEmps()，直接使用 getAllEmps() 即可
            getAllEmps({
pageNum: this.currentPage,
pageSize: this.pageSize
})
}
}
</script>
【App.vue】
<template>
<div style="width: 1200px; margin: 0 auto;" class="layout">
<Layout>
<header>
<row>
<Divider orientation="left">
<h1>员工列表</h1>
</Divider>
</row>
<row justify="end" type="flex">
<i-col style="margin-right: 5px"><Button type="primary" icon="md-add" @click="create">添加</Button></i-col>
<i-col style="margin-right: 5px"><Button type="success" icon="md-settings" @click="setUp = true">设置</Button></i-col>
</row>
</header>
<Content>
<Table :data="data2" :columns="tableColumns1" :stripe="showStripe" :border="showBorder" :showHeader="showHeader" :size="tableSize" :height="fixedHeader ? 250 :''">
<template slot-scope="{row}" slot="name">
<strong>{{row.name}}</strong>
</template>
<template slot-scope="{row, index}" slot="action">
<Button type="primary" size="small" style="margin-right: 5px" @click="show(index)" icon="ios-create-outline">编辑</Button>
<Button type="error" size="small" @click="remove(index)" icon="ios-trash">删除</Button>
</template>
</Table>
<div style="margin: 10px;overflow: hidden">
<div style="float: right;">
<!-- current 设置当前选中页,pageSize 设置每页显示数据的条数-->
<Page :total="data1.length" :pageSize="pageSize" :current="currentPage" @on-change="changePage" show-sizer show-elevator show-total @on-page-size-change="changePageSize"></Page>
</div>
</div>
</Content>
</Layout>
    <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">Drawer </span><span style="color: rgba(255, 0, 0, 1)">title</span><span style="color: rgba(0, 0, 255, 1)">="Set up"</span><span style="color: rgba(255, 0, 0, 1)"> :closable</span><span style="color: rgba(0, 0, 255, 1)">="true"</span><span style="color: rgba(255, 0, 0, 1)"> :mask</span><span style="color: rgba(0, 0, 255, 1)">="false"</span><span style="color: rgba(255, 0, 0, 1)"> v-model</span><span style="color: rgba(0, 0, 255, 1)">="setUp"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
        <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">div </span><span style="color: rgba(255, 0, 0, 1)">style</span><span style="color: rgba(0, 0, 255, 1)">="margin: 10px"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span><span style="color: rgba(0, 0, 0, 1)">
            Table Setting</span><span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">br</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
            <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">i-switch </span><span style="color: rgba(255, 0, 0, 1)">v-model</span><span style="color: rgba(0, 0, 255, 1)">="showBorder"</span><span style="color: rgba(255, 0, 0, 1)"> style</span><span style="color: rgba(0, 0, 255, 1)">="margin-right: 5px"</span><span style="color: rgba(0, 0, 255, 1)">&gt;&lt;/</span><span style="color: rgba(128, 0, 0, 1)">i-switch</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>Display border<span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">br</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
            <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">i-switch </span><span style="color: rgba(255, 0, 0, 1)">v-model</span><span style="color: rgba(0, 0, 255, 1)">="showStripe"</span><span style="color: rgba(255, 0, 0, 1)"> style</span><span style="color: rgba(0, 0, 255, 1)">="margin-right: 5px"</span><span style="color: rgba(0, 0, 255, 1)">&gt;&lt;/</span><span style="color: rgba(128, 0, 0, 1)">i-switch</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>Display stripe<span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">br</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
            <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">i-switch </span><span style="color: rgba(255, 0, 0, 1)">v-model</span><span style="color: rgba(0, 0, 255, 1)">="showIndex"</span><span style="color: rgba(255, 0, 0, 1)"> style</span><span style="color: rgba(0, 0, 255, 1)">="margin-right: 5px"</span><span style="color: rgba(0, 0, 255, 1)">&gt;&lt;/</span><span style="color: rgba(128, 0, 0, 1)">i-switch</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>Display index<span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">br</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
            <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">i-switch </span><span style="color: rgba(255, 0, 0, 1)">v-model</span><span style="color: rgba(0, 0, 255, 1)">="showCheckbox"</span><span style="color: rgba(255, 0, 0, 1)"> style</span><span style="color: rgba(0, 0, 255, 1)">="margin-right: 5px"</span><span style="color: rgba(0, 0, 255, 1)">&gt;&lt;/</span><span style="color: rgba(128, 0, 0, 1)">i-switch</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>Display multi choice<span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">br</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
            <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">i-switch </span><span style="color: rgba(255, 0, 0, 1)">v-model</span><span style="color: rgba(0, 0, 255, 1)">="showHeader"</span><span style="color: rgba(255, 0, 0, 1)"> style</span><span style="color: rgba(0, 0, 255, 1)">="margin-right: 5px"</span><span style="color: rgba(0, 0, 255, 1)">&gt;&lt;/</span><span style="color: rgba(128, 0, 0, 1)">i-switch</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>Display header<span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">br</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
            <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">i-switch </span><span style="color: rgba(255, 0, 0, 1)">v-model</span><span style="color: rgba(0, 0, 255, 1)">="fixedHeader"</span><span style="color: rgba(255, 0, 0, 1)"> style</span><span style="color: rgba(0, 0, 255, 1)">="margin-right: 5px"</span><span style="color: rgba(0, 0, 255, 1)">&gt;&lt;/</span><span style="color: rgba(128, 0, 0, 1)">i-switch</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>Table scrolling<span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">br</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
            <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">br</span><span style="color: rgba(0, 0, 255, 1)">&gt;&lt;</span><span style="color: rgba(128, 0, 0, 1)">br</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span><span style="color: rgba(0, 0, 0, 1)">
    
            Table size
            </span><span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">Select </span><span style="color: rgba(255, 0, 0, 1)">v-model</span><span style="color: rgba(0, 0, 255, 1)">="tableSize"</span><span style="color: rgba(255, 0, 0, 1)"> style</span><span style="color: rgba(0, 0, 255, 1)">="width:200px"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
                <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">Option </span><span style="color: rgba(255, 0, 0, 1)">value</span><span style="color: rgba(0, 0, 255, 1)">="large"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>large<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">Option</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
                <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">Option </span><span style="color: rgba(255, 0, 0, 1)">value</span><span style="color: rgba(0, 0, 255, 1)">="default"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>medium(default)<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">Option</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
                <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">Option </span><span style="color: rgba(255, 0, 0, 1)">value</span><span style="color: rgba(0, 0, 255, 1)">="small"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>small<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">Option</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
            <span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">Select</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
        <span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">div</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
    <span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">Drawer</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>

    <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">Modal </span><span style="color: rgba(255, 0, 0, 1)">v-model</span><span style="color: rgba(0, 0, 255, 1)">="empModal"</span><span style="color: rgba(255, 0, 0, 1)"> title</span><span style="color: rgba(0, 0, 255, 1)">="Emp Info"</span><span style="color: rgba(255, 0, 0, 1)"> @on-ok</span><span style="color: rgba(0, 0, 255, 1)">="okEditor"</span><span style="color: rgba(255, 0, 0, 1)"> @on-cancel</span><span style="color: rgba(0, 0, 255, 1)">="cancelEditor"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
        <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">Form </span><span style="color: rgba(255, 0, 0, 1)">:label-width</span><span style="color: rgba(0, 0, 255, 1)">="80"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
            <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">FormItem </span><span style="color: rgba(255, 0, 0, 1)">label</span><span style="color: rgba(0, 0, 255, 1)">="Name:"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
                <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">Input </span><span style="color: rgba(255, 0, 0, 1)">v-model</span><span style="color: rgba(0, 0, 255, 1)">="empInfo.name"</span><span style="color: rgba(255, 0, 0, 1)"> placeholder</span><span style="color: rgba(0, 0, 255, 1)">="Name..."</span><span style="color: rgba(255, 0, 0, 1)"> style</span><span style="color: rgba(0, 0, 255, 1)">="width: 300px;"</span> <span style="color: rgba(0, 0, 255, 1)">/&gt;</span>
            <span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">FormItem</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
            <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">FormItem </span><span style="color: rgba(255, 0, 0, 1)">label</span><span style="color: rgba(0, 0, 255, 1)">="Salary:"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
                <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">Input </span><span style="color: rgba(255, 0, 0, 1)">v-model</span><span style="color: rgba(0, 0, 255, 1)">="empInfo.salary"</span><span style="color: rgba(255, 0, 0, 1)"> placeholder</span><span style="color: rgba(0, 0, 255, 1)">="Salary..."</span><span style="color: rgba(255, 0, 0, 1)"> style</span><span style="color: rgba(0, 0, 255, 1)">="width: 300px;"</span> <span style="color: rgba(0, 0, 255, 1)">/&gt;</span>
            <span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">FormItem</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
            <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">FormItem </span><span style="color: rgba(255, 0, 0, 1)">label</span><span style="color: rgba(0, 0, 255, 1)">="Age:"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
                <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">Input </span><span style="color: rgba(255, 0, 0, 1)">v-model</span><span style="color: rgba(0, 0, 255, 1)">="empInfo.age"</span><span style="color: rgba(255, 0, 0, 1)"> placeholder</span><span style="color: rgba(0, 0, 255, 1)">="Age..."</span><span style="color: rgba(255, 0, 0, 1)"> style</span><span style="color: rgba(0, 0, 255, 1)">="width: 300px;"</span> <span style="color: rgba(0, 0, 255, 1)">/&gt;</span>
            <span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">FormItem</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
            <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">FormItem </span><span style="color: rgba(255, 0, 0, 1)">label</span><span style="color: rgba(0, 0, 255, 1)">="Email:"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
                <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">Input </span><span style="color: rgba(255, 0, 0, 1)">v-model</span><span style="color: rgba(0, 0, 255, 1)">="empInfo.email"</span><span style="color: rgba(255, 0, 0, 1)"> placeholder</span><span style="color: rgba(0, 0, 255, 1)">="Email..."</span><span style="color: rgba(255, 0, 0, 1)"> style</span><span style="color: rgba(0, 0, 255, 1)">="width: 300px;"</span> <span style="color: rgba(0, 0, 255, 1)">/&gt;</span>
            <span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">FormItem</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
            <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">FormItem </span><span style="color: rgba(255, 0, 0, 1)">label</span><span style="color: rgba(0, 0, 255, 1)">="DeptName:"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
                <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">Select </span><span style="color: rgba(255, 0, 0, 1)">v-model</span><span style="color: rgba(0, 0, 255, 1)">="empInfo.deptName"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
                    <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">Option </span><span style="color: rgba(255, 0, 0, 1)">v-for</span><span style="color: rgba(0, 0, 255, 1)">="(item, index) in dept"</span><span style="color: rgba(255, 0, 0, 1)"> :key</span><span style="color: rgba(0, 0, 255, 1)">="index"</span><span style="color: rgba(255, 0, 0, 1)"> :value</span><span style="color: rgba(0, 0, 255, 1)">="item.deptName"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span> {{item.deptName}} <span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">Option</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
                <span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">Select</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
            <span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">FormItem</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
        <span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">Form</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
    <span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">Modal</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">div</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>

</template>
<script>
import {getAllEmps} from './api/api.js'
export default {
data() {
return {
// 添加与编辑复用 modal 框，false 为添加，true 为编辑
                createOrEditor: false,
// 是否打开员工信息框
                empModal: false,
// 用于保存一个员工的信息
                empInfo: {},
// 是否打开设置
                setUp: false,
// 当前页码
                currentPage: 1,
// 每页数据的条数
                pageSize: 10,
// 表格的列
                tableColumns1: [{
// 分页时，若要出现自动索引，设置 type = "index2"，并使用 render 来返回索引值
                        type: 'index2',
width: 80,
align: 'center',
render: (h, params) => {
return h('span', params.index + (this.currentPage - 1) * this.pageSize + 1);
}
}, {
title: 'Name',
slot: 'name'
}, {
title: 'Salary',
key: 'salary',
sortable: true
},
{
title: 'Age',
key: 'age',
sortable: true
},
{
title: 'Email',
key: 'email'
}, {
title: 'DeptName',
key: 'deptName'
},
{
title: 'Action',
slot: 'action',
width: 200,
align: 'center'
}
],
dept: [{
deptId: '1',
deptName: '开发部'
},{
deptId: '2',
deptName: '测试部'
},{
deptId: '3',
deptName: '产品部'
}],
// 表格的源数据
                data1: [{
name: 'John Brown',
salary: 6000,
age: 18,
email: '323@163.com',
deptId: '1',
deptName: '开发部'
},
{
name: 'Jim Green',
salary: 6000,
age: 24,
email: '323@163.com',
deptId: '2',
deptName: '测试部'
},
{
name: 'Joe Black',
salary: 6000,
age: 30,
email: '323@163.com',
deptId: '3',
deptName: '产品部'
},
{
name: 'Jon Snow',
salary: 6000,
age: 26,
email: '323@163.com',
deptId: '1',
deptName: '开发部'
}, {
name: 'John Brown',
salary: 6000,
age: 18,
email: '323@163.com',
deptId: '2',
deptName: '测试部'
},
{
name: 'Jim Green',
salary: 6000,
age: 24,
email: '323@163.com',
deptId: '1',
deptName: '开发部'
},
{
name: 'Joe Black',
salary: 6000,
age: 30,
email: '323@163.com',
deptId: '1',
deptName: '开发部'
},
{
name: 'Jon Snow',
salary: 6000,
age: 26,
email: '323@163.com',
deptId: '2',
deptName: '测试部'
},
{
name: 'Jim Green',
salary: 6000,
age: 24,
email: '323@163.com',
deptId: '1',
deptName: '开发部'
},
{
name: 'Joe Black',
salary: 6000,
age: 30,
email: '323@163.com',
deptId: '2',
deptName: '测试部'
},
{
name: 'Jon Snow',
salary: 6000,
age: 26,
email: '323@163.com',
deptId: '3',
deptName: '产品部'
}
],
// 表格每页的数据
                data2: [],
// 表格边框是否显示
                showBorder: false,
// 表格斑马纹是否显示
                showStripe: false,
// 表格头是否显示
                showHeader: true,
// 表格索引是否显示
                showIndex: true,
// 表格多选框是否显示
                showCheckbox: false,
// 表格滚动条是否开启
                fixedHeader: false,
// 改变表格大小
                tableSize: 'default'
}
},
methods: {
changePage(index) {
// 改变当前的页码，并获取当前页码所拥有的数据
this.currentPage = index
// 注意，此处不能直接用 = 赋值。使用 = 后（指向的地址相同），修改 data2 的同时会修改 data1
this.data2 = [].concat(this.data1.slice((index - 1)  this.pageSize, index  this.pageSize))
},
show(index) {
// 弹出一个模态框，用于展示某条数据的信息
this.empInfo = Object.assign(this.empInfo, this.data2[index])
this.empModal = true
this.createOrEditor = true
this.empInfo = Object.assign(this.empInfo, {index: index})
},
create() {
// 用于添加一条信息
this.empInfo = []
this.empModal = true
this.createOrEditor = false
},
remove(index) {
// 删除某条数据（删除源数据）
this.data1.splice((this.currentPage - 1)  10 + index, 1)
},
changePageSize(index) {
// 改变每页显示的条数
this.$Message.info({
content: '当前页面显示条数修改为： ' + index + '条 / 页'
})
// 改变后，跳转到首页，并刷新列表
this.currentPage = 1
this.pageSize = index
this.changePage(this.currentPage)
},
okEditor () {
if (this.createOrEditor) {
// 编辑的操作, 修改数据
this.data1.splice((this.currentPage - 1)  10 + this.empInfo.index, 1, this.empInfo)
} else {
// 添加的操作，修改数据
this.data1.push(Object.assign({}, this.empInfo))
}
this.empInfo = {}
},
cancelEditor () {
// 取消编辑的操作
this.$Message.info({
content: '操作取消'
})
}
},
watch: {
showIndex(newVal) {
if (newVal) {
// 为 true 时，在首部增加一个索引列
this.tableColumns1.unshift({
// 分页时，若要出现自动索引，设置 type = "index2"，并使用 render 来返回索引值
                        type: 'index2',
width: 80,
align: 'center',
render: (h, params) => {
return h('span', params.index + (this.currentPage - 1) * this.pageSize + 1);
}
})
} else {
// 为 false 时，若首部存在索引列，则移除该列
this.tableColumns1.forEach((item, index) => {
if (item.type === 'index2') {
this.tableColumns1.splice(index, 1)
}
})
}
},
showCheckbox(newVal) {
if (newVal) {
// 为 true 时，在首部增加一多选框列，
this.tableColumns1.unshift({
type: 'selection',
width: 60,
align: 'center'
})
} else {
// 为 false 时，若存在多选框列，则移除该列
this.tableColumns1.forEach((item, index) => {
if (item.type === 'selection') {
this.tableColumns1.splice(index, 1)
}
})
}
},
data1() {
// 当列表数据改变时（比如删除某数据），触发一次刷新列表的操作
if (!this.createOrEditor) {
// 若为添加数据，则跳转到最后一个页面
this.changePage(Math.ceil(this.data1.length / this.pageSize))
} else {
this.changePage(this.currentPage)
}
}
},
mounted() {
// 页面加载时，触发第一次刷新列表的操作
this.changePage(this.currentPage)
// 不需要使用 this.getAllEmps()，直接使用 getAllEmps() 即可
            getAllEmps({
pageNum: this.currentPage,
pageSize: this.pageSize
}).then((res) => {
　　　　　　　　　　console.log(res)
　　　　　　　　})
}
}
</script>

2、调用接口、与后台进行交互

（1）接口详情

【获取所有 emp 信息（分页查询）】
GET                                            param
http://localhost:9000/crud/emps/{pageNum}      pageSize
【获取某个员工的信息（没用上）】
GET
http://localhost:9000/crud/emp/{id}
【删除某个员工的信息】
DELETE
http://localhost:9000/crud/emp/{id}
【插入某条数据】
POST
http://localhost:9000/crud/emp                Employee
【更新某条数据】
PUT
http://localhost:9000/crud/emp/{id}           Employee
【获取部门信息】
GET
http://localhost:9000/crud/depts

（2）完整代码

　　代码结构截图：

【main.js】
import Vue from 'vue'
import App from './App.vue'
import ViewUI from 'view-design'
import 'view-design/dist/styles/iview.css'
import Axios from 'axios'
Vue.config.productionTip = false
Vue.use(ViewUI)
Vue.prototype.$axios = Axios
Axios.defaults.baseURL = '/api'
new Vue({
render: h => h(App),
}).$mount('#app')
【App.vue】
<template>
<div style="width: 1200px; margin: 0 auto;" class="layout">
<Layout>
<header>
<row>
<Divider orientation="left">
<h1>员工列表</h1>
</Divider>
</row>
<row justify="end" type="flex">
<i-col style="margin-right: 5px"><Button type="primary" icon="md-add" @click="create">添加</Button></i-col>
<i-col style="margin-right: 5px"><Button type="success" icon="md-settings" @click="setUp = true">设置</Button></i-col>
</row>
</header>
<Content>
<Table :data="data2" :columns="tableColumns1" :stripe="showStripe" :border="showBorder" :showHeader="showHeader" :size="tableSize" :height="fixedHeader ? 250 :''">
<template slot-scope="{row}" slot="name">
<strong>{{row.name}}</strong>
</template>
<template slot-scope="{row, index}" slot="action">
<Button type="primary" size="small" style="margin-right: 5px" @click="show(index)" icon="ios-create-outline">编辑</Button>
<Button type="error" size="small" @click="remove(row, index)" icon="ios-trash">删除</Button>
</template>
</Table>
<div style="margin: 10px;overflow: hidden">
<div style="float: right;">
<!-- current 设置当前选中页,pageSize 设置每页显示数据的条数-->
<Page :total="total" :pageSize="pageSize" :current="currentPage" @on-change="changePage" show-sizer show-elevator show-total @on-page-size-change="changePageSize"></Page>
</div>
</div>
</Content>
</Layout>
    <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">Drawer </span><span style="color: rgba(255, 0, 0, 1)">title</span><span style="color: rgba(0, 0, 255, 1)">="Set up"</span><span style="color: rgba(255, 0, 0, 1)"> :closable</span><span style="color: rgba(0, 0, 255, 1)">="true"</span><span style="color: rgba(255, 0, 0, 1)"> :mask</span><span style="color: rgba(0, 0, 255, 1)">="false"</span><span style="color: rgba(255, 0, 0, 1)"> v-model</span><span style="color: rgba(0, 0, 255, 1)">="setUp"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
        <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">div </span><span style="color: rgba(255, 0, 0, 1)">style</span><span style="color: rgba(0, 0, 255, 1)">="margin: 10px"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span><span style="color: rgba(0, 0, 0, 1)">
            Table Setting</span><span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">br</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
            <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">i-switch </span><span style="color: rgba(255, 0, 0, 1)">v-model</span><span style="color: rgba(0, 0, 255, 1)">="showBorder"</span><span style="color: rgba(255, 0, 0, 1)"> style</span><span style="color: rgba(0, 0, 255, 1)">="margin-right: 5px"</span><span style="color: rgba(0, 0, 255, 1)">&gt;&lt;/</span><span style="color: rgba(128, 0, 0, 1)">i-switch</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>Display border<span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">br</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
            <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">i-switch </span><span style="color: rgba(255, 0, 0, 1)">v-model</span><span style="color: rgba(0, 0, 255, 1)">="showStripe"</span><span style="color: rgba(255, 0, 0, 1)"> style</span><span style="color: rgba(0, 0, 255, 1)">="margin-right: 5px"</span><span style="color: rgba(0, 0, 255, 1)">&gt;&lt;/</span><span style="color: rgba(128, 0, 0, 1)">i-switch</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>Display stripe<span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">br</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
            <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">i-switch </span><span style="color: rgba(255, 0, 0, 1)">v-model</span><span style="color: rgba(0, 0, 255, 1)">="showIndex"</span><span style="color: rgba(255, 0, 0, 1)"> style</span><span style="color: rgba(0, 0, 255, 1)">="margin-right: 5px"</span><span style="color: rgba(0, 0, 255, 1)">&gt;&lt;/</span><span style="color: rgba(128, 0, 0, 1)">i-switch</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>Display index<span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">br</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
            <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">i-switch </span><span style="color: rgba(255, 0, 0, 1)">v-model</span><span style="color: rgba(0, 0, 255, 1)">="showCheckbox"</span><span style="color: rgba(255, 0, 0, 1)"> style</span><span style="color: rgba(0, 0, 255, 1)">="margin-right: 5px"</span><span style="color: rgba(0, 0, 255, 1)">&gt;&lt;/</span><span style="color: rgba(128, 0, 0, 1)">i-switch</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>Display multi choice<span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">br</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
            <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">i-switch </span><span style="color: rgba(255, 0, 0, 1)">v-model</span><span style="color: rgba(0, 0, 255, 1)">="showHeader"</span><span style="color: rgba(255, 0, 0, 1)"> style</span><span style="color: rgba(0, 0, 255, 1)">="margin-right: 5px"</span><span style="color: rgba(0, 0, 255, 1)">&gt;&lt;/</span><span style="color: rgba(128, 0, 0, 1)">i-switch</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>Display header<span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">br</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
            <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">i-switch </span><span style="color: rgba(255, 0, 0, 1)">v-model</span><span style="color: rgba(0, 0, 255, 1)">="fixedHeader"</span><span style="color: rgba(255, 0, 0, 1)"> style</span><span style="color: rgba(0, 0, 255, 1)">="margin-right: 5px"</span><span style="color: rgba(0, 0, 255, 1)">&gt;&lt;/</span><span style="color: rgba(128, 0, 0, 1)">i-switch</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>Table scrolling<span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">br</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
            <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">br</span><span style="color: rgba(0, 0, 255, 1)">&gt;&lt;</span><span style="color: rgba(128, 0, 0, 1)">br</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span><span style="color: rgba(0, 0, 0, 1)">

            Table size
            </span><span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">Select </span><span style="color: rgba(255, 0, 0, 1)">v-model</span><span style="color: rgba(0, 0, 255, 1)">="tableSize"</span><span style="color: rgba(255, 0, 0, 1)"> style</span><span style="color: rgba(0, 0, 255, 1)">="width:200px"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
                <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">Option </span><span style="color: rgba(255, 0, 0, 1)">value</span><span style="color: rgba(0, 0, 255, 1)">="large"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>large<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">Option</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
                <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">Option </span><span style="color: rgba(255, 0, 0, 1)">value</span><span style="color: rgba(0, 0, 255, 1)">="default"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>medium(default)<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">Option</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
                <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">Option </span><span style="color: rgba(255, 0, 0, 1)">value</span><span style="color: rgba(0, 0, 255, 1)">="small"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>small<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">Option</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
            <span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">Select</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
        <span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">div</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
    <span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">Drawer</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>

    <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">Modal </span><span style="color: rgba(255, 0, 0, 1)">v-model</span><span style="color: rgba(0, 0, 255, 1)">="empModal"</span><span style="color: rgba(255, 0, 0, 1)"> title</span><span style="color: rgba(0, 0, 255, 1)">="Emp Info"</span><span style="color: rgba(255, 0, 0, 1)"> @on-ok</span><span style="color: rgba(0, 0, 255, 1)">="okEditor"</span><span style="color: rgba(255, 0, 0, 1)"> @on-cancel</span><span style="color: rgba(0, 0, 255, 1)">="cancelEditor"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
        <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">Form </span><span style="color: rgba(255, 0, 0, 1)">:label-width</span><span style="color: rgba(0, 0, 255, 1)">="80"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
            <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">FormItem </span><span style="color: rgba(255, 0, 0, 1)">label</span><span style="color: rgba(0, 0, 255, 1)">="Name:"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
                <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">Input </span><span style="color: rgba(255, 0, 0, 1)">v-model</span><span style="color: rgba(0, 0, 255, 1)">="empInfo.name"</span><span style="color: rgba(255, 0, 0, 1)"> placeholder</span><span style="color: rgba(0, 0, 255, 1)">="Name..."</span><span style="color: rgba(255, 0, 0, 1)"> style</span><span style="color: rgba(0, 0, 255, 1)">="width: 300px;"</span> <span style="color: rgba(0, 0, 255, 1)">/&gt;</span>
            <span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">FormItem</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
            <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">FormItem </span><span style="color: rgba(255, 0, 0, 1)">label</span><span style="color: rgba(0, 0, 255, 1)">="Salary:"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
                <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">Input </span><span style="color: rgba(255, 0, 0, 1)">v-model</span><span style="color: rgba(0, 0, 255, 1)">="empInfo.salary"</span><span style="color: rgba(255, 0, 0, 1)"> placeholder</span><span style="color: rgba(0, 0, 255, 1)">="Salary..."</span><span style="color: rgba(255, 0, 0, 1)"> style</span><span style="color: rgba(0, 0, 255, 1)">="width: 300px;"</span> <span style="color: rgba(0, 0, 255, 1)">/&gt;</span>
            <span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">FormItem</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
            <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">FormItem </span><span style="color: rgba(255, 0, 0, 1)">label</span><span style="color: rgba(0, 0, 255, 1)">="Age:"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
                <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">Input </span><span style="color: rgba(255, 0, 0, 1)">v-model</span><span style="color: rgba(0, 0, 255, 1)">="empInfo.age"</span><span style="color: rgba(255, 0, 0, 1)"> placeholder</span><span style="color: rgba(0, 0, 255, 1)">="Age..."</span><span style="color: rgba(255, 0, 0, 1)"> style</span><span style="color: rgba(0, 0, 255, 1)">="width: 300px;"</span> <span style="color: rgba(0, 0, 255, 1)">/&gt;</span>
            <span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">FormItem</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
            <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">FormItem </span><span style="color: rgba(255, 0, 0, 1)">label</span><span style="color: rgba(0, 0, 255, 1)">="Email:"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
                <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">Input </span><span style="color: rgba(255, 0, 0, 1)">v-model</span><span style="color: rgba(0, 0, 255, 1)">="empInfo.email"</span><span style="color: rgba(255, 0, 0, 1)"> placeholder</span><span style="color: rgba(0, 0, 255, 1)">="Email..."</span><span style="color: rgba(255, 0, 0, 1)"> style</span><span style="color: rgba(0, 0, 255, 1)">="width: 300px;"</span> <span style="color: rgba(0, 0, 255, 1)">/&gt;</span>
            <span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">FormItem</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
            <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">FormItem </span><span style="color: rgba(255, 0, 0, 1)">label</span><span style="color: rgba(0, 0, 255, 1)">="DeptName:"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
                <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">Select </span><span style="color: rgba(255, 0, 0, 1)">v-model</span><span style="color: rgba(0, 0, 255, 1)">="empInfo.deptid"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
                    <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">Option </span><span style="color: rgba(255, 0, 0, 1)">v-for</span><span style="color: rgba(0, 0, 255, 1)">="(item, index) in dept"</span><span style="color: rgba(255, 0, 0, 1)"> :key</span><span style="color: rgba(0, 0, 255, 1)">="index"</span><span style="color: rgba(255, 0, 0, 1)"> :value</span><span style="color: rgba(0, 0, 255, 1)">="item.deptid"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span> {{item.deptname}} <span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">Option</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
                <span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">Select</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
            <span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">FormItem</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
        <span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">Form</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
    <span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">Modal</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">div</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>

</template>
<script>
import {
getAllEmps,
getEmp,
deleteEmp,
updateEmp,
insertEmp,
getDeptName
} from './api/api.js'
export default {
data() {
return {
// 保存列表的总数据
                total: 0,
// 添加与编辑复用 modal 框，false 为添加，true 为编辑
                createOrEditor: false,
// 是否打开员工信息框
                empModal: false,
// 用于保存一个员工的信息
                empInfo: {},
// 是否打开设置
                setUp: false,
// 当前页码
                currentPage: 1,
// 每页数据的条数
                pageSize: 10,
// 表格的列
                tableColumns1: [{
// 分页时，若要出现自动索引，设置 type = "index2"，并使用 render 来返回索引值
                        type: 'index2',
width: 80,
align: 'center',
render: (h, params) => {
return h('span', params.index + (this.currentPage - 1) * this.pageSize + 1);
}
}, {
title: 'Name',
slot: 'name'
}, {
title: 'Salary',
key: 'salary',
sortable: true
},
{
title: 'Age',
key: 'age',
sortable: true
},
{
title: 'Email',
key: 'email'
}, {
title: 'DeptName',
key: 'deptName'
},
{
title: 'Action',
slot: 'action',
width: 200,
align: 'center'
}
],
dept: [],
// 表格每页的数据
                data2: [],
// 表格边框是否显示
                showBorder: false,
// 表格斑马纹是否显示
                showStripe: false,
// 表格头是否显示
                showHeader: true,
// 表格索引是否显示
                showIndex: true,
// 表格多选框是否显示
                showCheckbox: false,
// 表格滚动条是否开启
                fixedHeader: false,
// 改变表格大小
                tableSize: 'default'
}
},
methods: {
changePage(index) {
// 改变当前的页码，并获取当前页码所拥有的数据
this.currentPage = index
            </span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 128, 0, 1)">//</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 128, 0, 1)"> 获取emps数据,分页查询</span>

                getAllEmps({
pageNum: this.currentPage,
pageSize: this.pageSize
}).then((res) => {
if (res.data.success) {
// 保存获取到的 emp 列表
this.data2 = res.data.pageInfo.list
// 保存获取数据的总数
this.total = res.data.pageInfo.total
}
this.noticeType(res.data.level, res.data.messages)
}).catch((res) => {
this.noticeType()
})
},
show(index) {
// 弹出一个模态框，用于展示某条数据的信息
this.empInfo = Object.assign(this.empInfo, this.data2[index])
this.empModal = true
this.createOrEditor = true
this.empInfo = Object.assign(this.empInfo, {
index: index
})
},
create() {
// 用于添加一条信息
this.empInfo = []
this.empModal = true
this.createOrEditor = false
},
remove(row, index) {
this.$Modal.confirm({
title: '删除',
content: '<p> 是否删除当前数据 </p>',
onOk: () => {
// 删除某个员工的数据
                        deleteEmp({
id: row.id
}).then((res) => {
if (res.data.success) {
this.changePage(this.currentPage)
}
this.noticeType(res.data.level, res.data.messages)
}).catch((res) => {
this.noticeType()
})
},
onCancel: () => {
this.$Message.info('取消删除')
},
okText: 'OK',
cancelText: 'Cancel'
})
},
changePageSize(index) {
// 改变每页显示的条数
this.$Message.info({
content: '当前页面显示条数修改为： ' + index + '条 / 页'
})
// 改变后，跳转到首页，并刷新列表
this.pageSize = index
if(this.currentPage === 1) {
this.changePage(this.currentPage)
return
}
this.currentPage = 1
},
okEditor() {
if (this.createOrEditor) {
// 更新某个员工的数据
                    const that = this
updateEmp(this.empInfo).then((res) => {
if (res.data.success) {
this.changePage(this.currentPage)
}
this.noticeType(res.data.level, res.data.messages)
}).catch((res) => {
this.noticeType()
})
} else {
// 新增某个员工
this.empInfo = Object.assign({}, this.empInfo, {
id: null
})
insertEmp(this.empInfo).then((res) => {
if (res.data.success) {
this.changePage(Math.ceil((this.total + 1) / this.pageSize))
}
this.noticeType(res.data.level, res.data.messages)
}).catch((res) => {
this.noticeType()
})
}
this.empInfo = {}
},
cancelEditor() {
// 取消编辑的操作
this.$Message.info({
content: '操作取消'
})
},
noticeType(type, messages) {
switch (type) {
case 'info':
this.$Notice.success({
title: messages.join('\n'),
duration: 2
})
break
case 'error':
this.$Notice.error({
title: messages.join('\n'),
duration: 2
})
break
default:
this.$Notice.error({
title: '系统异常',
duration: 2
})
break
}
}
},
watch: {
showIndex(newVal) {
if (newVal) {
// 为 true 时，在首部增加一个索引列
this.tableColumns1.unshift({
// 分页时，若要出现自动索引，设置 type = "index2"，并使用 render 来返回索引值
                        type: 'index2',
width: 80,
align: 'center',
render: (h, params) => {
return h('span', params.index + (this.currentPage - 1) * this.pageSize + 1);
}
})
} else {
// 为 false 时，若首部存在索引列，则移除该列
this.tableColumns1.forEach((item, index) => {
if (item.type === 'index2') {
this.tableColumns1.splice(index, 1)
}
})
}
},
showCheckbox(newVal) {
if (newVal) {
// 为 true 时，在首部增加一多选框列，
this.tableColumns1.unshift({
type: 'selection',
width: 60,
align: 'center'
})
} else {
// 为 false 时，若存在多选框列，则移除该列
this.tableColumns1.forEach((item, index) => {
if (item.type === 'selection') {
this.tableColumns1.splice(index, 1)
}
})
}
},
empModal(newVal) {
// 如果打开模态框，则触发一次获取部门信息的操作
if (newVal) {
// 获取部门信息
                    getDeptName().then((res) => {
if (res.data.success) {
// 使用 Object.assign 给对象赋值时，推荐使用如下方法，创建一个新的对象。
// 若仍使用同一对象，比如 this.dept = Object.assign(this.dept, res.data.departments)，vue 可能监控不到它的变化。
this.dept = Object.assign({}, this.dept, res.data.departments)
}
}).catch((res) => {
this.noticeType()
})
}
}
},
mounted() {
// 页面加载时，触发第一次刷新列表的操作
this.changePage(this.currentPage)
}
}
</script>
【api.js】
import Axios from 'axios'
/**

获取 emps 数据, 分页查询
@param {Object} params 分页参数 (pageNum 当前页码, pageSize 每页数据总数)
*/
export function getAllEmps(params) {
return new Promise((resolve, reject) => {
Axios.get('/emps/' + params.pageNum, {
params
}).then(res => {
resolve(res)
}).catch(res => {
reject(res)
})
})
}

/**

获取某个员工的数据
@param {Object} params 参数为员工的 id
*/
export function getEmp(params) {
return new Promise((resolve, reject) => {
Axios.get('/emp/' + params.id).then(res => {
resolve(res)
}).catch(res => {
reject(res)
})
})
}

/**

删除某个员工的数据
@param {Object} params 参数为员工的 id
*/
export function deleteEmp(params) {
return new Promise((resolve, reject) => {
Axios.delete('/emp/' + params.id).then(res => {
resolve(res)
}).catch(res => {
reject(res)
})
})
}

/**

更新某个员工的数据
@param {Object} params 参数为员工的 id, 以及员工数据
*/
export function updateEmp(params) {
return new Promise((resolve, reject) => {
Axios.put('/emp/' + params.id, params).then(res => {
resolve(res)
}).catch(res => {
reject(res)
})
})
}

/**

新增某个员工
@param {Object} params 参数为员工的 id, 以及员工数据
*/
export function insertEmp(params) {
return new Promise((resolve, reject) => {
Axios.post('/emp', params).then(res => {
resolve(res)
}).catch(res => {
reject(res)
})
})
}

/**

获取部门信息
@param {Object} params
*/
export function getDeptName(params) {
return new Promise((resolve, reject) => {
Axios.get('/depts').then(res => {
resolve(res)
}).catch(res => {
reject(res)
})
})
}

【vue.config.js】
module.exports = {
devServer: {
proxy: {
'/api': {
// 此处的写法，目的是为了 将 /api 替换成 http://localhost:9000/crud
target: 'http://localhost:9000/crud/',
// 允许跨域
changeOrigin: true,
ws: true,
pathRewrite: {
'^/api': ''
}
}
}
}
}
【package.json】
{
"name": "ssm_crud_front",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"axios": "^0.19.0",
"core-js": "^3.3.2",
"view-design": "^4.0.2",
"vue": "^2.6.10"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^4.0.0",
"@vue/cli-plugin-eslint": "^4.0.0",
"@vue/cli-service": "^4.0.0",
"babel-eslint": "^10.0.3",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"vue-template-compiler": "^2.6.10"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"rules": {
"generator-star-spacing": "off",
"no-tabs": "off",
"no-unused-vars": "off",
"no-console": "off",
"no-irregular-whitespace": "off",
"no-debugger": "off"
},
"parserOptions": {
"parser": "babel-eslint"
}
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": [
"> 1%",
"last 2 versions"
]
}

回到顶部

九、前后端项目启动

1、前端项目启动

（1）项目地址：
　　https://github.com/lyh-man/ssm_crud-front.git
（2）前提：
　　安装 node.js（为了使用 npm）。
（3）启动：

将项目 copy 下来，并通过命令行进入该目录。
【Project setup】
Step1：  npm install
【Compiles and hot-reloads for development】
Step2：  npm run serve
【Compiles and minifies for production】
可选：   npm run build
【Run your tests】
可选：   npm run test
【Lints and fixes files】
可选：   npm run lint

2、后端项目启动

（1）项目地址：https://github.com/lyh-man/ssm_crud-back.git
（2）使用 IDEA 打开项目，等待 maven 下载相关依赖。
（3）Step1：打开 Edit Configurations...

（4）Step2：点击 + 号，并找到 maven

（5）配置项目地址、以及端口号

（6）运行即可

SSM + VUE 实现简单的 CRUD

一、项目分析

1、需求

2、技术点

二、项目地址、截图

1、项目地址

2、项目截图

三、后端项目环境搭建

1、使用 IDEA 创建一个 maven 工程。

2、引入项目依赖的 jar 包（配置依赖信息）。

3、配置 ssm 整合的文件（详细过程后续展开）。

4、官方文档：

三、（3.1）SSM 基本配置 -- 配置 web.xml

1、配置 Spring 容器

2、配置 SpringMVC 的前端控制器

3、配置解决乱码问题的过滤器

4、配置 Rest 风格的 URI

5、web.xml 完整配置

三、（3.2）配置 SpringMVC--dispatcher-servlet.xml

1、配置组件扫描方式

2、配置视图解析器

3、配置请求处理（标准配置一）

4、配置注解的处理器映射器和处理器适配器（标准配置二）

5、dispatcher-servlet.xml 完整配置

三、（3.3）配置 Spring--applicationContext.xml

1、配置组件扫描方式

2、配置数据库连接池

三、（3.4）Spring 和 MyBatis 整合配置 --applicationContext.xml

1、配置 sqlSessionFactory

2、配置批量执行的 sqlSession(可选操作)

3、配置 mapper 扫描器

4、配置事务控制与切面（可选）

5、applicationContext.xml 完整配置

三、（3.5）Mybatis 配置 -- mybatis-config.xml

1、配置全局参数

2、使用分页插件（pagehelper）

3、mybatis-config.xml 完整配置

四、逆向工程

1、配置文件 -- src/mybatis-generator.xml

2、执行类 -- TestMybatisGenerator

五、数据库 （mysql 1.8）

1、创建数据表

2、插入一些数据（可选操作）

3、测试后台代码与数据库的交互（可选操作）

六、后端代码

1、文件结构

2、代码

七、前端代码 -- 静态页面

1、非 template/render 模式下

2、template/render 模式下

八、前端代码

1、解决跨域问题

2、调用接口、与后台进行交互

九、前后端项目启动

1、前端项目启动

2、后端项目启动

相关帖子

随便看看

SSM + VUE 实现简单的 CRUD

五、数据库（mysql 1.8）