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代码如下:

 <%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<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>
<%--bootstrap需要引入的文件,也可以使用cdn--%>
<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>
<script>
function refreshCode() {
var vcode=document.getElementById("vcode"); vcode.src="${pageContext.request.contextPath}/checkCodeServlet ?time="+new Date().getTime();
}
</script>
</head>
<body>
<div class="container" style="width: 400px;">
<h3 style="text-align: center;">管理员登录</h3>
<form action="${pageContext.request.contextPath}/loginServlet" method="post">
<div class="form-group">
<%--lable标签的作用就是点击表单项名称,自动将焦点放到输入框,lable的for和input的id对应--%>
<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;"/>
<%--把验证码的图片放到超链接里,当点击超链接,执行refreshCode()方法--%>
<a href="javascript:refreshCode();">
<img src="${pageContext.request.contextPath}/checkCodeServlet" 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">
<strong>${login_msg}</strong>
<button type="button" class="close" data-dismiss="alert" >
<span>&times;</span>
</button> </div>
</div> </body>
</html>

CheckCodeServlet:

 package cn.itcast.web.servlet;

 import javax.imageio.ImageIO;
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.awt.*;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.util.Random; /**
* 验证码
*/
@WebServlet("/checkCodeServlet")
public class CheckCodeServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException { //服务器通知浏览器不要缓存
response.setHeader("pragma","no-cache");
response.setHeader("cache-control","no-cache");
response.setHeader("expires","0"); //在内存中创建一个长80,宽30的图片,默认黑色背景
//参数一:长
//参数二:宽
//参数三:颜色
int width = 80;
int height = 30;
BufferedImage image = new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB); //获取画笔
Graphics g = image.getGraphics();
//设置画笔颜色为灰色
g.setColor(Color.GRAY);
//填充图片
g.fillRect(0,0, width,height); //产生4个随机验证码,12Ey
String checkCode = getCheckCode();
//将验证码放入HttpSession中
request.getSession().setAttribute("CHECKCODE_SERVER",checkCode); //设置画笔颜色为黄色
g.setColor(Color.YELLOW);
//设置字体的小大
g.setFont(new Font("黑体",Font.BOLD,24));
//向图片上写入验证码
g.drawString(checkCode,15,25); //将内存中的图片输出到浏览器
//参数一:图片对象
//参数二:图片的格式,如PNG,JPG,GIF
//参数三:图片输出到哪里去
ImageIO.write(image,"PNG",response.getOutputStream());
}
/**
* 产生4位随机字符串
*/
private String getCheckCode() {
String base = "0123456789ABCDEFGabcdefg";
int size = base.length();
Random r = new Random();
StringBuffer sb = new StringBuffer();
for(int i=1;i<=4;i++){
//产生0到size-1的随机值
int index = r.nextInt(size);
//在base字符串中获取下标为index的字符
char c = base.charAt(index);
//将c放入到StringBuffer中去
sb.append(c);
}
return sb.toString();
}
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doGet(request,response);
}
}

LoginServlet:

 package cn.itcast.web.servlet;

 import cn.itcast.domain.User;
import cn.itcast.service.UserService;
import cn.itcast.service.impl.UserServiceImpl;
import org.apache.commons.beanutils.BeanUtils; 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 javax.servlet.http.HttpSession;
import java.io.IOException;
import java.lang.reflect.InvocationTargetException;
import java.util.Map; @WebServlet("/loginServlet")
public class LoginServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//1.设置编码
request.setCharacterEncoding("utf-8"); //2.获取数据
//2.1获取用户填写验证码
String verifycode = request.getParameter("verifycode"); //3.验证码校验
HttpSession session = request.getSession();
String checkcode_server = (String) session.getAttribute("CHECKCODE_SERVER"); session.removeAttribute("CHECKCODE_SERVER");//确保验证码一次性
if(!checkcode_server.equalsIgnoreCase(verifycode)){
//验证码不正确
//提示信息
request.setAttribute("login_msg","验证码错误!");
//跳转登录页面
request.getRequestDispatcher("/login.jsp").forward(request,response); return;
} Map<String, String[]> map = request.getParameterMap();
//4.封装User对象
User user = new User();
try {
BeanUtils.populate(user,map);
} catch (IllegalAccessException e) {
e.printStackTrace();
} catch (InvocationTargetException e) {
e.printStackTrace();
} //5.调用Service查询
UserService service = new UserServiceImpl();
User loginUser = service.login(user);
//6.判断是否登录成功
if(loginUser != null){
//登录成功
//将用户存入session
session.setAttribute("user",loginUser);
//跳转页面
response.sendRedirect(request.getContextPath()+"/index.jsp");
}else{
//登录失败
//提示信息
request.setAttribute("login_msg","用户名或密码错误!");
//跳转登录页面
request.getRequestDispatcher("/login.jsp").forward(request,response); } } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
}

2、列表查询

