文章目录

运行环境
1. 前言
2. 挑选模板
- 2.1 前端模板
- 2.2 后端模板
- 2.3 总结
3. 实现注册与登陆
- 3.1 项目结构
- 3.2 注册
- - 3.2.1 JDBC连接池连接
  - 3.2.2 dao层实现JDBC的判重、插入
  - 3.2.3 设计实现注册的Servlet类代码
- 3.3 登陆
4. Servlet过滤器
- 4.1 防止servlet请求出现乱码，进行编码过滤
- 4.2 防止未登录用户访问首页
5. 总结
下一部分
- 附: 项目pom.xml依赖

运行环境

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;/*** @author Uni* @create 2021/12/18 11:49*/
public class DruidUtil {static DruidDataSource dataSource;static {Properties prop = new Properties();try{prop.load(DruidUtil.class.getClassLoader().getResourceAsStream("dbpool.properties"));dataSource = (DruidDataSource) DruidDataSourceFactory.createDataSource(prop);} catch (Exception e) {e.printStackTrace();}}public static Connection getConnection(){try{return dataSource.getConnection();} catch (SQLException e){e.printStackTrace();}return null;}public static void release(Connection connection, PreparedStatement pstmt, ResultSet rs){try {if (pstmt != null) pstmt.close();if (rs != null) rs.close();if (connection != null) connection.close();} catch (Exception e){e.printStackTrace();}}
}

3.2.2 dao层实现JDBC的判重、插入

注册之前需判断用户是否存在，笔者采用的方式是以不允许重复的phone字段进行判断，之后在实现插入的方法
UserDaoImpl.java

 public User queryByPhone(String phone) {Connection connection = DruidUtil.getConnection();String sql = "select * from user where phone = ?";User user = null;try{PreparedStatement pstmt = connection.prepareStatement(sql);pstmt.setString(1, phone);ResultSet rs = pstmt.executeQuery();while(rs.next()){user = new User(rs.getInt(1),rs.getString(2),rs.getString(3),rs.getString(4));}DruidUtil.release(connection, pstmt, rs);} catch (SQLException throwables) {throwables.printStackTrace();}return user;}@Overridepublic boolean insertUser(User user) {Connection connection = DruidUtil.getConnection();String sql = "insert into user (name, password, phone) values (?, ?, ?)";try {PreparedStatement pstmt = connection.prepareStatement(sql);pstmt.setString(1, user.getName());pstmt.setString(2, user.getPassword());pstmt.setString(3, user.getPhone());pstmt.execute();DruidUtil.release(connection, pstmt, null);return true;} catch (SQLException throwables) {throwables.printStackTrace();}return false;}

为避免多个servlet请求重复定义Service层接口实现类，现定义一个类用于声明静态的service层接口实现类。

Service.java

package service;public class Service {public static UserService user = new UserServiceImpl();
}

3.2.3 设计实现注册的Servlet类代码

package servlet;import entity.User;
import service.Service;
import service.UserService;
import service.UserServiceImpl;import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;@WebServlet(name = "UserRegisterServlet", urlPatterns = "/toRegister")
public class UserRegisterServlet extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {resp.getWriter().write("无法使用Get请求进行注册.");}@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {String username = req.getParameter("username");String password = req.getParameter("password");String phone = req.getParameter("phone");User user_check = Service.user.queryByPhone(phone);// 当用户存在时if(user_check != null) {req.setAttribute("reg_error", "用户已存在");req.getRequestDispatcher("register.html").forward(req, resp);} else{// 注册操作User user = new User(username, password, phone);boolean state = Service.user.registerUser(user);if(state){// 登陆req.getSession().setAttribute("userInfo", user);
//                System.out.println("session添加: " + user); // 测试} else{// ... 注册操作失败时的处理}resp.sendRedirect("index.jsp");}}
}

至此，已完成了注册功能

3.3 登陆

登陆功能笔者使用的是AJAX请求方式，同时熟悉了一下JQuery的AJAX操作，在这个前端模板要通过AJAX请求，需把按钮的属性type值从submit改成button，实现注册的JS代码

$(document).ready(function (){$("#login").click(function (){var username = $("#un").val();var password = $("#pw").val();$.ajax({type: 'POST',url: "/toLogin?username="+username + "&password=" + password,async: false,error: function (data) {alert('操作失败' + data)},success: function (result){if(result == "false") {alert('登陆失败!')window.location.href="/login.html";}elsewindow.location.href="/index.jsp";}});});
});

至此，实现了登陆功能。

4. Servlet过滤器

4.1 防止servlet请求出现乱码，进行编码过滤

@WebFilter(filterName = "EncodingFilter", value="/toLogin")
public class EncodingFilter implements Filter {@Overridepublic void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain)throws IOException, ServletException {HttpServletRequest request = (HttpServletRequest)  servletRequest;HttpServletResponse response = (HttpServletResponse) servletResponse;request.setCharacterEncoding("utf-8");response.setHeader("content-type", "text/html;charset=utf-8");filterChain.doFilter(request, response);}
}

4.2 防止未登录用户访问首页

