devbox
运维做开发
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Vue登录第1版_vue验证用户名和密码

作者：运维做开发 | 2024-06-22 13:21:11

赞

踩

vue验证用户名和密码

        在D:\vue-project文件夹中创建了一个名称为“lighthouse-vue”的Vue项目，下面在这个项目的基础上，完成该项目的登录界面，这里称为Vue登录第1版。

        Vue登录第1版采用最简单的形式进行登录认证，具体是：

        使用Vue完成登录界面，用户只需要输入用户名和密码，并事先给出用户名为“admin”和密码为“123456”，然后采用JS进行登录验证，如果用户输入的用户名和密码与事先设置的用户名和密码相等，则登录成功；如果都为空，提示输入用户名和密码；如果不相等，则提示用户名或密码错误。

        整个登录暂不涉及后端代码。

      2.1.1  创建全局样式表

        为了让登录界面不太丑陋，且居中显示，创建一个全局样式表来管理登录界面的样式。具体如下：

        在src\assets目录下，创建一个css文件夹，用于放置css文件夹或目录。对于全局样式表的css文件，可以取名为：global.css。在css目录下创建一个global.css文件。

        程序清单2.1是global.css全局样式表的代码。

        程序清单2.1  global.css。

  1. /* 全局样式表 */
  2. html,body,#app{
  3.     height: 100%;
  4.     margin: 0;
  5.     padding: 0;
  6.     min-width: none;
  7.     background: #ececf4;
  8. }
   程序清单2.1说明省略。

      2.1.2  创建登录视图

        在src目录下，创建一个views视图目录，用于放置视图文件。在views目录下创建一个登录的视图文件Login.vue，完成登录界面的实现。

        程序清单2.2是Login.vue的代码。

        程序清单2.2  Login.vue。

  1. <template lang="">
  2.   <div class="login" id="login">
  3.     <div class="input-wrap">
  4.       <label for="male">账  号：</label>
  5.       <input type="text" v-model="username" placeholder="请输入账号"/>
  6.       
  7.     </div>
  8.     <div class="input-wrap">
  9.       <label for="male">密  码：</label>
  10.       <input type="password" v-model="password" placeholder="请输入密码"/>
  11.     </div>
  12.     <div class="input-wrap">
  13.        <!-- <button v-on:click="login">登录账号</button>&nbsp;&nbsp; -->
  14.       <button @click="login">登录</button>&nbsp;&nbsp;
  15.       <button @click="login">注册</button>
  16.     </div>
  17.   </div>
  18. </template>
  19. <script>
  20. export default {
  21.   data () {
  22.     return {
  23.       username: '',
  24.       password: ''
  25.     }
  26.   },
  27.   methods: {
  28.     login () {      
  29.       const {username, password} = this
  30.       // 等同于如下语句：
  31.       // const username = this.username
  32.       // const password = this.password
  33.  
  34.       if (username === 'admin' && password === '123456') {
  35.         alert("登录成功！")
  36.       } else if(username.length == 0 || password.length == 0) {
  37.         alert('请输入用户名或密码！')
  38.       }else{
  39.         alert('登录失败！')
  40.       }   
  41.     }
  42.   }
  43. }
  44. </script>
  45.  
  46. <style>
  47. .login {
  48.   position: absolute;
  49.   top: 0;
  50.   right: 0;
  51.   bottom: 0;
  52.   left: 0;
  53.   width: 300px;
  54.   height: 80px;
  55.   padding:10px;
  56.   margin:auto;
  57.   /*margin: 20% auto;*/
  58. }
  59. .input-wrap{
  60.   margin: 20px auto;
  61. }
  62. </style>

  程序清单2.2说明省略。

     2.1.3  创建路由目录

        在src目录下创建一个router文件夹，用于路由文件。这里的思想是把 routes数组 拆分成一个 单独的js文件，这样看着简洁也方便维护。

        在该文件夹下创建一个index.js文件。

        程序清单2.3是index.js文件的代码。

        程序清单2.3  index.js。

  1. import Vue from 'vue'
  2. import VueRouter from 'vue-router'
  3.  
  4. // 导入路由
  5. import Login from '@/views/Login.vue'
  6.  
  7. Vue.use(VueRouter)
  8.  
  9. const routes = [
  10.     { path: '/', redirect: '/login' },
  11.     { path: '/login', component: Login }
  12. ]
  13.  
  14. const router = new VueRouter({
  15.     routes
  16. })
  17.  
  18. // 挂载路由导航守卫
  19. router.beforeEach((to, from, next) => {
  20.     // 如果访问的是login页面 则直接放行
  21.     if (to.path === '/login') return next()
  22.     // 获取token
  23.     const tokenStr = window.sessionStorage.getItem('token')
  24.     // 判断有没有拿到token，如果没有则强制跳转到login页面
  25.     if (!tokenStr) return next('/login')
  26.     // 否则，拿到token则直接放行
  27.     next()
  28. })
  29.  
  30. export default router

