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-projectnpm installnpm 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-appnpm installnpm 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 的二次封装.

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/626067.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

2.3 数据链路层03

2.3 数据链路层03 2.3.7 以太网交换机 1、以太网交换机的基本功能 以太网交换机是基于以太网传输数据的交换机,以太网交换机通常都有多个接口,每个接口都可以直接与一台主机或另一个以太网交换机相连,一般都工作在全双工方式。 以太网交换…

C程序技能:彩色输出

在终端上输出的字体总是单色,但在一些场景彩色输出更能满足需求,在Linux环境中,可以使用终端控制字符来设置输出字符的颜色,在部分版本的Windows系统中也可以使用。本文参考一些文献简要介绍一下在Windows下彩色输出的方法。 1. …

Rust-借用和生命周期

生命周期 一个变量的生命周期就是它从创建到销毁的整个过程。其实我们在前面已经注意到了这样的现象: 然而,如果一个变量永远只能有唯一一个入口可以访问的话,那就太难使用了。因此,所有权还可以借用。 借用 变量对其管理的内存…

贪心算法part03算法

贪心算法part03 ● 1005.K次取反后最大化的数组和 ● 134. 加油站 ● 135. 分发糖果 1.leetcode 1005.K次取反后最大化的数组和 https://leetcode.cn/problems/maximize-sum-of-array-after-k-negations/description/ class Solution {public int largestSumAfterKNegation…

从零开始:生产环境如何部署 Bytebase

Bytebase 是面向研发和 DBA 的数据库 DevOps 和 CI/CD 协同平台。目前 Bytebase 在全球类似开源项目中 GitHub Star 数排名第一且增长最快。 Bytebase 的架构 Bytebase 是一个单体架构 (monolith),前端是 Vue3 TypeScript,后端是 Go。前端利用 Go 1.6 …

winform-TreeView的添加节点展开所有节点

文章速览 1、添加节点核心代码示例 2、展开节点核心代码示例注意 坚持记录实属不易,希望友善多金的码友能够随手点一个赞。 共同创建氛围更加良好的开发者社区! 谢谢~ 1、添加节点 核心代码 TreeView.Nodes.Add()示例 foreach (var item in content){…

MySQL面试题 | 09.精选MySQL面试题

🤍 前端开发工程师(主业)、技术博主(副业)、已过CET6 🍨 阿珊和她的猫_CSDN个人主页 🕠 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 🍚 蓝桥云课签约作者、已在蓝桥云…

linux下485通信调试记录

1、使用linux下使用串口调试助手 linux下可以安装并使用下述串口调试工具进行串口测试: 1.1、cutecom cutecom是linux下常用的图形化串口调试软件,通过以下命令安装并打开: sudo apt-get install cutecom sudo cutecom显示如下&#xff1…

fetch、axios 和 XMLHttpRequest的区别

文章目录 fetch、axios和 XMLHttpRequest的区别XMLHttpRequest (XHR)XMLHttpRequest 和 fetch区别axios 和 fetch区别 fetch、axios和 XMLHttpRequest的区别 XMLHttpRequest (XHR) 官方文档:https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest XM…

【IPC通信--共享内存】

进程间通信目的 数据传输:一个进程需要将它的数据发送给另一个进程 资源共享:多个进程之间共享同样的资源。 通知事件:一个进程需要向另一个或一组进程发送消息,通知它(它们)发生了某种事件(如…

git 上传出现“ ! [rejected] master -> master (non-fast-forward)”

一、设置git仓库 1、先删除原来仓库 git remote rm origin 2、添加仓库 git remote add origin [url] 注意:若要修改仓库 git remote origin set-url [url] 二、 在使用Git 配置公司的远程仓库时git push origin master,出现以下问题 xu:QProj …

【CSS】解决height = line-height 文字不垂直居中(偏上、偏下)的问题

解决办法1: 查看 font-family 属性,确认是否是因为字体而导致的不垂直居中问题。 其他小知识: 基线就是小写x字母的下边缘(线) 就是我们常说的 基线。line-height 属性设置的行高也就是定义的两行文字基线之间的距离! 参考文章:…

8-docker输出can not create unix socket /var/run/docker.sock: is a directory

1.问题描述 docker输出报cant create unix socket /var/run/docker.sock: is a directory 2.解决方案 该问题发生的原因是docker.sock目录不能创建,手动删除docker.sock目录后,重启启动docker即可 命令: rm -rf /var/run/docker.sock s…

网络共享服务

存储类型:直连式(DAS):距离最近,存储设备且直接连接到服务器上 存储区域网络(SAN):适用于大型应用或数据库系统,可以使用文件的空间, 以及管理空间…

边缘计算在DCIM系统中的应用

一、引言 随着云计算、物联网和人工智能等技术的快速发展,边缘计算正在成为一种新的计算范式,将数据处理和分析的能力从中心化的数据中心转移到了设备边缘。DCIM(数据中心基础设施管理)系统作为数据中心运营管理的核心&#xff0c…

canvas绘制图片的三种方法(图文示例)

查看专栏目录 canvas示例教程100专栏,提供canvas的基础知识,高级动画,相关应用扩展等信息。canvas作为html的一部分,是图像图标地图可视化的一个重要的基础,学好了canvas,在其他的一些应用上将会起到非常重…

Apache StringUtils:Java字符串处理工具类

简介 在我们的代码中经常需要对字符串判空,截取字符串、转换大小写、分隔字符串、比较字符串、去掉多余空格、拼接字符串、使用正则表达式等等。如果只用 String 类提供的那些方法,我们需要手写大量的额外代码,不然容易出现各种异常。现在有…

任务13:使用MapReduce对天气数据进行ETL(获取各基站ID)

任务描述 知识点: 天气数据进行ETL 重 点: 掌握MapReduce程序的运行流程熟练编写MapReduce程序使用MapReduce进行ETL 内 容: 编写MapReduce程序编写Shell脚本,获取MapReduce程序的inputPath将生成的inputPath文件传入到Wi…

AWS边缘媒体安全交付方案

企业如何在AWS上的边缘站点,安全的将优质视频内容交付给用户,并且禁止哪些未经过授权的访问?九河云将基于AWS平台提供边缘媒体安全交付解决方案 解决方案详情 在通过 Amazon CloudFront 交付时,免受未经授权的访问。基于添加到交…

华为机试真题实战应用【赛题代码篇】-支持优先级的队列(附Java、C语言和python代码)

目录 题目描述 思路解析 思路1 排序实现 PriorityQueue实现 思路2