文章目录

一，搜索功能
- 1-1，需求
- 1-2，实现原理
- 1-3，模糊搜索的代码实现
- - 1-3-1，模糊搜索单个字段
  - 1-3-2，模糊搜索多个字段（满足一个即可）
  - 1-3-3，模糊搜索多个字段（要同时满足）
- 1-4，获取用户输入的搜索词显示搜索列表
二，云开发实现登陆注册功能
- 2-1，注册页
- 2-2，登陆页
- 2-3，登陆成功跳转到首页
- 2-4，保存登陆状态
三，云开发实现点赞收藏评论功能
- 3-1，常用图标获取网站
- 3-2，收藏
- 3-3，同步数据库
四，评论功能的简单实现
五，CMS网页版管理后台
- 5-1，开通cms的准备工作
- 5-2，注意事项
- 5-3，登录Cms可视化管理后台
- 5-4，在cms里创建后台项目
- 5-5，内容模型
- 5-6，数据类型
- 5-7，数据表(集合)管理
- 5-8，综合案例

一，搜索功能

1-1，需求

我们想实现如下搜索需求

1，搜索标题(title)包含‘十一’的数据
2，搜索标题(title)或者描述(desc)包含‘十一’的数据
3，搜索标题(title)描述(desc)都包含‘十一’的数据
我们知道数据库查询的时候有个where语句，但是where语句是查询某个字段全部包含你输入的内容时才可以，所以单纯用where语句来做搜索的话，结果太单一。

1-2，实现原理

我们做模糊搜索的时候，其实就是查询某个字段里是否包含我们的搜索词。而模糊搜索需要借助RegExp，来看看RegExp是什么。
在这里插入图片描述

官方文档： https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-sdk-api/database/Database.RegExp.html

再来看看官方示例

// 原生 JavaScript 对象
db.collection('todos').where({
  description: /miniprogram/i
})

// 数据库正则对象
db.collection('todos').where({
  description: db.RegExp({
    regexp: 'miniprogram',
    options: 'i',
  })
})

// 用 new 构造也是可以的
db.collection('todos').where({
  description: new db.RegExp({
    regexp: 'miniprogram',
    options: 'i',
  })
})

可能看官方示例会有点糊涂，结合具体代码来看。

1-3，模糊搜索的代码实现

1-3-1，模糊搜索单个字段

需求：搜索标题(title)包含‘十一’的数据
代码如下

let db= wx.cloud.database()
    db.collection('news')
    .where({
      title:db.RegExp({
        regexp:'十一',
        options:'i'
      })
    })
    .get()
    .then(res=>{
      console.log('成功',res);
    })
    .catch(err=>{
      console.log('失败',err);
    })

1-3-2，模糊搜索多个字段（满足一个即可）

需求：搜索标题(title)或者描述(desc)包含‘十一’的数据
由于我们要查询多个字段，所以我们这里用到了command高级操作符里的or

代码如下：

let db= wx.cloud.database()
    let _ =db.command
    db.collection('news')
    .where(_.or([
      {
        title:db.RegExp({
          regexp:'十一',
          options:'i'
        })
      },
      {
        desc:db.RegExp({
          regexp:'十一',
          options:'i'
        })
      }
    ]))
    .get()
    .then(res=>{
      console.log('成功',res);
    })
    .catch(err=>{
      console.log('失败',err);
    })

1-3-3，模糊搜索多个字段（要同时满足）

需求：搜索标题(title)描述(desc)都包含‘十一’的数据
由于我们要查询多个字段，所以我们这里用到了command高级操作符里的and

在这里插入图片描述

代码如下：

 let db= wx.cloud.database()
    let _ =db.command
    db.collection('news')
    .where(_.and([
      {
        title:db.RegExp({
          regexp:'十一',
          options:'i'
        })
      },
      {
        desc:db.RegExp({
          regexp:'十一',
          options:'i'
        })
      }
    ]))
    .get()
    .then(res=>{
      console.log('成功',res);
    })
    .catch(err=>{
      console.log('失败',err);
    })

1-4，获取用户输入的搜索词显示搜索列表

其实获取用户输入的内容，我们之前讲过很多遍了，就是用input组件，通过bindinput来获取用户输入的搜索词，然后点击搜索实现搜索功能。
要实现的效果图如下：
在这里插入图片描述

然后我们搜索对应的关键词以后可以显示对应的搜索结果在列表上

 data: {
    key:'',
    list:[]
  },
  getKey(e){
    this.setData({
      key:e.detail.value
    })
  },
  goSearch(){
    console.log(this.data.key);
    if(this.data.key){
      console.log('开始搜索');
      let db= wx.cloud.database()
      let _ =db.command
      db.collection('news')
      .where(_.or([
        {
          title:db.RegExp({
            regexp:this.data.key,
            options:'i'
          })
        },
        {
          desc:db.RegExp({
            regexp:this.data.key,
            options:'i'
          })
        }
      ]))
      .get()
      .then(res=>{
        console.log('成功',res);
        this.setData({
          list:res.data
        })
      })
      .catch(err=>{
        console.log('失败',err);
      })
    }else{
      wx.showToast({
        icon:'error',
        title: '请输入内容',
      })
    }
  },

