SSM整合：SSM+VUE

一、效果图：

请添加图片描述

二、实现步骤：

1.后端：

创建数据库。
新建Maven项目,选择webapp模板。
补全webapp缺失目录。
修改pom.xml文件，添加依赖。
添加jdbc.properties属性配置文件。
添加SqlMapConfig.xml(Mybatis核心配置文件)。
添加applicationContext_mapper.xml文件(数据访问层的核心配置文件)。
添加applicationContext_service.xml文件(业务逻辑层的核心配置文件)。
添加spirngmvc.xml文件(Springmvc核心配置文件)。
web.xml文件设置中文编码，并注册spirngmvc框架，并注册Spring框架。
新建实体类user。
新建UserMapper.java接口。
新建UserMapper.xml实现增删查所有功能。
新建service接口和实现类。
新建测试类,完成所有功能的测试。
新建控制器,完成所有功能。
浏览器测试功能。

2.前端：

使用前端交付的VUE项目。
cd E:\idea_workspace\ssm-vue01 进入到当前项目的目录下
npm i element -ui -S 下载elementUI的框架
npm install 打包项目
npm install --save vue-axios 下载跨域访问组件axios
在IDEA中启动VUE项目，使用npm的配置方式部署项目。
配合后端项目进行测试。

三、后端SSM：

1.项目结构：

在这里插入图片描述

2. 实现思路：

(1)创建数据库表：

在这里插入图片描述

(2)pom.xml文件添加依赖：



<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.0modelVersion>

  <groupId>org.examplegroupId>
  <artifactId>ssmartifactId>
  <version>1.0version>
  <packaging>warpackaging>



  
  <properties>
    
    <junit.version>4.12junit.version>
    
    <spring.version>5.2.5.RELEASEspring.version>
    
    <mybatis.version>3.5.1mybatis.version>
    
    <mybatis.spring.version>1.3.1mybatis.spring.version>
    
    <mybatis.paginator.version>1.2.15mybatis.paginator.version>
    
    <mysql.version>8.0.26mysql.version>
    
    <slf4j.version>1.6.4slf4j.version>
    
    <druid.version>1.1.12druid.version>
    
    <pagehelper.version>5.1.2pagehelper.version>
    
    <jstl.version>1.2jstl.version>
    
    <servlet-api.version>3.0.1servlet-api.version>
    
    <jsp-api.version>2.0jsp-api.version>
    
    <jackson.version>2.9.6jackson.version>
  properties>


  <dependencies>
    
    <dependency>
      <groupId>org.springframeworkgroupId>
      <artifactId>spring-contextartifactId>
      <version>${spring.version}version>
    dependency>
    <dependency>
      <groupId>org.springframeworkgroupId>
      <artifactId>spring-beansartifactId>
      <version>${spring.version}version>
    dependency>
    <dependency>
      <groupId>org.springframeworkgroupId>
      <artifactId>spring-webmvcartifactId>
      <version>${spring.version}version>
    dependency>
    <dependency>
      <groupId>org.springframeworkgroupId>
      <artifactId>spring-jdbcartifactId>
      <version>${spring.version}version>
    dependency>
    <dependency>
      <groupId>org.springframeworkgroupId>
      <artifactId>spring-aspectsartifactId>
      <version>${spring.version}version>
    dependency>
    <dependency>
      <groupId>org.springframeworkgroupId>
      <artifactId>spring-jmsartifactId>
      <version>${spring.version}version>
    dependency>
    <dependency>
      <groupId>org.springframeworkgroupId>
      <artifactId>spring-context-supportartifactId>
      <version>${spring.version}version>
    dependency>
    <dependency>
      <groupId>org.springframeworkgroupId>
      <artifactId>spring-testartifactId>
      <version>5.2.5.RELEASEversion>
    dependency>
    
    <dependency>
      <groupId>org.mybatisgroupId>
      <artifactId>mybatisartifactId>
      <version>${mybatis.version}version>
    dependency>
    <dependency>
      <groupId>org.mybatisgroupId>
      <artifactId>mybatis-springartifactId>
      <version>${mybatis.spring.version}version>
    dependency>
    <dependency>
      <groupId>com.github.miemiedevgroupId>
      <artifactId>mybatis-paginatorartifactId>
      <version>${mybatis.paginator.version}version>
    dependency>
    <dependency>
      <groupId>com.github.pagehelpergroupId>
      <artifactId>pagehelperartifactId>
      <version>${pagehelper.version}version>
    dependency>
    
    <dependency>
      <groupId>mysqlgroupId>
      <artifactId>mysql-connector-javaartifactId>
      <version>${mysql.version}version>
    dependency>
    
    <dependency>
      <groupId>com.alibabagroupId>
      <artifactId>druidartifactId>
      <version>${druid.version}version>
    dependency>
    
    <dependency>
      <groupId>junitgroupId>
      <artifactId>junitartifactId>
      <version>${junit.version}version>
      <scope>testscope>
    dependency>
    
    <dependency>
      <groupId>jstlgroupId>
      <artifactId>jstlartifactId>
      <version>${jstl.version}version>
    dependency>
    <dependency>
      <groupId>javax.servletgroupId>
      <artifactId>javax.servlet-apiartifactId>
      <version>3.0.1version>
      <scope>providedscope>
    dependency>
    <dependency>
      <groupId>javax.servletgroupId>
      <artifactId>jsp-apiartifactId>
      <scope>providedscope>
      <version>${jsp-api.version}version>
    dependency>
    
    <dependency>
      <groupId>com.fasterxml.jackson.coregroupId>
      <artifactId>jackson-databindartifactId>
      <version>${jackson.version}version>
    dependency>
    <dependency>
      <groupId>org.jsongroupId>
      <artifactId>jsonartifactId>
      <version>20140107version>
    dependency>
    
    <dependency>
      <groupId>commons-iogroupId>
      <artifactId>commons-ioartifactId>
      <version>2.4version>
    dependency>
    <dependency>
      <groupId>commons-fileuploadgroupId>
      <artifactId>commons-fileuploadartifactId>
      <version>1.3.1version>
    dependency>
    
    <dependency>
      <groupId>org.slf4jgroupId>
      <artifactId>slf4j-apiartifactId>
      <version>2.0.3version>
    dependency>
    
    <dependency>
      <groupId>org.slf4jgroupId>
      <artifactId>slf4j-simpleartifactId>
      <version>2.0.3version>
      <scope>testscope>
    dependency>

  dependencies>


  
  <build>
    <plugins>
      <plugin>
        <groupId>org.apache.maven.pluginsgroupId>
        <artifactId>maven-compiler-pluginartifactId>
        <configuration>
          
          
          <source>1.8source>
          <target>1.8target>
          <encoding>UTF-8encoding>
        configuration>
      plugin>
    plugins>
    
    <resources>
      <resource>
        <directory>src/main/javadirectory>
        <includes>
          <include>**/*.propertiesinclude>
          <include>**/*.xmlinclude>
        includes>
        <filtering>falsefiltering>
      resource>
      <resource>
        <directory>src/main/resourcesdirectory>
        <includes>
          <include>**/*.propertiesinclude>
          <include>**/*.xmlinclude>
        includes>
        <filtering>falsefiltering>
      resource>
    resources>
  build>

