第八章：简单留言模板

最新推荐文章于 2024-06-25 10:47:04 发布
最新推荐文章于 2024-06-25 10:47:04 发布
阅读量198 收藏
点赞数 2
文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_78001135/article/details/138862303
版权

实现代码

1.index

.js

// pages/index1/index1.js
var Bmob = require('../../utils/bmob');
var common = require('../../utils/common');
var app = getApp();
var that;
var url = '';

Page({
  data: {
    writeDiary: false,
    loading: false,
    windowHeight: 0,
    windowWidth: 0,
    limit: 10,
    diaryList: [],
    modifyDiarys: false
  },
  // 获取并显示留言数据
  onShow: function () {
    getList(this);
    wx.getSystemInfo({
      success: (res) => {
        this.setData({
          windowHeight: res.windowHeight,
          windowWidth: res.windowWidth
        })
      }
    })
  },
  // 添加数据
  toAddDiary: function () {
    that.setData({
      writeDiary: true
    })
  },
  uppic : function () {
    var that = this;
    wx.chooseImage({
      count: 9, // 默认值为9
      sizeType: ['compressed'], // 可以指定是原图还是压缩图,默认二者都有 
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
      success: function (res) {
        var tempFilePaths = res.tempFilePaths;
        if (tempFilePaths.length > 0) {
          var newDate = new Date();
          var newDateStr = newDate.toLocaleDateString(); // 获取当前日期为文件主名   
          var tempFilePath = [tempFilePaths[0]];
          var extension = /\.([^.]*)$/.exec(tempFilePath[0]); // 获取文件扩展名
          if (extension) {
            extension = extension[1].toLowerCase();
          }
          var name = newDateStr + "." + extension; // 上传的图片的别名
          var file = new Bmob.File(name, tempFilePaths);
          file.save().then(function (res) {
            console.log(res.url);
            var url = res.url;
            that.setData({
              url: url
            })
          }, function (error) {
            console.log(error);
          })
        }
      }
    })
  },
  addDiary:function(event){
    var title = event.detail.value.title;
    var content = event.detail.value.content;
    var formId = event.detail.value.formId;
    console.log("event",event)
    if(!title){
      common.showTip("标题不能为空","loading");
    }else if(!content){
      common.showTip("内容不能为空","loading")
    }else{
      that.setData({
        loading:true
      })
      var currentUser = Bmob.User.current();
      var User = Bmob.Object.extend("_User");
      var UserModel = new User();
      var Diary = Bmob.Object.extend("test");
      var diary = new Diary();
      diary.set("title",title);
      diary.set("formId",formId);
      diary.set("content",content);
      diary.set("image",url);
      diary.set("count",1)
      if(currentUser){
        UserModel.id = currentUser.id;
        diary.set("own",UserModel);
      }
      diary.save(null,{
        success:function(result){
          common.showTip('添加日记成功');
          that.setData({
            writeDiary:false,
            loading:false
          })
          var currentUser = Bmob.User.current();
          that.onShow();
        },
        error:function(result,error){
          common.showTip('添加留言失败，请重新发布','loading')
        }
      })
    }
  },
  deleteDiary:function(event){
    var that = this;
    var objectId = event.target.dataset.id;
    wx.showModal({
      title: '操作提示',
      content: '确定要删除留言?',
      success: function(res){
        if (res.confirm) {
          var Diary = Bmob.Object.extend("test");
          var query = new Bmob.Query(Diary);
          query.get(objectId,{
            success:function(object){
              object.destroy({
                success:function(deleteObject){
                  console.log('删除留言成功')
                  getList(that)
                },
                error:function(object,error){
                  console.log('删除留言失败')
                }
              })
            },
            error:function(object,error){
              console.log("query object fail");
            }
          })
        }
      }
    })
  },
  toModifyDiary:function(event){
    var nowTile = event.target.dataset.title;
    var nowContent = event.target.dataset.content;
    var nowId = event.target.dataset.id;
    that.setData({
      modifyDiarys:true,
      nowTile:nowTile,
      nowContent:nowContent,
      nowId:nowId
    })
  },
  modifyDiarys:function(e){
    var t=this;
    modify(t,e)
  }
});
// 定义获取留言数据的函数
function getList(t,k) {
  that = t;
  var Diary = Bmob.Object.extend("test"); // 数据表 test
  var query = new Bmob.Query(Diary);
  var query1 = new Bmob.Query(Diary);
  query.descending('createdAt');
  query.include("own");
  query.limit(that.data.limit);
  var mainQuery = Bmob.Query.or(query,query1);
  mainQuery.find({
    success: function (results) {
      // 循环处理查询到的数据
      console.log(results);
      that.setData({
        diaryList: results
      })
    },
    error: function (error) {
      console.log("查询失败：" + error.code + " " + error.message);
    }
  });
}

