Java初试MVC及三层架构

Chemlez

Java

发布于：Aug 16, 2020

最近又捡起了对Java的学习，通过对一个实例的介绍，总结下此次对Web开发中MVC三层架构的学习，以便用于日后的复习。

一、 MVC

简单的先介绍下MVC模式：

M（Model）：JavaBean。用于完成具体的业务操作。

JavaBean：Java中特殊的类.

JavaBean满足条件：
- public修饰的类，并提供public无参构造方法
- 所有的属性都是private修饰
- 提供getter和setter方法
使用层面：
- 封装业务逻辑：dao层封装对数据库的底层操作
- 封装数据：domain层。对数据库中所要查询对象的封装
V（View）：视图。用于数据的展示。
- 页面的展示
- 与用户的交互
C（Controller）：控制器。由Servlet实现控制器。

主要功能：
- 获取用户的输入
- 调用模型，将请求交给模型进行处理
- 将数据交给视图进行展示

首先浏览器（通过View页面）向服务器端进行请求（可以是表单请求、超链接、AJAX请求等），Controller层获取浏览器请求的数据进行解析，调用模型；模型进行业务逻辑的操作，并将处理结果返回给Controller层；Controller层再将相应的数据交给View层，进行数据展示到客户端。

二、三层架构

三层架构：视图层View、服务层Service、与持久层Dao。

View:用于接收用户提交请求的代码。
Service:用于编写系统的业务逻辑。（最重要的一层）
Dao:对数据库进行最直接的操作。即：对数据库的增删改查。

dao层中，定义了对数据库的增删改查的接口。而service层中即对数据的具体业务操作，用于组合dao层中的接口方法。web层中则用于对用户数据的接收和发送。上图很好的解释了MVC与三层架构之间的关系。

三、案例

通过servlet、jsp、Mysql、JDBCTempleat、Duird、BeanUtils、Tomcat等技术完成用户信息列表展示的实例。此部分着重解释后端代码的实现。

1.查询所有用户信息

当点击前端页面查询按钮时，此时通过对服务器端的请求，到web层中的Controller层，触发FindUserServlet。由Controller调用Service层中的模型，继而Service层通过dao层获取全部的用户信息，封装到List<User>集合中。返回给Service层，再通过Service层将用户信息返回给Controller层。Web层中的Controller将数据进行存储转发给View，进行数据的解析展示，返回给客户端。

findAll方法：

dao层中findAll接口的实现

@Override
public List<User> findAll() {
    JdbcTemplate template = new JdbcTemplate(JDBCUtils.getDataSource());
    String sql = "select * from user";
    List<User> users = template.query(sql, new BeanPropertyRowMapper<User>(User.class));
    return users;
}

service层中findAll接口的实现

@Override
public List<User> findAll() {
    UserDao userDao = new UserDaoImpl();
    List<User> users = userDao.findAll();
    return users;
}

web层中UserListServlet

@WebServlet("/userListServlet")
public class UserListServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        UserService userService = new UserServiceImpl();
        List<User> users = userService.findAll();
        request.setAttribute("users", users);
        request.getRequestDispatcher("/list.jsp").forward(request, response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request,response);
    }
}

2.增加用户信息

当客户端点击提交按钮时，此次对服务器端的请求带着表单的数据。根据我们上面对三层架构以及Controller层的介绍可知，由其进行数据的接收。这里即为AddUserServlet对获取的数据进行处理、封装。将封装好的数据传给Service层（Model),即为UerService，进行业务逻辑的操作。再通过dao层对数据库进行相应的访问。

dao层中add接口的实现

@Override
public void addUser(User user) {
    JdbcTemplate template = new JdbcTemplate(JDBCUtils.getDataSource());
    String sql = "insert into user values(null,?,?,?,?,?,?,null,null)";
    template.update(sql, user.getName(), user.getGender(), user.getAge(), 									user.getAddress(), user.getQq(), user.getEmail());
}

Service层中add接口的实现

@Override
public void addUser(User user) {
    UserDao userDao = new UserDaoImpl();
    userDao.addUser(user);
    }

web层中addServlet的实现

@WebServlet("/addServlet")
public class AddServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        User user = new User();
        Map<String, String[]> parameterMap = request.getParameterMap(); // 将请求参数进行Map集合的封装
        try {
            BeanUtils.populate(user, parameterMap);//将获取到的值封装到User对象中
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        } catch (InvocationTargetException e) {
            e.printStackTrace();
        }
        UserService service = new UserServiceImpl();
        service.addUser(user);
        HttpSession session = request.getSession(); // 再进行重定向之前，将需要添加的User对象设置到session中，以便后续对其的获取使用
        session.setAttribute("addUser", user);
        response.sendRedirect(request.getContextPath() + "/findUserByPageServlet");//重定向至View层
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request, response);
    }
}

