一、代码的分层
1、概述
一个好的层次划分不仅可以能使代码结构更加清楚,还可以使项目分工更加明确,可读性大大提升,跟回家有利于后期的维护和升级。从另一个角度来看,好的代码分层架构,应该使可以很好的匹配上单一职责原则的。这样就可以降低层与层之间的依赖,还能最大承兑的复用各层的逻辑。
2、分层的好处
高内聚:分层的设计可以简化系统设计,让不同的层专注做某一模块的事
低耦合:层与层之间通过接口或API来交互,依赖方不用知道被依赖方的细节
复用:分层之后可以做到很高的复用
扩展性:分层架构可以让我们更容易做横向扩展
如果系统没有分层,当业务规模增加或流量增大时我们只能针对整体系统来做扩展。分层之后可以很方便的把一些模块抽离出来,独立成一个系统。
3、建包
我们需要建三个包,分别是:bean、dao、util
dao层(数据访问层)这里与数据库进行数据的访问,service则是业务逻辑层,与数据访问层进行数据的交互,而controller则是控制层对前端的请求进行处理和响应。
bean包(实体类)里面都是实体类,更加方便的对数据进行操作。
uitl包(工具包)则是对经常用到的方法 进行封装。
二、首页的编写
在web项目下建一个index.jsp项目,用来编写首页
我在首页设置两个超链接实现页面跳转,分别指向登录页面和注册页面。
如图下所示:
![](https://i-blog.csdnimg.cn/blog_migrate/3d1d9650c7c924ad7831683127feba62.png)
实现代码如下:
<html>
<head>
<title>Java Web</title>
</head>
<body>
<a href="Login.jsp"><h2>去登录</h2></a>
<a href="Enroll.jsp"><h2>去注册</h2></a>
</body>
</html>
三、前端登录页面的编写
在登录页面中我们需要用到JDBC连接数据库进行数据查询操作(判断用户输入的账号密码是否正确)
首先我们在web项目下建一个Login.jsp项目,用来编写登录页面
<html>
<head>
<title>登录</title>
</head>
<style type="text/css">
.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;
}
</style>
<body>
<div class="login-card">
<div class="card-header">
<div class="log">登录</div>
</div>
<form action="login" method="post">
<div class="form-group">
<label for="user">账号:</label>
<input required="" name="user" id="user" type="text">
</div>
<div class="form-group">
<label for="pwd">密码:</label>
<input required="" name="pwd" id="pwd" type="password">
</div>
<div class="form-group">
<input value="登录" type="submit">
<a href="Enroll.jsp">没有账号?去注册</a>
</div>
</form>
</div>
</body>
</html>
四、前端注册页面的编写
在注册页面中我们需要用到JDBC连接数据库进行数据的添加操作(通过servlet获取浏览器发出请求中的数据添加到数据库中)
在实现添加数据之前我们先在web项目下建一个Enroll.jsp项目
实现注册页面的代码如下:
<html>
<head>
<title>注册账号</title>
</head>
<style type="text/css">
.login-card {
width: 300px;
margin: 0 auto;
padding: 20px;