function modify(t,e){
  var that = t;
  var modyTitle = e.detail.value.title;
  var modyContent = e.detail.value.content;
  var objectId = e.detail.value.content;
  var thatTitle = that.data.nowTile;
  var thatContent = that.data.nowContent;
  if ((modyTitle!=thatTitle||modyContent!=thatContent)) {
    if (modyTitle==""||modyContent=="") {
      common.showTip('标题或内容不能为空','loading')
    }else{
      console.log(modyContent)
      var Diary = Bmob.Object.extend("test");
      var query = new Bmob.Query(Diary);
      query.get(that.data.nowId,{
        success:function(result){
          result.set('title',modyTitle);
          result.set('content',modyContent);
          result.save();
          common.showTip('留言修改成功','success',function(){
            that.onShow();
            that.setData({
              modifyDiarys:false
            })
          })
        },
        error:function(object,error){

        }
      })
    }
  }else if (modyTitle==""||modyContent=="") {
    common.showTip('标题或内容不能为空','loading')
  }else{
    that.setData({
      modifyDiarys:false
    })
    common.showTip('修改成功','loading')
  }
}

.wxml

<view><image class="toWrite" bind:tap="toAddDiary" src="/pages/image/add.png"></image></view>
<view class="page">
  <scroll-view lower-threshold="800" bindscrolltolower="pullUpLoad" upper-threshold="0" scroll-y="true" style="height: {{windowHeight}}px;">
    <view class="page_bd">
      <view class="weui-panel_hd">留言列表</view>
    <view>
    <block wx:if="{{diaryList.length>0}}">
      <navigator class="weui-media-box weui-media-box_text" wx:for="{{diaryList}}" wx:key="diaryItem" url="/pages/detail/detail?objectId={{item.objectId}}&count={{item.count}}">
        <view class="title">主题:{{item.attributes.title}}</view>
        <view class="content">留言内容:{{item.attributes.content}}</view>
        <view class="info">
          <view class="tiem">时间:{{item.updatedAt}}</view>
          <view class="count">浏览:{{item.attributes.count}}</view>
          <view class="operate">
            <icon type="cancel dels" size="16"/>
            <text class="del" catch:tap="deleteDiary" data-id="{{item.attributes.objectId}}">删除</text>
            <icon type="success edits" size="16"/>
            <text catch:tap="toModifyDiary" data-id="{{item.id}}" data-content="{{item.content}}" data-title="{{item.attributes.title}}">编辑</text>
          </view>
        </view>
      </navigator>
    </block>
    </view>
   </view>
  </scroll-view>
</view>
<view class="js_dialog" id="androidDialog1" style="opacity: 1;" wx:if="{{writeDiary}}">
  <view class="weui-mask"></view>
  <view class="weui-dialog weui-skin_android">
    <view class="weui-dialog_hd">
      <strong class="weui-dialog_title">添加留言</strong>
    </view>
    <form bindsubmit="toAddDiary" >
      <view class="weui-dialog_bd">
        <view class="weui-cells_title">标题</view>
        <view class="weui-cells weui-cells_after-title">
          <view class="weui-cells weui-cell_input">
            <view class="weui-cell_bd">
              <input class="weui-input" name="title" placeholder="请输入标题"/>
            </view>
          </view>
        </view>
        <view class="weui-cells_title">留言内容</view>
        <view class="weui-cells weui-cells_after-title">
          <view class="weui-cell">
            <view class="weui-cells_bd">
              <textarea class="weui-textarea" name="content" placeholder="请输入留言内容" style="height:3.3em"></textarea>
              <view class="weui-textarea-counter">0/200</view>
            </view>
          </view>
        </view>
      </view>
      <view class="weui-dialog_ft">
        <view class="weui-dialog_btn weui-dialog_btn_default" bind:tap="noneWindows">取消</view>
        <button loading="{{loading}}" class="weui-dialog_btn weui-dialog_btn_primary" form-type="submit">提交</button>
      </view>
    </form>
  </view>
