一切福田，不離方寸，從心而覓，感無不通。

Category Archives: Frontend

VUE基础知识1：数组forEach

vue是数据驱动，vue主要操作的是数据 1、JS中有哪些数据类型 （1）基本数据类型：number,string,boolean,null,undefined （2）引用数据类型: Object, function, Symbol(ES6)   2、{} 和 [] 操作数组的方法有哪些： ES4: pop,push,unshfit,shfit,slice,splice,reverse,sort,indexOf,lastIndexOf,concat (pop push unshift shift splice reverse sort ) 括号中的能改变原数组，叫数组的变异 3、用的比较多的方法 forEach,filter,map,find,some,every,includes,reduce some,every 是 ES5的 ES6:(includes,find),其余都是ES5的 filter(过滤)，map（映射） 4、node版本 版本最好升级到 8.5以上 5、for for循环和forEach是等价的，都是循环数组 例子：

1
2
3
4
5
6
7
8
9
 
let arr = [1, 2, 3, 4, 5];
 
for (let i = 0; i < arr.length; i++) {
 
console.log(arr[i]);
 
}
 

  5、forEach 例子：

1
2
3
4
5
6
7
8
9
 
let arr = [1, 2, 3, 4, 5];
 
arr.forEach(function (item, index) {
 
console.log(item);
 
});
 

  注意：forEach不支持return 6、 for of for of 支持return,并且是只能遍历数组，不能遍历对象 for of 是ES6语法 例子：

1
2
3
4
5
6
7
8
9
 
let arr = [1, 2, 3, 4, 5];
 
for(let val of arr) {
 
console.log(val);
 
}
 

  7、如何用for of 遍历对象呢？ 本来for of 不支持遍历对象。 Object.keys将对象的key作为新的数组 例子：

1
2
3
4
5
6
7
8
9
 
let obj = {school: 'name', age: 8};
 
for (let val of Object.keys(obj)) {
 
console.log(obj[val]);
 
}
 

  8、filter filter是过滤的意思，filter不会操作原数组，返回的是过滤后的新数组。 回调函数返回的结果，如果返回true,表示这一项放到新数组中。 例子： 过滤出来大于2，小于5的值

1
2
3
4
5
6
7
8
9
 
let newAry = [1, 2, 3, 4, 5].filter(function (item, index) { //index是索引
 
return item > 2 && item < 5;
 
});
 
console.log(newAry); // [3, 4]
 

  9、map map是映射的意思，将一个数组映射成一个新数组。 map不操作原数组，返回一个新数组。 回调函数中返回什么，这一项就是什么。 例子： [1,2,3] 映射成 <li>1</li><li>2</li><li>3</li>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
let arr1 = [1, 2, 3].map(function (item, index) {
 
return 2;
 
});
 
console.log(arr1); // [2,2,2]
 
 
 
let arr2 = [1, 2, 3].map(function (item, index) {
 
return item *= 3;
 
});
 
console.log(arr2); // [3,6,9]
 
 
 
let arr3 = [1, 2, 3].map(function (item, index) {
 
return `<li>${item}</li>`;
 
});
 
console.log(arr3); // [ '<li>1</li>', '<li>2</li>', '<li>3</li>' ]
 
console.log(arr3.join('')); // <li>1</li><li>2</li><li>3</li>
 

  join() 方法用于把数组中的所有元素放入一个字符串。  是ES6中的模板字符串，遇到变量用${ } 取值。 filter一般用于删除数组中的某一项。而map一般用于把这个数组修改一下。 10、includes includes 数组是否包含的意思，返回的是boolean includes 是ES6的方法 some、every 是ES5的方法 例子：

1
2
3
4
5
 
let arr3 = [1,2,3,4,55];
 
console.log(arr3.includes(5)); // false
 

  11、find find 是找出数组中的某一项。 返回找到的那一项。 […]

龙生   20 May 2020
View Details

axios基础用法

概述： 1.axios：一个基于Promise用于浏览器和nodejs的HTTP客户端。本质是对ajax的封装。 特征： 从浏览器中创建XMLHttpRequest 从node.js发出http请求 支持Promise API 拦截请求和响应 转换请求和响应数据 取消请求 自动转换JSON数据 客户端支持防止CSRF/XSRF 2.安装 npm install axios import axios from "axios" 3.API 1 axios(config)

