实习项目：CRM管理系统

项目文件代码已存储于github：https://github.com/elbadaernU404/projcode

1.前期准备

首先完成了MySql、JspStudy的安装，测试了数据库的连接，tomcat服务器的部署，以及配置tomcat的动态更新等操作。
接下来主要是做了对Html语法的复习，并尝试对后台登陆界面的编程。
在项目文件的根目录下/web中创建register.html文件进行测试，通过do get的方法发送网页请求，以及添加各类可视化元素，完成注册界面。
同样在/web中创建login.html文件，通过do post的方法发送网页请求（隐藏显示的细节）完成登陆界面。

2.注册功能&服务器与数据库的连接

1.在项目目录/src里创建main文件夹，在main文件夹中分别创建controller、dao、model、service、util五个子文件夹，并一一创建相对应的java class文件，在web.xml中定义。

2.在mysql数据库中找到user表，并通过新建查询测试创建用户的查询语句适合当前数据库版本。

3.编写UserServlet.java获取表单的属性，并完成注册功能结束后的跳转步骤，实现register注册页面向login登陆页面的跳转。

package main.controller;
import main.model.User;
import main.service.UserService;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
/**
 * @author rtl
 * @site elbadaernu404.github.io
 * @company suzhou university
 * @create 2020-06-21 16:40
 */
public class UserServlet extends HttpServlet{

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//获取表单中的属性值
        String username=req.getParameter("name");
        String password=req.getParameter("password");
//新建一个user对象
        User user=new User();
        user.setName(username);
        user.setPassword(password);
        //调用service，完成最后的注册功能
        UserService userService=new UserService();
        userService.addUser(user);
//注册完成后，跳转到登录页面
        req.getRequestDispatcher("/login.jsp").forward(req,resp);
    }

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    }
}

4.编写UserDao.java完成数据库内容的导入，类型为Interface接口类型。

package main.dao;
import main.model.User;
/**
 * @author rtl
 * @site elbadaernu404.github.io
 * @company suzhou university
 * @create 2020-06-21 16:40
 */
public interface UserDao {

    //用户注册的功能
    public void addUser(User user);
}

5.编写User.java，实现具体的注册功能的写入。

package main.model;
/**
 * @author rtl
 * @site elbadaernu404.github.io
 * @company suzhou university
 * @create 2020-06-21 16:40
 */
public class User {
    private int id;
    private String name;
    private String password;
    public User() {

    }
    public User(int id, String name, String password) {
        this.id = id;
        this.name = name;
        this.password = password;
    }

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    @Override
    public String toString() {
        return "User{" +
                "id=" + id +
                ", name='" + name + '\'' +
                ", password='" + password + '\'' +
                '}';
    }
}

6.编写UserService.java将用户数据操作到数据库当中，完成tomcat到数据库的映射功能。

package main.service;
import main.dao.UserDao;
import main.model.User;
import main.util.JdbcUtil;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.SQLException;
/**
 * @author rtl
 * @site elbadaernu404.github.io
 * @company suzhou university
 * @create 2020-06-21 16:40
 */
public class UserService implements UserDao {
    PreparedStatement ps=null;
    @Override
    public void addUser(User user) {
        //真正的把用户注册的数据进行操作到数据库中
        String sql="INSERT into user(name,password) values(?,?)";
        //？是占位符的意思
        Connection conn = null;
            conn = JdbcUtil.getConn();

        try {
            ps= conn.prepareStatement(sql);
           ps.setString(1,user.getName());
           ps.setString(2,user.getPassword());
           ps.executeUpdate();
        } catch (SQLException e) {
            e.printStackTrace();
        }
    }
}

7.编写JdbcUtil.java，添加本地数据库链接及Jdbc功能，完成Jdbc驱动。

package main.util;
import java.sql.*;

public class JdbcUtil {
    static{
        try {
            Class.forName("com.mysql.jdbc.Driver");//加载数据库驱动
        }
        catch (ClassNotFoundException e) {
            e.printStackTrace();
        }
    }

    private JdbcUtil() {}

    public static Connection getConn(){
        Connection conn = null;
        try {
            conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/crmpro?useUnicode=true&characterEncoding=utf-8", "root","root");//连接数据库
        }
        catch(SQLException e){
            e.printStackTrace();
        }
        return conn;
    }

    public static void closeConn(Connection conn){
        try {
            if(conn != null ){
                conn.close();
                conn = null;
            }
        } catch (SQLException e) {
            e.printStackTrace();
        }
    }


