第四章 登陆页

Posted txfan

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了第四章 登陆页相关的知识,希望对你有一定的参考价值。

       首先,我们先安装ElementUI。运行vue ui,搜索依赖,安装

技术分享图片

  在main.js添加使用两个引用,一个加载。 

import Vue from ‘vue‘
import App from ‘./App.vue‘
import router from ‘./router‘
import ElementUI from ‘element-ui‘
import ‘element-ui/lib/theme-chalk/index.css‘;

Vue.config.productionTip = false

Vue.use(ElementUI);

new Vue({
  router,
  render: h => h(App)
}).$mount(‘#app‘)

 

       我们先来调整一下App.vue中样式

<style lang="scss">
    #app {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        color: #2c3e50;
    }
</style>

 

       然后是login.vue,目前我们没有后台,用户名和密码暂时写死在前台:admin/123456

技术分享图片
 1 <template>
 2     <div class="login-page-container">
 3         <el-form :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left" label-width="0px"
 4                  class="demo-ruleForm login-container">
 5             <h3 class="title">系统登录</h3>
 6             <el-form-item prop="account">
 7                 <el-input type="text" v-model="loginForm.account" auto-complete="off" placeholder="账号"></el-input>
 8             </el-form-item>
 9             <el-form-item prop="password">
10                 <el-input type="password" v-model="loginForm.password" auto-complete="off" placeholder="密码"></el-input>
11             </el-form-item>
12             <el-form-item style="width:100%;">
13                 <el-button type="primary" style="width:100%;" @click="submit" :loading="loading">登录</el-button>
14             </el-form-item>
15         </el-form>
16     </div>
17 </template>
18 <script>
19     export default {
20         props: {},
21         data() {
22             return {
23                 loading: false,
24                 loginForm: {
25                     account: ‘‘,
26                     password: ‘‘
27                 },
28                 loginRules: {
29                     account: [{
30                         required: true,
31                         message: 请输入账号,
32                         trigger: blur
33                     },
34                     ],
35                     password: [{
36                         required: true,
37                         message: 请输入密码,
38                         trigger: blur
39                     },
40                     ]
41                 },
42                 checked: true
43             };
44         },
45         methods: {
46             submit() {
47                 var self = this;
48                 self.$refs.loginForm.validate((valid) => {
49                     if (valid) {
50                         self.loading = true;
51                         var userInfo = {
52                             username: this.loginForm.account,
53                             password: this.loginForm.password,
54                         };
55                         if (userInfo.username == "admin" && userInfo.password == "123456") {
56                             self.loading = false;
57                             self.$router.push({path: /});
58                         } else {
59                             self.loading = false;
60                             self.$alert(用户名或密码错误!, 提示信息, {
61                                 confirmButtonText: 确定
62                             });
63                         }
64                     } else {
65                         return false;
66                     }
67                 });
68             }
69         }
70     }
71 </script>
72 <style lang="scss">
73     .login-container {
74         -webkit-border-radius: 10px;
75         -moz-border-radius: 10px;
76         border-radius: 10px;
77         background-clip: padding-box;
78         margin: 200px auto;
79         width: 350px;
80         padding: 25px 35px 25px;
81         background: #fff;
82         border: 1px solid #eaeaea;
83         box-shadow: 0 0 25px #ccc;
84     }
85 
86     .title {
87         text-align: center;
88     }
89 </style>
login.vue

 

以上是关于第四章 登陆页的主要内容,如果未能解决你的问题,请参考以下文章

微信小程序代码片段

如果在 WebView 片段中按下后退按钮,如何返回上一页?

(转)博客园登陆__JSEncrypt 分析

publiccms中将推荐页的内容显示在页面片段中

深入理解DOM节点类型第四篇——文档片段节点DocumentFragment

$router.push跳转到登陆页,会再次触发当前页的请求?