微信小程序学习（第八章作业）

固执的鱼6662024-05-14 9:12

简单留言板

需求分析

留言板是一款能实现浏览留言、发表留言、删除留言和编辑留言的小程序，用户能够浏览当前的已留言内容，并且能按照时间的升序来查看最新的留言内容;能够发表自己的留言内容，在留言发表页填写相关项后即可发表，并能查看到新留言内容;能够删除不需要的留言;能够修改留言内容。因此，简单留言板的功能主要为显示留言、发表留言删除留言和编辑留言。

视图层设计

根据功能需求分析，共设计4个页面:首页(显示留言页)、发表留言页、编辑留言页和详情页

首页实现了留言的显示

单击首页中的发表留言图标十，就可以发表留言

单击某一留言的主题，即可显示该留言的详情页

在首页单击"删除"按钮，即可删除该留言内容

单击"编辑"按钮，即可修改该留言内容

数据库设计

根据留言板功能，设计数据库表名为test，其中设计的字段有id(编号)、de(标题)content(内容)、image(图像)、count(次数)5个字段，通过Bmob后端云设计

代码实现

1. 应用配置

需要下载及安装Bmod SDK，解压后导入其utils文件夹下的bmob.js文件和common.js文件，然后复制粘贴到你的项目文件夹下的utils文件夹里

项目分为三个包index、detail和image，分别为首页、详情页和图像

小程序代码实现的第一步是设置整个应用的配置，修改根目录下的app.json，示例代码如下:

复制代码 
{
  "pages": [
    "pages/index/index",
    "pages/detail/detail",
    "pages/logs/logs"
  ],
  "window": {
    "navigationBarTextStyle": "black",
    "navigationBarBackgroundColor": "#3891f8",
    "navigationBarTitleText": "小小留言板",
    "backgroundTextStyle":"light"
  },
  "style": "v2",
  "rendererOptions": {
    "skyline": {
      "defaultDisplayBlock": true,
      "disableABTest": true,
      "sdkVersionBegin": "3.0.0",
      "sdkVersionEnd": "15.255.255"
    }
  },
  "componentFramework": "glass-easel",
  "sitemapLocation": "sitemap.json",
  "lazyCodeLoading": "requiredComponents"
}

app.js代码如下：

复制代码 
var Bmob=require('utils/bmob.js')
Bmob.initialize("a57b05be4060c8ea7c8d18f76442fc1e","6209f008e733af8e0251fec19113db3d");
App({
  
})

2.首页

index.wxml代码如下：

复制代码 
<image class="toWrite" bindtap="toAddDiary" src="../img/头像.jpg"/>
<!-- 显示留言 -->
<view class="page">
  <scroll-view 
  lower-threshold="800" 
  bindscrolltolower="pullUpLoad" 
  upper-threshold="0" 
  scroll-y="true" 
  style="height:50px;">
    <view class="page_bd">
      <view class="weui-panel_hd">留言列表</view>
      <view>
        <block wx:if="{{diaryList.lenght>0}}">
          <navigator class="weui-media-box weui-media-box_text" wx:for="{{diaryList}}" wx:key="diaryItem" url="../detail/detail? objectId={{item.objectId}}&count={{item.count}}">
            <view class="content">留言内容:{{item.content}}</view>
            <view class="info">
              <view class="time">时间:{{item.updatedAt}}</view>
              <view class="count">浏览:{{item.count}}</view>
              <view class="operate">
                <icon type="cancel dels" size="16"></icon>
                <text class="del" catchtap="deleteDiary" data-id="{{item.objectId}}">删除</text>
                <icon type="success edits" size="16"></icon>
                <text catchtap="toModifiyDiary" data-id="{{item.objectId}}" data-content="{{item.content}}" data-title="{{item.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="addDiary" report-submit="true">
      <view class="weui-dialog_bd">
        <view class="weui-cells_title">标题</view>
        <view class="weui-cells weui-cells_after-title">
          <view class="weui-cell 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-cell_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 class="pic">
          <view class ="pictext"bindtap="uppic">添加图片</view>
          <block wx:if="{isTypeof(url)}">
            <image src="../img/头像.jpg"/>
          </block>
          <block wx:else>
            <image src="{{url}}"/>
          </block>
        </view>
      </view>
      <view class="weui-dialog_ft">
        <view class="weui-dialog_btn weui-dialog_btn_default" bindtap="noneWindows">取消</view>
        <button loading="{{loading}}" class="weui-dialog_btn weui-dialog_btn_primary" form-type="submit">提交</button>
      </view>
    </form>
  </view>
</view>
<!-- 修改留言 -->
<view class="js_dialog" id="androidDialog2" style="opacity: 1;" wx:if="{{modifyDiarys}}">
  <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="modifyDiary">
      <view class="weui-dialog_bd">
        <view class="weui-cells_title">标题</view>
        <input class="weui-input" name="title" value="{{nowTitle}}" placeholder="请输入标题"/>
        <view class="weui-cells_title">留言内容</view>
        <view class="weui-cells weui-cells_after-title">
          <view class="weui-cell">
            <view class="weui-cell_bd">
              <textarea class="weui-textarea" name="content" value="{{nowContent}}" 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" bindtap="noneWindows">取消</view>
        <button loading="{{loading}}" class="weui-dialog_btn weui-dialog_btn_primary" form-type="submit">提交</button>
      </view>
    </form>
  </view>
</view>

index.js代码如下：

