遇到这种情况一定要好好反省自己写的url请求,本地代码请求接口没问题，打包上线有问题，原来是本地使用了代理可以识别，而线上的不可以识别。
解决方案：1.url前面一定要加http://
2.认真看自己的url,是否真的符合正常规则，是不是多写或少写了一个/。
非常重要，需要在函数初始化时加入
mounted(){
this.$previewRefresh()
}
在这里是运用了数组，支持后台多图片返回，建议图片使用懒加载方式
这个函数可以在需要有自适应的时候使用
由于我的图片是在elementui框架的对话框里面引用到的，一开始发现放大后图片在对话框下面显示，研究发现对话框的z-index属性一般为3000，所以我们只需要重写一下css属性就可以啦
要注意这里属性重写建议写在index.css下面，不然可能不起作用哦。
在这里要重点提一个问题，就是在引用的时候，要注意你的引用步骤，当该效果没有的时候可以考虑一下是不是渲染出了问题或者在该引用组件已经渲染后再调用$previewRefresh()函数时会因为数组长度为0，没有效果。解决方法就是watch()一下你打开的对话框再进行图片渲染。
思路：
<html>
<head></head>
<body>
<ul id="list">
<li>标签1</li>
<li>标签2</li>
<li>标签3</li>
<li>标签4</li>
<li>标签5</li>
</ul>
</body>
</html>
<script>
// 方法一
var oli=document.getElementsByTagName('li');
for(var i=0; i<oli.length;i++)
{
oli[i].index=i+1;
oli[i].onclick=function(){
alert('你点击的列表的下标是：'+this.index);
//列表下标从0开始
};
}
// 方法二 事件托管，由父节点监听点击事件
var ul = document.getElementById('list');
var li = ul.getElementsByTagName('li');
ul.onclick = function(e){
var e = e || window.event, target = e.target || e.srcElement;
for(var s in li){
if(target == li[s]){
s = parseInt(s)+1;
alert(s);
break;
}
}
}
</script>
思路：一开始想要用正则表达式来匹配，后来想到一种更简单一点的处理方法就是利用js自带的split()处理函数，先将整串url以?分割开，取后半部分，再根据&将不同变量拆分开来，最后根据=分割开，前部分为key,后半部分为value
var url = "https://www.baidu.com?key1=welcome&key2=to&key3=china"
function getQuery(url) {
if (url.indexOf("?")>-1) {
var result = [];
var paraStr = url.split("?")[1];
var para = paraStr.split("&");
for (var i=0;i<para.length;i++){
var paraKey = para[i].split("=")[0];
var paraValue = para[i].split("=")[1];
result.push({
key: paraKey,
value: paraValue
})
}
console.log(result)
}
}
getQuery(url)
思路流程：”https://www.baidu.com?key1=welcome&key2=to&key3=china"
==>key1=welcome&key2=to&key3=china
==>key1=welcome key2=to key3=china
==>[{key: key1, value: welcome},{key: key2,value: to},{key: key3,value: china}]
var reg = /正则表达式/
一下为经纬度的正则表达式的校验：
longitude: [
{ required: true, message: '请输入经度', trigger: 'blur' },
{
validator: (rule, value, callback) => {
if (value.length === 0) {
callback(new Error('经度范围：-180.000000~180.000000'))
} else {
var reg = /^[-+]?(180(\.0{0,6})?|([0-9]|[1-9][0-9]|1[0-7][0-9]|0{1,3})(\.\d{0,6})?)$/
if (!reg.test(value)) {
callback(new Error('经度范围：-180.000000~180.000000'))
} else {
callback()
}
}
}
}
],
latitude: [
{ required: true, message: '请输入纬度', trigger: 'blur' },
{
validator: (rule, value, callback) => {
if (value.length === 0) {
callback(new Error('纬度范围：-90.000000~90.000000'))
} else {
var reg = /^-?((0|[1-8]?[0-9]?)(([.][0-9]{1,6})?)|90(([.][0]{1,6})?))$/
if (!reg.test(value)) {
callback(new Error('纬度范围：-90.000000~90.000000'))
} else {
callback()
}
}
}
}
]
最近想搭一下后台开发环境，就装了一些软件，在装nginx的时候遇到下面的一个问题。No mapping for the Unicode character exists in the target multi-byte code page.
解决方法：将你的目录下中文改掉即可。
在子组件里添加回调函数监听:before-close="cancelRegister"
在父组件里添加监听v-if="addrulesonoff"，
当需要关闭对话框时，在cancelRegister函数里修改addrulesonoff的状态并将其传给父组件，让父组件去修改子组件的props值就可以啦
详细代码：
handleHistory(e, rowData) {
this.ruleid = rowData.id
this.$router.push({
name: 'AlarmHistory',
params: {
ruleid: this.ruleid
}
})
},
1.name -> 是要跳转的路由路径，在router文件里配置，也可以用path进行路径导航，但是path不能进行参数传递
2.params -> 是要携带的参数，参数形式为 key: value 若参数数目过多时，建议考虑本地存储
3.参数也可以采用query ,但是这个参数会显示在url上，容易被误改导致出错。通过query传递参数，页面刷新后，数据不会消失。但是params刷新后会消失
B页面代码
created() {
this.ruleid = this.$route.params.ruleid
this.selectHistoryByPageList(this.currentPage, this.pageSize, this.ruleid)
},
vue init webpack testol