    public static PreparedStatement getPStmt(Connection conn,String sql){
        PreparedStatement pstmt = null;
        try {
            pstmt = conn.prepareStatement(sql);
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return pstmt;
    }

    public static void closeStmt(Statement stmt){
        try {
            if(stmt != null ){
                stmt.close();
                stmt = null;
            }
        } catch (SQLException e) {
            e.printStackTrace();
        }

    }

    public static ResultSet executeQuery(Statement stmt,String sql){
        ResultSet rs = null;
        try {
            rs = stmt.executeQuery(sql);
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return rs;
    }

    public static void closeRs(ResultSet rs){
        try {
            if(rs != null ){
                rs.close();
                rs = null;
            }
        } catch (SQLException e) {
            e.printStackTrace();
        }
    }

    public static ResultSet executeQuery(Connection conn,String sql){//重载
        ResultSet rs = null;
        try {
            rs = conn.createStatement().executeQuery(sql);
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return rs;
    }
}

8.添加tomcat-jdbc.jar包，完成驱动的功能，使得所有文件可以相互调用，实现注册信息录入本地数据库，注册功能基本完成。

9.运行程序，注册功能正常运行。实现了进行项目与数据库的连接

3.登陆功能

1.在src/main/controller中创建LoginServlet.java，编写代码实现从登陆界面通过get方法获取账户和密码，并与数据库现存数据进行对比，如果验证成功则登陆成功，验证失败则登陆无效，转而进行下一步操作。

package main.controller;
import main.model.User;
import main.service.LoginService;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.List;
/**
 * @author rtl
 * @site elbadaernu404.github.io
 * @company suzhou university
 * @create 2020-06-21 16:40
 */
public class LoginServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
           //从登陆界面获得了用户名和密码
            String username = request.getParameter("name");
            String password = request.getParameter("password");
            //与数据库的数据进行对比
        LoginService loginService=new LoginService();
        User user=new User();
        user.setName(username);
        user.setPassword(password);
       List list= loginService.login(user);
    }
}

2.在src/main/dao中创建LoginDao.java，部署接口。

package main.dao;
import main.model.User;
import java.util.List;
/**
 * @author rtl
 * @site elbadaernu404.github.io
 * @company suzhou university
 * @create 2020-06-21 16:40
 */
public interface LoginDao {
    //登录功能
    public List login(User user);
}

3.在.在src/main/service中创建LoginService，编写代码通过jdbc驱动来实现数据库的查询功能，并通过查询语句进行具体的数据库数据的查询操作，其执行查询并遍历结果集。

package main.service;
import main.dao.LoginDao;
import main.model.User;
import main.util.JdbcUtil;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;
/**
 * @author rtl
 * @site elbadaernu404.github.io
 * @company suzhou university
 * @create 2020-06-21 16:40
 */
public class LoginService implements LoginDao {
    @Override
    public List login(User user) {
        //返回值的类型是一个集合
        List list=new ArrayList();
        PreparedStatement ps=null;
        String sql ="select * from user where name =? and password=?" ;
//jdbc去实现查询功能

        Connection conn = null;
        conn = JdbcUtil.getConn();

        try {
            ps= conn.prepareStatement(sql);
            ps.setString(1,user.getName());
            ps.setString(2,user.getPassword());

            ResultSet resultSet =ps.executeQuery();//执行查询语句
//遍历这个结果集
            while(resultSet.next()){
                    String name=resultSet.getString(2);
                    String password=resultSet.getString(3);
                    list.add(name);
                list.add(password);
            }
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return list;
    }
}

4.在LoginServlet.java中添加代码，实现登陆成功向localhost主页面跳转，登陆失败则向register.jsp注册页面跳转。

if (list.size()>0){
    //用户名密码存在，登陆成功
    request.getRequestDispatcher("index.jsp").forward(request,response);
}else{
    //用户名密码不存在，登陆失败
    request.getRequestDispatcher("register.jsp").forward(request,response);
}

LoginServlet.java完整代码如下:

package main.controller;
import main.model.User;
import main.service.LoginService;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.List;
/**
 * @author rtl
 * @site elbadaernu404.github.io
 * @company suzhou university
 * @create 2020-06-21 16:40
 */
public class LoginServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
           //从登陆界面获得了用户名和密码
            String username = request.getParameter("name");
            String password = request.getParameter("password");
            //与数据库的数据进行对比
        LoginService loginService=new LoginService();
        User user=new User();
        user.setName(username);
        user.setPassword(password);
       List list= loginService.login(user);

        if (list.size()>0){
            //用户名密码存在，登陆成功
            request.getRequestDispatcher("index.jsp").forward(request,response);
        }else{
            //用户名密码不存在，登陆失败
            request.getRequestDispatcher("register.jsp").forward(request,response);
        }
    }
}

5.在UserServlet.java中添加代码，实现注册完成向login.jsp登陆页面跳转的功能。

//注册完成后，跳转到登录页面
req.getRequestDispatcher("/login.jsp").forward(req,resp);