project>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226

(3)添加properties属性配置文件：

jdbc.driverClassName=com.mysql.cj.jdbc.Driver
jdbc.url=jdbc:mysql://localhost:3306/123
jdbc.username=账号
jdbc.password=密码
1
2
3
4

(4)SqlMapConfig.xml(Mybatis核心配置文件):


DOCTYPE configuration PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-config.dtd">
<configuration>
    
    <settings>
        <setting name="logImpl" value="STDOUT_LOGGING"/>
    settings>
    
configuration>
1
2
3
4
5
6
7
8
9
10

(5)applicationContext_mapper.xml文件(数据访问层的核心配置文件):


<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"
       xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/context https://www.springframework.org/schema/context/spring-context.xsd">
    
    <context:component-scan base-package="com.user.mapper"/>
    
    <context:property-placeholder location="classpath:jdbc.properties"/>
    
    <bean id="dataSource" class="com.alibaba.druid.pool.DruidDataSource">
        <property name="driverClassName" value="${jdbc.driverClassName}"/>
        <property name="url" value="${jdbc.url}"/>
        <property name="username" value="${jdbc.username}"/>
        <property name="password" value="${jdbc.password}"/>
    bean>
    
    <bean class="org.mybatis.spring.SqlSessionFactoryBean">
        
        <property name="dataSource" ref="dataSource"/>
        
        <property name="configLocation" value="classpath:SqlMapConfig.xml"/>
        
        <property name="typeAliasesPackage" value="com.user.pojo"/>
    bean>
    
    <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
        <property name="basePackage" value="com.user.mapper"/>
    bean>
beans>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

(6)applicationContext_service.xml文件(业务逻辑层的核心配置文件):


<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:tx="http://www.springframework.org/schema/tx"
       xmlns:aop="http://www.springframework.org/schema/aop"
       xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/context https://www.springframework.org/schema/context/spring-context.xsd http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx.xsd http://www.springframework.org/schema/aop https://www.springframework.org/schema/aop/spring-aop.xsd">
    
    <context:component-scan base-package="com.user.service"/>
    
    <bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
        
        <property name="dataSource" ref="dataSource"/>
    bean>
    
    <tx:advice id="myadvice" transaction-manager="transactionManager">
        <tx:attributes>
            <tx:method name="*select*" read-only="true"/>
            <tx:method name="*find*" read-only="true"/>
            <tx:method name="*search*" read-only="true"/>
            <tx:method name="*get*" read-only="true"/>
            <tx:method name="*insert*" propagation="REQUIRED"/>
            <tx:method name="*add*" propagation="REQUIRED"/>
            <tx:method name="*save*" propagation="REQUIRED"/>
            <tx:method name="*set*" propagation="REQUIRED"/>
            <tx:method name="*update*" propagation="REQUIRED"/>
            <tx:method name="*change*" propagation="REQUIRED"/>
            <tx:method name="*modify*" propagation="REQUIRED"/>
            <tx:method name="*delete*" propagation="REQUIRED"/>
            <tx:method name="*drop*" propagation="REQUIRED"/>
            <tx:method name="*remove*" propagation="REQUIRED"/>
            <tx:method name="*clear*" propagation="REQUIRED"/>
            <tx:method name="*" propagation="SUPPORTS"/>
        tx:attributes>
    tx:advice>
    
    <aop:config>
        <aop:pointcut id="mycut" expression="execution(* com.user.service.Impl.*.*(..))"/>
        <aop:advisor advice-ref="myadvice" pointcut-ref="mycut"/>
    aop:config>
