Vue 실전 기록 로그 인 페이지 구현
1.1 Node.js 설치
홈 페이지 다운로드 주소:https://nodejs.org/zh-cn/
설치 완료 후 터미널 에
node -v버 전 번 호 를 입력 하 십시오.
npm 버 전 보기,
npm -v
1.2 웹 팩 설치
단말 입력
npm install --save-dev webpack
webpack -v
1.3 vue-cli 설치
vue 프로젝트 를 만 들 려 면 vue-cli 3 이상 의 시각 화 도 구 를 사용 하여 만 들 기 때문에 이 버 전 은 3 이상 의 버 전 을 선택 하 였 습 니 다.
npm install -g @vue/cli
npm update -g @vue/cli
npm uninstall vue-cli -g
vue-cli 를 설치 한 후 vue 가 제공 하 는 시각 화 도 구 를 사용 하여 vue 프로젝트 를 만 듭 니 다.
2.1 프로젝트 생 성
터미널 에
vue ui를 입력 하면 시각 화 도구 에 들 어 갑 니 다.
항목 을 만 들 경 로 를 선택 하 십시오.
프로젝트 폴 더 만 들 기
수 동 을 미리 설정 합 니 다.프로젝트 설정 을 수 동 으로 추가 합 니 다.
기능 설정 을 선택 한 후 바로 다음 단계 로 항목 을 만 듭 니 다.
프로젝트 생 성 을 기다 린 후
WebStore프로젝트 열기2.2 프로젝트 디 렉 터 리
2.3 Element UI 가 져 오기
ElementUI 홈 페이지 에서 바로 가 져 오 는 방식 을 볼 수 있 습 니 다.여기 서 모든 모듈 의 가 져 오 기 를 선택 하 십시오.
콘 솔 에 입력
npm install element-ui --save
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.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>
views 디 렉 터 리 에서 오른쪽 단 추 를 누 르 면 로그 인 이라는 vue 파일 을 만 듭 니 다.
ElementUI 홈 페이지 에서 레이아웃 구성 요 소 를 조회 하고 자신의 레이아웃 을 선택 하여 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 </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: {
//
username: '',
//
password: '',
//
code: '',
//
remember: false,
// key， ， session， vue
codeToken: ''
},
//
rules: {
//
username: [
{required: true, message: ' ', trigger: 'blur'},
{min: 3, max: 10, message: ' 3 10 ', trigger: 'blur'}
],
//
password: [
{required: true, message: ' ', trigger: 'blur'},
{min: 6, max: 15, message: ' 6 15 ', trigger: 'blur'}
],
//
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>
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 로그 인 기능 구현
4.1 axios 가 져 오기
vue 에 서 는 페이지,즉 view 만 담당 합 니 다.그러나 우리 가 로그 인하 면 배경 에서 검증 해 야 합 니 다.그러면 vue 에 서 는 통신 을 axios 에 맡 겨 처리 합 니 다.
콘 솔 터미널 에 입력
npm install axios --save
main.js 에 등록 하기
/* axios*/
import axios from "axios";
/* axios*/
Vue.prototype.$axios = axios;
qs 는 vue 에서 제공 하 는 플러그 인 입 니 다.문자열 을 분석 하 는 데 도움 을 줄 수도 있 고 매개 변 수 를 직렬 화 하 는 데 도 도움 을 줄 수 있 습 니 다.
콘 솔 터미널 에 입력
npm install qs --save
main.js 에 등록 하기
/* qs*/
import qs from 'qs';
/* */
Vue.prototype.$qs = qs;
콘 솔 터미널 에 입력
npm install mockjs --save-dev
mock 의 js 파일 을 만 들 고 빈 js 파일 을 만 들 며 이름 을 마음대로 짓 습 니 다.
main.js 에서 mock 가 져 오기
/* mock */
require('./mock/LoginService.js')
인증번호 가 져 오기:
//
getVerifyCodeImg() {
/* */
this.$axios.get('/getVerifyCode').then(res => {
// key
this.loginForm.codeToken = res.data.data.codeToken;
//
this.codeImg = res.data.data.codeImg;
})
}
// ， created
created() {
//
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;
}
});
}
<script>
import Element from 'element-ui';
import router from "@/router";
export default {
name: "Login",
data() {
return {
//
loginForm: {
//
username: '',
//
password: '',
//
code: '',
//
remember: false,
// key， ， session， vue
codeToken: ''
},
//
rules: {
//
username: [
{required: true, message: ' ', trigger: 'blur'},
{min: 3, max: 10, message: ' 3 10 ', trigger: 'blur'}
],
//
password: [
{required: true, message: ' ', trigger: 'blur'},
{min: 6, max: 15, message: ' 6 15 ', trigger: 'blur'}
],
//
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() {
//
this.getVerifyCodeImg();
}
}
</script>
이전에 새로 만 든 LoginService.js 에 mock 데 이 터 를 기록 합 니 다.
/* Mock*/
const Mock = require('mockjs');
const Random = Mock.Random;
/* */
let result = {
msg: '',
data: ''
}
/* */
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) => {
//
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 실전 기록 의 로그 인 페이지 구현 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 Vue 로그 인 페이지 내용 은 저희 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 읽 어 주시 기 바 랍 니 다.앞으로 도 많은 응원 부 탁 드 리 겠 습 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Fastapi websocket 및 vue 3(Composition API)1부: FastAPI virtualenv 만들기(선택 사항) FastAPI 및 필요한 모든 것을 다음과 같이 설치하십시오. 생성main.py 파일 및 실행 - 브라우저에서 이 링크 열기http://127.0.0.1:...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
