zoukankan      html  css  js  c++  java
  • java web综合案例

    1、采用的技术:

    bootstrap+jsp+servlet+三层架构(servlet,service,dao)+mysql

    注意:mysql使用的是5.5版本,使用高版本会有很多问题。可以将5.5版本安装在虚拟机上,这样方便很多

    2、基本功能:

    登录功能,有验证码功能 (因为这是个小demo,所以每个用户都是管理员,都有对其他用户的操作权限)-----此处很让人纠结

    登陆进去有一个查询用户列表页面,该页面可以实现用户的增删改查。拓展功能为删除选中,分页功能,联合查询

    登录界面:

     用户列表页面:

     修改页面:

     添加联系人页面:

     三、数据库设计

    表单设计:此处的name可以理解为昵称。登录使用的是username,password俩个字段

     四、环境搭建

    jdk1.8,tomcat版本随意,不使用web.xml配置文件

     五、代码开发

    代码已上传到: https://gitee.com/hsy88/java_web_simple_case.git

    视频教程:https://www.bilibili.com/video/BV1uJ411k7wy?p=782

    1、登录功能:

    登录的jsp页面需要请求CheckCodeServlet(功能:生成验证码),CheckCodeServlet将验证码字符串存到session域中,并将图片返回给login.jsp

    把提交表单提交给LoginServlet, LoginServlet先判断验证码是否正确

      如果不正确,设置验证码错误的提示信息,跳转到login.jsp,让div显示提示

      如果正确,根据获取的用户名,密码到数据库查询,

        查到了跳转到登录成功页面。

        没查到就 设置一个用户名密码的错误提示,存到request里面,然后login.jsp使用el表达式获取提示信息,显示在div内部

    login.jsp代码如下:

     1 <%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
     2 <html>
     3 <head>
     4     <meta charset="utf-8"/>
     5     <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
     6     <meta name="viewport" content="width=device-width, initial-scale=1"/>
     7     <title>管理员登录</title>
     8     <%--bootstrap需要引入的文件,也可以使用cdn--%>
     9     <link href="css/bootstrap.min.css" rel="stylesheet">
    10     <script src="js/jquery-2.1.0.min.js"></script>
    11     <script src="js/bootstrap.min.js"></script>
    12     <script>
    13         function refreshCode() {
    14             var vcode=document.getElementById("vcode");
    15 
    16             vcode.src="${pageContext.request.contextPath}/checkCodeServlet ?time="+new Date().getTime();
    17         }
    18     </script>
    19 </head>
    20 <body>
    21 <div class="container" style=" 400px;">
    22     <h3 style="text-align: center;">管理员登录</h3>
    23     <form action="${pageContext.request.contextPath}/loginServlet" method="post">
    24         <div class="form-group">
    25             <%--lable标签的作用就是点击表单项名称,自动将焦点放到输入框,lable的for和input的id对应--%>
    26             <label for="user">用户名:</label>
    27             <input type="text" name="username" class="form-control" id="user" placeholder="请输入用户名"/>
    28         </div>
    29 
    30         <div class="form-group">
    31             <label for="password">密码:</label>
    32             <input type="password" name="password" class="form-control" id="password" placeholder="请输入密码"/>
    33         </div>
    34 
    35         <div class="form-inline">
    36             <label for="vcode">验证码:</label>
    37             <input type="text" name="verifycode" class="form-control" id="verifycode" placeholder="请输入验证码" style=" 120px;"/>
    38             <%--把验证码的图片放到超链接里,当点击超链接,执行refreshCode()方法--%>
    39             <a href="javascript:refreshCode();">
    40                 <img src="${pageContext.request.contextPath}/checkCodeServlet" title="看不清点击刷新" id="vcode"/>
    41             </a>
    42         </div>
    43         <hr/>
    44         <div class="form-group" style="text-align: center;">
    45             <input class="btn btn btn-primary" type="submit" value="登录">
    46         </div>
    47     </form>
    48 
    49     <!-- 出错显示的信息框 -->
    50     <div class="alert alert-warning alert-dismissible" role="alert">
    51         <strong>${login_msg}</strong>
    52         <button type="button" class="close" data-dismiss="alert" >
    53             <span>&times;</span>
    54         </button>
    55 
    56     </div>
    57 </div>
    58 
    59 </body>
    60 </html>

    CheckCodeServlet:

     1 package cn.itcast.web.servlet;
     2 
     3 import javax.imageio.ImageIO;
     4 import javax.servlet.ServletException;
     5 import javax.servlet.annotation.WebServlet;
     6 import javax.servlet.http.HttpServlet;
     7 import javax.servlet.http.HttpServletRequest;
     8 import javax.servlet.http.HttpServletResponse;
     9 import java.awt.*;
    10 import java.awt.image.BufferedImage;
    11 import java.io.IOException;
    12 import java.util.Random;
    13 
    14 /**
    15  * 验证码
    16  */
    17 @WebServlet("/checkCodeServlet")
    18 public class CheckCodeServlet extends HttpServlet {
    19     public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
    20         
    21         //服务器通知浏览器不要缓存
    22         response.setHeader("pragma","no-cache");
    23         response.setHeader("cache-control","no-cache");
    24         response.setHeader("expires","0");
    25         
    26         //在内存中创建一个长80,宽30的图片,默认黑色背景
    27         //参数一:长
    28         //参数二:宽
    29         //参数三:颜色
    30         int width = 80;
    31         int height = 30;
    32         BufferedImage image = new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB);
    33         
    34         //获取画笔
    35         Graphics g = image.getGraphics();
    36         //设置画笔颜色为灰色
    37         g.setColor(Color.GRAY);
    38         //填充图片
    39         g.fillRect(0,0, width,height);
    40         
    41         //产生4个随机验证码,12Ey
    42         String checkCode = getCheckCode();
    43         //将验证码放入HttpSession中
    44         request.getSession().setAttribute("CHECKCODE_SERVER",checkCode);
    45         
    46         //设置画笔颜色为黄色
    47         g.setColor(Color.YELLOW);
    48         //设置字体的小大
    49         g.setFont(new Font("黑体",Font.BOLD,24));
    50         //向图片上写入验证码
    51         g.drawString(checkCode,15,25);
    52         
    53         //将内存中的图片输出到浏览器
    54         //参数一:图片对象
    55         //参数二:图片的格式,如PNG,JPG,GIF
    56         //参数三:图片输出到哪里去
    57         ImageIO.write(image,"PNG",response.getOutputStream());
    58     }
    59     /**
    60      * 产生4位随机字符串 
    61      */
    62     private String getCheckCode() {
    63         String base = "0123456789ABCDEFGabcdefg";
    64         int size = base.length();
    65         Random r = new Random();
    66         StringBuffer sb = new StringBuffer();
    67         for(int i=1;i<=4;i++){
    68             //产生0到size-1的随机值
    69             int index = r.nextInt(size);
    70             //在base字符串中获取下标为index的字符
    71             char c = base.charAt(index);
    72             //将c放入到StringBuffer中去
    73             sb.append(c);
    74         }
    75         return sb.toString();
    76     }
    77     public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    78         this.doGet(request,response);
    79     }
    80 }

    LoginServlet:

     1 package cn.itcast.web.servlet;
     2 
     3 import cn.itcast.domain.User;
     4 import cn.itcast.service.UserService;
     5 import cn.itcast.service.impl.UserServiceImpl;
     6 import org.apache.commons.beanutils.BeanUtils;
     7 
     8 import javax.servlet.ServletException;
     9 import javax.servlet.annotation.WebServlet;
    10 import javax.servlet.http.HttpServlet;
    11 import javax.servlet.http.HttpServletRequest;
    12 import javax.servlet.http.HttpServletResponse;
    13 import javax.servlet.http.HttpSession;
    14 import java.io.IOException;
    15 import java.lang.reflect.InvocationTargetException;
    16 import java.util.Map;
    17 
    18 @WebServlet("/loginServlet")
    19 public class LoginServlet extends HttpServlet {
    20     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    21         //1.设置编码
    22         request.setCharacterEncoding("utf-8");
    23 
    24         //2.获取数据
    25         //2.1获取用户填写验证码
    26         String verifycode = request.getParameter("verifycode");
    27 
    28         //3.验证码校验
    29         HttpSession session = request.getSession();
    30         String checkcode_server = (String) session.getAttribute("CHECKCODE_SERVER");
    31 
    32         session.removeAttribute("CHECKCODE_SERVER");//确保验证码一次性
    33         if(!checkcode_server.equalsIgnoreCase(verifycode)){
    34             //验证码不正确
    35             //提示信息
    36             request.setAttribute("login_msg","验证码错误!");
    37             //跳转登录页面
    38             request.getRequestDispatcher("/login.jsp").forward(request,response);
    39 
    40             return;
    41         }
    42 
    43         Map<String, String[]> map = request.getParameterMap();
    44         //4.封装User对象
    45         User user = new User();
    46         try {
    47             BeanUtils.populate(user,map);
    48         } catch (IllegalAccessException e) {
    49             e.printStackTrace();
    50         } catch (InvocationTargetException e) {
    51             e.printStackTrace();
    52         }
    53 
    54 
    55         //5.调用Service查询
    56         UserService service = new UserServiceImpl();
    57         User loginUser = service.login(user);
    58         //6.判断是否登录成功
    59         if(loginUser != null){
    60             //登录成功
    61             //将用户存入session
    62             session.setAttribute("user",loginUser);
    63             //跳转页面
    64             response.sendRedirect(request.getContextPath()+"/index.jsp");
    65         }else{
    66             //登录失败
    67             //提示信息
    68             request.setAttribute("login_msg","用户名或密码错误!");
    69             //跳转登录页面
    70             request.getRequestDispatcher("/login.jsp").forward(request,response);
    71 
    72         }
    73         
    74 
    75     }
    76 
    77     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    78         this.doPost(request, response);
    79     }
    80 }

    2、列表查询

    分析:

     六、总结

    每次做完一个功能要重启服务器,负责看不到代码效果会让你以为错了,进而要浪费很长时间看哪里有问题

  • 相关阅读:
    ElasticSearch常用命令
    php 图片打包下载zipfile打包
    windows环境下安装RabbitMQ的步骤
    报Apache/2.4.29 (Ubuntu) Server at admin.milebb.cn Port 80 的解决方法
    phpstorm免费破解永久激活方法
    解决MySQL远程连接服务器上的MySQL报1130的错问题
    最新 laravel maatwebsite/excel ^3.1 导出方法详解
    码云gitee推送到远程仓库时提示错误 remote: Incorrect username or password ( access token )
    Laravel 5.8 下载安装 超实用
    利用ShowDoc自动生成api接口文档
  • 原文地址:https://www.cnblogs.com/treasury/p/12615122.html
Copyright © 2011-2022 走看看