前端koa搭建服务器(保姆级教程)——part1

目录

  • koa简介
  • 前端项目搭建koa环境
    • 第一步:新建项目
    • 第二步:环境初始化,安装依赖
      • 初始化项目,生成package.json文件
      • 安装koa依赖
      • 安装koa-router 路由管理依赖
      • 安装dotenv 环境变量依赖
      • 安装nodemon 热启动依赖
    • 第三步:代码调用,启动服务
      • main.js文件中的内容
      • app/index.js中的内容
      • app/config.js中的内容
      • .env中的内容
      • router文件夹中的user.router.js文件
      • controller文件夹中的user.controller.js文件
      • router文件夹中的index.js文件
      • 到这里,代码就写好了,准备开始运行
    • 第四步:启动前端koa服务器
  • 最终效果

koa简介

Koa 是一个新的 web 框架,由 Express 幕后的原班人马打造, 致力于成为 web 应用和 API 开发领域中的一个更小、更富有表现力、更健壮的基石。 通过利用 async 函数,Koa 帮你丢弃回调函数,并有力地增强错误处理。 Koa 并没有捆绑任何中间件, 而是提供了一套优雅的方法,帮助您快速而愉快地编写服务端应用程序

简而言之,koa可以让前端自己搭建一个服务器模拟后端接口,返回数据进行调试。
KOA官网

前端项目搭建koa环境

使用软件工具:vscode
安装依赖:koa、dotenv、nodemon、koa-router(npm这些基础的就不说了哈)

第一步:新建项目

新建个文件夹拖拽到vscode里打开
在这里插入图片描述
手动创建好这些文件夹和文件,等会要往里面写东西


第二步:环境初始化,安装依赖

vscode里按下快捷键:CTRL+j唤出控制台
在这里插入图片描述
依次输入:

初始化项目,生成package.json文件

npm init -y
生成package.json文件
在这里插入图片描述

安装koa依赖

npm i koa --save或者npm i koa -S
可将信息加入到package.json文件中的dependencies中(—save也就是生产阶段的依赖,也就是项目运行时的依赖,就是程序上线后仍然需要依赖)

安装koa-router 路由管理依赖

npm install koa-router --save
Koa-router 是 koa 的一个路由中间件,它可以将请求的URL和方法(如:GET 、 POST 、 PUT 、 DELETE 等) 匹配到对应的响应程序或页面。

安装dotenv 环境变量依赖

npm install dotenv --save
Dotenv 是一个零依赖的模块,它能将环境变量中的变量从 .env 文件加载到 process.env 中,将环境相关的配置独立于代码之外。

安装nodemon 热启动依赖

npm install nodemon --save-dev或者npm i nodemon -D
可将信息加入到package.json文件中的devDependencies中(-D也就是开发阶段的依赖,就是我们在开发过程中需要的依赖,只在开发阶段起作用)

第三步:代码调用,启动服务

main.js文件中的内容

// main.js
const app = require('./app/index.js')
const config = require('./app/config.js')app.listen(config.APP_PORT, () => {console.log(`服务器在${config.APP_PORT}端口启动成功了~`)
})

在这里插入图片描述

app/index.js中的内容

// 入口文件
// app/index.js
const Koa = require("koa")const app = new Koa()const useRoutes = require('../router') // 引入router下的index.js文件(不写出来其实等价于../router/index.js)useRoutes(app) // 向这个路由加载文件传入appmodule.exports = app  //暴露出去app这个变量,方便其他文件调用

在这里插入图片描述

app/config.js中的内容

处理环境变量,把变量写入到环境中

// config.js
const dotenv = require("dotenv")   //环境变量依赖 参考:https://juejin.cn/post/6844904198929121288?from=search-suggestdotenv.config()module.exports = {APP_PORT
} = process.env

在这里插入图片描述

.env中的内容

APP_PORT=8000 

在这里插入图片描述

router文件夹中的user.router.js文件

const Router = require("koa-router") // 引入依赖const userRouter = new Router({ prefix: "/user" }) // 设置接口前缀const { create } = require('../controller/user.controller') // 引入中间件userRouter.get('/', create) // 设置接口路径,以及中间件module.exports = userRouter // 导出

在这里插入图片描述

controller文件夹中的user.controller.js文件

这个中间件是与router文件夹中的user.router.js文件

class UserController { // 创建类async create (ctx, next) { // 中间件console.log("请求成功")ctx.body = "请求成功,用户test" // 请求响应}
}module.exports = new UserController()

在这里插入图片描述

router文件夹中的index.js文件

