家庭记账本小程序开发第四天
今天对家庭记账本添加了删除功能，并对账单页面的格局进行了改动，我觉得变得更好看了。
连接了Java后台数据库。
起初遇到的问题是想实现左滑删除这一事件，尝试了Slideview组件和利用touch事件进行，但没有取得很好的进展，于是我在查看别人的案例的时候，尝试了使用movable-view组件和删除按钮绑定事件，最后成功了。
如下图：
改动后的js
// pages/B/index.js const app = getApp() Page({ /** * 页面的初始数据 */ data: { date:'', money:'', type:'', style:'', ty:[{}], }, onLoad: function (option) { var that = this; wx.request({ url: 'http://localhost:8080/Tally/WXServletShow', data: { username: '刘子煜', password: '123' }, method: 'POST', header: { //'content-type': 'application/json' // 默认值 'Content-Type': 'application/x-www-form-urlencoded' }, success: function (res) { console.log(res.data); var ty1 = res.data.data; that.setData({ ty: ty1 }); // console.log(ty[0].date); }, fail: function (res) { console.log(".....fail....."); } }) console.log(option.query) const eventChannel = this.getOpenerEventChannel() eventChannel.emit('acceptDataFromOpenedPage', { data: 'test' }); eventChannel.emit('someEvent', { data: 'test' }); // 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据 eventChannel.on('acceptDataFromOpenerPage', function (data) { console.log(data) }) }, delete: function(e){ console.log(e) }, /** * 显示删除按钮 */ showDeleteButton: function (e) { let productIndex = e.currentTarget.dataset.productindex this.setXmove(productIndex, -65) }, /** * 隐藏删除按钮 */ hideDeleteButton: function (e) { let productIndex = e.currentTarget.dataset.productindex this.setXmove(productIndex, 0) }, /** * 设置movable-view位移 */ setXmove: function (productIndex, xmove) { let ty = this.data.ty ty[productIndex].xmove = xmove this.setData({ ty: ty }) }, /** * 处理movable-view移动事件 */ handleMovableChange: function (e) { if (e.detail.source === 'friction') { if (e.detail.x < -30) { this.showDeleteButton(e) } else { this.hideDeleteButton(e) } } else if (e.detail.source === 'out-of-bounds' && e.detail.x === 0) { this.hideDeleteButton(e) } }, /** * 处理touchstart事件 */ handleTouchStart(e) { this.startX = e.touches[0].pageX }, /** * 处理touchend事件 */ handleTouchEnd(e) { if (e.changedTouches[0].pageX < this.startX && e.changedTouches[0].pageX - this.startX <= -30) { this.showDeleteButton(e) } else if (e.changedTouches[0].pageX > this.startX && e.changedTouches[0].pageX - this.startX < 30) { this.showDeleteButton(e) } else { this.hideDeleteButton(e) } }, /** * 删除产品 */ handleDeleteProduct: function ({ currentTarget: { dataset: { date ,money ,type,style} } }) { let ty = this.data.ty let productIndex = ty.findIndex(item => item.date === date) ty.splice(productIndex, 1) this.setData({ ty }) if (ty[productIndex]) { this.setXmove(productIndex, 0) } console.log({ currentTarget: { dataset: { date, money, type, style} } }) var that = this; wx.request({ url: 'http://localhost:8080/Tally/WXServletDelete', data: { index: that.data.index, date: { currentTarget: { dataset: { date, money, type, style } } }.currentTarget.dataset.date, money: { currentTarget: { dataset: { date, money, type, style } } }.currentTarget.dataset.money, type: { currentTarget: { dataset: { date, money, type, style } } }.currentTarget.dataset.type, style: { currentTarget: { dataset: { date, money, type, style } } }.currentTarget.dataset.style }, method: 'POST', header: { //'content-type': 'application/json' // 默认值 'Content-Type': 'application/x-www-form-urlencoded' }, success: function (res) { console.log(res.data); wx.showToast({ title: '删除成功！', }) that.setData({ error: "" }) }, fail: function (res) { console.log(".....fail....."); // that.setData({ // error: res.data.msg // }); } }) }, })
改动后的wxml：
<!--pages/B/index.wxml--> <view class="container"> <view class="product-list"> <view wx:for="{{ty}}" wx:for-index="index" wx:key="{{item.date}}" class="product-item"> <movable-area> <movable-view out-of-bounds="true" direction="horizontal" x="{{item.xmove}}" inertia="true" data-productIndex="{{index}}" bindtouchstart="handleTouchStart" bindtouchend="handleTouchEnd" bindchange="handleMovableChange"> <view class="product-item-wrap bg-g" wx:if="{{index % 2 == 0}}"> <view class="product-movable-item"> <view class="product-movable-item-style">{{item.style}}</view> <view class="product-movable-item-date">{{item.date}}</view> </view> <view class="product-movable-item product-movable-item-amount"> <text class="type">{{item.type}}</text> <text class="money">{{item.money}}</text> </view> </view> <view class="product-item-wrap" wx:else> <view class="product-movable-item"> <view class="product-movable-item-style">{{item.style}}</view> <view class="product-movable-item-date">{{item.date}}</view> </view> <view class="product-movable-item product-movable-item-amount"> <text class="type">{{item.type}}</text> <text class="money">{{item.money}}</text> </view> </view> </movable-view> </movable-area> <view class="delete-btn" data-date="{{item.date}}" data-money="{{item.money}}" data-type="{{item.type}}" data-style="{{item.style}}" bindtap="handleDeleteProduct">删除</view> </view> </view> </view>
改动后的wxss：
/* pages/B/index.wxss */ .bg-g{ background: #E6F3F9; } .product-list .product-item { position: relative; width: 100vw; border-bottom: 2rpx solid #E9E9E9; box-sizing: border-box; background: #fff; z-index: 999; } .product-list .product-item movable-area { height: 120rpx; width: calc(100vw - 120rpx); } .product-list .product-item movable-view { height: 120rpx; width: 100vw; background: #fff; z-index: 999; } .product-list .product-item .delete-btn { position: absolute; top: 0; bottom: 0; right: 0; width: 120rpx; font-family: PingFangSC-Regular; font-size: 24rpx; color: #FFFFFF; line-height: 120rpx; z-index: 1; background: #E66671; text-align: center; } .product-list .product-item-wrap { position: relative; display: flex; align-items: center; padding: 8rpx 0 20rpx 20rpx; box-sizing: border-box; } .product-list .product-item-wrap .product-movable-item { flex: 1; overflow: hidden; } .product-list .product-item-wrap .product-movable-item-style { font-family: PingFangSC-Regular; font-size: 28rpx; color: #71747A; line-height: 60rpx; margin-right: 10rpx; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .product-list .product-item-wrap .product-movable-item-date { font-family: PingFangSC-Regular; font-size: 24rpx; color: #969AA3; } .product-list .product-item-wrap .product-movable-item-amount { flex: 0 0 auto; padding-right: 80rpx; position: relative; } .product-list .product-item-wrap .product-movable-item-amount .type { width: 120rpx; font-size: 28rpx; color: #383A3D; line-height: 60rpx; } .product-list .product-item-wrap .product-movable-item-amount .money { position: absolute; top: 0; right: 30rpx; font-size: 28rpx; color: #969AA3; line-height: 60rpx; }
新增的删除servlet：
package controller; import java.io.IOException; 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 com.google.gson.Gson; import java.io.PrintWriter; import java.io.Writer; import java.sql.Connection; import java.sql.ResultSet; import java.sql.Statement; import java.util.HashMap; import java.util.Map; import dao.deletedao; import bean.tally; import util.DBUtil; /** * Servlet implementation class WXServletDelete */ @WebServlet("/WXServletDelete") public class WXServletDelete extends HttpServlet { private static final long serialVersionUID = 1L; // 用于删除 /** * @see HttpServlet#HttpServlet() */ public WXServletDelete() { super(); // TODO Auto-generated constructor stub } /** * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response) */ protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //设置请求编码 request.setCharacterEncoding("utf-8"); response.setContentType("text/html;charset=utf-8"); /* 设置响应头允许ajax跨域访问 */ response.setHeader("Access-Control-Allow-Origin", "*"); /* 星号表示所有的异域请求都可以接受， */ response.setHeader("Access-Control-Allow-Methods", "GET,POST"); tally tally = new tally(); //获取微信小程序get的参数值并打印 String date = request.getParameter("date"); String money=request.getParameter("money"); String type=request.getParameter("type"); String style=request.getParameter("style"); tally.setDate(request.getParameter("date")); tally.setMoney(request.getParameter("money")); tally.setType(request.getParameter("type")); tally.setStyle(request.getParameter("style")); System.out.println("date="+tally.getDate()+" ,money="+tally.getMoney()+",type="+tally.getType()+",style="+tally.getStyle()); Connection conn = DBUtil.getConn(); Statement state = null; ResultSet rs = null; deletedao sd = new deletedao(); try { state = conn.createStatement(); sd.delete(date,money,type,style); //转成json数据 Map<String, Object> result = new HashMap<String, Object>(); result.put("data", tally); result.put("msg", "删除成功"); //使用Gson类需要导入gson-2.8.0.jar String json = new Gson().toJson(result); //返回值给微信小程序 Writer out = response.getWriter(); out.write(json); out.flush(); }catch(Exception e) { System.out.println("删除失败"); e.printStackTrace(); } } /** * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response) */ protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stub doGet(request, response); } }
新增的删除dao：
package dao; import java.sql.Connection; import java.sql.SQLException; import com.mysql.jdbc.PreparedStatement; import util.DBUtil; public class deletedao { Connection conn = DBUtil.getConn(); //连接数据库 public boolean delete(String date,String money,String type,String style) { boolean flag=false; try { String sql="delete from tally where date='"+date+"' and money='"+money+"' and type='"+type+"' and style='"+style+"'"; PreparedStatement pstmt = (PreparedStatement) conn.prepareStatement(sql); int i = pstmt.executeUpdate(); pstmt.close(); conn.close(); if(i>0) flag = true; }catch(SQLException e) { System.out.println("删除失败"); e.printStackTrace(); } return flag; } }
