• 第八章作业

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

    创建两个文件夹index、new。

    1.应用配置

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

    1. {
    2.   "pages": [
    3.     "pages/index/index",
    4.     "pages/new/new"
    5.   ],
    6.   "window":{
    7.   "backgroundTextStyle":"light",
    8.   "navigationBarBackgroundColor":"#3891f8",
    9.   "navigationBarTitleText":"小小留言板",
    10.   "navigationBarTextStyle": "black"
    11.   }
    12. }

    index文件夹

    wxml：

    1. <image class ="toWrite " bindtap ="toAddDiary"src ="../../images/SWK.png" style="width: 400px;"/>
    2. <!-- 显示留言 -->
    3. <view class = "page">
    4. <scroll-view lower-threshold="800"
    5. bindscrolltolower="pullUp-Load"upper-threshold ="0 "scroll-y="true"
    6. style = "height: {{win-dowHeight}}px;">
    7. <view class ="page__bd">
    8. <button style="width: 100px;height: 50px; border: 1px saddlebrown;"><view class = "weui-panel__hd" style="text-align: center;">留言列表</view>
    9. </button>
    10. <view>
    11. <block wx:if="{{diaryList.length >0}}">
    12. <navigator class="weui-media-box weui-media-box_text"
    13. wx:for="{{diaryList}}"
    14. wx:key = "diaryItem"url ="/pages/index /detail? ob-jectId={{item.objectId}}&count={{item.count}}" >
    15. <view class="title">
    16. 主题:{{item.title}}</view>
    17. <view class ="content">留言内容:{{item.content}}</view><view class= "info">
    18. <view class="time">时间:{{item.updatedAt}}</view ><view class="count">浏览:{{item.count}}</view>
    19. <view class="operate">
    20. <icon type ="cancel dels"size ="16" > </icon>
    21. <text class ="del"catchtap ="deleteDiary"data-id ="iitem.objectId}}">删除</text>
    22. <icon type="success edits"size="16"></icon>
    23. <text catchtap ="toModifyDiary" data-id ="{{item.objectId}}"data-content="{{item.content}}"data-title="{{item.title}}">编辑</text>
    24. </view>
    25. </view>
    26. </navigator>
    27. </block>
    28. </view>
    29. </view>
    30. </scroll-view>
    31. </view>
    32. <!-- 添加留言 -->
    33. <view class ="js dialog" id="androidDialog1" style="opacity:1;"wx:if="{{writeDiary}}">
    34. <view class="weui-mask"></view>
    35. <view class ="weui-dialog weui-skin_android">
    36. <view class="weui-dialog__hd">
    37. <strong class="weui-dialog__title" style="margin-left: 150px;">添加留言</strong>
    38. </view>
    39. <form bindsubmit="addDiary" report-submit="true">
    40. <view class="weui-dialog__bd">
    41. <view class="weui-cells__title" style="text-align: center;">标题</view>
    42. <view class="weui-cells weui-cells after-title" >
    43. <view class="weui-cell weui-cell input">
    44. <view class="weui-cell__bd">
    45. <input class="weui-input"name="title" placeholder="请输入标题" style="text-align: center;"/>
    46. </view>
    47. </view>
    48. </view>
    49. <view class ="weui-cel1s title" style="text-align: center;">留言内容</view>
    50. <view class="weui-cells weui-cells after-title">
    51. <view class="weui-cell">
    52. <view class="weui-cell bd">
    53. <textarea  class ="weui-textarea"name ="content"placeholder ="请输入留言内容" style="margin-left: 130px;" />
    54. <view class="weui-textarea-counter" style="text-align: center;">0/200</view>
    55. </view>
    56. </view>
    57. </view>
    58. <view class="pic">
    59. <view class ="pictext"bindtap="uppic" style="text-align: center;">添加图片</view><block wx:if="{isTypeof(url)})">
    60. <image src="../../images/SWK.png" style="width: 400px;"/>
    61. </block>
    62. <block wx:else>
    63. <image src="{{url}}"/>
    64. </block>
    65. </view>
    66. </view >
    67. <view class="weui-dialog ft">
    68.   <button loading="{{loading}}"
    69. class="weui-dialog__btn weui-diaLog__btn__primary"formType="info">取消</button>
    70. <button loading="{{loading}}"
    71. class="weui-dialog__btn weui-diaLog__btn__primary"formType="info">提交</button>
    72. </view>
    73. </form>
    74. </view>
    75. </view>
    76. <!-- 修改留言 -->
    77. <view class ="js_dialog"id="androidDialog2"style ="opacity: 1;"
    78. wx:if ="{{modifyDiarys}}">
    79. <view class="weui-mask"></view>
    80. <view class="weui-dialog weui-skin android">
    81. <view class="weui-dialog hd">
    82. <strong class="weui-dialog title" style="text-align: center;">修改留言</strong>
    83. </view >
    84. <form bindsubmit="modifyDiary">
    85. <view class="weui-dialog bd">
    86. <view class="weui-cells title" style="text-align: center;">标题</view>
    87. <input class ="weui =input"name ="title" value ="inowTitle"placeholder="请输入标题" style="text-align: center;"/>
    88. <view class="weui-cells title" style="text-align: center;">留言内容</view>
    89. <view class="weui-cells weui-cells after-title">
    90. <view class="weui-cell">
    91. <view class="weui-cell bd">
    92. <textarea class ="weui-textarea"name ="content"value ="{{nowContent}}"placeholder="请输入留言内容"style="margin-left: 150px;" />
    93. <view class="weui-textarea-counter" style="text-align: center;" style="text-align: center;">0/200 </view>
    94. </view>
    95. </view>
    96. </view >
    97. </view>
    98. <view class="weui-dialog ft">
    99. <view class="weui-dialog btn weui -dialog btn_default" bindtag="noneWindows">取消</view>
    100. <button loading ="{{loading}}" class ="weui-dialog btn weui-diaLog btn primary"
    101. formType="submit">提交</button>
    102. </view>
    103. </form>
    104. </view>
    105. </view>
    js :

    1. //引入Bmob逻辑文件及初始化数据
    2. var Bmob = require('../../utils/bmob');
    3. var common = require('../../utils/underscore'); 
    4. var app = getApp(); 
    5. var that; 
    6. var url = ""
    7.  Page({
    8. data:{
    9. writeDiary:false,//写留言 
    10. loading:false,
    11. windowHeight:0,//定义窗口高度 
    12. windowWidth:0,//定义窗口宽度
    13. limit:10,	//定义数据提取条数	
    14. diaryList:[],//定义数据列表 
    15. modifyDiarys:false
    16. },
    17. //获取并显示留言数据
    18. onShow:function(){
    19.   getList(this);
    20.   wx.getSystemInfo({ success:(res) => { that.setData({
    21.   windowHeight:res.windowHeight, windowWidth:res.windowWidth
    22.   })
    23. }
    24.   })
    25.   /*
    26.   *获取数据*/
    27.   function getList(t,k){ 
    28.     that =t;
    29.   var Diary = Bmob.Object.extend("happy");//数据表 happy
    30.   var query = new Bmob.Query(Diary); 
    31.   var queryl = new Bmob.Query(Diary);
    32.   
    33.   query. descending('createdAt'); query.include( "own")//查询所有数据
    34.   query.limit(that.data.limit);
    35.   
    36.   var mainQuery = Bmob.Query.or(query);
    37.   mainQuery.find({
    38.   success:function(results){//循环处理查询到的数据
    39.   console.log(results); 
    40.   that.setData({
    41.   diaryList:results
    42. })
    43. },
    44.   error:function(error){
    45.   console.log("查询失败:"+error.code +"" + error.message);
    46. }
    47.   });
    48. }
    49. //添加数据
    50.  
    51. },
    52. toAddDiary:function() {
    53.   that.setData({
    54.   writeDiary:true
    55.   })
    56. },
    57.   //添加图片
    58.   uppic:function(){
    59.   var that = this;
    60.   wx.chooseImage({
    61.   count:1,//默认9
    62.   sizeType:['compressed'],//可以指定是原图还是压缩图,默认二者都有
    63.   sourceType:['album','camera'],//可以指定来源是相册还是相机,默认二者都有
    64.   success:function(res){
    65.   var tempFilePaths=res.tempFilePaths;
    66.   if(tempFilePaths.length >0){
    67.   var newDate =new Date();
    68.   var newDateStr=newDate.toLocaleDateString();//获取当前日期做文件主
    69.   var tempFilePath=[tempFilePaths[0]];
    70.   var extension=/\([^.]*)$/.exec(tempFilePath[0]);//获取文件扩展名
    71.   if(extension){
    72.   extension =extension[1].toLowerCase();
    73.   }
    74.   var name =newDateStr+"."+extension;//上传的图片的别名
    75.   var file = new Bmob.File(name,tempFilePaths);
    76.   file.save().then(function(res){
    77.     console.log(res.url());
    78.   url = res.url();
    79.   that.setData({
    80.     url:ur1
    81.   })
    82.    },
    83.    function(error){
    84.   console.log(error);
    85.    }
    86.   )
    87. }
    88. }
    89.   })
    90. },
    91.   //添加留言数据
    92.   addDiary:function(event){
    93.   var title =event.detail.value.title;
    94.   var content=event.detail.value.content;
    95.   var formId =event.detail.formId;
    96.   console.log("event".event)
    97. if(! title){
    98. common.showTip("标题不能为空","loading");
    99. elseif(! content)
    100. common.showTip("内容不能为空","loading");
    101. }
    102. else
    103. that.setData({
    104. loading:true
    105. })
    106. var currentUser=Bmob.User.current();
    107. var User =Bmob.Object.extend("User");var UserModel=new User();
    108. //增加留言
    109. var Diary =Bmob.Object.extend("happy");//数据表 
    110. var diary =new Diary();
    111. diary.set("title",title);//保存title字段内容
    112. diary.set("formId",formId);//保存 formId
    113. diary.set("content",content);//保存content字段内容
    114. diary.set("image",url)//保存图片地址
    115. diary.set("count",1)//保存浏览次数
    116. if(currentUser){
    117.  
    118. UserModel.id =currentUser.id;
    119. diary.set("own",UserModel);
    120. }
    121. //添加数据,第一个入口参数是nu11
    122. diary.save(null,{
    123. success:function(result){
    124.   common.showTip('添加日记成功');
    125.   that.setData({
    126.     writeDiary:false,
    127.     loading:false
    128.   })
    129.     var currentUser =Bmob.User.current();
    130.     that.onShow();
    131.   },
    132.     error:function(result,error){//添加失败
    133.     common.showTip('添加留言失败,请重新发布','loading');
    134.     }
    135. });
    136. },
    137.  
    138.     //删除留言
    139. deleteDiary:function(event){
    140. var that =this;
    141. var objectId=event.target.dataset.id;
    142. wx.showModal({
    143. title:'操作提示',
    144. content:'确定要删除要留言?',
    145. success:function(res){
    146. if(res.confirm){
    147. //删除留言
    148. var Diary = Bmob.Object.extend("happy");
    149. //创建查询对象,入口参数是对象类的实例
    150.  
    151. var query =new Bmob.Query(Diary);
    152. query.get(objectId,{
    153.   success:function(object){
    154. //The object was retrieved successfully.
    155.  
    156. object.destroy({
    157. success:function(deleteObject){
    158. console.log('删除留言成功');
    159. getList(that)
    160. },
    161. error:function(object,error){
    162.   console.log('删除留言失败');
    163. }
    164. });
    165. },
    166. error,function(object,error){
    167. console.log("query object fail");
    168. }
    169. });
    170. }
    171. }
    172. })
    173. },
    174. toModifyDiary:function(event){
    175.   var nowTile =event.target.dataset.title;
    176.   var nowContent =event.target.dataset.content;
    177.   var nowId =event.target.dataset.id;
    178. that.setData({
    179. modifyDiarys :true,
    180. nowTitle:nowTile,
    181. nowContent:nowContent,
    182. nowId:nowId
    183. })
    184. modifyDiary,function(e){
    185.   var t =this;
    186.   modify(t,e)
    187.   function modify(t,e){
    188.     var that = t;//修改日记
    189.    var modyTitle = e.detail.value.title;
    190.    var modyContent = e.detail.value.content; 
    191.    var objectId =e.detail.value.content; 
    192.    var thatTitle = that.data.nowTitle;
    193.    var thatContent= that.data.nowContent;
    194.    if((modyTitle != thatTitle ||modyContent != thatContent))
    195.    { if(modyTitle == "" ||lmodyContent == ""){
    196.    common.showTip('标题或内容不能为空','1oading');}
    197.    else {
    198.    console.log(modyContent)
    199.    var Diary = Bmob.Object.extend("happy"); 
    200.    var query = new Bmob.Query(Diary);
    201.    //这个id是要修改条目的id,你在生成这个存储并成功时可以获取到,请看前面的文档
    202.    query.get(that.data.nowId,{
    203.    success:function(result){
    204.    
    205.    //回调中可以取得这个GameScore对象的一个实例,然后就可以修改它了
    206.    result.set('title',modyTitle);
    207.    result.set('content',modyContent);
    208.     result.save();
    209.    common.showTip('留言修改成功','success',function(){ that.onShow(); that.setData({
    210.    modifyDiarys:false
    211.    })
    212.   });
    213.   },
    214.    error:function(object,error){
    215.   }
    216.   });
    217.    }
    218.    elseif(modyTitle == "" ||lmodyContent == "");{
    219.     common.showTip('标题或内容不能为空','1oading');
    220.     }
    221.   }
    222.   
    223.     else {
    224.     that.setData({
    225.     modifyDiarys:false
    226.     })
    227.     common.showTip('修改成功','loading');
    228.     }
    229.   }
    230.   }
    231. },
    232.  
    233. })

    wxss:

    1.  
    2. page {
    3.   height: 100vh;
    4.   display: flex;
    5.   flex-direction: column;
    6. }
    7. .scrollarea {
    8.   flex: 1;
    9.   overflow-y: hidden;
    10. }
    11.  
    12. .userinfo {
    13.   display: flex;
    14.   flex-direction: column;
    15.   align-items: center;
    16.   color: #aaa;
    17.   width: 80%;
    18. }
    19.  
    20. .userinfo-avatar {
    21.   overflow: hidden;
    22.   width: 128rpx;
    23.   height: 128rpx;
    24.   margin: 20rpx;
    25.   border-radius: 50%;
    26. }
    27.  
    28. .usermotto {
    29.   margin-top: 200px;
    30. }
    31. /* .toWrite{
    32.   position: absolute;
    33.   left: 30px;
    34.   width: 300px;
    35.   height: 300px;
    36. } */
    37.  
    38. .avatar-wrapper {
    39.   padding: 0;
    40.   width: 56px !important;
    41.   border-radius: 8px;
    42.   margin-top: 40px;
    43.   margin-bottom: 40px;
    44. }
    45. /* .weui-panel__hd{
    46.   margin-top: 330px;
    47.   margin-left: 130px;
    48. } */
    49.  
    50. .avatar {
    51.   display: block;
    52.   width: 56px;
    53.   height: 56px;
    54. }
    55.  
    56. .nickname-wrapper {
    57.   display: flex;
    58.   width: 100%;
    59.   padding: 16px;
    60.   box-sizing: border-box;
    61.   border-top: .5px solid rgba(0, 0, 0, 0.1);
    62.   border-bottom: .5px solid rgba(0, 0, 0, 0.1);
    63.   color: black;
    64. }
    65.  
    66. .nickname-label {
    67.   width: 105px;
    68. }
    69.  
    70. .nickname-input {
    71.   flex: 1;
    72. }

    new文件夹

    js:

    1. var Bmob = require('../../utils/bmob');
    2.  Page({ data:{
    3.   rows:{} //留言详情
    4. },
    5.   onLoad:function(e){
    6.   //页面初始化options为页面跳转所带来的参数
    7.   console.log(e.objectId) 
    8.   var objectid = e.objectid; 
    9.   var newcount =e.count; 
    10.   var that = this;
    11.   
    12.   var Diary = Bmob.Object.extend("test"); 
    13.   var query = new Bmob.Query(Diary);
    14.   
    15.   query.get(objectId,{
    16.   success:function(result) {
    17.   console.log(result);
    18.   
    19.   that.setData({ rows:result,})
    20.   
    21.   newcount = parseInt(newcount)+1//浏览次数加1 
    22.   result.set("count",newcount)//保存浏览次数 result.save()
    23.   },
    24.   error:function(result,error){ console.log("查询失败");
    25.   }
    26.   });
    27. }
    28.  })

    wxml:

    1. <view class= "page">
    2. <view>
    3. <view>
    4. <view>留言主题:</view>
    5. <view>{{rows.title}}</view><view>
    6. <view>留言内容:</view>
    7. <view>{{rows.content}}</view>
    8. <view class = "pic">
    9. <image  src="{{rows.image}}"/></view><view>
    10. 浏览次数:{{rows.count}}</view >
    11. <view>创建时间:{{rows.createdAt}} </view>
    12. </view></view></view>
    13. <view class="footer">
    14. <text> Copyright©2017-2019www.smartbull.cn</text></view></view>

    wxss:

    1. page {
    2.   height: 100vh;
    3.   display: flex;
    4.   flex-direction: column;
    5. }
    6. .scrollarea {
    7.   flex: 1;
    8.   overflow-y: hidden;
    9. }
    10. .log-item {
    11.   margin-top: 20rpx;
    12.   text-align: center;
    13. }
    14. .log-item:last-child {
    15.   padding-bottom: env(safe-area-inset-bottom);
    16. }

  • 相关阅读:
    Unity 工具 之 Azure 微软 【GPT4o】HttpClient 异步流式请求的简单封装
    数据结构 - 二叉树
    C++心决之类和对象详解(中篇)(封装入门二阶)
    Linux安装Keepalived
    DirectX11 With Windows SDK--37 延迟渲染：光源剔除
    C++入门教程（十、联合体）
    网络编程TCP/UDP通信
    ahocorasick的报错
    互联网大厂知识点整理
    什么是Vue的Vetur插件？它有哪些功能
  • 原文地址：https://blog.csdn.net/2301_78541465/article/details/138837109