6.在web.xml中定义以添加上述功能。

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
         version="3.1">
    <welcome-file-list>
        <welcome-file>login.jsp</welcome-file>
    </welcome-file-list>

    <servlet>
        <servlet-name>UserServlet</servlet-name>
        <servlet-class>main.controller.UserServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>UserServlet</servlet-name>
        <url-pattern>/register</url-pattern>
    </servlet-mapping>

    <servlet>
        <servlet-name>LoginServlet</servlet-name>
        <servlet-class>main.controller.LoginServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>LoginServlet</servlet-name>
        <url-pattern>/login</url-pattern>
    </servlet-mapping>
</web-app>

7.启动tomcat服务器，运行，彻底完成注册及登陆功能及一系列跳转步骤，最后在web.xml中将login.jsp设置为tomcat服务器启动的主界面。

4.EasyUI框架

1.进入jquery easyui官网首页http://www.jeasyui.net，进行浏览easyui的相关信息，了解easyui的实例demo及教程。

2.进入easyui的下载界面，选择下载“EasyUI for jQuery”，这里选择免费版本。

3.将下载好的easyui文件解压，重命名后整体复制到/web目录中去，经过一段时间文件导入完毕。

4.修改正确的文件路径，将easyui.css、icon.css、jquery.min.js、jquery.easyui.min.js和demo.css文件一同添加到index.jsp文件的<head></head>中。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Insert title here</title>
  <link rel="stylesheet" type="text/css" href="easyui/themes/bootstrap/easyui.css">
  <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
  <link rel="stylesheet" type="text/css" href="./easyui/demo/demo.css">
  <script type="text/javascript" src="easyui/jquery.min.js"></script>
  <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
  ...
</head>

5.通过使用后台的基本框架代码，进行修改index.jsp文件的<body></body>部分，完成一个最基本的基于easyui的CRM用户管理系统后台代码。完整的index.jsp文件代码如下：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Insert title here</title>
  <link rel="stylesheet" type="text/css" href="easyui/themes/bootstrap/easyui.css">
  <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
  <link rel="stylesheet" type="text/css" href="./easyui/demo/demo.css">
  <script type="text/javascript" src="easyui/jquery.min.js"></script>
  <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
  <style>
    .westname
    {
      text-decoration:none;
    }
  </style>
  <script type="text/javascript">
      $(function(){
          $('.westname').click(function(){
              var name = this.innerHTML;
              var url = this.href;
              //通过获取的名字创建选项卡
              crateTabs(name,url);
              //让超链接不跳转
              return false;
          });
      });

      //创建tabs的函数
      function crateTabs(name,url){
          if($('#tt').tabs('exists',name)){
              $('#tt').tabs('select',name);
          }else{
              $('#tt').tabs('add',{
                  title:name,
                  content:createUrl(url),
                  closable:true
              });
          }
      }
      //使用iframe转化里面的数据使之返回的是url里面的数据
      function createUrl(url){
          return "<iframe src='"+url+"' style='border:0px;width:100%;height:95%;'></iframe>";
      }

  </script>

</head>
<body>
<div id="cc" class="easyui-layout" data-options="fit:true">
  <div data-options="region:'north',title:'CRM管理系统',split:true" style="height:100px;background-color: #0081c2">

    <font size="6" color=white><div>
             <span>
                   <script type="text/javascript">
                     var date = new Date();
                     document.write(date.getFullYear() + "年" + (date.getMonth() + 1) + "月" + date.getDate() + "日" + " 星期" + "日一二三四五六".charAt(date.getDay()));
                   </script>
             </span>
    </div></font>

    <%--<img src="img/2.png" width="100% "height="100%"/>--%>
  </div>

  <div data-options="region:'west',title:'系统菜单',split:true" style="width:240px;">
    <div id="aa" class="easyui-accordion"  data-options="fit:true">
      <div title="客户管理" data-options="iconCls:'icon-reload',selected:true" style="overflow: auto; padding: 10px;background-color: #DCDCE2">
        <a href="customer.jsp" class="westname" >客户管理</a>
        <br><a href="department.jsp" class="westname" >部门信息</a></br>
        <a href="employee.jsp" class="westname" >员工管理</a>
      </div>
      <div title="数据管理" data-options="iconCls:'icon-reload'" style="padding: 10px;background-color: #DCDCE2">
        <a href="linkMen.html" class="westname">字典目录</a>
        <br><a href="linkMen.html" class="westname">字典明细</a></br>
      </div>
      <div title="员工管理" data-options="iconCls:'icon-reload'" style="padding: 10px;background-color: #DCDCE2">
        <a href="#" class="westname">员工管理</a>
      </div>
      <div title="订单管理" data-options="iconCls:'icon-reload'" style="padding: 10px;background-color: #DCDCE2">
        <a href="#" class="westname">订单管理</a>
      </div>
      <div title="地址管理" data-options="iconCls:'icon-reload'" style="padding: 10px;background-color: #DCDCE2">
        <a href="#" class="westname">地址管理</a>
      </div>
    </div>
  </div>

  <div data-options="region:'center',title:''" style="padding:5px;background:#eee;">
    <div id="tt" class="easyui-tabs" data-options="fit:true">
      <div align="center" title="主页" data-options="closable:true" style="overflow: auto; padding: 20px; display: none;background-color: white;">
        <form id="bdfm" target="_blank" name="bdfm" method="get" action="http://www.baidu.com/s">
          <table>
            <tr>
              <td>
                <a href="http://www.baidu.com">
                  <img src="img/baidu.png"/>
                </a>
              </td>
              <td><br/><input type="text" id="search1" name="word"/></td>
              <td><br/><input type="submit" value="搜索" /></td>
            </tr>
          </table>
        </form>
        <img src="img/1.png" alt="some_text">
      </div>
    </div>
  </div>
