SSM-Vue 前后端分离练习

刚学完Vue，就在网上找了个Demo，功能只有简单的增删改查，但是可以练一下Vue和前后端分离。

用到的技术和开发工具

前端

开发工具：IDEA
开发框架：Vue + axios + elementUI
包管理工具: npm
打包工具：webpack

后端

开发工具：IDEA
开发框架：SpringMVC + Spring + Mybatis
包管理工具：maven
数据库： MySQL

需求及功能

增删改查（CRUD）
分页
批量删除
前后端分离

数据库环境搭建

DROP TABLE IF EXISTS `user`;
CREATE TABLE `user`  (
  `user_id` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL DEFAULT '',
  `card_type` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,
  `card_no` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,
  `user_name` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,
  `user_sex` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,
  `user_age` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,
  `user_role` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,
  PRIMARY KEY (`user_id`) USING BTREE
) ENGINE = InnoDB CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Compact;

INSERT INTO `user` VALUES ('15968162087363060', '身份证', '4264465547656467', '过突然', '男', '30', '办事人员和有关人员');
INSERT INTO `user` VALUES ('15968162346981977', '护照', '432532654364654', '规划图', '男', '29', '不便分类的其他从业人员');
INSERT INTO `user` VALUES ('15968162893439470', '身份证', '4354324534532', '具体办1', '男', '31', '农、林、牧、渔、水利业生产人员');
INSERT INTO `user` VALUES ('15968163245457143', '身份证', '43564546576687', '回各家', '男', '34', '未知');
INSERT INTO `user` VALUES ('15968163514764733', '军官证', '7657868', '缺口v4', '女', '23', '不便分类的其他从业人员');
INSERT INTO `user` VALUES ('15968165113694372', '台湾往来大陆通行证', '343214321412433214', '遗体ioy', '女', '48', '生产、运输设备操作人员及有关人员');
INSERT INTO `user` VALUES ('15968165371931786', '港澳居民通行证', '65765887989090909', '垂直发射的', '女', '35', '不便分类的其他从业人员');
INSERT INTO `user` VALUES ('15968941217553030', '身份证', '34354657665768768', '撒撒到', '男', '22', '军人');
INSERT INTO `user` VALUES ('15968943937844616', '身份证', '4454534436565756', '出手大', '女', '31', '不便分类的其他从业人员');
INSERT INTO `user` VALUES ('15968944123869023', '护照', '43225465457657', 'VCD法国', '女', '39', '农、林、牧、渔、水利业生产人员');
INSERT INTO `user` VALUES ('15968953962316864', '身份证', '342354325', '房东是个大帅哥', '女', '33', '商业、服务业人员');
INSERT INTO `user` VALUES ('15968954638794962', '身份证', '343343554654', '撒撒旦', '女', '29', '生产、运输设备操作人员及有关人员');

SET FOREIGN_KEY_CHECKS = 1;

后台开发环境搭建

