效果预览
- 小程序端 （体验可以搜小程序: 丘宇海外助手）
- 管理端
项目功能简介
✨项目主要对接第三方接口充值海外手机话费业务
✨ 基于 vue3+js+antd+nodejs+express.js+uniapp+mongodb 搭建
- 管理端
- 基于角色权限管理
- 登录、首页统计信息
- 访客记录、操作记录、用户信息
- 订单管理（话费和流量）、充值日志管理、各国家套餐管理
- 广告管理、公告通知、客服内容配置
- 会员卡、优惠券管理和配置
- 下单、支付、黑名单、退款、协议、第三方API、小程序、公众号等配置
- 小程序页面自定义装饰配置
- 主题更换、全局搜索等等
- 小程序端
- 用户无感登录
- 话费、流量充值
- 微信支付、订单退款、微信订阅通知
- 开通会员、领取优惠券
- 个人信息修改
- 订单信息查询等等
基于角色权限设计
项目中我采用的权限设计方案属于基于角色的访问控制（Role-Based Access Control，RBAC）。RBAC 是一种常见且广泛使用的权限管理模型，它通过将用户分配到不同的角色，然后将角色与特定的权限关联，来实现对系统资源的访问控制。
基于RBAC 模型的权限设计方案有四个部分：
- 角色（Roles） ： 角色是一组用户，这些用户在系统中具有相似的权限需求。每个角色都会被分配一组权限，然后用户被分配到角色而不是直接分配权限。
- 权限（Permissions） ： 权限定义了用户可以执行的操作或访问的资源。每个角色都会被授予一组权限，这些权限定义了该角色所能执行的操作。
- 用户（Users） ： 用户是系统的最终操作者。每个用户都会被分配一个或多个角色（项目中没有使用多角色），这些角色决定了他们在系统中的权限。
- 前端路由匹配 ： 前端根据用户的角色和权限信息，动态生成菜单和路由。这意味着当用户登录系统时，前端会根据用户的角色查询其对应的权限，然后根据权限配置来渲染出适当的菜单和页面。
在 RBAC 模型中，角色充当了用户和权限之间的中介，简化了权限管理和维护。
权限基本关系是：当用户登录后再查询出角色信息，然后关联出角色对应的权限信息
- 前端权限设计
原理：根据权限表数据和路由元信息进行匹配，然后筛选出对应的菜单
- 后端权限设计
原理：是对每个请求进行权限验证 每个请求前端都会携带token,基于这个信息来进行验证用户的权限
其中会经过两轮的验证：token验证 和 接口权限验证 以确保数据的安全性
详细可查看我的这篇文章 【项目总结】关于权限系统前后端的设计方案
微信支付 v3支付接口
使用的是全新的微信支付 APIv3，优点是 - 使用JSON作为数据交互的格式，不再使用XML
小程序支付逻辑全流程图解：
详细可查看我的这篇文章 Nodejs实现微信小程序支付功能前后端全流程实践 全新的微信支付 APIv3
其中最为复杂和容易出错的在 后端生成支付参数 这一步
后端生成支付参数
后端生成支付参数响应给前端小程序进行拉起支付
/**
* 微信支付v3 付款签名生成支付参数
* @param {string} prepay_id 预支付交易会话标识
*/
exports.createPaySign =async function (prepay_id) {
let timeStamp = (Math.floor(new Date().getTime() / 1000)).toString();
let nonceStr = generateNonceStr(32);
const ac = await getThirdKeys()
let signStr = `${ac.appid}\n${timeStamp}\n${nonceStr}\nprepay_id=${prepay_id}\n`;
let cert = fs.readFileSync(`./pems/files/${ac.pem}`, "utf-8");
let sign = crypto.createSign("RSA-SHA256");
sign.update(signStr);
return {
paySign: sign.sign(cert, "base64"),
timestamp: timeStamp,
nonce_str: nonceStr,
signType: 'RSA',
package: 'prepay_id=' + prepay_id
};
}
小程序拉起支付
// 从后端获取到支付参数（上面 createPaySign 生成的数据）
phoneWxRequest(that.form).then(res => {
wx.requestPayment({
provider: 'wxpay',
timeStamp: res.timestamp,
nonceStr: res.nonce_str,
package: res.package,
signType: res.signType,
paySign: res.paySign,
success(res) {
uni.showModal({
title: '提示',
content: '支付成功!',
showCancel: false,
success: function(res) {
if (res.confirm) {
uni.switchTab({
url: '/pages/index/index'
})
}
}
});
},
fail(err) {
uni.switchTab({
url: '/pages/index/index'
})
console.log('fail:' + JSON.stringify(err));
}
});
})
微信支付回调 （会多次调用）
微信支付通过支付通知接口将用户支付成功消息通知给商户(也就是在这里接收到支付是否成功 去修改订单状态)。
https://pay.weixin.qq.com/docs/merchant/apis/jsapi-payment/payment-notice.html
回调URL： 该链接是通过基础下单接口中的请求参数“notify_url”来设置的，要求必须为HTTPS地址。请确保回调URL是外部可正常访问的，且不能携带后缀参数，否则可能导致商户无法接收到微信的回调通知信息。回调URL示例：“https://qy.xxx.com/v1/payment/wx/success”
微信通知
微信通知交互类似于下图
-
前期准备：微信小程序后台开通微信通知服务并且配置模板，具体方法自行百度
-
代码实现：
- 前端：
拉起订阅消息板
// 订阅消息
subscribe() {
wx.requestSubscribeMessage({
// 最多配置3个订阅模板
tmplIds: ['33PJeEz4LvjGkHQHexIEd_T711rx1VEhqNicj620nGc',
'lYYnUAbolXwHaL6IR3HhWPTiprgmKigGvuwC_cHn61E',
's8yxlrkibXNKz54tRqzOf4EY02QMCkSHzZSwFXG52KY'
],
success(res) {
console.log(res)
},
fail(err) {
console.log(err)
}
})
},
- 后端：
主动发送一次性模板通知消息
注意构建 data 的数据要和模板的数据类型一致，否则会发送失败
// 发送小程序订阅消息
async function sendSubscribeMsg(params) {
let accessToken = await getWxAccessToken()
let info = {
"template_id": params.template_id,
"touser": params.touser,
"page": params.page,
"data": params.data ,
"miniprogram_state": params.miniprogram,
"lang": "zh_CN",
}
return axios.post(`https://api.weixin.qq.com/cgi-bin/message/subscribe/send?access_token=${accessToken}`,info);
}
消息推送通知返回信息：
// 成功
{"errcode":0,"errmsg":"ok","msgid":3366503134080123000}
// 失败 用户拒绝通知
{"errcode":43101,"errmsg":"user refuse to accept the msg rid: 65ed8179-6b245d4c-493956ff"}
推送成功：
最后
该项目现已上线运营，可支持二开、作为各种管理系统，基础功能都已完成，开箱即用，需要完整源码或者项目合作的同学可联系我哦 😊😊
不明白之处或者觉得处理的不好的地方可以评论区留言，期待和各位大佬的交流😊
联系方式
- QQ: 1840354092
- 微信 （备注事由）
扫一扫
1013
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
