社交网站怎么做,杭州电信网站备案,服装网站建设建议,最基础的编程代码首先下载了vant4组件库#xff0c;element-plus组件库#xff0c;配置了路由#xff0c;及接口的封装
element-plus组件库可全局配置#xff1a;快速开始 | Element Plus
vant4组件库#xff0c;我是按需引入#xff1a;Vant 4 - A lightweight, customizable Vue UI l…首先下载了vant4组件库element-plus组件库配置了路由及接口的封装
element-plus组件库可全局配置快速开始 | Element Plus
vant4组件库我是按需引入Vant 4 - A lightweight, customizable Vue UI library for mobile web apps. 封装api接口例如utils/api.js
// api.js
import axios from axiosconst api axios.create({baseURL: http://localhost:3000, // 后端接口地址timeout: 5000,
})export default api
将此文件引入到regs文件中
// Sidentify.vue
templatediv classs-canvascanvas ids-canvas :widthprops.contentWidth :heightprops.contentHeight/canvas/div/templatescript setupimport { onMounted, watch } from vueconst props defineProps({identifyCode: {type: String,default: 1234},fontSizeMin: {type: Number,default: 25},fontSizeMax: {type: Number,default: 35},backgroundColorMin: {type: Number,default: 255},backgroundColorMax: {type: Number,default: 255},colorMin: {type: Number,default: 0},colorMax: {type: Number,default: 160},lineColorMin: {type: Number,default: 40},lineColorMax: {type: Number,default: 180},dotColorMin: {type: Number,default: 0},dotColorMax: {type: Number,default: 255},contentWidth: {type: Number,default: 112},contentHeight: {type: Number,default: 40}})// 生成一个随机数const randomNum (min, max) {return Math.floor(Math.random() * (max - min) min)}// 生成一个随机的颜色const randomColor (min, max) {let r randomNum(min, max)let g randomNum(min, max)let b randomNum(min, max)return rgb( r , g , b )}// 绘制干扰线const drawLine (ctx) {for (let i 0; i 5; i) {ctx.strokeStyle randomColor(props.lineColorMin, props.lineColorMax)ctx.beginPath()ctx.moveTo(randomNum(0, props.contentWidth), randomNum(0, props.contentHeight))ctx.lineTo(randomNum(0, props.contentWidth), randomNum(0, props.contentHeight))ctx.stroke()}}//在画布上显示数据const drawText (ctx, txt, i) {ctx.fillStyle randomColor(props.colorMin, props.colorMax)ctx.font randomNum(props.fontSizeMin, props.fontSizeMax) px SimHeilet x (i 1) * (props.contentWidth / (props.identifyCode.length 1))let y randomNum(props.fontSizeMax, props.contentHeight - 5)var deg randomNum(-45, 45)// 修改坐标原点和旋转角度ctx.translate(x, y)ctx.rotate((deg * Math.PI) / 180)ctx.fillText(txt, 0, 0)// 恢复坐标原点和旋转角度ctx.rotate((-deg * Math.PI) / 180)ctx.translate(-x, -y)}// 绘制干扰点const drawDot (ctx) {for (let i 0; i 80; i) {ctx.fillStyle randomColor(0, 255)ctx.beginPath()ctx.arc(randomNum(0, props.contentWidth), randomNum(0, props.contentHeight), 1, 0, 2 * Math.PI)ctx.fill()}}//画图const drawPic () {let canvas document.getElementById(s-canvas)let ctx canvas.getContext(2d)ctx.textBaseline bottom// 绘制背景ctx.fillStyle randomColor(props.backgroundColorMin, props.backgroundColorMax)ctx.fillRect(0, 0, props.contentWidth, props.contentHeight)// 绘制文字for (let i 0; i props.identifyCode.length; i) {drawText(ctx, props.identifyCode[i], i)}drawLine(ctx)drawDot(ctx)}//组件挂载onMounted(() {drawPic()})// 监听watch(() props.identifyCode,() {drawPic()})/scriptstyle scoped langscss.s-canvas {cursor: pointer;}/style
页面布局元素
// regs.vue
templatediv classreg-alldiv classreg-tu123/divdiv classreg-bth1注册/h1/divvan-form submitonSubmit classreg-loginvan-cell-group insetvan-field v-modelphone name手机号 label手机号 placeholder手机号:rules[{ required: true, message: 请填写手机号 }] /van-field v-modelpassword namepassword label密码 placeholder密码:rules[{ required: true, message: 请填写密码 }] /van-field v-modelcode typecode name验证码 label验证码 placeholder验证码:rules[{ required: true, message: 请填写验证码 }] /div classreg-yzm clickrefreshCode// 引入的模块SIdentify :identifyCodeidentifyCode classcode/SIdentify/div/van-cell-groupdiv stylemargin: 0 16px;van-button block typeprimary native-typesubmit提交/van-button/div/van-formul classreg-botli忘记密码/lili clickrouter.push(/log)密码登录/li/ul/div
/template
具体功能模块
// regs.vue
script setup
// 引入的模块
import SIdentify from ./Sidentify.vue
// 引入的接口地址
import api from ./utils/api
import { ElMessage } from element-plus
import { Form, Field, CellGroup } from vant;
import { useRouter } from vue-router
import { ref, onMounted } from vue
const router useRouter()const phone ref();
const password ref();
const code ref();
const onSubmit (values) {regs()
};let identifyCode ref() //图形验证码
let identifyCodes ref(1234567890abcdefjhijklinopqrsduvwxyz) //验证码出现的数字和字母//组件挂载
onMounted(() {identifyCode.value makeCode(identifyCodes.value, 4)
})// 生成随机数
const randomNum (min, max) {max max 1return Math.floor(Math.random() * (max - min) min)
}
// 随机生成验证码字符串
const makeCode (o, l) {for (let i 0; i l; i) {identifyCode.value o[randomNum(0, o.length)]console.log(验证码:--,identifyCode.value);}
}
// 更新验证码
const refreshCode () {identifyCode.value makeCode(identifyCodes.value, 4)
}
//登录
const regs () {//验证验证码不为空if (phone.value.length!11) {ElMessage({ type: error, message: 手机号必须为11位 })return}if (password.value.length!6) {ElMessage({ type: error, message: 密码必须为6位 })return}//验证验证码是否正确if (code.value ! identifyCode.value) {ElMessage({ type: error, message: 验证码错误 })refreshCode()return} else {goes() }
}const goes async () {try {const response await api.post(/l/regs, {username: phone.value,password: password.value})const dataresponse.dataif(data.code401){ElMessage({ type: error, message: data.message })}else{ElMessage({ type: success, message: go to 登录 })router.push(/log)}} catch (error) {console.error(登录失败, error);}}
/script
具体布局样式
// regs.vue
style scoped langless/style
style scoped
.reg-all {text-align: center;
}.reg-bt {margin: 180px 0 30px 0;
}.reg-tu {background-color: aquamarine;height: 300px;border-radius: 50%;position: fixed;width: 375px;top: -150px;
}.reg-bot {display: flex;justify-content: space-between;li {padding: 10px 20px;font-size: 14px;/* color: red; */}
}.reg-yzm {width: 100px;height: 15px;background-color: red;position: relative;top: -40px;left: 220px;.code{height: 20px;}
}
/style
效果展示 动态验证码 前端提供后端根据自己的需要自己写就好
大致思路
注册时根据输入的手机号判断数据库中是否存在
如果存在就提示账户已存在
如果没有就接着注册自己的账号密码
登陆成功后跳转页面跳到登录页
登录页输入刚刚创建的账号密码
成功后跳转到首页
逻辑很简单自己试试看
