Vue+Koa2 搭建前后端分离项目

Vue+Koa2 搭建前后端分离项目

简单的一个 Demo 演示: Vue 和 Koa2 在本地搭建前后端分离项目.

重点: 跨域

当前环境:
1, Vite 搭建的 Vue 前端项目 ( 也就是 Vue 3 了 ) .
2, Koa2 搭建的 后端项目.

前端项目在 localhost: 5173 端口下运行, 后端项目在 localhost: 3000 端口下运行, 因此, 前端通过 Ajax 请求 后端的接口就会存在跨域问题. 本文的终点也在聊如何实现跨域.

一, Vue 前端项目

这个没啥说的, 直接使用 vite 工具来创建 Vue 项目就可以了, 大家可以直接去官网查看指令, 复制下面的指令也行.
直接上终端指令:

# 以下指令二选一
# 1, 以下指令复制自官网
npm create vite@latest my-vue-app -- --template vue

# 2, 依次输入以下两条指令
npm install -g create-vite
# my-project 是你自己工程的名字
create-vite my-project --template vue
# 我当时用的是 方式2, 这个无所谓, 根据个人喜好吧!

使用指令创建好项目之后, 再依次执行以下指令来配置和运行项目

cd my-project

npm install

npm run dev

接下来前端项目就会在 5173 端口下运行了!

二, Koa2 后端项目

先执行以下指令, 配置 koa 脚手架

npm install -g koa-generator

接下来使用 koa脚手架来搭建 koa 项目

# 注意是 koa2, 如果你没有写 2, 那创建的项目中 koa版本就是 1.X 了.
# -e 是使用 ejs 模板的意思, 这里前端是用 Vue 来搭建的, 这个 ejs 模板就没啥子用了. 不用管它.
# my-app 是项目名称, 这个根据需求, 自行修改
koa2 -e my-app

koa2 项目创建好之后, 根据终端提示, 依次执行以下指令完成项目配置和运行:

cd my-app

npm install

npm start

接下来, 就可以通过 localhost:3000, 来运行 koa2 创建的项目了, 不过我们这个仅使用 koa 来完成后端的功能, 没必要在浏览器中通过 localhost:3000 来运行项目.

三, 跨域

接下来处理重点问题: 跨域.

node 中提供了众多支持跨域的模块, 我这里列举一个我本人运行成功的案例.

koa2 项目中执行以下指令来安装支持跨域的模块:

npm i koa2-cors -D

安装完毕之后, 再在 koa2 项目的根文件 app.js 中添加以下代码, 然后重启后端项目即可:

// 跨域相关配置
const cors = require('koa2-cors') //引入koa2-cors

// 千万注意, app.use(cors()) 执行顺序要尽可能的靠前, 至少要在 路由的 use 之前.
app.use(cors()); //后端允许跨域访问

有了以上跨域配置之后, 前端就可以通过 Ajax 来请求后端的跨域接口了.

项目编码完毕, 部署到服务器之后, 其实是不存在跨域问题的, 因此, 这里对跨域的处理, 并没有多么的吹毛求疵, 直接在后端配置了跨域资源共享策略, 待后期项目部署前, 删除 koa2-cors 这个跨域资源共享配置之后, 再部署后端项目就行了.

其实在加载 koa2-cors 模块的时候, 已经使用 -D 仅执行了开发环境下模块的加载.

下一节聊聊 Vue 项目中 axios 的二次封装.