| 2.5.2.1 可视化项目案例(需求分析、环境搭建、用户登录登出、用户模块显示、分页、增删改) | 您所在的位置：网站首页 › 个人因素分析怎么写 › 2.5.2.1 可视化项目案例(需求分析、环境搭建、用户登录登出、用户模块显示、分页、增删改) |
2.5.2.1 可视化项目案例(需求分析、环境搭建、用户登录登出、用户模块显示、分页、增删改)
|
可视化项目案例
文章目录
可视化项目案例一、 需求分析与环境搭建1.1 需求分析1.1.1 需求分析1.1.2 项目技术栈1.1.3 数据数据库设计
2.环境搭建1.2.1 工程环境1.2.2 数据库环境1.2.3 项目结构1.2.4 项目框架搭建1.2.5 通用模块编写
1.3.测试后台环境**1.3.1 测试目标1.3.2 测试方式
二、 前台页面模块2.1.引入前台静态资源2.2.导航栏页面配置
三 、用户模块3.1.接口说明3.2.用户表设计3.3.用户登录3.4 用户分页3.4.1 用户列表分页接口设计3.4.2 分页前台页面3.4.2 分页前台页面
3.5. 添加用户3.5.1 添加用户接口设计3.5.2 添加用户前台页面
3.6 删除用户页面3.6.1 删除用户接口设计3.6.2 删除用户页面
3.7.用户登出3.7.1 接口设计3.7.2 前台页面
一、 需求分析与环境搭建
1.1 需求分析
1.1.1 需求分析
用户登录
1.用户表user的描述 后台用户表信息 2.职位信息表 position_info_v2 描述职位及公司信息 3.职位类型信息表 position_type_info_v2 描述职位类型及公司信息 4.省份表 Province 5.城市表 City  配置远程镜像 
IDEA的jdk环境
 修改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 4.0.0 com.lagou lg-visualization 1.0-SNAPSHOT war junit junit 4.12 org.springframework spring-webmvc 5.0.5.RELEASE org.springframework spring-jdbc 5.0.5.RELEASE org.springframework spring-aspects 5.0.5.RELEASE org.springframework spring-test 5.0.5.RELEASE org.mybatis mybatis 3.2.8 org.mybatis mybatis-spring 1.3.0 mysql mysql-connector-java 5.1.46 org.slf4j slf4j-log4j12 1.6.6 com.alibaba druid 1.0.14 javax.servlet javax.servlet-api 3.1.0 provided javax.servlet.jsp javax.servlet.jsp-api 2.2.1 provided com.fasterxml.jackson.core jackson-core 2.9.0 com.fasterxml.jackson.core jackson-databind 2.9.0 com.fasterxml.jackson.core jackson-annotations 2.9.0 org.projectlombok lombok 1.18.12 commons-collections commons-collections 3.2.1 org.apache.commons commons-lang3 3.5 com.github.pagehelper pagehelper 5.1.4 org.apache.tomcat.maven tomcat7-maven-plugin 2.2 / 8080 org.apache.maven.plugins maven-compiler-plugin 3.2 1.8 1.8 UTF-8配置文件的思路 applicationContext-service.xml 3.连接池配置 jdbc.properties 4.mybatis 配置文件 mybatis-config.xml 5.springmvc配置文件 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\n7.UserMapper.xml mybatis映射文件 8.配置web.xml 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 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 ServerResponse createBySuccessMsg(String msg){ return new ServerResponse(ResponseCode.SUCCESS.getCode(),msg); } public static ServerResponse createBySuccessData(T data){ return new ServerResponse(ResponseCode.SUCCESS.getCode(),data); } public static ServerResponse createBySuccessMsgData(String msg,T data){ return new ServerResponse(ResponseCode.SUCCESS.getCode(),msg,data); } public static ServerResponse 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 映射文件 update account set money = money + #{money} where username = #{name} update account set money = money - #{money} where username = #{name}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 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平级） 1.目标:点击左侧导航栏页面在展示栏中展示信息
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 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 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 id,username,password,email,phone,create_time,update_time select count(1) from user where username = #{username} /*select id,username,password,email,phone,create_time,update_time*/ select from user where username = #{username} and password = #{password}密码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 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 登录成功跳转到index.html首页面 3.4 用户分页 3.4.1 用户列表分页接口设计
1)点击员工信息分页展示查询到的用户数据 IUserService ServerResponse getUsers(int pageNum, int pageSize);UserServiceImpl /** * 分页查询user * @param pageNum * @param pageSize * @return */ @Override public ServerResponse getUsers(int pageNum, int pageSize) { //1.给PageHelper分页助手设置 pageNum pageSize PageHelper.startPage(pageNum,pageSize); //2.查询所有用户信息 List list = userMapper.userList(); //3.创建pgeInfo对象,把查询到的用户list放到pageInfo中 PageInfo pageInfo = new PageInfo(list); //4.返回serverResponse,添加pgeInfo return ServerResponse.createBySuccessData(pageInfo); }UserMapper List userList();UserMapper.xml id , username,password ,email ,phone ,create_time,update_time select from user order by id asc测试结果 1)点击员工信息分页展示查询到的用户数据 userList页面 操作按钮 参考代码 3)编写分页前端代码 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 var $li = $(""+(i+1)+""); //所以要把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) } 3.5. 添加用户 3.5.1 添加用户接口设计 请求方法：post请求接口 localhost:8080/lg_visualization/user/add.do? phone=13200001112&username=jack23&password=jack23&email=jack23@lagou.com请求参数 响应数据  后台代码实现 UserController
/***
* 添加用户
* @param user
* @return
*/
@RequestMapping(value = "add.do",method = RequestMethod.POST)
@ResponseBody
public ServerResponse add(User user){
return iUserService.add(user);
}
IUserService ServerResponse add(User user);UserServiceImpl /*** * 添加用户 * @param user * @return */ @Override public ServerResponse add(User user) { //1.校验用户名是否存在 ServerResponse 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 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 select count(1) from user where email = #{email} insert into user (id,username,password,email ,phone ,create_time,update_time) values (#{id},#{username},#{password},#{email},#{phone},now(),now()) 3.5.2 添加用户前台页面点击添加用户按钮 编写异步请求发送添加用户的ajax请求 //添加用户的方法 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) } }) } 3.6 删除用户页面 3.6.1 删除用户接口设计
IUserService ServerResponse deleteByPrimary(Integer id);UserServiceImpl /** * 根据id删除用户 * @param id * @return */ @Override public ServerResponse deleteByPrimary(Integer id) { //1.判断该用户是否存在,获取用户信息 ServerResponse 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 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 select from user where id = #{id} delete from user where id = #{id} 3.6.2 删除用户页面在userList.html点击删除按钮,删除用户
在index.html页面点击登出 |
首页的原型 
用户模块 
招聘市场图表统计 
2.spring配置文件 
applicationContext-dao.xml
UserMapper.xml
login.html放在webapp目录下
2.设计思路: html中超链接添加onclick方法调用指定方法,传递页面名称
请求参数 
响应参数 
成功响应数据 
失败响应数据 
后台实现 UserController
异步登录请求
后端代码实现 
UserController 添加分页查找方法
2) userList.html 引入bootstrap前台分页插件
在userList页面编写aside标签,引入dialog弹出框
后台代码实现 UserController
前台发送ajax异步请求
后台代码实现 UserController
发送异步的ajax请求【本文地址】
公司简介
联系我们