前端项目案例学习
1.在页面通过添加路由，实现页面跳转，分别是home、login、和404页面
import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/views/Login'
import Home from '@/views/Home'
import NotFound from '@/views/404'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Home',
component: Home
}, {
path: '/login',
name: 'Login',
component: Login
}, {
path: '/404',
name: 'notFound',
component: NotFound
}
]
})
2.模拟两个接口，分别拦截用户和菜单的请求，并返回相应的数据。注意需要在页面通过import mock from '@/mock/mock.js'语句引入mock模块。
import Mock from 'mockjs'//
Mock.mock('http://localhost:8080/user', {
'name': '@name', // 随机生成姓名
'name': '@email', // 随机生成邮箱
'age|1-10': 5, // 年龄1-10之间
})
Mock.mock('http://localhost:8080/menu', {
'id': '@increment', // id自增
'name': 'menu', // 名称为menu
'order|1-20': 5, // 排序1-20之间
})
修改Home.vue，在页面添加两个按钮，分别触发用户和菜单的处理请求，成功后弹出获取结果
<template>
<div class="page">
<h2>Home Page</h2>
<el-button type="primary" @click="testAxios()">测试Axios调用</el-button>
<el-button type="primary" @click="getUser()">获取用户信息</el-button>
<el-button type="primary" @click="getMenu()">获取菜单信息</el-button>
</div>
</template>
<script>
import axios from 'axios'
import mock from '@/mock/mock.js'
export default {
name: 'Home',
methods: {
testAxios() {
axios.get('http://localhost:8080').then(res => { alert(res.data) })//需要axios 用来发送HTTP请求，返回数据，其中数据是通过安装mock.js模拟
},
getUser() {
axios.get('http://localhost:8080/user').then(res => { alert(JSON.stringify(res.data)) })
},
getMenu() {
axios.get('http://localhost:8080/menu').then(res => { alert(JSON.stringify(res.data)) })
}
}
}
</script>
3.封装
在src目录下，新建一个http文件夹，用来存放http交互api代码。文件结构如下：
• config.js：axios默认配置，包含基础路径等信息。
• axios.js：二次封装axios模块，包含拦截器等信息。
• api.js ：请求接口汇总模块，聚合所有模块API。
• index.js：将axios封装成插件，按插件方式引入。
• modules：用户管理、菜单管理等子模块API。