</div>

</body>
</html>

6.在web.xml中进一步添加必要信息。

7.启动tomcat服务器，通过验证账号密码进入CRM后台系统，界面基本成形。

8.保持tomcat服务器的启动，在easyui的easyui.css文件中修改框架各成分的颜色，对后台做最初的优化。

5.与数据库的进一步交互

1.在src/main/controller中新建GetAllUser.java文件，编写代码实现easyui框架的后台能够获取数据。主要思路为通过将数据库list数据类型转化为json数组，使得数据集合以json的键值对格式返回到easyui前端。

package main.controller;
import main.model.User;
import main.service.GetUserService;
import main.util.UserOperation;
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
/**
 * @author rtl
 * @site elbadaernu404.github.io
 * @company suzhou university
 * @create 2020-06-21 16:40
 */
public class GetAllUser extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        super.doGet(req, resp);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {


        PrintWriter out = response.getWriter();
        //请求页码、每页显示行数、偏移、总数
        int page,rows,offset,total;
        //获取
        String input_page=request.getParameter("page");
        page=(input_page==null)?1:Integer.parseInt(input_page);//页码数
        String input_rows=request.getParameter("rows");
        rows=(input_rows==null)?10:Integer.parseInt(input_rows);//每页多少条数据
        offset=(page-1)*rows;
        UserOperation operation=new UserOperation();
        total=operation.selectCount();
        List<User> users=operation.selectPage(offset, rows);
        Map<String, Object> jsonMap = new HashMap<String, Object>();//定义map
        jsonMap.put("total", total);//total键 存放总记录数，必须的
        jsonMap.put("rows", users);//rows键 存放每页记录 list
        String result = JSONObject.fromObject(jsonMap).toString();//格式化result   一定要是JSONObject
        out.print(result);
        out.flush();
        out.close();
    }
}

2.将json的jar包导入idea。

3.在src/main/dao中新建GetUserDao.java接口类型文件，创建显示用户数据的数据库接口。

package main.dao;
import main.model.User;
import java.util.List;
/**
 * @author rtl
 * @site elbadaernu404.github.io
 * @company suzhou university
 * @create 2020-06-21 16:40
 */
public interface GetUserDao {
    public List<User> GetAllUser();//返回值类型List<User>
}

4.在src/main/service中新建GetUserService.java文件，此程序的功能为通过jdbc驱动去实现数据库查询的功能，使得后台可以通过查询语句遍历并返回出结果，是查询数据的具体功能实现。

package main.service;
import main.dao.GetUserDao;
import main.model.User;
import main.util.JdbcUtil;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;
/**
 * @author rtl
 * @site elbadaernu404.github.io
 * @company suzhou university
 * @create 2020-06-21 16:40
 */
public class GetUserService implements GetUserDao {
    @Override
    public List<User> GetAllUser() {
        List<User> list=new ArrayList();
        PreparedStatement ps=null;
        String sql ="select * from user " ;
//jdbc去实现查询功能
        Connection conn = null;
        conn = JdbcUtil.getConn();
        try {
            ps= conn.prepareStatement(sql);
            ResultSet resultSet =ps.executeQuery();//执行查询语句
//遍历这个结果集
            while(resultSet.next()){
                int id=resultSet.getInt(1);
                String name=resultSet.getString(2);
                String password=resultSet.getString(3);
                User user=new User(id,name,password);
                list.add(user);
            }
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return list;
    }
}

5.在web.xml中添加上述功能映射。

<servlet>
    <servlet-name>GetAllUser</servlet-name>
    <servlet-class>main.controller.GetAllUser</servlet-class>
</servlet>
<servlet-mapping>
    <servlet-name>GetAllUser</servlet-name>
    <url-pattern>/getAllUser</url-pattern>
</servlet-mapping>

6.在/web文件夹下新建custom.jsp文件，准备用来显示用户数据。

7.在custom.jsp文件中添加增添用户的按钮控件，编写具体功能。custom.jsp文件中具体代码如下：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>客户管理</title>
    <link rel="stylesheet" type="text/css" href="easyui/themes/bootstrap/easyui.css">
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript">
        var url;
        $(function(){
            $('#dg').datagrid({
                url:'getAllUser',
                columns:[[
                    {field:'id',title:'id',width:100},
                    {field:'name',title:'用户名',width:100},
                    {field:'password',title:'密码',width:100}
                ]] ,
                striped:'true',
                pagination:'true',
                pagePosition:'bottom',
                pageNumber:1,
                pageSize:5,
                pageList: [3,5,10]

            });
        });