思考：

在上一个方法查找所有的用户时，在最后，我们将获取到的数据传给view层，采用的是存储转发，而在这里，对用户的添加，我们却采用的是重定向（实际上，增、删、改都是采用的重定向）。这是为什么呢？

这里先对重定向和存储转发的几个特点进行简单的比较：

存储转发：一种在服务器内部的资源跳转方式。

特点：
1. 浏览器地址栏不会发生变化
2. 只能转发到当前服务器内部资源中
3. 转发是一次请求
最重要的一点便是转发只在当前服务器内部进行，请求也只有一次。这样做带来的一点用处便是，request域中带有的请求是可以在多次资源跳转中进行共享的。在使用时，只需要添加资源路径即可。
重定向：具有多次的请求。其跳转在于客户端与服务器端之间，每次请求都是独立的，存在新的request与response。

特点：
1. 重定向之后地址栏会发生变化
2. 重定向可以访问其他站点（服务器）的资源
3. 重定向是两次请求。故不能使用request域共享数据。

其中，重定向可避免在用户重新加载页面时，两次调用相同的动作。即，访问数据库时，增删改使用重定向。当前我的理解是：转发只有一次请求，故当重新加载页面时，会沿着之前的请求再请求一次（这句话可能比较绕），在页面进行展示全部用户数据之前，又会将数据库添加用户的操作进行一遍，所以会造成表单的重复提交；而重定向中是多次（两次）请求，所以只复用”最近一次“请求（因为每次请求是独立的，之前的请求都不在了），这里只是对页面进行全部用户的展示。

重定向：

存储转发：

3.用户信息更改

思路：用户信息的更改相对前面的用户显示的展示和增加要多了一些步骤。首先，在我们需要对信息进行更改时，需要将原信息展示给我们，在原信息的基础上进行修改，即：是查询到所要修改的用户，将其信息进行回显。其次，当我们对用户信息更改完毕以后，通过对数据库的访问，将对应的数据库信息进行Update操作。最后，通过view层，对列表信息进行展示传送给客户端。这里，每个用户都有一个唯一标识符–id主键，所以当我们拿到主键id时，其实也就获得了对应的数据库中的User对象，后面的操作也就顺理成章了。

FindUserServlet – 查询需要修改的用户，用于信息的回显

web层中FindUserServlet的实现

@WebServlet("/findUserServlet")
public class FindUserServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        String id = request.getParameter("id"); // 获取id
        UserService service = new UserServiceImpl();
        User user = service.findUser(Integer.parseInt(id));// 通过id返回User对象
        request.setAttribute("user", user);// 查找操作所以存储-转发，将用户信息封装传至view层
        request.getRequestDispatcher("/update.jsp").forward(request,response);// 即传至update.jsp页面进行解析
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request,response);
    }
}

service层中findUser的实现

@Override
public User findUser(int id) {
    UserDao userDao = new UserDaoImpl();
    User user = userDao.findUser(id);
    return user;
}

dao层中findUser接口的实现

@Override
public User findUser(int id) {
    JdbcTemplate template = new JdbcTemplate(JDBCUtils.getDataSource());
    String sql = "select * from user where id = ?";
    User user = template.queryForObject(sql, new BeanPropertyRowMapper<User>(User.class), id);
    return user;
}

以上是获取到需要修改的对象，然后对用户信息进行一个回显操作。

下面，便是对用户信息进行修改。

UpdateUserServlet – 修改用户信息，对数据库数据进行修改

web层中UpdateUserServlet的实现

@WebServlet("/updateUserServlet")
public class UpdateUserServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        Map<String, String[]> parameterMap = request.getParameterMap();
        User user = new User();
        try {
            BeanUtils.populate(user, parameterMap);
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        } catch (InvocationTargetException e) {
            e.printStackTrace();
        }
        int id = user.getId();
        UserService service = new UserServiceImpl();
        service.updateUser(id, user);// 对用户信息进行修改
        response.sendRedirect(request.getContextPath()+"/findUserByPageServlet");//View层，信息的展示
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request,response);
    }
}

service层中UpdateUser接口的实现

@Override
public void updateUser(int id, User user) {
    UserDao userDao = new UserDaoImpl();
    userDao.updateUser(id, user);
}

dao层中UpdateUser抽象方法的实现