复制代码 
//引入Bmob逻辑文件及初始化数据
var Bmob = require('../../utils/bmob.js');
var common = require('../../utils/common.js'); 
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) => { 
      that.setData({
        windowHeight:res.windowHeight, 
        windowWidth:res.windowWidth
      })
    }
  })
  /*
  *获取数据*/
  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);
      }
    });
  }
},
//添加数据
toAddDiary:function(){
  that.setData({
    writeDiary:true
  })
},
//添加图片
uppic:function(){
  var that = this;
  wx.chooseImage({
    count:1,//默认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());
          url = res.url();
          that.setData({
            url:ur1
          })
        },
        function(error){
          console.log(error);
          }
        )
      }
    }   
  })
},
//添加留言数据
addDiary:function(event){
  var title =event.detail.value.title;
  var content=event.detail.value.content;
  var formId =event.detail.formId;
  console.log("event".event)
  if(! title){
    common.showTip("标题不能为空","loading");
    elseif(! content)
    common.showTip("内容不能为空","loading");
  }else
    that.setData({
      loading:true
    })
  var currentUser=Bmob.User.current();
  var User =Bmob.Object.extend("User");var UserModel=newUser();
//增加留言
  var Diary =Bmob.Object.extend("test");//数据表 
  var diary =new Diary();
  diary.set("title",title);保存title字段内容
  diary.set("formId",formId);//保存 formId
  diary.set("content",content);//保存content字段内容
  diary.set("image",url)//保存图片地址
  diary.set("count",1)//保存浏览次数
  if(currentUser){
    UserModel.id =currentUser.id;
    diary.set("own",UserModel);
  }
  //添加数据,第一个入口参数是nu11
  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){
//The object was retrieved successfully.
            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,
    nowTitle:nowTile,
    nowContent:nowContent,
    nowId:nowId
  })
  modifyDiary,function(e){
    var t =this;
    modify(t,e)
    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.nowTitle;
      var thatContent= that.data.nowContent;
      if((modyTitle != thatTitle ||modyContent != thatContent)){ 
        if(modyTitle == "" ||lmodyContent == ""){
          common.showTip('标题或内容不能为空','1oading');
        }else{
          console.log(modyContent)
          var Diary = Bmob.Object.extend("test"); 
          var query = new Bmob.Query(Diary);
//这个id是要修改条目的id,你在生成这个存储并成功时可以获取到,请看前面的文档
          query.get(that.data.nowId,{
            success:function(result){
//回调中可以取得这个GameScore对象的一个实例,然后就可以修改它了
              result.set('title',modyTitle);
              result.set('content',modyContent);
              result.save();
              common.showTip('留言修改成功','success',function(){ 
                that.onShow(); 
                that.setData({
                  modifyDiarys:false
                })
              });
            },error:function(object,error){}
          });
         }
          elseif(modyTitle == "" ||lmodyContent == "");{
            common.showTip('标题或内容不能为空','1oading');
          }
      }else{
        that.setData({
          modifyDiarys:false
        })
        common.showTip('修改成功','loading');
      }
    }
  }
},
})

3.详情页

detail.wxml代码如下：

复制代码 
<view class="page">
  <view>
    <view>
      <view>留言主题:</view>
      <view>{{rows.title}}</view>
      <view>
        <view>留言内容:</view>
        <view>{{rows.content}}</view>
        <view class="pic">
          <image src="{{rows.image}}"/>
        </view>
        <view>浏览次数:{{rows.count}}</view>
        <view>创建时间:{{rows.createdAt}}</view>
      </view>
    </view>
  </view>
  <view class="footer">
    <text>Copyright © 2017-2019 www.smartbull.cn</text>
  </view>
</view>

detail.js代码如下：

复制代码 
varBmob =require('../../utils/bmob');
Page({
  data:{
    rows:{}//留言详情
  },
  onLoad:function(e){
    //页面初始化options为页面跳转所带来的参数
    console.log(e.objectId)
    var objectId=e.objectId;
    var newcount=e.count;
    var that =this;
    var Diary = Bmob.Object.extend("test");
    var query = new Bmob.Query(Diary);
    query.get(objectId,{
      success:function(result){
        console.log(result);
        that.setData({
          rows:result,
        })
        newcount =parseInt(newcount)+1//浏览次数加1
        result.set("count",newcount)//保存浏览次数
        result.save()
      },
      error:function(result,error){
        console.log("查询失败");
      }
    });
  }
})

运行效果

相关推荐
西岸行者11 天前
学习笔记：SKILLS 能帮助更好的vibe coding
笔记·学习
悠哉悠哉愿意11 天前
【单片机学习笔记】串口、超声波、NE555的同时使用
笔记·单片机·学习
别催小唐敲代码11 天前
嵌入式学习路线
学习
毛小茛11 天前
计算机系统概论——校验码
学习
babe小鑫11 天前
大专经济信息管理专业学习数据分析的必要性
学习·数据挖掘·数据分析
winfreedoms11 天前
ROS2知识大白话
笔记·学习·ros2
在这habit之下11 天前
Linux Virtual Server（LVS）学习总结
linux·学习·lvs
我想我不够好。11 天前
2026.2.25监控学习
学习
im_AMBER11 天前
Leetcode 127 删除有序数组中的重复项 | 删除有序数组中的重复项 II
数据结构·学习·算法·leetcode
CodeJourney_J11 天前
从“Hello World“ 开始 C++
c语言·c++·学习
热门推荐
01GitHub 镜像站点02OpenClaw 使用和管理 MCP 完全指南03OpenClaw 连接飞书完整指南：插件安装、配置与踩坑记录04Window 10部署openclaw报错node.exe : npm error code 12805本地部署 OpenClaw + DeepSeek-R1 完全指南06OpenClaw + 飞书（Feishu）环境搭建指南07Clawdbot部署教程：解决‘gateway token missing’授权问题的完整步骤08npm-error code 128问题解决方法09OpenClaw 飞书机器人不回复消息？3 小时踩坑总结10Claude Code + GLM4.7 避坑指南：解决 Unable to connect to Anthropic services