vue crée une interface de connexion
(1) Créer une interface de connexion et une page d'accueil
Ouvrez le projet vue construit et créez un nouveau fichier Main.vue et Login.vue sous le dossier des composants. La situation du répertoire est la suivante :
|-------src
| |-- composants
| | |-- Main.vue
| | |-- Connexion.vue
| |-- routeur
| | |-- index.js
| |-- main.js
| |-- app.view
|------- index.html
(2) Configurer le routage
La configuration des sauts de page dans Vue peut être implémentée à l'aide du routage. Configurez /src/router/index.js comme suit :
import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/components/Login'
import Main from '@/components/Main'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Login',
component: Login,
meta:{
keepalive:false
}
},
{
path: '/Main',
name: 'Main',
component: Main,
meta:{
keepalive:true
}
}
]
})
(3) Configurer main.js
/src/main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App'
import router from './router'
Vue.config.productionTip = false;
Vue.use(ElementUI)
/* eslint-disable no-new */
var app = new Vue({
el: '#app',
/* 创建和挂载根实例 */
router,
components: {
App },
template: '<App/>'
})
(4) Configurer App.vue
Lors de la configuration d'App.vue, étant donné que la mise en page du système utilise la mise en page de la barre latérale d'Element UI, la page de connexion n'a pas besoin de la mise en page de la barre latérale, donc keep-alive combiné avec $route.meta est utilisé dans App.vue pour implémenter cette fonction. .
keep-alive est un composant abstrait fourni par Vue, qui est utilisé pour mettre en cache les composants afin d'économiser les performances et ne sera pas rendu dans un élément DOM après le rendu de la page. $route.meta peut choisir d'afficher uniquement les pages requises.
Dans le code suivant, el-header et router-view sont encapsulés avec keep-alive, et l'attribut keepalive est défini lors de la configuration du composant de routage à l'étape (2).
/src/App.vue
<template>
<div id="app">
<el-container v-if="$route.meta.keepalive">
<el-header class="header">
<keep-alive>
<v_Header></v_Header>
</keep-alive>
</el-header>
<el-container>
<el-aside style="width:200px; height:600px">
<keep-alive>
<v_leftmenu></v_leftmenu>
</keep-alive>
</el-aside>
<el-container>
<el-main>
<keep-alive>
<router-view></router-view>
</keep-alive>
</el-main>
<el-footer style=" padding-left: 0px;padding-right: 0px;">
<v_footer></v_footer>
</el-footer>
</el-container>
</el-container>
</el-container>
<router-view v-if="!$route.meta.keepalive"></router-view>
</div>
</template>
<script>
import LeftMenu from "./components/LeftMenu"
import Header from "./components/Header"
import Footer from './components/Footer'
export default {
name: 'App',
components: {
'v_Header': Header,
'v_leftmenu': LeftMenu,
'v_footer': Footer
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
.header{
line-height: 60px;
background-color: #545c64;
text-color: white;
}
</style>
L'interface de connexion sans keep-alive est définie comme indiqué ci-dessous :
(5) Page de connexion
/src/components/Login.vue
<template>
<div class="login">
<div>
<el-input placeholder="请输入用户名" v-model="name" clearable class="input_style"></el-input>
<span v-if="error.name" class="err-msg">{
{
error.name}}</span>
</div>
<div>
<el-input placeholder="请输入密码" v-model="pwd" show-password class="input_style"></el-input>
<span v-if="error.pwd" class="err-msg">{
{
error.pwd}}</span>
</div>
<div>
<el-button type="primary" @click="login" class="login_style">登录</el-button>
</div>
</div>
</template>
<script>
export default {
name: "Login",
data(){
return {
name: '',
pwd : '',
error : {
name: '',
pwd : ''
}
}
},
methods:{
login(){
const {
name, pwd, $router} = this
this.$router.push({
name: "Main",
params: {
username: this.name
}
});
}
}
}
</script>
<style>
.login{
margin-top: 200px;
}
.input_style{
width: 200px;
margin-bottom: 10px;
}
.login_style{
width: 200px;
}
</style>
Cette page de connexion implémente une simple fonction de saut. Le nom d'utilisateur et le mot de passe saisis n'ont pas encore été jugés. Ils seront améliorés à l'avenir ~
(6) Page principale
/src/components/Main.vue
<template>
<div class="main">
<h1>{
{
msg }}</h1>
</div>
</template>
<script>
export default {
data () {
return {
msg: 'Welcome to the main vue '
}
}
}
</script>
<style>
.main {
font-size: 30px;
color: #000000;
}
</style>
À ce stade, une simple fonction de connexion est terminée. Entrez sur la console de commande : npm run dev
Entrée du navigateurhttp:// localhost :8080, entrez dans la page de connexion :
Cliquez sur le bouton "Connexion" pour accéder à la page principale :
Composants utilisés
La zone de saisie utilise le contrôle de saisie ducomposant Element UI :
La zone de saisie "Nom d'utilisateur" utilise un style effaçable :
La zone de saisie "Mot de passe" utilise un style de mot de passe :
Le bouton "Connexion" utilise un style de bouton :
Lien de référence
https://www.cnblogs.com/coderWj/p/8639420.html
https://www.cnblogs.com/Smiled/p/7613965.html