二，云开发实现登陆注册功能

2-1，注册页

注册页主要用到了input组件获取用户输入，button组件实现注册功能，注册主要是把账号名和密码添加到云开发数据库

register(){
    console.log('注册');
    let name = this.data.name
    let user = this.data.user
    let password = this.data.password
    if(name.length<2){
      wx.showToast({
        icon:'none',
        title: '用户名至少为2位',
      })
      return
    }
    if(name.length>2){
      wx.showToast({
        icon:'none',
        title: '用户名最多为10位',
      })
      return
    }
    if(user.length<4){
      wx.showToast({
        icon:'none',
        title: '账号至少为4位',
      })
      return
    }
    if(password.length<4){
      wx.showToast({
        icon:'none',
        title: '密码至少为4位',
      })
      return
    }
    wx.cloud.database().collection('user').add({
      data:{
        name:name,
        zhanghao:user,
        password:password
      },
      success(res){
        console.log('注册成功',res);
        wx.showToast({
          title: '注册成功',
        })
      },
      fail(err){
        console.log('注册失败',err);
      }
    })
  }

2-2，登陆页

登陆主要是获取用户输入的账号和密码，然后从数据库里读取相应的数据，做账号和密码的比对，如果账号和密码都一样，就可以直接登陆成功

login(){
    let user = this.data.user
    let password = this.data.password
    console.log('账号：',user,'密码:',password);
    if(user.length<4){
      wx.showToast({
        icon:'none',
        title: '账号至少4位',
      })
      return
    }
    if(password.length<4){
      wx.showToast({
        icon:'none',
        title: '密码至少4位',
      })
      return
    }
    wx.cloud.database().collection('user').where({
      zhanghao:user
    })
    .get()
    .then(res=>{
      console.log('获取数据成功',res);
      let user = res.data[0]
      console.log('user',user);
      if(password==user.password){
        console.log('登陆成功');
        wx.showToast({
          title: '登陆成功',
        })
      }else{
        console.log('登陆失败');
        wx.showToast({
          icon:'none',
          title: '账号或密码不正确',
        })
      }
    })
    .catch(err=>{
      console.log('获取数据失败',err);
    })
  },

2-3，登陆成功跳转到首页

登陆成功以后，会调整到首页

	 wx.navigateTo({
          url: '/pages/home/home?name='+user.name,
        })

2-4，保存登陆状态

我们通常做登陆时，用户登陆成功后我们需要帮用户保存登陆状态，要不然用户下次再进入应用时还要重新登陆。所以我们要做下用户登陆状态的保存

三，云开发实现点赞收藏评论功能

具体代码的编写请跟着石头哥的视频走

3-1，常用图标获取网站

这里用了一个阿里巴巴矢量图库：https://www.iconfont.cn

3-2，收藏

  data:{
    imgUrl:"/images/soucang-gray.png",
    soucang:false
  },
  clickImg(){
    this.setData({
      imgUrl:this.data.soucang?'/images/soucang-gray.png':'/images/soucang-red.png',
      soucang:!this.data.soucang
    })      
  }

3-3，同步数据库

因数据是自己导入，本地调用函数无法修改，需要调用云函数，在云函数说过，可以回去复习一下

clickImg(){
    this.setData({
      imgUrl:this.data.soucang?'/images/soucang-gray.png':'/images/soucang-red.png',
      soucang:!this.data.soucang
    })      
    wx.cloud.callFunction({
      name:"soucang",
      data:{
        id:ID,
        soucang:this.data.soucang
      }
    })
    
    .then(res=>{
      console.log('更新成功',res);
    })
    .catch(err=>{
      console.log('更新失败',err);
    })
  },

四，评论功能的简单实现

在这里插入图片描述

let ID=''
let content=''

