目录

一、ElementUI

        1.简介 : 

        2.安装 : 

        3.配置 : 

        4.使用 : 

二、Axios

        1.简介 : 

        2.安装 : 

        3.实例 : 

            3.1 数据准备 

            3.2 应用实例 

            3.3 内容补充


一、ElementUI

        1.简介 : 

        2.安装 : 

        3.配置 : 

        4.使用 : 

                安装配置完成后,可以在官网直接复制组件的代码,粘贴到需要使用的地方即可。
                eg : 
                复制“百分比进度条”的代码段,并用div对其进行样式控制,将代码复制到HelloWorld.vue组件
                "百分比进度条"的代码段如下 : 

    <div style="width: 500px; margin: 0 auto">
    <el-progress :text-inside="true" :stroke-width="26" :percentage="70"></el-progress>
    <el-progress :text-inside="true" :stroke-width="24" :percentage="100" status="success"></el-progress>
    <el-progress :text-inside="true" :stroke-width="22" :percentage="80" status="warning"></el-progress>
    <el-progress :text-inside="true" :stroke-width="20" :percentage="50" status="exception"></el-progress>
    </div>

                将其复制到HelloWorld.vue组件中的div最后,如下图所示 : 

Vue ElementUI操作 和 Axios使用-LMLPHP

                运行效果 : 

Vue ElementUI操作 和 Axios使用-LMLPHP


二、Axios

        1.简介 : 

        2.安装 : 

        3.实例 : 

            3.1 数据准备 

                用.json文件来模拟要访问的数据,students.json代码如下 : 

{
  "success": true,
  "message": "SUCCESS",
  "data": {
    "items": [
      {
        "name": "Cyan",
        "gender": "M",
        "score": 450
      },
      {
        "name": "Rain",
        "gender": "F",
        "score": 435
      },
      {
        "name": "Eisen",
        "gender": "M",
        "score": 442
      }
    ]
  }
}

            3.2 应用实例 

                利用Axios发出Ajax请求,获取到students.json中保存的数据,并渲染到页面上。
                axios_application.html代码如下 : 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demonstrate Axios</title>
    <script type="text/javascript" src="../vue.js"></script>
    <script type="text/javascript" src="https://unpkg.com/axios@1.6.2/dist/axios.min.js"></script>
    <style type="text/css">
        table, tr, td {
            border: 2px hotpink solid;
            border-collapse: collapse;
        }

        table {
            width: 450px;
            background-color: lightcyan;
        }
    </style>
</head>
<body>
<div id="app">
    <div id="h2-div">
        <h2>{{info}}</h2>
    </div>
    <table>
        <tr>
            <td>number</td>
            <td>name</td>
            <td>gender</td>
            <td>score</td>
        </tr>
        <!--
            使用“列表渲染”遍历数组;
            使用v-for遍历数组时,支持第二个参数index
        -->
        <tr v-for="(stu,index) in students">
            <td>{{index}}</td>
            <td>{{stu.name}}</td>
            <td>{{stu.gender}}</td>
            <td>{{stu.score}}</td>
        </tr>
    </table>
</div>
<script type="text/javascript">
    let vm = new Vue({
        el: "#app",
        data: {
            info: "-----------students:-----------",
            students: []
        },
        methods: {
            //利用Axios,发出Ajax请求
            list() {
                /*
                    (1) 通过axios.get()方法发出Ajax请求;
                    (2) "http://localhost:63342/Axios_Demo/data/students.json"表示URL
                    (3) axios发出Ajax请求的基本语法————
                        axios.get(url).then(箭头函数).then(箭头函数)...catch(箭头函数)
                        其中,“箭头函数”为请求成功后执行的回调函数,get请求成功会进入一个then();
                        可以在第一个then()中继续发出axios的Ajax请求,若发生异常则进入catch().
                    (4) list方法在生命周期函数created()中被调用(发出Ajax请求)
                 */
                axios.get("http://localhost:63342/Axios_Demo/data/students.json")
                    //ES6新特性———箭头函数(简写形式)
                    .then(response => {
                        console.log("response =", response);
                        console.log("response.data =", response.data);
                        console.log("response.data.data =", response.data.data);
                        console.log("response.data.data.items =", response.data.data.items);
                        //通过Data Bindings将Model中的数据渲染到View
                        //先将得到的items数据赋值给data数据池中的students属性
                        this.students = response.data.data.items;
                    }).catch(err => {
                    console.log("exception! err :",err);
                })
            }
        },
        created() {
            this.list();
        }
    })
</script>
</body>
</html>

                页面渲染效果如下图所示 : 

Vue ElementUI操作 和 Axios使用-LMLPHP

                控制台打印信息如下 : 

Vue ElementUI操作 和 Axios使用-LMLPHP

            3.3 内容补充

                控制台直接打印出的json数据经过层层封装,不够直观,可以通过JSON.stringify()方法将json对象转换为字符串,如下图所示 : 

Vue ElementUI操作 和 Axios使用-LMLPHP

                在https://www.json.cn/网站中复制打印出的JSON字符串,可以直观地看到JSON对象的格式,如下图所示 : 

Vue ElementUI操作 和 Axios使用-LMLPHP

        System.out.println("END------------------------------------------------------");

11-21 01:38