JavaWeb商城项目的商品点赞功能模块的开发详

时间：2022-12-07 07:18:44

一.JavaWeb商城项目的商品点赞功能开发过程记录

1.1 项目背景

在完成内蒙古科技大学JavaWeb课程的大作业之后，本着练习的态度继续的写了一个功能：点赞功能。

本需求看似简单，难度其实与评论系统相当，甚至对于EL表达式不熟悉的人于有过之而无不及。

  • 本项目类型为：传统商城
  • 本项目使用原生JavaWeb采用MVC架构，项目包括前台和后台
    • 前台用于用户购买产品
    • 后台用于管理
  • 本项目数据库采用Mysql
  • 本需求难度：1.8颗星
  • 本次项目需求：商品点赞功能

1.2 开发流程/顺序

1.在商品详情页面加入点赞按钮。包括（点赞前的灰色按钮，点赞成功之后的蓝色按钮），使用条件判断进行不同渲染。

2.在后端进行处理，包括，对应数据筛选渲染，点赞处理，取消点赞处理。

1.3 数据库设计

JavaWeb商城项目的商品点赞功能模块的开发详

解释：

fabulousid字段：为点赞id，主键自增，用于取消点赞。

gameid字段：商品id，用于点赞操作和某一用户对目标商品是否点赞的判断渲染。

userid字段：用户id，用于点赞操作和某一用户对目标商品是否点赞的判断渲染。

1.3 效果抢先看

二.开发过程

2.1 增加点赞按钮

我选择了阿里矢量库的点赞照片如下：

JavaWeb商城项目的商品点赞功能模块的开发详

JavaWeb商城项目的商品点赞功能模块的开发详

在Game_detail.jsp页面的合适地方加入上面的图片：

<img src="./images/good.png" height="9%" width="9%">

2.2 实现点赞操作

1.在点赞按钮外面嵌套一个点赞按钮：

<a rel="nofollow" href="/fabulous?id=${g.id}&userid=${user.id }">
</a>

2.可以看出该按钮指向的url为fabulous。并且是带参传输：将商品的id和用户的id传给fabulous的servlet。

2.2.1 建立对象类

根据数据库，先建立对应的对象类。

JavaWeb商城项目的商品点赞功能模块的开发详

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 rel="nofollow" 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 rel="nofollow" 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 rel="nofollow" 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}人点赞

三，效果展示

点赞：

JavaWeb商城项目的商品点赞功能模块的开发详

JavaWeb商城项目的商品点赞功能模块的开发详

取消点赞：

JavaWeb商城项目的商品点赞功能模块的开发详

JavaWeb商城项目的商品点赞功能模块的开发详

标签：

相关文章