• 第3章业务功能开发(用户登录)

    1.客户需求（需求开发说明书）

    用户在登录页面,输入用户名和密码,点击"登录"按钮或者回车,完成用户登录的功能.

    *用户名和密码不能为空

    *用户名或者密码错误,用户已过期,用户状态被锁定,ip受限 都不能登录成功

    *登录成功之后,所有业务页面显示当前用户的名称

    *实现10天记住密码

    *登录成功之后,跳转到业务主页面

    *登录失败,页面不跳转,提示信息

    2.首先明确需求，规划程序访问流程，画好UML顺序图再编写代码，方便以后对项目进行管理，同时也是开发规范的硬性要求

    3.前面已经使用mybatis逆向工程创建了UserMapper文件，自动创建的文件中已经包含了增删改查等基本操作语句，为了理解开发的流程，再自己写一个查询用户的语句添加进去。

    mapper文件目录位置

    UserMapper接口

    1. package com.it.crm.settings.mapper;
    2.  
    3. import com.it.crm.settings.entity.User;
    4.  
    5. import java.util.Map;
    6.  
    7. public interface UserMapper {
    8.     /**
    9.      * This method was generated by MyBatis Generator.
    10.      * This method corresponds to the database table tbl_user
    11.      *
    12.      * @mbggenerated Wed Jun 29 12:20:46 CST 2022
    13.      */
    14.     int deleteByPrimaryKey(String id);
    15.  
    16.     /**
    17.      * This method was generated by MyBatis Generator.
    18.      * This method corresponds to the database table tbl_user
    19.      *
    20.      * @mbggenerated Wed Jun 29 12:20:46 CST 2022
    21.      */
    22.     int insert(User record);
    23.  
    24.     /**
    25.      * This method was generated by MyBatis Generator.
    26.      * This method corresponds to the database table tbl_user
    27.      *
    28.      * @mbggenerated Wed Jun 29 12:20:46 CST 2022
    29.      */
    30.     int insertSelective(User record);
    31.  
    32.     /**
    33.      * This method was generated by MyBatis Generator.
    34.      * This method corresponds to the database table tbl_user
    35.      *
    36.      * @mbggenerated Wed Jun 29 12:20:46 CST 2022
    37.      */
    38.     User selectByPrimaryKey(String id);
    39.  
    40.     /**
    41.      * This method was generated by MyBatis Generator.
    42.      * This method corresponds to the database table tbl_user
    43.      *
    44.      * @mbggenerated Wed Jun 29 12:20:46 CST 2022
    45.      */
    46.     int updateByPrimaryKeySelective(User record);
    47.  
    48.     /**
    49.      * This method was generated by MyBatis Generator.
    50.      * This method corresponds to the database table tbl_user
    51.      *
    52.      * @mbggenerated Wed Jun 29 12:20:46 CST 2022
    53.      */
    54.     int updateByPrimaryKey(User record);
    55.  
    56.     /*
    57.     根据账号和密码查询用户
    58.      */
    59.     User selectUserByActAndPwd(Map<String,Object> map);
    60. }

    UserMapper.xml文件

    1. <?xml version="1.0" encoding="UTF-8" ?>
    2. <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
    3. <mapper namespace="com.it.crm.settings.mapper.UserMapper" >
    4.   <resultMap id="BaseResultMap" type="com.it.crm.settings.entity.User" >
    5.     <!--
    6.       WARNING - @mbggenerated
    7.       This element is automatically generated by MyBatis Generator, do not modify.
    8.       This element was generated on Wed Jun 29 12:20:46 CST 2022.
    9.     -->
    10.     <id column="id" property="id" jdbcType="CHAR" />
    11.     <result column="login_act" property="loginAct" jdbcType="VARCHAR" />
    12.     <result column="name" property="name" jdbcType="VARCHAR" />
    13.     <result column="login_pwd" property="loginPwd" jdbcType="VARCHAR" />
    14.     <result column="email" property="email" jdbcType="VARCHAR" />
    15.     <result column="expire_time" property="expireTime" jdbcType="CHAR" />
    16.     <result column="lock_state" property="lockState" jdbcType="CHAR" />
    17.     <result column="deptno" property="deptno" jdbcType="CHAR" />
    18.     <result column="allow_ips" property="allowIps" jdbcType="VARCHAR" />
    19.     <result column="createTime" property="createtime" jdbcType="CHAR" />
    20.     <result column="create_by" property="createBy" jdbcType="VARCHAR" />
    21.     <result column="edit_time" property="editTime" jdbcType="CHAR" />
    22.     <result column="edit_by" property="editBy" jdbcType="VARCHAR" />
    23.   </resultMap>
    24.   <sql id="Base_Column_List" >
    25.     <!--
    26.       WARNING - @mbggenerated
    27.       This element is automatically generated by MyBatis Generator, do not modify.
    28.       This element was generated on Wed Jun 29 12:20:46 CST 2022.
    29.     -->
    30.     id, login_act, name, login_pwd, email, expire_time, lock_state, deptno, allow_ips, 
    31.     createTime, create_by, edit_time, edit_by
    32.   </sql>
    33.   <select id="selectByPrimaryKey" resultMap="BaseResultMap" parameterType="java.lang.String" >
    34.     <!--
    35.       WARNING - @mbggenerated
    36.       This element is automatically generated by MyBatis Generator, do not modify.
    37.       This element was generated on Wed Jun 29 12:20:46 CST 2022.
    38.     -->
    39.     select 
    40.     <include refid="Base_Column_List" />
    41.     from tbl_user
    42.     where id = #{id,jdbcType=CHAR}
    43.   </select>
    44.   <delete id="deleteByPrimaryKey" parameterType="java.lang.String" >
    45.     <!--
    46.       WARNING - @mbggenerated
    47.       This element is automatically generated by MyBatis Generator, do not modify.
    48.       This element was generated on Wed Jun 29 12:20:46 CST 2022.
    49.     -->
    50.     delete from tbl_user
    51.     where id = #{id,jdbcType=CHAR}
    52.   </delete>
    53.   <insert id="insert" parameterType="com.it.crm.settings.entity.User" >
    54.     <!--
    55.       WARNING - @mbggenerated
    56.       This element is automatically generated by MyBatis Generator, do not modify.
    57.       This element was generated on Wed Jun 29 12:20:46 CST 2022.
    58.     -->
    59.     insert into tbl_user (id, login_act, name, 
    60.       login_pwd, email, expire_time, 
    61.       lock_state, deptno, allow_ips, 
    62.       createTime, create_by, edit_time, 
    63.       edit_by)
    64.     values (#{id,jdbcType=CHAR}, #{loginAct,jdbcType=VARCHAR}, #{name,jdbcType=VARCHAR}, 
    65.       #{loginPwd,jdbcType=VARCHAR}, #{email,jdbcType=VARCHAR}, #{expireTime,jdbcType=CHAR}, 
    66.       #{lockState,jdbcType=CHAR}, #{deptno,jdbcType=CHAR}, #{allowIps,jdbcType=VARCHAR}, 
    67.       #{createtime,jdbcType=CHAR}, #{createBy,jdbcType=VARCHAR}, #{editTime,jdbcType=CHAR}, 
    68.       #{editBy,jdbcType=VARCHAR})
    69.   </insert>
    70.   <insert id="insertSelective" parameterType="com.it.crm.settings.entity.User" >
    71.     <!--
    72.       WARNING - @mbggenerated
    73.       This element is automatically generated by MyBatis Generator, do not modify.
    74.       This element was generated on Wed Jun 29 12:20:46 CST 2022.
    75.     -->
    76.     insert into tbl_user
    77.     <trim prefix="(" suffix=")" suffixOverrides="," >
    78.       <if test="id != null" >
    79.         id,
    80.       </if>
    81.       <if test="loginAct != null" >
    82.         login_act,
    83.       </if>
    84.       <if test="name != null" >
    85.         name,
    86.       </if>
    87.       <if test="loginPwd != null" >
    88.         login_pwd,
    89.       </if>
    90.       <if test="email != null" >
    91.         email,
    92.       </if>
    93.       <if test="expireTime != null" >
    94.         expire_time,
    95.       </if>
    96.       <if test="lockState != null" >
    97.         lock_state,
    98.       </if>
    99.       <if test="deptno != null" >
    100.         deptno,
    101.       </if>
    102.       <if test="allowIps != null" >
    103.         allow_ips,
    104.       </if>
    105.       <if test="createtime != null" >
    106.         createTime,
    107.       </if>
    108.       <if test="createBy != null" >
    109.         create_by,
    110.       </if>
    111.       <if test="editTime != null" >
    112.         edit_time,
    113.       </if>
    114.       <if test="editBy != null" >
    115.         edit_by,
    116.       </if>
    117.     </trim>
    118.     <trim prefix="values (" suffix=")" suffixOverrides="," >
    119.       <if test="id != null" >
    120.         #{id,jdbcType=CHAR},
    121.       </if>
    122.       <if test="loginAct != null" >
    123.         #{loginAct,jdbcType=VARCHAR},
    124.       </if>
    125.       <if test="name != null" >
    126.         #{name,jdbcType=VARCHAR},
    127.       </if>
    128.       <if test="loginPwd != null" >
    129.         #{loginPwd,jdbcType=VARCHAR},
    130.       </if>
    131.       <if test="email != null" >
    132.         #{email,jdbcType=VARCHAR},
    133.       </if>
    134.       <if test="expireTime != null" >
    135.         #{expireTime,jdbcType=CHAR},
    136.       </if>
    137.       <if test="lockState != null" >
    138.         #{lockState,jdbcType=CHAR},
    139.       </if>
    140.       <if test="deptno != null" >
    141.         #{deptno,jdbcType=CHAR},
    142.       </if>
    143.       <if test="allowIps != null" >
    144.         #{allowIps,jdbcType=VARCHAR},
    145.       </if>
    146.       <if test="createtime != null" >
    147.         #{createtime,jdbcType=CHAR},
    148.       </if>
    149.       <if test="createBy != null" >
    150.         #{createBy,jdbcType=VARCHAR},
    151.       </if>
    152.       <if test="editTime != null" >
    153.         #{editTime,jdbcType=CHAR},
    154.       </if>
    155.       <if test="editBy != null" >
    156.         #{editBy,jdbcType=VARCHAR},
    157.       </if>
    158.     </trim>
    159.   </insert>
    160.   <update id="updateByPrimaryKeySelective" parameterType="com.it.crm.settings.entity.User" >
    161.     <!--
    162.       WARNING - @mbggenerated
    163.       This element is automatically generated by MyBatis Generator, do not modify.
    164.       This element was generated on Wed Jun 29 12:20:46 CST 2022.
    165.     -->
    166.     update tbl_user
    167.     <set >
    168.       <if test="loginAct != null" >
    169.         login_act = #{loginAct,jdbcType=VARCHAR},
    170.       </if>
    171.       <if test="name != null" >
    172.         name = #{name,jdbcType=VARCHAR},
    173.       </if>
    174.       <if test="loginPwd != null" >
    175.         login_pwd = #{loginPwd,jdbcType=VARCHAR},
    176.       </if>
    177.       <if test="email != null" >
    178.         email = #{email,jdbcType=VARCHAR},
    179.       </if>
    180.       <if test="expireTime != null" >
    181.         expire_time = #{expireTime,jdbcType=CHAR},
    182.       </if>
    183.       <if test="lockState != null" >
    184.         lock_state = #{lockState,jdbcType=CHAR},
    185.       </if>
    186.       <if test="deptno != null" >
    187.         deptno = #{deptno,jdbcType=CHAR},
    188.       </if>
    189.       <if test="allowIps != null" >
    190.         allow_ips = #{allowIps,jdbcType=VARCHAR},
    191.       </if>
    192.       <if test="createtime != null" >
    193.         createTime = #{createtime,jdbcType=CHAR},
    194.       </if>
    195.       <if test="createBy != null" >
    196.         create_by = #{createBy,jdbcType=VARCHAR},
    197.       </if>
    198.       <if test="editTime != null" >
    199.         edit_time = #{editTime,jdbcType=CHAR},
    200.       </if>
    201.       <if test="editBy != null" >
    202.         edit_by = #{editBy,jdbcType=VARCHAR},
    203.       </if>
    204.     </set>
    205.     where id = #{id,jdbcType=CHAR}
    206.   </update>
    207.   <update id="updateByPrimaryKey" parameterType="com.it.crm.settings.entity.User" >
    208.     <!--
    209.       WARNING - @mbggenerated
    210.       This element is automatically generated by MyBatis Generator, do not modify.
    211.       This element was generated on Wed Jun 29 12:20:46 CST 2022.
    212.     -->
    213.     update tbl_user
    214.     set login_act = #{loginAct,jdbcType=VARCHAR},
    215.       name = #{name,jdbcType=VARCHAR},
    216.       login_pwd = #{loginPwd,jdbcType=VARCHAR},
    217.       email = #{email,jdbcType=VARCHAR},
    218.       expire_time = #{expireTime,jdbcType=CHAR},
    219.       lock_state = #{lockState,jdbcType=CHAR},
    220.       deptno = #{deptno,jdbcType=CHAR},
    221.       allow_ips = #{allowIps,jdbcType=VARCHAR},
    222.       createTime = #{createtime,jdbcType=CHAR},
    223.       create_by = #{createBy,jdbcType=VARCHAR},
    224.       edit_time = #{editTime,jdbcType=CHAR},
    225.       edit_by = #{editBy,jdbcType=VARCHAR}
    226.     where id = #{id,jdbcType=CHAR}
    227.   </update>
    228.  
    229.   <select id="selectUserByActAndPwd" parameterType="map" resultMap="BaseResultMap">
    230. select
    231. <include refid="Base_Column_List"/>
    232. from tbl_user
    233. where login_act=#{loginAct} and login_pwd=#{loginPwd}
    234.   </select>
    235.  
    236. </mapper>

    4.创建service层文件

    UserService接口

    1. package com.it.crm.settings.service;
    2.  
    3. import com.it.crm.settings.entity.User;
    4.  
    5. import java.util.Map;
    6.  
    7. public interface UserService {
    8.     User queryUserByActAndPwd(Map<String,Object> map);
    9. }

    UserServiceImpl类

    1. package com.it.crm.settings.service.impl;
    2.  
    3. import com.it.crm.settings.entity.User;
    4. import com.it.crm.settings.mapper.UserMapper;
    5. import com.it.crm.settings.service.UserService;
    6. import org.springframework.beans.factory.annotation.Autowired;
    7. import org.springframework.stereotype.Service;
    8.  
    9. import java.util.Map;
    10.  
    11. @Service("userService")
    12. public class UserServiceImpl implements UserService {
    13.  
    14.     @Autowired
    15.     private UserMapper userMapper;
    16.  
    17.     @Override
    18.     public User queryUserByActAndPwd(Map<String, Object> map) {
    19.         return userMapper.selectUserByActAndPwd(map);
    20.     }
    21. }

    5.创建web层下的controller层

    UserController类

    1. package com.it.crm.settings.web.controller;
    2.  
    3. import com.it.crm.commons.contants.Contants;
    4. import com.it.crm.commons.entity.ReturnObject;
    5. import com.it.crm.commons.utils.DateUtils;
    6. import com.it.crm.settings.entity.User;
    7. import com.it.crm.settings.service.UserService;
    8. import org.springframework.beans.factory.annotation.Autowired;
    9. import org.springframework.http.HttpRequest;
    10. import org.springframework.stereotype.Controller;
    11. import org.springframework.web.bind.annotation.RequestMapping;
    12. import org.springframework.web.bind.annotation.ResponseBody;
    13.  
    14. import javax.servlet.http.HttpServletRequest;
    15. import javax.servlet.http.HttpSession;
    16. import java.text.SimpleDateFormat;
    17. import java.util.Date;
    18. import java.util.HashMap;
    19. import java.util.Map;
    20.  
    21. @Controller
    22. public class UserController {
    23.  
    24.     @Autowired
    25.     private UserService userService;
    26.  
    27.     @RequestMapping(value = "/settings/qx/user/toLogin.do")
    28.     public String toLogin(){
    29.         return "settings/qx/user/login";
    30.     }
    31.  
    32.     @RequestMapping(value = "/settings/qx/user/login.do")
    33.     @ResponseBody
    34.     public Object login(String loginAct, String loginPwd, String isRemPwd, HttpServletRequest request, HttpSession session){
    35.         //封装参数
    36.         Map<String,Object> map=new HashMap<>();
    37.         map.put("loginAct",loginAct);
    38.         map.put("loginPwd",loginPwd);
    39.         map.put("isRemPwd",isRemPwd);
    40.         //调用service层方法，查询用户
    41.         User user = userService.queryUserByActAndPwd(map);
    42.         //根据查询结果生成响应信息
    43.         ReturnObject returnObject=new ReturnObject();
    44.         if (user==null){
    45.             //登录失败,用户名或密码错误
    46.             returnObject.setCode(Contants.RETURN_OBJECT_CODE_FAIL);
    47.             returnObject.setMessage("用户名或密码错误");
    48.         }else {//进一步判断账号是否合法
    49.             if (DateUtils.formateDateTime(new Date()).compareTo(user.getExpireTime())>0){
    50.                 //登录失败，账号已过期
    51.                 returnObject.setCode(Contants.RETURN_OBJECT_CODE_FAIL);
    52.                 returnObject.setMessage("账号已经过期");
    53.             }else if ("0".equals(user.getLockState())){
    54.                 //登录失败，状态被锁定
    55.                 returnObject.setCode(Contants.RETURN_OBJECT_CODE_FAIL);
    56.                 returnObject.setMessage("状态被锁定");
    57.             }else if (!user.getAllowIps().contains(request.getRemoteAddr())){
    58.                 //登录失败，ip受限
    59.                 returnObject.setCode(Contants.RETURN_OBJECT_CODE_FAIL);
    60.                 returnObject.setMessage("ip受限");
    61.             }else{
    62.                 //登录成功
    63.                 returnObject.setCode(Contants.RETURN_OBJECT_CODE_SUCCESS);
    64.                 //把user保存到session中
    65.                 session.setAttribute(Contants.SESSION_USER,user);
    66.             }
    67.         }
    68.         return returnObject;
    69.     }
    70. }

    UserController类调用了该项目中的通用层commons下多个类

    如下所示

     Contants类

    把条件常量用封装好的类中的方法表示，有利于后期维护时，更改条件值时只更新该处，不需要更改整个项目

    1. package com.it.crm.commons.contants;
    2.  
    3. //定义常量类，有利于后期维护
    4. public class Contants {
    5.     //保存ReturnObject类中的Code值
    6.     public static final String RETURN_OBJECT_CODE_SUCCESS="1";//成功
    7.     public static final String RETURN_OBJECT_CODE_FAIL="0";//失败
    8.  
    9.     //保存session中当前用户的key
    10.     public static final String SESSION_USER="sessionUser";
    11. }

     ReturnObject类

    1. package com.it.crm.commons.entity;
    2.  
    3. public class ReturnObject {
    4.     private String code;//处理成功或者失败的标记，1：成功，0：失败
    5.     private String message;//提示信息
    6.     private Object returnData;//返回其他数据
    7.  
    8.     public String getCode() {
    9.         return code;
    10.     }
    11.  
    12.     public void setCode(String code) {
    13.         this.code = code;
    14.     }
    15.  
    16.     public String getMessage() {
    17.         return message;
    18.     }
    19.  
    20.     public void setMessage(String message) {
    21.         this.message = message;
    22.     }
    23.  
    24.     public Object getReturnData() {
    25.         return returnData;
    26.     }
    27.  
    28.     public void setReturnData(Object returnData) {
    29.         this.returnData = returnData;
    30.     }
    31.  
    32.     @Override
    33.     public String toString() {
    34.         return "ReturnObject{" +
    35.                 "code='" + code + '\'' +
    36.                 ", message='" + message + '\'' +
    37.                 ", returnData=" + returnData +
    38.                 '}';
    39.     }
    40. }

    DateUtils类（时间工具类）

    1. package com.it.crm.commons.utils;
    2.  
    3. import java.text.SimpleDateFormat;
    4. import java.util.Date;
    5.  
    6. //对Date类型数据进行处理的工具类
    7. public class DateUtils {
    8.  
    9.     //对指定的date对象进行格式化
    10.     public static String formateDateTime(Date date){
    11.         SimpleDateFormat sdf=new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
    12.         String format = sdf.format(date);
    13.         return format;
    14.     }
    15.     //对指定的date对象进行格式化
    16.     public static String formateDate(Date date){
    17.         SimpleDateFormat sdf=new SimpleDateFormat("yyyy-MM-dd");
    18.         String format = sdf.format(date);
    19.         return format;
    20.     }
    21.     //对指定的date对象进行格式化
    22.     public static String formateTime(Date date){
    23.         SimpleDateFormat sdf=new SimpleDateFormat("HH:mm:ss");
    24.         String format = sdf.format(date);
    25.         return format;
    26.     }
    27.  
    28. }

    6.创建webapp下的登录页面

    login.jsp

    使用ajax异步传输判断，如果账号密码为空直接弹出提示框，不为空时进入UserController类 进行账号密码的各种验证，全部正确跳转到WorkBenchIndexContoller类，不正确时在登录页面上显示错误信息。

    1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    2. <%
    3. 	String basePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/";
    4. %>
    5. <html>
    6. <head>
    7. <meta charset="UTF-8">
    8. 	<base href="<%=basePath%>">
    9. <link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
    10. <script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
    11. <script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
    12.  
    13.     <script type="text/javascript">
    14.     $(function () {
    15.         //给登录按钮添加单击事件
    16.        $("#loginBtn").click(function () {
    17.           //收集参数
    18.            var loginAct=$.trim($("#loginAct").val());
    19.            var loginPwd=$.trim($("#loginPwd").val());
    20.            var isRemPwd=$("#isRemPwd").prop("checked");
    21.            //表单验证
    22.            if (loginAct==""){
    23.                alert("用户名不能为空！");
    24.                return;
    25.            }if (loginPwd==""){
    26.                alert("密码不能为空！");
    27.                return;
    28.            }
    29.            //点击登录后显示正在验证
    30. 		   $("#msg").html("正在努力验证中。。。")
    31.  
    32.                //发送请求
    33.                $.ajax({
    34.                    url:'settings/qx/user/login.do',
    35.                    data:{
    36.                        loginAct:loginAct,
    37.                        loginPwd:loginPwd,
    38.                        isRemPwd:isRemPwd
    39.                    },
    40.                    type:'post',
    41.                    dataType:'json',
    42.                    success:function (data) {
    43.                        if (data.code=="1"){
    44.                            //登录成功，跳转到业务的主页面
    45.                            window.location.href="workbench/index.do";
    46.                        }else {
    47.                            //登录失败,显示提示信息
    48.                            $("#msg").html(data.message);
    49.                        }
    50.                    }
    51.                });
    52.  
    53.        });
    54.     });
    55.     </script>
    56.  
    57. </head>
    58. <body>
    59. 	<div style="position: absolute; top: 0px; left: 0px; width: 60%;">
    60. 		<img src="image/IMG_7114.JPG" style="width: 100%; height: 90%; position: relative; top: 50px;">
    61. 	</div>
    62. 	<div id="top" style="height: 50px; background-color: #3C3C3C; width: 100%;">
    63. 		<div style="position: absolute; top: 5px; left: 0px; font-size: 30px; font-weight: 400; color: white; font-family: 'times new roman'">CRM &nbsp;<span style="font-size: 12px;">客户关系管理系统</span></div>
    64. 	</div>
    65. 	
    66. 	<div style="position: absolute; top: 120px; right: 100px;width:450px;height:400px;border:1px solid #D5D5D5">
    67. 		<div style="position: absolute; top: 0px; right: 60px;">
    68. 			<div class="page-header">
    69. 				<h1>登录</h1>
    70. 			</div>
    71. 			<form action="workbench/index.html" class="form-horizontal" role="form">
    72. 				<div class="form-group form-group-lg">
    73. 					<div style="width: 350px;">
    74. 						<input class="form-control" id="loginAct" type="text" placeholder="用户名">
    75. 					</div>
    76. 					<div style="width: 350px; position: relative;top: 20px;">
    77. 						<input class="form-control" id="loginPwd" type="password" placeholder="密码">
    78. 					</div>
    79. 					<div class="checkbox"  style="position: relative;top: 30px; left: 10px;">
    80. 						<label>
    81. 							<input type="checkbox" id="isRemPwd"> 十天内免登录
    82. 						</label>
    83. 						&nbsp;&nbsp;
    84. 						<span id="msg" style="color: red;"></span>
    85. 					</div>
    86. 					<button type="button" id="loginBtn" class="btn btn-primary btn-lg btn-block"  style="width: 350px; position: relative;top: 45px;">登录</button>
    87. 				</div>
    88. 			</form>
    89. 		</div>
    90. 	</div>
    91. </body>
    92. </html>

    7.创建workbench包下的web层

     WorkBenchIndexContoller类

    登录成功时跳转到该类

    1. package com.it.crm.workbench.web.controller;
    2.  
    3. import org.springframework.stereotype.Controller;
    4. import org.springframework.web.bind.annotation.RequestMapping;
    5.  
    6. @Controller
    7. public class WorkBenchIndexContoller {
    8.  
    9.     @RequestMapping(value = "/workbench/index.do")
    10.     public String index(){
    11.         //跳转到业务主页面
    12.         return "workbench/index";
    13.     }
    14. }

     8.创建工作台首页

     index.jsp

    1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    2. <%
    3. String basePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/";
    4. %>
    5. <html>
    6. <head>
    7. <meta charset="UTF-8">
    8. 	<base href="<%=basePath%>">
    9. <link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
    10. <script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
    11. <script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
    12. <script type="text/javascript">
    13.  
    14. 	//页面加载完毕
    15. 	$(function(){
    16. 		
    17. 		//导航中所有文本颜色为黑色
    18. 		$(".liClass > a").css("color" , "black");
    19. 		
    20. 		//默认选中导航菜单中的第一个菜单项
    21. 		$(".liClass:first").addClass("active");
    22. 		
    23. 		//第一个菜单项的文字变成白色
    24. 		$(".liClass:first > a").css("color" , "white");
    25. 		
    26. 		//给所有的菜单项注册鼠标单击事件
    27. 		$(".liClass").click(function(){
    28. 			//移除所有菜单项的激活状态
    29. 			$(".liClass").removeClass("active");
    30. 			//导航中所有文本颜色为黑色
    31. 			$(".liClass > a").css("color" , "black");
    32. 			//当前项目被选中
    33. 			$(this).addClass("active");
    34. 			//当前项目颜色变成白色
    35. 			$(this).children("a").css("color","white");
    36. 		});
    37. 		
    38. 		
    39. 		window.open("main/index.html","workareaFrame");
    40. 		
    41. 	});
    42. 	
    43. </script>
    44.  
    45. </head>
    46. <body>
    47. 	
    48. 	<!-- 我的资料 -->
    49. 	<div class="modal fade" id="myInformation" role="dialog">
    50. 		<div class="modal-dialog" role="document" style="width: 30%;">
    51. 			<div class="modal-content">
    52. 				<div class="modal-header">
    53. 					<button type="button" class="close" data-dismiss="modal">
    54. 						<span aria-hidden="true">×</span>
    55. 					</button>
    56. 					<h4 class="modal-title">我的资料</h4>
    57. 				</div>
    58. 				<div class="modal-body">
    59. 					<div style="position: relative; left: 40px;">
    60. 						姓名：<b>张三</b><br><br>
    61. 						登录帐号：<b>zhangsan</b><br><br>
    62. 						组织机构：<b>1005，市场部，二级部门</b><br><br>
    63. 						邮箱：<b>zhangsan@bjpowernode.com</b><br><br>
    64. 						失效时间：<b>2017-02-14 10:10:10</b><br><br>
    65. 						允许访问IP：<b>127.0.0.1,192.168.100.2</b>
    66. 					</div>
    67. 				</div>
    68. 				<div class="modal-footer">
    69. 					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
    70. 				</div>
    71. 			</div>
    72. 		</div>
    73. 	</div>
    74.  
    75. 	<!-- 修改密码的模态窗口 -->
    76. 	<div class="modal fade" id="editPwdModal" role="dialog">
    77. 		<div class="modal-dialog" role="document" style="width: 70%;">
    78. 			<div class="modal-content">
    79. 				<div class="modal-header">
    80. 					<button type="button" class="close" data-dismiss="modal">
    81. 						<span aria-hidden="true">×</span>
    82. 					</button>
    83. 					<h4 class="modal-title">修改密码</h4>
    84. 				</div>
    85. 				<div class="modal-body">
    86. 					<form class="form-horizontal" role="form">
    87. 						<div class="form-group">
    88. 							<label for="oldPwd" class="col-sm-2 control-label">原密码</label>
    89. 							<div class="col-sm-10" style="width: 300px;">
    90. 								<input type="text" class="form-control" id="oldPwd" style="width: 200%;">
    91. 							</div>
    92. 						</div>
    93. 						
    94. 						<div class="form-group">
    95. 							<label for="newPwd" class="col-sm-2 control-label">新密码</label>
    96. 							<div class="col-sm-10" style="width: 300px;">
    97. 								<input type="text" class="form-control" id="newPwd" style="width: 200%;">
    98. 							</div>
    99. 						</div>
    100. 						
    101. 						<div class="form-group">
    102. 							<label for="confirmPwd" class="col-sm-2 control-label">确认密码</label>
    103. 							<div class="col-sm-10" style="width: 300px;">
    104. 								<input type="text" class="form-control" id="confirmPwd" style="width: 200%;">
    105. 							</div>
    106. 						</div>
    107. 					</form>
    108. 				</div>
    109. 				<div class="modal-footer">
    110. 					<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
    111. 					<button type="button" class="btn btn-primary" data-dismiss="modal" onclick="window.location.href='login.html';">更新</button>
    112. 				</div>
    113. 			</div>
    114. 		</div>
    115. 	</div>
    116. 	
    117. 	<!-- 退出系统的模态窗口 -->
    118. 	<div class="modal fade" id="exitModal" role="dialog">
    119. 		<div class="modal-dialog" role="document" style="width: 30%;">
    120. 			<div class="modal-content">
    121. 				<div class="modal-header">
    122. 					<button type="button" class="close" data-dismiss="modal">
    123. 						<span aria-hidden="true">×</span>
    124. 					</button>
    125. 					<h4 class="modal-title">离开</h4>
    126. 				</div>
    127. 				<div class="modal-body">
    128. 					<p>您确定要退出系统吗？</p>
    129. 				</div>
    130. 				<div class="modal-footer">
    131. 					<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
    132. 					<button type="button" class="btn btn-primary" data-dismiss="modal" onclick="window.location.href='login.html';">确定</button>
    133. 				</div>
    134. 			</div>
    135. 		</div>
    136. 	</div>
    137. 	
    138. 	<!-- 顶部 -->
    139. 	<div id="top" style="height: 50px; background-color: #3C3C3C; width: 100%;">
    140. 		<div style="position: absolute; top: 5px; left: 0px; font-size: 30px; font-weight: 400; color: white; font-family: 'times new roman'">CRM &nbsp;<span style="font-size: 12px;">客户关系管理系统（LJL）</span></div>
    141. 		<div style="position: absolute; top: 15px; right: 15px;">
    142. 			<ul>
    143. 				<li class="dropdown user-dropdown">
    144. 					<a href="javascript:void(0)" style="text-decoration: none; color: white;" class="dropdown-toggle" data-toggle="dropdown">
    145. 						<span class="glyphicon glyphicon-user"></span>${sessionUser.name}<span class="caret"></span>
    146. 					</a>
    147. 					<ul class="dropdown-menu">
    148. 						<li><a href="settings/index.html"><span class="glyphicon glyphicon-wrench"></span> 系统设置</a></li>
    149. 						<li><a href="javascript:void(0)" data-toggle="modal" data-target="#myInformation"><span class="glyphicon glyphicon-file"></span> 我的资料</a></li>
    150. 						<li><a href="javascript:void(0)" data-toggle="modal" data-target="#editPwdModal"><span class="glyphicon glyphicon-edit"></span> 修改密码</a></li>
    151. 						<li><a href="javascript:void(0);" data-toggle="modal" data-target="#exitModal"><span class="glyphicon glyphicon-off"></span> 退出</a></li>
    152. 					</ul>
    153. 				</li>
    154. 			</ul>
    155. 		</div>
    156. 	</div>
    157. 	
    158. 	<!-- 中间 -->
    159. 	<div id="center" style="position: absolute;top: 50px; bottom: 30px; left: 0px; right: 0px;">
    160. 	
    161. 		<!-- 导航 -->
    162. 		<div id="navigation" style="left: 0px; width: 18%; position: relative; height: 100%; overflow:auto;">
    163. 		
    164. 			<ul id="no1" class="nav nav-pills nav-stacked">
    165. 				<li class="liClass"><a href="main/index.html" target="workareaFrame"><span class="glyphicon glyphicon-home"></span> 工作台</a></li>
    166. 				<li class="liClass"><a href="javascript:void(0);" target="workareaFrame"><span class="glyphicon glyphicon-tag"></span> 动态</a></li>
    167. 				<li class="liClass"><a href="javascript:void(0);" target="workareaFrame"><span class="glyphicon glyphicon-time"></span> 审批</a></li>
    168. 				<li class="liClass"><a href="javascript:void(0);" target="workareaFrame"><span class="glyphicon glyphicon-user"></span> 客户公海</a></li>
    169. 				<li class="liClass"><a href="activity/index.html" target="workareaFrame"><span class="glyphicon glyphicon-play-circle"></span> 市场活动</a></li>
    170. 				<li class="liClass"><a href="clue/index.html" target="workareaFrame"><span class="glyphicon glyphicon-search"></span> 线索（潜在客户）</a></li>
    171. 				<li class="liClass"><a href="customer/index.html" target="workareaFrame"><span class="glyphicon glyphicon-user"></span> 客户</a></li>
    172. 				<li class="liClass"><a href="contacts/index.html" target="workareaFrame"><span class="glyphicon glyphicon-earphone"></span> 联系人</a></li>
    173. 				<li class="liClass"><a href="transaction/index.html" target="workareaFrame"><span class="glyphicon glyphicon-usd"></span> 交易（商机）</a></li>
    174. 				<li class="liClass"><a href="visit/index.html" target="workareaFrame"><span class="glyphicon glyphicon-phone-alt"></span> 售后回访</a></li>
    175. 				<li class="liClass">
    176. 					<a href="#no2" class="collapsed" data-toggle="collapse"><span class="glyphicon glyphicon-stats"></span> 统计图表</a>
    177. 					<ul id="no2" class="nav nav-pills nav-stacked collapse">
    178. 						<li class="liClass"><a href="chart/activity/index.html" target="workareaFrame">&nbsp;&nbsp;&nbsp;<span class="glyphicon glyphicon-chevron-right"></span> 市场活动统计图表</a></li>
    179. 						<li class="liClass"><a href="chart/clue/index.html" target="workareaFrame">&nbsp;&nbsp;&nbsp;<span class="glyphicon glyphicon-chevron-right"></span> 线索统计图表</a></li>
    180. 						<li class="liClass"><a href="chart/customerAndContacts/index.html" target="workareaFrame">&nbsp;&nbsp;&nbsp;<span class="glyphicon glyphicon-chevron-right"></span> 客户和联系人统计图表</a></li>
    181. 						<li class="liClass"><a href="chart/transaction/index.html" target="workareaFrame">&nbsp;&nbsp;&nbsp;<span class="glyphicon glyphicon-chevron-right"></span> 交易统计图表</a></li>
    182. 					</ul>
    183. 				</li>
    184. 				<li class="liClass"><a href="javascript:void(0);" target="workareaFrame"><span class="glyphicon glyphicon-file"></span> 报表</a></li>
    185. 				<li class="liClass"><a href="javascript:void(0);" target="workareaFrame"><span class="glyphicon glyphicon-shopping-cart"></span> 销售订单</a></li>
    186. 				<li class="liClass"><a href="javascript:void(0);" target="workareaFrame"><span class="glyphicon glyphicon-send"></span> 发货单</a></li>
    187. 				<li class="liClass"><a href="javascript:void(0);" target="workareaFrame"><span class="glyphicon glyphicon-earphone"></span> 跟进</a></li>
    188. 				<li class="liClass"><a href="javascript:void(0);" target="workareaFrame"><span class="glyphicon glyphicon-leaf"></span> 产品</a></li>
    189. 				<li class="liClass"><a href="javascript:void(0);" target="workareaFrame"><span class="glyphicon glyphicon-usd"></span> 报价</a></li>
    190. 			</ul>
    191. 			
    192. 			<!-- 分割线 -->
    193. 			<div id="divider1" style="position: absolute; top : 0px; right: 0px; width: 1px; height: 100% ; background-color: #B3B3B3;"></div>
    194. 		</div>
    195. 		
    196. 		<!-- 工作区 -->
    197. 		<div id="workarea" style="position: absolute; top : 0px; left: 18%; width: 82%; height: 100%;">
    198. 			<iframe style="border-width: 0px; width: 100%; height: 100%;" name="workareaFrame"></iframe>
    199. 		</div>
    200. 		
    201. 	</div>
    202. 	
    203. 	<div id="divider2" style="height: 1px; width: 100%; position: absolute;bottom: 30px; background-color: #B3B3B3;"></div>
    204. 	
    205. 	<!-- 底部 -->
    206. 	<div id="down" style="height: 30px; width: 100%; position: absolute;bottom: 0px;"></div>
    207. 	
    208. </body>
    209. </html>

    项目效果展示

     直接点击登录

    输入用户名后点击登录

     全部输入后

     输入正确的用户名和密码

    数据库用户表信息如下所示

    输入李四信息登录

    输入张三信息登录

    已经进入到了工作台主页面

  • 相关阅读:
    NEXUS 4 通过superU实现root
    Windows本地安装nginx，修改端口号，跨域配置
    这18个网站能让你的页面背景炫酷起来
    C++_面向对象的引入
    供热管网安全运行监测，提升供热管网安全性能
    解决Flume数据采集中出现的几个问题
    node笔记_koa框架是什么？
    【Unity精华一记】特殊文件夹
    面试官：说说JVM内存整体结构？
    05 常见微服务项目结构
  • 原文地址：https://blog.csdn.net/weixin_59334478/article/details/125600525