Vue学习二——创建登录页面

前言

以一个登录页面为例子，这篇文章简单介绍了vue，element-plus的一些组件使用，vue-router页面跳转，pinia及持久化存储，axios发送请求的使用。后面的页面都大差不差，也都这么实现，只是内容，页面布局会变一些。其他插件功能，用到再介绍。

一、实现效果图

在这里插入图片描述

一个大的div，class=main
在main这个div中，有一个div，class=“login_box”
login_box中，分上面部分，包含icon和标题；下面部分就是登录表单数据

<template><div class="main"><div class="login_box">		<div class="head"></div><div class="login-form" ></div></div></div>
</template>

二、页面内容

1.main

main只需要铺满整个页面，给个背景图就行。得到一个铺满页面的图片

.main{width: 100vw;height: 100vh;background: url('../../assets/bg.jpeg');background-size: cover;}

2.login_box

.login_box{width: 500px;height: 460px;box-shadow:  0 0 5px var(--el-color-primary);position:absolute;top:calc(50vh - 230px);left: calc(50vw - 250px);border-radius: 20px;background-color: rgba(255, 255, 255, 0.8);}

在这里插入图片描述

3. login_box -> head

<div class="head"><img src="@/assets/logo.jpeg" alt="logo" class="logo"><div class="title">接口自动化平台</div>
</div>

.head{display: flex;justify-content: center;align-items: center;height: 150px;.logo{width: 60px;height: 60px;border-radius: 50px;}.title{font-size: 30px;font-weight: bold;color: var(--el-color-primary);margin-left: 20px;}}

在这里插入图片描述
4. login_box -> login_form

<div class="login-form" ><el-form :model="loginForm"><el-form-item ><el-input prefix-icon="User" v-model="loginForm.username" placeholder="请输入用户名"/></el-form-item><el-form-item ><el-input type="password" prefix-icon="Lock" v-model="loginForm.password" placeholder="请输入密码"/></el-form-item><el-form-item><el-switch v-model="loginForm.status" inactive-text='记住登录状态' /></el-form-item><el-form-item><el-button  type="primary"  @click="LoginSubmit(loginFormRef)" style="width: 100%;">登 录</el-button></el-form-item><el-link @click="router.push('register')" type="primary">没有账号？点击注册</el-link></el-form>
</div>

.login-form{margin: 0 30px;}

在这里插入图片描述

三、数据绑定

1. 动态数据绑定

使用 v-bind：（可以简写为：）来进行动态数据绑定，

例如：将这里的登录按钮，是否可以点击设计为只有用户名和密码都不空才能点击。

可以设置disable属性，给这个属性动态绑定一个值‘canClick’，这个值是计算出来的

<el-form-item><el-button :disabled='canClick' type="primary"  @click="LoginSubmit(loginFormRef)" style="width: 100%;">登 录</el-button>
</el-form-item>// 未输入账号密码禁用登录
const canClick = computed(()=>{if (loginForm.username!=='' && loginForm.password!==''){return false}else{return true}})

计算属性computed

此时，没有输入账号密码，登录按钮就不能点击了。
在这里插入图片描述

更多关于计算属性可以参考： vue官网-计算属性

2. 双向绑定

v-model=" " 这样进行数据双向绑定

 <el-input type="password" prefix-icon="Lock" v-model="loginForm.password" placeholder="请输入密码"/>
...
<script setup>
const loginForm = reactive({username:"",password:"",status:true	
})
</script>

将input输入框的内容与loginForm.password双向绑定。

3. 响应式数据

ref 和 reactive 我自己理解来说，就是ref定义简单一个具有响应性类型数据，比如字符串，布尔值，数值。而reactive可以定义复合的内容。在更改他们值的时候，页面显示也会同时更改

他们区别简单来说，就是reactive只存储对象，而ref存储基本数据类型，比如数字、字符串等。
更多可以参考其他文档，这里不主要介绍这块，因为我自己也不是很懂,平时拿来简单用用就是了，没深入了解过。嘿嘿

ref和reactive官网介绍
ref和reactive区别

四、Element表单数据校验

elment-plus表单校验

1. 创建表单校验规则

Form 组件提供了表单验证的功能，只需为 rules 属性传入约定的验证规则，并将 form-Item 的 prop 属性设置为需要验证的特殊键值即可

	//表单校验规则const loginRules = reactive({username: [{ required: true, message: '账号不能为空', trigger: 'blur' },{ min: 4, max: 18, message: '账号长度4-18位', trigger: 'blur' },],password :[{ required: true, message: '密码不能为空', trigger: 'blur' },{ min: 6, max: 18, message: '密码长度6-18位', trigger: 'blur' },]})

2. 给Form组件加上规则

< el-form model="loginForm" :rules="loginRules" >

