[JavaScript知识库] koa（express升级版框架）的基本使用

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> koa（express升级版框架）的基本使用 -> 正文阅读

[JavaScript知识库]koa（express升级版框架）的基本使用

前端项目实习笔记

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，于是决定放弃黑马教程转到实习老师的教程。
????基本使用，相关安装依赖：koa，art-template， koa-art-template，koa-router，nodemon(开发环境)。程序代码如下：

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;