上海制造网站公司,网站制作技术方案,莱芜聊城网站建设,请收网址9999381. axios axios官方文档 异步库axios和mockjs模拟后端数据#xff0c;axios是一个基于promise的HTTP库#xff0c;使用npm i axios。在main.js中引入#xff0c;需要绑定在Vue的prototype属性上#xff0c;并重命名。 #xff08;1#xff09;main.js文件引用
imp…1. axios axios官方文档 异步库axios和mockjs模拟后端数据axios是一个基于promise的HTTP库使用npm i axios。在main.js中引入需要绑定在Vue的prototype属性上并重命名。 1main.js文件引用
import http from axios
Vue.prototype.$http http1.1. axios简单例子 1在home的index.vue中添加mounted /*** 拦截器部分* param instance*/interceptors(instance) {// 添加请求拦截器instance.interceptors.request.use(function (response) {console.log(添加请求拦截器:, response)// 在发送前做什么return response;}, function (error) {// 对请求错误做什么console.log(error错误:, error)return Promise.reject(error);});// 添加响应拦截器instance.interceptors.response.use(function (response) {// 对响应数据前做什么console.log(添加请求拦截器2:, response)return response;}, function (error) {console.log(error错误2:, error)// 响应错误后做什么return Promise.reject(error);});}在控制台中可以发现请求已发送状态为404
1.2. axios函数封装 1在src目录下新建config文件夹新建index.js主要是让系统判断当前处于生产状态还是用户状态。
//src/api/index.js
export default{baseUrl:{dev:/api/,//开发环境pro://生产环境}
}2对axios函数进行二尺封装方便后续使用。在根目录下新建api文件夹新建axios.js文件。
//src/api/axios.js
import axios from axios
import config from ../config
// 将config和anios进行有机结合,对axios进行简单封装。
// 判断是不是生产环境并拿到config中的dev环境否则拿到config中的pro环境。
const baseUrl process.env.NODE_ENV development ? config.baseUrl.dev : config.baseUrl.pro
/*** axios工具类,工具类拿到对应的url后进行相应配置*/
class HttpRequest {constructor (baseUrl) {this.baseUrl baseUrl}/*** 用于定义anios的相关配置的方法* returns {{header: {}, base: *}}*/getInsideConfig(){const config {base:this.baseUrl,header:{}}return config}/*** 拦截器部分* param instance*/interceptors (instance) {// 添加请求拦截器instance.interceptors.request.use(function(config){// 在发送前做什么return config;},function (error){// 对请求错误做什么return Promise.reject(error);});// 添加响应拦截器instance.interceptors.response.use(function(response){// 对响应数据前做什么return response;},function(error){// 响应错误后做什么return Promise.reject(error);});}/*** 接口请求* param options* returns {*}*/request(options){//创建axios实例const instance axios.create()// ES6语法解构,三点表示解构options {...this.getInsideConfig(), ...options}// 调用拦截器this.interceptors(instance)return instance(options)}
}export default new HttpRequest(baseUrl)1.3. 接口调用 1在src/api下新建data.js文件,用于添加网络接口
//src/api/data.js
// 这里引入的是文件不是依赖
import axios from ./axios
/*** 接口对外暴露* param param* returns {*}*/
export const getMenu (param) {return axios.request({url:/permission/getMenu,method:post,data:param})
}2在src/views/home/index.vue中调用
//src/views/home/index.vuemounted() {// //接口请求一般在mounted下// const axios require(axios);// // 上述请求也可以按以下方式完成可选// axios.get(/user, {// params: {// ID: 12345// }// }).then(function (response) {// console.log(response);// })// .catch(function (error) {// console.log(error);// })// .finally(function () {// // 总是会执行// });getMenu().then(res {console.log(post,res)})}//src/views/home/index.vue
templateel-row classhome :gutter20 styleheight:100vh;!--用户布局--el-col :span9 classuser-sectionel-card shadowhoverdiv classuser-layoutimg classuser-header :srcuserImg/div classuser-info-layoutp classuser-nameAdmin/pp classuser-nickname超级管理员/p/div/divdiv classlogin-layoutp classlogin-time上次登录时间span2024-12-12/span/pp classlogin-loc上次登录地点span济南/span/p/div/el-card!--列表展示--el-card classlist-sectionel-table :datatableDatael-table-columnv-for(val,key) in tableLabel:keykey:propkey:labelval/el-table-column/el-table/el-card/el-col!--右侧布局--el-col :span15!--订单统计--el-col :span8 v-for(item) in countData:keyitem.name :offset0el-card classorder-section:body-style{display:flex, padding:0}div classorder-layouti classorder-icon :classel-icon-item.icon:style{background:item.color}/idiv classorder-detailp classorder-num{{item.value}}/pp classorder-title{{item.name}}/p/div/div/el-card/el-colel-card styleheight:280px;/el-carddiv classgraphel-card styleheight:260px;/el-cardel-card styleheight:260px;/el-card/div/el-col/el-row
/templatescriptimport {getMenu} from ../../api/data.jsexport default {name: home,data() {return {userImg: require(../../assets/images/user.png),tableData: [{name: 华为,todayBuy: 100,monthBuy: 300,totalBuy: 800,},{name: 荣耀,todayBuy: 100,monthBuy: 300,totalBuy: 800,},{name: oppo,todayBuy: 100,monthBuy: 300,totalBuy: 800,},{name: vivo,todayBuy: 100,monthBuy: 300,totalBuy: 800,},{name: 苹果,todayBuy: 100,monthBuy: 300,totalBuy: 800,},{name: 小米,todayBuy: 100,monthBuy: 300,totalBuy: 800,},{name: 三星,todayBuy: 100,monthBuy: 300,totalBuy: 800,},{name: 魅族,todayBuy: 100,monthBuy: 300,totalBuy: 800,}],tableLabel: {name: 课程,todayBuy: 今日购买,monthBuy: 本月购买,totalBuy: 总购买,},countData: [{name: 今日支付订单,value: 1234,icon: success,color: #2ec7c9,offset: 0,},{name: 今日收藏订单,value: 210,icon: star-on,color: #ffb980,offset: 1,},{name: 今日未支付订单,value: 1234,icon: s-goods,color: #5ab1ef,offset: 2,},{name: 本月支付订单,value: 1234,icon: s-home,color: #fbcc00,offset: 0,},{name: 本月收藏订单,value: 210,icon: s-cooperation,color: #ff4444,offset: 1,},{name: 本月未支付订单,value: 1234,icon: s-shop,color: #33cc87,offset: 2,},]}},mounted() {// //接口请求一般在mounted下// const axios require(axios);// // 上述请求也可以按以下方式完成可选// axios.get(/user, {// params: {// ID: 12345// }// }).then(function (response) {// console.log(response);// })// .catch(function (error) {// console.log(error);// })// .finally(function () {// // 总是会执行// });getMenu().then(res {console.log(post,res)})}}
/script
style langless/*用户模块*/.user-section {margin: 10px 0}.user-layout {display: flex;flex-direction: row;align-items: center;border-bottom: #999 solid 1px;padding: 0 10px 10px;}.user-header {width: 100px;height: 100px;border-radius: 50%;}.user-info-layout {display: flex;flex-direction: column;margin-left: 20px;}.user-name {font-size: 18px;color: black;font-weight: 700;}.user-nickname {font-size: 18px;color: black;margin-top: 5px;font-weight: 700;}.login-layout {display: flex;flex-direction: column;margin-left: 20px;}.login-time {font-size: 17px;color: black;margin-top: 5px;}.login-loc {font-size: 17px;color: black;margin-top: 8px;}/*列表展示*/.list-section {margin-top: 20px;height: 460px;}/*订单统计*/.order-section {padding: 0 0;margin: 10px 0 15px;background-color: white;}.order-layout {display: flex;flex-direction: row;align-items: center;}.order-icon {display: flex;width: 65px;height: 65px;//border-radius: 50%;align-items: center;justify-content: center;}.order-detail {display: flex;flex-direction: column;justify-content: center;margin-left: 15px;}.order-num {color: #333333;font-size: 18px;}.order-title {color: #333;font-size: 18px;font-weight: 700;margin-top: 8px;}/styleemsp;axios网络请求示例下载
1.4. 对响应拦截器进行更改 对/src/api/index.js下的拦截器进行更改打印拦截数据。 /*** 拦截器部分* param instance*/interceptors(instance) {// 添加请求拦截器instance.interceptors.request.use(function (response) {console.log(添加请求拦截器:, response)// 在发送前做什么return response;}, function (error) {// 对请求错误做什么return Promise.reject(error);});// 添加响应拦截器instance.interceptors.response.use(function (response) {// 对响应数据前做什么return response;}, function (error) {// 响应错误后做什么return Promise.reject(error);});}1.5. mockjs使用 官方文档 mock可以拦截ajax请求在mock的回调函数中返回接口的响应数据。可以模拟后端发送过来的接口数据。mock可以使用数据模板生成数据。 在api下新建mock.js,先npm i mockjs。Mock.mock(url,回调函数)这里模块化编程提前准备好数据模板在api下新建mockServeData文件夹新建home.js文件存放home页面下的mock的模拟数据。
//src/api/mock.js
import Mock from mockjs
import homeApi from ./mockServeData/home.js
Mock.mock(/home/getData,homeApi.getStatisticalData)//src/api/mockServeData/home.js
// mock数据模拟
import Mock from mockjs// 图表数据
let List []
export default {getStatisticalData: () {//Mock.Random.float 产生随机数100到8000之间 保留小数 最小0位 最大0位for (let i 0; i 7; i) {List.push(Mock.mock({苹果: Mock.Random.float(100, 8000, 0, 0),vivo: Mock.Random.float(100, 8000, 0, 0),oppo: Mock.Random.float(100, 8000, 0, 0),魅族: Mock.Random.float(100, 8000, 0, 0),三星: Mock.Random.float(100, 8000, 0, 0),小米: Mock.Random.float(100, 8000, 0, 0)}))}return {code: 20000,data: {// 饼图videoData: [{name: 小米,value: 2999},{name: 苹果,value: 5999},{name: vivo,value: 1500},{name: oppo,value: 1999},{name: 魅族,value: 2200},{name: 三星,value: 4500}],// 柱状图userData: [{date: 周一,new: 5,active: 200},{date: 周二,new: 10,active: 500},{date: 周三,new: 12,active: 550},{date: 周四,new: 60,active: 800},{date: 周五,new: 65,active: 550},{date: 周六,new: 53,active: 770},{date: 周日,new: 33,active: 170}],// 折线图orderData: {date: [20191001, 20191002, 20191003, 20191004, 20191005, 20191006, 20191007],data: List},tableData: [{name: oppo,todayBuy: 500,monthBuy: 3500,totalBuy: 22000},{name: vivo,todayBuy: 300,monthBuy: 2200,totalBuy: 24000},{name: 苹果,todayBuy: 800,monthBuy: 4500,totalBuy: 65000},{name: 小米,todayBuy: 1200,monthBuy: 6500,totalBuy: 45000},{name: 三星,todayBuy: 300,monthBuy: 2000,totalBuy: 34000},{name: 魅族,todayBuy: 350,monthBuy: 3000,totalBuy: 22000}]}}}
}在main.js中引入import ‘./api/mock.js’。 在src/views/home下index.vue中引入getData。import { getData } from ‘…/…/api/data.js’并暴露使用。
//src/views/home/index.jsmounted(){getData().then(res {console.log(res)})}在api中data.js中编写getData,这里没有写请求类型默认是get请求。
//data.js
export const getData () {return axios.request({url:/home/getData})
}url为 接口拦截成功并返回数据。 将数据进行解构 对home的index.vue的mounted进行修改并将return中的tableData定义为空数组tableData:[]。 mounted(){getData().then(res {const { code,data } res.dataif (code 20000){this.tableData data.tableData}console.log(res)})}前后数据区别一个是原本写死的数据一个是模拟后端的mock数据。 VueWeb Mock示例下载