        function newUser(){$('#winAdd').window('open');}

        function save(){
            //提交表单数据
            $('#formAdd').form('submit', {
                url:"saveUser"
            });
            alert('保存成功');
            //关闭窗口
            $("#winAdd").window("close");
            //表格重新加载
            $("#dg").datagrid("reload");
        }

        function deleteUser() {
            var row = $('#dg').datagrid('getSelected');
            if (row) {
                $.messager.confirm("系统提示", "您确定要删除这条记录吗?", function (r) {
                    if (r) {
                        $.post('userDelete', {id: row.id}, function (result) {
                            if (result.success) {
                                $.messager.alert("系统提示", "已成功删除这条记录!");
                                $("#dg").datagrid("reload");
                            } else {
                                $.messager.alert("系统提示", result.errorMsg);
                            }
                        }, 'json');
                    }
                });
            }
        }

        function editUser(){
            var row=$('#dg').datagrid('getSelected');
            if(row){
                $("#dlg").dialog('open').dialog('setTitle','编辑用户');
                $('#formAdd2').form('load',row);//把表单数据带过来进行填充
                url='userSave?id='+row.id;
            }
        }
        function saveUser(){
            $('#formAdd2').form('submit',{
                url:url,
                onSubmit:function(){
                    return $(this).form('validate');
                },

            });
            $.messager.alert("系统提示","保存成功");
            $('#dlg').dialog('close');
            $("#dg").datagrid("reload");
        }

    </script>
</head>
<body>
<table id="dg">
    <div id="toolbar">
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">添加用户</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">编辑用户</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="deleteUser()">删除用户</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-search" plain="true" onclick="doSearch()">Search</a>
    </div>

</table>
<!-- 添加客户的表单，默认是隐藏的 -->
<div id="winAdd" class="easyui-window" title="添加客户" style="width:600px;height:400px"
     data-options="iconCls:'icon-save',modal:true,closed:true">
    <form id="formAdd" method="post">
        <TABLE  cellSpacing=0 cellPadding=5  border=0>
            <TR>
                <td>用户名：</td>
                <td>
                    <INPUT class=textbox  style="WIDTH: 180px" maxLength=50 name="name">
                </td>
                <td>密码 ：</td>
                <td>
                    <INPUT class=textbox  dstyle="WIDTH: 180px" maxLength=50 name="password">
                </td>
            </TR>

            <tr>
                <td rowspan=2>
                    <button id="customerBtn" type="button" onclick="save()">保存</button>
                </td>
            </tr>
        </TABLE>
    </form>
</div>
<!-- 编辑客户的表单，默认是隐藏的 -->
<div id="dlg" class="easyui-window" title="编辑客户" style="width:600px;height:400px"
     data-options="iconCls:'icon-save',modal:true,closed:true">
    <form id="formAdd2" method="post">
        <TABLE  cellSpacing=0 cellPadding=5  border=0>
            <TR>
                <td>用户名：</td>
                <td>
                    <INPUT class=textbox  style="WIDTH: 180px" maxLength=50 name="name">
                </td>
                <td>密码 ：</td>
                <td>
                    <INPUT class=textbox  dstyle="WIDTH: 180px" maxLength=50 name="password">
                </td>
            </TR>

