vue3从0-1部署API接口并且渲染页面

你坤哥厉不厉害
458 阅读7分钟

搭建vue3框架,使用TypeScript、axios完成本次实验目的

本文章只适合用于拿自己做的项目来练练手，大型企业项目请勿模仿！！！

1. 创建一个vue应用

npm create vue@latest

2. 创建好后，按照下面的图片依次进行选择（这里我们用的是TypeScript）

微信截图_20241127195630.png

3. 依次执行以下代码

1.cd vue-project

2.npm install

3.npm run dev

4. 运行后看到这个页面，就算搭建成功

屏幕截图 2024-11-27 200944.png

5. 把没用的页面给删掉（以下方图片为示例，清空我所标记的文件夹直到变为图片中的效果）

微信图片_20241128080642.png

切记，代码也要删掉

直到打开页面的效果是这样，就算成功

微信图片_20241128080642.png

6. 安装axios

npm i axios
  • 安装完成后，看到json里面的配置项有axios表示成功

微信图片_20241128080642.png

  1. 接下来开始部署配置我们的vite.config.ts和requset.ts
  1. 配置vite.config.ts

微信图片_20241128080642.png

注意！！这里的target写的是你的服务器地址

server.proxy 配置项用于设置开发服务器的代理规则。

  • /api: 这是一个路径前缀，表示所有以 /api 开头的请求都会被代理。
  • target: 'http://***.*****.cn' : 这是目标服务器的地址，所有匹配的请求会被转发到这个地址。
  • changeOrigin: true: 这个选项表示是否更改请求的源头。当设置为 true 时，会将请求的源头更改为目标服务器的地址，这通常用于解决跨域问题。
  1. 配置utils/requset.ts

微信图片_20241128080642.png

在 src/utils/request.ts 文件中，这段代码的主要作用是对 axios 进行二次封装 以便在项目中更方便地使用 HTTP 请求。

  1. 引入 axios

import axios from 'axios'： 这行代码导入了 axios 库，axios 是一个基于 Promise 的 HTTP 客户端，可以用于浏览器和 Node.js 中。

  1. 创建 axios 实例

  • 使用 axios.create 方法创建了一个新的 axios 实例，并设置了默认的配置选项：

baseURL: '/api': 所有请求的根路径，默认会在每个请求的 URL 前面加上这个路径。 timeout: 5000: 设置请求的超时时间为 5000 毫秒（5 秒）。

  1. 添加请求拦截器request.interceptors.request.use

  • 请求拦截器在请求发送之前执行，可以用来修改请求配置或添加一些通用的请求头等。

  • 如果请求配置没有问题，返回 config 继续执行请求。

  • 如果请求配置有问题，返回一个拒绝的 Promise，并传递错误信息。

  1. 添加响应拦截器request.interceptors.response.use

  • 响应拦截器在请求收到响应之后执行，可以用来处理响应数据或错误。

  • 如果响应状态码为 2xx，返回 response.data，即响应体中的数据。

  • 如果响应状态码不是 2xx，返回一个拒绝的 Promise，并传递错误信息。

  1. 导出封装的 axios 实例

export default request：将封装好的 axios 实例导出，以便在其他模块中使用。

以上就是部署配置vite.config.ts和requset.ts的方法，如有不懂，可以去官网查看

axios官网：Interceptors | Axios Docs axios中文网：拦截器 | Axios中文文档 | Axios中文网

  1. 查看接口文档

这里我随机拿一个接口出来演示

微信图片_20241128080642.png 输入完成后，接口文档会给你显示数据值，这时候，你就需要开始拿数据并且渲染数据了

微信图片_20241128080642.png

  1. 部署API接口

在src中新建文件夹，命名为api，在api中我们创建一个home文件用来存放你的第一个接口库 里面两个ts的作用我会在部署的过程中讲到

src/api/home

微信图片_20241128080642.png

  1. 我们先来配置type.ts

微信截图_20241128095515.png 意思很简单，左图是你的TypeScript类型限制，右边的图是你的接口文档数据，你要把数据转换成数据类型

  • 以下是代码参考注意！！这是我的接口文档数据类型，你要根据你们实际上的接口文档进行配置
/** 首页当中使用到的数据类型 */


// 定义响应式数据的数据类型
export interface ResponseData {
    code: number;
    massage: string;
    ok: boolean;
}

// 定义医院的数据类型
export interface Hospital {
    "id": string,
    "createTime": string,
    "updateTime": string,
    "isDeleted": number,
    "param": {
        "hostypeString": string,
        "fullAddress": string
    },
    "hoscode": string,
    "hosname": string,
    "hostype": string,
    "provinceCode": string,
    "cityCode": string,
    "districtCode": string,
    "address": string,
    "logoData": string,
    "intro": string,
    "route": string,
    "status": number,
    "bookingRule": {
        "cycle": number,
        "releaseTime": string,
        "stopTime": string,
        "quitDay": number,
        "quitTime": string,
        "rule": string[]
    }
}

