第八章 小程序后端开发总结

已于 2024-05-14 11:45:08 修改
阅读量588 收藏 3
点赞数 9
文章标签： 小程序
于 2024-05-08 20:23:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_74842191/article/details/138556312
版权

小程序后端开发

一、比目后端云简介

一个完整的小程序系统，不但需要前端的展现，而且需要后端服务器的支理，已提供供据服务、也就是说、开发一个真正究整的小程序应用，需要前后端的相互配合。

Bmob后端云专注于为移动应用提供一整套后最云服务，能帮助开发者党去几手所有服务器端的编码工作，大幅度降低开发成本和开发时间
Bmob 提供了小程序软件开发工具包(Satware Derdapeeka，sDK)，让用户振有强大的后端服务。嵌人 Bmob小程序SDK后，开发工程师可以更加专注于编写前端代码和优化良好的用户体验，而不必担心后端的基础设施
Bmob 提供了成熟的 WebSocket 信道服务，降低了开发者使用Wehsocke 通信的门槛。同时也满足了小程序需要 HTTPS 与服务端通信的需求。
Bmob还提供了短信验证功能，只需几行简单的代码，即可实现微信小程序的用户登录富媒体文件上传、发送短信通知和微信支付等功能
总之，Bmob 让微信小程序的开发更简单

注册Bmob账号

进人 Bmob 官方网站(bmob)后，单击右上角的“注册”按钮，在跳转页面(图8-2)填人姓名、邮箱，并设置密码，确认后到邮箱激活Bmab账户，即可拥有Bmob账号 

创建应用

进人后台，单击左边的“应用”图标，会出现已经创建的应用项目列表和“创建应用” 

就会生成yun这个包

配置小程序密钥

进入那个包，入后台，选择应用项目，单击“设置”一“应用配置”选项，将小程序中的AppID(小程序ID)和AppSecret(小程序密钥)填写到Bmob中。 

获取服务器域名及在小程序中配置

入后台，选择应用项目，单击“设置”一“应用配置”选项，在该界面中可以得到“微信小程序服务器域名配置”(在小程序配置中需要使用)。

下载sdk

https:/github.com/bmob/bmob-WeApp-sdk路径

把下载的bomb.js和underscore.js放在utils.js里面，如上图所示

二、数据的增、删、查、改

便于在Bmob中实现数据的增加、删除、修改、查询，我们在新建的应用中新增“test”表，并在表中添加id(编号)、ide(标题)、content(内容)、image(图像)字段

创建表和字段

在“test”表中添加id、title、content、、image列，Bmob提供Number、String、Boolean、Date、Fie、Geopoint、Array、Object 、Pointer 、Relation共10种字段类型 

选择你的项目yun,然后点击数据，在添加表，取一个名字，我的是yaya,然后再点确定

进入一个新页面，就可以创建列，行。。。。等等

我创建了一个名为s的列


再点更多，和清空表

添加一条记录

添加一条记录用来实现把从前端获取的数据添加到服务端数据表中，主要用Bmob 提供的SDK对象实现 

在index.js输入

var Bmob = require('../../utils/bmob.js');
Page ({
  data:{

  },
  add:function(){
    var Test = Bmob.Object.extend("test");//创建类
  var test = new Test();//创建对象
  test.set("title","WXML");//创建title字段内容
  test.set("content","Weixin Markup Language 微信标记语言");//添加内容字段
  //添加数据。第一个入口参数是null
  test.save(null,{
    success:function(result){
      //添加成功返回，objectID
      console.log("添加成功，objectId:"+result.id);

    },
    error:function(result,error){
      //添加失败
      console.log('添加失败');
    }
  })
  }
})

在index.wxml输入

<button type="primary" bindtap='add'>添加记录</button>

结果

如果是这样的就需要点击右上角的详情进入本地设置，进入到后面勾选就可以了就可以了

后面我就成功了，原因是我的bmob里面的表名和我代码的新建表名不一样

 所以，我建了两个表，在和代码一样的表，添加成功

获取一条记录

取一条记录是指从数据表中查询一条记录，主要根据objectld值来直接获取单条数据对象。

在index.js输入

const { Query } = require('../../utils/bmob.js');
var Bmob = require('../../utils/bmob.js');
Page ({
  data:{

  },
  puery:function(){
    var Test = Bmob.Object.extend("test");//创建类
  var test = new Bmob.Query(Test);//创建对象
Query.get("bf0557eac8",{
  succes:function(result){
    //the object was retrieved successfully.
    console.log("带记录标题为"+result.get("title"));
    console.log("带记录内容为"+result.get("content"));
  },
    error:function(result,error){
      //查询失败
      console.log('查询失败');
    }
  });
  },
})