@Override
public void updateUser(int id, User user) {
    JdbcTemplate template = new JdbcTemplate(JDBCUtils.getDataSource());
    String sql = "update user set name = ?,age=?,gender=?,address=?,qq=?,email=? where id=?";
    template.update(sql, user.getName(), user.getAge(), user.getGender(), user.getAddress(), user.getQq(), user.getEmail(), user.getId());
}

4.用户的删除

用户的删除同用户的更新类似，这里同样是获取用户的id，通过id查询到数据库中相应的数据，然后将数据进行删除。

dao层中deleteUser抽象方法的实现

@Override
public void deleteUser(int id) {
    JdbcTemplate template = new JdbcTemplate(JDBCUtils.getDataSource());
    String sql = "delete from user where id = ?";
    template.update(sql, id);
}

5.删除选中功能

这里删除选中，是对数据进行批量删除。其中思路同单个用户的删除类似，这里是获取一个id的集合，然后通过循环遍历id删除用户即可。这里的难点在于如何通过前端获取到这些id传递到web层。

1	<a class="btn btn-primary" href="javascript:void(0);" onclick="select()">删除选中</a>

定义Javascript方法。

其中:

function select() {
    var uids = document.getElementsByName("uid");// 获取属性为uid的标签 -- 这里给所有用户指定的class属性值即为uid,所以是为了获取每一个用户的信息
    var flag = false;
    for (var i = 0; i < uids.length; ++i) {
        var checked = uids[i].checked;
        if (checked) {
            flag = true;
            break;
        }
    }
    if (flag) { // 判断id是否为空 （前端防空的校验）
        var flag = window.confirm("您确认删除么？"); // 用于确认删除
        if (flag) {
            document.getElementById("s_form").submit(); // 提交表单
        }
    }
}

首先获取被选中的uid，判断是否有用户被选中，这里是为了防止传入到后端的值为空，而报空指针异常。

<c:forEach items="${userByPages.user}" var="user" varStatus="u">
    <tr>
        <td><input type="checkbox" name="uid" value="${user.id}"></td>
        <td>${u.count}</td>
        <td>${user.name}</td>
        <td>${user.gender}</td>
        <td>${user.age}</td>
        <td>${user.address}</td>
        <td>${user.qq}</td>
        <td>${user.email}</td>
        <td>
            <a class="btn btn-default btn-sm"
               href="${pageContext.request.contextPath}/findUserServlet?id=${user.id}">修改</a>&nbsp;
            <a class="btn btn-default btn-sm" href="javascript:give_msg(${user.id})">删除</a>
        </td>
    </tr>
</c:forEach>

以上便是由前端获取需要删除的用户的id。

web层中DeleteSelectServlet的实现

@WebServlet("/delSelectServlet")
public class DelSelectServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        String[] uids = request.getParameterValues("uid");// 获取用户id的数组
        UserService service = new UserServiceImpl();
        service.delByIds(uids);
        response.sendRedirect(request.getContextPath()+"/findUserByPageServlet");

    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request,response);
    }
}

service层中DelByIds接口的实现

@Override
public void delByIds(String[] ids) {
    UserDao userDao = new UserDaoImpl();
    int id_count;
    if (ids != null && ids.length != 0) { // 删除选项的后台验证 -- 防止参数为空（后端判空的校验）
        for (String id : ids) {
        id_count = Integer.parseInt(id);
        userDao.deleteUser(id_count);
    	}
  	}
}

dao层中DeleteUser接口的实现

@Override
public void deleteUser(int id) {
    JdbcTemplate template = new JdbcTemplate(JDBCUtils.getDataSource());
    String sql = "delete from user where id = ?";
    template.update(sql, id);
}

批量删除的注意事项：

id获取的批量方式
删除前的确认操作
防止空参数时的删除操作（前后端都进行校验）

6.分页查询

在客户端对用户列表进行分页展示的基本思路，即需要获取以下的信息：

首先确定数据库中总的条目数 – totalCount;
总的页面数量 – totalPage
获取每页的数据 – List集合
获取当前的页码 – currentPage
每页显示的条数 – rows

totalCount:可以借鉴findAll()的思路，统计出总条目数。

1	totalCount = select count(*) frow user;

rows:有客户端进行传递到参数，即预先设定好的请求参数。

totalPage:totalCount/rows，上取。

currentPage:包含在客户端的请求参数中。

List集合:获取起始索引index以及上面的rows即可确定当前页面需要显示的条目数。

1 2	index = (currentPage - 1)rows list = select from user where limit index,rows

还记得前面所说的Model中操作的是JavaBean对象么，所以这里我们将以上的信息封装成一个PageBean对象。以便我们进行业务逻辑的操作，最终将整个PageBean进行返回交给Web层的Controller，再由Controller传递给View视图，进行展示。逻辑操作见下图：

