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)路径为空不能链接，路径不为空可以链接。