vs code创建工程,以koa框架为例

news2024/9/23 5:31:09

以下内容为本人的学习笔记,如需要转载,请声明原文链接 微信公众号「englyf」https://mp.weixin.qq.com/s/x2OXMTaLlxb_Os7NDHrKsg

这里以应用 koa 框架写一个 http 服务器为例,来说明怎么用 vs code 创建工程。

进入 vs code 后,打开文件夹,如下图
打开文件夹

如果还没有准备好新文件夹,可以在弹出的窗口里新建一个,这里新建工程文件夹「hello-koa」

新建工程文件夹 hello-koa

然后需要在文件夹里新建一个 js 代码文件 「app.js」

新建 js 源码文件

代码如下:

const Koa = require('koa');

const app = new Koa();

app.use(async (ctx, next) => {
    await next();
    ctx.response.type = 'text/html';
    ctx.response.body = '<h1>Hello, koa2!</h1>';
});

app.listen(5000);
console.log('app started at port 5000 ...');

上面的代码实现了一个最简单页面的 http 服务器功能,里用到了 koa2 框架的知识。有了源文件还不能运行这个工程,因为工程还没有配置文件。

接下来就是配置工程,好让工程能被运行。点击 vs code 的调试功能,并添加配置。

vs code 调试配置

然后代码窗口会弹出一个选择框,由于 koa 框架是基于 node.js,所以这里选择 node.js。记得保存自动生成并打开的配置文件 「launch.json」。

node.js

这里其实已经简单配置完成工程了,是不是就可以启动程序了?点击启动程序后,我们在调试控制台可以看到有很多的报错出现。

报错信息

是不是配置出错了?其实我们可以从报错信息里看到这么一行。

Error: Cannot find module 'koa'

这行信息其实已经告诉我们,工程无法找到 koa 模块。因此需要再给工程安装 koa 模块,需要用到 npm 的功能。这里推荐使用以下方法安装依赖的模块。

在工程文件夹下,新建文件「package.json 」,内容如下

{
    "name": "hello-koa2",
    "version": "1.0.0",
    "description": "Hello Koa2 example with VS Code",
    "main": "app.js",
    "scripts": {
        "start": "node app.js"
    },
    "keywords": [
        "koa",
        "async"
    ],
    "author": "englyf",
    "license": "Apache-2.0",
    "dependencies": {
        "koa": "2.0.0"
    }
}

可以看到其中有一段

"dependencies": {
        "koa": "2.0.0"
    }

这里的意思就是,依赖 koa 版本是2.0.0。

好了,npm 已经配置好,接着点击「终端」,然后输入以下命令试试。

npm install

如图

安装完,我们会在工程里发现多了一个子文件夹 「node_modules」和一个文件「package-lock.json 」。

点击打开文件夹「node_modules」可以看到里面都是一些依赖包,可知安装 koa 模块的过程中会将其依赖的其它包一并安装。

##这里要注意了,由于这个文件夹的内容都是依赖包可以通过上面的命令自动安装,并且体积比较大,所以在上传版本的时候,不需要包括这个文件夹。

但是,有的人可能会觉得,为了安装个依赖包就写那么一大堆内容在「package.json 」里面,未免有点麻烦了吧?其实 npm 还真有个命令可以省略掉创建文件「package.json 」,可以直接在终端里输入以下命令,即可自动开始安装 koa 2 的依赖包。

npm install koa@2.0.0

骚等片刻,等待完成依赖包的安装,就可以点击「启动程序」,正常启动 http 服务了。

当然,除了点击 vs code 提供的「启动程序」按钮,这个方式来运行程序之外,还可以在终端里输入以下命令来启动程序。使用 node 之前,必须要先在机器里安装 node。

node app.js

回到上面,我们看看「package.json 」文件里其实有这么一段数据,

"scripts": {
        "start": "node app.js"
    }

所以同样可以使用 npm 来快速启动程序,在终端里输入下面的命令即可。

npm start

可以看到他们效果是一样的。

最后,就可以打开浏览器,查看一下我们刚刚启动的 http 服务,在浏览器地址栏输入

http://localhost:5000

