任务卡 |
您所在的位置：网站首页 › qq点赞功能关闭 › 任务卡 |
任务卡
|
目录 一，ajax 实现数据异步操作 1，任务概述 2，任务过程 3，编码过程 3.1 数据库设计 3.2 项目结构 3.3 核心代码 3.4 运行效果 3.5 注意 一，ajax 实现数据异步操作 1，任务概述软件工程师小亮在编写微博点赞时，发现每次用户点击完成后，点赞量虽 然增加了，但是会刷新整个页面，用户体验度很低，怎么样才能在功能实现的 基础上，增强用户的体验度？分析后发现，ajax 是不二选择，那赶紧来学习一 下吧。 2，任务过程创建 servlet 用来处理前端请求和后台数据 导入 jquery 包，使用 jquery 中的 ajax 或者 post get 方法 理解任务需求，模拟点赞功能(可参考微博网页的效果) 3，编码过程完整项目地址：https://gitee.com/goodbyefirefly/java-course/tree/master/Chapter7/AJAXTaskCard 整体设计思路：直奔主题——AJAX点赞。一个JSP页面上有三条评论，每个评论后面跟一个点赞按钮，通过AJAX实现每次点赞实时显示该评论获赞个数。 3.1 数据库设计
message.jsp ProductMessage $(function () { $("#comment1").click(function () { $.ajax({ url:"/like", data:{"id":"comment1"}, type:"post", dataType:"text", success:function (rs) { $("#rs1").html(rs); } }); }); $("#comment2").click(function () { $.ajax({ url:"/like", data:{"id":"comment2"}, type:"post", dataType:"text", success:function (rs) { $("#rs2").html(rs); } }); }); $("#comment3").click(function () { $.ajax({ url:"/like", data:{"id":"comment3"}, type:"post", dataType:"text", success:function (rs) { $("#rs3").html(rs); } }); }); }) 评论区 评论1点赞数：点赞 评论2点赞数：点赞 评论3点赞数：点赞likeServlet.java package com.xrh.servlet; import com.xrh.service.CommentService; import com.xrh.service.impl.CommentServiceImpl; 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; import java.io.PrintWriter; @WebServlet("/like") public class likeServlet extends HttpServlet { CommentService commentService = new CommentServiceImpl(); @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { doPost(req, resp); } @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { String commentID = req.getParameter("id"); System.out.println("commentID:" + commentID); int numOfLike = commentService.addLike(commentID); System.out.println("numOfLike:" + numOfLike); resp.setContentType("text/html;charset=utf-8"); PrintWriter writer = resp.getWriter(); writer.print(numOfLike); } }commentDaoImpl.java package com.xrh.dao.impl; import com.xrh.dao.CommentDao; import com.xrh.util.DruidUtil; import java.sql.Connection; import java.sql.ResultSet; import java.sql.SQLException; import java.util.ArrayList; import java.util.Arrays; public class CommentDaoImpl implements CommentDao { @Override public int addLike(String commentID) { String sql = "select num_of_like from commentajax where commentID=?"; ArrayList params = new ArrayList(Arrays.asList(commentID)); int numOfLike = 0; try { ResultSet rs = DruidUtil.query(sql, params); rs.next(); numOfLike = (int)rs.getLong("num_of_like") + 1; } catch (SQLException e) { e.printStackTrace(); } finally { DruidUtil.close(); } sql = "update commentajax set num_of_like=? where commentID=?"; params = new ArrayList(Arrays.asList(numOfLike, commentID)); try { DruidUtil.update(sql, params); } catch (SQLException e) { e.printStackTrace(); } finally { DruidUtil.close(); } return numOfLike; } }DruidUtil.java package com.xrh.util; import com.alibaba.druid.pool.DruidDataSource; import com.alibaba.druid.pool.DruidDataSourceFactory; import java.sql.*; import java.util.List; import java.util.Properties; public class DruidUtil { private static DruidDataSource ds; private static final ThreadLocal localSessions = new ThreadLocal(); static { ///实例化数据库连接池对象 ds = new DruidDataSource(); //实例化配置对象 Properties properties = new Properties(); try { //加载配置文件内容 properties.load(DruidUtil.class.getClassLoader().getResourceAsStream("druid.properties")); ds = (DruidDataSource) DruidDataSourceFactory.createDataSource(properties); } catch (Exception e) { e.printStackTrace(); } } public static void close() { MySession mySession = localSessions.get(); if (mySession != null) { mySession.close(); } } //获取连接对象 private static Connection getConnection() { try { return ds.getConnection(); } catch (SQLException e) { e.printStackTrace(); } return null; } //添加参数，得到结果集，关闭流 public static ResultSet query(String sql, List params) throws SQLException { Connection con = getConnection(); if (con == null) return null; PreparedStatement ps = con.prepareStatement(sql); if (params != null) { for (int i = 0; i < params.size(); i++) { ps.setObject(i + 1, params.get(i)); } } ResultSet rs = ps.executeQuery(); localSessions.set(new MySession(con, rs, ps)); return rs; } public static int update(String sql, List params) throws SQLException { Connection con = getConnection(); if (con == null) return -1; // 预编译语句防止SQL注入 PreparedStatement ps = con.prepareStatement(sql);//此处不要自己创建preparedStatement if (params != null) { for (int i = 0; i < params.size(); i++) { ps.setObject(i + 1, params.get(i)); } } int count = ps.executeUpdate(); localSessions.set(new MySession(con, null, ps)); return count; } private static class MySession { private final Connection connection; private final ResultSet resultSet; private final PreparedStatement preparedStatement; public MySession(Connection connection, ResultSet resultSet, PreparedStatement preparedStatement) { this.connection = connection; this.resultSet = resultSet; this.preparedStatement = preparedStatement; } public void close() { //关流时是否输出日志 boolean log = false; try { if (resultSet != null) { resultSet.close(); if (log) { System.out.println(Thread.currentThread().getName() + "\tclose rs:" + resultSet); } } } catch (SQLException ignore) { } try { if (preparedStatement != null) { preparedStatement.close(); if (log) { System.out.println(Thread.currentThread().getName() + "\tclose ps:" + preparedStatement); } } } catch (SQLException ignore) { } try { if (connection != null) { connection.close(); if (log) { System.out.println(Thread.currentThread().getName() + "\tclose con:" + connection); } } } catch (SQLException ignore) { } } } } 3.4 运行效果
1，数据库连接用完 一定要记得关闭！！！(下面这种情况大概率是没有正常关闭连接) com.alibaba.druid.pool.GetConnectionTimeoutException: wait millis 3001, active10, maxActive102，普通按钮显示文字，不是在value中赋值，而是在组件中间填写 点赞3，jQuery中没有onclick方法，而是click $("#comment2").click(function () {}章节汇总在这里（づ￣3￣）づ╭❤～@&再见萤火虫&【06-JavaWEB】 对学习Java感兴趣的同学欢迎加入QQ学习交流群：1126298731 有问题欢迎提问，大家一起在学习Java的路上打怪升级！(o゜▽゜)o☆[BINGO!] |
【本文地址】
今日新闻 |
推荐新闻 |