Vue實戰(zhàn)記錄之登陸頁面的實現(xiàn)
更新時間：2021年06月11日 09:57:43 作者：Moon&&Dragon
最近學習過程中常碰到讓用戶登錄注冊這種,這篇文章主要給大家介紹了關于Vue實戰(zhàn)記錄之登陸頁面實現(xiàn)的相關資料,需要的朋友可以參考下
1 前期準備
1.1 安裝Node.js
官網(wǎng)下載地址：https://nodejs.org/zh-cn/
安裝完成后，在終端輸入node -v來查詢版本號
查看npm版本，npm -v
1.2 安裝webpack
終端輸入
npm install --save-dev webpack
查看版本webpack -v
1.3 安裝vue-cli
因為創(chuàng)建vue項目使用vue-cli3以上才有的可視化工具來創(chuàng)建，所以這里的版本選擇的是3以上的版本
npm install -g @vue/cli
升級vue-cli
npm update -g @vue/cli
卸載vue-cli
npm uninstall vue-cli -g
2 搭建Vue項目
安裝好vue-cli后，使用vue提供的可視化工具來創(chuàng)建一個vue項目
2.1 創(chuàng)建項目
在終端輸入vue ui，則會進入可視化工具
選擇創(chuàng)建項目的路徑
創(chuàng)建項目文件夾
預設選擇手動，我們手動添加項目的配置
選擇好功能配置后，直接下一步，直接創(chuàng)建項目
等待項目創(chuàng)建好以后，在WebStore打開項目
2.2 項目目錄
2.3 導入Element UI
直接在ElementUI官網(wǎng)就可以看到導入方式，這里選擇全部模塊的導入
在控制臺輸入
npm install element-ui --save
在main.js引用
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
Vue.config.productionTip = false
/*導入ElementUI*/
import elementUI from 'element-ui';
/*導入ElementUI的CSS樣式*/
import 'element-ui/lib/theme-chalk/index.css';
/*Vue使用ElementUI*/
Vue.use(elementUI);
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
3 實現(xiàn)登陸頁面
3.1 修改App.vue
這里把全局的設置先進行一個設置，把之前的模版的東西刪掉
<template>
<div id="app">
<router-view/>
</div>
</template>
<style>
</style>
修改全局樣式
<template>
<div id="app">
<!--路由頁面-->
<router-view/>
</div>
</template>
<style>
/*全局的父類高度*/
html {
height: 100%;
}
/*重置body屬性*/
body {
padding: 0;
margin: 0;
/*繼承html*/
height: 100%;
}
/*#app的高度也需要繼承*/
#app {
height: 100%;
}
/*全局鏈接標簽去下劃線*/
a {
text-decoration: none;
}
</style>
3.2 創(chuàng)建Login.vue
在views目錄下右鍵創(chuàng)建一個vue文件，命名為Login
在ElementUI官網(wǎng)查詢布局組件，選擇自己的布局，復制到vue文件中
<template>
<!-- 一行的元素 -->
<el-row type="flex" class="row-bg" justify="center">
<!--第一列-->
<el-col :span="6">
<div class="grid-content bg-purple"></div>
</el-col>
<!--第二列-->
<el-col :span="6">
<div class="grid-content bg-purple-light"></div>
</el-col>
<!--第三列-->
<el-col :span="6">
<div class="grid-content bg-purple"></div>
</el-col>
</el-row>
</template>
<script>
export default {
name: "Login"
}
</script>
<style scoped>
</style>
復制表單，這里復制的是帶驗證的表單，復制完以后對表單進行修改
<template>
<div :xl="6" :lg="7" class="bg-login">
<!--logo-->
<el-image :src="require('@/assets/logo.png')" class="logo"/>
<!--標題-->
<el-row type="flex" class="row-bg row-two" justify="center" align="middle">
<el-col :span="6"></el-col>
<el-col :span="6">
<!--標題-->
<h1 class="title">xAdmin管理系統(tǒng)</h1>
</el-col>
<el-col :span="6"></el-col>
</el-row>
<!--form表單-->
<el-row type="flex" class="row-bg card" justify="center" align="bottom">
<el-col :span="7" class="login-card">
<!--loginForm-->
<el-form :model="loginForm" :rules="rules" ref="loginForm" label-width="21%" class="loginForm">
<el-form-item label="賬戶" prop="username" style="width: 380px">
<el-input v-model="loginForm.username"></el-input>
</el-form-item>
<el-form-item label="密碼" prop="password" style="width: 380px">
<el-input type="password" v-model="loginForm.password"></el-input>
</el-form-item>
<el-form-item label="驗證碼" prop="code" style="width: 380px">
<el-input v-model="loginForm.code" class="code-input" style="width: 70%;float: left"></el-input>
<!--驗證碼圖片-->
<el-image :src="codeImg" class="codeImg"></el-image>
</el-form-item>
<el-form-item label="記住密碼" prop="remember">
<el-switch v-model="loginForm.remember"></el-switch>
</el-form-item>
<el-form-item class="btn-ground">
<el-button type="primary" @click="submitForm('loginForm')">立即登陸</el-button>
<el-button @click="resetForm('loginForm')">重置</el-button>
</el-form-item>
</el-form>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
name: "Login",
data() {
return {
// 表單信息
loginForm: {
// 賬戶數(shù)據(jù)
username: '',
// 密碼數(shù)據(jù)
password: '',
// 驗證碼數(shù)據(jù)
code: '',
// 記住密碼
remember: false,
// 驗證碼的key，因為前后端分離，這里驗證碼不能由后臺存入session，所以交給vue狀態(tài)管理
codeToken: ''
},
// 表單驗證
rules: {
// 設置賬戶效驗規(guī)則
username: [
{required: true, message: '請輸入賬戶', trigger: 'blur'},
{min: 3, max: 10, message: '長度在 3 到 10 個字符的賬戶', trigger: 'blur'}
],
// 設置密碼效驗規(guī)則
password: [
{required: true, message: '請輸入密碼', trigger: 'blur'},
{min: 6, max: 15, message: '長度在 6 到 15 個字符的密碼', trigger: 'blur'}
],
// 設置驗證碼效驗規(guī)則
code: [
{required: true, message: '請輸入驗證碼', trigger: 'blur'},
{min: 5, max: 5, message: '長度為 5 個字符', trigger: 'blur'}
]
},
// 綁定驗證碼圖片
codeImg: null
};
},
methods: {
// 提交表單
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
// 表單驗證成功
alert('submit')
} else {
console.log('error submit!!');
return false;
}
});
},
// 重置表單
resetForm(formName) {
this.$refs[formName].resetFields();
}
},
}
</script>
<style scoped>
.codeImg {
/*讓驗證碼圖片飄在右邊*/
float: right;
/*設置一些圓角邊框*/
border-radius: 3px;
/*設置寬度*/
width: 26%;
}
.bg-login {
height: 100%;
background-image: url("../assets/backgroud.jpg");
background-size: 200%;
}
.btn-ground {
text-align: center;
}
.logo {
margin: 30px;
height: 70px;
width: 70px;
position: fixed;
}
.title {
text-shadow: -3px 3px 1px #5f565e;
text-align: center;
margin-top: 60%;
color: #41b9a6;
font-size: 40px;
}
.login-card {
background-color: #ffffff;
opacity: 0.9;
box-shadow: 0 0 20px #ffffff;
border-radius: 10px;
padding: 40px 40px 30px 15px;
width: auto;
}
</style>
3.3 配置路由
在router下的index.js中進行配置
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import Login from '../views/Login.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
// 配置登陸頁面的路由
{
path: '/login',
name: 'login',
component: Login
}
]
const router = new VueRouter({
routes
})
export default router
效果圖：
4 實現(xiàn)登陸功能
4.1 導入axios
在vue里面，是只負責頁面，也就是view，但是我們登陸的話肯定是需要在后臺進行驗證的，那么vue里面，通訊是交給了axios來處理的
在控制臺終端輸入
npm install axios --save
回車，則會自動導入模塊
在main.js中進行注冊
/*導入axios*/ import axios from "axios"; /*全局綁定axios*/ Vue.prototype.$axios = axios;
4.2 導入qs和Mock
qs是在vue中提供的一個插件，可以幫助我們把字符串進行解析，也可以幫助我們把參數(shù)序列化
在控制臺終端輸入
npm install qs --save
回車，則會自動導入模塊
在main.js中進行注冊
/*導入qs*/ import qs from 'qs'; /*全局綁定*/ Vue.prototype.$qs = qs;
因為現(xiàn)在沒有后臺的設計，我們拿不到數(shù)據(jù)庫的數(shù)據(jù)，所以使用Mock來模擬后端的數(shù)據(jù)
在控制臺終端輸入
npm install mockjs --save-dev
回車，則會自動導入模塊
創(chuàng)建一個mock的js文件，創(chuàng)建一個空白的js文件，命名隨意
在main.js中進行導入mock
/*引入mock數(shù)據(jù)*/
require('./mock/LoginService.js')
4.3 編寫提交js
獲取驗證碼：
// 獲取驗證碼方法
getVerifyCodeImg() {
/*獲取驗證碼*/
this.$axios.get('/getVerifyCode').then(res => {
// 獲取驗證碼key
this.loginForm.codeToken = res.data.data.codeToken;
// 獲取驗證碼圖片
this.codeImg = res.data.data.codeImg;
})
}
// 因為在頁面渲染好以后我們就需要去獲取驗證碼，所以綁定在created下
created() {
// 頁面渲染完成后執(zhí)行獲取驗證碼方法
this.getVerifyCodeImg();
}
表單提交：
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
// 表單驗證成功
this.$axios.post('/login', this.loginForm).then(res => {
// 拿到結果
let result = JSON.parse(res.data.data);
let message = res.data.msg;
// 判斷結果
if (result) {
/*登陸成功*/
Element.Message.success(message);
/*跳轉頁面*/
router.push('/')
} else {
/*打印錯誤信息*/
Element.Message.error(message);
}
})
} else {
console.log('error submit!!');
return false;
}
});
}
完整的js
<script>
import Element from 'element-ui';
import router from "@/router";
export default {
name: "Login",
data() {
return {
// 表單信息
loginForm: {
// 賬戶數(shù)據(jù)
username: '',
// 密碼數(shù)據(jù)
password: '',
// 驗證碼數(shù)據(jù)
code: '',
// 記住密碼
remember: false,
// 驗證碼的key，因為前后端分離，這里驗證碼不能由后臺存入session，所以交給vue狀態(tài)管理
codeToken: ''
},
// 表單驗證
rules: {
// 設置賬戶效驗規(guī)則
username: [
{required: true, message: '請輸入賬戶', trigger: 'blur'},
{min: 3, max: 10, message: '長度在 3 到 10 個字符的賬戶', trigger: 'blur'}
],
// 設置密碼效驗規(guī)則
password: [
{required: true, message: '請輸入密碼', trigger: 'blur'},
{min: 6, max: 15, message: '長度在 6 到 15 個字符的密碼', trigger: 'blur'}
],
// 設置驗證碼效驗規(guī)則
code: [
{required: true, message: '請輸入驗證碼', trigger: 'blur'},
{min: 5, max: 5, message: '長度為 5 個字符', trigger: 'blur'}
]
},
// 綁定驗證碼圖片
codeImg: null
};
},
methods: {
// 提交表單
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
// 表單驗證成功
this.$axios.post('/login', this.loginForm).then(res => {
// 拿到結果
let result = JSON.parse(res.data.data);
let message = res.data.msg;
// 判斷結果
if (result) {
/*登陸成功*/
Element.Message.success(message);
/*跳轉頁面*/
router.push('/')
} else {
/*打印錯誤信息*/
Element.Message.error(message);
}
})
} else {
console.log('error submit!!');
return false;
}
});
},
// 重置表單
resetForm(formName) {
this.$refs[formName].resetFields();
},
// 獲取驗證碼方法
getVerifyCodeImg() {
/*獲取驗證碼*/
this.$axios.get('/getVerifyCode').then(res => {
// 獲取驗證碼key
this.loginForm.codeToken = res.data.data.codeToken;
// 獲取驗證碼圖片
this.codeImg = res.data.data.codeImg;
})
}
},
created() {
// 頁面渲染完成后執(zhí)行獲取驗證碼方法
this.getVerifyCodeImg();
}
}
</script>
4.4 編寫Mock測試數(shù)據(jù)
在之前新建的LoginService.js下寫入mock數(shù)據(jù)
/*綁定Mock*/
const Mock = require('mockjs');
const Random = Mock.Random;
/*設置一個返回數(shù)據(jù)的通用結果*/
let result = {
msg: '',
data: ''
}
/*模擬數(shù)據(jù)庫信息*/
let username = 'xiaolong';
let password = '123456';
let verityCode = 'abcde';
/**
* 模擬驗證碼
*/
Mock.mock('/getVerifyCode', 'get', () => {
result.data = {
codeToken: Random.string(32),
codeImg: Random.dataImage('75x40', verityCode)
}
return result;
})
/**
* 攔截登陸請求
*/
Mock.mock('/login', 'post', (req) => {
// 獲取請求數(shù)據(jù)
let from = JSON.parse(req.body);
//判斷驗證碼
if (verityCode === from.code) {
// 驗證賬戶
if (username === from.username) {
// 驗證密碼
if (password === from.password) {
result.msg = '登陸成功'
result.data = 'true'
} else {
result.msg = '密碼錯誤'
result.data = 'false'
}
} else {
result.msg = '用戶不存在'
result.data = 'false'
}
} else {
result.msg = '驗證碼錯誤'
result.data = 'false'
}
return result;
})
總結
到此這篇關于Vue實戰(zhàn)記錄之登陸頁面實現(xiàn)的文章就介紹到這了,更多相關Vue登陸頁面內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
本篇文章主要介紹了淺談Vuex狀態(tài)管理(全家桶)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
vue 監(jiān)聽 Treeselect 選擇項的改變操作
這篇文章主要介紹了vue 監(jiān)聽 Treeselect 選擇項的改變操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
vue-cli3.0+element-ui上傳組件el-upload的使用
這篇文章主要介紹了vue-cli3.0+element-ui上傳組件el-upload的使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
這篇文章主要介紹了vue-datepicker的使用，本文通過實例代碼大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-07-07
這篇文章主要介紹了關于VanCascader默認值(地址code轉換),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
?vue-admin-template是基于vue-element-admin的一套后臺管理系統(tǒng)基礎模板（最少精簡版），可作為模板進行二次開發(fā)，這篇文章主要介紹了vue-admin-template框架搭建及應用,需要的朋友可以參考下2023-05-05
這篇文章主要介紹了vue實現(xiàn)平滑過渡的拖拽排序功能,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-06-06
如何使用yarn創(chuàng)建vite+vue3&&electron多端運行
這篇文章主要介紹了如何使用yarn創(chuàng)建vite+vue3&&electron多端運行,本文分步驟給大家介紹的非常詳細，包括使用yarn創(chuàng)建vite+vue3項目會遇到哪些問題，感興趣的朋友跟隨小編一起看看吧2024-03-03
如何使用elementUI組件實現(xiàn)表格的分頁及搜索功能
最近在使用element-ui的表格組件時,遇到了搜索框功能的實現(xiàn)問題,這篇文章主要給大家介紹了關于如何使用elementUI組件實現(xiàn)表格的分頁及搜索功能的相關資料,需要的朋友可以參考下2023-03-03
這篇文章主要為大家詳細介紹了Vue.js實現(xiàn)音樂播放器，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06