Vue登录第1版
在D:\vue-project文件夹中创建了一个名称为“lighthouse-vue”的Vue项目,下面在这个项目的基础上,完成该项目的登录界面,这里称为Vue登录第1版。Vue登录第1版采用最简单的形式进行登录认证,具体是:使用Vue完成登录界面,用户只需要输入用户名和密码,并事先给出用户名为“admin”和密码为“123456”,然后采用JS进行登录验证,如果用户输入的用户名和密码与事先设置的
在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 创建登录视图
在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> -->
<button @click="login">登录</button>
<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> -->
<button @click="login">登录</button>
<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版告一段落。
九层之台,起于垒土。
更多推荐
所有评论(0)