创建一个maven项目ssm_project,增加web支持，导入依赖

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>org.example</groupId>
    <artifactId>ssm</artifactId>
    <version>1.0-SNAPSHOT</version>
    <dependencies>
        <dependency>
            <groupId>org.slf4j</groupId>
            <artifactId>slf4j-api</artifactId>
            <version>1.7.12</version>
        </dependency>
        <dependency>
            <groupId>ch.qos.logback</groupId>
            <artifactId>logback-core</artifactId>
            <version>1.1.1</version>
            <scope>provided</scope>
        </dependency>
        <!--实现slf4j接口并整合-->
        <dependency>
            <groupId>ch.qos.logback</groupId>
            <artifactId>logback-classic</artifactId>
            <version>1.1.1</version>
            <scope>provided</scope>
        </dependency>

        <!--Junit-->
        <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
            <version>4.12</version>
        </dependency>
        <!--数据库驱动-->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>5.1.47</version>
        </dependency>
        <!--druid==>阿里巴巴数据库连接池-->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid</artifactId>
            <version>1.0.25</version>
        </dependency>

        <!--Servlet - JSP -->
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>servlet-api</artifactId>
            <version>2.5</version>
        </dependency>
        <dependency>
            <groupId>javax.servlet.jsp</groupId>
            <artifactId>jsp-api</artifactId>
            <version>2.2</version>
        </dependency>
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>jstl</artifactId>
            <version>1.2</version>
        </dependency>

        <!--json-->
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-databind</artifactId>
            <version>2.9.3</version>
        </dependency>

        <!--Mybatis-->
        <dependency>
            <groupId>org.mybatis</groupId>
            <artifactId>mybatis</artifactId>
            <version>3.5.2</version>
        </dependency>
        <dependency>
            <groupId>org.mybatis</groupId>
            <artifactId>mybatis-spring</artifactId>
            <version>2.0.2</version>
        </dependency>

        <!--Spring核心-->
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-webmvc</artifactId>
            <version>5.1.10.RELEASE</version>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-jdbc</artifactId>
            <version>5.1.10.RELEASE</version>
        </dependency>
        <!--Spring单元测试-->
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-test</artifactId>
            <version>4.3.14.RELEASE</version>
        </dependency>

        <!--Aop要导入的包-->
        <dependency>
            <groupId>org.aspectj</groupId>
            <artifactId>aspectjweaver</artifactId>
            <version>1.9.4</version>
        </dependency>

        <!--lombok-->
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <version>1.16.18</version>
        </dependency>
    </dependencies>

    <!--2.maven静态资源过滤-->
    <build>
        <resources>
            <resource>
                <directory>src/main/java</directory>
                <includes>
                    <include>**/*.properties</include>
                    <include>**/*.xml</include>
                </includes>
                <filtering>false</filtering>
            </resource>
            <resource>
                <directory>src/main/resources</directory>
                <includes>
                    <include>**/*.properties</include>
                    <include>**/*.xml</include>
                </includes>
                <filtering>false</filtering>
            </resource>
        </resources>
    </build>

</project>

配置文件:
mybatis配置文件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="cacheEnabled" value="true"/>
        <!-- 标准日志 -->
        <setting name="logImpl" value="STDOUT_LOGGING"/>
        <!--开启驼峰命名规则自动转换-->
        <setting name="mapUnderscoreToCamelCase" value="true" />
    </settings>

    <!--别名-->
    <typeAliases>
        <package name="com.kuang.pojo"/>
    </typeAliases>

</configuration>

