夏季小学期Day06,07,08——图书馆管理系统（JAVAEE，数据库mysql，前端H5）
写在前面：这个项目的后端是完整的，前端是把别人的项目拿过来自己覆盖了原项目的login.js。
所以大家可以以本文参考用户登陆注册后端和前后端连接的部分。
由于我的项目是直接import老师的，所以如果你也是用的别人的项目，要先右击项目，点Build Path->Configure Build Path->Build Path->Libraries->Add External JARs…->加入servlet-api.jar
由于要用mysql数据库，所以首先导入mysql-connector-java-5.1.42-bin.jar包，直接复制粘贴到lib下即可
先说一下项目结构：创建四个包，五个class，如下图所示。
Eclipse是按字典序排列的class，所以按照代码的阅读顺序是:第五个->第一个->第二个->第三个->第四个
下面分别看每个class，话不多说，代码中都有注释。
第一个：
package com.qianfeng.work.dao;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import com.qianfeng.work.utils.DButils;
public class UserDao {
public String selectUser(String name){
//调用工具类，获取工具类的对象
DButils dbutils = DButils.getInstance();
//连接数据库
Connection conn=dbutils.getConn();
PreparedStatement pst=null;
ResultSet result=null;
if(conn!=null){
String sql ="select * from users where username =?";
try {
pst= conn.prepareStatement(sql);
//设置占位符代表的内容，第一个参数是占位符的序号，
//第二个参数是占位符具体的内容
pst.setString(1, name);
//执行查询，返回结果集
result=pst.executeQuery();
if(result!=null&&result.next()){
return result.getString("password");
}else{
return "null";
}
} catch (SQLException e) {
e.printStackTrace();
}finally{
try {
result.close();
pst.close();
conn.close();
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
return "error";
}else{
return "error";
}
}
public int insertUser(String name, String pass) {
//调用工具类，获取工具类的对象
DButils dbutils = DButils.getInstance();
//连接数据库
Connection conn=dbutils.getConn();
PreparedStatement pst=null;
if(conn!=null){
String sql ="insert into users values(?,?)";
try {
pst= conn.prepareStatement(sql);
//设置占位符代表的内容，第一个参数是占位符的序号，
//第二个参数是占位符具体的内容
pst.setString(1, name);
pst.setString(2, pass);
//执行查询，返回结果集
return pst.executeUpdate();//返回0代表成功
}catch(Exception e) {
return 01;
}
}
else
return 02;
}
}第二个：
package com.qianfeng.work.service;
import com.qianfeng.work.dao.UserDao;
public class UserService {
public int loginResult(String name,String pass){
if(name==null||pass==null){
//如果用户名或者密码传递过来的为空，则返回1
return 1;
}else{
//没有问题，那么就去查询
UserDao dao =new UserDao();
String result = dao.selectUser(name);
if (result.equals("error")){
//2代表数据库异常
return 2;
}else if(result.equals("null")){
//用户名不存在
return 3;
}else{
if(result.equals(pass)){
return 0;//代表登录成功
}else{
return 4;//代表密码错误
}
}
}
}
public int regRes(String name, String pass1, String pass2) {
if (name==null||pass1==null||pass2==null)
//如果用户名或者密码传递过来的为空，则返回1
return 1;
else {
if(pass1.equals(pass2)) {
return 0;//返回0代表注册成功
}
else
return 2;//返回2代表两次密码输入不一致
}
}
}
第三个
package com.qianfeng.work.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.qianfeng.work.service.UserService;
public class LoginServlet extends HttpServlet {
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
// 设置请求和响应的编码格式
req.setCharacterEncoding("utf-8");
resp.setContentType("text/html;charset=utf-8");
// 接收请求字段的值
String name= req.getParameter("username");
String pass= req.getParameter("password");
UserService service = new UserService();
int code= service.loginResult(name, pass);
System.out.println(code);
PrintWriter ps = resp.getWriter();
//向前端响应结果
ps.write(code+"");
ps.close();
}
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
this.doPost(req, resp);
}
}
第四个：
package com.qianfeng.work.servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.qianfeng.work.service.UserService;
public class RegisterServlet extends HttpServlet{
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// 设置请求和响应的编码格式
req.setCharacterEncoding("utf-8");
resp.setContentType("text/html;charset=utf-8");
// 接收请求字段的值
String name= req.getParameter("username");
String pass1= req.getParameter("password1");
String pass2= req.getParameter("password2");
UserService service = new UserService();
int code= service.regRes(name, pass1, pass2);
System.out.println(code);
}
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
this.doPost(req, resp);
}
}第五个：
1.先写工具类，三个静态常量，第一个数据库名字，第二个数据库密码，第三个url 里面内容背过就好，用的时候现查也行。
2.然后写构造方法，forname中的字符串到Libraries->Web App Libraries->mysql-connector-java….->com.mysql.jdbc下右击Driver.class文件，有个copy qualified name,然后直接粘贴过来就好。
3.因为构造方法是私有的，所以要写一个暴露方法——getInstance。
package com.qianfeng.work.utils;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.SQLException;
public class DButils {
private final static String MYSQLNAME="root";
private final static String MYSQLPASS="123456";
private final static String URL="jdbc:mysql://localhost:3306/book?characterEncoding=utf-8";
private static DButils dbutils;
private DButils(){
try {
//加载驱动
Class.forName("com.mysql.jdbc.Driver");
System.out.println("驱动加载成功");
} catch (ClassNotFoundException e) {
System.out.println("驱动找不到");
e.printStackTrace();
}
}
public static DButils getInstance(){
if(dbutils==null){
dbutils=new DButils();
}
return dbutils;
}
/*
* 单例模式(懒汉模式)：
* 私有构造方法
* 声明一个没有实例化的对象（饿汉模式是直接实例化对象）
* 暴露方法，在暴露方法中实例化对象
* 特点：应该来说只有一个对象
*
*/
public Connection getConn(){
try {
Connection conn=DriverManager.getConnection(URL, MYSQLNAME, MYSQLPASS);
return conn;
} catch (SQLException e) {
e.printStackTrace();
System.out.println("数据库连接失败");
}
return null;
}
}接下来写前端，首先导入一个现成的登录界面，然后自己改改js文件
//当js文件是在html的head标签中引入，需要提供入口方法
window.onload=function(){
//根据id获取我们需要的标签
var input_user=document.getElementById("username");
var input_pass=document.getElementById("password");
var btn_login=document.getElementById("login");
btn_login.onclick=function(){
var name = input_user.value;
var pass = input_pass.value;
sendData(name, pass);
}
var xmlhttp;
function sendData(name, pass) {
//获取网络连接对象
xmlhttp = new XMLHttpRequest();
//设置请求方式，请求路径， 是否异步
xmlhttp.open("POST", "http://localhost:8080/Demo01/login", true);
//设置请求头
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//发送字段
xmlhttp.send("username="+name+"&password="+pass);
//状态变化之后去执行=后面的方法
xmlhttp.onreadystatechange=getResponse;
}
function getResponse(){
//4代表连接成功，可以响应；0123分别代表什么
if (xmlhttp.readyState == 4){
if (xmlhttp.status==200)
var code = xmlhttp.responseText;
if (code == "0"){
alert(" Login Successful");
}else if (code == "2") {
alert(" NET CONNECT ERROR");
}else {
alert("username or password is not correct");
}
}
}
}写完后修改jsp文件：第八行，script标签中src中把原来的login.js改为刚刚自己写的mylogin.js
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
<head>
<meta charset="UTF-8">
<title>图书管理系统title>
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/login.css" />
<script type="text/javascript" src="${pageContext.request.contextPath}/js/mylogin.js" >script>
head>
<body>
<div class="content">
<div class="main">
<div class="login">
<input id="username" type="text" placeholder="请您输入管理员名称"/>
<input id="password" type="password" placeholder="请您输入密码"/>
<input id="login" type="button" value="登录"/>
<input id="reset" type="button" value="重置"/>
div>
div>
<p class="foot">http://www.qfedu.com----北京市千锋互联科技有限公司p>
div>
body>
html>启动service，打开一个浏览器，在地址栏输入——localhost:8080/Demo01/jsp/login.jsp
运行效果图：
更新：
今天开始做主页面，