【前端】Vue网络应用

一、网络应用

Vue结合网络数据开发应用

1.1axios

功能强大的网络请求库


    
 
 
    axios.get(地址?key1=value1&key2=value2).then(function(response){},function(err){})
    axios.post(地址{key1=value1，key2=value2}).then(function(response){},function(err){})

axios必须先导入才可以使用
使用get或post方法即可发送对应的请求
then方法中的回调函数会在请求成功或者失败时触发
通过回调函数的形参可以获取响应内容或错误信息


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>Documenttitle>
head>
 
<body>
    <button class="get">get请求button>
    <button class="post">post请求button>
    <script src="https://unpkg.com/axios/dist/axios.min.js">script>
    
    
    <script>
        /*  随机笑话
        请求地址:https//autumnfish.cn/api/joke/list
        请求方法:get
        请求参数：num
        响应内容：随机笑话 */
        document.querySelector(".get").onclick = function () {
            axios.get("https://autumnfish.cn/api/joke/list?num=6").then(function (response) {
                console.log(response);
            }, function (err) {
                console.log(err);
            })
        }
 
        /* 用户注册
        请求地址：https://autumnfish.cn/api/user/reg
        请求方法：post
        请求参数：username
        响应内容：注册成功或失败 */
        document.querySelector(".post").onclick = function () {
            axios.post("https://autumnfish.cn/api/user/reg", { username: "jack" }).then(function (response) {
                console.log(response);
            }, function (err) {
                console.log(err);
            })
        }
    script>
body>
 
html>

文档传送门:GitHub - axios/axios: Promise based HTTP client for the browser and node.js

1.2axios+vue


    
    <script src="https://unpkg.com/axios/dist/axios.min.js">script>
    
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>

axios回调函数中的this已经改变，无法访问到data中数据
把this保存起来，回调函数中直接使用保存的this即可
和本地应用的最大区别就是改变了数据来源


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>Documenttitle>
head>
 
<body>
    <div id="app">
        <button @click="getJoke">获取笑话button>
        <p>{{joke}}p>
    div>
    
    <script src="https://unpkg.com/axios/dist/axios.min.js">script>
    
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
    <script>
        /*         接口：随机获取一条笑话
                请求地址：https://autumnfish.cn/api/joke
                请求方法：get
                请求参数：无
                响应内容：随机笑话 */
        var app = new Vue({
            el: "#app",
            data: {
                joke: "很好笑的笑话"
            },
            methods: {
                getJoke: function () {
                    var that = this;
                    axios.get("https://autumnfish.cn/api/joke").then(function (response) {
                        that.joke = response.data;
                    },
                        function (err) {
                            console.log(err);
                        })
                }
            }
        })
    script>
body>
 
html>

相关阅读:
Token和Session有什么区别，面试官满意的答案
【MATLAB教程案例51】传统神经网络学习——使用matlab神经网络工具箱实现BP、PNN、GRNN神经网络等
家电巨头“竞技”医疗器械
【全面速懂】C#使用WSDL服务
StarkNet新手指南
Qt-OpenCV学习笔记--最小包覆矩形--minAreaRect()
准大学生们利用假期学点编程吧
【刷爆LeetCode】七月算法集训（30）拓扑排序
USB连接与检测
mysql超全语法大全

原文地址：https://blog.csdn.net/qq_45764950/article/details/127858847