beans>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

(7)spirngmvc.xml文件(Springmvc核心配置文件):


<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 https://www.springframework.org/schema/context/spring-context.xsd http://www.springframework.org/schema/mvc https://www.springframework.org/schema/mvc/spring-mvc.xsd">
    
    <context:component-scan base-package="com.user.controller"/>
    
    <mvc:annotation-driven/>
beans>
1
2
3
4
5
6
7
8
9
10
11

(8) web.xml文件设置中文编码，注册spirngmvc框架、Spring框架:


<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_4_0.xsd"
         version="4.0">
    
    <filter>
        <filter-name>encodefilter-name>
        <filter-class>org.springframework.web.filter.CharacterEncodingFilterfilter-class>
        <init-param>
            <param-name>encodingparam-name>
            <param-value>UTF-8param-value>
        init-param>
        <init-param>
            <param-name>forceRequestEncodingparam-name>
            <param-value>trueparam-value>
        init-param>
        <init-param>
            <param-name>forceResponseEncodingparam-name>
            <param-value>trueparam-value>
        init-param>
    filter>
    <filter-mapping>
        <filter-name>encodefilter-name>
        <url-pattern>/*url-pattern>
    filter-mapping>
    
    <servlet>
        <servlet-name>springmvcservlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServletservlet-class>
        <init-param>
            <param-name>contextConfigLocationparam-name>
            <param-value>classpath:springmvc.xmlparam-value>
        init-param>
    servlet>
    <servlet-mapping>
        <servlet-name>springmvcservlet-name>
        <url-pattern>/url-pattern>
    servlet-mapping>
    
    <listener>
        <listener-class>org.springframework.web.context.ContextLoaderListenerlistener-class>
    listener>
    <context-param>
        <param-name>contextConfigLocationparam-name>
        <param-value>classpath:applicationContext_*.xmlparam-value>
    context-param>
web-app>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

(9)新建实体类user:

package com.user.pojo;

public class User {
    private String userId;
    private String cardType;
    private String cardNo;
    private String userName;
    private String userSex;
    private String userAge;
    private String userRole;

    @Override
    public String toString() {
        return "User{" +
                "userId='" + userId + '\'' +
                ", cardType='" + cardType + '\'' +
                ", cardNo='" + cardNo + '\'' +
                ", userName='" + userName + '\'' +
                ", userSex='" + userSex + '\'' +
                ", userAge='" + userAge + '\'' +
                ", userRole='" + userRole + '\'' +
                '}';
    }

    public String getUserId() {
        return userId;
    }

    public void setUserId(String userId) {
        this.userId = userId;
    }

    public String getCardType() {
        return cardType;
    }

    public void setCardType(String cardType) {
        this.cardType = cardType;
    }

    public String getCardNo() {
        return cardNo;
    }

    public void setCardNo(String cardNo) {
        this.cardNo = cardNo;
    }

    public String getUserName() {
        return userName;
    }

    public void setUserName(String userName) {
        this.userName = userName;
    }

    public String getUserSex() {
        return userSex;
    }

    public void setUserSex(String userSex) {
        this.userSex = userSex;
    }

    public String getUserAge() {
        return userAge;
    }

    public void setUserAge(String userAge) {
        this.userAge = userAge;
    }

    public String getUserRole() {
        return userRole;
    }

    public void setUserRole(String userRole) {
        this.userRole = userRole;
    }

    public User() {
    }

    public User(String userId, String cardType, String cardNo, String userName, String userSex, String userAge, String userRole) {
        this.userId = userId;
        this.cardType = cardType;
        this.cardNo = cardNo;
        this.userName = userName;
        this.userSex = userSex;
        this.userAge = userAge;
        this.userRole = userRole;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93

(10)新建UserMapper.java接口:

package com.user.mapper;

import com.user.pojo.User;
import org.apache.ibatis.annotations.Param;

import java.util.List;

public interface UserMapper {

    /**
     * 根据条件分页获取分页数据:
     * url:
     * /user/selectUserPage?userName=z&userSex=男&page=null
     * 参数:
     * userName:表单中用户名称
     * userSex:表单中用户性别
     * page:提交的页码(第一次访问为null)
     * 结果:
     * 有数据时：
     * [{
     * "userId":"15968954638794962",
     * "cardType":"身份证",
     * "cardNo":"343343554654",
     * "userName":"撒撒旦",
     * "userSex":"女",
     * "userAge":"29",
     * "userRole":"生产、运输设备操作人员及有关人员"},
     * {...}
     * ]
     * 无数据时：
     * []
     */
    List<User> selectUserPage(
            @Param("userName")
            String userName,
            @Param("userSex")
            String UserSex,
            @Param("startRow")
            int startRow);

    /**
     * 增加用户:
     * url:
     * /user/createUser(参数见下面)
     * 参数:
     * cardType: this.ruleForm.cardType,//证件类型
     * cardNo: this.ruleForm.cardNo,//证件号码
     * userName: this.ruleForm.userName,//用户姓名
     * userSex: this.ruleForm.userSex,//用户性别
     * userAge: this.ruleForm.userAge,//用户年龄
     * userRole: this.ruleForm.userRole,//用户角色
     * 结果:
     * 增加成功时：
     * 1
     * 增加失败时:
     * 0
     */
    int createUser(User user);

    /**
     * 根据用户ID删除用户:
     * url:
     * /user/ deleteUserById?userId= 15968162087363060
     * 参数:
     * userId:删除用户的id
     * 结果:
     * 删除成功时：
     * 1
     * 删除失败时:
     * 0
     */
    int deleteUserById(String userId);

    /**
     * 获取总行数:
     * url:
     * /user/getRowCount?userName=z&userSex=男
     * 参数:
     * userName:表单中用户名称
     * userSex:表单中用户性别
     * 结果:
     * 有数据时:
     * 12
     * 无数据时:
     * 0
     */
    int getRowCount(
            @Param("userName")
            String userName,
            @Param("userSex")
            String userSex);

    /**
     * 更新用户:
     * url:
     * /user/updateUserById(参数见以下)
     * 参数:
     * userId: this.ruleForm.userId,//用户 Id
     * cardType: this.ruleForm.cardType,//证件类型
     * cardNo: this.ruleForm.cardNo,//证件号码
     * userName: this.ruleForm.userName,//用户姓名
     * userSex: this.ruleForm.userSex,//用户性别
     * userAge: this.ruleForm.userAge,//用户年龄
     * userRole: this.ruleForm.userRole,//用户角色
     * 结果:
     * 成功时：
     * 1
     * 出错时：
     * 0
     */
    int updateUserById(User user);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112