            <tr>
                <td rowspan=2>
                    <button id="customerBtn2" type="button" onclick="saveUser()">保存</button>
                </td>
            </tr>
        </TABLE>
    </form>
</div>

</body>
</html>

8.在src/main中创建SaveUser.java文件用于保存添加结果；创建SaveUserDao创建数据库接口；创建SaveUserService.java文件，通过jdbc驱动对数据库进行实际操作，以更新用户状态并保存。

9.启动tomcat服务器测试项目显示和新增用户的运行结果。

6.增删改查

1.在/web/custom.jsp文件中新增数据的修改和数据删除两个控件，并编写操作窗口，用于修改和提示，增加项目的可视化。

2.在/src/main/controller中新建UserSave.java文件，编写程序用于实现保存前台传递过来的用户名和密码。

3.在/src/main/controller中新建UserDelete.java文件，编写程序用于实现数据的选中的删除操作。

4.在/src/main/dao中新建UserDeleteDao.java文件，编写java数据库的接口程序，为链接数据库做准备。

5.在/src/main/service中新建UserDeleteService.java文件，编写程序用于实现将数据通过实际的查询语句，操作在数据库中，真正的实现数据的删除操作，并返回给用户成功提示。

6.在web.xml当中新增上述映射。

<servlet>
    <servlet-name>UserDelete</servlet-name>
    <servlet-class>main.controller.UserDelete</servlet-class>
</servlet>
<servlet-mapping>
    <servlet-name>UserDelete</servlet-name>
    <url-pattern>/userDelete</url-pattern>
</servlet-mapping>

<servlet>
    <servlet-name>UserSave</servlet-name>
    <servlet-class>main.controller.UserSave</servlet-class>
</servlet>
<servlet-mapping>
    <servlet-name>UserSave</servlet-name>
    <url-pattern>/userSave</url-pattern>
</servlet-mapping>

7.在/src/main/util中新建JsonUtil.java文件，编写具体程序用于使result结果转化为json数组格式。

package main.util;
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;
import java.sql.ResultSet;
import java.sql.ResultSetMetaData;
/**
 * @author rtl
 * @site elbadaernu404.github.io
 * @company suzhou university
 * @create 2020-06-21 16:40
 */
public class JsonUtil {
    /**
     * 将result的结果集转化成json数组格式
     * @param rs
     * @return
     * @throws Exception
     */
    public static JSONArray formatRsToJsonArray(ResultSet rs)throws Exception{
        ResultSetMetaData md=rs.getMetaData();
        int num=md.getColumnCount();
        JSONArray array=new JSONArray();
        while(rs.next()){
            JSONObject mapOfColValues=new JSONObject();
            for(int i=1;i<=num;i++){
                mapOfColValues.put(md.getColumnName(i), rs.getObject(i));
            }
            array.add(mapOfColValues);
        }
        return array;
    }
}

8.继续在util文件夹中新建UserOperation.java文件，编写程序通过计算user类在数据库中的总数据条目，把检索结果看成只有一条记录一个字段的表，实现数据的分页功能。

package main.util;
import main.model.User;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;
/**
 * @author rtl
 * @site elbadaernu404.github.io
 * @company suzhou university
 * @create 2020-06-21 16:40
 */
public class UserOperation {
    public List selectPage(int offset, int size) {//注意返回值null和list.size()==0的区别
        PreparedStatement ps=null;
        ResultSet rs=null;
        ArrayList<User> list=new ArrayList<User>();//返回值
        Connection conn = null;
        conn = JdbcUtil.getConn();
        try {
            ps=conn.prepareStatement("select * from  user  limit "+offset+","+size);
            rs=   ps.executeQuery();
            while(rs.next()){
                User one=new User();//返回值中的一个
                one.setId(rs.getInt(1));
                one.setName(rs.getString(2));
                one.setPassword(rs.getString(3));
                list.add(one);//添加到列表
            }
            return list;
        } catch (Exception ex) {
            return null;
        }
    }
//计算user类在数据库中总共有多少条数据
    public  int selectCount(){
        PreparedStatement ps=null;
        ResultSet rs=null;
        ArrayList<User> list=new ArrayList<User>();//返回值
        Connection conn = null;
        conn = JdbcUtil.getConn();
        int count=0;
        try {
            ps=conn.prepareStatement("select count(*) from  user ");
            rs=   ps.executeQuery();
            while(rs.next())
            {
//打印的就是总记录数。把检索结果看成只有一跳记录一个字段的表
                count=rs.getInt(1);
                System.out.println(count);
            }
        } catch (SQLException e) {
            e.printStackTrace();
        }
return count;
    }
}

9.启动tomcat服务器，测试功能的完整。

7.系统修缮

1.对CRM后台管理系进行初步设计，按照设计需要在本地数据库中创建更多的表单，填写属性，准备录入CRM管理系统。

2.在本地数据库系统中完成创建部门和员工表，并且完成创建和实施相关的控件、数据库接口、模块、具体功能、查询语句等主要程序的编程。

4.在/web目录中新建部门和员工的jsp文件，补全操作的页面、窗口以及主要函数功能的代码，完成其他数据库表单的jdbc调度功能。
部门：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>部门信息</title>
    <link rel="stylesheet" type="text/css" href="easyui/themes/bootstrap/easyui.css">
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript">
        var url;
        $(function(){
            $('#dg').datagrid({
                url:'getAllDepartment',
                columns:[[
                    {field:'number',title:'Number',width:100},
                    {field:'departmentname',title:'部门',width:100},
                    {field:'departmentfunction',title:'权限',width:100}
                ]] ,
                striped:'true',
                pagination:'true',
                pagePosition:'bottom',
                pageNumber:1,
                pageSize:5,
                pageList: [3,5,10]

            });
        });
    </script>
</head>
<body>
<table id="dg">
    <div id="toolbar">
        <a href="javascript:void(0)" ></a>
        <a href="javascript:void(0)" ></a>
        <a href="javascript:void(0)" ></a>
    </div>
</table>
</body>
</html>

员工：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>员工管理</title>
    <link rel="stylesheet" type="text/css" href="easyui/themes/bootstrap/easyui.css">
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript">
        var url;
        $(function(){
            $('#dg1').datagrid({
                url:'getAllEmployee',
                columns:[[
                    {field:'id',title:'工号',width:100},
                    {field:'employeename',title:'姓名',width:100},
                    {field:'employeedept',title:'部门',width:100},
                    {field:'employeeemail',title:'联系邮箱',width:100}
                ]] ,
                striped:'true',
                pagination:'true',
                pagePosition:'bottom',
                pageNumber:1,
                pageSize:5,
                pageList: [3,5,10]

            });
        });
        function newEmployee(){$('#winAdda').window('open');}
        
