koa(express升级版框架)的基本使用

2023-11-07

1.引言

    今天拿着代码给实习老师看bug,本来觉得这些实习老师啥也不教,结果有被surprise到。以前是学自己不喜欢的python,总觉得老师在教我们看文档,主要应该是自己不喜欢学python。这次实习javascript,本来以为自己学了很多,混一下得了,在机房看高数复习考研,结果高数看不下去,代码也没学爽,看了看老师的矿(好歹得从老师那里扣点东西出来),觉得在华为云部署上还是学了点东西。而是决定好好实习,没带书,问了个bug,实习老师直接疯狂输出,介绍了node.js相关的很多知识,牛逼!得记下来!

2.各种源的由来

    最开始所有的源都是放在npm上面的,开始是提供给java用的,后来facebook觉得npm太慢了,于是自己写了一套更快的yarn,其次由于国外访问比较慢,淘宝也利用阿里云服务器创建了一个源仓库,每隔固定时间从npm上同步各种依赖包,这也就解释了为什么在发布自己写的npm包的时候不能使用taobao源,需要切回原来的npm源。
(1)npm切换淘宝源

npm config set registry https://registry.npm.taobao.org --global

(2)npm切换淘宝源

npm install -g cnpm --registry=https://registry.npm.taobao.org

(3)yarn切换淘宝源

npm i yarn -g
yarn config set registry https://registry.npm.taobao.org

3.koa使用教程

3.1koa基本使用以及洋葱模型

    前面自己摸了摸express,但是那老师好像更看好koa,于是决定放弃黑马教程转到实习老师的教程。
    基本使用,相关安装依赖:koaart-templatekoa-art-templatekoa-routernodemon(开发环境)。程序代码如下:

const path = require("path"); //引入path模块
const koa = require("koa"); //引入koa模块
const render = require("koa-art-template"); //引入koa-art-template
const router = require("koa-router")(); //引入路由模块
const app = new koa(); //创建实例
render(app, {//配置art-template
    root: path.resolve(__dirname, "./src/views/"),
    extname: ".html", //后缀也可以写成.art
    debug: process.env.NODE_ENV !== "production",
});
//洋葱模型
app.use(async(ctx, next) => {
    console.log("第一个路由函数");
    const data = await next();//提前使用下方的路由模块
    console.log(data);
    console.log(4);
});
app.use(async(ctx, next) => {
    console.log("第二个路由函数");
    return "router2";
});
app.listen(8080);
3.2koa路由的使用

(1)get请求

const path = require("path"); //引入path模块
const koa = require("koa"); //引入koa模块
const render = require("koa-art-template"); //引入koa-art-template
const router = require("koa-router")(); //引入路由模块
const app = new koa(); //创建实例
render(app, {
    root: path.resolve(__dirname, "./src/views/"),
    extname: ".html", //后缀也可以写成.art
    debug: process.env.NODE_ENV !== "production",
});
//路由中间件
app.use(async(ctx, next) => {
    console.log("这里是路由中间件");
    if (ctx.path == "/login") {
        ctx.body = "请登陆之后重试";
    } else {
        next();
    }
});
router.get("/", async(ctx) => {
    await ctx.render("index");
});
router.get("/login", async(ctx) => {
    await ctx.render("login");
});
app.use(router.routes());
app.listen(8080);

    路由中间件:到达指定路由前必须经过的中间路由(常用于登录拦截)。
(2)post请求

router.post("/login", async(ctx) => {
    ctx.body = {
        msg: "用户登录",
        code: 0,
    };
});

    和express框架一样,处理post请求需参数要使用第三方依赖:koa-body。使用方式如下:

const koaBody = require("koa-body");//导入依赖
app.use(koaBody());//启用依赖
router.post("/login", async(ctx) => {
    console.log("输出信息:", ctx.request.body);//输出获取的post参数
    ctx.body = {
        msg: "用户登录",
        code: 0,
    };
})
3.3koa常用的内置模块

    这里只对前面的内置模块做一定的补充,详细内置模块可以参考(node.js内置模块相关笔记

process.execPath   //获取项目的执行编译器路径(详细路径)
path.basename()	   //获取目标路径的最后一级路径
process.cwd()      //获取项目的物理根目录
process.env        //获取项目所在的环境
path.extname()     //获取文件的拓展名
3.4koa配置静态资源目录

和express框架一样,koa也有静态资源目录管理依赖koa-static,就不需要使用fs内置模块+mime扩展名管理依赖来返回服务端资源给前端,使用方法如下:

const static = require("koa-static");
app.use(static(path.join(__dirname, "./public")));
//访问方式:http://localhost:8080/images/lovely.jpg

    图床搭建,利用static依赖和基本的文件读写流我们就能实现搭建一个简单的图床了,给出实例程序代码如下:

<!--前端代码-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
    <div class="container">
        <form action="http://localhost:8080/upload" method="POST" role="form" enctype="multipart/form-data">
            <legend>用户登录</legend>
            <div class="form-group">
                <label for="">用户名:</label>
                <input type="text" class="form-control" id="username" name="username" placeholder="请输入用户名">
            </div>
            <div class="form-group">
                <label for="">用户邮箱</label>
                <input type="email" name="email" id="input" class="form-control" value="" required="required" title="" placeholder="请输入用户邮箱">
            </div>
            <div class="form-group">
                <label for="">用户头像</label>
                <input type="file" class="form-control" id="avatar" name="avatar">
            </div> <button type="submit" class="btn btn-primary">添加用户</button>
        </form>
    </div>



</body>

</html>
//后端程序
const path = require("path");
const fs = require("fs");
const koaBody = require("koa-body");
const koa = require("koa");
const static = require("koa-static");
const router = require("koa-router")();
const app = new koa();
app.use(static(path.join(__dirname, "./static")));
app.use(
    koaBody({
        multipart: true,
        formidable: {
            maxFileSize: 200 * 1024 * 1024, //设置默认上传的文件最大值(200MB)
            keepExtensions: true, //保留默认的扩展名
        },
    })
);
router.post("/upload", async(ctx) => {
    console.log("输出数据:", ctx.request.body);
    console.log("输出数据:", path.basename(ctx.request.files.avatar.path));
    const avatarUrl = ctx.request.files.avatar.path;
    const reader = fs.createReadStream(avatarUrl);
    const uploadFile = "./static/" + path.basename(avatarUrl);
    const writer = fs.createWriteStream(uploadFile);
    reader.pipe(writer);
    ctx.body = ctx.origin + "/" + path.basename(avatarUrl);
});
app.use(router.routes());
app.listen(8080);

    需要注意的是:
(1)图片上传使用的是post请求,因此需要使用koa-body依赖;
(2)对于依赖的初始化应该放在路由配置的前面,ctx.request.body能够获取请求参数,ctx.request.file能够获取上传文件。
(3)由于这里上传数据含有图片和json两种数据类型和,因此在form表单中需要添加属性:enctype="multipart/form-data"

3.5koa连接mongoDB数据库

    为了方便使用,下载一个(mongoDB compass)图形界面工具,使用方法如下:
(1)连接mongoBD数据库,点击图示地方,然后connect:
在这里插入图片描述
(2)其他的功能点击几下就熟悉了,说一下字段的添加,一种是导入json/cvs文件,一种是直接添加记录,这里简单说一下直接添加记录(insert document):字段需要放在id下面,否则无法使用。
在这里插入图片描述
    修改字段的方法如下:
在这里插入图片描述
    koa连接mongDB,需要安装mongodb依赖程序实例代码如下:

const path = require("path");
const koa = require("koa");
const router = require("koa-router")();
const app = new koa();
const main = require("./models");
router.get("/find", async ctx => {
    const obj = {
        name: "李四",
        age: 80
    };
    const res = await main();
    if (res.insertOne(obj)) ctx.body = "添加数据成功";
    else ctx.body = "添加数据失败";
})
app.use(router.routes());
app.listen(8080);
//models/index.js
const { MongoClient } = require("mongodb");
const url = "mongodb://127.0.0.1:27017";
const client = new MongoClient(url);
const dbName = "Student";
async function main() {
    await client.connect();
    const db = client.db(dbName);
    const collection = db.collection('user');
    return collection;
}
module.exports = main;

    注意:连接数据库里面的数据表需要使用同步方法,修改数据也需要改成同步。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

koa(express升级版框架)的基本使用 的相关文章

  • iPad - 无法在框架内滚动

    我无法滚动 iPad Safari 中框架内调用的 pdf 我已经尝试过两件事 2 指滚动 使用对象 嵌入代替框架 但这是行不通的 事实上我已经尝试了很多东西 溢出 高度等等 请帮我 先感谢您 根据这篇文章http support appl
  • 将 R (ramda) 导入 typescript .ts 文件

    我正在尝试使用Ramda js如下
  • 缺少节点-v59-linux-x64/grpc_node.node

    我正在尝试在我的服务器中使用 Firebase admin SDK 当我部署时 出现错误 我在 firebase admin node module 映射中缺少文件 node v59 linux x64 grpc node node 我在包
  • 我可以动态创建/销毁 Vue 组件吗?

    因此 我正在创建一个相当复杂的 Vue 应用程序 它从后端 API 获取数据并将其显示在前端 具体取决于用户选择的过滤器 它的默认设置是立即显示所有内容 然后一旦用户选择过滤器 它就会拉出不具有这些属性的 卡片 组件 直到今天 一切都很顺利
  • 为什么隐式符号到字符串转换会导致 JavaScript 中出现类型错误?

    有一个 toString on Symbol在 ES6 中 它返回字符串表示形式Symbol 但想知道为什么 Symbol 不起作用 运行这个表达式会抛出TypeError我没想到 后者只是打电话吗 toString 在一个新的Symbol
  • 如何在bootstrap中默认隐藏侧边栏?

    我在这里有一个很好的参考 作为 Bootstrap 在设计 Web 表单应用程序时的侧边栏 http startbootstrap com template overviews simple sidebar http startbootst
  • 您可以将现有的 div 复制到模式对话框吗

    我有一个带有多个面板的仪表板来显示不同的信息 我希望能够添加一个按钮来以模式显示面板 我正在使用引导程序 我所能找到的只是已经编写的模态 我想复制作为面板的 div 标签的内容 然后将其显示在模型中 但我不确定如何进行 该面板的 html
  • 实现悬停信息框

    我有一个日历 当用户将鼠标悬停在单元格上时 会出现一个很大的信息框 其中包含该日期的详细信息 虽然当用户离开时使信息框消失 但我遇到了一些麻烦 我基本上想要它 这样当鼠标光标移出信息框隐藏的日历单元格时 它就会消失 但我遇到了麻烦 因为mo
  • 在动态创建的元素上添加事件监听器[重复]

    这个问题在这里已经有答案了 是否可以向所有动态生成的元素添加事件侦听器 Javascript 我不是页面的所有者 因此我无法以静态方式添加侦听器 对于页面加载时创建的所有元素 我使用 doc body addEventListener cl
  • Cosmos DB Mongo API 如何管理“请求率很大”情况

    我有以下代码 async function bulkInsert db collectionName documents try const cosmosResults await db collection collectionName
  • window.open:是否可以打开一个新窗口并修改其 DOM

    我想打开一个新窗口 var my window open iframe html blank height 600 width 600 但当我打开它时 我想修改它的DOM 我尝试过 var div my document createEle
  • html canvas动画卡顿

    谁能解释为什么提供的画布动画断断续续 我创建了一个测试存根来演示该问题 我在桌面上的 FF Chrome IE 以及 Android 上的 FF 和 Chrome 中看到了卡顿现象 口吃是由于垃圾收集造成的吗 似乎 raf 在每次调用时都会
  • 为什么我们使用 SpreadsheetApp.flush()?

    我的理解是 flush https developers google com apps script reference spreadsheet spreadsheet app flush有助于在功能发生时执行这些功能 而无需将它们捆绑在
  • 如何循环遍历对象数组并生成键值对?

    我有一个像这样的对象数组 let someObj items id 12 value true id 34 value true id 56 value false 我想将其添加到现有对象中 其中 id 是该对象的键 如下所示 let ob
  • 窗口大小调整触发的 DOM 事件

    我有一个布局相当复杂的页面 最初打开页面时 某些元素的对齐存在问题 但是 可以通过更改浏览器窗口的大小来 永久 解决此问题 显然 我不希望用户必须调整浏览器窗口的大小才能使页面正确显示 所以我想知道是否有一种方法可以在页面首次加载时以编程方
  • 自定义指令链接中的 element.replaceWith 仅在第一次调用时有效

    我是 Angularjs 的新手 不太了解幕后的情况 基本上我想创建一个 E 扭结指令 基于控制器中的数据 我动态创建html 就像整个 表 一样 以替换该指令 我的 html 文件中的指令是这样的
  • 如何使用Create React App安装React

    嗨 我对反应真的很陌生 我不知道如何实际安装它 也不知道我需要做什么才能在其中编写代码 我下载了node js并且安装了v12 18 3以及NPM 6 14 6 但是每次我尝试在许多网站上提到的create react app安装方法中输入
  • 是否可以将请求标头添加到 CORS 预检请求中?

    我有一个从外部服务器 不是服务器 访问 API 的网站 为网站提供服务 通过简单的XmlHttpRequest 见下文 那个API 需要将用于访问服务的 API 密钥添加为请求标头 然而 正如这些CORS https developer m
  • Aurelia - 仅 HTML 自定义元素的内联定义

    我的 Aurelia 视图模型中有一个递归对象 如下所示 Class BottomlessPit Name string MorePits BottomlessPit null 因此 我想在 Aurelia 视图中使用递归模板 它只会在一个
  • 如何为 Imagus 悬停缩放扩展开发自定义过滤器?

    当我读到关于悬停缩放是邪恶的 http www reddit com r YouShouldKnow comments 1wjrc8 ysk that the hover zoom extension is spyware 哎呀 有两篇文章

随机推荐

  • python中find函数的使用方法_Python re 模块findall() 函数返回值展现方式解析

    findall 函数 在字符串中找到正则表达式所匹配的所有子串 并返回一个列表 如果没有找到匹配的 则返回空列表 注意 match 和 search 是匹配一次 findall 匹配所有 match 和 search 的区别也很大 可以自行
  • 自媒体必备的4个文案网站,每一个都很实用,赶紧收藏

    1 文案狗 在这里 谐音梗 不用担心扣钱 很多广告词 slogan都离不开它 如果实在想不到合适的词 可以在这里搜索 有了这么多的词汇灵感 再也不担心写不出吸睛的广告文案了 是广告人非常喜欢的文案网站 只要输入关键字或者词语 就能生成各种谐
  • 职责链模式

    职责链模式 职责链模式概述 职责链模式解决的问题 角色分析 职责链模式优点 代码示例 源码中的职责链模式使用案例 业务与设计模式落地案例 职责链模式概述 职责链模式解决的问题 案例 一个贷款审批案例 假设贷款额度小于5万时由客户负责人审核放
  • 用python做DEVS离散事件建模与仿真

    1 DEVS 离散事件运行规范 离散事件系统规范 DEVS discrete event system specification 是由美国学者 B P Zeigler等提出的一种模块化建模方法 它将描述对象中的每个子系统看作一个具有内部独
  • 利用Blob下载文件

    前端涉及到导出文件时可以使用Blob进行下载 这里是用的vue this store dispatch exportList then response gt var blob new Blob response type applicat
  • LIO-SAM:在高斯牛顿法求解过程中用SO3代替欧拉角

    LIO SAM发表于IROS2020 是一个效果非常好的惯性 激光紧耦合里程计 我打算给我们的机器人搞一个激光里程计 于是打算把LIO SAM改一改搞过来 修改过程中发现一个问题 在里程计求解 mapOptimization的LMOptim
  • 多线程面试60问

    1 多线程有什么用 1 发挥多核CPU 的优势 随着工业的进步 现在的笔记本 台式机乃至商用的应用服务器至少也都是双核的 4 核 8 核甚至 16 核的也都不少见 如果是单线程的程序 那么在双核 CPU 上就浪费了 50 在 4 核 CPU
  • python练习作业

    1 设计一个程序 完成 英雄 商品的购买 展示商品信息 折扣 gt 输入商品价格 gt 输入购买数量 gt 提示付款 输入付款金额 gt 打印购买小票 扩展 print n t t英雄商城购买英雄 print 英雄信息 print 14 p
  • vue3 打包上线配置

    1 项目根目录下 src同目录 新建vue config js文件 2 输入配置参数 const path require path module exports 基本路径 整个文件夹在哪 publicPath 输出文件目录 文件夹名 ou
  • Qt如何调用建立好的ui界面

    在我们刚才学习qt的时候 很多的时候 按照新建立的工程文件 出现一个困扰 就是如何调用额外建立的UI界面 在这里主要是说明这里的面的关键因素 其实学习qt 如果之前有过学过C 的同事 那么就学习qt就会很容易上手 因为qt主要的核心就是以c
  • 1.2.Perl环境安装-Windows下模拟linux命令行(不安装linux虚拟机)

    Perl环境安装 Windows下模拟linux命令行 不安装linux虚拟机 B站视频教程 菜鸟学生信 教学环境说明 为了降低大家的学习门槛 前期教学使用windows环境 在大家熟悉Perl的基本语法后我们再过度到Linux环境 一 使
  • 【调试经验】双系统重装Ubuntu LTS 22.04

    机器 机械革命 系统 Win11 Ubuntu 22 04 工具 U盘 Rufus 镜像 Ubuntu 镜像文件 目录 前期准备阶段 关键阶段 大功告成 前期准备阶段 也不知道怎么回事 昨天在更新软件后只能进tty终端而进不了 GUI 界面
  • 肖涵博士和全球专家于 CVPR2023 温哥华会议 线上分享神经搜索的实践应用

    神经搜索 也就是在深度嵌入空间中高效搜索相似项的技术 它是处理大型多模态集合的基石 随着像基础模型和提示词工程这样的强大技术的出现 高效神经搜索变得越来越重要 明早六点 在 CVPR2023 温哥华的神经搜索实践应用专题讲座 里 Jina
  • 如何提升周末的体验感?

    以下是一些可以提升周末体验感的好方法 1 尝试新的活动 尝试一些之前从未尝试过的活动 比如户外运动 艺术课程 烹饪课程或者参加社区活动等 这样可以为周末增添新鲜感和乐趣 2 放松身心 给自己一些时间放松身心 可以进行冥想 瑜伽或者阅读等能够
  • 【Transformers】第 2 章:主题的实践介绍

    大家好 我是Sonhhxg 柒 希望你看完之后 能对你有所帮助 不足请指正 共同学习交流 个人主页 Sonhhxg 柒的博客 CSDN博客 欢迎各位 点赞 收藏 留言 系列专栏 机器学习 ML 自然语言处理 NLP 深度学习 DL fore
  • 机器学习之【最大熵模型】

    机器学习之 最大熵模型 一 最大熵模型 1 最大熵原理 2 示例 3 定义 二 最大熵模型的学习 1 原例子的最大熵模型 三 模型学习的最优化算法 四 最后示例 一 最大熵模型 1 最大熵模型 Maximum Entropy Model 由
  • Mysql解决of ORDER BY clause is not in GROUP BY clause and contains nonaggregated column问题

    一 查询语句 查询语句一 select count u id from user u LEFT JOIN dept d on u dept id d id LEFT JOIN user role ur on u account ur acc
  • 本地硬盘安装 Linux RedHat Linux 9.0

    我准备在自己已装有windows xp 的机器上LINUX 用来学习一下 由于光驱和光盘的问题 整了一 下午加一晚上都没整上来 还废了我几张光盘 每次上天保佑好不容易第一张盘顺利读完了 刚刚得意的时候 第二张盘又不动了 气死我了 第二天找了
  • 如何从“豌豆荚”下载APP的历史版本?

    如何下载该app的历史版本呢 下面我就以 抖音极速版 为例 教大家如何从 豌豆荚 下载 抖音极速版app 的历史版本 豌豆荚官网 https www wandoujia com 教程步骤 1 打开上述豌豆荚官网 在搜索框输入 抖音极速版 点
  • koa(express升级版框架)的基本使用

    前端项目实习笔记 1 引言 2 各种源的由来 3 koa使用教程 3 1koa基本使用以及洋葱模型 3 2koa路由的使用 3 3koa常用的内置模块 3 4koa配置静态资源目录 3 5koa连接mongoDB数据库 1 引言 今天拿着代