文章目录
运行环境
- 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;
最低0.47元/天 解锁文章
492
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