在index.wxml输入

<button type="primary" bindtap='query'>获取记录</button>

结果

修改一条记录

如果要修改一条记录，则首先需要获取更新后的 Bmob.0bject 对象，将值修改后保存数据就可以了 

在index.js输入

var Bmob =require('../../utils/bmob.js');
Page({
data:{
},
modi:function(){
  var Test = Bmob.Object.extend("test"); 
  var query =new Bmob.Query(Test);
  //这个id是要修改条目的id,当该id生成并存储成功时可以获取到 
  query.get("d03ab8b058",{
    //注意这里是你建的表的名字
  success:function(result){
  //回调中可以取得这个diary对象的一个实例,然后就可以修改它了
  result.set('title',"WxSS");
  result.set('content',"WenXin Style Sheets"); 
  result.save();
  //The object was retrieved successfully.
  console.log("修改成功")
  console.log("该记录标题修改为"+result.get("title"))
  console.log("该记录内容修改为"+result.get("content"))
},
  error:function(object,error){ 
    console.log("修改失败")
  }
  });
}
}
)

在index.wxml输入

<button type="primary" bindtap='modi'>修改记录</button>

结果

 

上面就从wxml变成了wxss类型等等

删除一条记录

删除一条记录可以使用 Bmob.Object 的 destroy 方法。 

在index.js输入

var Bmob =require('../../utils/bmob.js');
Page({
data:{
},
del:function( ){
  var Test = Bmob.Object.extend("test"); 
  var query = new Bmob.Query(Test);
  query.get("f845c94f4a",{
    //注意
  success:function(object){
  //The object was retrieved successfully.
   object.destroy({
  success:function(deleteObject){
     console.log("删除记录成功");
    },
  error:function(error){
     console.log("删除记录失败");
  }
});
},
  error:function(object,error){
  console.log("修改失败")
  },
});
},
})

在index.wxml输入

<button type="primary" bindtap='del'>删除记录</button>

结果

查询所有数据

为了获取某个数据表中的所有数据，我们可以通过Bmob提供的Querny对象来实现(默认是10条记录).

在index.js输入

var Bmob =require('../../utils/bmob.js');
Page({
data:{
},
queryall:function(){
  var Test = Bmob.Object.extend("test");
  //test数据表
   var query = new Bmob.Query(Test);//查询所有数据 
  query.find({
  success:function(results){
  console.log("共查询到"+results.length+"条记录");//循环处理查询到的数据
  for(var i=0; i<results.length;i++){
     var object = results[i];
    //  console.log(Object.id+'-'+Object.get('title')+'-'+Object.get('content'));
  console.log(object.id +'-' + object.get('title') +'-'+object.get('content'));
  }
  },
  error:function(error){
  console.log("查询失败:"+error.code +""+error.message);
}
  }, 
  )}
})

在index.wxml输入

<button type="primary" bindtap='queryall'>获取所有数据记录</button>

结果

条件查询

Bmob 中提供的查询方法主要有:等于(equalTo)、不等于(notEqualTo)、小于(lessThan)、小于等于(lessThanOrEqualTo)、大于(greaterThan)、大于等于(greater[hanOrEqualTo)等

在index.js输入

var Bmob =require('../../utils/bmob.js');
Page({
data:{
},
//条件查询
wherequery:function(){
  var Test = Bmob.Object.extend("test"); var query =new Bmob.Query(Test);
  query.equalTo("title","wxml"); //查询 title等于“WXML”的记录//查询所有数据 
  query.find({
  success:function(results){
  console.log("共查询到"+results.length+"条记录");//循环处理查询到的数据
  for(var i=0; i < results.length;i ++){ 
    var object =results[i];
  console.log(object.id +'- '+ object.get('title'));
  }
},
  error:function(error){
  console.log("查询失败:"+error.code +"" + error.message);
  }
});
}
})

在index.wxml输入

<button type="primary" bindtap='wherequery'>条件查询</button>

结果

分页查询

如果在数据比较多的情况下，希望将查询出的符合要求的所有数据按照指定条数为一页来显示，这时可以使用limit 方法限制查询结果的数据条数来进行分页。默认情况下，limit的值为10，最大有效设置值为1000

query.limit(10);

同时，skip方法可以做到跳过查询的前多少条数据来实现分页查询的功能。skip默认值为10

query.skip(10);

三、上传图片

上传一张图片并显示

Bmob 提供了文件后端保存功能。利用这一功能，我们可以把本地文件上传到Bmob后台，并按上传日期为文件命名。

在index.js输入

var Bmob =require('../../utils/bmob.js');
Page({
data:{
},
//上传一张照片
upimage: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());
        var url=res.url();
        that.setData({
          url:url
        })
      },function(error){
        console.log(error);
      })
    }
  }
});
}
})