spring配置文件applicationContext.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:aop="http://www.springframework.org/schema/aop"
       xmlns:tx="http://www.springframework.org/schema/tx"
       xsi:schemaLocation="http://www.springframework.org/schema/beans
       http://www.springframework.org/schema/beans/spring-beans.xsd
       http://www.springframework.org/schema/aop
       https://www.springframework.org/schema/aop/spring-aop.xsd
       http://www.springframework.org/schema/tx
       https://www.springframework.org/schema/tx/spring-tx.xsd
       http://www.springframework.org/schema/context
       https://www.springframework.org/schema/context/spring-context.xsd">

    <!--spring-dao-->
    <!--1.关联数据库文件-->
    <context:property-placeholder location="classpath:database.properties"/>

    <!--2.配置数据源-->
    <!--数据库连接池 druid-->
    <bean id="dataSource" class="com.alibaba.druid.pool.DruidDataSource">
        <property name="driverClassName" value="${jdbc.driver}"/>
        <property name="url" value="${jdbc.url}"/>
        <property name="username" value="${jdbc.username}"/>
        <property name="password" value="${jdbc.password}"/>
    </bean>

    <!--3.配置SqlsessionFactory对象-->
    <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
        <!--注入数据源-->
        <property name="dataSource" ref="dataSource"/>
        <!--配置Mybatis全局配置文件-->
        <property name="configLocation" value="classpath:mybatis-config.xml"/>
        <!--配置映射文件-->
        <property name="mapperLocations" value="classpath:com/kuang/dao/*.xml"/>
    </bean>

    <!--4.配置扫描Dao接口包，动态实现Dao接口注入到Spring容器中-->
    <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
        <!--注入sqlSessionFactory,可省?一套dataSource可省，多套不可省！-->
        <property name="sqlSessionFactoryBeanName" value="sqlSessionFactory"/>
        <!--给出需要扫描的Dao接口包-->
        <property name="basePackage" value="com.kuang.dao"/>
    </bean>

    <!--spring-service-->
    <!--1.扫描service层的注解-->
    <context:component-scan base-package="com.kuang.service"/>

    <!--声明式事务-->
    <!--2.配置事务管理器-->
    <bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
        <property name="dataSource" ref="dataSource" />
    </bean>

    <tx:advice id="txManager" transaction-manager="transactionManager">
        <tx:attributes>
            <tx:method name="get*" read-only="true"/>
            <tx:method name="query*" read-only="true"/>
            <tx:method name="search*" read-only="true"/>
            <tx:method name="select*" read-only="true"/>
            <tx:method name="find*" read-only="true"/>
            <tx:method name="*"  isolation="DEFAULT" propagation="REQUIRED"/>
        </tx:attributes>
    </tx:advice>

    <aop:config>
        <!--配置aop织入事务-->
        <aop:pointcut id="pointcut" expression="execution(* com.kuang.dao.*.*(..))"/>
        <aop:advisor advice-ref="txManager" pointcut-ref="pointcut"/>
    </aop:config>

    <import resource="applicationContext-mvc.xml"/>
</beans>

database.properties

jdbc.driver=com.mysql.jdbc.Driver
jdbc.url=jdbc:mysql://localhost:3306/ssm_vue?useSSL=true&useUnicode=true&characterEncoding=utf8
jdbc.username=root
jdbc.password=123456

springmvc配置文件applicationContext-mvc.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
   https://www.springframework.org/schema/mvc/spring-mvc.xsd">

    <!--1.开启SpringMVC注解驱动-->
    <mvc:annotation-driven/>

    <!--2.静态资源过滤-->
    <mvc:default-servlet-handler/>

    <!--3.配置视图解析器-->
    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <property name="prefix" value="/WEB-INF/jsp/"/>
        <property name="suffix" value=".jsp"/>
    </bean>

    <!--4.扫描controller层的注解-->
    <context:component-scan base-package="com.kuang.controller"/>

</beans>

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_4_0.xsd"
         version="4.0">

    <!--配置DispatcherServlet-->
    <servlet>
        <servlet-name>springmvc</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <init-param>
            <param-name>contextConfigLocation</param-name>
            <param-value>classpath:applicationContext.xml</param-value>
        </init-param>
        <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>springmvc</servlet-name>
        <url-pattern>/</url-pattern>
    </servlet-mapping>

    <!--配置字符编码过滤器-->
    <filter>
        <filter-name>encoding</filter-name>
        <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
        <init-param>
            <param-name>encoding</param-name>
            <param-value>utf-8</param-value>
        </init-param>
    </filter>
    <filter-mapping>
        <filter-name>encoding</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>

    <!--Session过期时间-->
    <session-config>
        <session-timeout>15</session-timeout>
    </session-config>

</web-app>

代码编写：
实体类User.java

@Data
@AllArgsConstructor
@NoArgsConstructor
public class User implements Serializable {
    
    
    private String userId;//用户id
    private String cardType;//证件类型
    private String cardNo;//证件号码
    private String userName;//用户姓名
    private String userSex;//用户性别
    private String userAge;//用户年龄
    private String userRole;//用户角色
}

UserMapper接口

public interface UserMapper {
    
    

    /**
     * 分页查询 User
     * @param startRows 起始页
     * @return List<User>
     */
    List<User> queryUserPage(int startRows);

    /**
     * 分页查询 User 带条件
     * @param userName
     * @param userSex
     * @param startRows
     * @return
     */
    List<User> selectUserPage(@Param("userName")String userName, @Param("userSex")String userSex, @Param("startRows")int startRows);