</view>

 2.index2

.js

// pages/index1/index1.js
var Bmob = require('../../utils/bmob');
var common = require('../../utils/common');
var app = getApp();
var that;
var url = '';

Page({
  data: {
    writeDiary: false,
    loading: false,
    windowHeight: 0,
    windowWidth: 0,
    limit: 10,
    diaryList: [],
    modifyDiarys: false
  },
  // 获取并显示留言数据
  onShow: function () {
    getList(this);
    wx.getSystemInfo({
      success: (res) => {
        this.setData({
          windowHeight: res.windowHeight,
          windowWidth: res.windowWidth
        })
      }
    })
  },
  // 添加数据
  toAddDiary: function () {
    that.setData({
      writeDiary: true
    })
  },
  uppic : function () {
    var that = this;
    wx.chooseImage({
      count: 9, // 默认值为9
      sizeType: ['compressed'], // 可以指定是原图还是压缩图,默认二者都有 
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
      success: function (res) {
        var tempFilePaths = res.tempFilePaths;
        if (tempFilePaths.length > 0) {
          var newDate = new Date();
          var newDateStr = newDate.toLocaleDateString(); // 获取当前日期为文件主名   
          var tempFilePath = [tempFilePaths[0]];
          var extension = /\.([^.]*)$/.exec(tempFilePath[0]); // 获取文件扩展名
          if (extension) {
            extension = extension[1].toLowerCase();
          }
          var name = newDateStr + "." + extension; // 上传的图片的别名
          var file = new Bmob.File(name, tempFilePaths);
          file.save().then(function (res) {
            console.log(res.url);
            var url = res.url;
            that.setData({
              url: url
            })
          }, function (error) {
            console.log(error);
          })
        }
      }
    })
  },
  addDiary:function(event){
    var title = event.detail.value.title;
    var content = event.detail.value.content;
    var formId = event.detail.value.formId;
    console.log("event",event)
    if(!title){
      common.showTip("标题不能为空","loading");
    }else if(!content){
      common.showTip("内容不能为空","loading")
    }else{
      that.setData({
        loading:true
      })
      var currentUser = Bmob.User.current();
      var User = Bmob.Object.extend("_User");
      var UserModel = new User();
      var Diary = Bmob.Object.extend("test");
      var diary = new Diary();
      diary.set("title",title);
      diary.set("formId",formId);
      diary.set("content",content);
      diary.set("image",url);
      diary.set("count",1)
      if(currentUser){
        UserModel.id = currentUser.id;
        diary.set("own",UserModel);
      }
      diary.save(null,{
        success:function(result){
          common.showTip('添加日记成功');
          that.setData({
            writeDiary:false,
            loading:false
          })
          var currentUser = Bmob.User.current();
          that.onShow();
        },
        error:function(result,error){
          common.showTip('添加留言失败，请重新发布','loading')
        }
      })
    }
  },
  deleteDiary:function(event){
    var that = this;
    var objectId = event.target.dataset.id;
    wx.showModal({
      title: '操作提示',
      content: '确定要删除留言?',
      success: function(res){
        if (res.confirm) {
          var Diary = Bmob.Object.extend("test");
          var query = new Bmob.Query(Diary);
          query.get(objectId,{
            success:function(object){
              object.destroy({
                success:function(deleteObject){
                  console.log('删除留言成功')
                  getList(that)
                },
                error:function(object,error){
                  console.log('删除留言失败')
                }
              })
            },
            error:function(object,error){
              console.log("query object fail");
            }
          })
        }
      }
    })
  },
  toModifyDiary:function(event){
    var nowTile = event.target.dataset.title;
    var nowContent = event.target.dataset.content;
    var nowId = event.target.dataset.id;
    that.setData({
      modifyDiarys:true,
      nowTile:nowTile,
      nowContent:nowContent,
      nowId:nowId
    })
  },
  modifyDiarys:function(e){
    var t=this;
    modify(t,e)
  }
});
// 定义获取留言数据的函数
function getList(t,k) {
  that = t;
  var Diary = Bmob.Object.extend("test"); // 数据表 test
  var query = new Bmob.Query(Diary);
  var query1 = new Bmob.Query(Diary);
  query.descending('createdAt');
  query.include("own");
  query.limit(that.data.limit);
  var mainQuery = Bmob.Query.or(query,query1);
  mainQuery.find({
    success: function (results) {
      // 循环处理查询到的数据
      console.log(results);
      that.setData({
        diaryList: results
      })
    },
    error: function (error) {
      console.log("查询失败：" + error.code + " " + error.message);
    }
  });
}