扩展:对数据的查询进行组合查询，即复杂功能的查询。

web层中FindUserByPageServlet的实现

//findUserByPageServlet?currentPage=2&rows=5
@WebServlet("/findUserByPageServlet")
public class FindUserByPageServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        String currentPage = request.getParameter("currentPage");
        String rows = request.getParameter("rows");
        if (currentPage == null || "".equals(currentPage)) { // 当首次进入到列表查询页面时，用于判空操作，即给currentPage,rows赋初始值。
            currentPage = "1";
        }
        if (rows == null || "".equals(rows)) {
            rows = "5";
        }

        Map<String, String[]> condition = request.getParameterMap();//用于复杂条件的查询，本小结可暂时忽略

        UserService service = new UserServiceImpl();
        PageBean<User> userByPage = service.findUserByPage(Integer.parseInt(currentPage), Integer.parseInt(rows),condition);
        request.setAttribute("userByPages", userByPage);
        request.setAttribute("condition",condition);// 后续转发时，条件的回显
        request.getRequestDispatcher("/list.jsp").forward(request, response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request,response);
    }
}

Service层中findUserByPage抽象方法的实现

@Override
public PageBean<User> findUserByPage(int currentPage, int rows, Map<String, String[]> condition) {
    PageBean<User> userPageBean = new PageBean<>();
    // 页数不能小于1
    if (currentPage <= 0) { 
        currentPage = 1;
    }
    // 查询总条目数
    UserDao dao = new UserDaoImpl();
    int totalCount = dao.findTotalCount(condition);
    // 计算出总页数
    int totalPageCount = (totalCount % rows == 0) ? (totalCount / rows) : (totalCount / rows + 1);
    // 页数不能大于总页数
    if (currentPage > totalPageCount) {
        currentPage = totalPageCount;
    }
    // 查询的索引数
    int starIndex = (currentPage - 1) * rows;
    // 返回出所要查询的对象数目
    List<User> users = dao.findByPage(starIndex, rows,condition);
    // 设置对象的属性
    userPageBean.setTotalCount(totalCount);
    userPageBean.setTotalPage(totalPageCount);
    userPageBean.setUser(users);
    userPageBean.setCurrentPage(currentPage); // 当前页数
    userPageBean.setRows(rows); // 每页展示的条目数
    return userPageBean;
}

dao层中findTotalCount及findByPage抽象方法的实现

@Override
public int findTotalCount(Map<String, String[]> condition) { // search condition
    JdbcTemplate template = new JdbcTemplate(JDBCUtils.getDataSource());
    String sql = "select count(*) from user where 1=1 ";
    List<Object> params = new ArrayList<Object>();
    StringBuffer sb = new StringBuffer(sql);
    Set<String> keySet = condition.keySet(); // 复杂条件的查询
    for (String key : keySet) {
        if ("currentPage".equals(key) || "rows".equals(key)) {
            continue;
        }
        String value = condition.get(key)[0];
        if (value != null && value != "") {
            sb.append(" and " + key + " like ?");
            params.add("%" + value + "%");
        }

    }
    sql = sb.toString();
    Integer count = template.queryForObject(sql, Integer.class, params.toArray());
    System.out.println(sql);
    System.out.println(params);
    return count;
}

@Override
public List<User> findByPage(int starIndex, int rows, Map<String, String[]> condition) { // 根据索引返回的列表对象
    JdbcTemplate template = new JdbcTemplate(JDBCUtils.getDataSource());
    String sql = "select * from user where 1=1";
    List<Object> params = new ArrayList<Object>();
    StringBuffer sb = new StringBuffer(sql);
    Set<String> keySet = condition.keySet();
    for (String key : keySet) { // 用于复杂条件的查询
        if ("currentPage".equals(key) || "rows".equals(key)) {
            continue;
        }
        String value = condition.get(key)[0];
        if (value != null && value != "") {
            sb.append(" and " + key + " like ?");
            params.add("%" + value + "%");
        }
    }
    params.add(starIndex);
    params.add(rows);
    sb.append(" limit ?,? ");
    sql = sb.toString();
    List<User> users = template.query(sql, new BeanPropertyRowMapper<User>(User.class), params.toArray());
    return users;
}

7.复杂条件的分页查询

组合条件的查询，在于SQL语句的编写。

定义初始化SQL语句： select count(*) from user where 1=1再将查询条件进行拼接，再拼接之前先进行判空操作。

web、service、dao层的编写在上一个小节中已包含。

四、前端代码展示

add.jsp

