Table of contents
3. Create a project, import html and jsp pages, configuration files, jar packages
3.1 Importing html and jsp pages
3.1.1 css, fonts, js related files
1. Demand
User information addition, deletion, modification and query operations
2. Design
2.1 Technical selection
Servlet+JSP+MySQL+JDBCTempleat+Duird+BeanUtilS+tomcat
2.2 Database Design
create database day17; -- create database
use day17; -- use database
create table user( -- create table
id int primary key auto_increment,
name varchar(20) not null,
gender varchar(5),
age int,
address varchar(32),
qq varchar(20),
email varchar(50)
)3. Create a project, import html and jsp pages, configuration files, jar packages
3.1 Importing html and jsp pages
Import the following packages next time
3.1.1 css, fonts, js related files
You can find the corresponding file through the BooStrap official website, or the file format you like.
3.1.2html page
add.html
<!-- HTML5 Documentation-->
<!DOCTYPE html>
<!-- language of the page -->
<html lang="zh-CN">
<head>
<!-- specified character set -->
<meta charset="utf-8">
<!-- use Edge Rendering in the latest browsers -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- viewport Viewport: The web page can be automatically adapted according to the set width, and a container is virtualized inside the browser. The width of the container is the same as the width of the device.
width: The default width is the same as the width of the device
initial-scale: The initial zoom ratio, which is 1:1 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 3 above meta Label*must*on top, anything else is*must*Follow it! -->
<title>Add user</title>
<!-- 1. import CSS the global style of -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- 2. jQuery import, it is recommended to use 1.9 above version -->
<script src="js/jquery-2.1.0.min.js"></script>
<!-- 3. import bootstrap of js document -->
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<center><h3>add contact page</h3></center>
<form action="" method="post">
<div class="form-group">
<label for="name">Name:</label>
<input type="text" class="form-control" id="name" name="name" placeholder="Please type in your name">
</div>
<div class="form-group">
<label>gender:</label>
<input type="radio" name="sex" value="male" checked="checked"/>male
<input type="radio" name="sex" value="Female"/>Female
</div>
<div class="form-group">
<label for="age">age:</label>
<input type="text" class="form-control" id="age" name="age" placeholder="Please enter age">
</div>
<div class="form-group">
<label for="address">Nationality:</label>
<select name="address" class="form-control" id="jiguan">
<option value="Guangdong">Guangdong</option>
<option value="Guangxi">Guangxi</option>
<option value="Hunan">Hunan</option>
</select>
</div>
<div class="form-group">
<label for="qq">QQ: </label>
<input type="text" class="form-control" name="qq" placeholder="please enter QQ Number"/>
</div>
<div class="form-group">
<label for="email">Email: </label>
<input type="text" class="form-control" name="email" placeholder="Please input the email address"/>
</div>
<div class="form-group" style="text-align: center">
<input class="btn btn-primary" type="submit" value="submit" />
<input class="btn btn-default" type="reset" value="reset" />
<input class="btn btn-default" type="button" value="return" />
</div>
</form>
</div>
</body>
</html>index.html
<!DOCTYPE html>
<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>front page</title>
<!-- 1. import CSS the global style of -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- 2. jQuery import, it is recommended to use 1.9 above version -->
<script src="js/jquery-2.1.0.min.js"></script>
<!-- 3. import bootstrap of js document -->
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
<div align="center">
<a
href="list.html" style="text-decoration:none;font-size:33px">Query all user information
</a>
</div>
</body>
</html>list.html
<!DOCTYPE html>
<!-- language of the page -->
<html lang="zh-CN">
<head>
<!-- specified character set -->
<meta charset="utf-8">
<!-- use Edge Rendering in the latest browsers -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- viewport Viewport: The web page can be automatically adapted according to the set width, and a container is virtualized inside the browser. The width of the container is the same as the width of the device.
width: The default width is the same as the width of the device
initial-scale: The initial zoom ratio, which is 1:1 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 3 above meta Label*must*on top, anything else is*must*Follow it! -->
<title>User Information Management System</title>
<!-- 1. import CSS the global style of -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- 2. jQuery import, it is recommended to use 1.9 above version -->
<script src="js/jquery-2.1.0.min.js"></script>
<!-- 3. import bootstrap of js document -->
<script src="js/bootstrap.min.js"></script>
<style type="text/css">
td, th {
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<h3 style="text-align: center">User information list</h3>
<table border="1" class="table table-bordered table-hover">
<tr class="success">
<th>Numbering</th>
<th>Name</th>
<th>gender</th>
<th>age</th>
<th>Hometown</th>
<th>QQ</th>
<th>Mail</th>
<th>operate</th>
</tr>
<tr>
<td>1</td>
<td>Zhang San</td>
<td>male</td>
<td>20</td>
<td>Guangdong</td>
<td>44444222</td>
<td>zs@qq.com</td>
<td><a class="btn btn-default btn-sm" href="update.html">Revise</a> <a class="btn btn-default btn-sm" href="">delete</a></td>
</tr>
<tr>
<td>2</td>
<td>Zhang San</td>
<td>male</td>
<td>20</td>
<td>Guangdong</td>
<td>44444222</td>
<td>zs@qq.com</td>
<td><a class="btn btn-default btn-sm" href="update.html">Revise</a> <a class="btn btn-default btn-sm" href="">delete</a></td>
</tr>
<tr>
<td>3</td>
<td>Zhang San</td>
<td>male</td>
<td>20</td>
<td>Guangdong</td>
<td>44444222</td>
<td>zs@qq.com</td>
<td><a class="btn btn-default btn-sm" href="update.html">Revise</a> <a class="btn btn-default btn-sm" href="">delete</a></td>
</tr>
<tr>
<td>4</td>
<td>Zhang San</td>
<td>male</td>
<td>20</td>
<td>Guangdong</td>
<td>44444222</td>
<td>zs@qq.com</td>
<td><a class="btn btn-default btn-sm" href="update.html">Revise</a> <a class="btn btn-default btn-sm" href="">delete</a></td>
</tr>
<tr>
<td>5</td>
<td>Zhang San</td>
<td>male</td>
<td>20</td>
<td>Guangdong</td>
<td>44444222</td>
<td>zs@qq.com</td>
<td><a class="btn btn-default btn-sm" href="update.html">Revise</a> <a class="btn btn-default btn-sm" href="">delete</a></td>
</tr>
<tr>
<td colspan="8" align="center"><a class="btn btn-primary" href="add.html">Add contacts</a></td>
</tr>
</table>
</div>
</body>
</html>
login.html
<!DOCTYPE html>
<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>Admin login</title>
<!-- 1. import CSS the global style of -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- 2. jQuery import, it is recommended to use 1.9 above version -->
<script src="js/jquery-2.1.0.min.js"></script>
<!-- 3. import bootstrap of js document -->
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
<div class="container" style="width: 400px;">
<h3 style="text-align: center;">Admin login</h3>
<form action="login" method="post">
<div class="form-group">
<label for="user">username:</label>
<input type="text" name="user" class="form-control" id="user" placeholder="please enter user name"/>
</div>
<div class="form-group">
<label for="password">password:</label>
<input type="password" name="password" class="form-control" id="password" placeholder="Please enter password"/>
</div>
<div class="form-inline">
<label for="vcode">Verification code:</label>
<input type="text" name="verifycode" class="form-control" id="verifycode" placeholder="please enter verification code" style="width: 120px;"/>
<a href="javascript:refreshCode()"><img src="vcode" title="Can't see clearly click refresh" id="vcode"/></a>
</div>
<hr/>
<div class="form-group" style="text-align: center;">
<input class="btn btn btn-primary" type="submit" value="Log in">
</div>
</form>
<!-- error message box -->
<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" >
<span>×</span></button>
<strong>Login failed!</strong>
</div>
</div>
</body>
</html>update.html
<!DOCTYPE html>
<!-- language of the page -->
<html lang="zh-CN">
<head>
<base href="<%=basePath%>"/>
<!-- specified character set -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>modify user</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;">Edit contacts</h3>
<form action="" method="post">
<div class="form-group">
<label for="name">Name:</label>
<input type="text" class="form-control" id="name" name="name" readonly="readonly" placeholder="Please type in your name" />
</div>
<div class="form-group">
<label>gender:</label>
<input type="radio" name="sex" value="male" />male
<input type="radio" name="sex" value="Female" />Female
</div>
<div class="form-group">
<label for="age">age:</label>
<input type="text" class="form-control" id="age" name="age" placeholder="Please enter age" />
</div>
<div class="form-group">
<label for="address">Nationality:</label>
<select name="address" class="form-control" >
<option value="Guangdong">Guangdong</option>
<option value="Guangxi">Guangxi</option>
<option value="Hunan">Hunan</option>
</select>
</div>
<div class="form-group">
<label for="qq">QQ: </label>
<input type="text" class="form-control" name="qq" placeholder="please enter QQ Number"/>
</div>
<div class="form-group">
<label for="email">Email: </label>
<input type="text" class="form-control" name="email" placeholder="Please input the email address"/>
</div>
<div class="form-group" style="text-align: center">
<input class="btn btn-primary" type="submit" value="submit" />
<input class="btn btn-default" type="reset" value="reset" />
<input class="btn btn-default" type="button" value="return"/>
</div>
</form>
</div>
</body>
</html>3.1.3 Configuration file
druid.properties
driverClassName=com.mysql.jdbc.Driver url=jdbc:mysql:///day17 username=root password=root # Initialize the number of connections initialSize=5 # Maximum number of connections maxActive=10 # maximum waiting time maxWait=3000
JDBCUtils.java
package cn.itcast.util;
import com.alibaba.druid.pool.DruidDataSourceFactory;
import javax.sql.DataSource;
import javax.xml.crypto.Data;
import java.io.IOException;
import java.io.InputStream;
import java.sql.Connection;
import java.sql.SQLException;
import java.util.Properties;
/**
* JDBC Tool class using Durid connection pool
*/
public class JDBCUtils {
private static DataSource ds ;
static {
try {
//1. Load the configuration file
Properties pro = new Properties();
//Use ClassLoader to load configuration file and get byte input stream
InputStream is = JDBCUtils.class.getClassLoader().getResourceAsStream("druid.properties");
pro.load(is);
//2. Initialize the connection pool object
ds = DruidDataSourceFactory.createDataSource(pro);
} catch (IOException e) {
e.printStackTrace();
} catch (Exception e) {
e.printStackTrace();
}
}
/**
* Get the connection pool object
*/
public static DataSource getDataSource(){
return ds;
}
/**
* Get the connection Connection object
*/
public static Connection getConnection() throws SQLException {
return ds.getConnection();
}
}
3.1.4jar package
4. Function query
4.1 Functional query analysis
When the user clicks "Query all user information" on the index.jsp page, the page jumps to the list.jsp page and displays the query information.
4.2 Code Implementation
User.java
package cn.itcast.domain;
public class User {
private int id;
private String name;
private String gender;
private int age;
private String address;
private String qq;
private String email;
private String username;
private String password;
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getGender() {
return gender;
}
public void setGender(String gender) {
this.gender = gender;
}
public int getAge() {
return age;
}
public void setAge(int age) {
this.age = age;
}
public String getAddress() {
return address;
}
public void setAddress(String address) {
this.address = address;
}
public String getQq() {
return qq;
}
public void setQq(String qq) {
this.qq = qq;
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
@Override
public String toString() {
return "User{" +
"id=" + id +
", name='" + name + '\'' +
", gender='" + gender + '\'' +
", age=" + age +
", address='" + address + '\'' +
", qq='" + qq + '\'' +
", email='" + email + '\'' +
", username='" + username + '\'' +
", password='" + password + '\'' +
'}';
}
}
index.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"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>front page</title>
<!-- 1. import CSS the global style of -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- 2. jQuery import, it is recommended to use 1.9 above version -->
<script src="js/jquery-2.1.0.min.js"></script>
<!-- 3. import bootstrap of js document -->
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
<div >${user.name},Welcome</div>
<div align="center">
<a
href="${pageContext.request.contextPath}/findUserByPageServlet" style="text-decoration:none;font-size:33px">Query all user information
</a>
</div>
</body>
</html>userListServlet.java
package cn.itcast.web.servlet;
import cn.itcast.domain.User;
import cn.itcast.service.UserService;
import cn.itcast.service.impl.UserServiceImpl;
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.io.IOException;
import java.util.List;
@WebServlet("/userListServlet")
public class UserListServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//1. Call UserService to complete the query
UserService service = new UserServiceImpl();
List<User> users = service.findAll();
//2. Store the list in the request field
request.setAttribute("users",users);
//3. Forward to list.jsp
request.getRequestDispatcher("/list.jsp").forward(request,response);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
}
Build a session 👉Call the lower-level method (servicefindAll()) 👉Set the return value List<User> users to share in the request domain 👉Use the principle of forwarding to send the List<User> users information to the list.jsp page
UserService.java
package cn.itcast.service;
import cn.itcast.domain.PageBean;
import cn.itcast.domain.User;
import java.util.List;
import java.util.Map;
/**
* User management business interface
*/
public interface UserService {
/**
* Query all user information
* @return
*/
public List<User> findAll();
/**
* login method
* @param user
* @return
*/
User login(User user);
/**
* saveUser
* @param user
*/
void addUser(User user);
/**
* Delete User by id
* @param id
*/
void deleteUser(String id);
/**
* query by id
* @param id
* @return
*/
User findUserById(String id);
/**
* Modify user information
* @param user
*/
void updateUser(User user);
/**
* Delete users in bulk
* @param ids
*/
void delSelectedUser(String[] ids);
/**
* Paging condition query
* @param currentPage
* @param rows
* @param condition
* @return
*/
PageBean<User> findUserByPage(String currentPage, String rows, Map<String, String[]> condition);
}
UserServicelmpl.java
package cn.itcast.service.impl;
import cn.itcast.dao.UserDao;
import cn.itcast.dao.impl.UserDaoImpl;
import cn.itcast.domain.PageBean;
import cn.itcast.domain.User;
import cn.itcast.service.UserService;
import java.util.List;
import java.util.Map;
public class UserServiceImpl implements UserService {
private UserDao dao = new UserDaoImpl();
@Override
public List<User> findAll() {
//Call Dao to complete the query
return dao.findAll();
}
@Override
public User login(User user) {
return dao.findUserByUsernameAndPassword(user.getUsername(),user.getPassword());
}
@Override
public void addUser(User user) {
dao.add(user);
}
@Override
public void deleteUser(String id) {
dao.delete(Integer.parseInt(id));
}
@Override
public User findUserById(String id) {
return dao.findById(Integer.parseInt(id));
}
@Override
public void updateUser(User user) {
dao.update(user);
}
@Override
public void delSelectedUser(String[] ids) {
if(ids != null && ids.length > 0){
//1. Traverse the array
for (String id : ids) {
//2. Call dao to delete
dao.delete(Integer.parseInt(id));
}
}
}
@Override
public PageBean<User> findUserByPage(String _currentPage, String _rows, Map<String, String[]> condition) {
int currentPage = Integer.parseInt(_currentPage);
int rows = Integer.parseInt(_rows);
if(currentPage <=0) {
currentPage = 1;
}
//1. Create an empty PageBean object
PageBean<User> pb = new PageBean<User>();
//2. Set parameters
pb.setCurrentPage(currentPage);
pb.setRows(rows);
//3. Call dao to query the total number of records
int totalCount = dao.findTotalCount(condition);
pb.setTotalCount(totalCount);
//4. Call dao to query the List collection
//The index of the record at which the calculation starts
int start = (currentPage - 1) * rows;
List<User> list = dao.findByPage(start,rows,condition);
pb.setList(list);
//5. Calculate the total page number
int totalPage = (totalCount % rows) == 0 ? totalCount/rows : (totalCount/rows) + 1;
pb.setTotalPage(totalPage);
return pb;
}
}
UserDao.java
package cn.itcast.dao;
import cn.itcast.domain.User;
import java.util.List;
import java.util.Map;
/**
* User-operated DAO
*/
public interface UserDao {
public List<User> findAll();
User findUserByUsernameAndPassword(String username, String password);
void add(User user);
void delete(int id);
User findById(int i);
void update(User user);
/**
* Query the total number of records
* @return
* @param condition
*/
int findTotalCount(Map<String, String[]> condition);
/**
* Paging query records per page
* @param start
* @param rows
* @param condition
* @return
*/
List<User> findByPage(int start, int rows, Map<String, String[]> condition);
}
UserDaoimpl.java
package cn.itcast.dao.impl;
import cn.itcast.dao.UserDao;
import cn.itcast.domain.User;
import cn.itcast.util.JDBCUtils;
import org.springframework.jdbc.core.BeanPropertyRowMapper;
import org.springframework.jdbc.core.JdbcTemplate;
import java.util.ArrayList;
import java.util.List;
import java.util.Map;
import java.util.Set;
public class UserDaoImpl implements UserDao {
private JdbcTemplate template = new JdbcTemplate(JDBCUtils.getDataSource());
@Override
public List<User> findAll() {
//Use JDBC to operate database...
//1. Define sql
String sql = "select * from user";
List<User> users = template.query(sql, new BeanPropertyRowMapper<User>(User.class));
return users;
}
@Override
public User findUserByUsernameAndPassword(String username, String password) {
try {
String sql = "select * from user where username = ? and password = ?";
User user = template.queryForObject(sql, new BeanPropertyRowMapper<User>(User.class), username, password);
return user;
} catch (Exception e) {
e.printStackTrace();
return null;
}
}
@Override
public void add(User user) {
//1. Define sql
String sql = "insert into user values(null,?,?,?,?,?,?,null,null)";
//2. Execute sql
template.update(sql, user.getName(), user.getGender(), user.getAge(), user.getAddress(), user.getQq(), user.getEmail());
}
@Override
public void delete(int id) {
//1. Define sql
String sql = "delete from user where id = ?";
//2. Execute sql
template.update(sql, id);
}
@Override
public User findById(int id) {
String sql = "select * from user where id = ?";
return template.queryForObject(sql, new BeanPropertyRowMapper<User>(User.class), id);
}
@Override
public void update(User user) {
String sql = "update user set name = ?,gender = ? ,age = ? , address = ? , qq = ?, email = ? where id = ?";
template.update(sql, user.getName(), user.getGender(), user.getAge(), user.getAddress(), user.getQq(), user.getEmail(), user.getId());
}
@Override
public int findTotalCount(Map<String, String[]> condition) {
//1. Define the template to initialize sql
String sql = "select count(*) from user where 1 = 1 ";
StringBuilder sb = new StringBuilder(sql);
//2. Traverse the map
Set<String> keySet = condition.keySet();
//A collection of defined parameters
List<Object> params = new ArrayList<Object>();
for (String key : keySet) {
//Exclude pagination condition parameter
if("currentPage".equals(key) || "rows".equals(key)){
continue;
}
//get value
String value = condition.get(key)[0];
//Determine whether value has a value
if(value != null && !"".equals(value)){
//valuable
sb.append(" and "+key+" like ? ");
params.add("%"+value+"%");//? the value of the condition
}
}
System.out.println(sb.toString());
System.out.println(params);
return template.queryForObject(sb.toString(),Integer.class,params.toArray());
}
@Override
public List<User> findByPage(int start, int rows, Map<String, String[]> condition) {
String sql = "select * from user where 1 = 1 ";
StringBuilder sb = new StringBuilder(sql);
//2. Traverse the map
Set<String> keySet = condition.keySet();
//A collection of defined parameters
List<Object> params = new ArrayList<Object>();
for (String key : keySet) {
//Exclude pagination condition parameter
if("currentPage".equals(key) || "rows".equals(key)){
continue;
}
//get value
String value = condition.get(key)[0];
//Determine whether value has a value
if(value != null && !"".equals(value)){
//valuable
sb.append(" and "+key+" like ? ");
params.add("%"+value+"%");//? the value of the condition
}
}
//Add pagination query
sb.append(" limit ?,? ");
//Add pagination query parameter value
params.add(start);
params.add(rows);
sql = sb.toString();
System.out.println(sql);
System.out.println(params);
return template.query(sql,new BeanPropertyRowMapper<User>(User.class),params.toArray());
}
}
Create the UserService interface, define the method, create the UserServicelmpl class to implement the interface, and rewrite the method 👉Tell the lower layer (dao) to call its findAll() method 👉The dao layer creates the UserDao interface, and defines the findAll() method as pubilc List<user> Type 👉UserDaoimpl implements the UserDao interface and rewrites the findAll() method
When findAll() finishes operating the database, it returns a List<User> users, which is forwarded from the dao layer 👉service layer 👉UserListServlet layer to list.jsp
list.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<!-- language of the page -->
<html lang="zh-CN">
<head>
<!-- specified character set -->
<meta charset="utf-8">
<!-- use Edge Rendering in the latest browsers -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- viewport Viewport: The web page can be automatically adapted according to the set width, and a container is virtualized inside the browser. The width of the container is the same as the width of the device.
width: The default width is the same as the width of the device
initial-scale: The initial zoom ratio, which is 1:1 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 3 above meta Label*must*on top, anything else is*must*Follow it! -->
<title>User Information Management System</title>
<!-- 1. import CSS the global style of -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- 2. jQuery import, it is recommended to use 1.9 above version -->
<script src="js/jquery-2.1.0.min.js"></script>
<!-- 3. import bootstrap of js document -->
<script src="js/bootstrap.min.js"></script>
<style type="text/css">
td, th {
text-align: center;
}
</style>
<script>
function deleteUser(id){
//User Safety Tips
if(confirm("Are you sure you want to delete it?")){
//access path
location.href="${pageContext.request.contextPath}/delUserServlet?id="+id;
}
}
window.onload = function(){
//Add click event to delete checked button
document.getElementById("delSelected").onclick = function(){
if(confirm("Are you sure you want to delete the selected item?")){
var flag = false;
//Determine if an item is selected
var cbs = document.getElementsByName("uid");
for (var i = 0; i < cbs.length; i++) {
if(cbs[i].checked){
//An item is selected
flag = true;
break;
}
}
if(flag){//item is selected
//form submission
document.getElementById("form").submit();
}
}
}
//1. Get the first cb
document.getElementById("firstCb").onclick = function(){
//2. Get all the cb s in the list below
var cbs = document.getElementsByName("uid");
//3. Traverse
for (var i = 0; i < cbs.length; i++) {
//4. Set the checked status of these cbs[i] = firstCb.checked
cbs[i].checked = this.checked;
}
}
}
</script>
</head>
<body>
<div class="container">
<h3 style="text-align: center">User information list</h3>
<div style="float: left;">
<form class="form-inline" action="${pageContext.request.contextPath}/findUserByPageServlet" method="post">
<div class="form-group">
<label for="exampleInputName2">Name</label>
<input type="text" name="name" value="${condition.name[0]}" class="form-control" id="exampleInputName2" >
</div>
<div class="form-group">
<label for="exampleInputName3">Hometown</label>
<input type="text" name="address" value="${condition.address[0]}" class="form-control" id="exampleInputName3" >
</div>
<div class="form-group">
<label for="exampleInputEmail2">Mail</label>
<input type="text" name="email" value="${condition.email[0]}" class="form-control" id="exampleInputEmail2" >
</div>
<button type="submit" class="btn btn-default">Inquire</button>
</form>
</div>
<div style="float: right;margin: 5px;">
<a class="btn btn-primary" href="${pageContext.request.contextPath}/add.jsp">Add contacts</a>
<a class="btn btn-primary" href="javascript:void(0);" id="delSelected">delete selected</a>
</div>
<form id="form" action="${pageContext.request.contextPath}/delSelectedServlet" method="post">
<table border="1" class="table table-bordered table-hover">
<tr class="success">
<th><input type="checkbox" id="firstCb"></th>
<th>Numbering</th>
<th>Name</th>
<th>gender</th>
<th>age</th>
<th>Hometown</th>
<th>QQ</th>
<th>Mail</th>
<th>operate</th>
</tr>
<c:forEach items="${pb.list}" var="user" varStatus="s">
<tr>
<td><input type="checkbox" name="uid" value="${user.id}"></td>9
<td>${s.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}">Revise</a>
<a class="btn btn-default btn-sm" href="javascript:deleteUser(${user.id});">delete</a></td>
</tr>
</c:forEach>
</table>
</form>
<div>
<nav aria-label="Page navigation">
<ul class="pagination">
<c:if test="${pb.currentPage == 1}">
<li class="disabled">
</c:if>
<c:if test="${pb.currentPage != 1}">
<li>
</c:if>
<a href="${pageContext.request.contextPath}/findUserByPageServlet?currentPage=${pb.currentPage - 1}&rows=5&name=${condition.name[0]}&address=${condition.address[0]}&email=${condition.email[0]}" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<c:forEach begin="1" end="${pb.totalPage}" var="i" >
<c:if test="${pb.currentPage == i}">
<li class="active"><a href="${pageContext.request.contextPath}/findUserByPageServlet?currentPage=${i}&rows=5&name=${condition.name[0]}&address=${condition.address[0]}&email=${condition.email[0]}">${i}</a></li>
</c:if>
<c:if test="${pb.currentPage != i}">
<li><a href="${pageContext.request.contextPath}/findUserByPageServlet?currentPage=${i}&rows=5&name=${condition.name[0]}&address=${condition.address[0]}&email=${condition.email[0]}">${i}</a></li>
</c:if>
</c:forEach>
<li>
<a href="${pageContext.request.contextPath}/findUserByPageServlet?currentPage=${pb.currentPage + 1}&rows=5&name=${condition.name[0]}&address=${condition.address[0]}&email=${condition.email[0]}" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
<span style="font-size: 25px;margin-left: 5px;">
common ${pb.totalCount}records, total ${pb.totalPage}Page
</span>
</ul>
</nav>
</div>
</div>
</body>
</html>
5. User login
5.1 User Login Analysis
First, let the user input data in login.jsp, and then use session in LoginServlet.java to get the verification code symbol of the server and the verification code in the request field to judge whether the verification code is entered correctly. The user name and password are encapsulated into a user object, and then the login() method in the Service is called, the information object user input by the user is passed as parameters, and the interface and implementation class are created in the service layer, the method is defined, and then the interface and implementation are created in the dao layer. Class, rewrite the method, use the sql statement to operate the database, if the user name and password are correct, the user information object user of the user is returned, otherwise it is null, and the servlet layer is advanced layer by layer to judge the user login (judgment The return value is user or null).
5.2 Code Implementation
login.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<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>Admin login</title>
<!-- 1. import CSS the global style of -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- 2. jQuery import, it is recommended to use 1.9 above version -->
<script src="js/jquery-2.1.0.min.js"></script>
<!-- 3. import bootstrap of js document -->
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
//Toggle verification code
function refreshCode(){
//1. Get the verification code image object
var vcode = document.getElementById("vcode");
//2. Set its src attribute and add a timestamp
vcode.src = "${pageContext.request.contextPath}/checkCodeServlet?time="+new Date().getTime();
}
</script>
</head>
<body>
<div class="container" style="width: 400px;">
<h3 style="text-align: center;">Admin login</h3>
<form action="${pageContext.request.contextPath}/loginServlet" method="post">
<div class="form-group">
<label for="user">username:</label>
<input type="text" name="username" class="form-control" id="user" placeholder="please enter user name"/>
</div>
<div class="form-group">
<label for="password">password:</label>
<input type="password" name="password" class="form-control" id="password" placeholder="Please enter password"/>
</div>
<div class="form-inline">
<label for="vcode">Verification code:</label>
<input type="text" name="verifycode" class="form-control" id="verifycode" placeholder="please enter verification code" style="width: 120px;"/>
<a href="javascript:refreshCode();">
<img src="${pageContext.request.contextPath}/checkCodeServlet" title="Can't see clearly click refresh" id="vcode"/>
</a>
</div>
<hr/>
<div class="form-group" style="text-align: center;">
<input class="btn btn btn-primary" type="submit" value="Log in">
</div>
</form>
<!-- error message box -->
<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" >
<span>×</span>
</button>
<strong>${login_msg}</strong>
</div>
</div>
</body>
</html>CheckCodeServlet.java
Generation of verification code
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;
/**
* verification code
*/
@WebServlet("/checkCodeServlet")
public class CheckCodeServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
//The server tells the browser not to cache
response.setHeader("pragma","no-cache");
response.setHeader("cache-control","no-cache");
response.setHeader("expires","0");
//Create a picture in memory with a length of 80 and a width of 30, with a black background by default
//Parameter one: long
//Parameter two: width
//Parameter three: color
int width = 80;
int height = 30;
BufferedImage image = new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB);
//get brushes
Graphics g = image.getGraphics();
//Set the brush color to gray
g.setColor(Color.GRAY);
//fill image
g.fillRect(0,0, width,height);
//Generate 4 random verification codes, 12Ey
String checkCode = getCheckCode();
//Put the verification code into the HttpSession
request.getSession().setAttribute("CHECKCODE_SERVER",checkCode);
//Set the brush color to yellow
g.setColor(Color.YELLOW);
//set font size
g.setFont(new Font("black body",Font.BOLD,24));
//Write a verification code to the picture
g.drawString(checkCode,15,25);
//Output the image in memory to the browser
//Parameter one: image object
//Parameter 2: The format of the picture, such as PNG,JPG,GIF
//Parameter 3: Where to output the image
ImageIO.write(image,"PNG",response.getOutputStream());
}
/**
* Generate 4 digit random string
*/
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++){
//Generate random values from 0 to size-1
int index = r.nextInt(size);
//Get the character subscripted by index in the base string
char c = base.charAt(index);
//Put c into StringBuffer
sb.append(c);
}
return sb.toString();
}
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doGet(request,response);
}
}
LoginServlet.java
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. Set the encoding
request.setCharacterEncoding("utf-8");
//2. Get data
//2.1 Get the user to fill in the verification code
String verifycode = request.getParameter("verifycode");
//3. Verification code verification
HttpSession session = request.getSession();
String checkcode_server = (String) session.getAttribute("CHECKCODE_SERVER");
session.removeAttribute("CHECKCODE_SERVER");//Make sure the verification code is one-time
if(!checkcode_server.equalsIgnoreCase(verifycode)){
//Incorrect verification code
//Tips
request.setAttribute("login_msg","Verification code error!");
//Jump to login page
request.getRequestDispatcher("/login.jsp").forward(request,response);
return;
}
Map<String, String[]> map = request.getParameterMap();
//4. Encapsulate the User object
User user = new User();
try {
BeanUtils.populate(user,map);
} catch (IllegalAccessException e) {
e.printStackTrace();
} catch (InvocationTargetException e) {
e.printStackTrace();
}
//5. Call the Service query
UserService service = new UserServiceImpl();
User loginUser = service.login(user);
//6. Determine whether the login is successful
if(loginUser != null){
//login successful
//save user to session
session.setAttribute("user",loginUser);
//Jump page
response.sendRedirect(request.getContextPath()+"/index.jsp");
}else{
//Login failed
//Tips
request.setAttribute("login_msg","wrong user name or password!");
//Jump to login page
request.getRequestDispatcher("/login.jsp").forward(request,response);
}
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
}
The next service layer and dao layer both query functions on it.
6. Add features
6.1 Analysis
6.2 Code Implementation
add.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!-- HTML5 Documentation-->
<!DOCTYPE html>
<!-- language of the page -->
<html lang="zh-CN">
<head>
<!-- specified character set -->
<meta charset="utf-8">
<!-- use Edge Rendering in the latest browsers -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- viewport Viewport: The web page can be automatically adapted according to the set width, and a container is virtualized inside the browser. The width of the container is the same as the width of the device.
width: The default width is the same as the width of the device
initial-scale: The initial zoom ratio, which is 1:1 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 3 above meta Label*must*on top, anything else is*must*Follow it! -->
<title>Add user</title>
<!-- 1. import CSS the global style of -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- 2. jQuery import, it is recommended to use 1.9 above version -->
<script src="js/jquery-2.1.0.min.js"></script>
<!-- 3. import bootstrap of js document -->
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<center><h3>add contact page</h3></center>
<form action="${pageContext.request.contextPath}/addUserServlet" method="post">
<div class="form-group">
<label for="name">Name:</label>
<input type="text" class="form-control" id="name" name="name" placeholder="Please type in your name">
</div>
<div class="form-group">
<label>gender:</label>
<input type="radio" name="gender" value="male" checked="checked"/>male
<input type="radio" name="gender" value="Female"/>Female
</div>
<div class="form-group">
<label for="age">age:</label>
<input type="text" class="form-control" id="age" name="age" placeholder="Please enter age">
</div>
<div class="form-group">
<label for="address">Nationality:</label>
<select name="address" class="form-control" id="address">
<option value="Shaanxi">Shaanxi</option>
<option value="Beijing">Beijing</option>
<option value="Shanghai">Shanghai</option>
</select>
</div>
<div class="form-group">
<label for="qq">QQ: </label>
<input type="text" class="form-control" id="qq" name="qq" placeholder="please enter QQ Number"/>
</div>
<div class="form-group">
<label for="email">Email: </label>
<input type="text" class="form-control" id="email" name="email" placeholder="Please input the email address"/>
</div>
<div class="form-group" style="text-align: center">
<input class="btn btn-primary" type="submit" value="submit" />
<input class="btn btn-default" type="reset" value="reset" />
<input class="btn btn-default" type="button" value="return" />
</div>
</form>
</div>
</body>
</html>AddUserServlet.java
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 java.io.IOException;
import java.lang.reflect.InvocationTargetException;
import java.util.Map;
@WebServlet("/addUserServlet")
public class AddUserServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//1. Set the encoding
request.setCharacterEncoding("utf-8");
//2. Get parameters
Map<String, String[]> map = request.getParameterMap();
//3. Encapsulating objects
User user = new User();
try {
BeanUtils.populate(user,map);
} catch (IllegalAccessException e) {
e.printStackTrace();
} catch (InvocationTargetException e) {
e.printStackTrace();
}
//4. Call Service to save
UserService service = new UserServiceImpl();
service.addUser(user);
//5. Jump to userListServlet
response.sendRedirect(request.getContextPath()+"/userListServlet");
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
}