1
2
3
4
5
6
7
8
    eg: axios({
        method:"post",
        url:"/user",
        data:{
            firstName:"nanhua",
            lastName:"qiushui"
        }
    });

  2.axios(url,config) //默认为get请求 3.请求方法别名

1
2
3
4
5
6
7
        axios.request(config)
        axios.get(url,config)
        axios.post(url,data,config)
        axios.delete(url,config)
        axios.head(url,config)
        axios.put(url,data,config)
        axios.patch(url,data,config)

  4.并发

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
        自定义配置创建axios实例
        var instance = axios.create({
            baseURL:"https://some-domain.com/api/",
            timeout:1000,
            headers:{"X-Custom-Header":"foobar"}
        })
        自定义实例默认值
        //创建实例时设置
        //实例创建后修改默认值（设置全局axios默认值）
        axios.defaults.baseURL = "https://api.example.com";
        axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
        axios.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";
 
        并发：axios.all(iterable)
        eg: axios.all([
            axios.get("https://api.github.com/xxx/1");
            axios.get("https://api.github.com/xxx/2");
        ]).then(axios.spread(function(userResp,reposResp){
            console.log("User",userResp.data);
            console.log("Repositories",reposResp.data);
        }))

 

1
2
    * 当所有的请求都完成后，会收到一个数组，它包含着响应对象，其中的顺序和请求发送的顺序相同，可以用<span class="hljs-selector-tag">axios</span><span class="hljs-selector-class">.spread</span>分割成多个单独的响应对象。
 

5.config参数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
        baseURL: 'https://some-domain.com/api/',  //将自动加在url前面，除非url是一个绝对URL
        
        //允许在向服务器发送前，修改请求数据
        //只能用在PUT\POST\PATCH
        //后面数组的函数必须返回一个字符串/ArrayBuffer或Stream
        transformRequest:[function(data){
            //对data进行任意转换处理
            return data;
        }],
 
        //在传递给then/catch之前，允许修改响应数据
        transformResponse: [function (data) {
            return data;
        }],
 
        //即将被发送的自定义请求头
        headers:{
            'X-Requested-With': 'XMLHttpRequest'
        },
 
        //即将与请求一起发送的URL参数
        params:{
            ID: 12345
        },
 
        //负责params序列化的函数
        paramsSerializer:function(params){
            return Qs.stringify(params,{arrayFormat: "brackets"});
        },
 
        //超时
        timeout: 1000,
 
        //表示跨域请求时是否需要使用凭证
        withCredentials: false,
 
        //允许响应内容的最大尺寸
        maxContentLength: 2000,
 
        //对打重定向数目
        maxRedirects:5,
 
        //是否启用长连接
        httpAgent: new http.Agent({
            keepAlive: true
        }),
        httpsAgent: new https.Agent({
            keepAlive: true
        }),
 
        //代理服务器设置
        proxy:{
            host:"127.0.0.1",
            port: 9000,
            auth:{
                username:"nanhuaqiushui",
                password:"Huawei@123"
            }
        }

  6.响应结构

1
2
3
4
5
6
7
    {
        data:{},
        status:200,
        statusText:"OK",
        headers:{},  //服务器响应的头
        config:{}   //为请求提供的配置信息
    }

  7.拦截器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
    //请求拦截器
    axios.interceptors.request.use(function(config){
        //发送请求之前做些什么
        return config;
    },function(error){
        //请求错误之后做些什么
        return Promise.reject(error);
    })
    //响应添加拦截器
    axios.interceptors.response.use(function(config){
        //发送请求之前做些什么
        return config;
    },function(error){
        //请求错误之后做些什么
        return Promise.reject(error);
    })
 
    //移除拦截器
    var myInterceptor = axios.interceptors.request.use(function(){
        ...
    })
    axios.interceptors.request.eject(myInterceptor);

  新兴实践

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
const service = axios.create({
  baseURL: process.env.BASE_API,
  timeout: 100000
})
 
//  请求拦截器
service.interceptors.request.use(
  config => {
    config.headers['Content-Type'] = 'application/json'
    if (store.getters.token) {
      // 让每个请求携带token
      config.headers['Authorization'] = store.getters.token
    }
    return config
  },
  error => {
    Toast.failed('网络异常，请检查网络连接')
    console.log(error) // for debug
    return Promise.reject(error)
  }
)
 
