基于bkui的vue应用开发（一、基本搭建与使用）

Vue路由基础知识route（只读）router（只写）实现原理 bkui框架初探安装与创建引用路径的写法简单的登陆页面

Vue路由基础知识

在我们使用vue-cli创建项目时，只要在create时，将router选上即可

route（只读）

进行以上配置后，在 window 全局对象中，就有了一个 路由的构造函数叫做 VueRouter，我们可以自定义一段我们的路由规则。 路由对象会被赋值为 this.$route ，并且当路由切换时，路由对象会被更新（就是说每次url变了的时候，路由对象一般也会有变化）

属性用途$route.path当前路由对象的路径，比如"/home/index"$route.params类似于vue内部的post传值，从一个页面传过去，可以从另一个页面取到$route.queryget传的值，比如/home/index/?value=6时，$route.query.value的值为6$route.router路由规则所属的路由器（稍后解释）$route.name当前路径的名字$route.matched包含当前匹配的路径中所包含的所有片段所对应的配置参数对象

router（只写）

与route对应，route是只读的，而router是只写的。 例子：

// 页面跳转 this.$router.push({ name:'index', params:{ name:'syc'} }) // 路径名读取 var name = this.$route.params.name

实现原理

相信初学vue的同学可能会有疑惑，为什么我们要用vue-router，直接在template中写上a标签不香么？ 答案是因为Vue做的是单页应用，其实整个网站在本质上只有一个页面。 他是怎么实现的呢？

bkui框架初探

安装与创建

安装bkui

npm install -g bkui-cli

创建项目：

bkui init xxx cd xxx bk i

运行项目

npm run dev

引用路径的写法

在build/webpack.base.conf.js中有如下代码：

resolve: { // 指定以下目录寻找第三方模块，避免 webpack 往父级目录递归搜索， // 默认值为 ['node_modules']，会依次查找./node_modules、../node_modules、../../node_modules modules: [resolve('src'), resolve('node_modules')], extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src'), '@doc': resolve('doc') } },

所以说@这东西代表着到src这个文件夹的路径

一般我们在写公共组件时，要把它放在components。非公共组件直接放在views的文件夹中。 每个组件单独建一个文件夹，文件夹的名字就是组件名，文件夹里的文件均用index.xxx命名。

简单的登陆页面

首先在src/views/login/中创建index.vue和index.css文件 在index.vue中引用index.css

<style scoped> @import './index.css'; </style>

使用magicbox拉一个简单的登录框（之后再美化），代码如下

<template> <div class="wrapper"> <bk-container :col="3"> <bk-row> <bk-col :offset="1"> <div style="width: 600px;"> <bk-form :label-width="200" form-type="vertical"> <bk-form-item label="用户名：" :required="true"> <bk-input v-model="username"></bk-input> </bk-form-item> <bk-form-item label="密码：" :required="true"> <bk-input v-model="password" :type="'password'" :clearable="true"></bk-input> </bk-form-item> <bk-button @click.stop.prevent="login">登录</bk-button> </bk-form> </div> </bk-col> </bk-row> </bk-container> </div> </template>

业务逻辑是：点击登录按钮后，将用户输入的账号密码传到后端，让后端验证后返回token，再把返回的token存起来

我们可以自己写一个cookie.js，放到src/common/目录下

/* 设置cookie*/ export function setCookie (name, value, expire) { const date = new Date() date.setSeconds(date.getSeconds() + expire) document.cookie = name + '=' + escape(value) + '; expires=' + date.toGMTString() } /* 获取cookie*/ export function getCookie (name) { if (document.cookie.length > 0) { let start = document.cookie.indexOf(name + '=') if (start !== -1) { start = start + name.length + 1 let end = document.cookie.indexOf(';', start) if (end === -1) end = document.cookie.length return unescape(document.cookie.substring(start, end)) } } return '' } /* 删除cookie */ export function delCookie (name) { setCookie(name, '', -1) }

在login/index.vue加入以下代码

<script> import { getCookie, setCookie } from '@/common/cookie.js' export default { name: 'Login', data () { return { prompt: '', username: '', password: '' } }, mounted () { if (getCookie('username')) { this.$router.push('/') } }, methods: { login () { if (this.username === '' || this.password === '') { alert('请输入账号密码') return } const data = { 'username': this.username, 'password': this.password } this.$axios({ method: 'post', url: 'http://127.0.0.1:8000', // 接口地址 data: this.$qs.stringify(data) }) .then(response => { if (response.data.code === '0') { setCookie('token', response.data.data, 3600) this.$router.push({ path: '/' }) } else { alert('登录失败') this.username = '' this.password = '' } }) .catch(() => { alert('登录失败') this.username = '' this.password = '' }) } } } </script>

对应的后端登录接口已经用django rest_framework实现，返回值是json格式的token 最后，在路由加入相应路径即可，测试一下： 登录前： 登录后：