文章目录
📗系列专栏: 本文写在上进小菜猪的JavaWeb专栏想要了解更多,请访问本专栏
一.JavaWeb商城项目的商品点赞功能开发过程记录
1.1 项目背景
在完成内蒙古科技大学JavaWeb课程的大作业之后,本着练习的态度继续的写了一个功能:点赞功能。
本需求看似简单,难度其实与评论系统相当,甚至对于EL表达式不熟悉的人于有过之而无不及。
- 本项目类型为:传统商城
- 本项目使用原生JavaWeb采用MVC架构,项目包括前台和后台
- 前台用于用户购买产品
- 后台用于管理
- 本项目数据库采用Mysql
- 本需求难度:1.8颗星
- 本次项目需求:商品点赞功能
1.2 开发流程/顺序
1.在商品详情页面加入点赞按钮。包括(点赞前的灰色按钮,点赞成功之后的蓝色按钮),使用条件判断进行不同渲染。
2.在后端进行处理,包括,对应数据筛选渲染,点赞处理,取消点赞处理。
1.3 数据库设计
解释:
fabulousid字段:为点赞id,主键自增,用于取消点赞。
gameid字段:商品id,用于点赞操作和某一用户对目标商品是否点赞的判断渲染。
userid字段:用户id,用于点赞操作和某一用户对目标商品是否点赞的判断渲染。
1.3 效果抢先看
二.开发过程
2.1 增加点赞按钮
我选择了阿里矢量库的点赞照片如下:
在Game_detail.jsp页面的合适地方加入上面的图片:
<img src="./images/good.png" height="9%" width="9%">
2.2 实现点赞操作
1.在点赞按钮外面嵌套一个点赞按钮:
<a href="/fabulous?id=${g.id}&userid=${user.id }">
</a>
2.可以看出该按钮指向的url为fabulous。并且是带参传输:将商品的id和用户的id传给fabulous的servlet。
2.2.1 建立对象类
根据数据库,先建立对应的对象类。
2.2.2 建立FabulousServlet
1.映射url为:
@WebServlet(name = "fabulous",urlPatterns = "/fabulous")
2.获取到步骤2.2传输的id和userid:
int gameid = Integer.parseInt(req.getParameter("id"));
int userid = Integer.parseInt(req.getParameter("userid"));
3.在做此步骤之前,需求先新建一个FabulousServic
private FabulousService FService = new FabulousService();
4.调用Servic层,把商品的id和用户的id传入:
FService.getaddfabulous(gameid,userid);
2.2.3 FabulousService层
Service层作用不再多说。
调用Dao,数据库进行查询。
boolean c = false;
c = FDao.addfabulous(gameid,userid);
return c;
2.2.4 BusinessDao 实现点赞记录
1.使用有参方式构造QueryRunner对象。
QueryRunner r = new QueryRunner(DataSourceUtils.getDataSource());
2.编写占位符形式的sql语句。
String sql = "insert into fabulous (gameid,userid) values(?,?)";
3.执行sql语句添加。
r.update(sql,gameid,userid);
2.3 实现用户是否点赞检测
2.3.1 Servlet 层处理
1.新建目标List类,这里的id是上面获取到的,是商品的id。
List<Fabulous> list = FService1.getFabulouslist(id);
2.3.2 Service 层处理
不多讲,起到一个传递的作用,方便维护管理:
List<Fabulous> com=null;
try {
com = FDao.getFabulouslist(id);
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return com;
2.3.3 Dao层处理
1.使用有参方式构造QueryRunner对象
QueryRunner queryRunner = new QueryRunner(DataSourceUtils.getDataSource());
2.编写占位符形式的sql语句,把目标商品的点赞信息全部取出:
String sql = "select * from `fabulous` where gameid = ?";
3.执行sql语句查询,将结果封装在Employee中
return queryRunner.query(sql, new BeanListHandler<Fabulous>(Fabulous.class),id);
2.3.4 JPS页面处理
1.先定义一个布尔类型,用于判断,现在登录的某一个用户是否完成了这个商品的点赞:
<%
Boolean flas=false;
%>
2.因为后端传入的参数为list,我们对其进行循环遍历:
<c:forEach items="${orderList}" var="item" >
</c:forEach>
3.写一个判断,如果当前登录的用户,和遍历循环的用户id,代表该用户已经评价过这个商品:,将flas赋值为真:
<c:if test="${item.userid==user.id }">
<%
flas =true;
%>
</c:if>
4.条件渲染如下
5.如果flas’为真代表这个用户已经评价过这个商品了,所以显示为亮着的点赞图标,让其不能进行点赞操作:
<c:if test="<%=flas%>">
<span>
<a href="/fabulousdelete?id=${g.id}&fid=${fid}">
<img src="./images/good.png" height="9%" width="9%"> 已有${count}人点赞
</a>
</span>
</c:if>
6.反之如下:
<c:if test="<%=!flas%>">
<span>
<a href="/fabulous?id=${g.id}&userid=${user.id }">
<img src="./images/nogood.png" height="9%" width="9%"> 已有${count}人点赞
</a>
</span>
</c:if>
2.4 取消用户对某一商品的点赞
在做这个步骤之前,上面已经对其进行了条件渲染,所以这个按钮只有点赞过的用户才能发起请求:
<a href="/fabulousdelete?id=${g.id}&fid=${fid}">
看到这里,我们发现${fid}是哪里来的?过程如下
2.4.1 ${fid}当前点赞id获取
我们知道上面有一个list循环,所以如果俩者相当的时候,item里就会存有当前点赞的条目id:故我们使用c:set 将其保存。
<c:set var="fid" scope="session" value="${item.fabulousid}"/>
2.4.2 FabulousDeleteServlet层
1.获取到前端传来的fid和id,分别代表着当前的点赞id和当前的商品id。
int fid = Integer.parseInt(req.getParameter("fid"));
int gameid = Integer.parseInt(req.getParameter("id"));
2.执行删除id
FService.getdelfabulous(fid);
2.4.3 Service 层处理
FDao.getdelfabulous(fid);
2.4.5 Dao层处理:
根据目标id(点赞条目id)进行删除:
QueryRunner r = new QueryRunner(DataSourceUtils.getDataSource());
String sql = "delete from fabulous where fabulousid = ?";
r.update(sql,fid);
2.5 某商品点赞人数统计
如果读者理解了上面的代码逻辑,那么这块就相当的好理解了
2.5.1 Servlet 层处理
把商品id传入:
int count1;
try {
count1 = FService1.getFabulouscount(id);
} catch (SQLException e) {
throw new RuntimeException(e);
}
2.5.2 Dao层
Service简单省略。
在fabulous表里,将gameid的数据进行筛选返回。
QueryRunner r = new QueryRunner(DataSourceUtils.getDataSource());
String sql = "select count(*) from fabulous where gameid=?";
return r.query(sql,new ScalarHandler<Long>(),id).intValue();
2.6.2JSP渲染
这块比较简单,我们返回了数量,这里直接输出即可:
已有${count}人点赞
三,效果展示
点赞:
取消点赞: