admin 管理员组

文章数量: 1086019

JavaWeb传统商城(MVC三层架构)的评价模块增删改查(CURD)的详细开发过程以及原理详解

文章目录

  • 一 . 课程商城的评价模块的增删改查需求开发记录
    • 1.1 项目背景
    • 1.2 本次需求
    • 1.3 需求分析与UI设计
    • 1.4 评价模块数据库设计与详解
    • 1.5 开发顺序
    • 1.6 效果抢先看
  • 二.对应商品的评价和查询
    • 2.1 某商品的该商品的所有评价渲染
      • 2.1.1 Dao层
      • 2.1.2 Service层
      • 2.1.3 Servlet层
      • 2.1.4 JSP页面
      • 2.1.5 评价列表效果展示截图
    • 2.2 用户提交评价
      • 2.2.1 JSP页面
      • 2.2.2 Serclet层
      • 2.2.3 Service层
      • 2.2.4 Dao层
      • 2.2.5 用户提交评价效果截图
  • 三. 评价的权限删除和修改
    • 3.1 删除评价功能
      • 3.1.1 JSP 页面
      • 3.1.2 Serclet层
      • 3.1.3 Service层
      • 3.1.4 Dao层
      • 3.1.4 删除评价功能效果展示
    • 3.2 修改评论功能
      • 3.2.1 JSP页面
      • 3.2.2 Serclet层
      • 3.2.3 Service层
      • 3.2.4 Dao层

📗系列专栏: 本文写在上进小菜猪的JavaWeb专栏想要了解更多,请访问本专栏

一 . 课程商城的评价模块的增删改查需求开发记录

1.1 项目背景

这是JavaWeb的结课大作业。该作业要求设计一个原生的Javaweb项目。

  • 本项目类型为:传统商城
  • 本项目使用原生JavaWeb采用MVC架构,项目包括前台和后台
    • 前台用于用户购买产品
    • 后台用于管理
  • 本项目数据库采用Mysql
  • 本需求难度:易

1.2 本次需求

系统新增功能扩展或优化功能:大家可以在本系统的基础上进行系统新增功能扩展或优化。如:评价,好评,差评,促销,优惠券,分期付款,售后,销售统计分析等等,这些只是一些提示,并不限于此。大家可以上淘宝、京东等网站找找系统新增功能扩展的思路。 11月5日晚7:00检查系统新增功能。

需求:

评价模块的增删改查

基于本次的任务需求,我认为相当有一点复杂的就是评价(包括好评,差评)模块,所以抽了点时间写了一下评价模块。其余的模块较为简单,日后在写。

1.3 需求分析与UI设计

由于最近手中项目较多,决定不使用jqurey的开源模板进行美化,本次开发记录笔记也以简洁为主,故本次任务核心:能用就行。

这个评价模块其实是一个类淘宝的评价功能,所以初步样式概念设计如下:

1.4 评价模块数据库设计与详解

上述字段介绍:

  • comment_id :评价条目id,主键,自增。
  • curriculum_id :课程id。作用:用于之后的各个不同的课程商品渲染本商品的评价列表。
  • user_id:用户id。作用记录当前的发起评价事件的用户id。
  • user_name:用户姓名。原打算用user_id来联立user表,后发现在前端表单${user.name }可以直接获取到用户名称。
  • text :用户评价内容。
  • bad :差评。
  • good : 好评。
    • 注释:bad和good可以使用一个字段,当时时间较为紧张,没有细想,不过经过后端处理可以满足评价需求。
  • datatime :datatime类型。存储用户评价时间。

1.5 开发顺序

1.先写目标商品页的所有评价列表渲染。

2.再写当前登录用户评价提交表单。

3.权限删除和修改评价。

1.6 效果抢先看

采用MVC三层架构的JavaWeb商城项目的评价模块功能视频演示

评论循环渲染效果图:

删除和修改效果图

修改效果图:

二.对应商品的评价和查询

2.1 某商品的该商品的所有评价渲染

当前页面为某商品的商品详情页:按照惯例,我们应该在下面增加本次评价模块。

2.1.1 Dao层

本层用于完成对数据库的操作。

1.使用有参方式构造QueryRunner对象。

QueryRunner queryRunner = new QueryRunner(DataSourceUtils.getDataSource());

2.编写占位符形式的sql语句。

String sql = "select * from `comment` where curriculum_id = ? order by datatime desc";