回车,可以看到页面返回,这就完成一个最简单的 http 服务了。


以上就是全部内容了。

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

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

相关文章

云服务器 nginx自启动、mysql自启动、pyhton后端自启动

nginx自启动 方法一&#xff1a; 1、建立启动文件 vim /usr/lib/systemd/system/nginx.service [Unit] Descriptionnginx - high performance web server Afternetwork.target remote-fs.target nss-lookup.target[Service] Typeforking ExecStart/usr/local/nginx/sbin/ng…

DMA实验3-外设到内存搬运

实验要求 使用 DMA 的方式将串口接收缓存寄存器的值搬运到内存中&#xff0c;同时闪烁 LED1 。 CubeMX 配置 DMA 配置&#xff1a; 串口中断配置 代码实现 如何判断串口接收是否完成&#xff1f;如何知道串口收到数据的长度&#xff1f; 使用串口空闲中断&#xff08;IDL…

2023优秀开源项目获选榜名单(开放原子开源基金会)|JeecgBoot 成功入选

JeecgBoot 是一个开源的企业级低代码开发平台&#xff0c;它成功入选2023年度生态开源项目&#xff0c;这是对其十年坚持开源的认可。作为一个开源项目&#xff0c;JeecgBoot 在过去的十年里一直秉承着开放、共享、协作的理念&#xff0c;不断推动着开源社区的发展。 2023年开放…

华为配置IPv4静态路由与静态BFD联动示例

组网需求 如图1所示&#xff0c;SwitchA通过SwitchB和NMS跨网段相连。在SwitchA上通过静态路由与NMS进行正常通信。在SwitchA和SwitchB之间实现毫秒级故障感知&#xff0c;提高收敛速度 配置思路 采用如下思路配置IPv4静态路由与静态BFD联动&#xff1a; 在SwitchA和SwitchB上…

LVS+keepalived小白都看得懂也不来看?

1 高可用集群 1.1 一个合格的集群应该具备的特性 1.负载均衡 LVS Nginx HAProxy F5 2.健康检查&#xff08;使得调度器检查节点状态是否可以正常运行&#xff0c;调度器&#xff08;负载均衡器&#xff09;也要做健康检查&#xff09;for调度器/节点服务器 keeplived hearb…

aws配置以及下载 spaceNet6 数据集

一&#xff1a;注册亚马逊账号 注册的时候&#xff0c;唯一需要注意的是信用卡绑定&#xff0c;这个可以去淘宝买&#xff0c;搜索aws匿名卡。 注册完记得点击登录&#xff0c;记录一下自己的账户ID哦&#xff01; 二&#xff1a;登录自己的aws账号 2.1 首先创建一个用户 首…

2023 英特尔On技术创新大会直播 |AI小模型更有性价比

前言&#xff1a; 今年是引爆AI的一年&#xff0c;从幼儿园的小朋友到80岁的老奶奶都认识AI&#xff0c;享受AI带来的便捷&#xff0c;都在向市场要智能&#xff0c;但AI的快速发展离不开底层硬件设施的革新。 英特尔是全球知名的半导体公司&#xff0c;专注于计算机处理器和芯…

FPGA模块——以太网芯片MDIO读写

FPGA模块——以太网MDIO读写 MDIO接口介绍MDIO接口代码&#xff08;1&#xff09;MDIO接口驱动代码&#xff08;2&#xff09;使用MDIO驱动的代码 MDIO接口介绍 MDIO是串行管理接口。MAC 和 PHY 芯片有一个配置接口&#xff0c;即 MDIO 接口&#xff0c;可以配置 PHY 芯片的工…

【实时绘画】krita + comfyUI 实时绘画 儿童海报

1&#xff1a;打开comfyUI 2: 打开krita 打开 cd custom_nodes 输入命令 安装控件 git clone https://github.com/Acly/comfyui-tooling-nodes.git

人工智能与底层架构:构建智能引擎的技术支柱

