项目展示
开发环境
Eclipse Java jdk 13.0.2
使用关键技术
- Tomcat实现Web工程部署到服务器
- $Ajax,Servlet实现前后端信息交互
- MySQL数据库的增删改查应用
- C3P0连接池的应用
项目实现的主要功能
- 实现用户界面注册,并将注册信息保存到数据库
- 用户进行注册操作,设置用户名时自动遍历数据库查询是否重复
- 登录注册时自动生成验证码,并校验验证码
- 实现登录操作,用户名密码与数据库一致才能登录成功
- 商城首页商品信息动态显示,可从数据库进行数据更改
- 商品详情页,提取商品不同的属性
- 加入购物车功能,并进行商品总价计算
- 实现对购物车商品一键移除购物车
项目完成效果
项目技术核心介绍
MVC开发模式
项目主要使用的是MVC设计模式,使用前后端分离的思想进行开发。采用前台页面,后端数据库,中部业务逻辑层三层架构设计。
Ajax实现前后端通信
Ajax实现前后端交互的重点代码,下列重点介绍Ajax代码写法
<script type="text/javascript">
$(function () {
$("#submit").click(function () {
$.ajax({
type:"POST",
url:"${pageContext.request.contextPath}/user",
data:$("#loginForm").serialize(),
success:function(data){
if(data=="success") {
alert("登录成功!");
//回到首页
location.href = "index.jsp";
}else{
alert("用户名或密码错误");
}
},
})
});
})
</script>
function()为一个动作监听,当点击submit按钮时,使用ajax向后端发送请求,type代表调用后端servlet中POST方法,url代表此信息发送到路由地址为/user的servlet中,success代表如果后端经过处理传回的data数据若data==success则代表登录成功,并且跳转回主界面,否则显示用户名或密码错误。本条servlet生命周期结束,ajax信息传递完成。
MySQL数据库连接(使用连接池)
<c3p0-config>
<!-- 使用默认的配置读取连接池对象 -->
<default-config>
<!-- 连接参数 -->
<property name="driverClass">com.mysql.jdbc.Driver</property>
<property name="jdbcUrl">jdbc:mysql://localhost:3306/store?characterEncoding=utf8&useSSL=false&serverTimezone=UTC&rewriteBatchedStatements=true</property>
<property name="user">root</property>
<property name="password">password</property>
<!-- 连接池参数 -->
<property name="initialPoolSize">20</property>
<property name="maxPoolSize">30</property>
<property name="checkoutTimeout">3000</property>
<property name="maxIdleTime">500</property>
</default-config>
</c3p0-config>
此次主要使用的是C3P0连接池进行数据库连接,连接方法与DBcon连接相似,只是连接池参数需要使用XML文件进行编写(以上是C3P0连接池连接参数)
C3P0连接池的优点是可以设置一些参数,我在此工程主要设置了初始化创建的连接数,最大连接数,配置连接池所等待时间,最大等待时间等四种参数
自动生成验证码程序
public class CodeServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// 创建画布
int width = 120;
int height = 40;
BufferedImage bufferedImage = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
// 获得画笔
Graphics g = bufferedImage.getGraphics();
// 填充背景颜色
g.setColor(Color.white);
g.fillRect(0, 0, width, height);
// 绘制边框
g.setColor(Color.red);
g.drawRect(0, 0, width - 1, height - 1);
// 生成随机字符
// 准备数据
String data = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890";
// 准备随机对象
Random r = new Random();
// 声明一个变量 保存验证码
String code = "";
// 书写4个随机字符
for (int i = 0; i < 4; i++) {
// 设置字体
g.setFont(new Font("宋体", Font.BOLD, 28));
// 设置随机颜色
g.setColor(new Color(r.nextInt(255), r.nextInt(255), r.nextInt(255)));
String str = data.charAt(r.nextInt(data.length())) + "";
g.drawString(str, 10 + i * 28, 30);
// 将新的字符 保存到验证码中
code = code + str;
}
// 绘制干扰线
for (int i = 0; i < 6; i++) {
// 设置随机颜色
g.setColor(new Color(r.nextInt(255), r.nextInt(255), r.nextInt(255)));
g.drawLine(r.nextInt(width), r.nextInt(height), r.nextInt(width), r.nextInt(height));
}
// 将验证码 打印到控制台
//System.out.println(code);
// 将验证码放到session中
request.getSession().setAttribute("code_session", code);
// 将画布显示在浏览器中
ImageIO.write(bufferedImage, "jpg", response.getOutputStream());
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
验证码的生成也是通过一个servlet实现。前端通过发送请求,获取servlet返回的随机验证码信息。
项目源代码下载
其中包括项目源代码以及sql后缀的数据库文件,在数据库中运行即可获得全部数据库信息。
链接:https://pan.baidu.com/s/1-VdlEShEKxaC8i5zHG1Tvg
提取码:pws0