Vue登录第1版

wu_solo

已于 2022-01-27 21:12:28 修改

阅读量4.5k

点赞数 16

分类专栏：学习和开发日志文章标签： vue.js javascript 前端

于 2022-01-25 21:46:48 首次发布

本文链接：https://blog.csdn.net/wu_solo/article/details/122692468

版权

学习和开发日志专栏收录该内容

18 篇文章 2 订阅

订阅专栏

在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。

/* 全局样式表 */
html,body,#app{
    height: 100%;
    margin: 0;
    padding: 0;
    min-width: none;
    background: #ececf4;
}

程序清单2.1说明省略。

2.1.2 创建登录视图

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

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

程序清单2.2 Login.vue。

<template lang="">
  <div class="login" id="login">
    <div class="input-wrap">
      <label for="male">账  号：</label>
      <input type="text" v-model="username" placeholder="请输入账号"/>
      
    </div>
    <div class="input-wrap">
      <label for="male">密  码：</label>
      <input type="password" v-model="password" placeholder="请输入密码"/>
    </div>
    <div class="input-wrap">
       <!-- <button v-on:click="login">登录账号</button>&nbsp;&nbsp; -->
      <button @click="login">登录</button>&nbsp;&nbsp;
      <button @click="login">注册</button>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    login () {      
      const {username, password} = this
      // 等同于如下语句：
      // const username = this.username
      // const password = this.password

      if (username === 'admin' && password === '123456') {
        alert("登录成功！")
      } else if(username.length == 0 || password.length == 0) {
        alert('请输入用户名或密码！')
      }else{
        alert('登录失败！')
      }   
    }
  }
}
</script>

<style>
.login {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 300px;
  height: 80px;
  padding:10px;
  margin:auto;
  /*margin: 20% auto;*/
}
.input-wrap{
  margin: 20px auto;
}
</style>

程序清单2.2说明省略。

2.1.3 创建路由目录

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

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

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

程序清单2.3 index.js。

import Vue from 'vue'
import VueRouter from 'vue-router'

// 导入路由
import Login from '@/views/Login.vue'

Vue.use(VueRouter)

const routes = [
    { path: '/', redirect: '/login' },
    { path: '/login', component: Login }
]

const router = new VueRouter({
    routes
})

// 挂载路由导航守卫
router.beforeEach((to, from, next) => {
    // 如果访问的是login页面 则直接放行
    if (to.path === '/login') return next()
    // 获取token
    const tokenStr = window.sessionStorage.getItem('token')
    // 判断有没有拿到token，如果没有则强制跳转到login页面
    if (!tokenStr) return next('/login')
    // 否则，拿到token则直接放行
    next()
})

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。

<template>
  <div id="app">
    <!-- 路由占位符 -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

2.1.5 修改main.js文件

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

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

程序清单2.5 main.js。

import Vue from 'vue'
import App from './App.vue'
import router from './router'
//等效于：
// import router from './router/index.js'

// 导入全局样式表
import '@/assets/css/global.css'

// 设置为“false” 用于关闭生产模式下给出的提示
Vue.config.productionTip = false

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

2.1.6 运行

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

Windows PowerShell

版权所有 (C) Microsoft Corporation。保留所有权利。

尝试新的跨平台 PowerShell https://aka.ms/pscore6

PS D:\vue-project> cd .\lighthouse-vue\

PS D:\vue-project\lighthouse-vue> npm run serve

> lighthouse-vue@0.1.0 serve D:\vue-project\lighthouse-vue

> vue-cli-service serve

 INFO  Starting development server...

98% after emitting CopyPlugin

 DONE  Compiled successfully in 1094ms                                                                                                   下午8:16:10
 App running at:

  - Local:   http://localhost:8080/

  - Network: http://192.168.0.103:8080/

  Note that the development build is not optimized.

  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的代码如下：

<template>
  <div>
    <h3>欢迎使用灯塔管理系统</h3>
    <p>到灯塔去...</p>
  </div>
</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完整代码如下：

import Vue from 'vue'
import VueRouter from 'vue-router'

// 导入路由
import Login from '@/views/Login.vue'
import Index from '@/views/index.vue'

Vue.use(VueRouter)

// 在创建的 routes 对象中， path 配置了路由的路径，component 配置了映射的组件
const routes = [
    { path: '/', redirect: '/login' },
    { path: '/login', component: Login },
    { path: '/index', component: Index }
]

const router = new VueRouter({
    routes
})

// 挂载路由导航守卫
router.beforeEach((to, from, next) => {
    // 如果访问的是login页面 则直接放行
    if (to.path === '/login') return next()
    // 获取token
    // const tokenStr = window.sessionStorage.getItem('token')
    // 判断有没有拿到token，如果没有则强制跳转到login页面
    // if (!tokenStr) return next('/login')
    // 否则，拿到token则直接放行
    next()
})

// export default routers 必须写在文件底部，而且后面还需要接一空行，否则无法通过 ESlint 语法验证
export default router

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

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

<template lang="">
  <div class="login" id="login">
    <div class="input-wrap">
      <label for="male">账  号：</label>
      <input type="text" v-model="username" placeholder="请输入账号"/>
      
    </div>
    <div class="input-wrap">
      <label for="male">密  码：</label>
      <input type="password" v-model="password" placeholder="请输入密码"/>
    </div>
    <div class="input-wrap">
       <!-- <button v-on:click="login">登录账号</button>&nbsp;&nbsp; -->
      <button @click="login">登录</button>&nbsp;&nbsp;
      <button @click="login">注册</button>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    login () {      
      const {username, password} = this
      // 等同于如下语句：
      // const username = this.username
      // const password = this.password

      if (username === 'admin' && password === '123456') {
        // alert("登录成功！")
        this.$router.push({path: '/index'})
      } else if(username.length == 0 || password.length == 0) {
        alert('请输入用户名或密码！')
      }else{
        alert('登录失败！')
      }   
    }
  }
}
</script>

<style>
.login {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 300px;
  height: 80px;
  padding:10px;
  margin:auto;
  /*margin: 20% auto;*/
}
.input-wrap{
  margin: 20px auto;
}
</style>

2.1.10 运行

运行的截图如下：

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

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

九层之台，起于垒土。

wu_solo

关注

16
点赞
踩
43

收藏

觉得还不错? 一键收藏
2
评论
Vue登录第1版

在D:\vue-project文件夹中创建了一个名称为“lighthouse-vue”的Vue项目，下面在这个项目的基础上，完成该项目的登录界面，这里称为Vue登录第1版。 Vue登录第1版采用最简单的形式进行登录认证，具体是：使用Vue完成登录界面，用户只需要输入用户名和密码，并事先给出用户名为“admin”和密码为“123456”，然后采用JS进行登录验证，如果用户输入的用户名和密码与事先设置的用户名和密码相等，则登录成功；如果都为空，提示输入用户名...
复制链接

扫一扫