导言 人工智能与底层架构的交融塑造了智能系统的基石&#xff0c;是推动智能时代发展的关键动力&#xff0c;本文将深入研究人工智能在底层架构中的关键作用&#xff0c;以及它对智能引擎的技术支持&#xff0c;探讨人工智能在计算机底层架构中的作用&#xff0c;以及这一融合如…

第11章 《GUI》Page404 课堂作业,验证鼠标事件的坐标,GUI编程如何在控制台输出调试

首先选中工程&#xff0c;点击右键&#xff0c;选择Properties 在Build targets一栏里&#xff0c;将Type(下拉列表)改为Console application 然后在代码中写上调试输出语句&#xff0c;就可以了 从图中&#xff0c;我们可以看出&#xff0c;我们划线的起点非常接近窗口左上角(…

JWT身份验证

JWT知识点 jwt&#xff0c;全称 json web token, JSON Web 令牌是一种开放的行业标准 RFC 7519 方法&#xff0c;用于在两方之间安全地表示声明。 详情可以参考&#xff1a; hhttps://jwt.io/introduction 1. 数据结构 JSON Web Token由三部分组成&#xff0c;它们之间用圆点.进…

LLama Factory 安装部署实操记录(二)

1. 项目地址 GitHub - hiyouga/LLaMA-Factory: Easy-to-use LLM fine-tuning framework (LLaMA, BLOOM, Mistral, Baichuan, Qwen, ChatGLM)Easy-to-use LLM fine-tuning framework (LLaMA, BLOOM, Mistral, Baichuan, Qwen, ChatGLM) - GitHub - hiyouga/LLaMA-Factory: Easy…

javascript_0

Javascript是一种脚本语言&#xff0c;可以用来更改页面内容&#xff0c;控制多媒体&#xff0c;制作图像、动画等等 例 修改页面内容 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport…

LuaJava操作Java的方法

最近在学习lua&#xff0c;然后顺便看了下luaj&#xff0c;可能用的人比较少&#xff0c;网上关于luaj的文章较少&#xff0c;其中在网上找到这个博主的相关文章&#xff0c;很详细&#xff0c;对于要学习luaj的小伙伴可以两篇一起查看&#xff0c;本文在此基础上进行扩展。 …

DDPM详解

DDPM详解 参考 https://www.bilibili.com/video/BV1pa411u7G3/ 系列 DDPM 可以分为 Diffusion 和 Reverse 两个阶段。其中 Diffusion 阶段通过不断地对真实图片添加噪声&#xff0c;最终得到一张噪声图片。而 Reverse 阶段&#xff0c;模型需要学习预测出一张噪声图片中的噪声部…

LLM 和搜索引擎是一样的吗?

在这篇文章中&#xff0c;了解更多关于 AI 大型语言模型&#xff08;如 ChatGPT&#xff09;的潜力。了解他们如何彻底改变生产力&#xff0c;并探索他们与搜索引擎不断变化的关系。 像 ChatGPT 这样的 AI 大型语言模型 &#xff08;LLM&#xff09; 已经风靡全球&#xff0c;并…

【力扣】148.排序链表

148.排序链表 怎么说&#xff0c;这道题看上去挺简单的&#xff0c;但是要搞清楚的知识点那还真不少&#xff0c;刷题好痛苦&#xff0c;但是要刷&#xff01;嘿嘿~ 首先&#xff0c;要搞懂归并排序&#xff0c;然后是递归。这道题我刚开始想的是递归&#xff0c;但是题友说时…

macOS制作dmg包

macOS制作dmg包 准备&#xff1a;磁盘工具、以及要制作的软件&#xff0c;这里以Firefox为例 图片素材 背景图&#xff1a; 找到Firefox&#xff0c;点击显示简介&#xff0c;查看包的大小 打开磁盘工具 文件–>新建映像–>空白映像 填写信息&#xff0c;大小…

vue的语法模板与数据绑定的说明

vue的两大模板语法&#xff1a; 1.插值语法 2.指定语法 插值语法&#xff1a;{{}} 功能&#xff1a;用于解析标签体的内容 写法&#xff1a;{{xxx}},xxx是js表达式,且可以直接读取到data中的所有属性 指定语法&#xff1a; 功能:用于解析标签(包括:标签属性、标…