分析:

 六、总结

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

java web综合案例的更多相关文章

  1. web综合案例04

    web综合案例02 web综合案例02 web综合案例04 待补充 ... ...

  2. web综合案例03

    web综合案例03 web综合案例03 web综合案例03 web综合案例03 ... 待复习

  3. web综合案例02

    web综合案例02 web综合案例02 web综合案例02 ... ... 内容待添加

  4. web综合案例01

    web综合案例01 ... .... 内容待添加

  5. JavaSE学习总结(十九)—— Java Web 综合应用(JSP、Servlet、IDEA、MySQL、JUnit、AJAX、JSON)

    一.使用Servlet+JDBC+MySQL+IDEA实现商品管理 1.1.创建项目 打开IntelliJ IDEA开发工具.点击Create New Project创建一个新的Web项目 选择Jav ...

  6. Java Web项目案例之---登录和注册(精华版)

    登录和注册(精华版) (一)实现功能 1.使用cookie记录登录成功的用户名,用户选择记住用户名,则用户再次登录时用户名自动显示 2.实现文件上传功能(上传文件的表单上传于普通的表单上传不同,必须是 ...

  7. Java Web项目案例之---登录注册和增删改查(jsp+servlet)

    登录注册和增删改查(jsp+servlet) (一)功能介绍 1.用户输入正确的密码进行登录 2.新用户可以进行注册 3.登录后显示学生的信息表 4.可以添加学生 5.可以修改学生已有信息 6.可以删 ...

  8. java 内省综合案例和Beanutils工具包

    演示用eclipse自动生成 ReflectPoint类的setter和getter方法. 直接new一个PropertyDescriptor对象的方式来让大家了解JavaBean API的价值,先用 ...

  9. [Java.web]MVC 案例-开发用户模块(注册)

    代码下载 生成后的 user.xml 路径在 X:\day09_user\WebRoot\WEB-INF\classes\users.xml 使用测试 在 day09 项目上右键 -> Run ...

随机推荐

  1. 7-36 jmu-python-统计字符个数 (10 分)

    输入一个字符串,统计其中数字字符及小写字符的个数 输入格式: 输入一行字符串 输出格式: 共有?个数字,?个小写字符,?填入对应数量 输入样例: helo134ss12 输出样例: 共有5个数字,6个 ...

  2. 动态构造任意复杂的 Linq Where 表达式

    前言 Linq 是 C# 中一个非常好用的集合处理库,用好了能帮我们简化大量又臭又长的嵌套循环,使处理逻辑清晰可见.EF 查询主要也是依赖 Linq.但是 Linq 相对 sql 也存在一些缺点,最主 ...

  3. 阿里云ECS开放批量创建实例接口,实现弹性资源的创建

    摘要: 为了更方便的实现弹性的资源创建,方便用户一次运行多台ECS按量实例来完成应用的开发和部署,阿里云开放了ECS的批量创建实例接口RunInstances,可以单次最多创建100台实例,避免重复调 ...

  4. SpringBoot图文教程12—SpringData Jpa的基本使用

    有天上飞的概念,就要有落地的实现 概念十遍不如代码一遍,朋友,希望你把文中所有的代码案例都敲一遍 先赞后看,养成习惯 SpringBoot 图文教程系列文章目录 SpringBoot图文教程1「概念+ ...

  5. 处理公共CDN突然失效的情况

    公共CDN的使用 刚开始开发我的博客时,使用的bootcdn,发现他们被黑过,虽然想骂那些“黑客”,但是我们也没办法去防范,只能从自己的网站上入手解决. 那时我还没技术解决这个问题,网上搜过,大都只提 ...

  6. 【音视频连载-001】基础学习篇- SDL 介绍以及工程配置

    技术开发故事会连载 这是音视频基础学习系列的第一篇文章,主要讲解 SDL 是什么以及为什么要用到它,看似和音视频没啥卵关系,其实必不可少. SDL 简介 SDL 是 "Simple Dire ...

  7. 7,MapReduce基础

    目录 MapReduce基础 一.关于MapReduce 二.MapReduce的优缺点 三.MapReduce的执行流程 四.编写MapReduce程序 五.MapReduce的主要执行流程 Map ...

  8. 简单配置Vue路由

    简单配置Vue路由 1.  创建一个单文件组件Test.vue <template> <div>Test</div> </template> <s ...

  9. 基于.NetCore3.1搭建项目系列 —— 使用Swagger做Api文档 (上篇)

    前言 为什么在开发中,接口文档越来越成为前后端开发人员沟通的枢纽呢? 随着业务的发张,项目越来越多,而对于支撑整个项目架构体系而言,我们对系统业务的水平拆分,垂直分层,让业务系统更加清晰,从而产生一系 ...

  10. 14. LiveBos编号自动生成

    (1) var temp="Apex"; var no=""+ABS_DYNSERIALNO(true,temp); var len=no.length; va ...