public class LoginFilter implements Filter {// 拦截未登陆用户访问首页@Overridepublic void doFilter(ServletRequest request, ServletResponse response, FilterChain fchain) throws IOException, ServletException {HttpServletRequest req = (HttpServletRequest) request;HttpServletResponse resp = (HttpServletResponse) response;HttpSession session = req.getSession();User user = (User) session.getAttribute("userInfo");
//        System.out.println("拦截器读取到用户的信息" + user);if(user == null)((HttpServletResponse) response).sendRedirect("login.html");elsefchain.doFilter(request, response);}
}

5. 总结

今天花时间找了两个模板，创建了MVC模型的Web项目，并通过AJAX请求方式实现了登陆，还有通过直接设置form表单的action属性实现注册，通过session来判断用户是否登陆等，以及简单的应用到了servlet的过滤器，还算是比较有收获的。但目前位置，还有许多工作待完成，接下来的几天需要赶一下进度了。

下一部分

Web期末课程设计v1.0（二） | 大学生闲置物品交易系统 | 使用Bootstrap5各组件优化页面，使用AJAX请求实现用户修改信息功能

附: 项目pom.xml依赖

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"><modelVersion>4.0.0</modelVersion><groupId>groupId</groupId><artifactId>project</artifactId><version>1.0-SNAPSHOT</version><dependencies><dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId><version>RELEASE</version><scope>compile</scope></dependency><dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><version>5.1.37</version></dependency><!-- https://mvnrepository.com/artifact/com.alibaba/druid --><dependency><groupId>com.alibaba</groupId><artifactId>druid</artifactId><version>1.2.8</version></dependency><dependency><groupId>junit</groupId><artifactId>junit</artifactId><version>4.13.1</version><scope>test</scope></dependency><dependency><groupId>javax.servlet.jsp.jstl</groupId><artifactId>jstl-api</artifactId><version>1.2</version></dependency><dependency><groupId>org.apache.taglibs</groupId><artifactId>taglibs-standard-impl</artifactId><version>1.2.5</version></dependency></dependencies><properties><maven.compiler.source>8</maven.compiler.source><maven.compiler.target>8</maven.compiler.target></properties></project>

Web项目实战 | 购物系统v1.0 | 开发记录（一） | 大学生闲置物品交易系统 | 选择页面模板（附资源），使用 JQuery AJAX实现注册、登陆相关推荐

Web项目实战 | 购物系统v2.0 | 开发记录（五）使用base64编码实现头像修改 | 用户个人信息修改 | JQuery动态提示
文章目录以往记录一.运行环境二.实现头像修改三.用户个人信息修改四.Bug & DeBug 以往记录 Web项目实战 | 购物系统v2.0 | 开发记录(一)需求分析 | 技术选型 ...
Web项目实战 | 购物系统v2.0 | 开发记录（九）Controller层返回数据的封装 | 商品批量操作 | 五表联立实现商品搜索
--若发现文章内容有误,敬请指正,望不吝赐教,感谢! 文章目录以往记录运行环境一.设计Bean用于Controller层返回数据二.商品批量操作 2.1 批量操作的前端设计 2.2 批量操作的 ...
python项目--打字测试系统V1.0
更多功能正在开发中... 代码就在下方,欢迎大家一起交流,共同进步. import threading from tkinter import * from tkinter import scroll ...
芯宇宙通用仓库管理系统V1.0说明书
芯宇宙通用仓库管理系统V1.0 <单机版> 使用说明书作者:池盛龙 QQ:1372823826 日期:2022-9-9 官网:驰盛隆.top 目录芯宇宙通用仓库管理系统V1.0 概述 ...
Java Web项目实战案例一
Java Web项目实战案例一一.主要开发工具如下: 1.物理机:windows 10 2.apache-maven-3.5.3 3.jdk1.8.0_161 4.Intellij 二.构建过程项 ...
Python自动化开发基础项目实战-监控系统 Day16-李杰-专题视频课程
Python自动化开发基础项目实战-监控系统 Day16-14487人已学习课程介绍课程特色:实战,细致,生动,深入浅出适用人群:适合Python初学者课程详情:从0基础开始 ...
项目级自动化测试流程 V1.0
项目级自动化测试流程 V1.0 目录 1 名词解释... 6 1.1 企业级自动化测试流程... 6 1.2 主流程... 6 1.3 一 ...
基于WEB的网上购物系统的设计与实现|电商购物商城
<S2SH基于WEB的网上购物系统的设计与实现>该项目采用技术jsp.strust2.Spring.hibernate.tomcat服务器.mysql数据库 ,项目含有源码.论文.配套开发 ...
html答题赚钱源码,WTS在线答题系统 v1.0.0
WTS在线答题系统为在线答题系统(在线考试),支持在线考试.在线练习等功能... 支持题型:单选题.多选题.填空题.问答题.判断题.附件题.材料题.视频题.音频题支持答题类型:手工配置试卷答题.随机 ...

Web项目实战 | 购物系统v1.0 | 开发记录（一） | 大学生闲置物品交易系统 | 选择页面模板（附资源），使用 JQuery AJAX实现注册、登陆