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

news2025/1/13 15:54:31

目录

  • 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) // 向这个路由加载文件传入app

module.exports = app  //暴露出去app这个变量,方便其他文件调用

在这里插入图片描述

app/config.js中的内容

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

// config.js
const dotenv = require("dotenv")   //环境变量依赖 参考:https://juejin.cn/post/6844904198929121288?from=search-suggest

dotenv.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.coloradmin.cn/o/1127678.html

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

相关文章

黄金代理这么多,怎么选?

目前,现货黄金代理已成为了市场中成熟的模式,我们只要在搜索引擎上搜索如何在市场中开户,会搜到各种各样的黄金代理,其中更是不乏服务非常优秀的。部分投资者早就接受了黄金代理的存在,并且率先开始在黄金代理中进行开…

【单调栈】503. 下一个更大元素 II、42. 接雨水

提示:努力生活,开心、快乐的一天 文章目录 503. 下一个更大元素 II💡解题思路🤔遇到的问题💻代码实现🎯题目总结 42. 接雨水💡解题思路🤔遇到的问题💻代码实现&#x1f3…

反射Java

反射是获取摸个类的所有对象 构造器 :成员变量: 成员方法 获取方式 package Reflect;//获取class类的对象public class Test1Clacc {public static void main(String[] args)throws Exception {Class c1Student.class;System.out.println(c1.getName(…

神奇代码备份恢复工具逸事与操作指南

文章目录 一,序二,逸事三,为什么今天要提这个工具四,操作界面1. 文章发表者备份项目步骤2. 文章发表者恢复项目操作步骤3. 文章阅读者恢复项目步骤 五,附件1. 示例备份文件2. 神奇代码备份恢复工具源码备份 一&#xf…

淘宝商品详情API接口(标题|主图|SKU|价格|商品销量)

Taobao.item_get-获得淘宝商品详情接口,淘宝商品详情数据接口是淘宝开放平台提供的一种API接口,通过调用该接口,可以获取淘宝商品详情信息。该接口支持多种编程语言,包括Java、PHP、Python等。在使用淘宝商品详情API接口时&#x…

你知道有哪些好用的数据分析工具类软件?

前言 俗话说,工欲善其事,必先利其器。工匠想要使他的工作做好,一定要先让工具锋利。比喻要做好一件事,准备工具非常重要。对于数据分析人员来说是一样的,想要提高工作效率,也需要选择好自己的工具&#xf…

2023年中国监控光端机优点、市场规模及发展前景分析[图]

监控光端机是一种用于光纤通信网络的设备,用于连接光纤到用户设备(如计算机、路由器等)。监控光端机行业涉及制造、销售和维护这些设备,以确保高速、稳定的光纤通信连接,适用于家庭、企业和数据中心等不同应用场景。 …

vue项目中调用Google自带右下角弹框

vue项目中使用Google右下角弹框 一、效果二、代码 一、效果 二、代码 google浏览器要在设置通知权限开启 // Google消息提示googleNewsTip() {// 请求用户授权显示通知Notification.requestPermission().then(function (permission) {if (permission granted) {// 创建新的通知…

软件工程——期末复习知识点汇总

本帖的资料来源于某国内顶流高校的期末考试资料,仅包含核心的简答题,大家结合个人情况,按需复习~ 总的来说,大层面重点包括如下几个方面: 软件过程需求工程 设计工程软件测试软件项目管理软件过程管理 1.掌握软件生命…

成人高考多少分才能被录取?成人高考成绩多少分合格?柯桥学历学校告诉你

成人高考需要多少分才能被录取? 成人高考的录取分数线因时间和地区而不同。一般来说,每年的录取分数线会根据考生整体表现和考试难度进行调整。 以2022年的成人高考为例,录取分数线大约在100-150分之间,根据不同地区和专业&#x…

探索现代IT岗位:职业机遇的海洋

目录 1 引言2 传统软件开发3 数据分析与人工智能4 网络与系统管理5 信息安全6 新兴技术领域 1 引言 随着现代科技的迅猛发展,信息技术(IT)行业已经成为了全球经济的关键引擎,改变了我们的生活方式、商业模式和社会互动方式。IT行…

解决 /bin/bash^M: bad interpreter: No such file or directory

问题描述 linux 系统中知行*.sh 文件报/bin/bash^M: bad interpreter: No such file or directory 原因: .sh文件是在windows系统编写的,在linux执行就有问题 解决过程 转化下格式执行如下命令 # dos2unix app.sh 结果bash: dos2unix: command not …

爬虫爬取数据时怎么配置代理IP来精准导航分析大数据?

在这个数字盛宴中,每一刹那都充满了无数的信息流转。就像瀑布中的水滴,每一滴都承载着可能性。爬虫代理IP与穿云API就像是这场盛宴中的精准导航仪,帮助我们捕捉那些最有价值的信息滴点,确保在这个时代的快速迭代中,我们…

FoneDog iOS Unlocker(ios解锁工具) 适用macos电脑

FoneDog iOS Unlocker是一款专业的iOS设备解锁工具,旨在帮助用户解决iOS设备上的解锁问题。该软件支持解锁各种锁定类型,如数字密码锁、手势密码锁、Touch ID和Face ID等,可以解除iPhone、iPad和iPod Touch等设备的锁定状态。FoneDog iOS Unl…

文件批量重命名 Renamer 最新中文 for mac

Renamer是一款用于批量重命名文件和文件夹的实用工具软件。它提供了简单直观的界面和丰富的重命名选项,可以帮助用户快速、方便地对大量文件进行重命名操作。 以下是Renamer软件的主要特点和功能: 批量重命名:Renamer支持批量重命名文件和文…

H3C LC-5120-52SC-HI配置管理IP

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言一、MGMT是什么?二、配置步骤1.连接ConsoleWindowsLinux1.配置minicom2.使用minicom 2.配置管理端口3.配置Web管理4.http其它配置项 总结 前言 最近…

成绩查询系统:老师好帮手,学生的福音

老师们还在经常为了成绩发布而烦恼?希望有一个简单易用的工具,能让你一键发布成绩,省时省力?那么,查分小程序就是你的救星!高效便捷,操作简单,老师们都该尝试一下! 成绩查…

架构设计参考项目系列主题:一文讲透DataOps数据运营到底是什么

DataOps,即Data和Operations组合。是在数据分析过程中,提升数据质量,减少数据分析的周期时间,提高效率的一系列实践,现在逐渐发展成了一门方法论。DataOps适用于从数据准备到报告的整个数据生命周期。 DataOps是一门快…

10、Python -- 案例实操 : 随机大写字符存入列表

目录 随机大写字符存入列表 :步骤使用列表推导式 创建列表 生成随机数、大写字符 numpy模块生成随机数 随机大写字符存入列表 :步骤 创建列表 生成指定范围的随机数 随机数转字符 字符存入列表 使用列表推导式 方法一:range(10)控制循环10…

SAP HANA Time Zone设置

通常对于MINICHECK中检查出来的Timezone时区设置问题,可以通过以下方式进行修改 对于ABAP系统 修改HANA 参数即可 • indexserver.ini -> [global] -> timezone_default_data_client_name 000 • indexserver.ini -> [global] -> timezone_default_da…