    /**
     * 查询 User 个数
     * @param userName
     * @param userSex
     * @return
     */
    int getRowCount(@Param("userName")String userName, @Param("userSex")String userSex);

    /**
     * 添加 User
     * @param user
     * @return 返回码
     */
    int createUser(User user);

    /**
     * 根据 userId 删除用户
     * @return 返回码
     */
    int deleteUserById(String userId);

    /**
     * 根据 userId 批量删除用户
     * @param userIds
     * @return
     */
    int deleteUserByIdList(@Param("list") List userIds);

    /**
     * 根据 userId 更新用户
     * @return 返回码
     */
    int updateUserById(User user);

}

UserMapper.xml

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

	<!--二级缓存-->
    <cache/>

    <sql id="Base_Column_List" >
        user_id, card_type, card_no, user_name, user_sex, user_age, user_role
    </sql>

    <select id="queryUserPage" parameterType="int" resultType="User">
        select
            <include refid="Base_Column_List"/>
        from user
            limit #{startRows,jdbcType=INTEGER},5;
    </select>
    
    
    <select id="selectUserPage" resultType="user">
        select
            <include refid="Base_Column_List"/>
        from user
        <where>
            <if test="userName != null and userName != ''">
                user_name like #{userName}
            </if>
            <if test="userSex != null and userSex != ''">
                and user_sex =#{userSex}
            </if>
        </where>
        order by user_id  desc
        limit #{startRows},5;
    </select>

    <select id="getRowCount" resultType="int">
        select count(*) from user
        <where>
            <if test="userName !=null and userName != ''">
                user_name like concat('%',#{userName},'%')
            </if>
            <if test="userSex != null and userSex != ''">
                and user_sex =#{userSex}
            </if>
        </where>
    </select>

    <insert id="createUser" parameterType="user">
        insert into user(user_id, card_type, card_no, user_name, user_sex, user_age, user_role)
        values (#{userId}, #{cardType}, #{cardNo}, #{userName}, #{userSex}, #{userAge}, #{userRole});
    </insert>

    <delete id="deleteUserById" parameterType="java.lang.String">
        delete from user where user_id = #{userId};
    </delete>

    <delete id="deleteUserByIdList" parameterType="java.util.List">
        delete from user
        <where>
            <foreach collection="list" item="userID" open="(" close=")" separator="or">
            user_id = #{userID}
            </foreach>
        </where>
    </delete>
    
    <update id="updateUserById" parameterType="user">
        update user
        <set>
            <if test="cardNo != null" >
                card_no = #{cardNo,jdbcType=VARCHAR},
            </if>
            <if test="cardType != null" >
                card_type = #{cardType,jdbcType=VARCHAR},
            </if>
            <if test="userName != null" >
                user_name = #{userName,jdbcType=VARCHAR},
            </if>
            <if test="userSex != null" >
                user_sex = #{userSex,jdbcType=VARCHAR},
            </if>
            <if test="userAge != null" >
                user_age = #{userAge,jdbcType=VARCHAR},
            </if>
            <if test="userRole != null" >
                user_role = #{userRole,jdbcType=VARCHAR}
            </if>
        </set>
        where 1 = 1
        and user_id = #{userId,jdbcType=VARCHAR}
    </update>

</mapper>

UserService接口

public interface UserService {
    
    
    /**
     * 分页查询 User
     * @param startRows 起始页
     * @return List<User>
     */
    List<User> queryUserPage(int startRows);

    /**
     * 分页查询 User 带条件
     * @param userName
     * @param userSex
     * @param startRows
     * @return
     */
    List<User> selectUserPage(String userName, String userSex, int startRows);

    /**
     * 查询 User 个数
     * @param userName
     * @param userSex
     * @return
     */
    int getRowCount(String userName, String userSex);

    /**
     * 添加 User
     * @param user
     * @return 返回码
     */
    int createUser(User user);

    /**
     * 根据 userId 删除用户
     * @return 返回码
     */
    int deleteUserById(String userId);

    /**
     * 根据 userId 批量删除用户
     * @param userIds
     * @return
     */
    int deleteUserByIdList(List userIds);

    /**
     * 根据 userId 更新用户
     * @return 返回码
     */
    int updateUserById(User user);
}

UserServiceImpl.java

@Service
public class UserServiceImpl implements UserService{
    
    

    @Autowired
    private UserMapper userMapper;


    public List<User> queryUserPage(int startRows) {
    
    
        return userMapper.queryUserPage(startRows);
    }

    public List<User> selectUserPage(String userName, String userSex, int startRows) {
    
    
        if (userName!=null && userName !=""){
    
    
            userName = "%" + userName +"%";
        }
        return userMapper.selectUserPage(userName,userSex,startRows);
    }

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

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

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

    public int deleteUserByIdList(List userIds) {
    
    
        return userMapper.deleteUserByIdList(userIds);
    }

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

UserController.java

@RestController
@RequestMapping("/user")
public class UserController {
    
    

    @Autowired
    @Qualifier("userServiceImpl")
    private UserService userServiceImpl;

    /**
     * 分页查询所有用户
     * @param page 页码
     * @return
     */
    @RequestMapping("/queryUserPage")
    public List<User> queryUserPage(Integer page){
    
    
        int pageNow = page == null ? 1 :page;
        int pageSize = 5;
        int startRows = (pageNow-1)*pageSize;
        List<User> userList = userServiceImpl.queryUserPage(startRows);
        System.out.println(userList);
        return userList;
    }

    /**
     * 根据条件分页查用户
     * @param userName 用户名
     * @param userSex 用户性别
     * @param page 页码
     * @return
     */
    @RequestMapping("/selectUserPage")
    public List<User> selectUserPage(String userName, String userSex, Integer page){
    
    
        int pageNow = page == null ? 1 :page;
        int pageSize = 5;
        int startRows = (pageNow-1)*pageSize;
        List<User> userList = userServiceImpl.selectUserPage(userName, userSex, startRows);
        System.out.println(userList);
        return  userList;
    }

    /**
     * 查询 User 个数
     * @param userName 用户名
     * @param userSex 性别
     * @return
     */
    @RequestMapping("/getRowCount")
    public int getRowCount(String userName, String userSex){
    
    
        int total = userServiceImpl.getRowCount(userName, userSex);
        System.out.println(total);
        return total;
    }

    /**
     * 添加 User
     * @param user 一个用户信息
     * @return 返回码
     */
    @RequestMapping("/createUser")
    public int createUser(User user){
    
    
        Random random = new Random();
        Integer number = random.nextInt(9000) + 1000;
        user.setUserId(System.currentTimeMillis() + String.valueOf(number));
        return userServiceImpl.createUser(user);
    }

    /**
     * 根据 userId 删除用户
     * @return 返回码
     */
    @RequestMapping("/deleteUserById")
    public int deleteUserById(String userId){
    
    
        return userServiceImpl.deleteUserById(userId);
    }

    /**
     * 根据 userId 批量删除用户
     * @param userIdList userId列表
     * @return
     */
    @RequestMapping("/deleteUserByIdList")
    public int deleteUserByIdList(String userIdList){
    
    
        String userIdListSub = userIdList.substring(0, userIdList.length()-1);

        List userIds = new ArrayList();
        for (String userIdStr: userIdListSub.split(",")){
    
    
            userIds.add(userIdStr.trim());
        }
        return userServiceImpl.deleteUserByIdList(userIds);
    }

    /**
     * 根据 userId 更新用户
     * @return 返回码
     */
    @RequestMapping("/updateUserById")
    public int updateUserById(User user){
    
    
        return userServiceImpl.updateUserById(user);
    }
}

项目结构图：
在这里插入图片描述
问题：Caused by: java.lang.NoClassDefFoundError: com/fasterxml/jackson/databind/exc/InvalidDefinitionException
解决：jackson-databind版本太低，提升版本–>2.9.3

前台开发环境搭建

cd D:\Program Files\JetBrains\workspace\ssm-vue

vue init webpack vue_project

cd vue_project

npm i element-ui -S

npm install

cnpm install --save vue-axios

cnpm install sass-loader node-sass --save-dev

npm run dev

浏览器中能打开证明环境搭建完成。
main.js

import Vue from 'vue';
import App from './App';
import router from './router';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import qs from 'qs';
import axios from "axios";


Vue.config.productionTip = false;
Vue.use(ElementUI);
Vue.prototype.axios = axios;
Vue.prototype.qs = qs;

/* eslint-disable no-new */
new Vue({
    
    
  el: '#app',
  router,
  components: {
    
     App },
  template: '<App/>'
})

App.vue

<template>
  <div id="app">
    <el-row type="flex" justify="center">
      <el-col :xs="24" :sm="22" :md="20" :lg="20" :xl="18">
        <router-view/>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
     
     
  name: 'App'
}
</script>

<style>
#app {
     
     
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

.el-table th.gutter {
     
     
  display: table-cell !important;
}
</style>

/router/index.js

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

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

UserHome.vue
element-ui官方文档：https://element.eleme.cn/#/zh-CN/component/installation

<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="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>
export default {
     
     
  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({
     
     
        page:this.currentPage,
        userName:this.formInline.search1,
        userSex:this.formInline.search2
      });
      this.axios({
     
     
        method:'post',
        url:'/user/selectUserPage',
        data:postData
      }).then(response=>{
     
     
        this.tableData=response.data;
      }).catch(error=>{
     
     
        console.log(error);
      })
    },

    /**
     * 统计用户个数
     */
    getRowCount() {
     
     
      let postData=this.qs.stringify({
     
     
        userName:this.formInline.search1,
        userSex:this.formInline.search2
      });
      this.axios({
     
     
        method:'post',
        url:'/user/getRowCount',
        data:postData
      }).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:'/user/createUser',
        data:postData
      }).then(response=>{
     
     
        this.handlePageChange();
        this.getRowCount();
        this.$message({
     
     
          type: 'success',
          message: '已添加!'
        });
        this.emptyUserData();
      }).catch(error=>{
     
     
        console.log(error);
      })
    },

    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) {
     
     
      //console.log(index, row);
      this.$confirm('删除操作, 是否继续?', '提示', {
     
     
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
     
     
        let postData = this.qs.stringify({
     
     
          userId: row.userId,
        });
        this.axios({
     
     
          method: 'post',
          url: '/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: '/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: '/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);
      });
    }
  },

}
</script>
<style scoped>
</style>

/config/index.js
配置跨域访问

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

const path = require('path')

module.exports = {
    
    
  dev: {
    
    

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
    
    
      '/': {
    
    
        target: 'http://localhost:8080',
        changeOrigin: true,//允许跨域
        pathRewrite: {
    
    
          '^/': '/'
        }
      },
      '/ws/*': {
    
    
        target: 'ws://127.0.0.1:8080',
        ws: true
      }
    },

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

    // Use Eslint Loader?
    // If true, your code will be linted during bundling and
    // linting errors and warnings will be shown in the console.
    useEslint: true,
    // If true, eslint errors and warnings will also be shown in the error overlay
    // in the browser.
    showEslintErrorsInOverlay: false,

    /**
     * Source Maps
     */

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

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

    cssSourceMap: true
  },

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

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

    /**
     * Source Maps
     */

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

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

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

项目结构图
在这里插入图片描述
效果图：

总结：
后端

包的版本容易引发错误
复习了SSM的整合，练习了简答的增删改查

前端

element-ui不熟，看官方文档大致知道是什么意思，需要多写
vue学完缺乏系统，发蒙
学会了跨域请求

在原文基础上进行了优化。
原文参考： https://blog.csdn.net/jianyuwuyi/article/details/107924066.