防止注册机,登录时-验证码图片的生成=前端vue+后端node
2023-09-11 14:18:36 时间
前端
<section class="login-message"> <input type="text" maxlength="11" placeholder="验证码" v-model="captcha"> <img ref="captcha" class="get-verification" src="http://localhost:3000/api/captcha" alt="captcha" @click.prevent="getCaptcha()" > </section>
点击验证码图片事件
// 4. 获取图形验证码
getCaptcha() {
// 加一个时间戳作用:让验证码时时刻刻不一样
this.$refs.captcha.src = 'http://localhost:3000/api/captcha?time=' + new Date();
}
------------------------------------------------------------------------------
后端生成验证码接口
router.get('/api/captcha', (req, res) => { // 1. 生成随机验证码 let captcha = svgCaptcha.create({ color: true, noise: 3, // 三条干扰线 ignoreChars: '0o1i', size: 4 }); // console.log(captcha.text); // 2. 保存 req.session.captcha = captcha.text.toLocaleLowerCase(); console.log(req.session); // 3. 返回客户端 res.type('svg'); res.send(captcha.data); });
相关文章
- Vue笔记:Vue中使用mockjs
- Vue_(Router路由)-vue-router路由的基本用法
- 【记录】vue构建项目npm install错误run `npm audit fix` to fix them, or `npm audit` for details
- [Node.js] Add node.js command line to global
- [Vue @Component] Simplify Vue Components with vue-class-component
- [Node.js] Using npm link to use node modules that are "in progress"
- ubuntu21.04(linux):安装node(14.17.1)和vue.js3.1环境
- vue-webpack快速建立项目模板
- 从安装node js到构建一个vue并启动它
- [Node.js] node-persist: localStorage on the server
- 从vue-cli2.x升级到@vue/cli 4.x(node v14.15.0 / vue.js 3.0)
- django-vue-admin前端设置后台接口地址为127.0.0.1产生跨域问题解决办法
- 验证:使用node 12.18.4版本安装vue cli4没有问题(先卸载vue cli2再安装)
- vue-tour快速入门:VUE项目中如何使用vue-tour新手引导指引插件?怎样使用?包含具体实例
- vue-router路由的安装、配置、具体用法和Vue-router学习笔记
- 新来的前端小姐姐问:Vue路由history模式刷新页面出现404问题
- vue父组件向子组件动态传值的两种方法
- 前端MVC Vue2学习总结(二)——Vue的实例、生命周期与Vue脚手架(vue-cli)
- 011:vue+openlayers加载引用bing地图(多种形式)
- 048:vue+openlayers鼠标click显示企业名片(代码示例)
- Vue(五)计算属性、过滤器、axios、vue 生命周期
- 01-Vue初体验
- Vue 通过 axios 发起网络请求