// 响应拦截器
service.interceptors.response.use(
  response => {
    const res = response.data
    if (res.code && res.code !== 200) {
        Toast.failed(res.message)
    }
    return response
  },
  error => {
    Toast.failed('网络异常，请检查网络连接')
    return Promise.reject(error)
  }
)
export default service

  from:https://www.cnblogs.com/nanhuaqiushui/p/10514122.html

龙生   07 May 2020
View Details

vue中$emit与$on和BUS

bus： //vue原型链挂载总线 Vue.prototype.bus = new Vue(); //子组件发送数据 this.bus.$emit("change",data); //子组件接收数据 this.bus.$on("change",function(data){ }) vue中$emit与$on 　　var Event = new Vue();　　　　　　相当于又new了一个vue实例，Event中含有vue的全部方法； Event.$emit('msg',this.msg);　　　   发送数据，第一个参数是发送数据的名称，接收时还用这个名字接收，第二个参数是这个数据现在的位置； Event.$on('msg',function(msg){　　接收数据，第一个参数是数据的名字，与发送时的名字对应，第二个参数是一个方法，要对数据的操作 /这里是对数据的操作 }) 例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>孙三峰--博客园</title>
        <script type="text/javascript" src="js/vue2.0.3.js" ></script>
        <script type="text/javascript">
            //准备一个空的实例对象
            var Event = new Vue();
            var A={
                template:`
                    <div style="border: 1px solid red; margin-bottom: 10px； width: 300px;">
                        <h4>A组件</h4>
                        <p>{{a}}</p>
                        <input type="button" value="把A数据给C" @click="send" />
                    </div>
                `,
                data(){
                    return {
                        a:'我是A里面的数据'
                    }
                },
                methods:{
                    send(){        //A发送数据
                        Event.$emit('a-msg',this.a);
                    }
                }
            };
            var B={
                template:`
                    <div style="border: 1px solid green; margin-bottom: 10px； width: 300px;">
                        <h4>B组件</h4>
                        <p>{{b}}</p>
                        <input type="button" value="把B数据给C" @click="send" />
                    </div>
                `,
                data(){
                    return {
                        b:'我是B里面的数据'
                    }
                },
                methods:{
                    send(){
                        Event.$emit('b-msg',this.b);
                    }
                }
            };
            var C={
                template:`
                    <div style="border: 1px dotted green; margin-bottom: 10px；width: 300px;">
                        <h4>我是C组件,我在坐等接收数据</h4>
                        <p>{{a}}</p>
                        <p>{{b}}</p>
                    </div>
                `,
                data(){
                    return{
                        a:'',
                        b:''
                    }
                },
                mounted(){        //两种接收的方式
                    var _this = this;
                    Event.$on('a-msg',function(a){
                        _this.a=a;
                    });
                    Event.$on('b-msg',function(b){
                        this.b = b;
                    }.bind(this))
                }
            };
            window.onload=function(){
                new Vue({
                    el:'#box',
                    data:{
                        
                    },
                    components:{
                        'com-a':A,
                        'com-b':B,
                        'com-c':C
                    }
                })
            }
        </script>
    </head>
    <body>
        <div id="box">
            <com-a></com-a>
            <com-b></com-b>
            <com-c></com-c>
        </div>
    </body>
</html>

  效果图：   from:https://www.cnblogs.com/wang-sai-sai/p/11158770.html

龙生   29 Apr 2020
View Details

解决postMessage跨域问题

在HTML5中新增了postMessage方法，postMessage可以实现跨文档消息传输（Cross Document Messaging），Internet Explorer 8, Firefox 3, Opera 9, Chrome 3和 Safari 4都支持postMessage。 该方法可以通过绑定window的message事件来监听发送跨文档消息传输内容。   1. postMessage是HTML5 XMLHttpRequest Level 2中的API，且是为数不多可以跨域操作的window属性之一，它可用于解决以下方面的问题： a.） 页面和其打开的新窗口的数据传递 b.） 多窗口之间消息传递 c.） 页面与嵌套的iframe消息传递 d.） 上面三个场景的跨域数据传递 2. postMessage用法：

1
postMessage(data,origin)方法接受两个参数