        function save(){
            //提交表单数据
            $('#formAdda').form('submit', {
                url:"saveEmployee"
            });
            alert('保存成功');
            //关闭窗口
            $("#winAdda").window("close");
            //表格重新加载
            $("#dg1").datagrid("reload");
        }
        function search(){
            //提交表单数据
            $('#formAddaa').form('submit', {
                url:"EmployeeSearch"
            });
            alert('查询成功');
            //关闭窗口
            $("#winAddaa").window("close");
        }
        function deleteEmployee() {
            var row = $('#dg1').datagrid('getSelected');
            if (row) {
                $.messager.confirm("系统提示", "确定开除此员工?", function (r) {
                    if (r) {
                        $.post('employeeDelete', {id: row.id}, function (result) {
                            if (result.success) {
                                $.messager.alert("系统提示", "成功!");
                                $("#dg1").datagrid("reload");
                            } else {
                                $.messager.alert("系统提示", result.errorMsg);
                            }
                        }, 'json');
                    }
                });
            }
        }
        function editEmployee(){
            var row=$('#dg1').datagrid('getSelected');
            if(row){
                $("#dlg1").dialog('open').dialog('setTitle','编辑员工');
                $('#formAdda2').form('load',row);
                url='employeeSave?id='+row.id;
            }
        }
        function searchEmployee(){$('#winAddaa').window('open');}
        function saveEmployee(){
            $('#formAdda2').form('submit',{
                url:url,
                onSubmit:function(){
                    return $(this).form('validate');
                },
            });
            $.messager.alert("系统提示","保存成功");
            $('#dlg1').dialog('close');
            $("#dg1").datagrid("reload");
        }
    </script>
</head>
<body>
<table id="dg1">
    <div id="toolbar1">
        <a href="javascript:void(0)" class="easyui-linkbutton"  plain="true" onclick="newEmployee()">添加员工</a>
        <a href="javascript:void(0)" class="easyui-linkbutton"  plain="true" onclick="editEmployee()">管理员工</a>
        <a href="javascript:void(0)" class="easyui-linkbutton"  plain="true" onclick="deleteEmployee()">开除员工</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-search" plain="true" onclick="searchEmployee()">Search</a>
    </div>
</table>
<!-- 添加客户的表单，默认是隐藏的 -->
<div id="winAdda" class="easyui-window" title="添加员工" style="width:600px;height:400px"
     data-options="iconCls:'icon-save',modal:true,closed:true">
    <form id="formAdda" method="post">
        <TABLE  cellSpacing=0 cellPadding=5  border=0>
            <br>
                <td>姓名：</td>
                <td>
                    <INPUT class=textbox  style="WIDTH: 120px" maxLength=30 name="employeename">
                </td>
                <td>部门：</td>
                <td>
                    <INPUT class=textbox  style="WIDTH: 120px" maxLength=30 name="employeedept">
                </td>
                <td>邮箱：</td>
                <td>
                    <INPUT class=textbox  style="WIDTH: 120px" maxLength=30 name="employeeemail">
                </td>
            </TR>
            <tr>
                <td rowspan=2>
                    <button id="employeeBtn" type="button" onclick="save()">保存</button>
                </td>
            </tr>
        </TABLE>
    </form>
</div>
<!-- 编辑客户的表单，默认是隐藏的 -->
<div id="dlg1" class="easyui-window" title="编辑员工" style="width:600px;height:400px"
     data-options="iconCls:'icon-save',modal:true,closed:true">
    <form id="formAdda2" method="post">
        <TABLE  cellSpacing=0 cellPadding=5  border=0>
            <TR>
                <td>姓名：</td>
                <td>
                    <INPUT class=textbox  style="WIDTH: 120px" maxLength=30 name="employeename">
                </td>
                <td>部门：</td>
                <td>
                    <INPUT class=textbox  style="WIDTH: 120px" maxLength=30 name="employeedept">
                </td>
                <td>邮箱：</td>
                <td>
                    <INPUT class=textbox  style="WIDTH: 120px" maxLength=30 name="employeeemail">
                </td>
            </TR>
            <tr>
                <td rowspan=2>
                    <button id="employeeBtn2" type="button" onclick="saveEmployee()">保存</button>
                </td>
            </tr>
        </TABLE>
    </form>
</div>
<div id="winAddaa" class="easyui-window" title="搜索员工" style="width:600px;height:400px"
     data-options="iconCls:'icon-save',modal:true,closed:true">
    <form id="formAddaa" method="post">
        <TABLE  cellSpacing=0 cellPadding=5  border=0>
            <br>
            <td>姓名：</td>
            <td>
                <INPUT class=textbox  style="WIDTH: 120px" maxLength=30 name="employeename">
            </td>

