因为平时喜欢捣鼓代码。尤其周末在家写自己的想法时才是最亢奋的！现在还只是在实习。。
一早想做一个类似记事本一样的应用来记录一些东西，于是自己做原型设计，原型都在脑中，想到啥敲啥～哈哈哈。写着写着发现写的太多了，于是干脆做成一个博客，关于这个博客有机会之后可以聊聊。但是一开始的想法一直没变，正好遇上公司新的项目要写小程序，于是干脆决定写一个小程序好了，说干就干。
前期在原生WX和uniapp上思考了挺久，最后还是选择了uniapp，因为我有习惯部署一套网页版的应用，这样更容易看到一些问题。
展示一下小程序的截图吧（结尾有二维码哦）～
具体的我文章最后放了小程序码有兴趣可以看一下哦。接下来就步入正题吧
一、设计初衷以及具体思考的想法🤔
最开始的想法是做一个自己用的类似记事本的功能，方便做一些工作上的记录或者生活中一些临时的突发奇想。
和普遍的应用一样，我前期构想的也是四个大模块（首页 / 团队 / 随看 / 我的）。刚起步的时候想的是直接使用本地储存来记录数据，在后续的一些开发中，逐渐发现本地储存和我的想要的东西打不成一致，于是还是用到了node。所以小程序的服务端用的express开发，前端使用的是uniapp。
看到这里你可能会好奇不是说要做一个记录事情的简单应用吗？怎么还有团队啊！😄 没错，在我写完代码后的一个凌晨，我去洗澡的时候突发奇想到的功能。在我看来，既然我都已经上了后端服务了，为啥要局限于个人的记录的增删改查呢！
那么在这里和大家说一下我对【团队】功能的流程设计：
- 首先用户创建一个团队。
- 每次创建团队的时候会生成一个唯一的密钥，这就是进入团队的唯一方式。
- 其他用户在加入团队时输入这串团队密钥就会想该团队发起申请。
- 团队的具体逻辑。
另外关于这个随看的模块其实就是从我的博客上查询来的文章，因为实在想不到还可以加什么模块，拿来凑个数 😁
二、具体功能实现代码
团队创建
/**
* @description: 创建
* @param {*}
* @return {*}
*/
createTeam() {
const qiyueinfo = getStorageUserInfo();
this.$refs.formTeam
.validate()
.then(async (flag) => {
this.disabled = true;
let { userInfo } = this.model;
userInfo.createdTime = this.formatterTimes(new Date().getTime());
userInfo.ciphertext = Base64Util(
userInfo.name + userInfo.invitationCode + qiyueinfo.id
); // 前端生成团队密钥段一
let res = await CreatedTeamApi(userInfo);
if (res.status === 200) {
this.$refs.uToast.show({
type: "success",
icon: "none",
message: "你已经成功创建一个团队",
});
setTimeout(() => {
uni.navigateBack({
url: "../teamPage/index",
});
this.disabled = false;
}, 500);
return;
}
this.$refs.uToast.show({
type: "error",
icon: "none",
message: "异常操作,重新登录后尝试",
});
})
.catch((error) => {
this.disabled = false;
console.log(error);
});
},
创建团队这里的团队密钥我分成了两部分：前端生成第一部分，服务端生成第二部分，入库时拼在一起。
加入团队
/**
* @description: 加入团队
* @return {*}
*/
async intoTeamEnter() {
let data = {
userId: this.info_.id, // 申请人id
userName: this.info_.username, // 申请人账号
julyName: this.info_.julyname,
createdTime: this.formatterTimes(new Date().getTime()),
code: this.intoTeamCode, // 验证码
};
let res = await IntoTeamApi(data);
this.showIntoTeam = false;
if (res.status === 200) {
res.data?.code === 304
? this.$refs.uToast.show({
type: "error",
icon: "none",
message: res.data.team_staus,
})
: this.$refs.uToast.show({
type: "success",
icon: "none",
message: "已向团队拥有者发起申请",
});
return;
}
this.$refs.uToast.show({
type: "error",
icon: "none",
message: "异常操作",
});
},
},
加入团队前端的记录很简单，拿到团队密钥请求后端api即可。
加入团队-服务端逻辑
// 查询team表中是否存在 该密钥
let [err, data] = await DB.query(`select * from TEAM_FORM where base64_code=?`, [code])
if (data.length >= 1) {
if (data[0].userId == userId) {
// 申请人id 和 创建人id一致
err ? MError(res, '系统错误', err) : MSuccess(res, '请求成功', {
team_staus: '无法申请加入自己的团队',
code: 304
})
return
}
// 是否申请过该团队（避免重复申请）
let [err, data] = await DB.query(`select id from TEAMOA_FORM where teamId=? and userId=?`,[data[0].id, userId])
if (data.length > 0) {
err ? MError(res, '系统错误', err) : MSuccess(res, '请求成功', {
team_staus: '请勿重复申请',
code: 304
})
return
}
// 是否在该团队
let [err, data] = await DB.query(`select id from TEAMMEMBERS_FORM where teamId=? and userId=?`,[data[0].id, userId])
if (data.length > 0) {
err ? MError(res, '系统错误', err) : MSuccess(res, '请求成功', {
team_staus: '你已经是该团队成员',
code: 304
})
return
}
// 查询团队成员是否已满
let [errM, dataM] = await DB.query(`select * from TEAMMEMBERS_FORM where teamId=?`, [data[0].id])
if (dataM.length >= data[0].teamMembers) {
err ? MError(res, '系统错误', err) : MSuccess(res, '请求成功', {
team_staus: '团队成员已满',
code: 304
})
return
}
// 最后向团队拥有者发消息 通知加入消息
let content = `用户【${userName}】,向您的团队发起加入申请。请及时处理请求`
let teamId = data[0].id // 拥有者id
let [err, data] = await DB.query(`insert into TEAMOA_FORM (userId, content, createdTime,julyName,userName,teamId) values (?,?,?,?,?,?)`,[userId, content,createdTime, julyName, userName, teamId])
err ? MError(res, '系统错误', err) : MSuccess(res, '请求成功', data)
一些其他的功能就不一一列举了，如果有兴趣的话后续我会上传代码，可以拉下看自行研究。
三、其他说明
正常的话，应用的后台管理或者是配置应该是独立的一套系统。不过我另辟蹊径，直接放在了小程序内😈（主要是懒）
当然我肯定会限制用户进入的啦。
- 根据你登录的用户信息，判断你是否有进入管理页面的权限。
- 每一个管理页面在进入页面时的钩子函数（onShow）中都会调取api查询你的权限是否正确。
- 当然防不胜防，你如果是个大聪明进来了一定要告诉我，我也很好奇😄。
这里的活动是我开发时还是很有意思的，我明确了活动的两种方式。
第一种：有独立的活动页面。就是我重新为一个活动开发一个页面，后端逻辑，前端页面都是后续更新上去的。
第二种：使用活动模版。如果是哪些简单的查询数据用来展示的（例如签到天数排名），就可以通过配置活动模版来简单的生成页面。
第一种不用多谈通过一个活动id就可以做很多事情。具体聊聊活动模版。
管理员在创建活动时可以选择活动详情页的类型。对于太长的表单我时抗拒的，所以我把活动模版的具体完善放在了活动管理中单独维护。
在活动管理的页面中会具体罗列出所有的活动。对于编辑的逻辑，我也做了限制。仅可以编辑类型为模版的活动，并且只能编辑模版的具体内容。在我看来，既然活动已经设定了就没有二次修改的意义，如果发现错误那就删除重头再来。
目前我支持的只有最基本的两个编辑内容。一个是展示时的字段，一个是后端查询的sql语句。其实还可以加入字体颜色，背景等其他前内容，自由度更高。我这里只关注了逻辑本身，实现模版的功能。
就像这样填入你需要查询的数据的sql，还有展示的字段。在查看活动详情时，服务端会去查询到sql，再去具体查询。
这就是模版页面。😄有点简陋，还可以加入更多的元素去完善，当然我只是钟意这个想法，我个人觉得这个逻辑的可玩性还是很高的。之前也没有接触到这种逻辑，所以肯定还有欠缺的地方，如果你有更好的想法我也乐意学习～
差点忘了，小程序中的随看的文章大多数是摘自于掘金在我自己的博客中保留的，直接查询过来的数据，在小程序中目前的版本还没有展示转载的来源，不过数据库中已经记录这个字段，下次更新时一定不会忘记的！
结尾
编不下去啦～如果有兴趣的话我会把代码开源哦，目前放在私库中。
下面是小程序码，有兴趣可以看一下，谢谢大家🙏
第一次在掘金发文章。。轻点喷🤪