参数说明： data： html5规范支持任意基本类型或可复制的对象，但部分浏览器只支持字符串，所以传参时最好用JSON.stringify()序列化。 origin： 协议+主机+端口号，也可以设置为"*"，表示可以传递给任意窗口，如果要指定和当前窗口同源的话设置为"/"。   举例说明： 两个页面之间进行数据传输，postMessage示例： 我启动了两个ip地址来代表不同域名，页面t_hotnotes_list.html插入如下代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<iframe id="iframe" src="http://10.73.154.73:8088/rbc/t/search_role.html" style="display:none;"></iframe>
    <script>      
        var iframe = document.getElementById('iframe');
        iframe.onload = function() {
            var data = {
                name: 'aym',
                type:'wuhan'
            };
            // 向domain2传送跨域数据
            iframe.contentWindow.postMessage(JSON.stringify(data), 'http://10.73.154.73:8088');
        };
 
        // 接受domain2返回数据，这边给延迟的原因，因为同步传输时，页面不一定立马拿到数据，所以给延迟
        setTimeout(function(){
            window.addEventListener('message', function(e) {
                alert('data from domain2 sss ---> ' + e.data);
            }, false);
        },10)
    </script>

页面search_role.html插入如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script>
        // 接收domain1的数据
        window.addEventListener('message', function(e) {
            console.log(e.data);
 
            var data = JSON.parse(e.data);
            if (data) {
                data.number = 16;
                data.age = 89;
                data.icon = 'sfafdafdafasdf';
 
                // 处理后再发回domain1
                window.parent.postMessage(JSON.stringify(data), 'http://10.73.154.72:8088');
            }
        }, false);
    </script>

当两个服务启动之后，我们在浏览器中打开页面t_hotnotes_list.html

1
http://10.73.154.72:8088/rbc/t/t_hotnotes_list.html

得到如下图结果，t_hotnotes_list.html得到两个页面的数据     from:https://www.cnblogs.com/yyy6/p/9481671.html

龙生   21 Apr 2020
View Details

postMessage的使用

一、简介# 1、postMessage()方法允许来自不同源的脚本采用异步方式进行有限的通信，可以实现跨文本档、多窗口、跨域消息传递 2、postMessage(data,origin)方法接受两个参数： （1）data:要传递的数据，html5规范中提到该参数可以是JavaScript的任意基本类型或可复制的对象，然而并不是所有浏览器都做到了这点儿，部分浏览器只能处理字符串参数，所以我们在传递参数的时候需要使用JSON.stringify()方法对对象参数序列化，在低版本IE中引用json2.js可以实现类似效果， （2）origin：字符串参数，指明目标窗口的源，协议+主机+端口号[+URL]，URL会被忽略，所以可以不写，这个参数是为了安全考虑，postMessage()方法只会将message传递给指定窗口，当然如果愿意也可以建参数设置为"*"，这样可以传递给任意窗口，如果要指定和当前窗口同源的话设置为"/"； 二、使用# 1、子页面向父页面传递消息 <!-- frame1.html --> <h1>iframe1 page</h1> <script> 　　window.top.postMessage('message from iframe1'); </script> 2、父页面向子页面传递消息

1
2
3
4
5
6
7
8
9
    <!-- index.html -->
    <iframe src="http://127.0.0.1:5500/frame1.html" frameborder="1"></iframe>
    <iframe src="http://127.0.0.1:5500/frame2.html" frameborder="1"></iframe>
    <script>
        window.onload = function () {
            var frame1 = window.frames[0];
            frame1.postMessage('message from parentwindow', '*');
        }
    </script>

1
2
3
4
5
6
7
   <!-- frame1.html -->
    <h1>iframe1 page</h1>
    <script>
        window.addEventListener('message',function(e){
            console.log(e.data)
        },false)
    </script>

    from:https://www.cnblogs.com/EricZLin/p/10534537.html

龙生   21 Apr 2020
View Details

Dapper.Contrib：GetAsync only supports an entity with a [Key] or an [ExplicitKey]

property 异常处理：http://www.cnblogs.com/dunitian/p/4523006.html#dapper 原来Model是这样滴 修改后是这样滴 注意点：Model里面的Table和Key是Dapper.Contrib.Extensions命名空间下的 成功~   from:https://www.cnblogs.com/dunitian/p/5710467.html

