Servlet+JSP+MySQL前后端分离实现的用户信息列表展示

项目全部资源

1.技术选型

Servlet+JSP+MySQL+JDBCTempleat+Duird+BeanUtilS+tomcat

2.开发环境

idea、mysql 5.6、jdk1.8、tomcat8.0

3.需求分析

1. 登录
   输入用户名、密码及验证码进行登录，对信息进行验证
2. 添加
   点击添加用户，进入添加页面，可以添加新用户
3. 修改
   点击修改用户信息，进入修改页面，对用户的信息进行修改
4. 删除
   删除单个用户或同时删除多个用户
5. 查询
   通过用户信息进行条件查询

4.详细设计及实现

1. 登录模块
   1. 验证码
      为生成的验证码图片增加时间戳，实现验证码保持不同。
   2. 1）点击登陆后，向"/loginServlet"发送请求，在/loginServlet中获取yoghurt输入信息以及/checkCodeServlet生成的验证码。
      2）首先判断验证码是否正确，若否则跳转至登陆页面，提示错误信息。
      3）然后利用BeanUtils工具封装用户输入信息，调用service层中的login(user)方法查询用户是否存在。
   3. 登录成功后跳转至index界面

部分代码如下：

 //切换验证码
        function refreshCode(){
            //1.获取验证码图片对象
            var vcode = document.getElementById("vcode");

            //2.设置其src属性，加时间戳
            vcode.src = "${pageContext.request.contextPath}/checkCodeServlet?time="+new Date().getTime();
        }

/loginServlet

//获取用户输入的信息，放入map集合中
   Map<String, String[]> map = request.getParameterMap();
        //4.封装User对象
        User user = new User();
       
            BeanUtils.populate(user,map);//try...catch...
            
  //5.调用Service查询
        UserService service = new UserServiceImpl();
        User loginUser = service.login(user);
        //6.判断是否登录成功

UserDaoImpl

 private JdbcTemplate template = new JdbcTemplate(JDBCUtils.getDataSurce());
     @Override
    //2.根据用户名及密码查找用户
    public User login(String username, String password) {
        try {
            //1.定义sqlyuju
            String sql = "select * from user where username = ? and password = ?";
            //2.执行sql,返会user对象
            User user = template.queryForObject(sql, new BeanPropertyRowMapper<User>(User.class), username, password);
            System.out.println(user);
            return user;
        } catch (Exception e) {
            e.printStackTrace();
            return null;
        }

实现效果：

2. 首页及用户信息展示页面设计
   1. 首页只起到中转作用，显示用户名以及可以进行的操作。
      点击查询所有用户信息，发送请求至/userListServlet（若添加分页则需要发送至/findUserByPageServlet）
   2. 在/userListServlet中获取所有用户信息的集合，放入request域中，转发至list.jsp页面。
      /findUserByPageServlet中涉及到查询内容先不做叙述。

部分代码如下：

/userListServlet

//1.获取service对象
        UserService userService = new UserServiceImpl();
        //2.调用fidAll()方法，获取用户的list集合
        List<User> users = userService.findAll();
        System.out.println(users);
        //3.将获取的集合放入request域中
        request.getSession().setAttribute("users",users);
        //4.请求转发
        request.getRequestDispatcher("/list.jsp").forward(request,response);

list.jsp页面如下：（分页展示）

3. 添加用户
   1. 在list.jsp页面中点击添加联系人，跳转至/add.jsp，输入用户信息，点击提交将表达信息发送至/addUserServlet。
   2. 在/addUserServlet中利用 BeanUtils工具封装用户信息，然后创建service对象,调用add方法添加用户，然后跳转至/userListServlet，获取数据库中的所有用户信息，进行展示。

部分代码如下：

     @Override
    /*
        3.添加用户
    */
    public void add(User user) {
        //1.定义sql
        String sql="INSERT INTO USER VALUES (NULL,?,?,?,?,?,?,NULL,NULL)";
        //2.执行sql
        int i = template.update(sql, user.getName(), user.getGender(), user.getAge(), user.getAddress(), user.getQq(), user.getEmail());
        if (i>0){
            System.out.println("添加成功");
        }else {
            System.out.println("用户添加失败");
        }
    }

实现效果：

3. 修改
   1. 点击将要修改的用户的修改按钮，跳转至update.jap页面，使用jstl表达式显示用户原有信息，用户名设置为不可更改。
   2. 修改完成后点击提交，将表单信息发送至/userUpdateServlet处理。

部分代码如下：

  @Override
            /*
        4.更新用户信息
     */

        public void update(User user) {
            //1.定义sql
            String sql="UPDATE USER SET name=?,gender=?,age=?,address=?,qq=?,email=? where id=?";
            //2.执行
            int i = template.update(sql, user.getName(), user.getGender(), user.getAge(), user.getAddress(), user.getQq() , user.getEmail(),user.getId());
         }

实现效果：

4. 删除
   1. 单个删除
      1）选中某条信息的删除按钮，点击后JS代码实现提示，确定后将用户id发送至/delUserServlet
   2. 多个删除
      1）选中想要删除的用户信息前面的复选框，点击删除选中按钮，此时执行JS代码，判断此次操作是否有效，若有效则提交表单至/findUserByPageServlet
      2）在servlet中获取删除用户的uId数组，调用deleteSelectUser(ids)方法，for循环删除

部分代码：
UserDaoImpl

 /*
            5.根据id删除用户信息
         */
        public void deleteUser(String id) {
            int uid = Integer.parseInt(id);
            //1.定义sql
            String sql="DELETE  FROM USER WHERE id = ?;";
            //2.执行
            int update = template.update(sql, uid);
            if (update>0){
                System.out.println("删除成功");
            }else {
                System.out.println("删除失败");
            }
        }

UserServiceImpl

   @Override
    public void deleteSelectUser(String[] ids) {
        for (String id : ids) {
            dao.deleteUser(id);
        }
    }

实现效果：

5. 查询
输入用户信息进行条件查询，点击查询后提交表单到/findUserByPageServlet，
实现效果：