<%--
  Created by IntelliJ IDEA.
  User: liz
  Date: 2020/8/9
  Time: 19:17
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="zh-CN">
<head>
    <!-- 指定字符集 -->
    <meta charset="utf-8">
    <!-- 使用Edge最新的浏览器的渲染方式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- viewport视口：网页可以根据设置的宽度自动进行适配，在浏览器的内部虚拟一个容器，容器的宽度与设备的宽度相同。
    width: 默认宽度与设备的宽度相同
    initial-scale: 初始的缩放比，为1:1 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>添加用户</title>

    <!-- 1. 导入CSS的全局样式 -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- 2. jQuery导入，建议使用1.9以上的版本 -->
    <script src="js/jquery-2.1.0.min.js"></script>
    <!-- 3. 导入bootstrap的js文件 -->
    <script src="js/bootstrap.min.js"></script>
    <style>
        .error {
            color: red;
        }
    </style>
    <script>

        window.onload = function () {


            document.getElementById('form').onsubmit = function () {

                return checkName() && checkAge() && checkQQ() && checkEmail();


            };
            document.getElementById("name").onblur = checkName;
            document.getElementById("age").onblur = checkAge;
            document.getElementById("qq").onblur = checkQQ;
            document.getElementById("email").onblur = checkEmail;
        };

        function checkName() {
            var name = document.getElementById("name").value;
            var regExp = /(^([a-zA-Z]+\s)*[a-zA-Z]+$)|(^[\u4e00-\u9fa5]+$)/;
            var flag = regExp.test(name);
            var s_name = document.getElementById("s_name");
            if (flag) {
                s_name.innerHTML = '<img src="img/gou.png" width="35px" height="25px">';
            } else {
                s_name.innerHTML = "请输入正确姓名"
            }
            return flag;
        };


        function checkAge() {
            var age = document.getElementById("age").value;
            var s_age = document.getElementById("s_age");
            var regExp = /^(([0-9]|[1-9][1-9]|1[0-7][0-9])(\\.[0-9]+)?|180)$/;
            var flag = regExp.test(age);
            if (flag) {
                s_age.innerHTML = '<img src="img/gou.png" width="35px" height="25px">';
            } else {
                s_age.innerHTML = "请输入正确格式的年龄"
            }
            return flag;
        };

        function checkQQ() {
            var qq = document.getElementById("qq").value;
            var regExp = /^[1-9][0-9]{4,14}$/;
            var flag = regExp.test(qq);
            var s_qq = document.getElementById("s_qq");
            if (flag) {
                s_qq.innerHTML = '<img src="img/gou.png" width="35px" height="25px">';
            } else {
                s_qq.innerHTML = '请输入正确格式的qq号'
            }

            return flag;

        };

        function checkEmail() {
            var email = document.getElementById("email").value;
            var regExp = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/;
            var flag = regExp.test(email);
            var s_email = document.getElementById("s_email");
            if (flag) {
                s_email.innerHTML = '<img src="img/gou.png" width="35px" height="25px">';
            } else {
                s_email.innerHTML = '请输入正确格式的email地址';
            }

            return flag;

        };


    </script>

</head>
<body>
<div class="container">
    <center><h3>添加联系人页面</h3></center>
    <form action="${pageContext.request.contextPath}/addServlet" method="post" id="form">
        <div class="form-group">
            <label for="name">姓名：</label>
            <input type="text" class="form-control" id="name" name="name" placeholder="请输入姓名">
            <sapn id="s_name" class="error"></sapn>
        </div>

        <div class="form-group">
            <label>性别：</label>
            <input type="radio" name="gender" value="男" checked="checked"/>男
            <input type="radio" name="gender" value="女"/>女
        </div>

        <div class="form-group">
            <label for="age">年龄：</label>
            <input type="text" class="form-control" id="age" name="age" placeholder="请输入年龄">
            <sapn id="s_age" class="error"></sapn>
        </div>

        <div class="form-group">
            <label for="address">籍贯：</label>
            <select name="address" class="form-control" id="address">
                <option value="陕西">陕西</option>
                <option value="北京">北京</option>
                <option value="南京">南京</option>
                <option value="安徽">安徽</option>
                <option value="上海">上海</option>
            </select>
        </div>

        <div class="form-group">
            <label for="qq">QQ：</label>
            <input type="text" class="form-control" id="qq" name="qq" placeholder="请输入QQ号码"/>
            <sapn id="s_qq" class="error"></sapn>
        </div>

        <div class="form-group">
            <label for="email">Email：</label>
            <input type="text" class="form-control" id="email" name="email" placeholder="请输入邮箱地址"/>
            <sapn id="s_email" class="error"></sapn>
        </div>

        <div class="form-group" style="text-align: center">
            <input class="btn btn-primary" type="submit" value="提交" id="submit"/>
            <input class="btn btn-default" type="reset" value="重置"/>
            <input class="btn btn-default" type="button" value="返回"/>
        </div>
    </form>
