本文将为大家提供一个详细的“UniApp 手机号一键登录”保姆级教程，涵盖前端和后端的实现过程。我们将使用 UniApp 框架构建前端，同时使用 Node.js + Express + MongoDB 构建后端。我们将实现一个简化的手机号登录功能，方便用户通过短信验证码进行登录。
前端部分
- 安装 UniApp 环境
首先，我们需要确保你已经安装了 HBuilderX 或 Vue CLI。可以使用 HBuilderX 创建一个新的 UniApp 项目。
- 创建登录页面
在 pages 目录下创建一个新的页面 login.vue，并编写如下代码：
```html
```
- 发送验证码和登录API的请求
后端部分
- 安装 Node.js 及相关依赖
使用 npm 安装 Express 和 mongoose 以及处理短信的库（这里以 node-sms 为例）：
bash
npm init -y
npm install express mongoose body-parser node-sms
- 创建服务器
在项目根目录创建一个 server.js 文件，编写如下代码：
```javascript const express = require('express'); const bodyParser = require('body-parser'); const mongoose = require('mongoose'); const SmsClient = require('node-sms');
const app = express(); const PORT = 3000;
app.use(bodyParser.json());
// 连接 MongoDB mongoose.connect('mongodb://localhost:27017/uniapp', { useNewUrlParser: true, useUnifiedTopology: true });
const userSchema = new mongoose.Schema({ phone: String, code: String, });
const User = mongoose.model('User', userSchema);
// 发送验证码 app.post('/sendCode', async (req, res) => { const { phone } = req.body; const code = Math.floor(Math.random() * 9000 + 1000).toString(); // 生成四位随机验证码
// 在这里调用短信发送接口
try {
await SmsClient.send({ to: phone, message: `您的验证码是：${code}` });
await User.updateOne({ phone }, { code }, { upsert: true }); // 更新或新增用户验证码
res.send({ success: true });
} catch (error) {
console.error(error);
res.send({ success: false, message: '发送失败' });
}
});
// 登录 app.post('/login', async (req, res) => { const { phone, code } = req.body; const user = await User.findOne({ phone });
if (user && user.code === code) {
res.send({ success: true });
} else {
res.send({ success: false, message: '验证码不正确' });
}
});
app.listen(PORT, () => {
console.log(Server is running on http://localhost:${PORT});
});
```
- 测试
在终端启动服务器：
bash
node server.js
然后在 HBuilderX 中运行前端项目，尝试输入手机号并发送验证码，接着输入验证码进行登录。
总结
通过以上步骤，我们完成了一个简单的 UniApp 手机号一键登录功能的实现。用户可以通过输入手机号获取验证码，然后输入验证码进行登录。后端使用 Node.js 和 MongoDB 处理用户数据和验证码验证，确保了流程的安全性和可靠性。希望本教程能对正在学习或开发类似功能的开发者们有所帮助。
