記事ディレクトリ
1. ユーザー名、パスワード、ログインボタンを実装し、ユーザーフォームを記憶する
<template>
<LoginBackVue>
<div class="login_box">
<!-- 显示logo的地方 -->
<div class="log"></div>
<!-- 登录的表单 -->
<el-form>
<el-form-item>
<el-input prefix-icon="User" placeholder="请输入用户名"/>
</el-form-item>
<el-form-item>
<el-input prefix-icon="Lock" placeholder="请输入密码"/>
</el-form-item>
<el-form-item label="记住用户">
<el-switch />
</el-form-item>
<el-form-item>
<el-button color="#00608c" style="width: 100%" @click="onSubmit">登录</el-button>
</el-form-item>
</el-form>
</div>
</LoginBackVue>
</template>
<script>
import LoginBackVue from "@/components/LoginBack.vue";
export default{
components:{
LoginBackVue
}
}
</script>
<style scoped>
/* 设置登录框的宽高和位置居中 */
.login_box{
width: 500px;
height:350px;
margin: calc((100vh - 350px)/2) auto;
text-align: center;
color: white;
}
</style>
1. グローバル CSS コードは、asserts/css/global.css で定義されます。
/* --------------------登录页面--------------------- */
/* 修改element-plus 输入框表单的样式*/
.login_box .el-input__wrapper{
background: none;
box-shadow: none;
border-bottom: solid 1px #00608c;
border-radius: 0;
}
/* 修改输入框图表样式 */
.login_box .el-input__prefix{
color: #fff;
font-size: 20px;
}
main.js にインポートしてグローバルに有効にする
2. ユーザー名、パスワード、および記憶されているユーザーの双方向バインド
<template>
<LoginBackVue>
<div class="login_box">
<!-- 显示logo的地方 -->
<div class="log"></div>
<!-- 登录的表单 -->
<el-form>
<el-form-item>
<el-input v-model="loginForm.username" prefix-icon="User" placeholder="请输入用户名"/>
</el-form-item>
<el-form-item>
<el-input type="password" v-model="loginForm.password" prefix-icon="Lock" placeholder="请输入密码"/>
</el-form-item>
<el-form-item label="记住用户">
<el-switch v-model="loginForm.status" />
</el-form-item>
<el-form-item>
<el-button color="#00608c" style="width: 100%" @click="onSubmit">登录</el-button>
</el-form-item>
</el-form>
</div>
</LoginBackVue>
</template>
<script>
import LoginBackVue from "@/components/LoginBack.vue";
export default{
data(){
return{
loginForm:{
username:"",
password:"",
status:false
}
}
},
components:{
LoginBackVue
}
}
</script>
<style scoped>
/* 设置登录框的宽高和位置居中 */
.login_box{
width: 500px;
height:350px;
margin: calc((100vh - 350px)/2) auto;
text-align: center;
color: white;
}
</style>
3. ユーザーがいない場合は、登録機能をクリックして実現します
<template>
<LoginBackVue>
<div class="login_box">
<!-- 显示logo的地方 -->
<div class="log"></div>
<!-- 登录的表单 -->
<el-form>
<el-form-item>
<el-input v-model="loginForm.username" prefix-icon="User" placeholder="请输入用户名"/>
</el-form-item>
<el-form-item>
<el-input type="password" v-model="loginForm.password" prefix-icon="Lock" placeholder="请输入密码"/>
</el-form-item>
<el-form-item label="记住用户">
<el-switch v-model="loginForm.status" />
</el-form-item>
<el-form-item>
<el-button color="#00608c" style="width: 100%" @click="onSubmit">登录</el-button>
</el-form-item>
</el-form>
<div class="isregister">没有账号？
<span @click="register">点击注册</span>
</div>
</div>
</LoginBackVue>
</template>
<script>
import LoginBackVue from "@/components/LoginBack.vue";
export default{
data(){
return{
loginForm:{
username:"",
password:"",
status:false
}
}
},
methods:{
register(){
this.$message({
type:'warning',
message:"平台未开放注册功能"
})
}
},
components:{
LoginBackVue
}
}
</script>
<style scoped>
/* 设置登录框的宽高和位置居中 */
.login_box{
width: 500px;
height:350px;
margin: calc((100vh - 350px)/2) auto;
text-align: center;
color: white;
}
.isregister{
width: 100%;
text-align: left;
}
.isregister span{
color: turquoise;
cursor: pointer;
}
</style>
4. ユーザー名、パスワードを入力し、ログインボタンをクリックしてログインします。
1. フォーム入力ボックス、入力したデータをバインドします。
2. ログインボタンをクリックし、ログインを完了するためのリクエストを送信します。
<template>
<LoginBackVue>
<div class="login_box">
<!-- 显示logo的地方 -->
<div class="log"></div>
<!-- 登录的表单 -->
<el-form>
<el-form-item>
<el-input v-model="loginForm.username" prefix-icon="User" placeholder="请输入用户名"/>
</el-form-item>
<el-form-item>
<el-input type="password" v-model="loginForm.password" prefix-icon="Lock" placeholder="请输入密码"/>
</el-form-item>
<el-form-item label="记住用户">
<el-switch v-model="loginForm.status" />
</el-form-item>
<el-form-item>
<el-button color="#00608c" style="width: 100%" @click="submitLogin">登录</el-button>
</el-form-item>
</el-form>
<div class="isregister">没有账号？
<span @click="register">点击注册</span>
</div>
</div>
</LoginBackVue>
</template>
<script>
import LoginBackVue from "@/components/LoginBack.vue";
export default{
data(){
return{
loginForm:{
username:"",
password:"",
status:false
}
}
},
methods:{
// 点击登录的方法
async submitLogin(){
const response=await this.$api.login(this.loginForm)
if (response.status===200){
// 提示登录成功
this.$message({
type:"success",
message:"登录成功"
})
// 页面跳转(后面加)
this.$router.push({
"name":"home"})
}
},
// 点击注册
register(){
this.$message({
type:'warning',
message:"平台未开放注册功能"
})
}
},
components:{
LoginBackVue
}
}
</script>
<style scoped>
/* 设置登录框的宽高和位置居中 */
.login_box{
width: 500px;
height:350px;
margin: calc((100vh - 350px)/2) auto;
text-align: center;
color: white;
}
.isregister{
width: 100%;
text-align: left;
}
.isregister span{
color: turquoise;
cursor: pointer;
}
</style>
5. フォーム項目検証の実装
手順:
1. el-form タグの rules 属性をバインドし、検証ルール オブジェクトを指定します
2. data でバインディング検証ルールを定義します
3. el-form-item タグで検証フィールドを指定します。
<template>
<LoginBackVue>
<div class="login_box">
<!-- 显示logo的地方 -->
<div class="log"></div>
<!-- 登录的表单 -->
<el-form :rules="loginRules" :model="loginForm">
<el-form-item prop="username">
<el-input v-model="loginForm.username" prefix-icon="User" placeholder="请输入用户名"/>
</el-form-item>
<el-form-item prop="password">
<el-input type="password" v-model="loginForm.password" prefix-icon="Lock" placeholder="请输入密码"/>
</el-form-item>
<el-form-item label="记住用户">
<el-switch v-model="loginForm.status" />
</el-form-item>
<el-form-item>
<el-button color="#00608c" style="width: 100%" @click="submitLogin">登录</el-button>
</el-form-item>
</el-form>
<div class="isregister">没有账号？
<span @click="register">点击注册</span>
</div>
</div>
</LoginBackVue>
</template>
<script>
import LoginBackVue from "@/components/LoginBack.vue";
export default{
data(){
return{
// 登录输入的数据
loginForm:{
username:"",
password:"",
status:false
},
// 登录表单的校验规则
loginRules:{
// username的校验规则
username:[{
required:true,
message:"用户名不能为空",
trigger:'blur'
}],
// password的校验规则
password:[{
required:true,
message:"密码不能为空",
trigger:'blur'
},
{
min:4,
max:18,
message:"密码长度需要在6-18位之间",
trigger:'blur'
}]
}
}
},
methods:{
// 点击登录的方法
async submitLogin(){
const response=await this.$api.login(this.loginForm)
if (response.status===200){
// 提示登录成功
this.$message({
type:"success",
message:"登录成功"
})
// 页面跳转(后面加)
this.$router.push({
"name":"home"})
}else{
this.$message({
type:"error",
message:response.data
})
}
},
// 点击注册
register(){
this.$message({
type:'warning',
message:"平台未开放注册功能"
})
}
},
components:{
LoginBackVue
}
}
</script>
<style scoped>
/* 设置登录框的宽高和位置居中 */
.login_box{
width: 500px;
height:350px;
margin: calc((100vh - 350px)/2) auto;
text-align: center;
color: white;
}
.isregister{
width: 100%;
text-align: left;
}
.isregister span{
color: turquoise;
cursor: pointer;
}
</style>
6. フォームの事前確認を送信する
vue——》グローバル属性ページ内にref属性があるかどうかを確認し、あれば$ refs={ loginRef:要素(コンポーネント) }$refs={}
にref属性を追加します。$refs={}
1. el-form タグの ref 属性を使用して、メソッド内で定義されたメソッドをバインドします。
<el-form :model="loginForm" :rules="loginRules" ref="loginRef">
2. メソッドで参照を定義する
clickLogin(){
// 对登录的表单数据进行验证
this.$refs['loginRef'].validate((res)=>{
if(res){
this.submitLogin()
}
})
},
3. フォームの事前確認
methods:{
clickLogin(){
// 对登录的表单数据进行验证
this.$refs['loginRef'].validate((res)=>{
if(res){
this.submitLogin()
}
})
},
// 发送请求到后端
async submitLogin(){
const response=await this.$api.login(this.loginForm)
if(response.status===200){
// 提示登录成功
this.$message({
type:'success',
message:'登录成功'
})
// 页面跳转(后面加)
this.$router.push({
name:'index'})
}else{
this.$message({
type:'error',
message:response.data
})
}
},
register(){
this.$message({
type:'warning',
message:'平台暂时未开放注册功能'
})
}
},
7. アカウント番号とパスワードを覚えておいてください
1. トークンの保存
window.sessionStorage.setItem('token',response.data.token)
2. ユーザー名を保存する
window.sessionStorage.setItem('username',response.data.username)
3. ユーザーのアカウントとパスワードを記憶する必要があるかどうかを判断し、アカウントとパスワードを localStorage に保存します。
this.loginForm を json 形式のデータに変換する必要があることに特に注意してください。
if(this.loginForm.status){
// 将账号密码转换为json字符串
const uinfo=JSON.stringify(this.loginForm)
// 进行编码（加密）
const u=window.btoa(unescape(encodeURIComponent(uinfo)))
// 存储到localStorage
window.localStorage.setItem('uinfo：',u)
}
4. アカウントのパスワードを読み取ります
created(){
const uinfo=window.localStorage.getItem('uinfo')
// 判断是否有账号密码
if(uinfo){
// 进行解密
// const u= decodeURIComponent(escape(window.atob(uinfo)))
// 转化位js对象,保存到loginForm
this.loginForm =JSON.parse(uinfo)
}
}
5. アカウントとパスワードを記憶する必要がない場合は、localStorage 内の情報を削除します。
window.localStorage.removeItem('uinfo')
8. 書面によるログインページ
<template>
<LoginBackVue>
<div class="login_box">
<!-- 显示logo的地方 -->
<div class="log"></div>
<!-- 登录的表单 -->
<el-form :rules="loginRules" :model="loginForm" ref="loginRef">
<el-form-item prop="username">
<el-input v-model="loginForm.username" prefix-icon="User" placeholder="请输入用户名"/>
</el-form-item>
<el-form-item prop="password">
<el-input type="password" v-model="loginForm.password" prefix-icon="Lock" placeholder="请输入密码"/>
</el-form-item>
<el-form-item label="记住用户">
<el-switch v-model="loginForm.status" />
</el-form-item>
<el-form-item>
<el-button color="#00608c" style="width: 100%" @click="clickLogin">登录</el-button>
</el-form-item>
</el-form>
<div class="isregister">没有账号？
<span @click="register">点击注册</span>
</div>
</div>
</LoginBackVue>
</template>
<script>
import LoginBackVue from "@/components/LoginBack.vue";
export default{
data(){
return{
// 登录输入的数据
loginForm:{
username:"",
password:"",
status:false
},
// 登录表单的校验规则
loginRules:{
// username的校验规则
username:[{
required:true,
message:"用户名不能为空",
trigger:'blur'
}],
// password的校验规则
password:[{
required:true,
message:"密码不能为空",
trigger:'blur'
},
{
min:4,
max:18,
message:"密码长度需要在6-18位之间",
trigger:'blur'
}]
}
}
},
methods:{
clickLogin(){
// 对登录的表单数据进行校验
this.$refs['loginRef'].validate((res) =>{
if(res){
this.submitLogin()
}
})
},
// 点击登录的方法
async submitLogin(){
const response=await this.$api.login(this.loginForm)
if (response.status===200){
// 保存token,用户名
window.sessionStorage.setItem('token',response.data.token)
window.sessionStorage.setItem('uname',response.data.username)
// 判断是否需要记住用户名和密码
if(this.loginForm.status){
//将账号密码信息保存到localStorage中
// 将账号密码转换为json字符串
const uinfo=JSON.stringify(this.loginForm)
// 存储到localStorage
window.localStorage.setItem('uinfo',uinfo)
}else{
window.localStorage.removeItem('uinfo')
}
// 提示登录成功
this.$message({
type:"success",
message:"登录成功"
})
// 页面跳转(后面加)
this.$router.push({
"name":"index"})
}else{
this.$message({
type:"error",
message:response.data
})
}
},
// 点击注册
register(){
this.$message({
type:'warning',
message:"平台未开放注册功能"
})
}
},
components:{
LoginBackVue
},
created(){
const uinfo=window.localStorage.getItem('uinfo')
// 判断是否有账号密码
if(uinfo){
// 进行解密
// const u= decodeURIComponent(escape(window.atob(uinfo)))
// 转化位js对象,保存到loginForm
this.loginForm =JSON.parse(uinfo)
}
}
}
</script>
<style scoped>
/* 设置登录框的宽高和位置居中 */
.login_box{
width: 500px;
height:350px;
margin: calc((100vh - 350px)/2) auto;
text-align: center;
color: white;
}
.isregister{
width: 100%;
text-align: left;
}
.isregister span{
color: turquoise;
cursor: pointer;
}
</style>