function modify(t,e){
  var that = t;
  var modyTitle = e.detail.value.title;
  var modyContent = e.detail.value.content;
  var objectId = e.detail.value.content;
  var thatTitle = that.data.nowTile;
  var thatContent = that.data.nowContent;
  if ((modyTitle!=thatTitle||modyContent!=thatContent)) {
    if (modyTitle==""||modyContent=="") {
      common.showTip('标题或内容不能为空','loading')
    }else{
      console.log(modyContent)
      var Diary = Bmob.Object.extend("test");
      var query = new Bmob.Query(Diary);
      query.get(that.data.nowId,{
        success:function(result){
          result.set('title',modyTitle);
          result.set('content',modyContent);
          result.save();
          common.showTip('留言修改成功','success',function(){
            that.onShow();
            that.setData({
              modifyDiarys:false
            })
          })
        },
        error:function(object,error){

        }
      })
    }
  }else if (modyTitle==""||modyContent=="") {
    common.showTip('标题或内容不能为空','loading')
  }else{
    that.setData({
      modifyDiarys:false
    })
    common.showTip('修改成功','loading')
  }
}

3.logo

.js

// logs.js
const util = require('../../utils/util.js')

Page({
  data: {
    logs: []
  },
  onLoad() {
    this.setData({
      logs: (wx.getStorageSync('logs') || []).map(log => {
        return {
          date: util.formatTime(new Date(log)),
          timeStamp: log
        }
      })
    })
  }
})

 .wxml

<!--logs.wxml-->
<scroll-view class="scrollarea" scroll-y type="list">
  <block wx:for="{{logs}}" wx:key="timeStamp" wx:for-item="log">
    <view class="log-item">{{index + 1}}. {{log.date}}</view>
  </block>
</scroll-view>

4.app.json

{
  "pages": [
    "pages/index1/index1",
    "pages/datail/datail",
    "pages/logs/logs"
  ],
  "window": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "小小留言板",
    "navigationBarBackgroundColor": "#ffffff"
  },
  "style": "v2",
  "componentFramework": "glass-easel",
  "sitemapLocation": "sitemap.json",
  "lazyCodeLoading": "requiredComponents"
}

5.运行结果