程序清单2.3说明如下。

       第1行：导入vue.js文件。其完整的写法是：

import Vue from "../node_modules/vue/dist/vue.js"。

该篇博客有论述：import Vue from 'vue' 发生了什么 - 精灵W的博客 - 博客园。

       第2行：导入vue-router实现路由管理。

https://blog.csdn.net/sinat_17775997/article/details/80688397

https://router.vuejs.org/zh/guide/#javascript

https://www.cnblogs.com/dengyao-blogs/p/11562257.html。

     2.1.4  修改App.vue

        在src目录下修改App.vue文件。

        程序清单2.4是App.vue文件的代码。

        程序清单2.4  App.vue。

  1. <template>
  2.   <div id="app">
  3.     <!-- 路由占位符 -->
  4.     <router-view></router-view>
  5.   </div>
  6. </template>
  7.  
  8. <script>
  9. export default {
  10.   
  11. }
  12. </script>
  13.  
  14. <style>
  15. #app {
  16.   font-family: Avenir, Helvetica, Arial, sans-serif;
  17.   -webkit-font-smoothing: antialiased;
  18.   -moz-osx-font-smoothing: grayscale;
  19.   text-align: center;
  20.   color: #2c3e50;
  21.   margin-top: 60px;
  22. }
  23. </style>

     2.1.5  修改main.js文件

       在src目录下修改main.js文件。

       程序清单2.5是main.js文件的代码。

       程序清单2.5  main.js。

  1. import Vue from 'vue'
  2. import App from './App.vue'
  3. import router from './router'
  4. //等效于：
  5. // import router from './router/index.js'
  6.  
  7. // 导入全局样式表
  8. import '@/assets/css/global.css'
  9.  
  10. // 设置为“false” 用于关闭生产模式下给出的提示
  11. Vue.config.productionTip = false
  12.  
  13. new Vue({
  14.   router,
  15.   render: h => h(App),
  16. }).$mount('#app')

    2.1.6  运行

     在终端中运行命令：npm run serve，显示如下信息：

  1. Windows PowerShell
  2.  
  3. 版权所有 (C) Microsoft Corporation。保留所有权利。
  4.  
  5. 尝试新的跨平台 PowerShell https://aka.ms/pscore6
  6.  
  7. PS D:\vue-project> cd .\lighthouse-vue\
  8.  
  9. PS D:\vue-project\lighthouse-vue> npm run serve
  10.  
  11. > lighthouse-vue@0.1.0 serve D:\vue-project\lighthouse-vue
  12.  
  13. > vue-cli-service serve
  14.  
  15.  INFO  Starting development server...
  16.  
  17. 98% after emitting CopyPlugin
  18.  
  19.  DONE  Compiled successfully in 1094ms                                                                                                   下午8:16:10
  20.  App running at:
  21.  
  22.   - Local:   http://localhost:8080/
  23.  
  24.   - Network: http://192.168.0.103:8080/
  25.  
  26.   Note that the development build is not optimized.
  27.  
  28.   To create a production build, run npm run build.

       该信息显示编译成功，并给出了打开登录页面的url地址：http://localhost:8080/。

       在浏览器上输入该地址，打开如图2.1所示登录界面。

2.1.7 增加首页文件index.vue

       前面登录成功后，给出了登录成功的提示。现在将其修改为登录成功后，跳转一个首页文件，一般首页文件约定俗成命名为index，这里命名为：index.vue。
       在views目录下创建灯塔管理系统首页文件index.vue。
       index.vue的代码如下：

  1. <template>
  2.   <div>
  3.     <h3>欢迎使用灯塔管理系统</h3>
  4.     <p>到灯塔去...</p>
  5.   </div>
  6. </template>

