Vue学习小结(三)—网络应用

最新推荐文章于 2022-04-20 10:42:29 发布

酸霉汤

最新推荐文章于 2022-04-20 10:42:29 发布

阅读量255

点赞数 1

分类专栏： # Vue.js 文章标签： vue css3 html5 javascript

本文链接：https://blog.csdn.net/iTaylorfan/article/details/107709021

版权

Vue.js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1. axios

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

官网地址：axios中文网

快速上手

用到的接口：
获取笑话：“https://autumnfish.cn/api/joke/list?num=”
测试用户注册：“https://autumnfish.cn/api/user/reg”

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>axios</title>
</head>
<body>
    <div id="app">
        <!-- axios是功能强大的网络请求库 -->
        <input type="button" value="get请求" class="get">
        <input type="button" value="post请求" class="post">
    </div>
    
     <!-- 使用官网地址 -->
     <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

     <script>
        //get请求获取笑话
        document.querySelector(".get").onclick=function(){
            axios.get("https://autumnfish.cn/api/joke/list?num=3") //笑话的接口地址
            .then(function(response){ //打印成功的参数
                console.log(response);
            },function(error){  //打印错误参数
                console.log(error);
            });
        }

        //post请求发送用户注册信息
        document.querySelector(".post").onclick=function(){
            // 用户注册接口地址
            axios.post("https://autumnfish.cn/api/user/reg",{username:"jack"})
            .then(function(response){
                console.log(response);
            })
        }
     </script>
</body>
</html>

GET请求：

POST请求：
在这里插入图片描述

2. axios+vue

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>axios+vue</title>
</head>
<body>
    <div id="app">
        <!-- axios是功能强大的网络请求库 -->
        <input type="button" value="获取笑话" @click="getJoke">
        <p>{{ joke }}</p>
    </div>
    
     <!-- 使用官网地址导入 axios-->
     <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

     <!-- 开发环境版本，包含了有帮助的命令行警告 -->
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

     <script>
         var app=new Vue({
            el:"#app",
            data:{
                joke:"很好笑的笑话"
            },
            methods: {
                getJoke:function(){
                    // 注意this指向问题
                    var that=this;  //保存一下Vue的this
                    axios.get("https://autumnfish.cn/api/joke").then(function(response){
                        that.joke=response.data;
                    })
                } 
            },
         });
     </script>
</body>
</html>

点击获取笑话并打印：
在这里插入图片描述

3. 案例—查询城市天气

天气查询

代码:

用到的接口：http://wthrcdn.etouch.cn/weather_mini?city=

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="chaxuntianqi.css">
    <title>查询天气</title>
</head>
<body>
    <div id="app">
        <header>
            <h1>天气查询</h1>
        </header>
        <section>
            <input type="search" id="searchW" v-model="city" placeholder="请输入城市名">
            <input type="button" value="查询" @click="searchWeather">
            <ul>
                <li v-for="item in hotCity" @click="changeCity(item)">{{item}}</li>
            </ul>
        </section>
        <footer>
            <ul>
                <li v-for="item in info">
                    <h2>{{item.type}}</h2>
                    <p class="temperature"><span class="low">{{item.low}}</span> ~ <span class="high">{{item.high}}</span></p>
                    <p class="date">{{item.date}}</p>
                </li>
                
            </ul>
        </footer>
    </div>
   
     <!-- 导入 axios-->
     <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

     <!-- 开发环境版本，包含了有帮助的命令行警告 -->
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
     <script src="chaxuntianqi.js"></script>
</body>
</html>

CSS

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

#app{
    width: 800px;
    height: 400px;
    position: relative;
    margin: 50px auto;
    text-align: center;
    border: 1px solid black;
    border-radius: 10px;
}
#app section{
    margin-top: 20px;
}
#app section [type="search"]{
    width: 80%;
    height: 40px;
    font-size: 25px;
    outline: none;
}

#app section [type="button"]{
    width: 100px;
    height: 40px;
    font-size: 20px;
    outline: none;
    background-color: skyblue;
    color: white;
    border-radius: 5px;
    vertical-align:top;
}
section ul{
    list-style: none;
    padding-left: 25px;
    
}
section ul::before,
section ul::after
{
    content: "";
    display: block;
    clear: both;
}

section ul li{
    float: left;
    margin-right: 10px;
    color: rgb(146, 146, 146);
    cursor: pointer;
}
#app footer{
    margin-top: 40px;
}

#app footer ul{
    list-style: none;
    padding-left: 25px;
}
footer ul li{
    width: 20%;
    line-height: 2.5;
    border-right: 1px solid rgb(128, 128, 128);
    float: left;
}
footer ul li:last-child{
    border-right: none;
}
footer ul li h2{
    color: coral;
}
footer ul li .temperature{
    color: crimson;
    font-size: 14px;
}
.temperature .low{
    color: darkturquoise;
}
.temperature .high{
    color: red;
}
footer ul li .date{
    color: rgb(128, 128, 128);
}

JS

// http://wthrcdn.etouch.cn/weather_mini  接口地址 需要传参
var app=new Vue({
    el:"#app",
    data:{
        city:"武汉",
        info:[],  //存放得到的天气信息
        hotCity:["北京","上海","广州","深圳"]  //热门城市
    },
    methods: {
        searchWeather:function(){
            if(this.city!=""){
                var that=this;
                axios.get("http://wthrcdn.etouch.cn/weather_mini?city="+this.city).then(
                    function(response) {
                        that.info=response.data.data.forecast;
                        console.log(response.data.data.forecast);
                    }
                )
            }
        },
        changeCity:function(name) {
            this.city=name;
            this.searchWeather();  //通过this调用methods里面的方法
        }
    },
})

4. 进阶案例—音乐播放器

用到的接口：
音乐查询接口地址：https://autumnfish.cn/search?keywords=
音乐播放接口地址：https://autumnfish.cn/song/url?id=
音乐详情接口地址：https://autumnfish.cn/song/detail?id=
音乐评论接口地址：https://autumnfish.cn/comment/hot?type=0&id=
音乐视频接口地址：https://autumnfish.cn/mv/url

素材资源地址：传送门
音乐播放器

酸霉汤

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue学习小结(三)—网络应用

1. axiosAxios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。官网地址：axios中文网快速上手用到的接口：获取笑话：“https://autumnfish.cn/api/joke/list?num=”测试用户注册：“https://autumnfish.cn/api/user/reg”<!DOCTYPE html><html lang="en"><head> <meta chars
复制链接

扫一扫