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ù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了vue keep-alive中的生命周期,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10![vue模塊導入報錯問題Module not found: Error:[CaseSensitivePathsPlugin]](http://img.jbzj.com/images/xgimg/bcimg1.png)
vue模塊導入報錯問題Module not found: Error:[CaseSensi
這篇文章主要介紹了vue模塊導入報錯問題Module not found: Error:[CaseSensitivePathsPlugin]，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
在使用Vue過渡動畫時,注意選擇器優(yōu)先級,謹慎合并樣式,Vue2中關于顯示隱藏的類名有v-enter、v-leave以及v-enter-active、v-leave-active等,這些可以用來定義動畫的持續(xù)時間和樣式,感興趣的朋友跟隨小編一起看看吧2024-09-09
這篇文章主要介紹了vue-router路由跳轉問題 replace，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
Vue中使用element-ui給按鈕綁定一個單擊事件實現(xiàn)點擊按鈕就彈出dialog對話框
最近遇到了個需求是使用element-ui插件編寫頁面,點擊按鈕,彈出對話框,這篇文章主要給大家介紹了關于Vue中使用element-ui給按鈕綁定一個單擊事件實現(xiàn)點擊按鈕就彈出dialog對話框的相關資料,需要的朋友可以參考下2022-11-11
這篇文章主要為大家詳細介紹了如何通過Vue實現(xiàn)交錯過渡動畫效果,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2024-11-11
這篇文章主要介紹了Vue通過axios發(fā)送ajax請求基礎演示,包括了axios發(fā)送簡單get請求，axios get傳參，axios發(fā)送post請求等基礎代碼演示需要的朋友可以參考下2023-02-02
這篇文章給大家分享了vue axios二次封裝的相關知識點等內容以及實例代碼，有興趣的朋友可以參考學習下。2018-07-07
這篇文章主要為大家介紹了VueJs中customRef函數(shù)使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-04-04
這篇文章主要介紹了Vue?FileManagerPlugin?報錯問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10