龙生   20 Apr 2020
View Details

vue css中scoped

1、什么是scoped vue组件中，在style标签中有一个属性，叫做scoped。当此标签拥有scoped属性的时候，该组件下的css样式只适用于本组件，而不会影响全局组件。这其实也相当于样式的模块化了。 2、scoped实现的原理 其实scoped中最重要的就是PostCSS,PostCSS是一种css的编译的工具。来看一下转译之前的代码： 编译前的代码：

1
2
3
4
5
6
7
8
9
10
11
<template>    
    <span class="textScoped">scoped测试</span>
</template>
<script>
 
</script>
<style scoped>    
    .textScoped{
        color: red;    
    }
</style>

  编译之后的代码:

1
2
3
4
5
6
7
8
9
10
11
<template>    
    <span data-v-3e5b2a80 class="textScoped">scoped测试</span>
</template>
<script>
 
</script>
<style scoped>    
    .textScoped[data-v-3e5b2a80]{        
        color: red;    
    }
</style>

  编译后，我们发现css中，PostCSS给所有的dom都添加了一个独一无二的动态属性，给css选择器也添加了一个对应的属性选择器，这样就可以让样式只作用于该属性的dom元素（组件内部的dom）。   from:https://www.cnblogs.com/marksir/p/11685350.html

龙生   15 Apr 2020
View Details

vue项目中json字符串转换成json对象

场景:在前端发送ajax请求是后台有时会返回json字符串,这样的数据需要转化成json对象才可以正常的使用 之前我在这个问题上困惑了好几天,从网上找了一些资料,使用了一下都是报错的,所以写着篇博客是为了让像我一样的新手可以少一些痛苦,尽快的完成任务 JSON.parse(jsonstr);//括号内为你需要转化json对象的内容 我标红的那一行就是转化json对象的,大家可以看一下,转化之前打印的red   和转化之后打印的this.bookcontent的格式是不一样的,之前是json字符串,之后的是json对象, created(){ getBookContent(this.bookId, this.chapterid).then(red =>{ // console.log(red) let a = JSON.parse(red.data);//将json字符串转换成json对象 this.bookcontent = a.chapter.chaptername // console.log(this.bookcontent) }).catch(err =>{ console.log(err,’请求失败') }) } ———————————————— 版权声明：本文为CSDN博主「qq_41114935」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。 原文链接：https://blog.csdn.net/qq_41114935/java/article/details/81284188

龙生   09 Apr 2020
View Details

vue中 关于$emit的用法

1、父组件可以使用 props 把数据传给子组件。 2、子组件可以使用 $emit 触发父组件的自定义事件。 vm.$emit( event, arg ) //触发当前实例上的事件 vm.$on( event, fn );//监听event事件后运行 fn； 例如：子组件： <template> <div class="train-city"> <h3>父组件传给子组件的toCity:{{sendData}}</h3> <br/><button @click=’select(大连)'>点击此处将‘大连’发射给父组件</button> </div> </template> <script> export default { name:’trainCity', props:['sendData'], // 用来接收父组件传给子组件的数据 methods:{ select(val) { let data = { cityname: val }; this.$emit('showCityName',data);//select事件触发后，自动触发showCityName事件 } } } </script> 父组件： <template> <div> <div>父组件的toCity{{toCity}}</div> <train-city @showCityName="updateCity" :sendData="toCity"></train-city> </div> <template> <script> import TrainCity from "./train-city"; export default { name:’index', components: {TrainCity}, data () { return { toCity:"北京" } }, methods:{ updateCity(data){//触发子组件城市选择-选择城市的事件 this.toCity = data.cityname;//改变了父组件的值 console.log('toCity:’+this.toCity) } } } </script>   from:https://www.cnblogs.com/shaozhu520/p/10637455.html

龙生   08 Apr 2020
View Details

vue中find函数

let obj = this.role.find(v => v.code === res.company.role) 循环 data对象中的role数组 ，每个数组元素用v代替，code为他的键，返回找到的数组元素对象。   from:https://www.cnblogs.com/erfsfj-dbc/p/10063533.html

龙生   03 Apr 2020
View Details
1 … 17 18 19 … 59

Copyright © 2025 Longsheng All rights reserved