申请网站,google seo 优化招聘,论坛网站开发技术,北京网站建设亿玛酷适合51.用户登录页面开发
1.查询vant组件 2.实现组件模板部分 3.模型层准备 4.数据上传
1.1 创建版权声明组件Copyright
新建文件#xff1a;src\components\common\Copyright.vue
template!-- 版权声明 --div classcopyrightcopyright xx…1.用户登录页面开发
1.查询vant组件 2.实现组件模板部分 3.模型层准备 4.数据上传
1.1 创建版权声明组件Copyright
新建文件src\components\common\Copyright.vue
template!-- 版权声明 --div classcopyrightcopyright xxx旅游网copy;2024/div
/template
style langless
.copyright{position: fixed;bottom: 0;padding: 10px;color:#999;width: 100%;text-align: center;font-size: 12px;
}
/style
1.2 登录页面Login
新建文件src\views\accounts\Login.vue
1.2.1 脚本script:
script setup
import Copyright from /components/common/Copyright.vue;
import { ref } from vue;
import { useRoute, useRouter } from vue-router;
import TripFooter from /components/common/Footer.vue;const route useRoute() //获得属性
const router useRouter() //获取地址const username ref()
const password ref()//用户名的验证规则
const rulename ref([{required: true,//用户名组件中通过该属性开启必填验证message: 请填写用户名
}, {pattern: /1\d{10}/,//用户名组件中通过该属性开启正则表达式验证message: 请填写正确的手机号
}])const goBack () {router.go(-1)
}
/script
1.2.2 模板template
templatediv classpage-account-login!-- 导航条 --van-nav-bar title用户登录 left-text返回 click-leftgoBack/van-nav-bar!-- 表单输入 --van-form!-- 文本框 --van-field v-modelusername label用户名 placeholder用户名 maxlength11 :rulesrulename clearable /!-- 密码框 --van-field v-modelpassword typepassword label密码 placeholder密码 :rules[{ required: true }] autocompleteoff/divvan-button square typeprimary native-typesubmit colorgreen提交/van-button/div/van-form!-- 文字提示 --div登录表示同意a href#用户使用协议/a及a href#隐私条款/a/divdiv没有账户RouterLink :to{name:AccountRegister}点击注册/RouterLink/div!-- 版权信息 --Copyright /TripFooter//div
/template
1.2.3 配置路由
文件地址src\router\index.js
import AccountLogin from /views/accounts/Login.vue
const router createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes: [{path:/account/login,name:AccountLogin,component:AccountLogin}]
})
2.用户注册界面开发
2.1 封装短信验证组件SendSmscode
新建文件src\components\common\SendSmsCode.vue
2.1.1 脚本script
script setup
//defineProps用于父子组件通信
import { ref, onMounted, computed, defineProps } from vue
import { useRoute, useRouter } from vue-router//用于控制页面跳转工具,传值工具
import { ajax } from /utils/ajax;
import { SightApis } from /utils/apis;
import { showToast } from vant;const router useRouter()
const route useRoute()const goBack () {router.go(-1)//跳转至上一页1:跳转至下一页
}
const props defineProps({phoneNum: String
})
//存放验证信息(响应式数据)
const isSmsSend ref(false)
const sendBtnText ref(点击发送验证码)
const timer ref(null)
const counter ref(60)//清空验证码计时
const reset () {isSmsSend.value falsesendBtnText.value 点击发送验证码if (timer.value) {clearInterval(timer.value)//停止回调函数counter.value 60timer.value null}
}
//倒计时
const countDown () {//回调函数重复调用timer.value setInterval(() {sendBtnText.value (${counter.value}秒)后重新发送counter.value--if (counter.value 0) {reset()}}, 1000)
}
//发送验证码
const sendSmsCode () {//判断手机号是否输入if (!props.phoneNum) {showToast(请输入手机号码)return false}isSmsSend.value true //调用接口发送短息countDown() //开始倒计时
}
defineExpose({//向父级暴露函数reset
})
/script
2.1.2 模板template:
template!-- 短信验证码发送相关逻辑 --van-button sizesmall typeprimary click.preventsendSmsCode() :disabledisSmsSend{{ sendBtnText }}/van-button
/template
2.2 注册页面Register
新建文件src\views\accounts\Register.vue
2.2.1 脚本script:
script setup
import Copyright from /components/common/Copyright.vue
import SendSmsCode from /components/common/SendSmsCode.vue
import { ref, toRef } from vue;
import { useRoute, useRouter } from vue-router
const route useRoute()
const router useRouter();
// 用户名的验证规则
const ruleName ref([{required: true,message: 请填写用户名
}, {pattern: /1\d{10}/,message: 请填写正确的手机号
}])
// 重复密码验证
const rulePassword ref([{required: true,message: 请重复一次密码}, {validator: () form.value.password form.value.passwordRepeat,message: 两次密码输入不一致}])
const form ref({username: ,nickname: ,sms_code: ,password: ,passwordRepeat:
})
//手机号变化时重置验证码组件状态
const refSms ref({})
const onPhoneChange () {//调用验证码组件中reset函数,重置验证码refSms.value.reset()
}
const onSubmit () {// 提交表单
}
const goBack () {router.go(-1)
}
/script
2.2.2 模板template template!-- 用户注册 --div classpage-account-register!-- 导航条 --van-nav-bar title用户注册 left-text返回 left-arrow click-leftgoBack /!-- 表单输入 --van-form submitonSubmitvan-field v-modelform.username label手机号码 placeholder手机号码 typetel maxlength11 clearable:rulesruleName inputonPhoneChange /van-field v-modelform.sms_code center clearable label短信验证码 placeholder短信验证码:rules[{ required: true, message: 请输入短信验证码 }]template #buttonSendSmsCode refrefSms :phoneNumform.username //template/van-fieldvan-field v-modelform.nickname label用户昵称 placeholder用户昵称 maxlength32 clearable:rules[{ required: true, message: 请输入用户昵称 }] /van-field v-modelform.password typepassword label密码 placeholder密码:rules[{ required: true, message: 请填写密码 }] autocompleteoff/van-field v-modelform.passwordRepeat typepassword label确认密码 placeholder确认密码:rulesrulePassword autocompleteoff /div stylemargin: 16px;van-button round block typeinfo native-typesubmit提交/van-button/div/van-form!-- //表单输入 --!-- 文字提示 --div classtips注册表示同意 a href#用户使用协议/a及a href#隐私条款/a/divdiv classtips已有账号 router-link :to{ name: AccountLogin }点击登录/router-link/div!-- 版权信息 --Copyright //div
/template
2.2.3 配置路由
文件地址src\router\index.js
import AccountRegister from /views/accounts/Register.vue
const router createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes: [{//用户注册path: /account/register,name: AccountRegister,component: AccountRegister}]
})
3.个人主页界面开发Mine
新建文件src\views\Mine.vue
3.1 脚本script import TripFooter from /components/common/Footer.vue 3.2 模板template templatediv classpage-mine!-- 标题栏 --van-nav-bar title个人中心 /!-- 用户基本信息(头像/昵称) --div classuser-headerdiv classavatarimg src/static/mine/avatar.png/divdivpWelcome,Adela/pa classbtn-link href#退出登录/a/div/div!-- 订单菜单列表 --van-rowvan-col span6RouterLink to/van-icon namerecords /span全部订单/span/RouterLink/van-colvan-col span6RouterLink to/van-icon namepending-payment /span待支付/span/RouterLink/van-colvan-col span6RouterLink to/van-icon nametosend /span已完成/span/RouterLink/van-colvan-col span6RouterLink to/van-icon namelogistics /span已取消/span/RouterLink/van-col/van-row!-- 底部导航 --TripFooter //div
/template
3.3 样式style(范例)
style langless
.page-mine {font-family: Arial, sans-serif;color: #333;background-color: #f7f7f7;.van-nav-bar {background-color: #07c; //color: #fff;.van-nav-bar__title {color: #fff;text-align: center;}}// 用户头部区域样式.user-header {background: url(/static/mine/bg.jpg) no-repeat center;background-size: cover;color: #fff;height: 200px;display: flex;flex-direction: column;justify-content: center;align-items: center;height: 200px; // 确保有足够的高度.avatar {margin-bottom: 20px;img {width: 60px;height: 60px;border-radius: 50%;}}p {font-size: 18px;}.btn-link {margin-top: 10px; // 添加顶部外边距以在垂直方向上居中margin-left: 25px; }}// 订单菜单列表样式.van-row {.van-col {a {display: flex;flex-direction: column;align-items: center;text-decoration: none;color: #333;padding: 10px;.van-icon {font-size: 24px;margin-bottom: 5px;}span {font-size: 14px;}}:not(:last-child) {border-right: 1px solid #eee;}}}// 底部导航样式.trip-footer {background-color: #fff;box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);position: fixed;bottom: 0;width: 100%;}
}
/style
3.4 配置路由
文件地址src\router\index.js
import Mine from /views/Mine.vue
const router createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes: [{//个人中心path: /mine,name: Mine,component: Mine}]
})
3.5 图示效果
