10、vue_待续

五、连接前后台

1、使用VisualStudio创建ASP. NET Core Web API，配置好跨域，后台数据采用系统自动生成的WeatherForecast，

注意修改utils/request.js文件中的baseURL

后台配置略

2、在src下新建api文件夹

3、src/api下创建home.js

// 导入get请求方法和post请求方法
import { $get } from '../utils/request.js'

// 查询天气信息
export const $list = async () => {
  const { data } = await $get('WeatherForecast')
  return data
}

4、修改./scr/views/home.vue文件

<!-- home.vue -->
<template>
  <div>
    <el-table :data="tableData" stripe style=" 100%">
      <el-table-column prop="date" label="Date" width="180" />
      <el-table-column prop="temperatureC" label="temperatureC" width="180" />
      <el-table-column prop="temperatureF" label="temperatureF" width="180" />
      <el-table-column prop="summary" label="summary" width="180" />
    </el-table>
  </div>
</template>

<script setup>
import { reactive, toRefs } from 'vue'
import { $list } from '../api/home.js'

// 定义组件数据
const data = reactive({
  // 表格数据
  tableData: []
})
const { tableData } = toRefs(data)

// 发送请求，获取所有信息
const loadTable = async () => {
  // 将后台信息绑定到控件
  data.tableData = await $list()
}
// 加载表格数据
loadTable()
</script>
<style lang="scss" scoped></style>

5、运行，显示