个人博客项目前后端对接指南

"这篇文档是关于前后端对接的说明，以一个个人博客项目为例，该项目名为Aurora，由SpringBoot后端和Vue.js前端组成。项目源代码托管在GitHub上，提供了前端项目的启动和配置说明，以及如何查看和对接后台接口的信息。" 在前后端开发中，对接是一个关键步骤，确保前端应用能够正确地与后端服务通信，获取或提交数据。在这个个人博客项目"Aurora"中，前端部分（Aurora-vue）包括了两个子项目：aurora-admin（后台管理系统）和aurora-blog（博客系统），后者使用Vue 3.0进行开发。 要启动前端项目，首先需要从GitHub克隆项目代码到本地，然后使用Visual Studio Code（VSCode）打开aurora-blog文件夹。接下来，执行以下命令来安装依赖并启动项目： 1. `npm i`：这会安装项目所需的依赖包，确保所有必要的库和框架都已就绪。 2. `npm run serve`：此命令会启动开发服务器，让前端应用在本地运行。 启动项目后，由于尚未与后端对接，页面上可能看不到任何数据，因为请求的接口未能成功返回数据。为了使前端与后端进行通信，我们需要配置前端的代理设置。 在Vue项目中，通常使用`vue.config.js`文件来配置开发服务器的代理。在这个例子中，我们需要修改`devServer.proxy`，将所有以`/api`开头的请求转发到后端服务器的地址`http://121.43.54.126:8080`。配置如下： ```javascript devServer: { proxy: { '/api': { target: 'http://121.43.54.126:8080', // 后端服务器地址 changeOrigin: true, // 允许跨域 pathRewrite: { '^/api': '' // 将/api前缀重写为空，以便于前端请求路径与后端接口路径匹配 } } } }, ``` 完成以上配置后，前端的`/api`请求会被代理到指定的后端服务器，解决了因跨域问题导致的数据获取失败。此时，前端可以正常访问后台提供的接口，展示或提交数据。 后端接口的信息可以通过访问`admin.linhaojun.top`的账号（test@163.com）和密码（123456）来查看。在后台管理系统页面中，开发者可以找到项目中所有可用的接口信息，从而指导前端正确地发起HTTP请求。 本项目通过提供详细的前端启动和配置指南，帮助开发者理解和实现前后端的对接流程，确保博客系统能够顺利获取和展示由SpringBoot后端服务提供的数据。在实际开发过程中，这种对接方法可以避免因跨域限制带来的问题，提高开发效率。