在index.wxml输入

<button type="primary" bindtap="upimage">上传一张照片</button>
<image src="{{url}}"></image>

结果

上传多张图片并显示

Bmob支持一次上传多张图片，并将图片保存到素材库中。

在index.js输入

const { File } = require('../../utils/bmob.js');
var Bmob =require('../../utils/bmob.js');
Page({
data:{
},
//上传多张照片
uppic:function(){
  var that = this;
  wx.chooseImage({
  count:9,//默认值为9
  sizeType:['compressed'],//可以指定为压缩图或原图，默认两者都有
  sourceType:['album','camera'],//相册还是相机，默认两者都有
  success:function(res){
    wx.showNavigationBarLoading()
    that.setData({
      loading:false
    })
    var urlArr=new Array();


    var tempFilePaths = res.tempFilePaths;
    console.log(tempFilePaths)
    var imgLength=tempFilePaths.length;
    if(imgLength>0){
      var newDate=new Date();
      var newDateStr=newDate.toLocaleDateString();//获取当前日期文件

      var j=0;
      for(var i=0;i<imgLength;i++){
        var tempFilePath=[tempFilePaths[i]];
        var extension =/\.([^.]*)$/.exec(tempFilePath[0]);//获取文件扩展名
      
      if(extension){
        extension=extension[1].toLowerCase();

      }
      var name=newDateStr+"."+extension;//上传图片别名
      var file=new Bmob.File(name,tempFilePath);
      file.save().then(function(res){
        wx.hideNavigationBarLoading()
        var url=res.url();
        console.log("第"+i+"张Url"+url);
        that.setData({
          url:url
        })
        urlArr.push({"url":url});
        that.setData({
          list:urlArr
        })
        console.log(list)
        j++;
        console.log(j.imgLength);
        if(imgLength==j){
        console.log(imgLength,urlArr);
        //如果担心就可以去掉这几行注释
        showPic(urlArr,that)//显示图片
      }
      },function(error){
        console.log(error);
      })
    }
  }
}
});
}
})

在index.wxml输入

<button type="primary" bindtap="uppic">上传多张照片</button>
<block wx:for="{{list}}" wx:key="this">
  <image src="{{url}}"></image>
</block>

结果

四 、简单留言板

需求分析

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

视图层设计

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

数据库设计

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

代码实现

应用配置

aap.js

var Bomb = require('utils/bmob.js')
Bomb.initialize("8fb9bebf2790e58070b9c700b0715965","5b9d3cba2b4695ac4040ba988146c463");
App({
  
})

app.json

{
  "pages": [
    "pages/de/de",
    "pages/detail/detail"
  ],
  "window": {
    "navigationBarTextStyle": "#fff",
    "navigationBarBackgroundColor": "#3891f8",
    "navigationBarTitleText": "小小留言板",
    "navigroundTextStyle":"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"
}

首页

de.wxml

//显示 留言
<image class="toWrite" bindtap="toAddDiary" src="/img/ss.jpg"/>
<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.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" catchtop="deleteDiary" data-id="{{item.objectId}}">删除</text>
  <icon type="success dels" size="16"></icon>
  <text catchtop="toModifyDiary" 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_bg">
    <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_bg">
        <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_bg">
        <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/sss.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" formType="submit">提交</button>
    </view>
  </form>
  </view>
</view>

//修改留言
<view class="js_dialog" id="androidDialog2" style="opacity: 1;" wx:if="{{modifyDiary}}">
  <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" report-submit="true">
  <view class="weui-dialog_bg">
    <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_bg">
        <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" formType="submit">提交</button>
    </view>
  </form>
  </view>
</view>

de。js

1

// 引入数据
var Bomb=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,
      windowWindth:0,
      limit:10,
      diaryList:[],
      modifyDiarys:false
    },

 2