3.执行sql语句查询,将结果封装在Employee中。

return queryRunner.query(sql, new BeanListHandler<Comment>(Comment.class),id);

解释/作用:

id为目标商品id。sql语句是根据商品id筛选出目标商品的全部评价详情,并且降序排序封装在Employee后返回给CommentService。

2.1.2 Service层

service层为了方便扩展和维护。

1.新建指定类型List

List<Comment> com=null;

2.调用到Dao层。

 com = ComDao.getCommentById(id);

3.记得抛出异常,这里返回 Com。

2.1.3 Servlet层

1.将前面Service返回的值,赋值给指定类型List。

List<Comment> list= gService1.getCommentById(id);

2.使用JSP内置对象的setAttribute方法存储。

request.setAttribute("orderList", list);

3.带参转发到目的url。

request.getRequestDispatcher("/Curriculums_detail.jsp").forward(request, response);

2.1.4 JSP页面

1.目标orderList的类型为class java.util.ArrayList。写一个循环来进行循环渲染评价列表:

<c:forEach items="${orderList}" var="item" >
</c:forEach>

2.为了节省时间,采用一个简单的 HTML 表格来完成这个需求:(架子)

<table border="1"><tr><td rowspan="2"><img src="./images/zhu.jpg" style="width: 100px ;height: 100px"></td><td><br/></td></tr><tr><td></td></tr>
</table>

3.在表格里面显示评论用户的名称。

<span style="color:#1b6d85;"><c:out value="${item.curriculum_name}"></c:out></span>

4.根据数据库的值来判断渲染好评还是差评。

 <c:if test="${item.good==1 }"><span style="color:red;">赏了好评</span></c:if><c:if test="${item.good==0 }"><span style="color:red;">给了差评</span></c:if>

5.输出数据库里存储的时间。

<c:out value="${item.datatime}"></c:out>

6.记得渲染评论内容。

<c:out value="${item.text}"></c:out>

2.1.5 评价列表效果展示截图

页面截图:

数据库截图:

2.2 用户提交评价

2.2.1 JSP页面

本功能使用form表单向后端发起请求,将相关的内容等信息存储到sql中。

1.先输出一个当前登录的用户名和当前课程。

<span>当前登录的用户名为:${user.name } 。当前课程为:${g.name }</span>
  1. 用户的id,名字,商品名字id等等我们在隐藏input里传输即可。
<input type="hidden" name="user_id" value="${user.id }" placeholder="user_id" >
<input type="hidden" name="curriculum_id" value="${g.id }" placeholder="curriculum_id">
<input type="hidden" name="curriculum_name" value="${user.name }" placeholder="curriculum_name">

3.输入评价框框。

<input type="text" name="text"  placeholder="请输入评价" style="width: 800px;height: 50px;">

4.好评、差评的单选框。

<input type="radio" name="haohuai" value="1" checked>好评
<input type="radio" name="haohuai" value="0">差评

5.form的请求路径为:/Comment

2.2.2 Serclet层

@WebServlet(name = "Comment",urlPatterns = "/Comment")

1.由于数据库设计的失误,所以后端在拼接List的时候,先进行一下赋值操作。

int haohuai = Integer.parseInt(req.getParameter("haohuai"));
int good = 0, bad = 0;
if (haohuai==1) {good = 0;bad = 1;
}
if (haohuai==0){good = 1;bad = 0;
}

2.将前端传递的值进行一个拼接List。

List<String> list = new ArrayList<>();
list.add(String.valueOf(Integer.parseInt(req.getParameter("curriculum_id"))));
list.add(String.valueOf(Integer.parseInt(req.getParameter("user_id"))));
list.add(req.getParameter("text"));
list.add(String.valueOf(good));
list.add(String.valueOf(bad));
list.add(String.valueOf(req.getParameter("curriculum_name")));

3.传给Service层。返回值为字符,其实返回值没啥用。

String g = gService1.getCommentall(list);

4.用户评价完之后进行一个重定向。

这块我其实写不太好,应该用异步传输,时间原因,懒得写了,完成需求就行。

String zhu ="/Curriculums_detail?id=";
resp.sendRedirect(zhu+req.getParameter("curriculum_id"));

2.2.3 Service层

和2.1差不多。调用Dao进行数据库增加操作。

com = ComDao.getCommentall(list);

2.2.4 Dao层

1.获取该用户提交评价时候的时间:

Date date = new Date();
Timestamp t= new Timestamp(date.getTime());

