1. vue中引入json數(shù)據(jù)
必須創(chuàng)建服務(wù)才可以在vue中直接使用json數(shù)據(jù)哎迄；
可參考vue請(qǐng)求本地?cái)?shù)據(jù)
下面就本次使用再清晰理一遍：
方法一：
在webpack.dev.conf.js中（vue-cli實(shí)現(xiàn)的vue項(xiàng)目框架已經(jīng)加上理express）操灿，直接引入json文件入录，然后在devServer中加上get或者post請(qǐng)求锹漱，然后就可以在vue中正常請(qǐng)求此服務(wù)上產(chǎn)生的數(shù)據(jù)了：
var beijingData = require('../beijing.json')
before(app) {
app.get('/api/beijingData', (req, res) => {
res.json({
errno: 0,
data: beijingData
})//接口返回json數(shù)據(jù)担汤，上面配置的數(shù)據(jù)seller就賦值給data請(qǐng)求后調(diào)用
})
}
方法二：
平時(shí)我習(xí)慣mock.js產(chǎn)生假數(shù)據(jù)睦擂，所以可以用mock的服務(wù)來(lái)處理json,同樣的在vue中就可以正常請(qǐng)求到了贯钩。
var Mock = require('mockjs');
var beijingdata = require('./beijing.json');
var beijingdata1 = require('./beijing2.json');
Mock.mock('/sinotans/order/leftChart', 'get', function (options) {
return {
message: 'success',
data: { orderNum: beijingdata, goodsAmount: beijingdata1 },
statusCode: 200
};
});
2. vue router-link上添加點(diǎn)擊事件女嘲。
需要添加.native
<ul v-if="isShow">
<router-link :to="headNavLink[index]"
v-for="(item,index) in headNavList"
:key="index"
tag="li"
@click.native="activeChange(index)">
<div class="nav-icon"></div>
<span class="nav-font">{{item}}</span>
</router-link>
</ul>
3. vue中 watch對(duì)象或者數(shù)組
vue 實(shí)戰(zhàn)問(wèn)題－watch 數(shù)組或者對(duì)象
數(shù)組和對(duì)象都需要深層次監(jiān)測(cè)：
data () {
return {
orderTotal: {
businessSel: '1',
companySel: '全部',
projectSel: '全部',
customerSel: '全部',
flowFrom: '全部',
flowTo: '全部'
},
}
},
watch: {
orderTotal: {
handler(newValue, oldValue) {
console.log(newValue)
const businessSelectedw = newValue.businessSel;
const companySelectedw = newValue.companySel;
const customerSelectedw = newValue.customerSel;
const projectSelectedw = newValue.projectSel;
// 監(jiān)聽(tīng)
if (companySelectedw === '全部') {
this.projectDisabled = true;
this.customerDisabled = true;
} else {
this.projectDisabled = false;
this.customerDisabled = false;
}
// 監(jiān)聽(tīng)
if ((customerSelectedw !== '全部' && Number(businessSelectedw) === 2) || (projectSelectedw !== '全部' && Number(businessSelectedw) === 1)) {
this.flowShowFlag = true;
} else {
this.flowShowFlag = false;
}
},
deep: true
}
},
如果想監(jiān)測(cè)具體的屬性變化畜份，如pokerHistory變化時(shí)，才執(zhí)行handler函數(shù)欣尼，則可以利用計(jì)算屬性computed做中間層爆雹。
data() {
return {
bet: {
pokerState: 53,
pokerHistory: 'local'
}
}
},
computed: {
pokerHistory() {
return this.bet.pokerHistory
}
},
watch: {
pokerHistory(newValue, oldValue) {
console.log(newValue)
}
}
4. vue-router多重包含的重定向問(wèn)題
問(wèn)題描述：
我的頁(yè)面結(jié)構(gòu)是這樣的。當(dāng)時(shí)的問(wèn)題是：在點(diǎn)擊四個(gè)子頁(yè)面的時(shí)候愕鼓，內(nèi)容頁(yè)一那一層的.router-link-active就沒(méi)了钙态。后來(lái)發(fā)現(xiàn)是因?yàn)槲业膬?nèi)容頁(yè)和子頁(yè)面寫(xiě)在同一級(jí)別上了（怎么說(shuō)才對(duì)呢————就是我的頁(yè)面一進(jìn)入內(nèi)容頁(yè)一后我需要直接展示子頁(yè)面一，而我的內(nèi)容頁(yè)一和子頁(yè)面一的路由寫(xiě)成了一樣的菇晃，這樣就導(dǎo)致子頁(yè)面和內(nèi)容頁(yè)一在同一個(gè)里面了册倒。所以就點(diǎn)擊子頁(yè)面時(shí)，.router-link-active就只有一個(gè)了磺送。在內(nèi)容頁(yè)一二上沒(méi)有了）驻子。解決辦法就是內(nèi)容頁(yè)一給一個(gè)路由，然后重定向到子頁(yè)面一上估灿。
同時(shí)在的子頁(yè)面二點(diǎn)擊按鈕處還分為了子頁(yè)面21和子頁(yè)面22
export default new Router({
routes: [
{
path: "/",
redirect: "/index"
},
{
path: "/index",
component: home
},
{
path: "/pages1",
redirect: "/pages/childPage1",
},
{
path: "/pages1",
name: "visualization",
component: visual,
children: [
{
path: "/visual/childPage1",
name: "orderNumAnaly",
component: orderNumAnaly
},
{
path: "/visual/childPage2",
redirect: "/visual/KPI/log",
},
{
path: "/visual/childPage2/childPage21",
name: "KPILog",
component: effectKPILog
},
{
path: "/visual/childPage2/childPage22",
name: "effectKPIWater",
component: effectKPIWater
},
{
path: "/visual/childPage3",
name: "transWrongAnaly",
component: transWrongAnaly
},
{
path: "/visual/childPage4",
name: "visualAbility",
component: visualAbility
}
]
},
{
path: "/pages2",
name: "lot",
component: lot
}
]
});
5. amcharts 插件在vue中使用
amcharts必須全局引用崇呵，必須在main.js中引用：
/* eslint-disable */
import AmCharts from 'amcharts3';
import AmSerial from 'amcharts3/amcharts/serial';
import AmPieChart from 'amcharts3/amcharts/pie';
/* eslint-enable */
Using amCharts with Vue.js and Webpack
文章最后面說(shuō)的圖標(biāo)無(wú)法顯示的問(wèn)題，如下添加即可：
6. vue中父組件向路由頁(yè)傳遞值
一開(kāi)始沒(méi)明白過(guò)來(lái)router-view上面也可以如同平常組件那樣傳遞props值馅袁。所以走了很多彎路域慷。
在此標(biāo)記：
<router-view :companyOptions="companyOp"></router-view>
7. props傳過(guò)來(lái)的值作為初始值，后續(xù)怎么改變
需求是不需要改變父組件的，只是在父組件中統(tǒng)一請(qǐng)求到了初始值犹褒，每個(gè)組件中的初始值相同抵窒，但后續(xù)會(huì)不同。
哎呀這次真的被自己坑了：
一開(kāi)始的思路是知道props不能直接改變的化漆，那就用computed寫(xiě)一個(gè)新變量來(lái)接收它估脆，然后在方法中改變它，報(bào)錯(cuò)沒(méi)有setter座云，設(shè)置setter不起作用，要不就報(bào)錯(cuò)不能修改props朦拖，懵了璧帝；
問(wèn)了同事后，才發(fā)現(xiàn)簡(jiǎn)單問(wèn)題想復(fù)雜了锣夹。實(shí)際上一開(kāi)始只需要拿到就行了苏潜。
data () {
return {
op: this.propsValue
}
},
props: ['propsValue'],
methods: {
changeOp () {
this.op = '12334';
}
}
8. 畫(huà)圖實(shí)現(xiàn)的對(duì)象上的綁定方法操作本頁(yè)面數(shù)據(jù)
問(wèn)題：
畫(huà)圖的代碼在另一個(gè)js中封裝恤左，本vue中引入js，請(qǐng)求之后調(diào)用函數(shù)生成myChart對(duì)象戳气，即圖表對(duì)象瓶您。此時(shí)需要在其上綁定事件蹄皱。
由于請(qǐng)求是異步執(zhí)行巷折，所以要考慮保證綁定事件在畫(huà)圖之后。
思路一：
如果在本.vue中等待其后綁定油吭，那么就要使畫(huà)圖代碼中return 出去
//setChart.js
import echarts from "echarts";
export default function(data, id) {
let myChart = echarts.init(document.getElementById(id));
let option = {};
myChart.setOption(option);
window.onresize = myChart.resize;
return myChart;
};
在.vue頁(yè)面：
import myChart from '@/charts/setChart';
mounted () {
this.utils.MlTools.reqCharts('/sinotans/order/rightChart', 'myChartInit', this.proDym, this)//發(fā)起請(qǐng)求畫(huà)圖
},
methods: {
myChartInit () {
let data = this.proDym;
let _this = this;
myChart(data, "RightChart").on('click', function (params) {
if (params.componentType === 'series') {
// 點(diǎn)擊到了 markPoint 上
if (params.seriesIndex === 1 || params.seriesIndex === 0) {
_this.tabActive = 1;
_this.busCarrier.projectSel = _this.proDym.projectSel;
_this.busCarrier.carrierSel = '全部';
}
}
});
},
}
思路二：傳入回調(diào)函數(shù)
//setChart.js
import echarts from "echarts";
export default function(data, id, callback) {
let myChart = echarts.init(document.getElementById(id));
let option = {};
myChart.setOption(option);
window.onresize = myChart.resize;
myChart.on('click', function(params){
if (params.componentType === 'series') {
callback();
}
})
};
在.vue中：
import myChart from '@/charts/setChart';
mounted () {
this.utils.MlTools.reqCharts('/sinotans/order/rightChart', 'myChartInit', this.proDym, this)//發(fā)起請(qǐng)求畫(huà)圖
},
methods: {
myChartInit () {
let data = this.proDym;
myChart(data, "RightChart", this.changeToShip)
},
changeToShip () {
this.tabActive = 1;
this.busCarrier.projectSel = this.proDym.projectSel;
this.busCarrier.carrierSel = '全部';
}
}
9. 后臺(tái)接收不到數(shù)據(jù)之content-type
form的enctype屬性為編碼方式歌豺，常用有兩種：application/x-www-form-urlencoded和multipart/form-data类咧，默認(rèn)為application/x-www-form-urlencoded蟹腾。
當(dāng)action為get時(shí)候，瀏覽器用x-www-form-urlencoded的編碼方式把form數(shù)據(jù)轉(zhuǎn)換成一個(gè)字串（name1=value1&name2=value2...）值戳，然后把這個(gè)字串追加到url后面炉爆，用?分割芬首，加載這個(gè)新的url。
當(dāng)action為post時(shí)候郁稍，瀏覽器把form數(shù)據(jù)封裝到http body中艺晴，然后發(fā)送到server封寞。 如果沒(méi)有type=file的控件狈究，用默認(rèn)的application/x-www-form-urlencoded就可以了。 但是如果有type=file的話抖锥，就要用到multipart/form-data了磅废。
當(dāng)action為post且Content-Type類型是multipart/form-data拯勉，瀏覽器會(huì)把整個(gè)表單以控件為單位分割竟趾，并為每個(gè)部分加上Content-Disposition(form-data或者file),Content-Type(默認(rèn)為text/plain),name(控件name)等信息岔帽，并加上分割符(boundary)犀勒。
原生AJAX的POST請(qǐng)求如果不指定請(qǐng)求頭Request Header贾费，默認(rèn)使用的Content-Type是text/plain;charset=UTF-8逾一，參數(shù)出現(xiàn)在Request payload塊。
一般json數(shù)據(jù)格式的話箱玷，瀏覽器處就顯示的是
Content-Type:application/json;chartset=UTF-8
vue中的axios傳參方式是request payload,參數(shù)格式是json锡足，而并非用的是form傳參壳坪，所以在后臺(tái)用接收f(shuō)orm數(shù)據(jù)的方式接收參數(shù)就接收不到了爽蝴。
解決辦法：
安裝 qs : npm install qs --save
import qs from "qs";
axios({
method: "post",
url: param.url,
dataType: "json",
data: qs.stringify(param.data),
headers: {
"Content-Type": "application/x-www-form-urlencoded"
},
}).then(res => {
}, err => {
});
10. axios 實(shí)現(xiàn)某些請(qǐng)求的攔截, 不是全局統(tǒng)一攔截
生成實(shí)例：
static reqCharts(urls, d, datas, _this, loading) {
let instance = axios.create();
// 添加請(qǐng)求攔截器
instance.interceptors.request.use(function(config) {
// 在發(fā)送請(qǐng)求之前做些什么
_this[loading] = true;
return config;
}, function(error) {
// 對(duì)請(qǐng)求錯(cuò)誤做些什么
return Promise.reject(error);
});
// 添加響應(yīng)攔截器
instance.interceptors.response.use(function(response) {
// 對(duì)響應(yīng)數(shù)據(jù)做點(diǎn)什么
_this[loading] = false;
return response;
}, function(error) {
// 對(duì)響應(yīng)錯(cuò)誤做點(diǎn)什么
return Promise.reject(error);
});
return new Promise((resolve, reject) => {
instance
.post(urls, datas)
.then(function(res) {
// 處理res
})
.catch (function(err) {
console.log(err.response)
})
})
}
11. axios設(shè)置請(qǐng)求超時(shí)九孩，mock服務(wù)下需要設(shè)置发框，否則不起作用梅惯。
12. vue起服務(wù)自動(dòng)用ip
在config/index.js中，添加：
const ip = require('ip').address();
....
host: ip
