npm install axios --save
npm install echarts --save
npm i element-ui -S
export导出一个对象
1.vue.config.js
与src平级目录
1.跨域
2.打包输出路径
https://www.jianshu.com/p/b358a91bdf2d
module.exports = {
publicPath: "./",
//构建时的输出目录
outputDir: "dist",
indexPath: "index.html",
assetsDir: "assets",
devServer: {
proxy: {
'/dz': { //这里最好有一个
target: 'http://59.213.167.173/DzService', // 后台接口域名
ws: true, //如果要代理 websockets,配置这个参数
secure: false, // 如果是https接口,需要配置这个参数
changeOrigin: true, //是否跨域
pathRewrite:{
'^/dz':''
}
},
}
}
};
1.1config.js
public静态资源文件夹下配置文件
1.后台接口地址url配置
2.地图token配置
2.interceptor.js
api拦截器
https://blog.csdn.net/qq_28218253/article/details/85158238
1.axios
main.js引入
import "@/api/interceptor";
import axios from "axios";
// 建筑业
export default {
/**
* 获取建筑业分市州数据
* @param {year} 年份
* @param {month} 月份
* @param {order} 排序字段
* @param { IsCenterCity } 是否中心城市
* **/
getBuildingByCity (params) {
return axios.get('/api/Building/GetBuildingByCity',{params})
},
2.service
https://blog.csdn.net/weixin_43216105/article/details/98877960
// 通用 request.js
import axios from 'axios';
import { Message } from 'element-ui';
import router from '@/router';
import tools from '../../static/tools';
// create an axios instance
const service = axios.create({
baseURL: urlConfig.fileUrl, // base_url of api, appName usually
timeout: 5000, // request timeout
headers: {
// universal request header
"token": sessionStorage.myToken,
},
});
// 兼容ie ie浏览器在请求数据时,url不会自动编码,当url出现中文时会报错
service.interceptors.request.use(config => {
// showLoading()
// Do something before request is sent
config.headers.token = sessionStorage.myToken;
config.url = encodeURI(config.url);
return config;
}, error => {
// Do something with request error
console.log(error); // for debug
Promise.reject(error);
});
// respone interceptor
service.interceptors.response.use(
response => {
// 返回为json格式数据
if (response.status === 200) {
let type = typeof response.data;
if (type === "string") {
let data = JSON.parse(response.data);
return Promise.resolve(data);
}
else if (type === "object") {
return Promise.resolve(response.data);
}
else {
return Promise.resolve(response.data);
}
}
else {
// 对请求 res.data.success = true 时的全局预处理
response.noData = response.data.data.length === 0;
return response.data.data;
}
},
error => {
// 对请求失败时的全局预处理
if (error.message.includes("timeout")) {
// 判断请求异常信息中是否含有超时timeout字符串
Message.error("网络连接超时...");
return Promise.reject(error); // reject这个错误信息
}
return Promise.reject(error);
});
export default service;
每一项引用
import request from './interceptor'
// 工业经济指标
const getByindustrialinfo = (params) => {
return request({
url: 'industrial/info',
method: 'get',
params
})
}
export {
getByindustrialinfo
}
3.api自动化
api文件夹index.js
const files = require.context("./", false, /\.js$/);
const modules = {}
files.keys().forEach((item) => {
if (item === './index.js' || item === './interceptor.js') {
return;
}
let name = item.replace(/\.\/|\.js/g, '')
// 兼容 import export 和 require module.export 两种规范 Es modules commonjs
modules[name] = files(item).default || files(item);
});
export modules
引入
import { building as api } from '@/api/index.js'
4.components公共组件自动化(无效)
无效
https://www.v2ex.com/t/517685
components文件夹下index.js
const files = require.context("./", false, /\.vue$/);
const modules = {}
files.keys().forEach((item) => {
let name = item.replace(/\.\/|\.vue/g, '')
// 兼容 import export 和 require module.export 两种规范 Es modules commonjs
modules[name] = `my$(files(item).default || files(item))`;
});
export modules
引入
import { mySmallNav } from '@/components/index.js'
5.router自动化
router文件夹index.js
const files = require.context("./", false, /\.js$/);
let modules = []
files.keys().forEach(item => {
if (item === './index.js') return
// 兼容 import export 和 require module.export 两种规范 Es modules commonjs
modules.push(...files(item).default)
});
使用
let router = new VueRouter({
routes: modules
})
6.项目结构
运行结果
网友评论