当前位置:网站首页>第3章业务功能开发(用户登录)
第3章业务功能开发(用户登录)
2022-07-07 15:39:00 【做一道光】
1.客户需求(需求开发说明书)
用户在登录页面,输入用户名和密码,点击"登录"按钮或者回车,完成用户登录的功能.
*用户名和密码不能为空
*用户名或者密码错误,用户已过期,用户状态被锁定,ip受限 都不能登录成功
*登录成功之后,所有业务页面显示当前用户的名称
*实现10天记住密码
*登录成功之后,跳转到业务主页面
*登录失败,页面不跳转,提示信息
2.首先明确需求,规划程序访问流程,画好UML顺序图再编写代码,方便以后对项目进行管理,同时也是开发规范的硬性要求
3.前面已经使用mybatis逆向工程创建了UserMapper文件,自动创建的文件中已经包含了增删改查等基本操作语句,为了理解开发的流程,再自己写一个查询用户的语句添加进去。
mapper文件目录位置
UserMapper接口
package com.it.crm.settings.mapper;
import com.it.crm.settings.entity.User;
import java.util.Map;
public interface UserMapper {
/**
* This method was generated by MyBatis Generator.
* This method corresponds to the database table tbl_user
*
* @mbggenerated Wed Jun 29 12:20:46 CST 2022
*/
int deleteByPrimaryKey(String id);
/**
* This method was generated by MyBatis Generator.
* This method corresponds to the database table tbl_user
*
* @mbggenerated Wed Jun 29 12:20:46 CST 2022
*/
int insert(User record);
/**
* This method was generated by MyBatis Generator.
* This method corresponds to the database table tbl_user
*
* @mbggenerated Wed Jun 29 12:20:46 CST 2022
*/
int insertSelective(User record);
/**
* This method was generated by MyBatis Generator.
* This method corresponds to the database table tbl_user
*
* @mbggenerated Wed Jun 29 12:20:46 CST 2022
*/
User selectByPrimaryKey(String id);
/**
* This method was generated by MyBatis Generator.
* This method corresponds to the database table tbl_user
*
* @mbggenerated Wed Jun 29 12:20:46 CST 2022
*/
int updateByPrimaryKeySelective(User record);
/**
* This method was generated by MyBatis Generator.
* This method corresponds to the database table tbl_user
*
* @mbggenerated Wed Jun 29 12:20:46 CST 2022
*/
int updateByPrimaryKey(User record);
/*
根据账号和密码查询用户
*/
User selectUserByActAndPwd(Map<String,Object> map);
}
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.it.crm.settings.mapper.UserMapper" >
<resultMap id="BaseResultMap" type="com.it.crm.settings.entity.User" >
<!--
WARNING - @mbggenerated
This element is automatically generated by MyBatis Generator, do not modify.
This element was generated on Wed Jun 29 12:20:46 CST 2022.
-->
<id column="id" property="id" jdbcType="CHAR" />
<result column="login_act" property="loginAct" jdbcType="VARCHAR" />
<result column="name" property="name" jdbcType="VARCHAR" />
<result column="login_pwd" property="loginPwd" jdbcType="VARCHAR" />
<result column="email" property="email" jdbcType="VARCHAR" />
<result column="expire_time" property="expireTime" jdbcType="CHAR" />
<result column="lock_state" property="lockState" jdbcType="CHAR" />
<result column="deptno" property="deptno" jdbcType="CHAR" />
<result column="allow_ips" property="allowIps" jdbcType="VARCHAR" />
<result column="createTime" property="createtime" jdbcType="CHAR" />
<result column="create_by" property="createBy" jdbcType="VARCHAR" />
<result column="edit_time" property="editTime" jdbcType="CHAR" />
<result column="edit_by" property="editBy" jdbcType="VARCHAR" />
</resultMap>
<sql id="Base_Column_List" >
<!--
WARNING - @mbggenerated
This element is automatically generated by MyBatis Generator, do not modify.
This element was generated on Wed Jun 29 12:20:46 CST 2022.
-->
id, login_act, name, login_pwd, email, expire_time, lock_state, deptno, allow_ips,
createTime, create_by, edit_time, edit_by
</sql>
<select id="selectByPrimaryKey" resultMap="BaseResultMap" parameterType="java.lang.String" >
<!--
WARNING - @mbggenerated
This element is automatically generated by MyBatis Generator, do not modify.
This element was generated on Wed Jun 29 12:20:46 CST 2022.
-->
select
<include refid="Base_Column_List" />
from tbl_user
where id = #{id,jdbcType=CHAR}
</select>
<delete id="deleteByPrimaryKey" parameterType="java.lang.String" >
<!--
WARNING - @mbggenerated
This element is automatically generated by MyBatis Generator, do not modify.
This element was generated on Wed Jun 29 12:20:46 CST 2022.
-->
delete from tbl_user
where id = #{id,jdbcType=CHAR}
</delete>
<insert id="insert" parameterType="com.it.crm.settings.entity.User" >
<!--
WARNING - @mbggenerated
This element is automatically generated by MyBatis Generator, do not modify.
This element was generated on Wed Jun 29 12:20:46 CST 2022.
-->
insert into tbl_user (id, login_act, name,
login_pwd, email, expire_time,
lock_state, deptno, allow_ips,
createTime, create_by, edit_time,
edit_by)
values (#{id,jdbcType=CHAR}, #{loginAct,jdbcType=VARCHAR}, #{name,jdbcType=VARCHAR},
#{loginPwd,jdbcType=VARCHAR}, #{email,jdbcType=VARCHAR}, #{expireTime,jdbcType=CHAR},
#{lockState,jdbcType=CHAR}, #{deptno,jdbcType=CHAR}, #{allowIps,jdbcType=VARCHAR},
#{createtime,jdbcType=CHAR}, #{createBy,jdbcType=VARCHAR}, #{editTime,jdbcType=CHAR},
#{editBy,jdbcType=VARCHAR})
</insert>
<insert id="insertSelective" parameterType="com.it.crm.settings.entity.User" >
<!--
WARNING - @mbggenerated
This element is automatically generated by MyBatis Generator, do not modify.
This element was generated on Wed Jun 29 12:20:46 CST 2022.
-->
insert into tbl_user
<trim prefix="(" suffix=")" suffixOverrides="," >
<if test="id != null" >
id,
</if>
<if test="loginAct != null" >
login_act,
</if>
<if test="name != null" >
name,
</if>
<if test="loginPwd != null" >
login_pwd,
</if>
<if test="email != null" >
email,
</if>
<if test="expireTime != null" >
expire_time,
</if>
<if test="lockState != null" >
lock_state,
</if>
<if test="deptno != null" >
deptno,
</if>
<if test="allowIps != null" >
allow_ips,
</if>
<if test="createtime != null" >
createTime,
</if>
<if test="createBy != null" >
create_by,
</if>
<if test="editTime != null" >
edit_time,
</if>
<if test="editBy != null" >
edit_by,
</if>
</trim>
<trim prefix="values (" suffix=")" suffixOverrides="," >
<if test="id != null" >
#{id,jdbcType=CHAR},
</if>
<if test="loginAct != null" >
#{loginAct,jdbcType=VARCHAR},
</if>
<if test="name != null" >
#{name,jdbcType=VARCHAR},
</if>
<if test="loginPwd != null" >
#{loginPwd,jdbcType=VARCHAR},
</if>
<if test="email != null" >
#{email,jdbcType=VARCHAR},
</if>
<if test="expireTime != null" >
#{expireTime,jdbcType=CHAR},
</if>
<if test="lockState != null" >
#{lockState,jdbcType=CHAR},
</if>
<if test="deptno != null" >
#{deptno,jdbcType=CHAR},
</if>
<if test="allowIps != null" >
#{allowIps,jdbcType=VARCHAR},
</if>
<if test="createtime != null" >
#{createtime,jdbcType=CHAR},
</if>
<if test="createBy != null" >
#{createBy,jdbcType=VARCHAR},
</if>
<if test="editTime != null" >
#{editTime,jdbcType=CHAR},
</if>
<if test="editBy != null" >
#{editBy,jdbcType=VARCHAR},
</if>
</trim>
</insert>
<update id="updateByPrimaryKeySelective" parameterType="com.it.crm.settings.entity.User" >
<!--
WARNING - @mbggenerated
This element is automatically generated by MyBatis Generator, do not modify.
This element was generated on Wed Jun 29 12:20:46 CST 2022.
-->
update tbl_user
<set >
<if test="loginAct != null" >
login_act = #{loginAct,jdbcType=VARCHAR},
</if>
<if test="name != null" >
name = #{name,jdbcType=VARCHAR},
</if>
<if test="loginPwd != null" >
login_pwd = #{loginPwd,jdbcType=VARCHAR},
</if>
<if test="email != null" >
email = #{email,jdbcType=VARCHAR},
</if>
<if test="expireTime != null" >
expire_time = #{expireTime,jdbcType=CHAR},
</if>
<if test="lockState != null" >
lock_state = #{lockState,jdbcType=CHAR},
</if>
<if test="deptno != null" >
deptno = #{deptno,jdbcType=CHAR},
</if>
<if test="allowIps != null" >
allow_ips = #{allowIps,jdbcType=VARCHAR},
</if>
<if test="createtime != null" >
createTime = #{createtime,jdbcType=CHAR},
</if>
<if test="createBy != null" >
create_by = #{createBy,jdbcType=VARCHAR},
</if>
<if test="editTime != null" >
edit_time = #{editTime,jdbcType=CHAR},
</if>
<if test="editBy != null" >
edit_by = #{editBy,jdbcType=VARCHAR},
</if>
</set>
where id = #{id,jdbcType=CHAR}
</update>
<update id="updateByPrimaryKey" parameterType="com.it.crm.settings.entity.User" >
<!--
WARNING - @mbggenerated
This element is automatically generated by MyBatis Generator, do not modify.
This element was generated on Wed Jun 29 12:20:46 CST 2022.
-->
update tbl_user
set login_act = #{loginAct,jdbcType=VARCHAR},
name = #{name,jdbcType=VARCHAR},
login_pwd = #{loginPwd,jdbcType=VARCHAR},
email = #{email,jdbcType=VARCHAR},
expire_time = #{expireTime,jdbcType=CHAR},
lock_state = #{lockState,jdbcType=CHAR},
deptno = #{deptno,jdbcType=CHAR},
allow_ips = #{allowIps,jdbcType=VARCHAR},
createTime = #{createtime,jdbcType=CHAR},
create_by = #{createBy,jdbcType=VARCHAR},
edit_time = #{editTime,jdbcType=CHAR},
edit_by = #{editBy,jdbcType=VARCHAR}
where id = #{id,jdbcType=CHAR}
</update>
<select id="selectUserByActAndPwd" parameterType="map" resultMap="BaseResultMap">
select
<include refid="Base_Column_List"/>
from tbl_user
where login_act=#{loginAct} and login_pwd=#{loginPwd}
</select>
</mapper>
4.创建service层文件
UserService接口
package com.it.crm.settings.service;
import com.it.crm.settings.entity.User;
import java.util.Map;
public interface UserService {
User queryUserByActAndPwd(Map<String,Object> map);
}
UserServiceImpl类
package com.it.crm.settings.service.impl;
import com.it.crm.settings.entity.User;
import com.it.crm.settings.mapper.UserMapper;
import com.it.crm.settings.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.Map;
@Service("userService")
public class UserServiceImpl implements UserService {
@Autowired
private UserMapper userMapper;
@Override
public User queryUserByActAndPwd(Map<String, Object> map) {
return userMapper.selectUserByActAndPwd(map);
}
}
5.创建web层下的controller层
UserController类
package com.it.crm.settings.web.controller;
import com.it.crm.commons.contants.Contants;
import com.it.crm.commons.entity.ReturnObject;
import com.it.crm.commons.utils.DateUtils;
import com.it.crm.settings.entity.User;
import com.it.crm.settings.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.HttpRequest;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.HashMap;
import java.util.Map;
@Controller
public class UserController {
@Autowired
private UserService userService;
@RequestMapping(value = "/settings/qx/user/toLogin.do")
public String toLogin(){
return "settings/qx/user/login";
}
@RequestMapping(value = "/settings/qx/user/login.do")
@ResponseBody
public Object login(String loginAct, String loginPwd, String isRemPwd, HttpServletRequest request, HttpSession session){
//封装参数
Map<String,Object> map=new HashMap<>();
map.put("loginAct",loginAct);
map.put("loginPwd",loginPwd);
map.put("isRemPwd",isRemPwd);
//调用service层方法,查询用户
User user = userService.queryUserByActAndPwd(map);
//根据查询结果生成响应信息
ReturnObject returnObject=new ReturnObject();
if (user==null){
//登录失败,用户名或密码错误
returnObject.setCode(Contants.RETURN_OBJECT_CODE_FAIL);
returnObject.setMessage("用户名或密码错误");
}else {//进一步判断账号是否合法
if (DateUtils.formateDateTime(new Date()).compareTo(user.getExpireTime())>0){
//登录失败,账号已过期
returnObject.setCode(Contants.RETURN_OBJECT_CODE_FAIL);
returnObject.setMessage("账号已经过期");
}else if ("0".equals(user.getLockState())){
//登录失败,状态被锁定
returnObject.setCode(Contants.RETURN_OBJECT_CODE_FAIL);
returnObject.setMessage("状态被锁定");
}else if (!user.getAllowIps().contains(request.getRemoteAddr())){
//登录失败,ip受限
returnObject.setCode(Contants.RETURN_OBJECT_CODE_FAIL);
returnObject.setMessage("ip受限");
}else{
//登录成功
returnObject.setCode(Contants.RETURN_OBJECT_CODE_SUCCESS);
//把user保存到session中
session.setAttribute(Contants.SESSION_USER,user);
}
}
return returnObject;
}
}
UserController类调用了该项目中的通用层commons下多个类
如下所示
Contants类
把条件常量用封装好的类中的方法表示,有利于后期维护时,更改条件值时只更新该处,不需要更改整个项目
package com.it.crm.commons.contants;
//定义常量类,有利于后期维护
public class Contants {
//保存ReturnObject类中的Code值
public static final String RETURN_OBJECT_CODE_SUCCESS="1";//成功
public static final String RETURN_OBJECT_CODE_FAIL="0";//失败
//保存session中当前用户的key
public static final String SESSION_USER="sessionUser";
}
ReturnObject类
package com.it.crm.commons.entity;
public class ReturnObject {
private String code;//处理成功或者失败的标记,1:成功,0:失败
private String message;//提示信息
private Object returnData;//返回其他数据
public String getCode() {
return code;
}
public void setCode(String code) {
this.code = code;
}
public String getMessage() {
return message;
}
public void setMessage(String message) {
this.message = message;
}
public Object getReturnData() {
return returnData;
}
public void setReturnData(Object returnData) {
this.returnData = returnData;
}
@Override
public String toString() {
return "ReturnObject{" +
"code='" + code + '\'' +
", message='" + message + '\'' +
", returnData=" + returnData +
'}';
}
}
DateUtils类(时间工具类)
package com.it.crm.commons.utils;
import java.text.SimpleDateFormat;
import java.util.Date;
//对Date类型数据进行处理的工具类
public class DateUtils {
//对指定的date对象进行格式化
public static String formateDateTime(Date date){
SimpleDateFormat sdf=new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
String format = sdf.format(date);
return format;
}
//对指定的date对象进行格式化
public static String formateDate(Date date){
SimpleDateFormat sdf=new SimpleDateFormat("yyyy-MM-dd");
String format = sdf.format(date);
return format;
}
//对指定的date对象进行格式化
public static String formateTime(Date date){
SimpleDateFormat sdf=new SimpleDateFormat("HH:mm:ss");
String format = sdf.format(date);
return format;
}
}
6.创建webapp下的登录页面
login.jsp
使用ajax异步传输判断,如果账号密码为空直接弹出提示框,不为空时进入UserController类 进行账号密码的各种验证,全部正确跳转到WorkBenchIndexContoller类,不正确时在登录页面上显示错误信息。
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
String basePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/";
%>
<html>
<head>
<meta charset="UTF-8">
<base href="<%=basePath%>">
<link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
<script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(function () {
//给登录按钮添加单击事件
$("#loginBtn").click(function () {
//收集参数
var loginAct=$.trim($("#loginAct").val());
var loginPwd=$.trim($("#loginPwd").val());
var isRemPwd=$("#isRemPwd").prop("checked");
//表单验证
if (loginAct==""){
alert("用户名不能为空!");
return;
}if (loginPwd==""){
alert("密码不能为空!");
return;
}
//点击登录后显示正在验证
$("#msg").html("正在努力验证中。。。")
//发送请求
$.ajax({
url:'settings/qx/user/login.do',
data:{
loginAct:loginAct,
loginPwd:loginPwd,
isRemPwd:isRemPwd
},
type:'post',
dataType:'json',
success:function (data) {
if (data.code=="1"){
//登录成功,跳转到业务的主页面
window.location.href="workbench/index.do";
}else {
//登录失败,显示提示信息
$("#msg").html(data.message);
}
}
});
});
});
</script>
</head>
<body>
<div style="position: absolute; top: 0px; left: 0px; width: 60%;">
<img src="image/IMG_7114.JPG" style="width: 100%; height: 90%; position: relative; top: 50px;">
</div>
<div id="top" style="height: 50px; background-color: #3C3C3C; width: 100%;">
<div style="position: absolute; top: 5px; left: 0px; font-size: 30px; font-weight: 400; color: white; font-family: 'times new roman'">CRM <span style="font-size: 12px;">客户关系管理系统</span></div>
</div>
<div style="position: absolute; top: 120px; right: 100px;width:450px;height:400px;border:1px solid #D5D5D5">
<div style="position: absolute; top: 0px; right: 60px;">
<div class="page-header">
<h1>登录</h1>
</div>
<form action="workbench/index.html" class="form-horizontal" role="form">
<div class="form-group form-group-lg">
<div style="width: 350px;">
<input class="form-control" id="loginAct" type="text" placeholder="用户名">
</div>
<div style="width: 350px; position: relative;top: 20px;">
<input class="form-control" id="loginPwd" type="password" placeholder="密码">
</div>
<div class="checkbox" style="position: relative;top: 30px; left: 10px;">
<label>
<input type="checkbox" id="isRemPwd"> 十天内免登录
</label>
<span id="msg" style="color: red;"></span>
</div>
<button type="button" id="loginBtn" class="btn btn-primary btn-lg btn-block" style="width: 350px; position: relative;top: 45px;">登录</button>
</div>
</form>
</div>
</div>
</body>
</html>
7.创建workbench包下的web层
WorkBenchIndexContoller类
登录成功时跳转到该类
package com.it.crm.workbench.web.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
@Controller
public class WorkBenchIndexContoller {
@RequestMapping(value = "/workbench/index.do")
public String index(){
//跳转到业务主页面
return "workbench/index";
}
}
8.创建工作台首页
index.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
String basePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/";
%>
<html>
<head>
<meta charset="UTF-8">
<base href="<%=basePath%>">
<link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
<script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
//页面加载完毕
$(function(){
//导航中所有文本颜色为黑色
$(".liClass > a").css("color" , "black");
//默认选中导航菜单中的第一个菜单项
$(".liClass:first").addClass("active");
//第一个菜单项的文字变成白色
$(".liClass:first > a").css("color" , "white");
//给所有的菜单项注册鼠标单击事件
$(".liClass").click(function(){
//移除所有菜单项的激活状态
$(".liClass").removeClass("active");
//导航中所有文本颜色为黑色
$(".liClass > a").css("color" , "black");
//当前项目被选中
$(this).addClass("active");
//当前项目颜色变成白色
$(this).children("a").css("color","white");
});
window.open("main/index.html","workareaFrame");
});
</script>
</head>
<body>
<!-- 我的资料 -->
<div class="modal fade" id="myInformation" role="dialog">
<div class="modal-dialog" role="document" style="width: 30%;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">我的资料</h4>
</div>
<div class="modal-body">
<div style="position: relative; left: 40px;">
姓名:<b>张三</b><br><br>
登录帐号:<b>zhangsan</b><br><br>
组织机构:<b>1005,市场部,二级部门</b><br><br>
邮箱:<b>[email protected]</b><br><br>
失效时间:<b>2017-02-14 10:10:10</b><br><br>
允许访问IP:<b>127.0.0.1,192.168.100.2</b>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
</div>
</div>
</div>
</div>
<!-- 修改密码的模态窗口 -->
<div class="modal fade" id="editPwdModal" role="dialog">
<div class="modal-dialog" role="document" style="width: 70%;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">修改密码</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="oldPwd" class="col-sm-2 control-label">原密码</label>
<div class="col-sm-10" style="width: 300px;">
<input type="text" class="form-control" id="oldPwd" style="width: 200%;">
</div>
</div>
<div class="form-group">
<label for="newPwd" class="col-sm-2 control-label">新密码</label>
<div class="col-sm-10" style="width: 300px;">
<input type="text" class="form-control" id="newPwd" style="width: 200%;">
</div>
</div>
<div class="form-group">
<label for="confirmPwd" class="col-sm-2 control-label">确认密码</label>
<div class="col-sm-10" style="width: 300px;">
<input type="text" class="form-control" id="confirmPwd" style="width: 200%;">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary" data-dismiss="modal" onclick="window.location.href='login.html';">更新</button>
</div>
</div>
</div>
</div>
<!-- 退出系统的模态窗口 -->
<div class="modal fade" id="exitModal" role="dialog">
<div class="modal-dialog" role="document" style="width: 30%;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">离开</h4>
</div>
<div class="modal-body">
<p>您确定要退出系统吗?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary" data-dismiss="modal" onclick="window.location.href='login.html';">确定</button>
</div>
</div>
</div>
</div>
<!-- 顶部 -->
<div id="top" style="height: 50px; background-color: #3C3C3C; width: 100%;">
<div style="position: absolute; top: 5px; left: 0px; font-size: 30px; font-weight: 400; color: white; font-family: 'times new roman'">CRM <span style="font-size: 12px;">客户关系管理系统(LJL)</span></div>
<div style="position: absolute; top: 15px; right: 15px;">
<ul>
<li class="dropdown user-dropdown">
<a href="javascript:void(0)" style="text-decoration: none; color: white;" class="dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-user"></span>${sessionUser.name}<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="settings/index.html"><span class="glyphicon glyphicon-wrench"></span> 系统设置</a></li>
<li><a href="javascript:void(0)" data-toggle="modal" data-target="#myInformation"><span class="glyphicon glyphicon-file"></span> 我的资料</a></li>
<li><a href="javascript:void(0)" data-toggle="modal" data-target="#editPwdModal"><span class="glyphicon glyphicon-edit"></span> 修改密码</a></li>
<li><a href="javascript:void(0);" data-toggle="modal" data-target="#exitModal"><span class="glyphicon glyphicon-off"></span> 退出</a></li>
</ul>
</li>
</ul>
</div>
</div>
<!-- 中间 -->
<div id="center" style="position: absolute;top: 50px; bottom: 30px; left: 0px; right: 0px;">
<!-- 导航 -->
<div id="navigation" style="left: 0px; width: 18%; position: relative; height: 100%; overflow:auto;">
<ul id="no1" class="nav nav-pills nav-stacked">
<li class="liClass"><a href="main/index.html" target="workareaFrame"><span class="glyphicon glyphicon-home"></span> 工作台</a></li>
<li class="liClass"><a href="javascript:void(0);" target="workareaFrame"><span class="glyphicon glyphicon-tag"></span> 动态</a></li>
<li class="liClass"><a href="javascript:void(0);" target="workareaFrame"><span class="glyphicon glyphicon-time"></span> 审批</a></li>
<li class="liClass"><a href="javascript:void(0);" target="workareaFrame"><span class="glyphicon glyphicon-user"></span> 客户公海</a></li>
<li class="liClass"><a href="activity/index.html" target="workareaFrame"><span class="glyphicon glyphicon-play-circle"></span> 市场活动</a></li>
<li class="liClass"><a href="clue/index.html" target="workareaFrame"><span class="glyphicon glyphicon-search"></span> 线索(潜在客户)</a></li>
<li class="liClass"><a href="customer/index.html" target="workareaFrame"><span class="glyphicon glyphicon-user"></span> 客户</a></li>
<li class="liClass"><a href="contacts/index.html" target="workareaFrame"><span class="glyphicon glyphicon-earphone"></span> 联系人</a></li>
<li class="liClass"><a href="transaction/index.html" target="workareaFrame"><span class="glyphicon glyphicon-usd"></span> 交易(商机)</a></li>
<li class="liClass"><a href="visit/index.html" target="workareaFrame"><span class="glyphicon glyphicon-phone-alt"></span> 售后回访</a></li>
<li class="liClass">
<a href="#no2" class="collapsed" data-toggle="collapse"><span class="glyphicon glyphicon-stats"></span> 统计图表</a>
<ul id="no2" class="nav nav-pills nav-stacked collapse">
<li class="liClass"><a href="chart/activity/index.html" target="workareaFrame"> <span class="glyphicon glyphicon-chevron-right"></span> 市场活动统计图表</a></li>
<li class="liClass"><a href="chart/clue/index.html" target="workareaFrame"> <span class="glyphicon glyphicon-chevron-right"></span> 线索统计图表</a></li>
<li class="liClass"><a href="chart/customerAndContacts/index.html" target="workareaFrame"> <span class="glyphicon glyphicon-chevron-right"></span> 客户和联系人统计图表</a></li>
<li class="liClass"><a href="chart/transaction/index.html" target="workareaFrame"> <span class="glyphicon glyphicon-chevron-right"></span> 交易统计图表</a></li>
</ul>
</li>
<li class="liClass"><a href="javascript:void(0);" target="workareaFrame"><span class="glyphicon glyphicon-file"></span> 报表</a></li>
<li class="liClass"><a href="javascript:void(0);" target="workareaFrame"><span class="glyphicon glyphicon-shopping-cart"></span> 销售订单</a></li>
<li class="liClass"><a href="javascript:void(0);" target="workareaFrame"><span class="glyphicon glyphicon-send"></span> 发货单</a></li>
<li class="liClass"><a href="javascript:void(0);" target="workareaFrame"><span class="glyphicon glyphicon-earphone"></span> 跟进</a></li>
<li class="liClass"><a href="javascript:void(0);" target="workareaFrame"><span class="glyphicon glyphicon-leaf"></span> 产品</a></li>
<li class="liClass"><a href="javascript:void(0);" target="workareaFrame"><span class="glyphicon glyphicon-usd"></span> 报价</a></li>
</ul>
<!-- 分割线 -->
<div id="divider1" style="position: absolute; top : 0px; right: 0px; width: 1px; height: 100% ; background-color: #B3B3B3;"></div>
</div>
<!-- 工作区 -->
<div id="workarea" style="position: absolute; top : 0px; left: 18%; width: 82%; height: 100%;">
<iframe style="border-width: 0px; width: 100%; height: 100%;" name="workareaFrame"></iframe>
</div>
</div>
<div id="divider2" style="height: 1px; width: 100%; position: absolute;bottom: 30px; background-color: #B3B3B3;"></div>
<!-- 底部 -->
<div id="down" style="height: 30px; width: 100%; position: absolute;bottom: 0px;"></div>
</body>
</html>
项目效果展示
直接点击登录
输入用户名后点击登录
全部输入后
输入正确的用户名和密码
数据库用户表信息如下所示
输入李四信息登录
输入张三信息登录
已经进入到了工作台主页面
边栏推荐
- 如何在软件研发阶段落地安全实践
- 99% 用户在 Power BI 云端报表常犯错误
- Test case management tool recommendation
- Flask build API service SQL configuration file
- SlashData开发者工具榜首等你而定!!!
- 从DevOps到MLOps:IT工具怎样向AI工具进化?
- 专精特新软件开发类企业实力指数发布,麒麟信安荣誉登榜
- Devops' operational and commercial benefits Guide
- 防火墙系统崩溃、文件丢失的修复方法,材料成本0元
- LeetCode 1981. Minimize the difference between the target value and the selected element one question per day
猜你喜欢
随机推荐
浅谈 Apache Doris FE 处理查询 SQL 源码解析
测试用例管理工具推荐
LeetCode 1043. Separate the array to get the maximum and daily questions
大笨钟(Lua)
【网络攻防原理与技术】第4章:网络扫描技术
The process of creating custom controls in QT to encapsulating them into toolbars (II): encapsulating custom controls into toolbars
Mrs offline data analysis: process OBS data through Flink job
On Apache Doris Fe processing query SQL source code analysis
麒麟信安加入宁夏商用密码协会
Several best practices for managing VDI
Solidity 开发环境搭建
99%的人都不知道|私有化部署还永久免费的即时通讯软件!
【TPM2.0原理及应用指南】 5、7、8章
【饭谈】如何设计好一款测试平台?
Sator launched Web3 game "satorspace" and launched hoobi
Biped robot controlled by Arduino
麒麟信安携异构融合云金融信创解决方案亮相第十五届湖南地区金融科技交流会
PLC:自动纠正数据集噪声,来洗洗数据集吧 | ICLR 2021 Spotlight
L1-027 出租(Lua)
The computer cannot add a domain, and the Ping domain name is displayed as the public IP. What is the problem? How to solve it?