Page({
  data:{
    detail:'',
    imgUrl:"/images/soucang-gray.png",
    soucang:false,
     pinglun :[]
  },
  clickImg(){
    this.setData({
      imgUrl:this.data.soucang?'/images/soucang-gray.png':'/images/soucang-red.png',
      soucang:!this.data.soucang
    })      
    wx.cloud.callFunction({
      name:"soucang",
      data:{
        action:'soucang',
        id:ID,
        soucang:this.data.soucang
      }
    })    
    .then(res=>{
      console.log('更新成功',res);
    })
    .catch(err=>{
      console.log('更新失败',err);
    })
  },
  getContent(e){
    content=e.detail.value    
  },  
  fabiao(){
    if(content.length<4){
      wx.showToast({
        icon:'none',
        title: '评论不少于4字',
      })
      return
    }
    let pinglunItem={}
    pinglunItem.name='十一',
    pinglunItem.content=content
    let pinglunArr=this.data.pinglun
    pinglunArr.push(pinglunItem)
    console.log('添加后的评论数组',pinglunArr);
    wx.cloud.callFunction({
      name:'soucang',
      data:{
        action:'fabiao',
        id:ID,
        pinglun:pinglunArr
      }
    })
    .then(res=>{
      console.log('更新成功',res);
      this.setData({
        pinglun:pinglunArr
      })
    })
    .catch(err=>{
      console.log('更新失败',err);
    })
  },
  onLoad(options){
    ID=options.id
    console.log(options);
    wx.cloud.database().collection('homelist')
    .doc(ID)
    .get()
    .then(res=>{
      console.log('获取成功',res);
      this.setData({
        detail:res.data,
        soucang:res.data.soucang,       
      })
      this.setData({
        imgUrl:this.data.soucang?'/images/soucang-red.png':'/images/soucang-gray.png',
        pinglun:res.data.pinglun
      })
      
    })
    .catch(err=>{
      console.log('获取失败',err);
    })
  }
})

五，CMS网页版管理后台

5-1，开通cms的准备工作

如下图所示，直接点击开通内容管理(CMS)即可
在这里插入图片描述

如果你已经开通过云开发，记得把付费模式改为按量付费。如果你一开始云开发不是按量付费的模式。

点击完开通以后，会有如下弹窗，直接点击确定即可。不要被付费吓着，官方每月会送我们一定的免费额度的。学习得话基本上够用了。
在这里插入图片描述

上面点完确定后，我们只是开启了按量付费功能，因为cms得使用必须要开通按量付费才可以得。所以还要再点一次开通。如下图
在这里插入图片描述

点完开通后，会有如下弹窗，直接点击下一步即可。
在这里插入图片描述

然后我们需要设置登录内容管理后台得账号和密码，然后点击确定即可
在这里插入图片描述

然后我们就等待内容管理功能得开通了，需要等几分钟。

开通成功以后，我们就可以通过下面这个地址进入管理后台了。
在这里插入图片描述

后面我们统一称内容管理为cms

5-2，注意事项

一个云开发环境对应一个内容管理(cms)
cms开通会存在开通失败的情况，如果开通失败了，就用新的云开发环境去开通，如果新的云开发环境还是不行的话，那就只能重新去注册一个新的小程序了。一个小程序是可以开通两个云开发环境的。

5-3，登录Cms可视化管理后台

上面开通好以后，就可以通过后台地址登录管理后台了。如下

在这里插入图片描述

5-4，在cms里创建后台项目

第一次登录，我们还需要创建一个项目
在这里插入图片描述

自己输入项目名和项目id即可

然后点击进入刚刚创建的项目

在这里插入图片描述

到这里我们的cmd可视化网页管理后台就创建好了

5-5，内容模型

其实内容模型和我们数据库里的数据表(集合)是对应起来的。
在这里插入图片描述

5-6，数据类型

我们往内容模型里添加数据类型的时候可以选择如下一些类型
在这里插入图片描述

5-7，数据表(集合)管理

我们可以对上面创建好的内容模型(集合)进行可视化的管理，这也是cms的优点，可以让我们对数据库进行可视化的管理。

在这里插入图片描述

5-8，综合案例

我会结合cms和云开发数据库，教大家实现一个简单的新闻小程序，有如下功能点

1，新闻列表
2，新闻详情
3，图文混排
4，富文本编辑
5，rich-text的学习
rich-text官方文档：
https://developers.weixin.qq.com/miniprogram/dev/component/rich-text.html
在这里插入图片描述

<view>{{detail.title}}</view>
<rich-text nodes="{{detail.content}}"></rich-text>

详细复习云开发~小程序【搜索功能、登陆注册功能、点赞收藏评论功能、评论功能、CMS网页版管理后台】

文章目录

一，搜索功能

1-1，需求

1-2，实现原理

1-3，模糊搜索的代码实现

1-3-1，模糊搜索单个字段

1-3-2，模糊搜索多个字段（满足一个即可）

1-3-3，模糊搜索多个字段（要同时满足）

1-4，获取用户输入的搜索词显示搜索列表

二，云开发实现登陆注册功能

2-1， 注册页

2-2， 登陆页

2-3， 登陆成功跳转到首页

2-4， 保存登陆状态

三，云开发实现点赞收藏评论功能

3-1， 常用图标获取网站

3-2， 收藏

3-3， 同步数据库

四，评论功能的简单实现

五，CMS网页版管理后台

5-1，开通cms的准备工作

5-2，注意事项

5-3，登录Cms可视化管理后台

5-4，在cms里创建后台项目

5-5，内容模型

5-6，数据类型

5-7，数据表(集合)管理

5-8，综合案例

相关文章

2-1，注册页

2-2，登陆页

2-3，登陆成功跳转到首页

2-4，保存登陆状态

3-1，常用图标获取网站

3-2，收藏

3-3，同步数据库