</div>
</body>
</html>

index.jsp

<%--
  Created by IntelliJ IDEA.
  User: liz
  Date: 2020/8/9
  Time: 14:20
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="zh-CN">
<head>
  <meta charset="utf-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <title>首页</title>

  <!-- 1. 导入CSS的全局样式 -->
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <!-- 2. jQuery导入，建议使用1.9以上的版本 -->
  <script src="js/jquery-2.1.0.min.js"></script>
  <!-- 3. 导入bootstrap的js文件 -->
  <script src="js/bootstrap.min.js"></script>
  <script type="text/javascript">
  </script>
</head>
<body>
<div align="center">
  <a
          href="${pageContext.request.contextPath}/findUserByPageServlet" style="text-decoration:none;font-size:33px">查询所有用户信息

  </a>
</div>
</body>
</html>

list.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html>
<!-- 网页使用的语言 -->
<html lang="zh-CN">
<head>
    <!-- 指定字符集 -->
    <meta charset="utf-8">
    <!-- 使用Edge最新的浏览器的渲染方式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- viewport视口：网页可以根据设置的宽度自动进行适配，在浏览器的内部虚拟一个容器，容器的宽度与设备的宽度相同。
    width: 默认宽度与设备的宽度相同
    initial-scale: 初始的缩放比，为1:1 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>用户信息管理系统</title>

    <!-- 1. 导入CSS的全局样式 -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- 2. jQuery导入，建议使用1.9以上的版本 -->
    <script src="js/jquery-2.1.0.min.js"></script>
    <!-- 3. 导入bootstrap的js文件 -->
    <script src="js/bootstrap.min.js"></script>
    <style type="text/css">
        td, th {
            text-align: center;
        }
    </style>
    <script>
        function give_msg(id) {
            var flag = confirm("您确定删除么？");
            if (flag) {
                location.href = '${pageContext.request.contextPath}/deleteServlet?id=' + id;
            }
        }

        function select() {
            var uids = document.getElementsByName("uid");
            var flag = false;
            for (var i = 0; i < uids.length; ++i) {
                var checked = uids[i].checked;
                if (checked) {
                    flag = true;
                    break;
                }
            }
            if (flag) {
                var flag = window.confirm("您确认删除么？");
                if (flag) {
                    document.getElementById("s_form").submit();
                }
            }
        }


        window.onload = function () {

            document.getElementById("selectAll").onclick = function () {
                var uids = document.getElementsByName("uid");
                for (var i = 0; i < uids.length; ++i) {
                    uids[i].checked = this.checked; // this代表 --> document.getElementById("selectAll")组件

                }

            }

        };
    </script>

