vue-iview:搭建一个简单框架

搭建项目

全局安装 vue-cli

npm install --global vue-cli
vue init webpack my-project

项目目录

登陆页面

源代码

(1)component文件夾下添加Login.vue，index.js引入页面。

(2)安装iview: 控制台:npm install iview --save，main.js添加以下代码，引入iview

import iView from 'iview'

import 'iview/dist/styles/iview.css'

Vue.use(iView)

(3)提交=>跳转到Home页面

先在index.js添加Home页面路由

登陆成功跳转主页面:self.$router.push({path: '/page/home'})

主页面

源代码

axios

axios用于在node.js中发送请求。

(1)安装axios

npm install axios --save

(2)引入方式

在安装其余插件式，能够直接在main.js中引入，并使用Vue.use()来注册，但因为axios不是vue的插件，因此要使用以下方法在main.js文件中进行注册。

import axios from 'axios'

Vue.prototype.$axios = axios

注:Vue.prototype指原型属性。若是在不少组件用到同一数据，可是不想污染全局做用域，能够经过原型定义，使这个数据能够在每一个Vue实例中使用。

(3)使用方法

mock.js插件

mockjs用于模拟数据实现先后端分离。在开发过程当中，前端开发须要后端接口才能进行，在后端不能及时提供接口时，有没有可能模拟后端接口呢?因而就用到了mock.js插件，模拟后端数据来实现增删改查操做。

(1)安装mockjs

npm install mockjs --save

(2)引入方式

在main.js中添加require('mockjs')

(3)使用方法

项目目录：

前端发送请求:

模拟数据:

链接后台

在config目录下的index.js文件中修改以下代码能够关联后台代码并修改端口为8888。proxyTable是代理表,做用是用来建一个虚拟api服务器用来代理本机的请求，只能用于开发模式。vue-cli使用这个功能是借助http-proxy-middleware插件，通常解决跨域请求api。

注: proxyTable: {
'/list': {
target: ' http://api.xxxxxxxx.com', -> 目标url地址
changeOrigin: true, -> 指示是否跨域
pathRewrite: {
'^/list': '/list' -> 可使用 /list 等价于 api.xxxxxxxx.com/list
} } }

SessionStorage登陆状态存储页面

保存数据到sessionStorage

sessionStorage.setItem('key', 'value');

http响应拦截(前端实现登陆拦截)

页面发送请求时,例如查询场点数据,要进行登录判断，若是已经登陆就显示数据，没登陆要跳转到登陆页面。响应拦截器。想要统一处理请求和响应就会用到axios拦截器。

利用vue-router提供的钩子函数beforeEach()对路由进行判断。

参数:

to: 即将要进入的目标 路由对象

from: 当前导航正要离开的路由

next:function 使用beforEach最后都要调用next(),若是不传递参数,to:/login,就会跳转到login界面。若是传递参数,例如next('/home')，to:/login就会失效，只会跳转到home界面。

组件

面包屑

源码

1.在主页面中添加面包屑组件。


2.为了route同步，主要watch $route的值，$routed.matched获得的是一个数组。

3.作完只显示二级目录

4.为了显示三级目录，添加货架管理。

(1)判断是否有上级目录

(2)index.js路由里添加上级目录描述和空路径。

(3)路径为空不能连接，路径不为空能够连接。