一、代码的分层

1、概述

一个好的层次划分不仅可以能使代码结构更加清楚,还可以使项目分工更加明确,可读性大大提升,跟回家有利于后期的维护和升级。从另一个角度来看,好的代码分层架构,应该使可以很好的匹配上单一职责原则的。这样就可以降低层与层之间的依赖,还能最大承兑的复用各层的逻辑。

2、分层的好处

  • 高内聚:分层的设计可以简化系统设计,让不同的层专注做某一模块的事
  • 低耦合:层与层之间通过接口或API来交互,依赖方不用知道被依赖方的细节
  • 复用:分层之后可以做到很高的复用
  • 扩展性:分层架构可以让我们更容易做横向扩展

如果系统没有分层,当业务规模增加或流量增大时我们只能针对整体系统来做扩展。分层之后可以很方便的把一些模块抽离出来,独立成一个系统。

3、建包

我们需要建三个包,分别是:bean、dao、util

dao层(数据访问层)这里与数据库进行数据的访问,service则是业务逻辑层,与数据访问层进行数据的交互,而controller则是控制层对前端的请求进行处理和响应。
bean包(实体类)里面都是实体类,更加方便的对数据进行操作。

uitl包(工具包)则是对经常用到的方法 进行封装。

二、首页的编写

在web项目下建一个index.jsp项目,用来编写首页

index.jsp位置所如下图所示:

我在首页设置两个超链接实现页面跳转,分别指向登录页面和注册页面。

如图下所示:

实现代码如下:

Java Web

去登录

去注册

三、前端登录页面的编写

在登录页面中我们需要用到JDBC连接数据库进行数据查询操作(判断用户输入的账号密码是否正确)

首先我们在web项目下建一个Login.jsp项目,用来编写登录页面。

Login.jsp位置如下图所示:

登录页面的展示:

实现登录页面代码如下:

登录.login-card {width: 300px;margin: 0 auto;padding: 20px;border: 1px solid #ccc;border-radius: 10px;background-color: #e8e8e8;box-shadow: 2px 2px 10px #ccc;}.card-header {text-align: center;margin-bottom: 20px}.card-header .log {margin: 0;font-size: 24px;color: black;}.form-group {margin-bottom: 15px;}label {font-size: 18px;margin-bottom: 5px;}input[type="text"], input[type="password"] {width: 100%;padding: 12px 20px;font-size: 16px;border: 1px solid #ccc;border-radius: 4px;box-sizing: border-box;transition: 0.5s;}input[type="submit"] {width: 100%;background-color: #333;color: white;padding: 14px 20px;margin: 8px 0;border: none;border-radius: 4px;cursor: pointer;}input[type="submit"]:hover {background-color: #ccc;color: black;}登录没有账号?去注册

四、前端注册页面的编写

在注册页面中我们需要用到JDBC连接数据库进行数据的添加操作(通过servlet获取浏览器发出请求中的数据添加到数据库中)

在实现添加数据之前我们先在web项目下建一个Enroll.jsp项目

Enroll.jsp位置如下图所示:

注册页面的展示:

实现注册页面的代码如下:

注册账号.login-card {width: 300px;margin: 0 auto;padding: 20px;border: 1px solid #ccc;border-radius: 10px;background-color: #e8e8e8;box-shadow: 2px 2px 10px #ccc;}.card-header {text-align: center;margin-bottom: 20px}.card-header .log {margin: 0;font-size: 24px;color: black;}.form-group {margin-bottom: 15px;}label {font-size: 18px;margin-bottom: 5px;}input[type="text"], input[type="password"] {width: 100%;padding: 12px 20px;font-size: 16px;border: 1px solid #ccc;border-radius: 4px;box-sizing: border-box;transition: 0.5s;}input[type="submit"] {width: 100%;background-color: #333;color: white;padding: 14px 20px;margin: 8px 0;border: none;border-radius: 4px;cursor: pointer;}input[type="submit"]:hover {background-color: #ccc;color: black;}注册已有账号?去注册

五、登录成功首页的编写

首先我们在web项目下建一个ShouYe.jsp

ShouYe.jsp位置如图下所示:

登录成功首页的展示:

实现代码如下:

首页div{position: relative;width: 360px;height: 511px;}img{border-radius: 5px; /* 设置圆角 */}p{width: 500px;height: 300px;position: absolute;/* 绝对定位 */left: 0;top: 0;background-color: rgba(0 ,0 ,0 , 0.709);color: white;padding: 10px;display: none;/* 隐藏 */pointer-events: none; /* 不对鼠标事件做出反应}

简介在钱塘开茶铺的赵盼儿惊闻未婚夫、新科谈话欧阳旭要另娶当朝高官之女,不甘命运的她誓要上京讨个公道。在途中她遇到了出自权门但生性正直的皇城司指挥顾千帆,并卷入江南一场大案,两人不打不相识从而结缘。赵盼儿凭借智慧解救了被骗婚而惨遭虐待的“江南第一琵琶高手”宋印章与被苛刻家人逼得离家出走的豪爽厨娘孙三娘,三位姐妹从此结伴而行,终抵东京见识世间繁华。为了不被另攀高枝的欧阳旭从京城赶走,赵盼儿与宋引章、孙三娘一起历尽艰辛,将小小茶坊一步步发展最大的酒楼,揭露了负心人的真面目,收获了各自的真挚感情和人生感悟,也为无数平凡女子推开了一扇平等救赎之门。

//获取div标签var div_1=document.getElementById("div_1")//给div_1绑定事件:onmouseover:鼠标移入的事件div_1.onmouseover=function(){//将p标签显示出来,故需要将display的值设置为blockdocument.querySelector("p").style.display="block"}// onmouseout:鼠标从元素上移开时触发的事件div_1.onmouseout=function(){//将p标签隐藏,故需要将display的值设置为nonedocument.querySelector("p").style.display="none"}//onmousemove:鼠标在元素上移动时触发的事件div_1.onmousemove=function(){document.querySelector("p").style.left=event.offsetX+"px"document.querySelector("p").style.top=event.offsetY+"px"}

六、异常页面的编写

我们在web项目下建一个Error.jsp

Error.jsp位置如图下所示:

出错页面的展示:

实现出错页面的代码如下:

404

出错了

返回登录界面

七、web.xml配置Servlet类

logincom.hp.Servlet.Loginlogin/login

八、在bean包下建立一个user实体类

建立user实体类的位置:

user实体类中的代码如下:

public class User {private Integer uid;private String username;private String password;private String phone;private String address;public Integer getUid() {return uid;}public void setUid(Integer uid) {this.uid = uid;}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 String getPhone() {return phone;}public void setPhone(String phone) {this.phone = phone;}public String getAddress() {return address;}public void setAddress(String address) {this.address = address;}@Overridepublic String toString() {return "User{" +"uid=" + uid +", username='" + username + '\'' +", password='" + password + '\'' +", phone='" + phone + '\'' +", address='" + address + '\'' +'}';}}

九、在Util包下实现JDBC连接方法

在Util包下建一个JDBCUtil类

JDBCUtil类位置如下:

JDBCUtil类中实现 获取连接 和 关闭资源 的代码如下:

public class JDBCUtil {private static String driver = "com.mysql.cj.jdbc.Driver";private static String url = "jdbc:mysql://localhost:3306/mydb" />

十、实现数据库的操作

首先我们在dao包下建一个UserDao接口类,用来实现登录和注册功能。

UserDao接口类位置如下:

UserDao接口类中的代码如下:

public interface UserDao {//登录方法public User login(String username, String password);//注册方法public int enroll(User user);}

然后我们在dao包先再建一个DaoImpl包,再impl包内建一个UserDaoImpl类,用来实现数据库的操作。

UserDaoImpl类位置如下:

UserDaoImpl类中的代码如下:

/** * 数据库数据类 */public class UserDaoImpl implements UserDao {//数据库连接对象Connection con = null;//连接对象//预处理对象PreparedStatement pstm = null;//与处理对象//结果集对象ResultSet rs = null;//结果集对象int row ;//受影响的行数//实例化对象User register = null;//数据库登录操作public User login (String username,String password){User login = null;//下面的代码完成的事情: 需要用户名和密码返回一个user对象try {//调用util包下的jdbc连接方法con = JDBCUtil.getCon();//编写SQL语句String sql = "select * from t_user where username = " />

十一、登录的业务处理

在Servlet包下建一个Login类用来处理登录业务

Login类位置如图下所示:

Login类内的代码如下:

/** * 登录类 */public class Login extends HttpServlet {//数据库连接对象Connection con = null;//预处理对象PreparedStatement pstm = null;//结果集对象ResultSet rs = null;@Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {System.out.println("Login...get");doPost(request, response);}@Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {System.out.println("Login...post");//1.从请求中获取用户提交的参数(数据)request.setCharacterEncoding("UTF-8");//设置请求的编码格式为中文String user = request.getParameter("user");//根据表单的name属性获取用户输入的值String pwd = request.getParameter("pwd");//根据表单的name属性获取用户输入的值System.out.println(user);System.out.println(pwd);//2.业务处理//调用数据库类UserDaoImpl userDao =new UserDaoImpl();//传参User user1 = userDao.login(user,pwd);//判断是否有该账号if (user1!=null){//登录成功跳转登录首页response.sendRedirect("ShouYe.jsp");}else {//登录失败跳转错误页面response.sendRedirect("Error.jsp");}}}

十二、注册的业务处理

在Servlet包下建一个Enroll类用来处理登录业务

Enroll类位置如图下所示:

Enroll类内的代码如下:

/** * 注册类 *///设置当前类用来处理 /enroll 的请求@WebServlet("/enroll")public class Enroll extends HttpServlet {//数据库连接对象Connection con = null;//预处理对象PreparedStatement pstm = null;@Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {System.out.println("enroll...get");//调用doPost方法doPost(request, response);}@Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {System.out.println("enroll...post");//设置请求的编码格式为UTF-8格式request.setCharacterEncoding("UTF-8");response.setCharacterEncoding("UTF-8");//设置以文本或网页的形式响应response.setContentType("text/html;charset=UTF-8");//已什么样的格式(文本/网页)响应//从请求中获取用户提交的参数(数据)String zhangh = request.getParameter("zhangh");String pwd = request.getParameter("pwd");String dell = request.getParameter("dell");String address = request.getParameter("address");//实例化对象User enroll = new User();//给实体类user 赋值enroll.setUsername(zhangh);enroll.setPassword(pwd);enroll.setPhone(dell);enroll.setAddress(address);//实现UserDao接口的UserDaoImpl类UserDao userDao = new UserDaoImpl();//调用子类接口的enroll方法 返回受影响的行数int row = userDao.enroll(enroll);//判断受影响的行数大于零注册成功if (row>0){//注册成功 跳转登录页面response.sendRedirect("Login.jsp");}else {//注册失败 跳转错误页面response.sendRedirect("Error.jsp");}}}