</head>
<body>
<div class="container">
    <h3 style="text-align: center">用户信息列表</h3>
    <div>
        <form class="form-inline" style="float: left" action="${pageContext.request.contextPath}/findUserByPageServlet"
              method="post">
            <div class="form-group">
                <label for="name">姓名</label>
                <input type="text" name="name" class="form-control" id="name" value="${condition.name[0]}">
            </div>
            <div class="form-group">
                <label for="address">籍贯</label>
                <input type="text" name="address" class="form-control" id="address" value="${condition.address[0]}">
            </div>
            <div class="form-group">
                <label for="email">Email</label>
                <input type="text" name="email" class="form-control" id="email" value="${condition.email[0]}">
            </div>
            <button type="submit" name="submit" class="btn btn-default">查询</button>
        </form>
        <div style="float: right;margin: 3px">
            <a class="btn btn-primary" href="${pageContext.request.contextPath}/add.jsp">添加联系人</a>
            <a class="btn btn-primary" href="javascript:void(0);" onclick="select()">删除选中</a>
        </div>
    </div>
    <form action="${pageContext.request.contextPath}/delSelectServlet" method="post" id="s_form">
        <table border="1" class="table table-bordered table-hover">
            <tr class="success">
                <th><input type="checkbox" id="selectAll"></th>
                <th>编号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>籍贯</th>
                <th>QQ</th>
                <th>邮箱</th>
                <th>操作</th>
            </tr>
            <c:forEach items="${userByPages.user}" var="user" varStatus="u">
                <tr>
                    <td><input type="checkbox" name="uid" value="${user.id}"></td>
                    <td>${u.count}</td>
                    <td>${user.name}</td>
                    <td>${user.gender}</td>
                    <td>${user.age}</td>
                    <td>${user.address}</td>
                    <td>${user.qq}</td>
                    <td>${user.email}</td>
                    <td>
                        <a class="btn btn-default btn-sm"
                           href="${pageContext.request.contextPath}/findUserServlet?id=${user.id}">修改</a>&nbsp;
                        <a class="btn btn-default btn-sm" href="javascript:give_msg(${user.id})">删除</a>
                    </td>
                </tr>
            </c:forEach>
        </table>
    </form>
    <div>
        <nav aria-label="Page navigation">
            <ul class="pagination">
                <c:if test="${userByPages.currentPage - 1==0}">
                <li class="disabled">
                    </c:if>
                    <c:if test="${userByPages.currentPage - 1 > 0}">
                <li>
                    </c:if>
                    <a href="${pageContext.request.contextPath}/findUserByPageServlet?currentPage=${userByPages.currentPage - 1}&rows=${5}&name=${condition.name[0]}&address=${condition.address[0]}&email=${condition.email[0]}"
                       aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
                <c:forEach begin="1" end="${userByPages.totalPage}" var="num" step="1" varStatus="c">
                    <c:if test="${userByPages.currentPage==num}">
                        <li class="active">
                            <a href="${pageContext.request.contextPath}/findUserByPageServlet?currentPage=${num}&rows=${5}&name=${condition.name[0]}&address=${condition.address[0]}&email=${condition.email[0]}">${num}</a>
                        </li>
                    </c:if>
                    <c:if test="${userByPages.currentPage!=num}">
                        <li>
                            <a href="${pageContext.request.contextPath}/findUserByPageServlet?currentPage=${num}&rows=${5}&name=${condition.name[0]}&address=${condition.address[0]}&email=${condition.email[0]}">${num}</a>
                        </li>
                    </c:if>
                </c:forEach>

                <c:if test="${userByPages.currentPage + 1 > userByPages.totalPage}">
                <li class="disabled">
                    </c:if>
                    <c:if test="${userByPages.currentPage + 1 <= userByPages.totalPage}">
                <li>
                    </c:if>
                    <a href="${pageContext.request.contextPath}/findUserByPageServlet?currentPage=${userByPages.currentPage + 1}&rows=${5}&name=${condition.name[0]}&address=${condition.address[0]}&email=${condition.email[0]}"
                       aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
                <span style="font-size: 25px;padding-left: 10px">
                    共${userByPages.totalCount}条记录，${userByPages.totalPage}页
                </span>
            </ul>
        </nav>
    </div>
</div>
</body>
</html>

<%--
  Created by IntelliJ IDEA.
  User: liz
  Date: 2020/8/9
  Time: 16:35
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html lang="zh-CN">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <title>管理员登录</title>

    <!-- 1. 导入CSS的全局样式 -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- 2. jQuery导入，建议使用1.9以上的版本 -->
    <script src="js/jquery-2.1.0.min.js"></script>
    <!-- 3. 导入bootstrap的js文件 -->
    <script src="js/bootstrap.min.js"></script>
    <script type="text/javascript"></script>
    <script>
        function refreshCode() {
            var vcode = document.getElementById("vcode");
            var date = new Date().getTime();
            vcode.src = "${pageContext.request.contextPath}/checkCode?time=" + date;
        }

    </script>
</head>
<body>
<div class="container" style="width: 400px;">
    <h3 style="text-align: center;">管理员登录</h3>
    <form action="${pageContext.request.contextPath}/loginUser" method="post">
        <div class="form-group">
            <label for="user">用户名：</label>
            <input type="text" name="username" class="form-control" id="user" placeholder="请输入用户名"/>
        </div>

        <div class="form-group">
            <label for="password">密码：</label>
            <input type="password" name="password" class="form-control" id="password" placeholder="请输入密码"/>
        </div>

        <div class="form-inline">
            <label for="vcode">验证码：</label>
            <input type="text" name="verifycode" class="form-control" id="verifycode" placeholder="请输入验证码"
                   style="width: 120px;"/>
            <a href="javascript:refreshCode()"><img src="${pageContext.request.contextPath}/checkCode" title="看不清点击刷新"
                                                    id="vcode"/></a>
        </div>
        <hr/>
        <div class="form-group" style="text-align: center;">
            <input class="btn btn btn-primary" type="submit" value="登录">
        </div>
    </form>

    <!-- 出错显示的信息框 -->
    <div class="alert alert-warning alert-dismissible" role="alert">
        <button type="button" class="close" data-dismiss="alert">
            <span>&times;</span>
        </button>
        <strong>${code_error}</strong>
        <strong>${adminUser_error}</strong>
    </div>