(11)新建UserMapper.xml实现接口中所有功能:


DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.user.mapper.UserMapper">

    
    <resultMap id="userMap" type="user">
        <id property="userId" column="user_id"/>
        <result property="cardType" column="card_type"/>
        <result property="cardNo" column="card_no"/>
        <result property="userName" column="user_name"/>
        <result property="userSex" column="user_sex"/>
        <result property="userAge" column="user_age"/>
        <result property="userRole" column="user_role"/>
    resultMap>

    
    <sql id="allColumns">user_id,card_type,card_no,user_name,user_sex,user_age,user_rolesql>
    
    <select id="selectUserPage" resultMap="userMap">
        select <include refid="allColumns"/>
        from user
        <where>
            <if test="userName != null and userName != ''">
                and user_name like concat('%',#{userName},'%')
            if>
            <if test="userSex != '' and userSex != null">
                and user_sex = #{userSex}
            if>
        where>
        limit #{startRow},5
    select>
    
    <insert id="createUser" parameterType="user">
        insert into user values (#{userId},#{cardType},#{cardNo},#{userName},#{userSex},#{userAge},#{userRole})
    insert>
    
    <delete id="deleteUserById" parameterType="String">
        delete from user where user_id = #{userId}
    delete>
    
    <select id="getRowCount" resultType="Integer">
        select count(*)
        from user
        <where>
            <if test="userName != null and userName != ''">
                and user_name like concat('%',#{userName},'%')
            if>
            <if test="userSex != '' and userSex != null">
                and user_sex = #{userSex}
            if>
        where>
    select>
    
    <update id="updateUserById" parameterType="user">
        update user
        set card_type = #{cardType},card_no = #{cardNo},user_name = #{userName},user_sex = #{userSex},user_age = #{userAge},user_role = #{userRole}
        where user_id = #{userId}
    update>
mapper>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

(12)新建service接口:

package com.user.service;

import com.user.pojo.User;
import org.apache.ibatis.annotations.Param;

import java.util.List;

public interface UserService {
    /**
     * 根据条件分页获取分页数据:
     * url:
     * /user/selectUserPage?userName=z&userSex=男&page=null
     * 参数:
     * userName:表单中用户名称
     * userSex:表单中用户性别
     * page:提交的页码(第一次访问为null)
     * 结果:
     * 有数据时：
     * [{
     * "userId":"15968954638794962",
     * "cardType":"身份证",
     * "cardNo":"343343554654",
     * "userName":"撒撒旦",
     * "userSex":"女",
     * "userAge":"29",
     * "userRole":"生产、运输设备操作人员及有关人员"},
     * {...}
     * ]
     * 无数据时：
     * []
     */
    List<User> selectUserPage(String userName ,String UserSex, int startRow);

    /**
     * 增加用户:
     * url:
     * /user/createUser(参数见下面)
     * 参数:
     * cardType: this.ruleForm.cardType,//证件类型
     * cardNo: this.ruleForm.cardNo,//证件号码
     * userName: this.ruleForm.userName,//用户姓名
     * userSex: this.ruleForm.userSex,//用户性别
     * userAge: this.ruleForm.userAge,//用户年龄
     * userRole: this.ruleForm.userRole,//用户角色
     * 结果:
     * 增加成功时：
     * 1
     * 增加失败时:
     * 0
     */
    int createUser(User user);

    /**
     * 根据用户ID删除用户:
     * url:
     * /user/ deleteUserById?userId= 15968162087363060
     * 参数:
     * userId:删除用户的id
     * 结果:
     * 删除成功时：
     * 1
     * 删除失败时:
     * 0
     */
    int deleteUserById(String userId);

    /**
     * 获取总行数:
     * url:
     * /user/getRowCount?userName=z&userSex=男
     * 参数:
     * userName:表单中用户名称
     * userSex:表单中用户性别
     * 结果:
     * 有数据时:
     * 12
     * 无数据时:
     * 0
     */
    int getRowCount(String userName, String userSex);

    /**
     * 更新用户:
     * url:
     * /user/updateUserById(参数见以下)
     * 参数:
     * userId: this.ruleForm.userId,//用户 Id
     * cardType: this.ruleForm.cardType,//证件类型
     * cardNo: this.ruleForm.cardNo,//证件号码
     * userName: this.ruleForm.userName,//用户姓名
     * userSex: this.ruleForm.userSex,//用户性别
     * userAge: this.ruleForm.userAge,//用户年龄
     * userRole: this.ruleForm.userRole,//用户角色
     * 结果:
     * 成功时：
     * 1
     * 出错时：
     * 0
     */
    int updateUserById(User user);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101

(13)新建service实现类实现接口中所有功能：

package com.user.service.Impl;

import com.user.mapper.UserMapper;
import com.user.pojo.User;
import com.user.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;
@Service
public class UserServiceImpl implements UserService {
    @Autowired//IoC
    UserMapper userMapper;//数据访问层对象
    @Override
    public List<User> selectUserPage(String userName, String userSex, int startRow) {
        return userMapper.selectUserPage(userName,userSex,startRow);
    }

    @Override
    public int createUser(User user) {
        return userMapper.createUser(user);
    }

    @Override
    public int deleteUserById(String userId) {
        return userMapper.deleteUserById(userId);
    }

    @Override
    public int getRowCount(String userName, String userSex) {
        return userMapper.getRowCount(userName,userSex);
    }

    @Override
    public int updateUserById(User user) {
        return userMapper.updateUserById(user);
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

(14)新建测试类,完成所有功能的测试:

package test;

import com.user.pojo.User;
import com.user.service.UserService;
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.List;

@RunWith(SpringJUnit4ClassRunner.class)
@ContextConfiguration(locations = {"classpath:applicationContext_mapper.xml","classpath:applicationContext_service.xml"})
public class MyTest {
    @Autowired
    UserService userService;
    @Test
    public void testSelectUserPage(){
        List<User> list = userService.selectUserPage(null,null,5);
        list.forEach(user -> {
            System.out.println(user);
        });
    }
    @Test
    public void testDeleteUserById(){
        int num = userService.deleteUserById("15968954638794962");
        System.out.println(num);
    }
    @Test
    public void testGetRowCount(){
        int num = userService.getRowCount(null,null);
        System.out.println(num);
    }
    @Test
    public void testCreatUser(){
        User user = new User("1234567891011","身份证","13354313545","彭十六","女","23","主播");
        int num = userService.createUser(user);
        System.out.println(num);
    }
    @Test
    public void testUpdateUserById(){
        User user = new User("12345678910","身份证","13354313545","彭十五","女","23","主播");
        int num = userService.updateUserById(user);
        System.out.println(num);
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

(15)新建控制器,完成所有功能:

package com.user.controller;

import com.user.pojo.User;
import com.user.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;
//@RestController如果本类中全部是ajax请求，则使用此注解，方法上的@ResponseBody可省略
@Controller
@CrossOrigin //设置服务器端支持跨域访问
@RequestMapping("/user")
public class UserController {
    @Autowired//IoC
    UserService userService;//业务逻辑层对象

    public static final int PAGE_SIZE = 5;

    // /user/selectUserPage?userName=z&userSex=男&page=null
    @RequestMapping("/selectUserPage")//访问路径
    @ResponseBody//该注解用于解析ajax请求
    public List<User> selectUserPage(String userName,String userSex,Integer page){//自动注入
        //根据页码计算起始行
        int startRow = 0;
        if (page != null) {
            startRow = (page-1)*PAGE_SIZE;
        }
        return userService.selectUserPage(userName,userSex,startRow);
    }

    // /user/getRowCount?userName=z&userSex=男
    @RequestMapping("/getRowCount")//访问路径
    @ResponseBody//该注解用于解析ajax请求
    public int getRowCount(String userName,String userSex){//自动注入
        return userService.getRowCount(userName,userSex);
    }

    // /user/ deleteUserById?userId=15968162087363060
    @RequestMapping("/deleteUserById")//访问路径
    @ResponseBody//该注解用于解析ajax请求
    public int deleteUserById(String userId){//自动注入
        return userService.deleteUserById(userId);
    }

    // /user/createUser?cardType=a&cardNo=b&userName=c&userSex=d&userAge=e&userRole=f
    @RequestMapping("/createUser")//访问路径
    @ResponseBody//该注解用于解析ajax请求
    public int createUser(User user){//自动注入
        String uid = System.currentTimeMillis()+"";//为插入行添加不重复的主键
        user.setUserId(uid);
        return userService.createUser(user);
    }

    // /user/updateUserById?userId=x&cardType=a&cardNo=b&userName=c&userSex=d&userAge=e&userRole=f
    @RequestMapping("/updateUserById")//访问路径
    @ResponseBody//该注解用于解析ajax请求
    public int updateUserById(User user){//自动注入
        return userService.updateUserById(user);
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

四、前端VUE：

1.项目结构：

在这里插入图片描述

2.UserHome.vue解析：


<template>
  <div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item>
        <el-input v-model="formInline.search1" size="mini" placeholder="输入姓名查询" v-on:input="handleSearch()">
        el-input>
      el-form-item>
      <el-form-item>
        <el-select size="mini" v-model="formInline.search2" v-on:change="handleSearch()">
          <el-option label="请选择性别" value="">el-option>
          <el-option label="男" value="男">el-option>
          <el-option label="女" value="女">el-option>
        el-select>
      el-form-item>
       <el-form-item>
        <el-button icon="el-icon-circle-plus-outline" type="text" @click="search = true">查询el-button>
      el-form-item>
      <el-form-item>
        <el-button icon="el-icon-circle-plus-outline" type="text" @click="dialogAdd = true">添加el-button>
      el-form-item>
      <el-form-item>
        <el-button icon="el-icon-delete" type="text" @click="handleDeleteList()">删除el-button>
      el-form-item>
    el-form>
    
    <el-table
      ref="multipleTable"
      :data="tableData"
      border
      highlight-current-row
      style="width: 100%"
      @selection-change="handleSelectionDelete">
      <el-table-column type="selection" width="55">el-table-column>
      <el-table-column label="用户编号">
        <template slot-scope="scope">
          <span>{{ scope.row.userId }}span>
        template>
      el-table-column>
      <el-table-column label="证件类型" prop="cardType">el-table-column>
      <el-table-column label="证件号码" prop="cardNo">el-table-column>
      <el-table-column label="用户姓名">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="right">
            <p>证件类型: {{ scope.row.cardType }}p>
            <p>证件号码: {{ scope.row.cardNo }}p>
            <p>用户姓名：{{ scope.row.userName }}p>
            <p>用户性别: {{ scope.row.userSex }}p>
            <p>用户年龄: {{ scope.row.userAge }}p>
            <p>用户角色：{{ scope.row.userRole }}p>
            <div slot="reference" class="name-wrapper">
              <el-button type="text">{{ scope.row.userName }}el-button>
            div>
          el-popover>
        template>
      el-table-column>
      <el-table-column label="用户性别" prop="userSex">el-table-column>
      <el-table-column label="用户年龄" prop="userAge">el-table-column>
      <el-table-column label="用户角色" prop="userRole">el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑el-button>
          <el-button type="text" icon="el-icon-delete" @click="handleDelete(scope.$index, scope.row)">删除el-button>
        template>
      el-table-column>
    el-table>
 <el-dialog title="添加" :append-to-body='true' :visible.sync="dialogAdd" :before-close="handleClose">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px" class="demo-ruleForm" size="medium">
        <el-form-item label="证件类型">
          <el-select v-model="ruleForm.cardType" placeholder="请选择证件类型" prop="cardType">
            <el-option label="身份证" value="身份证">el-option>
            <el-option label="军官证" value="军官证">el-option>
            <el-option label="护照" value="护照">el-option>
            <el-option label="港澳居民通行证" value="港澳居民通行证">el-option>
            <el-option label="台湾往来大陆通行证" value="台湾往来大陆通行证">el-option>
          el-select>
        el-form-item>
        <el-form-item label="证件号码">
          <el-input v-model="ruleForm.cardNo">el-input>
        el-form-item>
        <el-form-item label="用户姓名">
          <el-input v-model="ruleForm.userName">el-input>
        el-form-item>
        <el-form-item label="用户性别">
          <el-radio-group v-model="ruleForm.userSex">
            <el-radio label="男">el-radio>
            <el-radio label="女">el-radio>
          el-radio-group>
        el-form-item>
        <el-form-item label="用户年龄">
          <el-slider v-model="ruleForm.userAge" show-input>el-slider>
        el-form-item>
        <el-form-item label="用户角色">
          <el-select v-model="ruleForm.userRole" placeholder="请选择用户角色" prop="userRole">
            <el-option label="国家机关、党群组织、企业、事业单位负责人" value="国家机关、党群组织、企业、事业单位负责人">el-option>
            <el-option label="专业技术人员" value="专业技术人员">el-option>
            <el-option label="办事人员和有关人员" value="办事人员和有关人员">el-option>
            <el-option label="商业、服务业人员" value="商业、服务业人员">el-option>
            <el-option label="农、林、牧、渔、水利业生产人员" value="农、林、牧、渔、水利业生产人员">el-option>
            <el-option label="生产、运输设备操作人员及有关人员" value="生产、运输设备操作人员及有关人员">el-option>
            <el-option label="军人" value="军人">el-option>
            <el-option label="不便分类的其他从业人员" value="不便分类的其他从业人员">el-option>
            <el-option label="未知" value="未知">el-option>
          el-select>
        el-form-item>
      el-form>
        <span slot="footer" class="dialog-footer">       <el-button @click="emptyUserData()" size="medium">取 消el-button>      <el-button @click="addUser('ruleForm')" type="primary" size="medium">确 定el-button>
span>
   el-dialog>

    <el-dialog title="编辑" :append-to-body='true' :visible.sync="dialogUpdate" :before-close="handleClose">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="70px" class="demo-ruleForm" size="medium">
        <el-form-item label="证件类型">
          <el-select v-model="ruleForm.cardType" placeholder="请选择证件类型" prop="cardType">
            <el-option label="身份证" value="身份证">el-option>
            <el-option label="军官证" value="军官证">el-option>
            <el-option label="护照" value="护照">el-option>
            <el-option label="港澳居民通行证" value="港澳居民通行证">el-option>
            <el-option label="台湾往来大陆通行证" value="台湾往来大陆通行证">el-option>
          el-select>
        el-form-item>
        <el-form-item label="证件号码">
          <el-input v-model="ruleForm.cardNo">el-input>
        el-form-item>
        <el-form-item label="用户姓名">
          <el-input v-model="ruleForm.userName">el-input>
        el-form-item>
        <el-form-item label="用户性别">
          <el-radio-group v-model="ruleForm.userSex">
            <el-radio label="男">el-radio>
            <el-radio label="女">el-radio>
          el-radio-group>
        el-form-item>
        <el-form-item label="用户年龄">
          <el-slider v-model="ruleForm.userAge" show-input>el-slider>
        el-form-item>
        <el-form-item label="用户角色">
          <el-select v-model="ruleForm.userRole" placeholder="请选择用户角色" prop="userRole">
            <el-option label="国家机关、党群组织、企业、事业单位负责人" value="国家机关、党群组织、企业、事业单位负责人">el-option>
            <el-option label="专业技术人员" value="专业技术人员">el-option>
            <el-option label="办事人员和有关人员" value="办事人员和有关人员">el-option>
            <el-option label="商业、服务业人员" value="商业、服务业人员">el-option>
            <el-option label="农、林、牧、渔、水利业生产人员" value="农、林、牧、渔、水利业生产人员">el-option>
            <el-option label="生产、运输设备操作人员及有关人员" value="生产、运输设备操作人员及有关人员">el-option>
            <el-option label="军人" value="军人">el-option>
            <el-option label="不便分类的其他从业人员" value="不便分类的其他从业人员">el-option>
            <el-option label="未知" value="未知">el-option>
          el-select>
        el-form-item>
      el-form>
        <span slot="footer" class="dialog-footer"><el-button @click="emptyUserData()" size="medium">取 消el-button>        <el-button @click="updateUser()" type="primary" size="medium">确 定el-button>
    span>
    el-dialog>

    <br>
    
    <el-pagination
      background
      :disabled="disablePage"
      :current-page.sync="currentPage"
      small
      layout="prev, pager, next"
      :page-size="pageSize"
      :total="total"
      @current-change="handlePageChange">
    el-pagination>
  div>
template>

<script>
/* eslint-disable */
export default {
  name: 'UserHome',
  data() {
    return {
      ruleForm: {
        userId: null,//用户id
        cardType: null,//证件类型
        cardNo: null,//证件号码
        userName: null,//用户姓名
        userSex: null,//用户性别
        userAge: 25,//用户年龄
        userRole: null//用户角色
      },
      rules: {},
      tableData: [],
      formInline:{
        search1: '',
        search2: ''
      },
      dialogAdd: false,
      dialogUpdate: false,
      pageSize: 5,
      currentPage: 1,
      total: 0,
      disablePage: false,
      multipleSelection: []
    };
  },

  created() {
    this.handlePageChange();//分页
    this.getRowCount();//计算总行数
  },

  methods: {
    /**
     * 分页
     */
    handlePageChange() {
      let postData=this.qs.stringify({//构建json对象，属性为page、userName、userSex，用于封装要提交的数据
        page:this.currentPage,
        userName:this.formInline.search1,
        userSex:this.formInline.search2
      });
      this.$axios({//异步跨域ajax请求
        method:'post',//请求提交方式
        url:'/api/user/selectUserPage',//请求URL
        data:postData//携带的json数据：{"page":1,"userName":"","userSex":""}
      }).then(response=>{//成功后进入到这里,response是响应对象
        this.tableData=response.data;//数据绑定,返回的5个用户的json数据,将数据显示到表格上
      }).catch(error=>{
        console.log(error);//出错了进入到这里
      })
    },

    /**
     * 统计用户个数
     */
    getRowCount() {
      let postData=this.qs.stringify({
        userName:this.formInline.search1,
        userSex:this.formInline.search2
      });
      this.$axios({
        method:'post',
        url:'/api/user/getRowCount',
        data:postData//返回的总行数赋值给变量total
      }).then(response=>{
        this.total=response.data;
      }).catch(error=>{
        console.log(error);
      })
    },

    /**
     * 添加用户
     */
    addUser() {
      if (this.ruleForm.cardType == null || this.ruleForm.cardNo == null || this.ruleForm.userName == null || this.ruleForm.userSex == null || this.ruleForm.userRole == null) {
        this.$alert('用户信息不完整请检查', '温馨提示', {
          confirmButtonText: '确定'
        });
        return;
      }
      let postData = this.qs.stringify({
        cardType: this.ruleForm.cardType,//证件类型
        cardNo: this.ruleForm.cardNo,//证件号码
        userName: this.ruleForm.userName,//用户姓名
        userSex: this.ruleForm.userSex,//用户性别
        userAge: this.ruleForm.userAge,//用户年龄
        userRole: this.ruleForm.userRole,//用户角色
      });
      this.$axios({
        method:'post',
        url:'/api/user/createUser',
        data:postData
      }).then(response=>{
        this.handlePageChange();
        this.getRowCount();
        this.$message({
          type: 'success',
          message: '已添加!'
        });
        this.emptyUserData();
      }).catch(error=>{
        console.log(error);
      })
    },

    search(){
      this.handlePageChange();
      this.getRowCount();
    },

    handleSearch() {
      this.handlePageChange();
      this.getRowCount();
    },

    handleEdit(index, row) {
      this.dialogUpdate = true;
      row.userAge = Number(row.userAge);
      this.ruleForm = Object.assign({}, row, index); //点击更新按钮将用户数据回填到对话框，方便用户更新信息，关键！！！
    },

    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
          this.emptyUserData();
        })
        .catch(_ => {
        });
    },

    /**
     * 清空绑定数据
     */
    emptyUserData() {
      this.dialogAdd = false;
      this.dialogUpdate = false;
      this.ruleForm = {
        userId: null,//用户id
        cardType: null,//证件类型
        cardNo: null,//证件号码
        userName: null,//用户姓名
        userSex: null,//用户性别
        userAge: 25,//用户年龄
        userRole: null//用户角色
      };
    },

    /**
     * 根据 userId 删除用户
     * @param index
     * @param row
     */
    handleDelete(index, row) {//index是该行所在下标，row是行中所有数据
      //console.log(index, row);
      //弹出提示框,让用户确定是否删除
      this.$confirm('删除操作, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'//黄色的警告图标
      }).then(() => {//用户点击确定后进入到这里
        let postData = this.qs.stringify({
          userId: row.userId,
        });
        this.$axios({//点击确定后发出跨域访问的请求，后端进行删除操作
          method: 'post',
          url: '/api/user/deleteUserById',
          data: postData
        }).then(response => {//跨域请求成功后进入这里，此时后端已删除成功
          this.getRowCount();//计算删除后的总行数,进行分页插件的页码变化
          if (this.total % 5 == 1 && this.currentPage >= 1) {
            if (this.total / 5 < this.currentPage) {
              this.currentPage = this.currentPage - 1;
            }
          }
          this.handlePageChange();//删除后重新分页

          this.$message({//删除成功后弹框
            type: 'success',
            message: '删除成功!'
          });
          //console.log(response);
        }).catch(error => {
          console.log(error);
        });

      }).catch(() => {
        this.$message({//用户点击取消后进入到这里
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    
    handleSelectionDelete(val) {
      this.multipleSelection = val;
    },

    /**
     * 根据 userId 批量删除用户
     */
    handleDeleteList() {
      let userIds = "";
      this.multipleSelection.forEach(item => {
        userIds += item.userId + ',';
      })
      console.log(userIds);
      // let userIds= this.multipleSelection.map(item => item.userId).join()

      this.$confirm('删除操作, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let postData = this.qs.stringify({
          userIdList: userIds
        });
        console.log(postData);
        this.$axios({
          method: 'post',
          url: '/api/user/deleteUserByIdList',
          data: postData
        }).then(response => {
          this.getRowCount();
          if (this.total % 5 == 1 && this.currentPage >= 1) {
            if (this.total / 5 < this.currentPage) {
              this.currentPage = this.currentPage - 1;
            }
          }
          this.handlePageChange();

          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          //console.log(response);
        }).catch(error => {
          console.log(error);
        });

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },


    updateUser() {
      if (this.ruleForm.cardType == null || this.ruleForm.cardNo == null || this.ruleForm.userName == null || this.ruleForm.userSex == null || this.ruleForm.userRole == null) {
        this.$alert('用户信息不完整请检查', '温馨提示', {
          confirmButtonText: '确定'
        });
        return;
      }
      let postData = this.qs.stringify({
        userId: this.ruleForm.userId,//用户 Id
        cardType: this.ruleForm.cardType,//证件类型
        cardNo: this.ruleForm.cardNo,//证件号码
        userName: this.ruleForm.userName,//用户姓名
        userSex: this.ruleForm.userSex,//用户性别
        userAge: this.ruleForm.userAge,//用户年龄
        userRole: this.ruleForm.userRole,//用户角色
      });
      this.$axios({
        method: 'post',
        url: '/api/user/updateUserById',
        data: postData
      }).then(response => {
        this.handlePageChange();
        this.getRowCount();
        this.$message({
          type: 'success',
          message: '已编辑!'
        });
        this.emptyUserData();
        console.log(response);
      }).catch(error => {
        console.log(error);
      });
    }
  },

}
/* eslint-disable */
script>
<style scoped>
style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468

五、附件：后端接口文档：

在这里插入图片描述

相关阅读:
Java 对象排序(Object Ordering)
Excel多条件计数——COUNTIFS【获奖情况统计】
Boost库学习笔记（三）内存对齐模块
 nginx.conf配置
 ffmpeg6.0编译（NDK）
关于Pod中进程在节点中的研究
 2020年华数杯数学建模A题带相变材料的低温防护服御寒仿真模拟求解全过程文档及程序
 模板学堂｜DataEase协助电商企业开展用户运营
 Python机器视觉--OpenCV入门--机器视觉与OpencCV用途简介
 MySQL数据库忘记密码之修改密码
原文地址：https://blog.csdn.net/m0_53881899/article/details/127597349

SSM整合：SSM+VUE

目录：

一、效果图：

二、实现步骤：

1.后端：

2.前端：

三、后端SSM：

1.项目结构：

2. 实现思路：

(1)创建数据库表：

(2)pom.xml文件添加依赖：

(3)添加properties属性配置文件：

(4)SqlMapConfig.xml(Mybatis核心配置文件):

(5)applicationContext_mapper.xml文件(数据访问层的核心配置文件):

(6)applicationContext_service.xml文件(业务逻辑层的核心配置文件):

(7)spirngmvc.xml文件(Springmvc核心配置文件):

(8) web.xml文件设置中文编码，注册spirngmvc框架、Spring框架:

(9)新建实体类user:

(10)新建UserMapper.java接口:

(11)新建UserMapper.xml实现接口中所有功能:

(12)新建service接口:

(13)新建service实现类实现接口中所有功能：

(14)新建测试类,完成所有功能的测试:

(15)新建控制器,完成所有功能:

四、前端VUE：

1.项目结构：

2.UserHome.vue解析：

五、附件：后端接口文档：