fastadmin-微信小程序实战课程：todolist项目文档（课件）整理汇总

网址整理

视频教程地址：

https://www.ixigua.com/7017702820048536071

后端接口仓库地址：

https://gitee.com/maoshushare/fast-todolist

第一节项目计划和准备工作

项目简介

本项目是一个fastadmin+微信小程序的实战案例，一个简单的todolist任务管理功能，包括后台数据增删改查、数据统计、api接口开发（小程序对接登录、小程序端管理数据）等。

功能比较简单，覆盖到的知识点不会太多，适合初学者，尤其适合没有做过小程序和fa结合使用的同学。

为便于大家利用碎片时间学习，每节课的时间会尽量控制在10分钟左右。

效果截图

本项目是模仿滴答清单的部分功能，大概界面是这样：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6vrVqSwq-1641880230864)(https://cdn.jsdelivr.net/gh/978165754/picgo@master/blog/20211011104255.png)]

项目计划

本项目制作思路：

1.先制作基础的后端api部分。
2.再制作小程序界面。
3.小程序对接api，打通基本功能。
4.缺少的api一边补充一边对接。

准备工作

1.准备工具：VsCode(或phpStorm)、phpStudy、chrome浏览器(或Edge)、微信小程序开发工具、apipost
2.下载fastadmin框架代码(https://gitee.com/maoshushare/fastmodel)
3.导入mysql数据库，配置环境，启动项目

第二节登录和自动注册api

验证字段必填

先引入Validate，use think\Validate;

$rule = ['openid'  => 'require|length:10,30'
];$msg = ['openid.require' => '缺少openid','openid.length' => 'openid长度不符合',
];$v = new Validate($rule,$msg);

登录和注册

如果已经存在，则登录，不存在则先注册，然后再自动登录

api相关的拓展教程：https://www.bilibili.com/video/BV1Ji4y1V7ZV?p=11

$post=$this->request->param();
if (!$v->check($post)) {$this->error('登录失败：' . $v->getError());
}
$u = model('admin/User')->where('openid',$post["openid"])->find();
if($u){Token::clear($u["id"]);$this->auth->direct($u["id"]);$this->success('登录成功', $this->auth->getUserinfo());
}
else{$username = $post["openid"];// 初始密码给一个随机数$password = Random::alnum(15);$this->auth->register($username,$password,'','',["openid"=>$post["openid"]]);$this->success('注册成功', $this->auth->getUserinfo());
}

第三节创建数据表生成crud

创建数据表：todo

字段：
userid task status tags prio desc
todotime
donetime
giveuptime
createtime updatetime deletetime

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LNJbJLnN-1641880230868)(https://cdn.jsdelivr.net/gh/978165754/picgo@master/blog/20211012141903.png)]

一键生成CRUD

第四节编写增删改查api

新建一个控制器Xcxtodo，专门写关于任务控制的api

增加和修改

增加和修改写在一起，方便维护

增加

$this->model
->allowField(true)
->save(["userid"=>$this->uid,"tags"=>"测试","task"=>"测试3331232233",
]);

修改

$this->model
->allowField(["task"
])
->save(["task"=>"89898",
],["id"=>20]);

删除

根据任务id删除(软删除)

关于软删除的文档说明：https://www.kancloud.cn/manual/thinkphp5/189658

$this->model->get($id)->delete();$this->model->destroy($id);

查询

根据关键词查询任务内容（模糊查询）

$task = input("task");
$where=["userid"=>$this->uid,
];
if($task){$where["task"]=["like","%$task%"];
}
$list = $this->model->where($where)->select();

处理标签id为标签文字

$tags = model('admin/Todotags')->where(["userid"=>$this->uid,])->column('tags','id');foreach ($list as $key => &$value) {$tagsArr = explode(',',$value["tags"]);$tagsNameArr = [];foreach ($tagsArr as $id) {$tagsNameArr[] = $tags[$id] ?? $id;}$value["tagsName"] = implode(',',$tagsNameArr);
}

根据关键词查询标签

$tags = input("tags");
$where=["userid"=>$this->uid,
];
if($tags){$where["tags"]=["like","%$tags%"];
}
$list = $this->model->where($where)->group("tags")->column("tags");

改为专表之后：

$tags = input("tags");
$where=["userid"=>$this->uid,
];
if($tags){$where["tags"]=["like","%$tags%"];
}
$list = model('admin/Todotags')->where($where)->select();

根据标签查询任务

$tags = input("tags");
$where=["userid"=>$this->uid,
];
if($tags){$where["tags"]=$tags;
}
$list = $this->model->where($where)->select();

改为专表之后：
注意exp的写法(https://www.kancloud.cn/manual/thinkphp5/135182)

  $tags = input("tags");$where=["userid"=>$this->uid,];$list = $this->model->where($where);if($tags){$list=$list->where('','exp', "instr(CONCAT( ',', tags, ',' ),  ',".$tags.",' )");}$list = $list->select();

拓展知识instr：

INSTR（str,substr）
str：从哪个字符串中搜索
substr:要搜索的子字符串
instr()函数不区分大小写

按日期分组：
核心：时间查询（ https://www.kancloud.cn/manual/thinkphp5/165789 ）

已过期的 (status=1 && todotime 在当前时间之前)
根据自己的项目实际需求来做，可以是当前时间以前，也可以是当前日期以前

$where=["userid"=>$this->uid,"status"=>1,];
$list =$this->model->where($where)->whereTime('todotime','<',time())->select();

今天的

$list =$this->model->where($where)->whereTime('todotime','d')->select();

明天的

$day = date('Y-m-d',strtotime("+1 day"));
$list =$this->model->where($where)->whereTime('todotime', 'between', [$day.' 00:00:00', $day.' 23:59:59'])->select();

后天到7日内

$day1 = date('Y-m-d',strtotime("+2 day"));
$day2 = date('Y-m-d',strtotime("+7 day"));
$list =$this->model->where($where)->whereTime('todotime', 'between', [$day1.' 00:00:00', $day2.' 23:59:59'])->select();

更久以后

$day2 = date('Y-m-d',strtotime("+7 day"));
$list =$this->model->where($where)->whereTime('todotime', '>', $day2.' 23:59:59')->select();

无计划日期的（status=1 && todotime为空）

$where=["userid"=>$this->uid,"status"=>1,];
$list =$this->model->where($where)->whereNull('todotime')->select();

已完成的 (status=2)

$where=["userid"=>$this->uid,"status"=>2,];
$list =$this->model->where($where)->select();

已放弃的（status=3）

$where=["userid"=>$this->uid,"status"=>3,];
$list =$this->model->where($where)->select();

安全优化

修改和删除限制只能操作当前用户自己的数据

修改数据

着重分析下update和save的区别(https://www.kancloud.cn/manual/thinkphp5/135189)

update方法：allowField无效，不会更新时间

$res = $this->model// ->allowField(true) //无效->where(["id"=>$id,"userid"=> $this->uid])->update($data);

save方法：isUpdate(true)

if($info = $this->model->get(['id'=>$id,'userid'=>$this->uid])){$res = $info->allowField(true)->isUpdate(true)->save($data);
}
else{$this->error($type."失败，未找到数据");
}

删除数据

$type = "删除".$id."数据";
if($info = $this->model->get(['id'=>$id,'userid'=>$this->uid])){        $res = $info->delete();
}
else{$this->error($type."失败");
}if($res){$this->success($type."成功");
}
else{$this->error($type."失败");
}

第五节小程序

小程序准备工作

1.新建项目
2.引入UI库（vant）
https://youzan.github.io/vant-weapp/#/quickstart
3.调试ui库看是否正常引入

小程序界面

先简单搭建下界面，不需要太完善

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-C9MwxdUK-1641880230872)(https://cdn.jsdelivr.net/gh/978165754/picgo@master/blog/20211017152953.png)]


<van-cell icon="todo-list-o"  border="{{ false }}"><view slot="title"><view class="van-cell-text">收集箱</view><!-- <van-tag type="danger">标签</van-tag> --></view><van-icon  slot="right-icon" class="mr-10" name="clock-o"/><van-icon slot="right-icon"  name="ellipsis" />
</van-cell><van-cell-group  border="{{ false }}"><van-fieldvalue="{{ sms }}"centerclearablelabel=""placeholder="+ 添加任务到收集箱，回车即可保存"border="{{ false }}"use-button-slotclass="ccc"><view slot="right-icon"><van-icon name="clock-o" class="mr-10"/><van-icon name="ellipsis" /></view></van-field>
</van-cell-group><van-collapse value="{{ activeNames }}" bind:change="onChange"  border="{{ false }}"><van-collapse-item name="1"  border="{{ false }}"><view slot="title">已过期<text class="smalltext">4</text></view><!-- 1 --><van-cell border="{{ true }}"><view slot="title"><van-checkbox value="{{ checked }}" bind:change="onChange">复选框</van-checkbox></view><view slot="right-icon"><van-tag round type="success">标签</van-tag><text class="mr-10 ml-10">10-18</text><van-icon name="ellipsis" /></view></van-cell><!-- 2 --><van-cell border="{{ true }}"><view slot="title"><van-checkbox value="{{ true }}" bind:change="onChange">复选框</van-checkbox></view><view slot="right-icon" style="font-size: 28rpx;">10-18       </view><van-icon slot="right-icon"  name="ellipsis" /></van-cell></van-collapse-item>
</van-collapse>

app.json引入组件

    "van-button": "@vant/weapp/button/index","van-field": "@vant/weapp/field/index","van-cell": "@vant/weapp/cell/index","van-cell-group": "@vant/weapp/cell-group/index","van-tag": "@vant/weapp/tag/index","van-icon": "@vant/weapp/icon/index","van-collapse": "@vant/weapp/collapse/index","van-collapse-item": "@vant/weapp/collapse-item/index","van-checkbox": "@vant/weapp/checkbox/index","van-checkbox-group": "@vant/weapp/checkbox-group/index"

第六节小程序对接api

小程序开发文档：https://developers.weixin.qq.com/miniprogram/dev/framework/
申请测试号：https://developers.weixin.qq.com/miniprogram/dev/devtools/sandbox.html

  getUserProfile(e) {// 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认// 开发者妥善保管用户快速填写的头像昵称，避免重复弹窗wx.getUserProfile({desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写success: (res) => {console.log("用户信息",res);wx.setStorageSync('userInfo', res.userInfo)this.login(res.userInfo)this.setData({userInfo: res.userInfo,hasUserInfo: true})}})},

2.根据code获取openid，并且对接登录接口

login(u){wx.login({success (res) {console.log(res);if (res.code) {//发起网络请求wx.request({url: 'http://todo.tt/api/xcxuser/getopenid',data: {code: res.code,nickName:u.nickName},success :(res)=>{console.log(res);},fail:(err)=>{console.log(err);}})} else {console.log('登录失败！' + res.errMsg)}}})}
})

接口：

public function getopenid($code){$url = "https://api.weixin.qq.com/sns/jscode2session?appid=$this->AppID&secret=$this->AppSecret&js_code=$code&grant_type=authorization_code";$res = Http::get($url);$this->success('成功',['r'=>$this->request->param(),"res"=>$res]);}

全局变量 token

globalData: {userInfo: null,token:null,apidomain:'http://todo.tt/api'
}

封装request方法

request(url,data,callback){wx.request({url: gb.apidomain + url,data: data,dataType: 'json',enableCache: true,enableHttp2: true,enableQuic: true,header: {token:gb.token},method: "POST",// responseType: 'json',success: (result) => {callback(result)},fail: (res) => {console.error(res)},complete: (res) => {},})
}

新增

bind:confirm=“confirm_add”

  confirm_add(event){// console.log(event.detail);let task = event.detailthis.add(task)},add(task){if(task != ''){this.request('/xcxtodo/addEdit',{task:task},(res)=>{console.log(res); wx.showToast({title: res.data.msg,})       })}},

查询和显示

引入util.js来格式化时间

var util = require('../../utils/util')

const formatTime = (time, option) => {const date = new Date(time)const year = date.getFullYear()const month = date.getMonth() + 1const day = date.getDate()const week = date.getDay()const hour = date.getHours()const minute = date.getMinutes()const second = date.getSeconds()//获取 年月日if (option == 'YY-MM-DD') return [year, month, day].map(formatNumber).join('-')//获取 月日if (option == 'MM-DD') return [month, day].map(formatNumber).join('-')//获取 年月if (option == 'YY-MM') return [year, month].map(formatNumber).join('-')//获取 年if (option == 'YY') return [year].map(formatNumber).toString()//获取 月if (option == 'MM') return  [mont].map(formatNumber).toString()//获取 日if (option == 'DD') return [day].map(formatNumber).toString()//获取 年月日 周一 至 周日if (option == 'YY-MM-DD Week')  return [year, month, day].map(formatNumber).join('-') + ' ' + getWeek(week)//获取 月日 周一 至 周日if (option == 'MM-DD Week')  return [month, day].map(formatNumber).join('-') + ' ' + getWeek(week)//获取 周一 至 周日if (option == 'Week')  return getWeek(week)//获取 时分秒if (option == 'hh-mm-ss') return [hour, minute, second].map(formatNumber).join(':')//获取 时分if (option == 'hh-mm') return [hour, minute].map(formatNumber).join(':')//获取 分秒if (option == 'mm-dd') return [minute, second].map(formatNumber).join(':')//获取 时if (option == 'hh')  return [hour].map(formatNumber).toString()//获取 分if (option == 'mm')  return [minute].map(formatNumber).toString()//获取 秒if (option == 'ss') return [second].map(formatNumber).toString()//默认 时分秒 年月日return [year, month, day].map(formatNumber).join('-') + ' ' + [hour, minute, second].map(formatNumber).join(':')
}const formatNumber = n => {n = n.toString()return n[1] ? n : '0' + n
}const getWeek = n => {switch(n) {case 1:return '星期一'case 2:return '星期二'case 3:return '星期三'case 4:return '星期四'case 5:return '星期五'case 6:return '星期六'case 7:return '星期日'}
}module.exports = {formatTime: formatTime
}

获取数据，并格式化处理

getbyday(opt = {}){this.request('/xcxtodo/getbyday',opt,(res)=>{let datalist = res.data.datafor (const key in datalist) {if (Object.hasOwnProperty.call(datalist, key)) {const element = datalist[key];element.forEach((ele,ind) => {              if(ele.tags){  datalist[key][ind].tagsnum = ele.tags.split(',').length}if(ele.todotime){  datalist[key][ind].todotime = util.formatTime(ele.todotime*1000,'MM-DD')}});}}this.setData({datalist})})},

渲染数据

  groups:{timeout:"已过期",today:"今天",tomorrow:"明天",seven:"7天",langtime:"更久以后",notime:"无日期",timeend:"已完成",},activeNames: ['timeout','today'],

  <block wx:for="{{groups}}" wx:if="{{datalist[ind].length>0}}" wx:key="ind" wx:for-item="itm" wx:for-index="ind"><van-collapse-item name="{{ind}}"><view slot="title">{{itm}}<text class="smalltext">{{datalist[ind].length}}</text></view><!-- 任务1 --><block wx:for="{{datalist[ind]}}" wx:key="id"><van-cell><view slot="title"><van-checkbox value="{{ checked }}" bind:change="onChange">{{item.task}}</van-checkbox></view><view slot="right-icon"><van-tag round type="success" wx:if="{{item.tags_number}}">{{item.tags_number}}</van-tag><text class="mr-10 ml-10" wx:if="{{item.todotime}}">{{item.todotime}}</text><van-icon name="ellipsis" /></view></van-cell></block></van-collapse-item></block>

优化add方法：新增完数据，重新渲染数据

  const { data } = resif(data.code === 1){this.getbyday()}

修改

状态修改为已处理或待处理

修改的方法：

edit(id,data){const param={...data,id}this.request('/xcxtodo/addEdit',param,(res)=>{// console.log(res); const { data } = resif(data.code === 1){this.getbyday()}wx.showToast({title: data.msg,})       })},

getbyday方法优化(格式化完成时间和选中状态)

if(ele.donetime){datalist[key][k]["donetime"] = util.formatTime(ele.donetime*1000,'MM-DD')datalist[key][k]["checked"] = true
}

增加选中状态，增加data数据绑定

<van-checkbox value="{{ item.checked }}" data-id="{{item.id}}" data-ind="{{ind}}" data-index="{{index}}" bind:change="onCheckChange">{{item.task}}</van-checkbox>

点击checkbox选项时切换状态

onCheckChange(event){console.log(event);const {index,ind,id} = event.currentTarget.datasetconst {datalist} = this.datadatalist[ind][index].checked =  event.detailthis.edit(id,{status:event.detail===true?2:1})this.setData({datalist});
}

删除

1.首先加一个点击右侧按钮弹出编辑项

<van-icon name="ellipsis" bind:click="showEditPopup" data-ind="{{ind}}"  data-index="{{index}}" />

2.弹出层放在右侧，里面放几个选项

<van-popup show="{{ showPopup }}" position="right" custom-style="height: 100%" bind:close="onClosePopup"><van-cell title="删除" icon="delete-o" bind:click="delete"/><van-cell title="标签" icon="location-o" /><van-cell title="改日期" icon="clock-o" />
</van-popup>

3.写对应的js方法

showEditPopup(event){this.setData({showPopup : true})const {index,ind} = event.currentTarget.datasetconst {datalist} = this.datathis.setData({editItem:datalist[ind][index]})},onClosePopup(){this.setData({showPopup : false,editItem:null})
},
delete(){console.log('编辑的是',this.data.editItem);const {id} = this.data.editItemthis.request('/xcxtodo/delete',{id},(res)=>{// console.log(res); const { data } = resif(data.code === 1){this.getbyday()this.onClosePopup()}wx.showToast({title: data.msg,})       })
}

后续内容将在个人博客上更新：https://maoshu.fun/posts/45372c3c.html