目录:
- 一、效果图:
- 二、实现步骤:
- 三、后端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.后端:
- 创建数据库。
- 新建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文件添加依赖:
<?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</version>
<packaging>war</packaging>
<!-- 集中定义依赖版本号 -->
<properties>
<!--单元测试的依赖-->
<junit.version>4.12</junit.version>
<!--spring相关依赖-->
<spring.version>5.2.5.RELEASE</spring.version>
<!--mybatis相关依赖-->
<mybatis.version>3.5.1</mybatis.version>
<!--mybatis与spring整合的依赖-->
<mybatis.spring.version>1.3.1</mybatis.spring.version>
<!--mybatis支持的分页插件的依赖-->
<mybatis.paginator.version>1.2.15</mybatis.paginator.version>
<!--mysql连接java依赖-->
<mysql.version>8.0.26</mysql.version>
<!--日志依赖-->
<slf4j.version>1.6.4</slf4j.version>
<!--阿里巴巴的德鲁伊连接池依赖-->
<druid.version>1.1.12</druid.version>
<!--分页插件依赖-->
<pagehelper.version>5.1.2</pagehelper.version>
<!--jstl标签库-->
<jstl.version>1.2</jstl.version>
<!--servlet依赖-->
<servlet-api.version>3.0.1</servlet-api.version>
<!--jsp的依赖-->
<jsp-api.version>2.0</jsp-api.version>
<!--springmvc默认进行依赖转化的工具-->
<jackson.version>2.9.6</jackson.version>
</properties>
<dependencies>
<!--spring-->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-context</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-beans</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-webmvc</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-jdbc</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-aspects</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-jms</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-context-support</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-test</artifactId>
<version>5.2.5.RELEASE</version>
</dependency>
<!--Mybatis-->
<dependency>
<groupId>org.mybatis</groupId>
<artifactId>mybatis</artifactId>
<version>${mybatis.version}</version>
</dependency>
<dependency>
<groupId>org.mybatis</groupId>
<artifactId>mybatis-spring</artifactId>
<version>${mybatis.spring.version}</version>
</dependency>
<dependency>
<groupId>com.github.miemiedev</groupId>
<artifactId>mybatis-paginator</artifactId>
<version>${mybatis.paginator.version}</version>
</dependency>
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper</artifactId>
<version>${pagehelper.version}</version>
</dependency>
<!--MySql-->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>${mysql.version}</version>
</dependency>
<!--连接池-->
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>druid</artifactId>
<version>${druid.version}</version>
</dependency>
<!--junit-->
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>${junit.version}</version>
<scope>test</scope>
</dependency>
<!--JSP相关-->
<dependency>
<groupId>jstl</groupId>
<artifactId>jstl</artifactId>
<version>${jstl.version}</version>
</dependency>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
<version>3.0.1</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>jsp-api</artifactId>
<scope>provided</scope>
<version>${jsp-api.version}</version>
</dependency>
<!--Jackson Json处理工具包-->
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>${jackson.version}</version>
</dependency>
<dependency>
<groupId>org.json</groupId>
<artifactId>json</artifactId>
<version>20140107</version>
</dependency>
<!--文件异步上传使用的依赖-->
<dependency>
<groupId>commons-io</groupId>
<artifactId>commons-io</artifactId>
<version>2.4</version>
</dependency>
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.3.1</version>
</dependency>
<!-- https://mvnrepository.com/artifact/org.slf4j/slf4j-api -->
<dependency>
<groupId>org.slf4j</groupId>
<artifactId>slf4j-api</artifactId>
<version>2.0.3</version>
</dependency>
<!-- https://mvnrepository.com/artifact/org.slf4j/slf4j-simple -->
<dependency>
<groupId>org.slf4j</groupId>
<artifactId>slf4j-simple</artifactId>
<version>2.0.3</version>
<scope>test</scope>
</dependency>
</dependencies>
<!-- 插件配置 -->
<build>
<plugins>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-compiler-plugin</artifactId>
<configuration>
<!--指定JDK版本和字符编码-->
<!--等同于:
<properties>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<maven.compiler.source>1.8</maven.compiler.source>
<maven.compiler.target>1.8</maven.compiler.target>
</properties>
-->
<source>1.8</source>
<target>1.8</target>
<encoding>UTF-8</encoding>
</configuration>
</plugin>
</plugins>
<!--识别所有的配置文件-->
<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>
(3)添加properties属性配置文件:
jdbc.driverClassName=com.mysql.cj.jdbc.Driver
jdbc.url=jdbc:mysql://localhost:3306/123
jdbc.username=账号
jdbc.password=密码
(4)SqlMapConfig.xml(Mybatis核心配置文件):
<?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="logImpl" value="STDOUT_LOGGING"/>
</settings>
<!--其他核心功能在spring配置文件中进行配置了-->
</configuration>
(5)applicationContext_mapper.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"
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>
<!--配置SqlSessionFactoryBean-->
<bean class="org.mybatis.spring.SqlSessionFactoryBean">
<!--配置数据源-->
<property name="dataSource" ref="dataSource"/>
<!--配置SqlMapConfig.xml核心配置文件-->
<property name="configLocation" value="classpath:SqlMapConfig.xml"/>
<!--实体类注册别名-->
<property name="typeAliasesPackage" value="com.user.pojo"/>
</bean>
<!--注册mapper.xml文件-->
<bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
<property name="basePackage" value="com.user.mapper"/>
</bean>
</beans>
(6)applicationContext_service.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: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>
(7)spirngmvc.xml文件(Springmvc核心配置文件):
<?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 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>
(8) web.xml文件设置中文编码,注册spirngmvc框架、Spring框架:
<?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">
<!--添加中文编码过滤器-->
<filter>
<filter-name>encode</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>
<init-param>
<param-name>forceRequestEncoding</param-name>
<param-value>true</param-value>
</init-param>
<init-param>
<param-name>forceResponseEncoding</param-name>
<param-value>true</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>encode</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
<!--注册springmvc框架-->
<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:springmvc.xml</param-value>
</init-param>
</servlet>
<servlet-mapping>
<servlet-name>springmvc</servlet-name>
<url-pattern>/</url-pattern>
</servlet-mapping>
<!--注册spring框架,启动spring容器-->
<listener>
<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
</listener>
<context-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath:applicationContext_*.xml</param-value>
</context-param>
</web-app>
(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;
}
}
(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);
}
(11)新建UserMapper.xml实现接口中所有功能:
<?xml version="1.0" encoding="UTF-8" ?>
<!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,将查询字段定义为常量,方便调用-->
<sql id="allColumns">user_id,card_type,card_no,user_name,user_sex,user_age,user_role</sql>
<!--selectUserPage-->
<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>
<!--createUser-->
<insert id="createUser" parameterType="user">
insert into user values (#{userId},#{cardType},#{cardNo},#{userName},#{userSex},#{userAge},#{userRole})
</insert>
<!--deleteUserById-->
<delete id="deleteUserById" parameterType="String">
delete from user where user_id = #{userId}
</delete>
<!--getRowCount-->
<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>
<!--updateUserById-->
<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>
(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);
}
(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);
}
}
(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);
}
}
(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);
}
}
四、前端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><!--点击后显示dialogAdd对话框-->
</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>
<!--分页
page-size:每页显示行数
total:总行数
current-change:当前页面数据发生改变时调用handlePageChange方法
-->
<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>