nodejs+vue实现登录界面功能（一）
项目描述：一开始进入登录界面，只有登录成功才可以跳转到主页面，已注册但是忘记密码的进入忘记密码页面，找回密码后进入登录界面。
技术选型：nodejs+vue+stylus
界面效果：
- 切换登录方式
- 手机合法检查
- 倒计时效果
- 切换显示或隐藏密码
- 前台验证提示
前后台交互功能
- 动态一次性图形验证码
- 动态一次性短信验证码
- 短信登录
- 密码登录
- 获取用户信息，实现自动登录
- 退出登录
技术点讲解
- 切换登录方式
使用:class绑定样式，如果没有该样式，标签设置为display:none
- 手机的合法检查
使用正则，规则为以1开头，共11位数字。注意这里将方法写在computed中，当用户输入的phone改变时rightPhone才重新计算，减少缓存。
computed: { rightPhone () { return /^1\d{10}$/.test(this.phone) } },
- 倒计时效果
当输入手机号后，如果手机号输入正确，“获取验证码”由灰色显示为黑色(color #ccc-> #000)，可以按下按钮（:disabled = !rightPhone），发送请求(getCode)，同时倒数显示，“获取验证码”字样隐藏。
<template> .... <input type="tel" maxlength="11" placeholder="手机号" v-model="phone"> <button :disabled="!rightPhone" class="get_verification" :class="{right_phone: rightPhone}" @click.prevent="getCode"> {{computeTime>0 ? `已发送(${computeTime}s)` : '获取验证码'}} </button> .... </template> <script> ..... data(){ return{ computeTime:0; } } methos:{ async getCode () { // 如果当前没有计时 if(!this.computeTime) { // 启动倒计时 this.computeTime = 60 this.intervalId = setInterval(() => { this.computeTime-- if(this.computeTime<=0) { // 停止计时 clearInterval(this.intervalId) } }, 1000) ......
- 切换显示或密码隐藏
两个input，类型分别为type=password，text；使用v-if，v-else绑定showPwd（一个布尔值）决定显示哪一个。
<template> ... <section class="login_verification"> <input type="text" maxlength="8" placeholder="密码" v-if="showPwd" v-model="pwd"> <input type="password" maxlength="8" placeholder="密码" v-else v-model="pwd"> <div class="switch_button" :class="showPwd?'on':'off'" @click="showPwd=!showPwd"> <div class="switch_circle" :class="{right: showPwd}"></div> <span class="switch_text">{{showPwd ? '' : ''}}</span> </div> </section> ... </template> <script> export default { name: "login", data () { return { showPwd: false, // 是否显示密码 pwd:'', } } ..... }
- 前台验证提示
用户每次点击获取图形验证码时都会不同，即img中src不能相同，可以在请求地址后面加上请求时间Date.now()
<template> ... <section class="login_message"> <input type="text" maxlength="11" placeholder="验证码" v-model="captcha"> <img class="get_verification" src="http://localhost:4000/captcha" alt="captcha" @click="getCaptcha" ref="captcha"> </section> <script> ..... methods:{ // 获取一个新的图片验证码 getCaptcha () { // 每次指定的src要不一样 this.$refs.captcha.src = 'http://localhost:4000/captcha?time='+Date.now() } } }
- 点击登录提交表单
这里分为短信登录和用户密码登录两个部分，都是提交表单，即为post请求，短信登录中提交的是电话号码和验证码，用户密码登录提交的是手机号、密码和图形验证码。
开始先安装axios
接着封装ajax请求，返回promise对象，
import axios from 'axios' export default function ajax (url, data={}, type='GET') { return new Promise(function (resolve, reject) { // 执行异步ajax请求 let promise if (type === 'GET') { // 准备url query参数数据 let dataStr = '' //数据拼接字符串 Object.keys(data).forEach(key => { dataStr += key + '=' + data[key] + '&' }) if (dataStr !== '') { dataStr = dataStr.substring(0, dataStr.lastIndexOf('&')) url = url + '?' + dataStr } // 发送get请求 promise = axios.get(url) } else { // 发送post请求 promise = axios.post(url, data) } promise.then(function (response) { // 成功了调用resolve() resolve(response.data) }).catch(function (error) { //失败了调用reject() reject(error) }) }) }
根据提供的api编写请求地址
import ajax from './ajax' //设置跨域，跨域地址为http://localhost:4000 import apiConfig from '../../config/api.config.js' axios.defaults.baseURL=apiConfig.baseURL // 用户名密码登陆 export const reqPwdLogin = ({name, pwd, captcha}) => ajax('/login_pwd', {name, pwd, captcha}, 'POST') // 发送短信验证码 export const reqSendCode = (phone) => ajax('/sendcode', {phone}) // 手机号验证码登陆 export const reqSmsLogin = (phone, code) => ajax('/login_sms', {phone, code}, 'POST') // 根据会话获取用户信息 export const reqUserInfo = () => ajax('/userinfo') // 用户登出 export const reqLogout = () => ajax('/logout')
这里先配置一下跨域，假设跨域地址为http://localhost:4000，以下同时配置开发环境和生产环境的跨域，这样上线后无需更改也可以请求接口
配置目录 /config/index.js
proxyTable: { '/apis':{ target: 'http://localhost:4000/', // 后台api changeOrigin: true, //是否跨域 // secure: true, pathRewrite: { '^/apis': '' //需要rewrite的, } } },
在config文件里新建一个js文件api.config.js
//判断是否是生产环境 var isPro = process.env.NODE_ENV === 'production' //process.env.NODE_ENV用于区分是生产环境还是开发环境 //根据环境不同导出不同的baseURL module.exports = { baseURL: isPro ? 'http://localhost:4000/' : '/apis' }
在axios的默认实例有一个baseURL的属性，配置了baseURL之后，访问接口时就会自动带上，这里对应api地址请求中的
//设置跨域，跨域地址为http://localhost:4000 import apiConfig from '../../config/api.config.js' axios.defaults.baseURL=apiConfig.baseURL
写好接口请求和配置好跨域后，我们回到登录请求方面。
// 异步登陆 async login () { let result // 前台表单验证 if(this.loginWay) { // 短信登陆 const {rightPhone, phone, code} = this if(!this.rightPhone) { // 手机号不正确 this.showAlert('手机号不正确') return } else if(!/^\d{6}$/.test(code)) { // 验证必须是6位数字 this.showAlert('验证必须是6位数字') return } // 发送ajax请求短信登陆 result = await reqSmsLogin(phone, code) } else {// 密码登陆 const {name, pwd, captcha} = this if(!this.name) { // 用户名必须指定 this.showAlert('用户名必须指定') return } else if(!this.pwd) { // 密码必须指定 this.showAlert('密码必须指定') return } else if(!this.captcha) { // 验证码必须指定 this.showAlert('验证码必须指定') return } // 发送ajax请求密码登陆 result = await reqPwdLogin({name, pwd, captcha}) } // 停止计时 if(this.computeTime) { this.computeTime = 0 clearInterval(this.intervalId) this.intervalId = undefined } // 根据结果数据处理 if(result.code===0) { const user = result.data // 将user保存到vuex的state this.$store.dispatch('recordUser', user) // 跳转首页 this.$router.replace('/home') } else { // 显示新的图片验证码 this.getCaptcha() // 显示警告提示 const msg = result.msg this.showAlert(msg) } },
此时我们先暂停以下前台的编写，使用nodejs来编写后台响应。
注意：以下讲到的模块的参数写法具体参考www.npmjs.com中自己搜索模块，这里不会详细讲解每个参数是什么意思。
在这里我使用的是nodejs+express+mongoose来搭建。首先确定你的电脑上已经配置好nodejs，MongoDB，express。
使用express新建项目server
express -e server
- 完成用户密码方式登录
首先考虑获取验证码，在这里我们使用svg-captcha
router.get('/captcha', function (req, res) {
var captcha = svgCaptcha.create({
ignoreChars: '0o1l',
noise: 2,//产生线数
color: true
});
req.session.captcha = captcha.text.toLowerCase();
console.log(req.session.captcha)
/*res.type('svg');
res.status(200).send(captcha.data);*/
res.type('svg');
res.send(captcha.data)
});
然后我们再连接数据库。注意这里登陆总共存在数据库中的参数有手机号，用户名，密码三个。
/* 包含n个能操作mongodb数据库集合的model的模块 1. 连接数据库 1.1. 引入mongoose 1.2. 连接指定数据库(URL只有数据库是变化的) 1.3. 获取连接对象 1.4. 绑定连接完成的监听(用来提示连接成功) 2. 定义对应特定集合的Model 2.1. 字义Schema(描述文档结构) 2.2. 定义Model(与集合对应, 可以操作集合) 3. 向外暴露获取Model的方法 */ // 1. 连接数据库 const mongoose = require('mongoose') mongoose.connect('mongodb://localhost:27017/order_manager') const conn = mongoose.connection conn.on('connected', function () { console.log('数据库连接成功!') }) // 2. 得到对应特定集合的Model: UserModel const userSchema = mongoose.Schema({ // 用户名 'name': {type: String}, // 密码 'pwd': {type: String}, // 类型 'phone': {'type': String} }) UserModel = mongoose.model('user', userSchema) // 3. 向外暴露 module.exports = { getModel(name) { return mongoose.model(name) } }
接着我们来验证用户提交的用户密码登录的信息。
* 密码登陆 */ router.post('/login_pwd', function (req, res) { const name = req.body.name const pwd = md5(req.body.pwd) const captcha = req.body.captcha.toLowerCase() console.log('/login_pwd', name, pwd, captcha, req.session) // 可以对用户名/密码格式进行检查, 如果非法, 返回提示信息 if(captcha!==req.session.captcha) { return res.send({code: 1, msg: '验证码错误'}) } // 删除保存的验证码 delete req.session.captcha UserModel.findOne({name}, function (err, user) { if (user) { console.log('findUser', user) if (user.pwd !== pwd) { res.send({code: 1, msg: '用户名或密码不正确!'}) } else { req.session.userid = user._id res.send({code: 0, data: {_id: user._id, name: user.name, phone: user.phone}}) } } else { const userModel = new UserModel({name, pwd}) userModel.save(function (err, user) { // 向浏览器端返回cookie(key=value) // res.cookie('userid', user._id, {maxAge: 1000*60*60*24*7}) req.session.userid = user._id const data = {_id: user._id, name: user.name} // 3.2. 返回数据(新的user) res.send({code: 0, data}) }) } }) })
- 完成用户手机方式登录
首先在网上云之讯中注册新用户（这里我是随便选的，主要是云之讯新用户免费送100条短信测试，所以我就注册了，其他的也可以）。注册成功后你可以获得自己的api接口对接（APPID,ACCOUNT,TOKEN,REST URL）。
这里我们先编写生成随机验证码的函数。
/* 生成指定长度的随机数 */ function randomCode(length) { var chars = ['0','1','2','3','4','5','6','7','8','9']; var result = ""; //统一改名: alt + shift + R for(var i = 0; i < length ; i ++) { var index = Math.ceil(Math.random()*9); result += chars[index]; } return result; } // console.log(randomCode(6)); exports.randomCode = randomCode;
向指定的号码发送指定的验证码
/* 向指定号码发送指定验证码 */ function sendCode(phone, code, callback) { var ACCOUNT_SID = '自己的用户sid' var AUTH_TOKEN = '鉴权密钥'; var Rest_URL = '请求地址'; var AppID = '应用ID'; //1. 准备请求url /* 1.使用MD5加密（账户Id + 账户授权令牌 + 时间戳）。其中账户Id和账户授权令牌根据url的验证级别对应主账户。 时间戳是当前系统时间，格式"yyyyMMddHHmmss"。时间戳有效时间为24小时，如：20140416142030 2.SigParameter参数需要大写，如不能写成sig=abcdefg而应该写成sig=ABCDEFG */ var sigParameter = ''; var time = moment().format('YYYYMMDDHHmmss'); sigParameter = md5(ACCOUNT_SID+AUTH_TOKEN+time); var url = Rest_URL+'/2019-07-12/Accounts/'+ACCOUNT_SID+'/SMS/TemplateSMS?sig='+sigParameter; //2. 准备请求体 var body = { to : phone, appId : AppID, templateId : '1', "datas":[code,"1"] } //body = JSON.stringify(body); //3. 准备请求头 /* 1.使用Base64编码（账户Id + 冒号 + 时间戳）其中账户Id根据url的验证级别对应主账户 2.冒号为英文冒号 3.时间戳是当前系统时间，格式"yyyyMMddHHmmss"，需与SigParameter中时间戳相同。 */ var authorization = ACCOUNT_SID + ':' + time; authorization = Base64.encode(authorization); var headers = { 'Accept' :'application/json', 'Content-Type' :'application/json;charset=utf-8', 'Content-Length': JSON.stringify(body).length+'', 'Authorization' : authorization } //4. 发送请求, 并得到返回的结果, 调用callback // callback(true); request({ method : 'POST', url : url, headers : headers, body : body, json : true }, function (error, response, body) { console.log(error, response, body); // callback(body.statusCode==='0'); callback(true); }); } exports.sendCode = sendCode;
最后我们就可以编写手机号短信验证码登录的路由请求。
/* 发送验证码短信 */ router.get('/sendcode', function (req, res, next) { //1. 获取请求参数数据 var phone = req.query.phone; //2. 处理数据 //生成验证码(6位随机数) var code = sms_util.randomCode(6); //发送给指定的手机号 console.log(`向${phone}发送验证码短信: ${code}`); sms_util.sendCode(phone, code, function (success) {//success表示是否成功 if (success) { users[phone] = code console.log('保存验证码: ', phone, code) res.send({"code": 0}) } else { //3. 返回响应数据 res.send({"code": 1, msg: '短信验证码发送失败'}) } }) }) /* 短信登陆 */ router.post('/login_sms', function (req, res, next) { var phone = req.body.phone; var code = req.body.code; console.log('/login_sms', phone, code); if (users[phone] != code) { res.send({code: 1, msg: '手机号或验证码不正确'}); return; } //删除保存的code delete users[phone]; UserModel.findOne({phone}, function (err, user) { if (user) { req.session.userid = user._id res.send({code: 0, data: user}) } else { //存储数据 const userModel = new UserModel({phone}) userModel.save(function (err, user) { req.session.userid = user._id res.send({code: 0, data: user}) }) } }) })
由于篇幅太长了，我分两篇写，要看后续，请看nodejs+vue实现登录界面功能（二）