//huoqushuju111
    onShow:function(){
      getList(this);
      success:(res)=>{
        that.setData({
          windowHeight:res.windowHeight,
          windowWindth:res.windowWindth
        })
      }
    }
  })
  // 获取数据 2222
  function getList(t,k){
    that=t;
    var Diary=Bomb.Object.extend("tes")//数据表
    var query=new Bomb.Query(Diary);
    var query1=new Bomb.Query(Diary);

    query.descending('createdAt');
    query.include("own")
    //查询所有数据
    query.limit(that.data.limit);

    var mainQuery=Bomb.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);
      },
      
    });
  }

3. 

//添加数据222222222
  toAddDiary:function(){
    that.setData({
      writeDiary:true
    })
  },
  //添加图片
  uppic:function(){
    var that=this;
    wx.chooseImage({
      count:1,//
      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 fomId=event.detail.fomId;
    console.log("event",event)
    if(! title){
      common.showTip("不能为空","loading");
    }
    if(! title){
      common.showTip("不能为空","loading");
    }
  }
  else{
    that.setData({
      loading:true
    })
    var currentUser=Bomb.User.current();

    var User=Bomb.Object.extend("_User");
    var UserModel=new User();
  }

  //增加留言3333333333333
  var Diary=Bomb.Object.extend("text");//数据表
  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);
  }
  //添加数据，第一个入口参数null
  diary.save(null,{
    success:function(result){
      //添加成功
      common.showTip('添加日记成功');
      that.setData({
        writeDiary:false,
        loading:false
      })
      var currentUser=Bomb.User.current();
      that.onShow();
    },
    error:function(result,error){
      //添加失败
      common.showTip('添加留言失败，请从新发布','loading');
    }
  });

4.

//删除留言44444444444
  deleteDiary:function(event){
    var that=this;
    var Object = event.target.dataset.id;
    wx.showModal({
      title: '操作提示',
      content: '确定要删除留言吗',
      success:function(res) {
        if (res.confirm) {
          //删除留言
          var Diary=Bomb.Object.extend("text");
          //创建查询对象
          var query = new Bomb.Query(Diary);
          query.get(object,{
            success:function(object){
              //the object was retrievend successfully.
              object.destroy({
                success:function(deleteObject){
                  console.log('删除留言成功');
                  getList(that)
                },
                error:function(object,error){
                  console.log("query object fail");

                }
              });
            }
          })
        }
      }
    })
  }

 5.

//编辑留言555555555
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
  })
}
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 =e.detail.value.nowTitle;
  var thatContent =e.detail.value.nowcontent;

  if((modyTitle!=thatTitle||modyContent!=thatContent)){
    if(modyTitle==""||modyContent==""){
      common.showTip('标题或内容不能为空','loading');

    }
    else{
      console.log(modyContent)
      var Diary=Bomb.Object.extend("text");
      var query =new Bomb.Query(Diary);
      //这个ID是修改条目的ID
      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');

  }
  that.setData({
    modifyDiarys:false
  })
  common.showTip('修改成功','loading');
}
详情页

datail.js

var Bmob=require('../../utils/bmob.js');
Page({
  data:{
    rows:{}//留言详情
  },
onLoad:function(e){
  //页面初始花
  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,
      })
      new count=parseInt(new count)+1//浏览次数
      result.set("count",new count)//保存次数
      result.save()
    },
    error:function(result,error){
      console.log("查询失败");
    }
  })
}
})

 datail.wxml

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

ym.wxml

<image class="toWrite " bindtap="toAddDiary" src="../image/ss.jpg" style="width: 300px;" />
<!-- 显示留言 -->
<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">
      <button style="width: 120px;height: 60px; border: 1px saddlebrown;">
        <view class="weui-panel__hd" style="text-align: center;">留言列表</view>
      </button>
      <view>
        <block wx:if="{{diaryList.length >0}}">
          <navigator class="weui-media-box weui-media-box_text" wx:for="{{diaryList}}" wx:key="diaryItem" url="/pages/index /detail? ob-jectId={{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>
