Web综合实践之用户信息管理

前言

博主在Web阶段也学习了近一个月，对于前端和后端的一些连接部分也有了一些了解

本篇博客是用来总结自己写过的一个小的综合案例，其实增删改查的操作都很简单了，最重要的是如何 将前端和后端连接起来 的思想

欢迎大家提出意见哦~ 觉得博主写得不错的可以一键三连啦~ 博主写得头都要昏了~

 

 
 

登录界面

在进入系统前，我们要先进操作员的登录，这里本来该建一个新的操作员实体类，并在数据库中创建一个操作员信息表的，但是这里为了方便，直接给用户信息添加了 username 和 password 两个属性
 

界面展示

 

后端代码思路分析

LoginServlet 类的代码编写流程：

1. 设置编码

   request.setCharacterEncoding("utf-8");
   

2. 获取数据：获取用户填写的验证码

   String verifycode = request.getParameter("verifycode");
   

3. 验证码校验

   如果验证失败：
   	1、先设置提示信息
   		request.setAttribute("login_msg","验证码错误");
   		
   	2、再跳转界面，跳转回登录界面（使用转发）
   		为什么要跳转呢？仔细想想，点击登录按钮后，系统自动将数据拿到数据库进行比较
   		如果登录失败就要跳转到登录界面，而登录成功就需要跳转到另一个系统界面
   		所以这里要做跳转这一步，后面都会使用到跳转，就不再详细解释了
   		request.getRequestDispatcher("/login.jsp").forward(request,response);
   

4. 封装User对象

   将前端获取的数据进行封装，封装成实体类User(用户信息实体类)对象，这里使用的是 BeanUtils类的 populate 方法，参数为 ：(存储数据的对象，要转换的对象)

5. 调用Service查询

   调用Service实现类中的方法将封装后的对象 user 与数据库中的数据进行比较，这里要说明：

   根据三层架构，我们分为：
   1.界面层(表示层)：用户看的得界面。用户可以通过界面上的组件和服务器进行交互
   2.业务逻辑层：处理业务逻辑的。（接口命名为Service，实现类为ServiceImp）
   3.数据访问层：操作数据存储文件。(接口命名为Dao，实现类为DaoImp)
   

6. 判断是否登录成功

   验证成功
       1、把数据存入session
       session.setAttribute("user",login_user);
       2、跳转页面（重定向）
       response.sendRedirect(request.getContextPath()+"/index.jsp");
   
   验证失败
       1、提示信息
       request.setAttribute("login_msg","用户名或密码错误");
       2、跳转登录界面
       request.getRequestDispatcher("/login.jsp").forward(request,response);
   

 

前端代码分析

1. 为表单设置action属性，设置表单提交的地址，其中${pageContext.request.contextPath}用来替代虚拟路径，这样就不用再更换虚拟路径后又一个个进行修改

   <form action="${pageContext.request.contextPath}/loginServlet" method="post">
   

2. 给每一个文本框添加 id 属性，因为要将文本框的数据传入后端，传入的数据是一个map集合，key 就是 id 的内容，例如：

   <input type="text" name="username" class="form-control" id="user" placeholder="请输入用户名"/>
   

3. 登录界面肯定需要验证码，添加一张验证码的图，"href="javascript:refreshCode();"是为该链接添加一个函数，使之能切换不同的验证码

   验证码的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}/checkCodeServlet" title="看不清点击刷新" id="vcode"/>
               </a>
   </div>
   

   验证码的script

    <script type="text/javascript">
           //切换验证码
           function refreshCode(){
          
               //1.获取验证码图片对象
               var vcode = document.getElementById("vcode");
   
               //2.设置其src属性，加时间戳
               vcode.src = "${pageContext.request.contextPath}/checkCodeServlet?time="+new Date().getTime();
           }
    </script>
   

4. 修改错误提示框里的提示信息，<strong>xxx</strong>中的xxx改为${login_msg}，在Servlet中会定义这个信息，并用setAttribute()方法传入request中

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

---

增加功能

 

界面展示

 

后端代码思路分析

AddUserServlet 的代码编写思路：

1. 设置编码

   设置编码的作用主要是为了防止乱码，代码如下：

   request.setCharacterEncoding("utf-8");
   

2. 获取参数

   这里的参数指的是页面里输入的数据(前端输入的数据)，获取到后端，再到数据库中进行查询和比较，使用的是 getParameterMap() 方法

3. 封装对象

   将前端获取的数据进行封装，封装成实体类User(用户信息实体类)对象，这里使用的是 BeanUtils类的 populate 方法，参数为 ：(存储数据的对象，要转换的对象)

4. 调用Service

   调用Service实现类中的方法将封装后的对象 user 与数据库中的数据进行比较

5. 跳转到 FindUserByPageServlet（重定向）

 

前端代码分析

1. 为表单设置action属性，设置表单提交的地址，其中${pageContext.request.contextPath}用来替代虚拟路径，这样就不用再更换虚拟路径后又一个个进行修改

   <form action="${pageContext.request.contextPath}/addUserServlet" method="post">
   

2. 给每一个文本框添加 id 属性，因为要将文本框的数据传入后端，传入的数据是一个map集合，key 就是 id 的内容，例如：

   <input type="