【前端】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>

相关阅读:
安装 Gin 框架
华为云项目部署
领悟《信号与系统》之信号与系统的描述-下节
C++11之decltype类型推导（使用场景、推导四规则、cv限定符）
webpack优化篇（四十二）：使用高版本的 webpack 和 Node.js
LeetCode高频题300. 最长递增子序列
苹果服务器退款通知处理notificationType为CONSUMPTION_REQUEST
react 路由的组件说明、路由的执行过程
8.【外部排序】基本概念和方法 + 优化：【败者树】{减少关键字对比次数}、【置换-选择排序】{减少初始归并段数量}、【最佳归并树】{谁先合并更快}
计算机网络-防火墙简单配置实验

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