燕云十三
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
最全微信小程序源码项目开发代码合集
apltccode的博客
10-27 2万+
尽管选择权在您手中，但请注意，当您将 Java 项目添加到 Web 项目时，您可以在构建 Web 应用程序时启用 IDE 来构建小程序。当您 HelloWebApplet 通过从主 IDE 菜单中选择 Run > Build Project (HelloWebApplet) 来构建项目时，applet 的 JAR 文件会在原始 HelloApplet 项目中生成并打包在 HelloWebApplet 项目的 WAR 文件中。您在本教程中构建的应用程序向您展示了如何在IDE中构建和部署微信小程序源码。
留言板实例代码（有数据库）
01-07
4. **数据库设计**：一个简单的留言板系统可能包含至少两个表：一个是`messages`，记录每条留言的信息，包括留言内容、用户名、发表时间等；另一个可能是`users`，用于存储用户的基本信息，如用户名、密码（通常加密...
微信小程序开发实战总结(附源码)
赵振洋(Java学生)
06-03 8237
最近抽空学习了一下小程序，首先去看了一下官方文档(https://developers.weixin.qq.com/miniprogram/dev/framework/),然后写了几个页面熟悉了一下开发模式，顺便模仿“小独”一个读文章的APP做了一个小程序练练手，已经将代码放到github上面，下载地址见文章末尾，如有需要，欢迎clone交流学习，下面是小程序码，大家可以在手机上面看效果。...
【微信小程序】第八章 小小留言板
qq_74842025的博客
05-14 151
修改根目录下的app.json。
微信小程序实战项目《带源码》——仿计算器
lijingxiaov5的博客
05-07 1941
: 熟悉使用微信小程序开发工具，开发微信小程序项目。仿计算器，完成加减乘除求余四则运算。
【Neo4j】第 2 章：Cypher 查询语言
sikh_0529的博客
10-11 3393
Cypher 是用于与 Neo4j 交互的语言。最初由 Neo4j 为 Neo4j 创建，它已作为 openCypher 开源，现在被其他图形数据库引擎使用，例如RedisGraph. 它也是() 协会的一部分，其目标是构建一种通用的图形数据库查询语言——就像 SQL 用于关系数据库一样。无论如何，了解如何查询图形数据库是一个很好的起点，因为它的视觉方面：节点和关系可以通过查看查询来快速识别。
【MLOps】第 8 章 : 模型治理
sikh_0529的博客
06-27 229
法规是开始寻找的地方，但正如已经讨论过的，意见不是普遍的，也不是固定的。当对女性学校有偏见的招聘系统的开发者调整模型以忽略像“女性”这样的词时，他们发现即使是简历中的语言语气也反映了作者的性别，并对女性造成了不必要的偏见。在不太担心风险或监管合规性的举措中，更轻、更便宜的措施可能是合适的。例如，用于确定不同类型的机上餐食数量的“假设”计算影响相对较小，毕竟，即使在引入机器学习之前，这种组合也从来都不是正确的。相比之下，负责管理风险的人员和管理部署的 DevOps 团队会认为，全面严格的治理应该是强制性的。
【ML on Kubernetes】第 5 章：数据工程
sikh_0529的博客
10-18 731
尽管 ML 平台可能包含 ODH 提供的组件以外的组件，但可以说 ODH 的一个实例是 ML 平台的一个实例。这意味着，如果您有较小的数据集，例如 10 甚至几百 GB，则经过调整的传统数据库可能会提供更快的处理时间。您只需要编写数据处理逻辑。如果您想使用特定的库添加您自己的图像，您只需在此处添加另一个文件，您的团队就可以使用它。JupyterHub 的这一特性实现了笔记本容器镜像的标准化，这使得团队中的每个人都可以拥有相同的环境配置和相同的库集。一般来说，数据工程是指跨组织的数据和数据流的管理和组织。
【Transformers】第 3 章：自动编码语言模型
sikh_0529的博客
11-02 773
在上一章中，我们查看并研究了 HuggingFace 的 Transformer 如何使用典型的 Transformer 模型。到目前为止，所有主题都包括如何使用预定义或预构建的模型，而关于特定模型及其训练的信息较少。在本章中，我们将了解如何从头开始在任何给定语言上训练自动编码语言模型。该培训将包括模型的预培训和特定任务的培训。首先，我们将从有关 BERT 模型及其工作原理的基本知识开始。然后我们将使用一个简单的小型语料库来训练语言模型。之后，我们将看看如何在任何 Keras 模型中使用该模型。
【Designing ML Systems】第 4 章 ：训练数据
sikh_0529的博客
11-13 722
在第 3 章中，我们介绍了如何从系统的角度处理数据。在本章中，我们将从数据科学的角度讨论如何处理数据。尽管训练数据在开发和改进 ML 模型中很重要，但 ML 课程在偏向于建模，许多从业者认为这是该过程的“有趣”部分。构建最先进的模型很有趣。花费数天时间处理大量格式错误的数据，这些数据甚至不适合您的机器内存，这令人沮丧。数据是混乱的、复杂的、不可预测的并且可能是危险的。如果处理不当，它很容易使您的整个 ML 操作陷入困境。但这正是数据科学家和机器学习工程师应该学习如何很好地处理数据的原因，这可以节省我们的时间
ASPNET35开发大全第一章
01-12
第8章 Web窗体的数据控件 8.1 数据源控件 8.1.1 SQL数据源控件（SqlDataSource） 8.1.2 Access数据源控件（AccessDataSource） 8.1.3 目标数据源控件（ObjectDataSource） 8.1.4 LINQ数据源控件（LinqDataSource） ...
JAVA WEB 开发详解：XML+XSLT+SERVLET+JSP 深入剖析与实例应用.part4
08-06
第8章 数据库访问 254 8.1 驱动程序的类型 254 8.1.1 jdbc-odbc桥 254 8.1.2 部分本地api java驱动程序 255 8.1.3 jdbc网络纯java驱动程序 255 8.1.4 本地协议的纯java驱动程序 256 8.2 安装数据库 256 8.3 ...
JAVA WEB 开发详解：XML+XSLT+SERVLET+JSP 深入剖析与实例应用.part3
08-06
第8章 数据库访问 254 8.1 驱动程序的类型 254 8.1.1 jdbc-odbc桥 254 8.1.2 部分本地api java驱动程序 255 8.1.3 jdbc网络纯java驱动程序 255 8.1.4 本地协议的纯java驱动程序 256 8.2 安装数据库 256 8.3 ...
不出网上线CS的各种姿势（内网横向）
qq_64395221的博客
06-21 984
在内网环境中可以使用ipc $生成的SMB Beacon上传到目标主机执行，但是目标主机并不会直接上线的，需要我们自己用链接命令(link <ip>)去连接它。经常是拿下一台边缘机器，其有多块网卡，用于连接内外网，内网机器都不出网。因为连接的Beacons使用Windows命名管道进行通信，此流量封装在SMB协议中，所以SMB Beacon相对隐蔽，绕防火墙时可能发挥奇效。一样，建立pystinger连接之后，直接生成payload在业务主机执行，业务内网主机192.168.111.236即可成功上线。
JavaWeb系列二十: jQuery的DOM操作 下
你好, 我在学java的博客
06-24 427
jQuery的DOM操作CSS-DOM操作多选框案例页面加载完毕触发方法作业布置jQuery获取选中复选框的值jQuery控制checkbox被选中jQuery控制(全选/全不选/反选)jQuery动态添加删除用户 CSS-DOM操作 获取和设置元素的样式属性: css() 获取和设置元素透明度: opacity属性 获取和设置元素高度, 宽度: height(), width(). 在设置值时, 若只传递数字, 则默认单位是px; 如需要使用其它单位则需传递一个字符串, 例如 $(“p:first”)
Vue3实现记住密码功能
最新发布
jsbbhx的博客
06-25 203
npm i js-cookie // 使用Cookie来实现记住密码功能npm i jsencrypt //使用jsencrypt进行加密解密。
若以框架学习（3），echarts结合后端数据展示，暂时完结。
m0_51798113的博客
06-22 379
前三天，参加毕业典礼，领毕业证，顿时感到空落落的失去感，没有工作，啥也没有，总感觉一辈子白活了。因为数据太多了，有1000条，其实可以限制下不查那么多。由于自己前端技术问题，迟迟不能完成，所以我又网上搜了下。调整了下代码，终于完成了前后端echars数据。前端当初没搞懂，后端就太简单了，返回一个map。修改后的代码如下，大家可以参考下。然后在main.js中配置。自己的界面先用一个案例。导入echartss。//导入echats。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值