3. 将 form-item 的 prop 属性设置为需要验证的特殊键值

例如：

<el-form-item prop="username"><el-input prefix-icon="User" v-model="loginForm.username" placeholder="请输入用户名"/>
</el-form-item><el-form-item prop="password"><el-input type="password" prefix-icon="Lock" v-model="loginForm.password" placeholder="请输入密码"/>
</el-form-item>

校验规则是光标移出输入框校验，所以没有输入用户名，点到密码。就会提示自定义的校验规则内容
在这里插入图片描述

五、发送请求(后端接口使用之前fastapi项目)

在api/module/UserApi.js里，定义所有用户相关的接口

1. 用户登录模块接口

// api/module/UserApi.js
import request from "@/api/request";//导出请求方法
export default {//登录loginApi(data){return request.post('/api/users/login/',data)},
}

在这里插入图片描述

这个接口是之前fastapi栏写的，这里直接用。
在这里插入图片描述

2. 使用表单引用对象

在点击登录时，将表单引用对象传过去。首先进行表单预校验，预校验通过后，再调用接口，这样不会浪费资源

<el-form :model="loginForm" :rules="loginRules" ref='loginFormRef'>
......
<el-form-item><el-button :disabled='canClick' type="primary"  @click="LoginSubmit(loginFormRef)" style="width: 100%;">登 录</el-button>
</el-form-item><script setup>import http from '@/api/index'...const loginFormRef=ref(null)...const LoginSubmit = async(loginRef)=>{//表单预校验await loginRef.validate(async (valid)=>{if(valid){const response = await http.user.loginApi(loginForm)if(response.status === 200){ElNotification({title: '登录成功',message: '您已登录成功，进入首页',type: 'success',duration: 3,})}else{ElMessage({message: response.data.detail,type: 'error',duration: 3,})}}})}
</script>

elemet-plus通知消息弹窗

为了页面效果更美观，点击后得到反馈结果。使用了这个消息弹窗

import { ElNotification,ElMessage} from 'element-plus'

Feedback 反馈组件

3. 发送请求（跨域问题）

在这里插入图片描述
能看到这里发送请求成功了，前端请求这块是没问题了。
应该是跨域配置有问题，一般是服务端配置问题。
重新配置了一下服务端，现在可以正常访问了。

# pyhton服务端
origins = ['http://127.0.0.1:5173',"http://localhost:5173"]app.add_middleware(CORSMiddleware,allow_origins=origins,allow_credentials=True,allow_methods=["GET", "POST", "PUT", "DELETE", "OPTIONS", "PATCH"],allow_headers=["*"],
)

在这里插入图片描述

六、pinia数据持久化

1. 下载pinia-plugin-persist

npm install pinia-plugin-persist

2.注册插件

//main.jsimport { createPinia } from 'pinia'
import piniaPluginPersist from 'pinia-plugin-persist'// 创建一个pinia
const pinia = createPinia()// 将持久化的插件注册到pinia中
pinia.use(piniaPluginPersist)app.use(pinia)

3.在store中设置

在store下创建UserStore.js用来存储用户相关的信息，
使用localStorage来存储数据，也可以使用sessionStorage，看个人需求。

localStorage：数据的持久化程度高，即使用户关闭浏览器后，数据依然会被保留。除非显式删除，数据可以一直存在，适用于持久保存用户偏好设置、用户认证信息等需要长时间保存的数据。
sessionStorage：数据仅在浏览器的会话期间有效。一旦关闭页面或标签页，数据就会被清除，适用于存储临时性的数据，如表单状态、页面之间的传递数据等。

在这里插入图片描述

import {defineStore} from 'pinia'export const UserStore = defineStore('ustore',{//全局数据state:()=>{return {token:null,userinfo:null,isLogin:false}},// 定义持久化配置persist:{enabled:true,strategies:[{key:'userInfo',storage:localStorage}]}})

4. 在需要用到的地方进行使用

以登录成功为例，登录后保存用户token和用户信息。

//LoginView.vueimport{UserStore} from '@/stores/UserStore'//创建用户store对象
const uStore = UserStore()
...LoginSubmit()=>{...
...
//登录成功后保存用户信息//保存用户token和用户信息uStore.token = response.data.tokenuStore.userinfo = response.data.user// 修改认证状态if(loginForm.status){uStore.isLogin = true}}

最开始localStorage没有存储数据
在这里插入图片描述
登录成功后，就把数据记录下来了key:'userInfo'

七、页面跳转及其他页面使用pinia存储的数据

实现一个功能：登录成功后，需要跳转首页，首页展示token信息。

1. 创建一个home页面

在这里插入图片描述

2. 注册路径

在router/index中注册home的路径
在这里插入图片描述

3. 登录成功跳转

在登录页面，进行跳转

import {useRouter} from 'vue-router'//创建路由对象
const router = useRouter()...
//登录成功，跳转home页面router.push({name:"home"})

在这里插入图片描述

项目相关部分代码

LoginView.vue

<template><div class="main"><div class="login_box">		<div class="head"><img src="@/assets/logo.jpeg" alt="logo" class="logo"><div class="title">接口自动化平台</div></div><div class="login-form" ><el-form :model="loginForm" :rules="loginRules" ref='loginFormRef'><el-form-item prop="username"><el-input prefix-icon="User" v-model="loginForm.username" placeholder="请输入用户名"/></el-form-item><el-form-item prop="password"><el-input type="password" prefix-icon="Lock" v-model="loginForm.password" placeholder="请输入密码"/></el-form-item><el-form-item><el-switch v-model="loginForm.status" inactive-text='记住登录状态' /></el-form-item><el-form-item><el-button :disabled='canClick' type="primary"  @click="LoginSubmit(loginFormRef)" style="width: 100%;">登 录</el-button></el-form-item><el-link @click="router.push('register')" type="primary">没有账号？点击注册</el-link></el-form></div></div></div>
</template><script setup>import {reactive,ref,computed} from 'vue'import http from '@/api/index'import { ElNotification,ElMessage} from 'element-plus'import{UserStore} from '@/stores/UserStore'import {useRouter} from 'vue-router'//创建路由对象const router = useRouter()//创建用户store对象const uStore = UserStore()const loginFormRef=ref(null)const loginForm = reactive({username:"",password:"",status:true	})const canClick = computed(()=>{if (loginForm.username!=='' && loginForm.password!==''){return false}else{return true}})//表单校验规则const loginRules = reactive({username: [{ required: true, message: '账号不能为空', trigger: 'blur' },{ min: 4, max: 18, message: '账号长度4-18位', trigger: 'blur' },],password :[{ required: true, message: '密码不能为空', trigger: 'blur' },{ min: 6, max: 18, message: '密码长度6-18位', trigger: 'blur' },]})const LoginSubmit = async(loginRef)=>{console.log('click!!!')//表单预校验await loginRef.validate(async (valid)=>{if(valid){const response = await http.user.loginApi(loginForm)if(response.status === 200){ElNotification({title: '登录成功',message: '您已登录成功，进入首页',type: 'success',duration: 3000,})//保存用户token和用户信息uStore.token = response.data.tokenuStore.userinfo = response.data.user// 修改认证状态if(loginForm.status){uStore.isLogin = true}// 跳转到home页面router.push({name:"home"})}else{ElMessage({message: response.data.detail,type: 'error',duration: 3,})}}})}
</script><style scoped lang='scss'>.main{width: 100vw;height: 100vh;/* background: url('../assets/hz.svg'); */background: url('../../assets/bg.jpeg');background-size: cover;.login_box{width: 500px;height: 460px;box-shadow:  0 0 5px var(--el-color-primary);position:absolute;top:calc(50vh - 230px);left: calc(50vw - 250px);border-radius: 20px;background-color: rgba(255, 255, 255, 0.8);}.head{display: flex;justify-content: center;align-items: center;height: 150px;.logo{width: 60px;height: 60px;border-radius: 50px;}.title{font-size: 30px;font-weight: bold;color: var(--el-color-primary);margin-left: 20px;}}.login-form{margin: 0 30px;}}</style>

stores/UserStore.js

import {defineStore} from 'pinia'export const UserStore = defineStore('ustore',{//全局数据state:()=>{return {token:null,userinfo:null,isLogin:false}},// 定义持久化配置persist:{enabled:true,strategies:[{key:'userInfo',storage:localStorage}]}})

router/index.js

import { createRouter, createWebHistory } from 'vue-router'
// import HomeView from '../views/HomeView.vue'const router = createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes: [{path:'/',redirect:'/login'},{path: '/login',name: 'login',component: () => import('../views/User/LoginView.vue'),},{path: '/home',name: 'home',component: () => import('../views/Home/HomeView.vue'),},], 
})export default router

main.js

import './assets/main.css'import { createApp } from 'vue'
import { createPinia } from 'pinia'
import piniaPluginPersist from 'pinia-plugin-persist'import App from './App.vue'
import router from './router'import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'//语言国际化
import zhCn from 'element-plus/es/locale/lang/zh-cn'//icon组件
import * as ElementPlusIconsVue from '@element-plus/icons-vue'const app = createApp(App)//注册element-plus语言国际化
app.use(ElementPlus, {locale: zhCn,
})//注册elemnt-plus的icon组件
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {app.component(key, component)
}// 创建一个pinia
const upinia = createPinia()// 将持久化的插件注册到pinia中
upinia.use(piniaPluginPersist)app.use(upinia)
app.use(router)app.mount('#app')