2.使用有参方式构造QueryRunner对象。

QueryRunner r = new QueryRunner(DataSourceUtils.getDataSource());

3…编写占位符形式的sql语句。

String sql = "insert into comment(curriculum_id,user_id,text,bad,good,curriculum_name,datatime) values(?,?,?,?,?,?,?)";

4.3.执行sql语句添加。

r.update(sql,list.get(0),list.get(1),list.get(2),list.get(3),list.get(4),list.get(5),t);

2.2.5 用户提交评价效果截图

1.先找一个没有用户评价过的商品,进入。

2.登录账号进行评价:

3.提交效果图:

4.登录其他账号再次进行评价:

三. 评价的权限删除和修改

3.1 删除评价功能

3.1.1 JSP 页面

1.权限判断,我们的删除只能由评论该评论的用户进行点击删除:

<c:if test="${user.id == item.user_id}">
</c:if>

2.在权限判断的EL语句里写一个a标签,然后将a标签带参访问。

<a href="/CommentDelete?Commentid=${itemment_id}&curriculum_id=${g.id }" class="add-cart item_add" >删除</a>

commentid=评论的ID。

curriculum_id=商品的ID。

3.1.2 Serclet层

1.注册映射路径:

@WebServlet(name = "CommentDelete",urlPatterns = "/CommentDelete")

2.获得评论id:

int comment_id = Integer.parseInt(req.getParameter("Commentid"));
String co = gService1.getCommentDeleteID(comment_id);

3.重定向:

String zhu ="/Curriculums_detail?id=";
resp.sendRedirect(zhu+req.getParameter("curriculum_id"));

3.1.3 Service层

com = ComDao.getCommentDeleteID(commentid);

3.1.4 Dao层

1.执行sql语句,根据comment_id(评论id)删除本条评论。

String sql = "delete from comment where comment_id=?";

3.1.4 删除评价功能效果展示

点击删除:

删除成功:

3.2 修改评论功能

3.2.1 JSP页面

  1. 修改按钮,写一个js控制器:
<button οnclick="show1(${itemment_id})"  class="item_add" style=""><div id="xiugai${itemment_id}">修改</div></button>
  1. show1,让button显示出来:并且点击改变文字,把修改二字改为修改中。
function show1(id) {document.getElementById("button"+id).style.display = "block";y = document.getElementById("xiugai"+id)y.innerHTML = "修改中"
};
  1. show2,让button隐藏起来。
function show2(id) {document.getElementById("button"+id).style.display = "none";y = document.getElementById("xiugai"+id)y.innerHTML = "修改"
}

4.重新写一个表单,把当前评论id传入到后端进行一个处理:

<div id="button${itemment_id}"><form action="/CommentUpdate" method="post"><span>当前登录的用户名为:${user.name } 。当前评论id为:${itemment_id}</span><input type="hidden" name="comment_id" value="${itemment_id }" placeholder="comment_id" ><input type="hidden" name="user_id" value="${user.id }" placeholder="user_id" ><input type="hidden" name="curriculum_id" value="${g.id }" placeholder="curriculum_id"><br><input type="text" name="text"  placeholder="请输入评价" style="width: 800px;height: 50px;"><input type="hidden" name="curriculum_name" value="${user.name }" placeholder="curriculum_name"><br><input type="radio" name="haohuai" value="1" checked>好评<br><input type="radio" name="haohuai" value="0">差评<div class="text-center"><button οnclick="show2(${itemment_id})"  class="item_add" type="button">取消</button><input type="submit" value="提交" class="add-cart item_add"></div></form>
</div>

3.2.2 Serclet层

基本和2.2的Serclet层代码一样,区别是:

3.2.3 Service层

com = ComDao.getCommentUpdate(list);

3.2.4 Dao层

本出可以参考2.2的dao层解释,原理一样。

Date date = new Date();
Timestamp t= new Timestamp(date.getTime());
System.out.println(t);
QueryRunner r = new QueryRunner(DataSourceUtils.getDataSource());
String sql = "update comment set curriculum_id=?,user_id=?,text=?,bad=?,good=?,curriculum_name=?,datatime=? where comment_id=?";
r.update(sql,list.get(0),list.get(1),list.get(2),list.get(3),list.get(4),list.get(5),t,list.get(6));

本文标签: JavaWeb传统商城(MVC三层架构)的评价模块增删改查(CURD)的详细开发过程以及原理详解