可视化项目案例

文章目录

可视化项目案例
一、需求分析与环境搭建
二、前台页面模块
- 2.1.引入前台静态资源
- 2.2.导航栏页面配置
三、用户模块

一、需求分析与环境搭建

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">&laquo;</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">&raquo;</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>

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 前台页面

猜你喜欢

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 前台页面

猜你喜欢

一、需求分析与环境搭建

二、前台页面模块

三、用户模块