【Web开发手礼】探索Web开发的秘密（十五）-Vue2（2）AJAX、前后端分离、前端工程化

news2024/11/23 15:21:05

主要介绍了AJAX、前后端分离所需的YApi、前端工程化所需要的环境安装！！！

前言

AJAX

原生Ajax

Axios

Axios入门

案例

前后端分离开发

YApi

前端工程化

环境准备

总结

前言

主要介绍了AJAX、前后端分离所需的YApi、前端工程化所需要的环境安装！！！

AJAX

概念：Asynchronous JavaScript And XML，异步的JavaScript和XML。

作用：

数据交换：通过Ajax可以给服务器发送请求，并获取服务器响应的数据。
异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想、用户名是否可用的校验等等。

原生Ajax

准备数据地址：http://yapi.smart-xwork.cn/mock/169327/emp/list
创建XMLHttpRequest对象：用于和服务器交换数据
向服务器发送请求
获取服务器响应数据

<body>
    <input type="button" value="获取数据" onclick="getData()">
    <div id="div1"></div></body>

<script>
    function getData(){
        //1. 创建XMLHttpRequest 
        var xmlHttpRequest  = new XMLHttpRequest();
        //2. 发送异步请求
        xmlHttpRequest.open('GET','http://yapi.smart-xwork.cn/mock/169327/emp/list');
        xmlHttpRequest.send();//发送请求
        //3. 获取服务响应数据
        xmlHttpRequest.onreadystatechange = function(){
            if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
                document.getElementById('div1').innerHTML = xmlHttpRequest.responseText;
            }
        }
    }
</script>

a'xio过于繁琐！！！

Axios

介绍：Axios 对原生的Ajax进行了封装，简化书写，快速开发。
官网： https://www.axios-http.cn/

Axios入门

官网下载后引入Axios的js文件

百度网盘下载

<script src="js/axios-0.18.0.js"></script>

或者在线引用：

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

使用Axios发送请求，并获取响应结果

axios({
    method: "get",
    url: "http://yapi.smart-xwork.cn/mock/169327/emp/list"
}).then((result) => {
    console.log(result.data);
});

method: "get"：指定请求的方法为GET，这表示向服务器获取（或者说检索）位于指定URL上的资源，即获取员工列表的操作。
url: "http://yapi.smart-xwork.cn/mock/169327/emp/list"：指定请求的URL，即目标服务器上用于获取员工列表的API接口。
then()方法：Axios返回一个Promise对象，该方法用于处理异步操作的结果。当服务器响应成功时，会执行传入的回调函数。
result.data：表示从服务器返回的响应数据。在这段代码中，使用console.log()将返回的员工列表数据输出到控制台。

axios({
    method: "post",
    url: "http://yapi.smart-xwork.cn/mock/169327/emp/deleteById",
    data: "id=1"
}).then((result) => {
    console.log(result.data);
});

method: "post"：指定请求的方法为POST，这表示将向服务器发送一条指定URL的POST请求。
url: "http://yapi.smart-xwork.cn/mock/169327/emp/deleteById"：指定请求的URL，即目标服务器上用于删除员工信息的API接口。
data: "id=1"：指定发送到服务器的数据。在这里，数据是以字符串形式指定的，表示要删除的员工ID是1。Axios会自动将此数据转换为适当的格式（通常是JSON）并发送给服务器。
then()方法：Axios返回一个Promise对象，该方法用于处理异步操作的结果。当服务器响应成功时，会执行传入的回调函数。
result.data：表示从服务器返回的响应数据。在这段代码中，使用console.log()将返回的数据输出到控制台。

请求方式别名

axios.get(url [, config])
axios.delete(url [, config])
axios.post(url [, data[, config]])
axios.put(url [, data[, config]])

发送get请求

axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then((result) => {
    console.log(result.data);
});

发送post请求

axios.post("http://yapi.smart-xwork.cn/mock/169327/emp/deleteById","id=1").then((result) => {
    console.log(result.data);
});

案例

基于Vue及Axios完成数据的动态加载展示

数据准备的url： http://yapi.smart-xwork.cn/mock/169327/emp/list 在页面加载完成后，自动发送异步请求，加载数据，渲染展示页面(性别：1 代表男，2 代表女)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/axios-0.18.0.js"></script>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        <table border="1" cellspacing="0" width="60%">
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>图像</th>
                <th>性别</th>
                <th>职位</th>
                <th>入职日期</th>
                <th>最后操作时间</th>
            </tr>
            <tr align="center" v-for="(emp,index) in emps">
                <td>{{index+1}}</td>
                <td>{{emp.name}}</td>
                <td><img v-bind:src="emp.img" alt="" width="70px" height="50px"></td>
                <td>
                    <span v-if="emp.gender == 1">男</span>
                    <span v-if="emp.gender == 2">女</span>
                </td>
                <td>{{emp.job}}</td>
                <td>{{emp.entrydate}}</td>
                <td>{{emp.updatetime}}</td>
            </tr>
        </table>
    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data:{
            emps: [],
        },
        mounted(){
            //发送异步请求，加载数据
            axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then((result)=>{
                this.emps = result.data.data;
            })
        },
    })
</script>
</html>