</div>
</body>
</html>

update.jsp

<%--
  Created by IntelliJ IDEA.
  User: liz
  Date: 2020/8/10
  Time: 20:03
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html lang="zh-CN">
<head>
    <!-- 指定字符集 -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>修改用户</title>

    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script src="js/jquery-2.1.0.min.js"></script>
    <script src="js/bootstrap.min.js"></script>

</head>
<body>
<div class="container" style="width: 400px;">
    <h3 style="text-align: center;">修改联系人</h3>
    <form action="${pageContext.request.contextPath}/updateUserServlet" method="post">
        <div class="form-group">
            <label for="name">姓名：</label>
            <input type="hidden" name="id" value="${user.id}">
            <input type="text" class="form-control" id="name" name="name" readonly="readonly" placeholder="请输入姓名"
                   value="${requestScope.user.name}"/>
        </div>

        <div class="form-group">
            <label>性别：</label>
            <c:if test="${user.gender=='男'}">
                <input type="radio" name="gender" value="男" checked/>男
                <input type="radio" name="gender" value="女"/>女
            </c:if>
            <c:if test="${user.gender=='女'}">
                <input type="radio" name="gender" value="男"/>男
                <input type="radio" name="gender" value="女" checked/>女
            </c:if>
        </div>

        <div class="form-group">
            <label for="age">年龄：</label>
            <input type="text" class="form-control" id="age" name="age" placeholder="请输入年龄" value="${user.age}"/>
        </div>

        <div class="form-group">
            <label for="address">籍贯：</label>
            <select name="address" id="address" class="form-control">
                <c:if test="${user.address =='陕西'}">
                    <option value="陕西" selected>陕西</option>
                    <option value="北京">北京</option>
                    <option value="上海">上海</option>
                    <option value="南京">南京</option>
                    <option value="安徽">安徽</option>
                    <option value="苏州">苏州</option>
                </c:if>
                <c:if test="${user.address =='北京'}">
                    <option value="陕西">陕西</option>
                    <option value="北京" selected>北京</option>
                    <option value="上海">上海</option>
                    <option value="南京">南京</option>
                    <option value="安徽">安徽</option>
                    <option value="苏州">苏州</option>
                </c:if>
                <c:if test="${user.address =='上海'}">
                    <option value="陕西">陕西</option>
                    <option value="北京">北京</option>
                    <option value="上海" selected>上海</option>
                    <option value="南京">南京</option>
                    <option value="安徽">安徽</option>
                    <option value="苏州">苏州</option>
                </c:if>
                <c:if test="${user.address =='南京'}">
                    <option value="陕西">陕西</option>
                    <option value="北京">北京</option>
                    <option value="上海">上海</option>
                    <option value="南京" selected>南京</option>
                    <option value="安徽">安徽</option>
                    <option value="苏州">苏州</option>
                </c:if>
                <c:if test="${user.address =='安徽'}">
                    <option value="陕西">陕西</option>
                    <option value="北京">北京</option>
                    <option value="上海">上海</option>
                    <option value="南京">南京</option>
                    <option value="安徽" selected>安徽</option>
                    <option value="苏州">苏州</option>
                </c:if>
                <c:if test="${user.address =='苏州'}">
                    <option value="陕西">陕西</option>
                    <option value="北京">北京</option>
                    <option value="上海">上海</option>
                    <option value="南京">南京</option>
                    <option value="安徽">安徽</option>
                    <option value="苏州" selected>苏州</option>
                </c:if>
            </select>
        </div>

        <div class="form-group">
            <label for="qq">QQ：</label>
            <input type="text" id="qq" class="form-control" name="qq" placeholder="请输入QQ号码" value="${user.qq}"/>
        </div>

        <div class="form-group">
            <label for="email">Email：</label>
            <input type="text" id="email" class="form-control" name="email" placeholder="请输入邮箱地址"
                   value="${user.email}"/>
        </div>

        <div class="form-group" style="text-align: center">
            <input class="btn btn-primary" type="submit" value="提交"/>
            <input class="btn btn-default" type="reset" value="重置"/>
            <input class="btn btn-default" type="button" value="返回"/>
        </div>
    </form>
</div>
</body>
</html>

Git的基本操作

本文借鉴廖雪峰老师博客而整理的git相关总结，以方便自己查阅使用。 1.Git用户设定及其配置1.Git配置Git 提供了一个叫做 git config 的工具，专门用来配置或读取相应的工作环境...

conda常用命令

一、设置镜像源conda1234// 以清华镜像为例conda config --add channels https://mirrors.tuna.ts...