Louis Blog 2022-04-20T14:31:23.843Z http://example.com/ Louis Hexo axios http://example.com/2022/04/14/axios/ 2022-04-14T05:15:12.000Z 2022-04-20T14:31:23.843Z axios

axios是一个专注于网络请求的库！

axios 的基本使用

1.发起GET请求

1
2
3
4
5
6
7
8
9
10
11
12
axios({
    //请求方式
        method:'GET',
    //请求地址
        url:'http://www.xxx.com',
        //url中的查询参数(GET)
        params:{
            id:1
        },
    }).then(function(result){
        console.log(result);
    })

2.发起POST请求

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<body>
    <button id="btnPost">发起POST请求</button>
</body>
<script>
    document.querySelector('#btnPost').addEventListener('click',async function(){
    //如果调用某个方法返回值是Promise实例，则前面可以添加await
    //await 只能用在被async "修饰"的方法中
      const {data}=await  axios({
        method:'POST',
        url:'http://www.liulongbin.top:3006/api/post',
        data:{
            name:'zs',
            age:20
        },
    })
    console.log(data);
})

3.axios.get 和axios.post

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<body>
    <button id="btnGET">GET</button>
    <button id="btnPOST">POST</button>
</body>
<script>
(axios.get的写法）
    document.querySelector('#btnGET').addEventListener('click',async function(){
       /* axios.get('url地址',{
            //GET参数
            params:{}
        }) */
        const {data:res} =await axios.get('http://www.liulongbin.top:3006/api/getbooks',{
            params:{id:1}
        })
        console.log(res);
})
(axios.post的写法)
    document.querySelector('#btnPOST').addEventListener('click',async function(){
        /*axios.post('url地址',//POST参数{})*/
        const {data:res}=await axios.post('http://www.liulongbin.top:3006/api/post',{name:'zs',gender:'女'})
        console.log(res);
    })
</script>
]]> <h2 id="axios"><a href="#axios" class="headerlink" title="axios"></a>axios</h2><p>axios是一个专注于网络请求的库！</p> <h3 id="axios-的基本使用"><a href="#axio Vue列表过滤 http://example.com/2022/04/07/Vue%E5%88%97%E8%A1%A8%E8%BF%87%E6%BB%A4/ 2022-04-07T10:30:08.000Z 2022-04-14T05:18:19.505Z 代码实例（watch）
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表过滤</title>
    <script src="/js/vue.js"></script>
</head>
<body>
    <div id="root">
        <input type="text" placeholder="请输入信息" v-model="KeyWord">
        <ul v-for="(p,index) in fillist">
            <li>{{p.name}}-{{p.age}}-{{p.gender}}</li>
        </ul>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false

    new Vue({
        el:'#root',
        data() {
            return {
                KeyWord:'',
                lists:[
                {name:'Louis',age:'18',gender:'male'},
                {name:'Louis1',age:'182',gender:'male'},
                {name:'Louis2',age:'182',gender:'female'}
                    ],
                fillist:[]
            }
        },
        watch:{
            KeyWord:{
                immediate:true,
                handler(val){
                   this.fillist =this.lists.filter((p)=>{
                       return p.name.indexOf(val) !== -1
                   })
               }
            }
        }
    })
</script>
</html>

代码实例(computed)

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表过滤</title>
    <script src="/js/vue.js"></script>
</head>
<body>
    <div id="root">
        <input type="text" placeholder="请输入信息" v-model="KeyWord">
        <ul v-for="(p,index) in fillist">
            <li>{{p.name}}-{{p.age}}-{{p.gender}}</li>
        </ul>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false

    new Vue({
        el:'#root',
        data() {
            return {
                KeyWord:'',
                lists:[
                {name:'Louis',age:'18',gender:'male'},
                {name:'Louis1',age:'182',gender:'male'},
                {name:'Louis2',age:'182',gender:'female'}]
            }
        },
        computed:{
            fillist(){
                return this.lists.filter((p)=>{
                    return p.name.indexOf(this.KeyWord) !== -1
                })
            }
        }
    })
</script>
</html>

分析Vue的片段（分两种方法）

第一种：watch(监视方法)

1.检测输入的关键字是否发生改变（在这里需要提前设定KeyWord(进行双向绑定)）

2.通过数组过滤的filter方法对设定数据p进行过滤

3.最后返回值通过indexOf判断是否包含输入的值（如果不包含会返回-1）

第二种：computed(计算属性)

计算属性大致方法与监视属性一致（详细见代码）

]]> <h3 id="代码实例（watch）"><a href="#代码实例（watch）" class="headerlink" title="代码实例（watch）"></a>代码实例（watch）</h3><figure class="highlight html"><table Hello World http://example.com/2022/03/18/hello-world/ 2022-03-18T04:02:45.759Z 2022-03-18T04:02:45.759Z Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.

Quick Start

Create a new post

1
$ hexo new "My New Post"

More info: Writing

Run server

1
$ hexo server

More info: Server

Generate static files

1
$ hexo generate

More info: Generating

Deploy to remote sites

1
$ hexo deploy

More info: Deployment

]]> <p>Welcome to <a href="https://hexo.io/">Hexo</a>! This is your very first post. Check <a href="https://hexo.io/docs/">documentation</a> for