[本科项目实训] 基于 FastAPI 和 Vue3 前后端开发框架速览

to 2024 / 06 / 16

概述

由于项目实训需要将结果以前端的形式的展现出来，我们参考 [0] 的搭建网页端。

由于个人培养方案中对于前后端的知识了解的少之又少，参考了 [1~11] 的博客进行了概念性的理解，组内有专门开发前后端的同学，我主要针对大语言模型及行动库的接口和后端同学进行了交流。

代码结构

config和外部的各类杂项主要为前端的配置文件，public为前端展示的一些材料；service为后端的相关文件，src为前端的相关文件。以下来看service和src的代码结构：

service中包含了核心的前后端交互即main.py文件，也包含了许多功能组件，比如语音识别、知识库以及行动库。

src展示了一个比较经典的 Vue3+typescript 的文件结构，其中api中包含了使用 FastAPI 进行前后端交互的核心代码，由于这里只是个人简单了解前后端框架，不再展开。

参考资料

[0] GitHub - NCZkevin/chatglm-web: 用 FastAPI 和 Vue3 搭建的 ChatGLM 网页

[1] 浅谈vue中index.html、main.js、App.vue、index.js之前的关系以及加载过程vue的index.html-CSDN博客

[2] 【Typescript】vue项目中使用ts（typescript）入门教程_vue项目使用ts-CSDN博客

[3] 使用vite从头搭建一个vue3项目（三）vite.config.js配置-CSDN博客

[4] 包管理工具 —— 更推荐的 pnpm_pnpm-lock.yaml-CSDN博客

[5] pnpm-lock.yaml、yarn.lock以及package-lock.json的区别-CSDN博客

[6] 阮一峰 TypeScript 教程

[7] Vue 配置postcss.config.js CSS处理和移动端适配方案！-CSDN博客

[8] 配置 - Tailwind CSS 中文网 (nodejs.cn)

[9] FastAPI 库（Python 的 Web 框架）基本使用指南（一）_python fastapi-CSDN博客

[10] 配置文件 - ESLint 中文文档 (nodejs.cn)

[11] Vue 3 和 TypeScript：更强大的组合 - 掘金 (juejin.cn)