文章目录
运行环境
- windows10
- IDEA 专业版
笔者的资源分享:
提取码均为:unir
1. 前言
由于疫情原因,期末考试提前,笔者现在只能尽快赶时间,完成一些大作业。
根据几天构思,笔者打算在web期末课设中选"购物网站" 相关的主题,实现简单的发布商品、购买商品等功能,以下是笔者做课设的一些记录。
web开发如果用HTML、CSS、JS三大件直接从零开始写页面就会非常耗时间,且意义并不大。
现有许多的Web开发的相关框架,前端的有 Vue.js、React.js、JqueryBootstrap、ElementUI等,
后端的有SSM、SpringBoot等。
基于现学习阶段,本学期初次入门JavaWeb主要学习了HTML、CSS、JavaScript、JQuery、JDBC、JSP、Servlet、Cookie和Session、监听器和过滤器、AJAX等多项技术。
在平时的实验里对相应的技术有所熟悉,现综合这些技术,开发一个 " 闲优购 " 的平台,预期开发时间: 7 天
2. 挑选模板
模板的选型比较重要,因为它决定了具体要实现的功能。
经过搜查资料,笔者选择的模板如下:
2.1 前端模板
前端的网页模板用于显示用户操作页面,比如注册、登陆、挑选商品、发布商品、管理个人信息等功能。
登陆页面
主页面
2.2 后端模板
后端模板用于管理员设置,比如修改某个订单的状态,查询所有用户的订单交易额等。
2.3 总结
在基于前端模板的前提,先由浅入深实现用户的基本功能,比如注册、登陆、修改等。
后端模板应放在最后的阶段,因为在本学期课程设计中,并没有强制要求设置管理员的模块实现。
3. 实现注册与登陆
3.1 项目结构
笔者后端用到的项目结构: MVC模型
具体作用描述如下:
模块名称 | 描述 |
---|---|
dao | 数据访问层,全称为data access object, 负责与数据库简单交互 |
service | 服务层,负责使用dao层的功能去实现一些业务 |
servlet | 请求与响应层, 负责使用service层的功能去实现前端的请求 |
filter | 过滤器层,负责过滤页面或者servlet,这里用于修改servlet请求的编码格式以及非登陆用户对其他页面的访问 |
entity | 存放实体类,用于表示某个实体的具体类,比如用户、商品等实体 |
utils | 工具类,存放一些工具性质的操作类,里面一般是一些static静态的方法,可通过类名直接调用,目前只有数据库的操作类 |
3.2 注册
首先观察前端注册页面 register.html
,主要就是有一个表单,可以发现,当密码输入不规范时会有一个红色的提示
在表单中的部分代码:
<li>
<label>用户名:</label>
<input type="text" name="user_name" id="user_name">
<span class="error_tip">提示信息</span>
</li>
提示信息 error_tip 是通过 JS代码进行控制的,只要输入框 失去了焦点,JS代码就会对输入框内容进行判断,从而显示出警告的信息。
接下来通过观察 register.html
页面引入的JS代码来查找 具体的JS实现代码部分
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>天天生鲜-注册</title>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="js/register.js"></script>
</head>
以上代码是 register.html
页面的 head标签部分,可以观察到它引入的是 register.js
该代码模块主要是关于用户输入提示的内容,无需改动太多,】这里笔者采用的是将邮箱改成了联系方式,因为笔者做的课设主题没有用到邮箱这个字段,相应的js代码也要做改变,同时在 register.html
页面中将表单里输入框的标签内的name属性修改成对应的,比如之前email输入框input组件的name属性值改为phone,这样在后端的servlet类才能获取到。
3.2.1 JDBC连接池连接
JDBC的数据源是指JDBC提供与数据库连接的接口 javax.sql.DataSource
,当在应用程序中访问数据库时,不必编写连接数据库的代码,直接引用DataSource对象获取连接的对象。
数据源的作用:
- 建立多个数据库连接
- 自动回收空闲的连接
JDBC连接池采用 阿里云的Druid连接池,即数据源。
dbpool.properties
driverClassName=com.mysql.jdbc.Driver
url=jdbc:mysql://localhost:3306/web_end?useUnicode=true&characterEncoding=UTF-8
username=root
password=数据库密码
DruidUtils.java
package utils;
import com.alibaba.druid.pool.DruidDataSource;
import com.alibaba.druid.pool.DruidDataSourceFactory;
import javax.xml.transform.Result;
import java.io.IOException;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.Properties