<!-- 添加留言 -->
<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" style="margin-left: 150px;">添加留言</strong>
    </view>
    <form bindsubmit="addDiary" report-submit="true">
      <view class="weui-dialog__bd">
        <view class="weui-cells__title" style="text-align: center;">标题</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="请输入标题" style="text-align: center;" />
            </view>
          </view>
        </view>
        <view class="weui-cel1s title" style="text-align: center;">留言内容</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="margin-left: 130px;" />
              <view class="weui-textarea-counter" style="text-align: center;">0/200</view>
            </view>
          </view>
        </view>
        <view class="pic">
          <view class="pictext" bindtap="uppic" style="text-align: center;">添加图片</view>
          <block wx:if="{isTypeof(url)})">
            <image src="../image/ss.jpg" style="width: 400px;" />
          </block>
          <block wx:else>
            <image src="{{url}}" />
          </block>
        </view>
      </view>
      <view class="weui-dialog ft">
        <button loading="{{loading}}" class="weui-dialog__btn weui-diaLog__btn__primary" formType="info">取消</button>
        <button loading="{{loading}}" class="weui-dialog__btn weui-diaLog__btn__primary" formType="info">提交</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" style="text-align: center;">修改留言</strong>
    </view>
    <form bindsubmit="modifyDiary">
      <view class="weui-dialog bd">
        <view class="weui-cells title" style="text-align: center;">标题</view>
        <input class="weui =input" name="title" value="inowTitle" placeholder="请输入标题" style="text-align: center;" />
        <view class="weui-cells title" style="text-align: left;">留言内容</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="margin-left: 150px;" />
              <view class="weui-textarea-counter" style="text-align: center;" style="text-align: center;">0/200 </view>
            </view>
          </view>
        </view>
      </view>
      <view class="weui-dialog ft">
        <view class="weui-dialog btn weui -dialog btn_default" bindtag="noneWindows">取消</view>
        <button loading="{{loading}}" class="weui-dialog btn weui-diaLog btn primary" formType="submit">提交</button>
      </view>
    </form>
  </view>
</view>

ym.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");//数据表 
  var query = new Bmob.Query(Diary); 
  var queryl = new Bmob.Query(Diary);
  
  query. descending('createdAt'); query.include( "own")//查询所有数据
  query.limit(that.data.limit);
  
  var mainQuery = Bmob.Query.or(query);
  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=new User();
//增加留言
var Diary =Bmob.Object.extend("happy");//数据表 
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("happy");
//创建查询对象,入口参数是对象类的实例
 
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("happy"); 
   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');
    }
  }
  }
},
 
})

ym.wxss

 
page {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.scrollarea {
  flex: 1;
  overflow-y: hidden;
}
 
.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #aaa;
  width: 80%;
}
 
.userinfo-avatar {
  overflow: hidden;
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}
 
.usermotto {
  margin-top: 200px;
}
/* .toWrite{
  position: absolute;
  left: 30px;
  width: 300px;
  height: 300px;
} */
 
.avatar-wrapper {
  padding: 0;
  width: 56px !important;
  border-radius: 8px;
  margin-top: 40px;
  margin-bottom: 40px;
}
/* .weui-panel__hd{
  margin-top: 330px;
  margin-left: 130px;
} */
 
.avatar {
  display: block;
  width: 56px;
  height: 56px;
}
 
.nickname-wrapper {
  display: flex;
  width: 100%;
  padding: 16px;
  box-sizing: border-box;
  border-top: .5px solid rgba(0, 0, 0, 0.1);
  border-bottom: .5px solid rgba(0, 0, 0, 0.1);
  color: black;
}
 
.nickname-label {
  width: 105px;
}
 
.nickname-input {
  flex: 1;
}
详情页

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

detail.wxml

<view class= "page">
<view>
<view>
<view style="width: 200px;">留言主题:</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.wxss

page {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.scrollarea {
  flex: 1;
  overflow-y: hidden;
}
.log-item {
  margin-top: 20rpx;
  text-align: center;
}
.log-item:last-child {
  padding-bottom: env(safe-area-inset-bottom);
}
配置

app.js

// app.js
App({
  onLaunch() {
    // 展示本地存储能力
    const logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)

    // 登录
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
      }
    })
  },
  globalData: {
    userInfo: null
  }
})
var Bomb = require('utils/bmob.js')
Bomb.initialize("8fb9bebf2790e58070b9c700b0715965","5b9d3cba2b4695ac4040ba988146c463");
App({
  
})

app.json

{
  "pages": ["pages/Ym/ym",
    "pages/detail/detail",
    
    "pages/delete/delete"
    
  ],
  "window": {
    "backgroundTextStyle":"light",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "小小留言板",
    "navigationBarBackgroundColor": "#3891f8"
  },
  "style": "v2",
  "componentFramework": "glass-easel",
  "sitemapLocation": "sitemap.json",
  "lazyCodeLoading": "requiredComponents"
}
结果 

结果

评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值