2.1.8 修改index.js文件

       为了能够找到index.vue,需要在router目录下修改index.js配置路由的路径，具体是增加：
     （1）导入路由：import Index from '@/views/index.vue'
     （2）配置路由： { path: '/index', component: Index }
       另外，对其中对获取token有关语句进行注释，关于token在后面的登录版本中进行讲解。
       index.js完整代码如下：

  1. import Vue from 'vue'
  2. import VueRouter from 'vue-router'
  3.  
  4. // 导入路由
  5. import Login from '@/views/Login.vue'
  6. import Index from '@/views/index.vue'
  7.  
  8. Vue.use(VueRouter)
  9.  
  10. // 在创建的 routes 对象中， path 配置了路由的路径，component 配置了映射的组件
  11. const routes = [
  12.     { path: '/', redirect: '/login' },
  13.     { path: '/login', component: Login },
  14.     { path: '/index', component: Index }
  15. ]
  16.  
  17. const router = new VueRouter({
  18.     routes
  19. })
  20.  
  21. // 挂载路由导航守卫
  22. router.beforeEach((to, from, next) => {
  23.     // 如果访问的是login页面 则直接放行
  24.     if (to.path === '/login') return next()
  25.     // 获取token
  26.     // const tokenStr = window.sessionStorage.getItem('token')
  27.     // 判断有没有拿到token，如果没有则强制跳转到login页面
  28.     // if (!tokenStr) return next('/login')
  29.     // 否则，拿到token则直接放行
  30.     next()
  31. })
  32.  
  33. // export default routers 必须写在文件底部，而且后面还需要接一空行，否则无法通过 ESlint 语法验证
  34. export default router

2.1.9 修改Login.vue增加路由跳转

       在views目录下，修改Login.vue文件，主要是在原来Login.vue的第34行下面增加语句：
       this.$router.push({path: '/index'})
       修改后的Login.vue完整代码如下：

  1. <template lang="">
  2.   <div class="login" id="login">
  3.     <div class="input-wrap">
  4.       <label for="male">账  号：</label>
  5.       <input type="text" v-model="username" placeholder="请输入账号"/>
  6.       
  7.     </div>
  8.     <div class="input-wrap">
  9.       <label for="male">密  码：</label>
  10.       <input type="password" v-model="password" placeholder="请输入密码"/>
  11.     </div>
  12.     <div class="input-wrap">
  13.        <!-- <button v-on:click="login">登录账号</button>&nbsp;&nbsp; -->
  14.       <button @click="login">登录</button>&nbsp;&nbsp;
  15.       <button @click="login">注册</button>
  16.     </div>
  17.   </div>
  18. </template>
  19. <script>
  20. export default {
  21.   data () {
  22.     return {
  23.       username: '',
  24.       password: ''
  25.     }
  26.   },
  27.   methods: {
  28.     login () {      
  29.       const {username, password} = this
  30.       // 等同于如下语句：
  31.       // const username = this.username
  32.       // const password = this.password
  33.  
  34.       if (username === 'admin' && password === '123456') {
  35.         // alert("登录成功！")
  36.         this.$router.push({path: '/index'})
  37.       } else if(username.length == 0 || password.length == 0) {
  38.         alert('请输入用户名或密码！')
  39.       }else{
  40.         alert('登录失败！')
  41.       }   
  42.     }
  43.   }
  44. }
  45. </script>
  46.  
  47. <style>
  48. .login {
  49.   position: absolute;
  50.   top: 0;
  51.   right: 0;
  52.   bottom: 0;
  53.   left: 0;
  54.   width: 300px;
  55.   height: 80px;
  56.   padding:10px;
  57.   margin:auto;
  58.   /*margin: 20% auto;*/
  59. }
  60. .input-wrap{
  61.   margin: 20px auto;
  62. }
  63. </style>

2.1.10 运行

       运行的截图如下：

       登录成功后运行截图如下：

       至此，灯塔管理系统登录第1版告一段落。

       九层之台，起于垒土。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/运维做开发/article/detail/746635
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号