可视化项目案例
一、 需求分析与环境搭建
1.1 需求分析
1.1.1 需求分析
用户登录
首页的原型
用户模块
招聘市场图表统计
1.1.2 项目技术栈
1.1.3 数据数据库设计
1.用户表user的描述
后台用户表信息
CREATE TABLE `user`(
id INT PRIMARY KEY AUTO_INCREMENT COMMENT '主键',
username VARCHAR(50) NOT NULL COMMENT '用户名',
PASSWORD VARCHAR(50) NOT NULL COMMENT '密码',
email VARCHAR(50) NOT NULL UNIQUE COMMENT '邮件',
phone VARCHAR(20) DEFAULT NULL COMMENT '电话',
create_time DATETIME,
update_time DATETIME
);
2.职位信息表 position_info_v2
描述职位及公司信息
CREATE TABLE `position_info_v2` (
`id` int(11) NOT NULL AUTO_INCREMENT COMMENT '主键',
`company_id` int(11) DEFAULT NULL COMMENT '公司id',
`company_code` varchar(100) DEFAULT NULL COMMENT '公司code',
`company_jc` varchar(100) DEFAULT NULL COMMENT '公司简称',
`position_name` varchar(50) DEFAULT NULL COMMENT '职位名称',
`position_code` varchar(100) DEFAULT NULL COMMENT '职位ID',
`position_city` varchar(20) DEFAULT NULL COMMENT '职位城市',
`position_salary` varchar(20) DEFAULT NULL COMMENT '职位薪资',
`work_year` varchar(20) DEFAULT NULL COMMENT '工作年限',
`edu` varchar(10) DEFAULT NULL COMMENT '学历',
`position_type_name` varchar(20) DEFAULT NULL COMMENT '职位分类名称',
`position_type_code` varchar(50) DEFAULT NULL COMMENT '职位分类code',
`position_boss` varchar(20) DEFAULT NULL COMMENT '职位发布人',
`position_boss_position` varchar(100) DEFAULT NULL COMMENT '职位发布人职位',
`position_update_date` varchar(20) DEFAULT NULL COMMENT '职位更新日期',
`update_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '插入日期',
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=3730164 DEFAULT CHARSET=utf8;
3.职位类型信息表 position_type_info_v2
描述职位类型及公司信息
CREATE TABLE `position_type_info_v2` (
`id` int(11) NOT NULL AUTO_INCREMENT COMMENT '主键',
`position_type_name` varchar(50) DEFAULT NULL COMMENT '职位分类名称',
`position_type_code` varchar(50) DEFAULT NULL COMMENT '职位分类code',
`position_num` int(11) DEFAULT NULL COMMENT '职位分类中职位数量',
`company_id` int(11) DEFAULT NULL COMMENT '公司id',
`company_jc` varchar(100) DEFAULT NULL COMMENT '公司简称',
`company_code` varchar(255) DEFAULT '',
`status` char(5) NOT NULL DEFAULT '0' COMMENT '抓取状态',
`update_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '插入日期',
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=1001818 DEFAULT CHARSET=utf8;
4.省份表 Province
REATE TABLE Province(ProvinceID INT PRIMARY KEY ,NAME VARCHAR(50));
5.城市表 City
CREATE TABLE City(CityID INT PRIMARY KEY ,ProvinceID INT ,NAME VARCHAR(50));
2.环境搭建
1.2.1 工程环境
- 安装配置maven环境
- 配置环境变量
- 配置仓库 1、找到Maven解压目录\conf\settings.xml 2、在setting.xml 文件中找到 localRepository 标签 3、将 < localRepository>/path/to/local/repo</
localRepository>从注释中取出 4、将标签体内容修改为自定义的Maven仓库目录- 在maven的安装目录中 apache-maven-3.2.1/conf/settings.xml 配置本地仓库:
- 配置远程镜像
- IDEA的jdk环境
- lombok插件安装
1.2.2 数据库环境
- 数据库节点位于centos7-1 虚拟节点:
- 修改linux下mysql的配置信息
MySQL根据配置文件会限制Server接受的数据包大小,有时候大的插入和更新会受max_allowed_packet 参数限制,导致大数据写入或者更新失败。
1.查看目前配置
mysql> show VARIABLES like ‘max_allowed_packet’;
#max_allowed_packet的单位为字节:
#转化为Mb,就是1024Mb
2.修改mysql配置文件
可以编辑/etc/my.cnf,在[mysqld]段或者mysql的server配置段进行修改。
max_allowed_packet = 800M
3.重启mysql
- 导入数据
数据表较大,首先创建数据库visualization ,然后导入表信息(使用切割表工具sqldumpsplitter)
1.2.3 项目结构
-
公共基础模块common
存放转换对象
服务器通用返回对象
响应码对象
常量对象 -
控制层controller
存放各个业务逻辑的控制器 -
服务层service
服务接口
服务器实现 -
持久mapper
映射接口 -
模型层model
存放数据模型 -
视图模型vo
view object模型对象 -
工具util
通用工具类
1.2.4 项目框架搭建
1.引入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>com.lagou</groupId>
<artifactId>lg-visualization</artifactId>
<version>1.0-SNAPSHOT</version>
<packaging>war</packaging>
<dependencies>
<!-- 单元测试 -->
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>4.12</version>
</dependency>
<!-- Spring -->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-webmvc</artifactId>
<version>5.0.5.RELEASE</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-jdbc</artifactId>
<version>5.0.5.RELEASE</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-aspects</artifactId>
<version>5.0.5.RELEASE</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-test</artifactId>
<version>5.0.5.RELEASE</version>
</dependency>
<!-- Mybatis -->
<dependency>
<groupId>org.mybatis</groupId>
<artifactId>mybatis</artifactId>
<version>3.2.8</version>
</dependency>
<dependency>
<groupId>org.mybatis</groupId>
<artifactId>mybatis-spring</artifactId>
<version>1.3.0</version>
</dependency>
<!-- MySql -->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>5.1.46</version>
</dependency>
<!--日志包-->
<dependency>
<groupId>org.slf4j</groupId>
<artifactId>slf4j-log4j12</artifactId>
<version>1.6.6</version>
</dependency>
<!-- 连接池 -->
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>druid</artifactId>
<version>1.0.14</version>
</dependency>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
<version>3.1.0</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>javax.servlet.jsp</groupId>
<artifactId>javax.servlet.jsp-api</artifactId>
<version>2.2.1</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-core</artifactId>
<version>2.9.0</version>
</dependency>
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.9.0</version>
</dependency>
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-annotations</artifactId>
<version>2.9.0</version>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<version>1.18.12</version>
</dependency>
<dependency>
<groupId>commons-collections</groupId>
<artifactId>commons-collections</artifactId>
<version>3.2.1</version>
</dependency>
<dependency>
<groupId>org.apache.commons</groupId>
<artifactId>commons-lang3</artifactId>
<version>3.5</version>
</dependency>
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper</artifactId>
<version>5.1.4</version>
</dependency>
</dependencies>
<build>
<plugins>
<!-- 配置Tomcat插件 -->
<plugin>
<groupId>org.apache.tomcat.maven</groupId>
<artifactId>tomcat7-maven-plugin</artifactId>
<version>2.2</version>
<configuration>
<path>/</path>
<port>8080</port>
</configuration>
</plugin>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-compiler-plugin</artifactId>
<version>3.2</version>
<configuration>
<source>1.8</source>
<target>1.8</target>
<encoding>UTF-8</encoding>
</configuration>
</plugin>
</plugins>
</build>
</project>
配置文件的思路
2.spring配置文件
applicationContext-dao.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 http://www.springframework.org/schema/context/spring-context.xsd">
<!--1)加载外部数据库信息 jdbc.properites-->
<context:property-placeholder location="classpath:jdbc.properties"/>
<!--2)数据源的配置 druid-->
<bean id="dataSource" class="com.alibaba.druid.pool.DruidDataSource">
<property name="driverClassName" value="${jdbc.driver}"></property>
<property name="url" value="${jdbc.url}"/>
<property name="username" value="${jdbc.username}"/>
<property name="password" value="${jdbc.password}"/>
</bean>
<!--3)SqlSessionFactoryBean (加载dataSource , 加载mybatis-config.xml)-->
<bean id="sqlSesionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
<!-- 注入连接池 -->
<property name="dataSource" ref="dataSource"/>
<!-- 加载mybatis-config.xml -->
<property name="configLocation" value="classpath:mybatis/mybatis-config.xml"/>
</bean>
<!--4)Mapper包扫描-->
<bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
<!-- 扫描映射文件比如:AccountMapper.xml 加载该文件; 还会扫描接口AccountMapper接口创建代理对象 -->
<property name="basePackage" value="com.lagou.mapper"/>
</bean>
</beans>
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"
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/tx http://www.springframework.org/schema/tx/spring-tx.xsd">
<!--1)包扫描service包-->
<context:component-scan base-package="com.lagou.service"/>
<!--2)注解的事务 (创建平台事务管理器, 创建注解驱动,挂载平台事务管理器)-->
<!-- 创建平台事务管理器 -->
<bean id="transactionMananger" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
<property name="dataSource" ref="dataSource"/>
</bean>
<!-- 创建注解驱动 -->
<tx:annotation-driven transaction-manager="transactionMananger"/>
</beans>
3.连接池配置
jdbc.properties
jdbc.driver=com.mysql.jdbc.Driver
jdbc.url=jdbc:mysql://192.168.80.100:3306/visualization?useUnicode=true&characterEncoding=utf8&autoReconnect=true&allowMultiQueries=true
jdbc.username=root
jdbc.password=root
4.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>
<!-- 1)驼峰命名-->
<settings>
<!-- model中模型对象 userName , 和数据库user_name-->
<setting name="mapUnderscoreToCamelCase" value="true"/>
</settings>
<!-- 2)包扫描别名-->
<typeAliases>
<!-- xxxMapper.xml中 要编写类的完全路径名,如果采用别名方式. 以后再映射文件中不用再写类的完全路径名 -->
<package name="com.lagou.model"/>
<package name="com.lagou.vo"/>
</typeAliases>
<!-- 3)分页插件-->
<plugins>
<plugin interceptor="com.github.pagehelper.PageInterceptor">
<!-- 分页参数合理化-->
<property name="reasonable" value="true"/>
</plugin>
</plugins>
</configuration>
5.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 http://www.springframework.org/schema/context/spring-context.xsd http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc.xsd">
<!--扫描controller包 -->
<context:component-scan base-package="com.lagou.controller"/>
<!--配置3大组件
处理器映射器
处理器适配器
视图解析器
-->
<mvc:annotation-driven />
<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<!--前缀-->
<property name="prefix" value="/WEB-INF/view/"/>
<!--后缀-->
<property name="suffix" value=".jsp"/>
</bean>
</beans>
6.log4j.properties 日志
# Set root category priority to INFO and its only appender to CONSOLE.
#log4j.rootCategory=INFO, CONSOLE debug info warn error fatal
log4j.rootCategory=INFO, CONSOLE, LOGFILE
# Set the enterprise logger category to FATAL and its only appender to CONSOLE.
log4j.logger.org.apache.axis.enterprise=FATAL, CONSOLE
# CONSOLE is set to be a ConsoleAppender using a PatternLayout.
log4j.appender.CONSOLE=org.apache.log4j.ConsoleAppender
log4j.appender.CONSOLE.layout=org.apache.log4j.PatternLayout
log4j.appender.CONSOLE.layout.ConversionPattern=%d{
ISO8601} %-6r [%15.15t] %-5p %30.30c %x - %m\n
# LOGFILE is set to be a File appender using a PatternLayout.
log4j.appender.LOGFILE=org.apache.log4j.FileAppender
log4j.appender.LOGFILE.File=d:/axis.log
log4j.appender.LOGFILE.Append=true
log4j.appender.LOGFILE.layout=org.apache.log4j.PatternLayout
log4j.appender.LOGFILE.layout.ConversionPattern=%d{
ISO8601} %-6r [%15.15t] %-5p %30.30c %x - %m\n
7.UserMapper.xml mybatis映射文件
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.lagou.mapper.UserMapper">
</mapper>
8.配置web.xml
<!DOCTYPE web-app PUBLIC
"-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
"http://java.sun.com/dtd/web-app_2_3.dtd" >
<web-app>
<display-name>Archetype Created Web Application</display-name>
<!-- 配置context参数 -->
<context-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath:spring/applicationContext-*.xml</param-value>
</context-param>
<!--3.处理post中的乱码问题,编写过滤器-->
<filter>
<filter-name>encodingFilter</filter-name>
<filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
<!-- 设置编码为utf-8 -->
<init-param>
<param-name>encodingFilter</param-name>
<param-value>UTF-8</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>encodingFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
<!--1.监听器 加载spring的所有配置文件-->
<listener>
<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
</listener>
<!--2.前端控制器 加载springmvc.xml
1)tomcat启动的时候就运行该DispatcherServlet , 配置启动加载时机
2)加载springmvc.xml
-->
<servlet>
<servlet-name>DispatcherServlet</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<init-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath:springmvc/springmvc.xml</param-value>
</init-param>
<load-on-startup>2</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>DispatcherServlet</servlet-name>
<url-pattern>*.do</url-pattern>
</servlet-mapping>
</web-app>
1.2.5 通用模块编写
com.lagou.common包下面
1.封装服务器返回对象ServerResponse
package com.lagou.common;
import com.fasterxml.jackson.databind.annotation.JsonSerialize;
import java.io.Serializable;
@JsonSerialize(include = JsonSerialize.Inclusion.NON_NULL)
public class ServerResponse<T> implements Serializable {
private int status;
private String msg;
private T data;
//各组合构造方法
private ServerResponse(int status){
this.status = status;
}
private ServerResponse(int status, T data){
this.status = status;
this.data = data;
}
private ServerResponse(int status,String msg, T data){
this.status = status;
this.msg = msg;
this.data = data;
}
private ServerResponse(int status,String msg){
this.status = status;
this.msg = msg;
}
//提供get方法, 后期返回json数据
public int getStatus(){
return status;
}
public T getData(){
return data;
}
public String getMsg(){
return msg;
}
//提供调用私有的构造方法
public static <T> ServerResponse<T> createBySuccessMsg(String msg){
return new ServerResponse<T>(ResponseCode.SUCCESS.getCode(),msg);
}
public static <T> ServerResponse<T> createBySuccessData(T data){
return new ServerResponse<T>(ResponseCode.SUCCESS.getCode(),data);
}
public static <T> ServerResponse<T> createBySuccessMsgData(String msg,T data){
return new ServerResponse<T>(ResponseCode.SUCCESS.getCode(),msg,data);
}
public static <T> ServerResponse<T> createByErrorMsg(String errorMsg){
return new ServerResponse<>(ResponseCode.ERROR.getCode(),errorMsg);
}
}
2.服务器返回状态码
package com.lagou.common;
/***
* 服务器返回状态码
*/
public enum ResponseCode {
SUCCESS(0,"success"),
ERROR(1,"error");
private final int code;
private final String desc;
ResponseCode(int code,String desc){
this.code=code;
this.desc=desc;
}
public int getCode(){
return code;
}
public String getDesc(){
return desc;
}
}
常量对象定义
package com.lagou.common;
public class Const {
public static final String CURRENT_USER="currentUser";
}
1.3.测试后台环境**
1.3.1 测试目标
通过转账案例来测试ssm环境及ServerResponse可以正常返回
1.3.2 测试方式
1)创建account账户表
CREATE DATABASE visualization DEFAULT CHARSET='utf8';
USE visualization;
CREATE TABLE `account`(
username VARCHAR(50) ,
money double
);
insert into account values ('jack',1000);
insert into account values ('rose',1000);
2)编写AccountMapper接口
package com.lagou.mapper;
import org.apache.ibatis.annotations.Param;
public interface AccountMapper {
//转入钱
public void transferIn(@Param("name") String name,@Param("money") double money);
//转出钱
public void transferOut(@Param("name") String name,@Param("money") double money);
}
3)编写AccountMapper.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.lagou.mapper.AccountMapper">
<!-- 转入 -->
<update id="transferIn">
update account set money = money + #{money} where username = #{name}
</update>
<!--转出-->
<update id="transferOut">
update account set money = money - #{money} where username = #{name}
</update>
</mapper>
4)编写AccountService
package com.lagou.service;
public interface IAccountService {
//转账
public int transfer(String inName,String outName,double money);
}
5)编写AccountServiceImpl
package com.lagou.service.impl;
import com.lagou.mapper.AccountMapper;
import com.lagou.service.IAccountService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
@Service
@Transactional //事务控制
public class AccountServiceImpl implements IAccountService {
@Autowired
private AccountMapper accountMapper;
@Override
public int transfer(String inName, String outName, double money) {
try {
//调用转入
accountMapper.transferIn(inName,money);
//调用转出
accountMapper.transferOut(outName,money);
return 0;//0代表成功
}catch (Exception e){
System.out.println(e);
return 1;
}
}
}
6 ) Controller层代码测试类
package com.lagou.controller;
import com.lagou.common.ResponseCode;
import com.lagou.common.ServerResponse;
import com.lagou.service.IAccountService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
@Controller
@RequestMapping("/account")
public class AccountController {
@Autowired
private IAccountService accountService;
@RequestMapping("transfer.do")
@ResponseBody //返回请求对象json
public ServerResponse<String> accountTransfer(String inName, String outName, double money){
int status = accountService.transfer(inName,outName,money);
//如果转账执行成功
if (ResponseCode.SUCCESS.getCode() == status){
return ServerResponse.createBySuccessMsg("转账成功");
}else {
return ServerResponse.createByErrorMsg("转账失败");
}
}
}
- 使用postman测试接口
http://localhost:8080/visualization/account/transfer.action? inName=jack&outName=rose&money=300
二、 前台页面模块
2.1.引入前台静态资源
本项目已经准备好了前台的静态资源. 请将静态资源复制到web-app/view目录下(与web-inf平级)
login.html放在webapp目录下
2.2.导航栏页面配置
1.目标:点击左侧导航栏页面在展示栏中展示信息
2.设计思路:
html中超链接添加onclick方法调用指定方法,传递页面名称
//body部分
<ul id="dashboard_dr" class="collapse collapse-level-1">
<li>
<a class="active-page" href="#" οnclick="goPage('userList')">员工信息</a>
</li>
</ul>
//javascript中编写方法
<script>
//跳转页面的函数
function goPage(t){
var url = t+".html"
$("#if").attr('src', url);
}
</script>
三 、用户模块
3.1.接口说明
3.2.用户表设计
3.3.用户登录
请求参数
响应参数
成功响应数据
失败响应数据
后台实现
UserController
package com.lagou.controller;
import com.lagou.common.Const;
import com.lagou.common.ResponseCode;
import com.lagou.common.ServerResponse;
import com.lagou.model.User;
import com.lagou.service.IUserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.transaction.annotation.Transactional;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import javax.servlet.http.HttpSession;
@Controller
@RequestMapping("/user")
@Transactional
public class UserController {
@Autowired
private IUserService iUserService;
/***
* 用户登录
*/
@RequestMapping(value = "login.do",method = RequestMethod.POST)
@ResponseBody
public ServerResponse<User> login(String username, String password, HttpSession session){
//1.调用serivce的登录方法 ,会返回一个ServerResponse<User>
ServerResponse<User> response = iUserService.login(username,password);
//2.判断是否登录成功,如果登录成功,把当前用户user放到session中
if(response.getStatus() == ResponseCode.SUCCESS.getCode()){
session.setAttribute(Const.CURRENT_USER,response.getData());
}
//3.返回ServerResponse
return response;
}
}
IUserService
package com.lagou.service;
import com.lagou.common.ServerResponse;
import com.lagou.model.User;
public interface IUserService {
/**
* 用户登录
* @param username
* @param password
* @return
*/
public ServerResponse<User> login(String username,String password);
}
UserServiceImpl
package com.lagou.service.impl;
import com.lagou.common.ServerResponse;
import com.lagou.mapper.UserMapper;
import com.lagou.model.User;
import com.lagou.service.IUserService;
import com.lagou.util.MD5Util;
import org.apache.commons.lang3.StringUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
@Service("iUserService")
public class UserServiceImpl implements IUserService {
@Autowired
private UserMapper userMapper;
@Override
public ServerResponse<User> login(String username, String password) {
//1.检查用户名是否存在 (0 用户不存在 1 用户存在)
int resultCount = userMapper.checkUserName(username);
if(resultCount == 0){
return ServerResponse.createByErrorMsg("用户名不存在");
}
//2.使用MD5给密码进行加密
String md5Password = MD5Util.MD5EncodeUtf8(password);
//3.调用mapper的登录方法, 返回一个user对象 , user==null 密码错误
User user= userMapper.selectLogin(username,md5Password);
//4.如果user对象为null 这登录失败 : 密码错误
if(user == null){
return ServerResponse.createByErrorMsg("密码错误");
}
//5.如果user不是null 登录成功,清空密码,StringUtils.EMPTY将密码设置为空
user.setPassword(StringUtils.EMPTY);
//6.封装一个ServerResponse,返回成功信息
return ServerResponse.createBySuccessMsgData("登录成功",user);
}
}
UserMapper
package com.lagou.mapper;
import com.lagou.model.User;
import org.apache.ibatis.annotations.Param;
public interface UserMapper {
/***
* 根据用户名查找用户是否存在
* @param username
* @return
*/
int checkUserName(String username);
/***
* 用户登录
* @Param("username") 与映射文件中#{}进行关联
* @param username
* @param md5Password
* @return
*/
User selectLogin(@Param("username") String username,@Param("password") String md5Password);
}
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.lagou.mapper.UserMapper">
<!--封装一个返回类型为resultMap-->
<resultMap id="resultMap" type="user">
<constructor>
<idArg column="id" jdbcType="INTEGER" javaType="java.lang.Integer" />
<arg column="username" jdbcType="VARCHAR" javaType="string"/>
<arg column="password" jdbcType="VARCHAR" javaType="string"/>
<arg column="email" jdbcType="VARCHAR" javaType="string"/>
<arg column="phone" jdbcType="VARCHAR" javaType="string"/>
<arg column="create_time" jdbcType="TIMESTAMP" javaType="java.util.Date"/>
<arg column="update_time" jdbcType="TIMESTAMP" javaType="java.util.Date"/>
</constructor>
</resultMap>
<!--抽取一个SQL片段-->
<sql id="field">
id,username,password,email,phone,create_time,update_time
</sql>
<!--根据name查询用户是否存在-->
<select id="checkUserName" resultType="int" parameterType="String">
select count(1) from user where username = #{username}
</select>
<!--使用用户名 密码登录-->
<select id="selectLogin" resultMap="resultMap">
/*select id,username,password,email,phone,create_time,update_time*/
select <include refid="field"/>
from user
where username = #{username}
and password = #{password}
</select>
</mapper>
密码MD5加密工具类
package com.lagou.util;
import org.springframework.util.StringUtils;
import java.security.MessageDigest;
public class MD5Util {
private static String byteArrayToHexString(byte b[]) {
StringBuffer resultSb = new StringBuffer();
for (int i = 0; i < b.length; i++)
resultSb.append(byteToHexString(b[i]));
return resultSb.toString();
}
private static String byteToHexString(byte b) {
int n = b;
if (n < 0)
n += 256;
int d1 = n / 16;
int d2 = n % 16;
return hexDigits[d1] + hexDigits[d2];
}
/**
* 返回加密后密码
*/
private static String MD5Encode(String origin, String charsetname) {
String resultString = null;
try {
resultString = new String(origin);
MessageDigest md = MessageDigest.getInstance("MD5");
if (charsetname == null || "".equals(charsetname))
resultString = byteArrayToHexString(md.digest(resultString.getBytes()));
else
resultString = byteArrayToHexString(md.digest(resultString.getBytes(charsetname)));
} catch (Exception exception) {
}
return resultString;
}
public static String MD5EncodeUtf8(String origin) {
// origin = origin + PropertiesUtil.getProperty("password.salt", "");
return MD5Encode(origin, "utf-8");
}
private static final String hexDigits[] = {
"0", "1", "2", "3", "4", "5",
"6", "7", "8", "9", "a", "b", "c", "d", "e", "f"};
}
用户登录页面
localhost:8080/lg_visualization/login.html
异步登录请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Elmer I Fast build Admin dashboard for any platform</title>
<meta name="description" content="Elmer is a Dashboard & Admin Site Responsive Template by hencework." />
<meta name="keywords" content="admin, admin dashboard, admin template, cms, crm, Elmer Admin, Elmeradmin, premium admin templates, responsive admin, sass, panel, software, ui, visualization, web app, application" />
<meta name="author" content="hencework"/>
<!-- Favicon -->
<link rel="shortcut icon" href="favicon.ico">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<!-- vector map CSS -->
<link href="view/vendors/bower_components/jasny-bootstrap/dist/css/jasny-bootstrap.min.css" rel="stylesheet" type="text/css"/>
<!-- Custom CSS -->
<link href="view/dist/css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<!--Preloader-->
<div class="preloader-it">
<div class="la-anim-1"></div>
</div>
<!--/Preloader-->
<div class="wrapper pa-0">
<header class="sp-header">
<div class="sp-logo-wrap pull-left">
<a href="index.html">
<img class="brand-img mr-10" src="view/dist/img/logo.png" alt="brand"/>
<span class="brand-text">LaGou</span>
</a>
</div>
<div class="clearfix"></div>
</header>
<!-- Main Content -->
<div class="page-wrapper pa-0 ma-0 auth-page" id="app">
<div class="container-fluid">
<!-- Row -->
<div class="table-struct full-width full-height">
<div class="table-cell vertical-align-middle auth-form-wrap">
<div class="auth-form ml-auto mr-auto no-float">
<div class="row">
<div class="col-sm-12 col-xs-12">
<div class="mb-30">
<h3 class="text-center txt-dark mb-10">Sign in to LaGou</h3>
<h6 class="text-center nonecase-font txt-grey">Enter your details below</h6>
</div>
<div class="form-wrap">
<form action="#">
<div class="form-group">
<label class="control-label mb-10" for="uname">User Account</label>
<input type="text" class="form-control" required="" id="uname" name="username" placeholder="Enter username">
</div>
<div class="form-group">
<label class="pull-left control-label mb-10" for="pwd">Password</label>
<input type="password" class="form-control" required="" id="pwd" name="password" placeholder="Enter pwd">
</div>
<div class="form-group">
<span id="errMsg">111</span>
</div>
<div class="form-group text-center">
<button type="button" id="btn" class="btn btn-primary btn-rounded">sign in</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /Row -->
</div>
</div>
<!-- /Main Content -->
</div>
<!-- /#wrapper -->
<!-- jQuery -->
<script src="view/vendors/bower_components/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="view/vendors/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="view/vendors/bower_components/jasny-bootstrap/dist/js/jasny-bootstrap.min.js"></script>
<!-- Slimscroll JavaScript -->
<script src="view/dist/js/jquery.slimscroll.js"></script>
<!-- Init JavaScript -->
<script src="view/dist/js/init.js"></script>
<script>
//发送异步请求,完成登录
$(function(){
//1.给btn按钮派发一个单击事件
$("#btn").click(function(){
//2.获取用户名
var username = $("#uname").val();
//3.获取密码
var pwd = $("#pwd").val();
//4.发送post方式的ajax请求
$.post("/lg_visualization/user/login.do","username="+username+"&password="+pwd,function(data){
//5.判断用户是否登录成功
if(data.status ==0){
location.href = "view/index.html";
}else{
$("#errMsg").html(data.msg)
}
},"json")
})
//清除每次用户输入的用户名和密码
$("#uname").val("");
$("#pwd").val("");
})
</script>
</body>
</html>
登录成功跳转到index.html首页面
3.4 用户分页
3.4.1 用户列表分页接口设计
3.4.2 分页前台页面
1)点击员工信息分页展示查询到的用户数据
后端代码实现
UserController
添加分页查找方法
/**
* 2.分页查找
*/
@RequestMapping(value = "list.do",method = RequestMethod.POST)
@ResponseBody
public ServerResponse<PageInfo> list(@RequestParam(value = "pageNum",defaultValue = "1") int pageNum,
@RequestParam(value = "pageSize",defaultValue = "10") int pageSize){
ServerResponse<PageInfo> users = iUserService.getUsers(pageNum,pageSize);
return users;
}
IUserService
ServerResponse<PageInfo> getUsers(int pageNum, int pageSize);
UserServiceImpl
/**
* 分页查询user
* @param pageNum
* @param pageSize
* @return
*/
@Override
public ServerResponse<PageInfo> getUsers(int pageNum, int pageSize) {
//1.给PageHelper分页助手设置 pageNum pageSize
PageHelper.startPage(pageNum,pageSize);
//2.查询所有用户信息
List<User> list = userMapper.userList();
//3.创建pgeInfo对象,把查询到的用户list放到pageInfo中
PageInfo pageInfo = new PageInfo(list);
//4.返回serverResponse,添加pgeInfo
return ServerResponse.createBySuccessData(pageInfo);
}
UserMapper
List<User> userList();
UserMapper.xml
<!-- 2.抽取一个sql片段 -->
<sql id="field">
id , username,password ,email ,phone ,create_time,update_time
</sql>
<!-- 5.查询所有用户信息 -->
<select id="userList" resultType="user">
select <include refid="field"/> from user order by id asc
</select>
测试结果
3.4.2 分页前台页面
1)点击员工信息分页展示查询到的用户数据
2) userList.html 引入bootstrap前台分页插件
<!--分页插件-->
<nav>
<ul class="pagination">
<li>
<a href="#" aria-label="Previous" onclick="left()">
<span aria-hidden="true">«</span>
</a>
</li>
<!-- <li class="active"><a href="#">1</a></li>-->
<!--<li><a href="#">2</a></li>-->
<!--<li><a href="#">3</a></li>-->
<li>
<a href="#" aria-label="Next" onclick="right()">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
<!-- 分页插件结束 -->
userList页面 操作按钮 参考代码
<a href='javascript:void(0)' class='text-inverse pr-10' title='Edit' data-toggle='tooltip'><i class=\"zmdi zmdi-edit txt-warning\"></i></a>
<a href='javascript:void(0)' class='text-inverse' title='Delete' data-toggle='tooltip' onclick='delById(this,"+list[i].id+")'><i class='zmdi zmdi-delete txt-danger'></i></a>
3)编写分页前端代码
<script>
var prePage= 0; //当前页的前一页
var nextPage = 0; //当前页的后一页
var isFirstPage=false; //是否为首页
var isLastPage=false; //是否为尾也
//1.页面加载,调用一个分页查询一页数据的方法
$(function(){
findByPage(1); //页面初始化查询第一页数据.
})
//2.查询后台的数据,动态展示的方法
function findByPage(pageNum){
//每次查询的时候都会生成新的tr li ,所以方法之前要清空这两项
$("tbody tr").remove();
$("li[name='myli']").remove();
//2.1 发送ajax请求,查询后台的数据
$.post("/lg_visualization/user/list.do","pageNum="+pageNum+"&pageSize=10", function(data){
//初始化成员
prePage = data.data.prePage;
nextPage = data.data.nextPage;
isFirstPage = data.data.isFirstPage;
isLastPage = data.data.isLastPage;
//2.2 获取到查询到的一页数据list,循环生成 tr td ,把数据嵌套到tr td, 放到tbody
var list = data.data.list;
//2.3循环查到的一页用户数据
for(var i=0; i<list.length; i++){
var $tr = $("<tr>\n" +
" <th>"+list[i].id+"</th>\n" +
" <th>"+list[i].username+"</th>\n" +
" <th>"+list[i].email+"</th>\n" +
" <th>"+list[i].phone+"</th>\n" +
" <th>"+list[i].createTime+"</th>\n" +
" <th>"+list[i].updateTime+"</th>\n" +
" <th><a href='javascript:void(0)' class='text-inverse pr-10' title='Edit' data-toggle='tooltip'><i class=\"zmdi zmdi-edit txt-warning\"></i></a>" +
"<a href='javascript:void(0)' class='text-inverse' title='Delete' data-toggle='tooltip' οnclick='deleteById("+list[i].id+")'><i class='zmdi zmdi-delete txt-danger'></i></a></th>\n" +
" </tr>");
$("tbody").append($tr);
}
//3.动态生成页码
var totalPage = data.data.pages;
for(var i = 0 ; i < totalPage ; i++){
var $li = $("<li name='myli'><a href='#' οnclick='findByPage("+(i+1)+")'>"+(i+1)+"</a></li>");
//所以要把li标签添加到页面
$("li:last").before($li);
//判断当前页是那一页
if(data.data.pageNum == (i+1)){
$li.prop("class","active");
}
}
} ,"json")
}
//点击向左的方法
function left(){
//1.判断当前页是否为首页,如果是首页,return停止方法
if(isFirstPage){
return;
}
//2.如果不是首页,调用findByPage(前一页)
findByPage(prePage)
}
//点击向右的方法
function right(){
//1.判断当前页是否为尾页,如果是首页,return停止方法
if(isLastPage){
return;
}
//2.如果不是尾页,调用findByPage(后一页)
findByPage(nextPage)
}
</script>
3.5. 添加用户
3.5.1 添加用户接口设计
- 请求方法:post
- 请求接口
localhost:8080/lg_visualization/user/add.do? phone=13200001112&username=jack23&password=jack23&[email protected] - 请求参数
- 响应数据
后台代码实现
UserController
/***
* 添加用户
* @param user
* @return
*/
@RequestMapping(value = "add.do",method = RequestMethod.POST)
@ResponseBody
public ServerResponse<String> add(User user){
return iUserService.add(user);
}
IUserService
ServerResponse<String> add(User user);
UserServiceImpl
/***
* 添加用户
* @param user
* @return
*/
@Override
public ServerResponse<String> add(User user) {
//1.校验用户名是否存在
ServerResponse<String> validResponse = this.checkValid(user.getUsername(), Const.USERNAME);
if(validResponse.getStatus() != ResponseCode.SUCCESS.getCode()){
return validResponse;
}
//2.校验邮箱是否已经存在
validResponse = this.checkValid(user.getEmail(), Const.EMAIL);
if(validResponse.getStatus() != ResponseCode.SUCCESS.getCode()){
return validResponse;
}
//3.使用md5对密码进行加密
user.setPassword(MD5Util.MD5EncodeUtf8(user.getPassword()));
//4.添加数据入库 resultCount==1 插入成功, 如果为0,添加失败
int resultCount = userMapper.insert(user);
if(resultCount ==0 ){
return ServerResponse.createByErrorMsg("添加失败");
}
return ServerResponse.createBySuccessMsg("添加成功");
}
/**
* 校验用户名和邮箱是否存在
* @param str 有可能是用户名,也有可能是邮箱
* @param type 类型可以是用户名 ,也可以是邮箱
* @return
*/
public ServerResponse<String> checkValid(String str,String type){
if(StringUtils.isNotBlank(type)){
//校验用户名
if(Const.USERNAME.equals(type)){
//查询用户名是否存在
int resultCount = userMapper.checkUserName(str);
if(resultCount > 0){
return ServerResponse.createByErrorMsg("用户名已经存在");
}
}
//校验邮箱
if(Const.EMAIL.equals(type)){
int resultCount = userMapper.checkEmail(str);
if(resultCount > 0 ){
return ServerResponse.createByErrorMsg("Email已经存在");
}
}
}
return ServerResponse.createBySuccessMsg("校验成功");
}
Const
javapackage com.lagou.common;
public class Const {
public static final String USERNAME = "username";
public static final String EMAIL ="email";
}
UserMapper
/***
* 查找邮箱是否存在
* @param str
* @return
*/
int checkEmail(String str);
/***
* 添加用户
* @param user
* @return
*/
int insert(User user);
UserMapper.xml
<!--6.根据email查询邮箱是否存在-->
<select id="checkEmail" resultType="int" parameterType="String">
select count(1) from user where email = #{email}
</select>
<!-- 7.添加用户 -->
<insert id="insert" parameterType="user">
insert into user (id,username,password,email ,phone ,create_time,update_time)
values (#{id},#{username},#{password},#{email},#{phone},now(),now())
</insert>
3.5.2 添加用户前台页面
点击添加用户按钮
在userList页面编写aside标签,引入dialog弹出框
<aside class="col-lg-2 col-md-4 pr-0">
<div class="mt-20 mb-20 ml-15 mr-15">
<a href="#myModal" data-toggle="modal" title="Compose"
class="btn btn-success btn-block">
添加用户
</a>
<!-- Modal -->
<div aria-hidden="true" role="dialog" tabindex="-1" id="myModal"
class="modal fade" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×
</button>
<h4 class="modal-title" >添加用户</h4>
</div>
<div class="modal-body">
<form class="form-horizontal form-material" >
<div class="form-group">
<div class="col-md-12 mb-20">
<input type="text" class="form-control"
placeholder="请输入用户名" id="addName" name="username">
</div>
<div class="col-md-12 mb-20">
<input type="password" class="form-control"
placeholder="请输入密码" id="addPwd" name="password">
</div>
<div class="col-md-12 mb-20">
<input type="password" class="form-control"
placeholder="请确认密码" id="addPwd2" >
</div>
<div class="col-md-12 mb-20">
<input type="text" class="form-control"
placeholder="请填写邮箱" id="addEmail" name="email">
</div>
<div class="col-md-12 mb-20">
<input type="text" class="form-control"
placeholder="请填写手机号码" id="addPhone" name="phone">
</div>
<div class="form-group">
<span id="errMsg"></span>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-info waves-effect"
data-dismiss="modal" onclick="save()">保存
</button>
<button type="button" class="btn btn-default waves-effect"
data-dismiss="modal" >取消
</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
</div>
</aside>
编写异步请求发送添加用户的ajax请求
<script>
//添加用户的方法
function save(){
//获取数据
var name = $("#addName").val();
var pwd = $("#addPwd").val();
var pwd2 = $("#addPwd2").val();
var email = $("#addEmail").val();
var phone = $("#addPhone").val();
if(pwd != pwd2){
$("#errMsg").html("两次密码不一致");
}
$.post("/lg_visualization/user/add.do",{
"username":name,"password":pwd,"email":email,"phone":phone},function(data){
if(data.status == 0){
alert("添加成功");
location.reload();
}else{
alert("添加失败 "+data.msg)
}
})
}
</script>
3.6 删除用户页面
3.6.1 删除用户接口设计
后台代码实现
UserController
/***
* 删除用户
* @param id
* @return
*/
@RequestMapping(value = "deleteUser.do",method = RequestMethod.POST)
@ResponseBody
public ServerResponse<String> delete(Integer id){
return iUserService.deleteByPrimary(id);
}
IUserService
ServerResponse<String> deleteByPrimary(Integer id);
UserServiceImpl
/**
* 根据id删除用户
* @param id
* @return
*/
@Override
public ServerResponse<String> deleteByPrimary(Integer id) {
//1.判断该用户是否存在,获取用户信息
ServerResponse<User> information = this.getInformation(id);
User user = information.getData();
if(user ==null){
//2.如果用户不存在,返回失败的ServerResources
return ServerResponse.createByErrorMsg("删除的用户不存在");
}
//3.如果用户存在,调用mapper 中的方法进行删除 ,得到返回值 count ==1 删除成功 count==0 ,删除失败
int count = userMapper.deleteByPrimaryKey(id);
if(count > 0){
return ServerResponse.createBySuccessMsg("删除成功");
}
return ServerResponse.createByErrorMsg("删除失败");
}
/**
* 根据用户的id获取用户信息
*/
public ServerResponse<User> getInformation(int userId){
User user = userMapper.selectByPrimaryKey(userId);
//根据id查到了用户
if(user != null){
return ServerResponse.createBySuccessData(user);
}
return ServerResponse.createByErrorMsg("用户不存在");
}
UserMapper
/**
* 根据ID删除用户
* @param id
* @return
*/
int deleteByPrimaryKey(Integer id);
UserMapper.xml
<!-- 8.根据主键查询用户 -->
<select id="selectByPrimaryKey" parameterType="int" resultType="user">
select <include refid="field"/> from user
where id = #{id}
</select>
<!-- 9.根据主键删除用户 -->
<delete id="deleteByPrimaryKey" parameterType="int">
delete from user
where id = #{id}
</delete>
3.6.2 删除用户页面
在userList.html点击删除按钮,删除用户
前台发送ajax异步请求
<a href='javascript:void(0)' class='text-inverse' title='Delete' data-toggle='tooltip' onclick='deleteById("+list[i].id+")'><i class='zmdi zmdi-delete txt-danger'></i></a>
<script>
//删除用户
function deleteById(id){
//1.询问用户是否确认删除
var flag = window.confirm("您是否确认删除?");
if(!flag){
return;
}
//2.发送ajax请求删除后台数据,参数id
$.post("/lg_visualization/user/deleteUser.do","id="+id,function(data){
if(data.status == 0){
location.reload();
}
},"json")
}
</script>
3.7.用户登出
3.7.1 接口设计
后台代码实现
UserController
/**
* 5.用户登出
*/
@RequestMapping(value = "logout.do",method = RequestMethod.POST)
@ResponseBody
public ServerResponse<String> logout(HttpSession session){
try{
session.removeAttribute(Const.CURRENT_USER);
return ServerResponse.createBySuccessMsg("注销成功");
}catch (Exception e){
return ServerResponse.createByErrorMsg("注销失败");
}
}
3.7.2 前台页面
在index.html页面点击登出
发送异步的ajax请求
<li>
<a href="#" onclick="logout()"><i class="zmdi zmdi-power"></i><span>退出</span></a>
</li>
<script>
//登出的方法
function logout(){
//1.直接发送ajax请求,请求后台注销
$.post("/lg_visualization/user/logout.do",function(data){
//2.如果注销成功,跳转到登录页面
if(data.status == 0){
location.href = "/lg_visualization/login.html";
}else{
alert("退出失败");
}
},"json")
}
</script>