这个文件里的代码专门用来加载路由,将会用文件遍历的方法来加载每一个路由,这样就不用每增加一个接口都要再自己手动去加载路由了。接下来只要在入口文件app/index.js中引入这个文件加载路由即可

const fs = require('fs')const useRoutes = (app) => {fs.readdirSync(__dirname).forEach(file => {if (file === 'index.js') return // index.js文件不需要const router = require(`./${file}`)app.use(router.routes())app.use(router.allowedMethods())})
}module.exports = useRoutes

在这里插入图片描述


到这里,代码就写好了,准备开始运行

开始运行前,我们要去package.json中设置一下启动项目的语句(毕竟我们用的nodemon热启动)
在package.json文件中的scripts对象中插入:
"start": "nodemon ./src/main.js"
在这里插入图片描述
这句的意思就是,我们在控制台使用npm start 等价于:npm nodemon ./src/main.js 运行这个入口文件,开始项目执行


第四步:启动前端koa服务器

我们在控制台输入:npm start
这样就能启动项目了
在这里插入图片描述

最终效果

在这里插入图片描述
或者用postman请求也是得到这个返回这
localhost就是你本机电脑的ip,cmd里用ipconfig查看自己ip
在这里插入图片描述
在这里插入图片描述
如果你的手机跟当前电脑链接的wifi是同一个,你直接用手机游览器,访问这个接口,一样能正常访问到
在这里插入图片描述

参考博客:https://juejin.cn/post/7091309467869921288

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

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

相关文章

2016年亚太杯APMCM数学建模大赛C题影视评价与定制求解全过程文档及程序

2016年亚太杯APMCM数学建模大赛 C题 影视评价与定制 原题再现 中华人民共和国成立以来,特别是政治改革和经济开放后,随着国家经济的增长、科技的发展和人民生活水平的提高,中国广播电视媒体取得了显著的成就,并得到了迅速的发展…

JVM虚拟机:对象在内存中的存储布局

本文重点 在前面的过程中,我们学习了对象创建过程,那么一个对象在内存中的布局是什么样的呢? 对象在内存中的存储布局 普通对象 当我们创建一个对象的时候,它由三部分组成,分别为对象头(MarkWord+class指针(指向class对象)),实例数据(对象的成员变量),填充。如果…

特殊类设计[下] --- 单例模式

文章目录 5.只能创建一个对象的类5.1设计模式[2.5 万字详解:23 种设计模式](https://zhuanlan.zhihu.com/p/433152245)5.2单例模式1.饿汉模式1.懒汉模式 6.饿汉模式7.懒汉模式7.1饿汉模式优缺点:7.2懒汉模式1.线程安全问题2.单例对象的析构问题 8.整体代码9.C11后可…

react-组件间的通讯

一、父传子 父组件在使用子组件时&#xff0c;提供要传递的数据子组件通过props接收数据 class Parent extends React.Component {render() {return (<div><div>我是父组件</div><Child name"张" age{16} /></div>)} }const Child …

【洛谷 P3654】First Step (ファーストステップ) 题解(模拟+循环枚举)

First Step (ファーストステップ) 题目背景 知らないことばかりなにもかもが&#xff08;どうしたらいいの&#xff1f;&#xff09; 一切的一切 尽是充满了未知数&#xff08;该如何是好&#xff09; それでも期待で足が軽いよ&#xff08;ジャンプだ&#xff01;&#xff09…

华为---DHCP中继代理简介及示例配置

DHCP中继代理简介 IP动态获取过程中&#xff0c;客户端&#xff08;DHCP Client&#xff09;总是以广播&#xff08;广播帧及广播IP报文&#xff09;方式来发送DHCPDISCOVER和DHCPREQUEST消息的。如果服务器&#xff08;DHCP Server&#xff09;和 客户端不在同一个二层网络(二…

人工智能:CNN(卷积神经网络)、RNN(循环神经网络)、DNN(深度神经网络)的知识梳理

卷积神经网络&#xff08;CNN&#xff09; 卷积神经网络&#xff08;CNN&#xff09;&#xff0c;也被称为ConvNets或Convolutional Neural Networks&#xff0c;是一种深度学习神经网络架构&#xff0c;主要用于处理和分析具有网格状结构的数据&#xff0c;特别是图像和视频数…

VSCode 开发 Vue 语法提示

一. 打开应用商店&#xff0c;搜索 vetur &#xff0c;选择第一个&#xff0c;点击安装。 二. 安装完成后&#xff0c;还可以下载 Vue Language Features 解决代码警告的问题。 最后重启 VSCode 就可以使用啦。另外输入 按回车键还可以自动生成 vue 代码格式哦。 原创作者&…

原生mysql与mybatis执行update语句的差异

在做一个解除绑定的接口中&#xff0c;发现了这个一个问题&#xff1a; 连续对接口进行测试&#xff0c;发现一直fan返回解除成功&#xff0c;但是逻辑上应该是解除之后&#xff0c;在解除它后就应该回显已解除绑定才对 就一直找原因&#xff0c;sql中使用的是mybatis的…

【Qt之QtConcurrent】描述及使用

描述 QtConcurrent是一个Qt库中的模块&#xff0c;用于实现多线程并发编程。它提供了一些高级API&#xff0c;使得在多核处理器上并行执行代码变得更加容易。 示例&#xff1a; 使用的话&#xff0c; 需要在pro文件中添加&#xff1a;QT concurrent模块。 #include <QC…

基于机器视觉的车道线检测 计算机竞赛

文章目录 1 前言2 先上成果3 车道线4 问题抽象(建立模型)5 帧掩码(Frame Mask)6 车道检测的图像预处理7 图像阈值化8 霍夫线变换9 实现车道检测9.1 帧掩码创建9.2 图像预处理9.2.1 图像阈值化9.2.2 霍夫线变换 最后 1 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分…

Virtual DOM

目录 Virtual DOM 前言 用法 代码 理解 Virtual DOM的工作原理&#xff1a; 为什么使用Virtual DOM? 哪些库/框架使用Virtual DOM? 总结 Virtual DOM&#xff08;虚拟DOM&#xff09;是一种编程概念&#xff0c;它是对真实DOM的轻量级抽象表示。在前端开发中&#x…

RHCE8 资料整理(四)

RHCE8 资料整理 第四篇 存储管理第13章 硬盘管理13.1 对磁盘进行分区13.2 交换分区&#xff08;swap分区&#xff09; 第14章 文件系统14.1 了解文件系统14.2 了解硬链接14.3 创建文件系统14.4 挂载文件系统14.5 设置永久挂载14.6 查找文件14.7 find的用法 第15章 逻辑卷管理15…

Go基础——数组、切片、集合

目录 1、数组2、切片3、集合4、范围&#xff08;range&#xff09; 1、数组 数组是具有相同唯一类型的一组已编号且长度固定的数据项序列&#xff0c;这种类型可以是任意的原始类型例如整型、字符串或者自定义类型。 Go 语言数组声明需要指定元素类型及元素个数&#xff0c;与…

基于图像识别的跌倒检测算法 计算机竞赛

前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 基于图像识别的跌倒检测算法 该项目较为新颖&#xff0c;适合作为竞赛课题方向&#xff0c;学长非常推荐&#xff01; &#x1f9ff; 更多资料, 项目分享&#xff1a; https://gitee.com/dancheng-senior/…

GO语言代码示例

首先&#xff0c;我们需要安装 rod 库&#xff0c;这是一个用于构建网络爬虫的 Go 语言库。 使用 go get 命令安装 rod 库&#xff1a;go get -u github.com/gofiber/rod 创建一个新的 Go 程序文件&#xff0c;例如&#xff1a;main.go 在 main.go 文件中&#xff0c;导入 r…

c++系列之vector类模拟实现

&#x1f497; &#x1f497; 博客:小怡同学 &#x1f497; &#x1f497; 个人简介:编程小萌新 &#x1f497; &#x1f497; 如果博客对大家有用的话&#xff0c;请点赞关注再收藏 &#x1f31e; 构造函数 vector() //_begin表示有效成员的开始 //_finish表示有效成员的大小…

配置Sentinel 控制台

1.遇到的问题 服务网关 | RuoYi 最近调试若依的微服务版本需要用到Sentinel这个组件&#xff0c;若依内部继承了这个组件连上即用。 Sentinel是阿里巴巴开源的限流器熔断器&#xff0c;并且带有可视化操作界面。 在日常开发中&#xff0c;限流功能时常被使用&#xff0c;用…

力扣:142. 环形链表 II(Python3)

题目&#xff1a; 给定一个链表的头节点 head &#xff0c;返回链表开始入环的第一个节点。 如果链表无环&#xff0c;则返回 null。 如果链表中有某个节点&#xff0c;可以通过连续跟踪 next 指针再次到达&#xff0c;则链表中存在环。 为了表示给定链表中的环&#xff0c;评…

第13期 | GPTSecurity周报

GPTSecurity是一个涵盖了前沿学术研究和实践经验分享的社区&#xff0c;集成了生成预训练 Transformer&#xff08;GPT&#xff09;、人工智能生成内容&#xff08;AIGC&#xff09;以及大型语言模型&#xff08;LLM&#xff09;等安全领域应用的知识。在这里&#xff0c;您可以…