目录
- 1 创建数据源
- 2 搭建后端API
- 3 用户登录
- 4 最终的代码
- 总结
欢迎阅读我们的微搭低代码全栈开发课程,这是我们的第二篇。在第一篇中我们整体描述了小程序的功能结构,这一篇我们就进入实际的开发。
在开发小程序的时候,第一个需要考虑的就是用户如何注册和登录。我们在日常使用小程序的时候,在哪会遇到要求注册的呢?一般是在你准备下单的时候。
因为如果你是准备配送,那商家必须要知道你的手机号和配送地址。如果是堂食的话留了联系方式,也方便商家日后在推出优惠活动和新品时候进行推荐。
如果要留存用户这些个人信息,必须用到数据源的概念。数据源相当于微搭提供的一套在线的数据库,他可以存储基本的文本信息,也可以存储像图片、视频、音频、文件等内容。
我们首先要创建一个用户的数据源用来存储信息
1 创建数据源
想必你在我们第一篇文章里已经将账号开通了,开通之后打开你的控制台,找到数据模型
初始状态会有用户和部门两个表,这里存储的是微搭的内部账号,内部账号开通的时候需要消耗授权
我们在小程序里注册的用户在微搭里叫访客,访客目前是没有限制,可以自由添加的。
点击数据模型列表旁边的+号,创建数据源,我们起一个名字叫顾客表
点击创建按钮完成我们数据源的创建
数据源创建好之后就需要添加列,所谓的列指的是我们需要存储的信息。在顾客表里我们要存储用户的昵称、头像、手机号三个字段
点击表格的添加列按钮,先添加昵称字段
因为昵称通常都是文字,所以我们这里的数据类型选择文本
商家在后台里看到用户下单的时候,关联到顾客表的内容的,通常需要显示有意义的信息。因此在添加的时候我们将昵称作为主列字段,这样后续在其他业务的时候需要用到顾客信息的就展示这个字段的内容
第二列我们添加头像,头像通常是一个图片,数据类型我们选择图片
有同学可能会有疑问,选择图片之后他存到哪里了呢?这种内容通常会添加到云存储中,在你购买的套餐里,我们的套餐包分为数据库大小,存储大小,CDN流量,这里的存储就是用来存储这种图片类型的内容的
第三列我们添加手机号码,如果希望字段有先后顺序的,我们可以在刚刚添加的头像列,点击鼠标,选择向右添加一列,用来添加我们的手机字段,类型选择电话
2 搭建后端API
数据源添加好之后,就需要编写我们的后端API。所谓的API是指我们用来操作数据源的具体的方法,比如我们的用户的新增、修改、删除,以及登录验证和手机号码的唯一性校验。
具体编写什么样的API是和你的业务规划相关的。在用户管理这个模块,我们通常先创建几个方法包括用户登录、用户创建、手机号码验证。
切换到我们的API模块,点击+号新建
在打开的界面选择自定义代码
这里自定义API一共有五个选项,第一种一般是用来集成外部的请求,通常你在刚起步的时候也不需要付费使用各类互联网的服务,不用管。第二种和第三种是为了兼容传统开发,我们低代码就是和传统开发是完全不同的路子,传统开发的也不会用这个,所以这两个基本没啥用
第四种就是我们目前用到的,他的好处是可以直接使用微搭的各类后端API,最后一种就是原来的云开发的内容,叫云函数。云函数主要支持你引入第三方的包,我们在员工注册登录部分就会用到加密算法,这个就用到了第三方的加密算法包,在那一章节我们具体讲解云函数的用法。
开放服务就是腾讯全家桶的各类产品了,如果你的支付能力更强,就可以开通企业版,对应的开通全家桶的各类付费产品,这样就可以围绕鹅厂生态来构建自己的应用。
介绍完了具体的内容,还是回到我们的主题上,先创建我们的用户管理的api
输入名称用户管理,标识userManager,点击创建。工具也会用拼音的缩写生成,但是实际体验下来还是用英文命名辨识度高后续也好维护。
3 用户登录
在小程序中,如何辨别是哪一个用户登录呢?通常会用到微信的唯一标识,我们叫做openid,每一个微信用户都有一个唯一标识。但需要注意的是,不同的产品形态这个标识是不一样的,小程序、公众号、企业微信的标识都是不同的。我们这里主要用到小程序的唯一标识。
点击编辑API方法,我们添加第一个方法,顾客登录,customerLogin
顾客登录的时候我们需要先得到顾客的openid,在API中是通过入参来获取的。在入参部分我们新加一个参数openid
点击API的详细了解超链接,打开我们的文档
将文档滑动到调用数据模型部分
粘贴这部分代码到我们的编辑器里
剩下就是我们如何替换对应的参数,再次回到我们的文档里,找到数据模型V2,在右侧点击查询多条
滑到有filter字眼的代码部分
从params开始一直复制到console.log上边
然后替换我们编辑器里的params部分
接着替换我们的methodName,替换为wedaGetRecordsV2
这个时候不要关闭我们这个窗口,在浏览器里新开一个窗口,打开我们的控制台
找到我们刚刚创建的顾客表,切换到基本信息,复制标识,替换到我们代码里的name
如果把低代码开发比作西天取经,那这就是你的第一难了。初学者往往在这第一步就彻底懵了,这是干啥呢?我们上述的这一系列步骤叫构建我们的代码模板,我们写方法也不是凭空去编制的,都是调用别人写好的方法进行组合的。你有了代码模板就和你炒菜的菜谱一样,照着菜谱放入各种调料,最终就是一道不错的菜肴。
上述配置好之后,就是要配置我们的查询条件了,我们需要根据得到了openid过滤,根据哪个字段过滤呢,是根据我们数据源的openid,我们在刚刚创建的时候忘记创建了,现在在数据源继续添加一列,叫openid
然后就是构造查询条件,查询条件是这样的
这样构造好查询条件,我们的result会返回啥呢?要想看到结果,我们需要把result作为返回值返回,在return部分返回我们的result,然后点击右侧的方法测试就可以看到结果
这里有两个属性,total表示查询的记录的条数,为0说明当前传入的openid没有匹配到数据。records表示我们查询到的结果,类型是一个数组,现在表示空数组,没有数据的意思
接着我们就可以根据返回的结果来构造我们的登录信息了。如果找到数据说明就是注册用户,那么我们返回records的第一条记录,如果没找到我们就给一个信息未注册
if (result.records && result.records.length > 0) {
// 用户已注册,返回用户信息
return {
code: 0,
message: '登录成功',
data: result.records[0], // 返回找到的用户记录
};
} else {
// 用户未注册
return {
code: 1,
message: '用户未注册',
data: null,
};
}
我上边的代码就表达了这个意思,然后再执行方法测试,就可以看到我们构造好的结果
然后点击出参映射就完成了我们方法的编写
按照未匹配到数据的出参有一个问题,我们的data变成了文本类型
这肯定是不行的,因此我们先要添加一条测试数据,重新构造一下出参。打到我们的数据模型,添加一行
重新输入有数据的入参
这个时候再点击出参映射我们的返回值就构造好了,删除非必要的,只保留我们后续会用到的参数
4 最终的代码
module.exports = async function (params, context) {
// 调用数据模型方法获取用户记录
const result = await context.callModel({
name: 'customer_v7mamho', // 数据模型标识
methodName: 'wedaGetRecordsV2', // 数据模型方法标识
params: {
// 筛选内容,查找与当前openid匹配的用户
filter: {
where: {
$and: [
{
openid: {
$eq: params.openid,
},
},
],
},
},
// 排序
orderBy: [
{
createdAt: "asc", // 创建时间,正序
},
{
updateBy: "desc", // 更新时间,倒序
},
],
// 返回字段选择
select: {
$master: true, // 返回主表
},
// 返回total字段
getCount: true,
// 页面大小
pageSize: 1, // 只需要一条记录
// 当前页面
pageNumber: 1,
},
});
// 检查查询结果
if (result.records && result.records.length > 0) {
// 用户已注册,返回用户信息
return {
code: 0,
message: '登录成功',
data: result.records[0], // 返回找到的用户记录
};
} else {
// 用户未注册
return {
code: 1,
message: '用户未注册',
data: null,
};
}
};
总结
本篇是我们全栈开发教程的第二篇,重点讲解了用户登录的逻辑,涉及到数据源的创建、后端API的编写。难度对于初学者会有点大,但是低代码学习其实就是不断克服困难的过程,全部克服了也就是一名合格的低代码开发者了。下一篇我们会继续完善我们的登录功能,敬请期待。