Vue全栈开发旅游网项目(9)-用户登录/注册及主页页面开发

1.用户登录页面开发

1.查询vant组件 2.实现组件模板部分 3.模型层准备 4.数据上传

1.1 创建版权声明组件Copyright

新建文件：src\components\common\Copyright.vue

<template><!-- 版权声明 --><div class="copyright">copyright xxx旅游网&copy;2024</div>
</template>
<style lang="less">
.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 

<template><div class="page-account-login"><!-- 导航条 --><van-nav-bar title="用户登录" left-text="返回" @click-left="goBack"></van-nav-bar><!-- 表单输入 --><van-form><!-- 文本框 --><van-field v-model="username" label="用户名" placeholder="用户名" maxlength="11" :rules="rulename" clearable /><!-- 密码框 --><van-field v-model="password" type="password" label="密码" placeholder="密码" :rules="[{ required: true }]" autocomplete="off"/><div><van-button square type="primary" native-type="submit" color="green">提交</van-button></div></van-form><!-- 文字提示 --><div>登录表示同意<a href="#">用户使用协议</a>及<a href="#">隐私条款</a></div><div>没有账户？<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 size="small" type="primary" @click.prevent="sendSmsCode()" :disabled="isSmsSend">{{ 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 class="page-account-register"><!-- 导航条 --><van-nav-bar title="用户注册" left-text="返回" left-arrow @click-left="goBack" /><!-- 表单输入 --><van-form @submit="onSubmit"><van-field v-model="form.username" label="手机号码" placeholder="手机号码" type="tel" maxlength="11" clearable:rules="ruleName" @input="onPhoneChange" /><van-field v-model="form.sms_code" center clearable label="短信验证码" placeholder="短信验证码":rules="[{ required: true, message: '请输入短信验证码' }]"><template #button><SendSmsCode ref="refSms" :phoneNum="form.username" /></template></van-field><van-field v-model="form.nickname" label="用户昵称" placeholder="用户昵称" maxlength="32" clearable:rules="[{ required: true, message: '请输入用户昵称' }]" /><van-field v-model="form.password" type="password" label="密码" placeholder="密码":rules="[{ required: true, message: '请填写密码' }]" autocomplete="off"/><van-field v-model="form.passwordRepeat" type="password" label="确认密码" placeholder="确认密码":rules="rulePassword" autocomplete="off" /><div style="margin: 16px;"><van-button round block type="info" native-type="submit">提交</van-button></div></van-form><!-- //表单输入 --><!-- 文字提示 --><div class="tips">注册表示同意 <a href="#">用户使用协议</a>及<a href="#">隐私条款</a></div><div class="tips">已有账号？ <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

<template><div class="page-mine"><!-- 标题栏 --><van-nav-bar title="个人中心" /><!-- 用户基本信息(头像/昵称) --><div class="user-header"><div class="avatar"><img src="/static/mine/avatar.png"></div><div><p>Welcome,Adela</p><a class="btn-link" href="#">退出登录</a></div></div><!-- 订单菜单列表 --><van-row><van-col span="6"><RouterLink to="/"><van-icon name="records" /><span>全部订单</span></RouterLink></van-col><van-col span="6"><RouterLink to="/"><van-icon name="pending-payment" /><span>待支付</span></RouterLink></van-col><van-col span="6"><RouterLink to="/"><van-icon name="tosend" /><span>已完成</span></RouterLink></van-col><van-col span="6"><RouterLink to="/"><van-icon name="logistics" /><span>已取消</span></RouterLink></van-col></van-row><!-- 底部导航 --><TripFooter /></div>
</template>

3.3 样式style(范例)

<style lang="less">
.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 图示效果：