// 接收医院数据的数组类型
export type Counter = Hospital[]

// 定义首页分页查询获取到的数据类型
export interface HospitalResponseData extends ResponseData {
    data: {
        counter: Counter,
        "pageable": {
            "sort": {
                "sorted": boolean,
                "unsorted": boolean,
                "empty": boolean
            },
            "pageNumber": number,
            "pageSize": number,
            "offset": number,
            "paged": boolean,
            "unpaged": boolean
        },
        "totalPages": number,
        "totalElements": number,
        "last": boolean,
        "first": boolean,
        "sort": {
            "sorted": boolean,
            "unsorted": boolean,
            "empty": boolean
        },
        "numberOfElements": number,
        "size": number,
        "number": number,
        "empty": boolean
    }
}




// 定义等级和地区的数据类型
export interface HospitalLevelAndRegion {
    "id": number,
    "createTime": string,
    "dictCode": string,
    "hasChildren": boolean,
    "isDeleted": number,
    "name": string,
    "param": {},
    "parentId": number,
    "updateTime": string,
    "value": string
}

// 定义医院等级和地区的数组类型
export type HospitalLevelAndRegionArr = HospitalLevelAndRegion[]

// 请求医院等级和地区的响应数据类型
export interface HospitalLevelAndRegionResponseData extends ResponseData{
    data: HospitalLevelAndRegionArr
}

// 定义根据关键字搜素医院信息的数据类型（医院的数据类型已经定义）
export interface HospitalInfo extends ResponseData {
    data:Counter
}

简单来说type.ts就是对脚本中的数据进行类型限制

  1. 配置完type.ts后，我们开始配置index.ts

微信截图_20241128094444.png

  • 首先，我们需要引入requset（这行代码导入了之前封装好的 axios 实例，该实例已经配置了请求的根路径、超时时间和拦截器。）
  • 定义 HospitalLevelAndRegionResponseData 类型，用于定义响应数据的结构。这个类型定义在 ./type 文件中。注意！！这里的变量名是你自己type里面的定义的变量名
  • 定义请求路径，使用 enum 枚举类型定义了请求路径。这里定义了一个路径 HOSPITAL_LEVELANDDREGION_URL，用于获取医院等级和地区的数据。注意！！这里的路径是你接口文档上的路径
  • 定义请求方法，这里定义了一个名为 reqHospitalLevelAndRegion 的函数，用于发送获取医院等级和地区数据的请求。该函数接受一个参数 dictCode，表示字典代码。使用 request.get 方法发送 GET 请求，请求的 URL 是 API.HOSPITAL_LEVELANDDREGION_URL 加上 dictCode。请求的返回值类型被指定为 HospitalLevelAndRegionResponseData，这样可以确保返回的数据符合预期的结构。

以上就是部署配置index.ts和type.ts的方法,这里部署好后，我们就可以开始拿接口开始渲染页面了

10. 获取api接口渲染页面

这里我们直接拿App.vue开始渲染，注意！！我的代码出现了爆红，是因为插件问题，但是不影响后续，只要代码可以运行，那就不是问题，你们要记住！！ 代码和人有一个能跑就行

微信图片_20241128080642.png

我们可以先看看是否可以拿得到接口的数据。

微信截图_20241128094444.png

以上图为准，我们可以看到，接口是可以正常访问的，并且可以展示到数据

  • 那么接下来，我们开始拿数据，渲染页面

image.png

1.引入依赖

  • 引入了 Vue 3 的 Composition API 相关的钩子 onMounted 和 ref。

  • 引入了从 @/api/home/index 文件中定义的 reqHospitalLevelAndRegion 请求方法。

  • 引入了从 @/api/home/type 文件中定义的数据类型。

  1. 组件挂载

  • 使用 onMounted 钩子，在组件挂载后调用 getLevel 方法，以获取医院等级数据。

  1. 定义响应式变量

  • 使用 ref 定义了一个响应式变量 levelArr，初始值为空数组。HospitalLevelAndRegionArr 类型定义了数组中每个元素的结构。

  1. 获取医院等级

  • 定义了一个异步函数 getLevel，用于发送请求获取医院等级数据。

  • 调用 reqHospitalLevelAndRegion 方法，传入参数 'HosType'，获取医院等级数据。

  • 如果请求成功（result.code == 200），将返回的数据赋值给 levelArr。

  1. 模板部分

  • 使用 v-for 指令遍历 levelArr 数组，生成多个 <li> 元素。
  • 每个 <li> 元素显示 item.name，并使用 item.value 作为唯一键值。
  • 好了，接下来我们看成品

image.png

成功获取到了api接口的数据，并且渲染到了页面上

本期教学就到这里结束了，初次编写文章，如有做的不好，或你有更好的做法，欢迎评论区留言。感谢观看！！！

avatar
文章
阅读
粉丝