第八章小程序后端开发（8.4）

2201_75484561

已于 2024-05-14 11:13:18 修改

阅读量453

点赞数 7

文章标签：小程序 oracle 数据库

于 2024-05-14 10:42:29 首次发布

本文链接：https://blog.csdn.net/2201_75484561/article/details/138824454

版权

8.4 简单留言板

本节以简单留言板为例，介绍小程序项目的开发过程及代码实现。

8.4.1 需求分析

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

8.4.2 视图层设计

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

8.4.3 数据库设计

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

8.4.4 代码实现

1.应用配置

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

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

首页实现留言内容的显示、添加、修改、获取、添加。

home.wxml示例代码如下

<!--pages/home/home.wxml-->
<!-- 显示留言 -->
<view class = "page">
<scroll-view lower-threshold="800" bindscrolltolower="pullUp-Load"upper-threshold ="0 "scroll-y="true" style = "height:{{win-dowHeight}}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.title}}</view>
<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 ="iitem.objectId}}">删除</text>
<icon type="success edits"size="16"></icon>
<text catchtap ="toModifyDiary" data-id ="{{item.objectId}}"data-content="{{item.content}}"data-title="{{item.title}}">编辑</text>
</view>

</view>
</navigator>
</block>
</view>
</view>
</scroll-view>
</view>
<image class="toWrite" bindtap="toAddDiary" src="/image/add.png"/>
<!-- 添加留言 -->
<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="../image/plus.png"/>
</block>
<block wx:else>
<image src="{{url}}"/>
</block>
</view>
</view>
<view class="weui-dialog_ft">
<button class="weui-dialog_btn weui-dialog_default" bind:tap="noneWindows" form-type="submit">取消</button >
<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="counter" 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">
<button class="weui-dialog_btn weui_dialog_btn_default" bindtap="noneWindows">取消</button>
<button loading="{{loading}}" class="weui-dialog_btn weui-dialog_btn_primary" form-type="submit">提交</button>
</view>
</form>
</view>
</view>

home.wxss示例代码如下

/* pages/home/home.wxss */
.page {  
    display: flex; /* 使用Flex布局 */  
    justify-content: flex-end; /* 子元素沿水平方向居右 */  
    align-items: center; /* 子元素在垂直方向上居中对齐*/  
   
  }  
    
  /* 这是图标的样式 */  
  .toWrite {  
    width: 60px; /* 示例宽度 */  
    height: 60px; /* 示例高度 */  
    float: right;
    margin-right: 10px; /* 示例右边距 */  
  }
  .title{
    border: 1px solid #000;
    width: 100%;
    height: 30px;
    line-height: 30px;
  }
  .content{
      border: 1px solid #000;
      width: 100%;
      height: 200px;
  }
  .operate{
      float: right;
      margin: 10px;
  }
  .js-dialog{
      margin-top: 60px;
  }
  
.weui-dialog_ft {  
    display: flex;  
    justify-content: space-between; /* 使子元素在主轴水平方向上平均分布 */  
    align-items: center; /* 垂直居中子元素 */    
  }  
    
  .weui-dialog_btn {  
    flex: 1; /* 使两个按钮等宽 */  
  }  
    
  .weui-dialog_ft .weui-dialog_btn:not(:last-child) {  
    margin-right: 10px;
  }  
    

  .weui-dialog_ft .weui-dialog_btn_primary[loading="true"] {  
     
    pointer-events: none; /* 阻止点击 */  
    opacity: 0.7; /* 降低透明度表示正在加载 */  
   
  }

home.js示例代码如下

// pages/home/home.js
//引入Bmob逻辑文件初始化数据
const { User } = require('../../utils/bmob.js');
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("text") 
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: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.formId;
    console.log("event",event)
    if(! title){
        common.showTip("标题不能为空","loading");
    }
    else if(! content){
        common.showTip("内容不能为空","loading");
    }
    else{
        that.setData({
            loading:true
        })
        var currentUser=Bmob.Object.extend("_Usre");
        var UserModel = new User();

        //增加留言
         var Diary =Bmob.Object.extend("text");
         var diary = new Diary();
         diary.set("title",title);//保存 title 字段内容
         diary.set("formId",formId);//保存 formId
         diary.set("content",content);//保存content 字段内容
         diary.set("iamge",url)//保存图片地址
         diary.set("count",1)//保存浏览次数
         if(currentUser){
             UserModel.id =currentUser.id;
             diary.set("own",UserModel);
         }
         //添加数据，第一个入口参数null
         diary.save(null,{
             success:function (result) {
               //添加成功,返回成功之后的 objectIa(注意:返回的属性名字是 id,不是 objectId),你还可以在 Bmob 的 Web 管理后台看到对应的数据

               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: (res) => {
        if (res.confirm) {
          var Diary = Bmob.Object.extend("text");
          //创建查询对象，入口参数是对象类的实列
          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,
        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 == ""|| modyContent == ""){
            common.showTip('标题或内容不能为空','loading');
        }
        else{
            console.log(modyContent)
            var Diary = Bmob.Object.extend( "text" );
            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){
                }
            });
        }
    }
    else if(modyTitle =="" || modyContent==""){
        common.showTip('标题或内容不能为空','1oading');
    }
    else{
        that.setData({
            modifyDiarys:false
        })
    common.showTip('修改成功','loading');
}
}
}
})

运行效果图如下

显示留言

添加留言

修改留言

删除留言

留言详情detail.wxml代码示例如下：

<!--pages/detail/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-2019www.smartbull.cn</text>
</view>
</view>

detail代码示例如下

// pages/detail/detail.js
var Bmob = require('../../utils/bmob.js');
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("text");

    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("查询失败");
}
});
}
})

运行效果图如下