做废旧回收哪个网站好网络建设与维护

安装axios

创建项目，输入名称

新建文件夹：

在文件夹下输入cmd

运行

最后在复制到浏览器中

得到页面

使用axios

axios封装成模块

实现一个学生信息案例

模拟数据，请求数据

安装完成后新建一个mock文件夹，制作一个模拟数据

配置模拟数据的信息

App.vue删空

导入

<template>

  <div class="box">

    <button @click="getData">请求数据</button>

    <table>

      <caption>

        <h2>学生信息列表</h2>

      </caption>

      <thead>

        <tr>

          <th>学号</th>

          <th>姓名</th>

          <th>年龄</th>

          <th>性别</th>

          <th>班级</th>

        </tr>

      </thead>

      <tbody>

        <tr v-for="item in studentData.list" :key="item.student_id">

          <td>{{ item.student_id }}</td>

          <td>{{ item.name }}</td>

          <td>{{ item.age }}</td>

          <td>{{ item.gender }}</td>

          <td>{{ item.class }}</td>

        </tr>

      </tbody>

    </table>

  </div>

</template>

<script setup>

import { reactive } from 'vue'

import request from './axios/request.js'

import './mock/mockServer.js'

const studentData = reactive({

  list:[]

})

const getData = function(){

  request({

    url:'/mock/getStudents',

    method:'get'

  }).then(res=>{

    studentData.list = res.data.data

  }).catch(error=>{

    console.log(error);

  })

}

</script>

 

<style>

body,html {

  width: 100%;

  height: 100%;

}

#app {

  width: 100% !important;

}

table {

  border-collapse: collapse;

  margin: 0 auto;

  text-align: center;

}

table td, table th {

  border: 1px solid #cad9ea;

  color: #666;

  height: 30px;

}

table thead th {

  background-color: #cce8eb;

  width: 100px;

}

table tr:nth-child(odd) {

  background: #fff;

}

table tr:nth-child(even) {

  background: #f5fafa;

}

</style>

在main.css和App.vue分别导入