            </TR>

            <tr>
                <td rowspan=2>
                    <button id="employeeBtn3" type="button" onclick="search()">搜索</button>
                </td>
            </tr>
        </TABLE>
    </form>
</div>
</body>
</html>

5.数据字典：后台web应用系统中，在一些含有字典值数据情况下，这些数据要显式地展示给用户，就要通过转换字典值数据，然后返回到页面。其实现方法可以是每次通过遍历字典数据然后在展示数据中增加转换后的值，然后将数据返回到页面，也可以通过自定义标签，页面自动转换字典值显示问题，相比第一种解决方案，第二种方式可以通过一个标签处理所有的数据字典，不必像第一种方案那样要每次在后台手动处理。

6.在本地数据库中创建一个数据字典，编程实现CRM管理系统的数据字典目录及字典明细，启动tomcat服务器对目前完成的项目进行测试。

8.客户跟踪的程序以及系统的深度优化

1.在本地数据库中新建客户表，并且完成创建和实施相关的控件、数据库接口、模块、具体功能、查询语句等主要程序的编程。成功将客户表添加到系统。

2.为客户表添加增删改查功能，依次补全客户系统的资源池、潜在客户、失败客户、正式客户、流失客户等一系列客户管理系统的核心代码，完成客户跟进功能。

3.在官网下载easyui主题，并通过index.jsp中链接框架主体的代码修改easyui的默认主题，更新ui界面，为easyui设置系统时间模块。

4.收集图片素材，为index主页面添加图片背景，优化区块，同时调整框架各部分的自适应大小。

5.为主界面添加搜索框，同步到百度，并实现通过超链接的跳转。将百度logo的素材图片导入搜索框左侧，完成增强搜索功能的可视化。

<table>
  <tr>
    <td>
      <a href="http://www.baidu.com">
        <img src="img/baidu.png"/>
      </a>
    </td>
    <td><br/><input type="text" id="search1" name="word"/></td>
    <td><br/><input type="submit" value="搜索" /></td>
  </tr>
</table>

6.启动tomcat服务器，测试功能基本齐全、ui完善的后台系统，项目初步完成。

9.关于Maven和ssm框架

至此，CRM管理系统基本完成。之后的时间里我对其他框架进行了简单的了解与学习：
1.Maven项目对象模型(POM)，可以通过一小段描述信息来管理项目的构建，报告和文档的项目管理工具软件。Maven 除了以程序构建能力为特色之外，还提供高级项目管理工具。由于 Maven 的面向项目的方法，许多 Apache Jakarta 项目发文时使用 Maven，而且公司项目采用 Maven 的比例在持续增长。

2.ssm框架：Spring + Spring MVC + MyBatis。Spring是分层的Java SE/EE应用一站式的轻量级开源框架，以IoC反转控制和AOP面向切面编程为内核，提供了展现层：Spring MVC和持久层：Spring JDBC以及业务层：事务管理等众多的企业级应用技术。Spring MVC 分离了控制器、模型对象、分派器以及处理程序对象的角色，这种分离让它们更容易进行定制。MyBatis 使用简单的 XML或注解用于配置和原始映射，将接口和 Java 的POJOs映射成数据库中的记录。

3.maven与ssm框架的整合，主要包含的依赖有依赖SpringMVC、依赖c3p0、依赖Mybatis，进行配置spring声明式事务管理，至此maven已经成功整合了spring+springmvc+mybatis。通过新建程序和完成映射，完成论文增删改查系统。