404错误
你要找的页面不存在
'); - res.end(); - }else{ - res.writeHeader(200,{ - 'content-type' : 'text/html;charset="utf-8"' - }); - res.write(data);//将index.html显示在客户端 - res.end(); - - } - }); - -}).listen(8888); - -console.log('http://127.0.0.1:8888'); \ No newline at end of file diff --git "a/33\347\211\233\346\226\207\350\275\251/20230225-koa.md" "b/33\347\211\233\346\226\207\350\275\251/20230225-koa.md" deleted file mode 100644 index 6470551..0000000 --- "a/33\347\211\233\346\226\207\350\275\251/20230225-koa.md" +++ /dev/null @@ -1,9 +0,0 @@ -koa是Express的下一代基于Node.js的web框架， -``` -app.use(async (ctx, next) => { - await next(); - var data = await doReadFile(); - ctx.response.type = 'text/plain'; - ctx.response.body = data; -}); -``` \ No newline at end of file diff --git "a/33\347\211\233\346\226\207\350\275\251/20230227-\350\267\257\347\224\261.md" "b/33\347\211\233\346\226\207\350\275\251/20230227-\350\267\257\347\224\261.md" deleted file mode 100644 index 4aa4278..0000000 --- "a/33\347\211\233\346\226\207\350\275\251/20230227-\350\267\257\347\224\261.md" +++ /dev/null @@ -1,26 +0,0 @@ -``` -app.use(async (ctx, next) => { - if (ctx.request.path === '/') { - ctx.response.body = 'index page'; - } else { - await next(); - } -}); - - -app.use(async (ctx, next) => { - if (ctx.request.path === '/test') { - ctx.response.body = 'TEST page'; - } else { - await next(); - } -}); - -app.use(async (ctx, next) => { - if (ctx.request.path === '/error') { - ctx.response.body = 'ERROR page'; - } else { - await next(); - } -}); -``` \ No newline at end of file diff --git "a/33\347\211\233\346\226\207\350\275\251/20230228-router.md" "b/33\347\211\233\346\226\207\350\275\251/20230228-router.md" deleted file mode 100644 index f91624b..0000000 --- "a/33\347\211\233\346\226\207\350\275\251/20230228-router.md" +++ /dev/null @@ -1,21 +0,0 @@ -``` -'use strict' - -const koa=require('koa'); -const router=require('router')(); -console.log(router); -const app=new koa(); - -router.get('/abc',async(ctx,next)=>{ - ctx.body='我是abc'; -}) -router.get('/def',async(ctx,next)=>{ - ctx.body='我是def'; -}) - -app.use(router,router()); -let port=3000; -app.listen(port); - -console.log(`http://localhost:${port}`); -``` \ No newline at end of file diff --git "a/33\347\211\233\346\226\207\350\275\251/20230302-\351\207\215\346\236\204.md" "b/33\347\211\233\346\226\207\350\275\251/20230302-\351\207\215\346\236\204.md" deleted file mode 100644 index 0a1559a..0000000 --- "a/33\347\211\233\346\226\207\350\275\251/20230302-\351\207\215\346\236\204.md" +++ /dev/null @@ -1,34 +0,0 @@ -Controller Middleware -最后，我们把扫描controllers目录和创建router的代码从app.js中提取出来，作为一个简单的middleware使用，命名为controller.js： - -const fs = require('fs'); - -function addMapping(router, mapping) { - ... -} - -function addControllers(router, dir) { - ... -} - -module.exports = function (dir) { - let - controllers_dir = dir || 'controllers', // 如果不传参数，扫描目录默认为'controllers' - router = require('koa-router')(); - addControllers(router, controllers_dir); - return router.routes(); -}; -这样一来，我们在app.js的代码又简化了： - -... - -// 导入controller middleware: -const controller = require('./controller'); - -... - -// 使用middleware: -app.use(controller()); - -... -经过重新整理后的工程url2-koa目前具备非常好的模块化，所有处理URL的函数按功能组存放在controllers目录，今后我们也只需要不断往这个目录下加东西就可以了，app.js保持不变。 \ No newline at end of file diff --git "a/33\347\211\233\346\226\207\350\275\251/20230303-url\345\244\204\347\220\206.md" "b/33\347\211\233\346\226\207\350\275\251/20230303-url\345\244\204\347\220\206.md" deleted file mode 100644 index 989b203..0000000 --- "a/33\347\211\233\346\226\207\350\275\251/20230303-url\345\244\204\347\220\206.md" +++ /dev/null @@ -1,18 +0,0 @@ -``` -const fs = require('fs'); // 文件模块 -const Koa = require('koa'); -const router = require('koa-router')(); // 处理url与express一样 都需要引入相关的处理模块 -const bodyParser = require('koa-bodyparser'); // 处理原始请求json字符串解析模块 -const app = new Koa(); // 实例化koa，K大写代表引入的是koa2 -app.use(bodyParser()); -app.use(router.routes()); // URL处理模块 - -app.use(async (ctx, next) => { // ctx 你可以理解为客户端 存储着所有的信息 username path 等信息 - console.log(ctx.request.path, 'asdsad'); // 获取浏览器地址信息 判断是否路径为/index - if (ctx.request.path === '/index') { - ctx.response.body = 'index page'; // 发送数据Index page - } else { - await next(); - } -}); -``` \ No newline at end of file diff --git "a/33\347\211\233\346\226\207\350\275\251/20230306-\345\260\201\350\243\205.md" "b/33\347\211\233\346\226\207\350\275\251/20230306-\345\260\201\350\243\205.md" deleted file mode 100644 index b37f544..0000000 --- "a/33\347\211\233\346\226\207\350\275\251/20230306-\345\260\201\350\243\205.md" +++ /dev/null @@ -1,123 +0,0 @@ -# 封装 - -文件app.js -```js -'use strict' -const Koa = require('koa'); -const controllers = require('./controller') - -let app = new Koa(); -controllers(app) - -let port = 8088; -app.listen(port); -console.log(`http://localhost:${port}`); -``` - -index.js -```js -'use strict' - - -const router = require('koa-router')(); -const bodyparser = require('koa-bodyparser'); -const {findControllers,registryRouter} = require('../utils/tools') - -//处理路由 -function processRouter(app) { - - //1、找到所有路由文件 - let controllers = findControllers() - //2、遍历注册所有路由 - - registryRouter(controllers,router) - - app.use(bodyparser()) - app.use(router.routes()); - -} -module.exports = processRouter -``` - -tools.js -```js -'use strict' - -const fs = require('fs') - -//1、找到所有路由文件 -function findControllers(path) { - path = path || './controller/'; - console.log(path); - let files = fs.readdirSync(path) - // console.log(files); - return files.filter(item => { - return item !== 'index.js' - }) -} - -//2、遍历注册所有路由 -function registryRouter(controllerFiles,router) { - controllerFiles.forEach(item => { - let tmpModule = require('../controller/' + item.replace('.js', '')); - console.log(tmpModule); - for (let key in tmpModule) { - let tmpArr = key.split(' '); - - let method = tmpArr[0]; - let url = tmpArr[1]; - let fn = tmpModule[key]; - - if (method === 'get') { - router.get(url,fn) - } else if (method === 'post') { - router.post(url,fn) - } else if (method === 'put') { - router.put(url,fn) - } else if (method === 'delete') { - router.delete(url,fn) - } - - } - }) -} - -module.exports = { - findControllers, - registryRouter -} -``` - -users.js -```js -'use strict' - - -async function getAll(ctx, next) { - ctx.body = '这里是getAll' -} - -async function getById(ctx, next) { - ctx.body = '这里是getById' -} - -async function addItem(ctx, next) { - ctx.body = '这里是addItem' -} - -async function updateItem(ctx, next) { - -} - -async function delItem(ctx, next) { - -} - -module.exports = { - 'get /users':getAll, - 'get /users/:id':getById, - 'post /users':addItem, - 'put /users/:id':updateItem, - 'delete /users/:id':delItem -} -``` \ No newline at end of file diff --git "a/33\347\211\233\346\226\207\350\275\251/20230307-Nunjucks.md" "b/33\347\211\233\346\226\207\350\275\251/20230307-Nunjucks.md" deleted file mode 100644 index a506af2..0000000 --- "a/33\347\211\233\346\226\207\350\275\251/20230307-Nunjucks.md" +++ /dev/null @@ -1,174 +0,0 @@ -# Nunjucks - -Nunjucks是什么东东？其实它是一个模板引擎。 - -那什么是模板引擎？ - -模板引擎就是基于模板配合数据构造出字符串输出的一个组件。比如下面的函数就是一个模板引擎： -``` -function examResult (data) { - return `${data.name}同学一年级期末考试语文${data.chinese}分，数学${data.math}分，位于年级第${data.ranking}名。` -} -``` -如果我们输入数据如下： -``` -examResult({ - name: '小明', - chinese: 78, - math: 87, - ranking: 999 -}); -``` -该模板引擎把模板字符串里面对应的变量替换以后，就可以得到以下输出： - -小明同学一年级期末考试语文78分，数学87分，位于年级第999名。 - - -## 简单逻辑 -模板还需要能执行一些简单逻辑，比如，要按条件输出内容，需要if实现如下输出： -``` -{{ name }}同学， -{% if score >= 90 %} - 成绩优秀，应该奖励 -{% elif score >=60 %} - 成绩良好，继续努力 -{% else %} - 不及格，建议回家打屁股 -{% endif %} -``` -所以，我们需要一个功能强大的模板引擎，来完成页面输出的功能。 - - -我们创建一个use-nunjucks的VS Code工程结构如下： -``` -use-nunjucks/ -| -+- .vscode/ -| | -| +- launch.json <-- VSCode 配置文件 -| -+- views/ -| | -| +- hello.html <-- HTML模板文件 -| -+- app.js <-- 入口js -| -+- package.json <-- 项目描述文件 -| -+- node_modules/ <-- npm安装的所有依赖包 -``` -其中，模板文件存放在views目录中。 - -我们先在package.json中添加nunjucks的依赖： -``` -"nunjucks": "2.4.2" -``` -注意，模板引擎是可以独立使用的，并不需要依赖koa。用npm install安装所有依赖包。 - -紧接着，我们要编写使用Nunjucks的函数render。怎么写？方法是查看Nunjucks的官方文档，仔细阅读后，在app.js中编写代码如下： -``` -const nunjucks = require('nunjucks'); - -function createEnv(path, opts) { - var - autoescape = opts.autoescape === undefined ? true : opts.autoescape, - noCache = opts.noCache || false, - watch = opts.watch || false, - throwOnUndefined = opts.throwOnUndefined || false, - env = new nunjucks.Environment( - new nunjucks.FileSystemLoader('views', { - noCache: noCache, - watch: watch, - }), { - autoescape: autoescape, - throwOnUndefined: throwOnUndefined - }); - if (opts.filters) { - for (var f in opts.filters) { - env.addFilter(f, opts.filters[f]); - } - } - return env; -} - -var env = createEnv('views', { - watch: true, - filters: { - hex: function (n) { - return '0x' + n.toString(16); - } - } -}); -``` -变量env就表示Nunjucks模板引擎对象，它有一个`render(view, model)`方法，正好传入view和model两个参数，并返回字符串。 - -创建env需要的参数可以查看文档获知。我们用autoescape = opts.autoescape && true这样的代码给每个参数加上默认值，最后使用`new nunjucks.FileSystemLoader('views')`创建一个文件系统加载器，从views目录读取模板。 - -我们编写一个`hello.html`模板文件，放到views目录下，内容如下： -``` -Hello {{ name }}
-``` -然后，我们就可以用下面的代码来渲染这个模板： -``` -var s = env.render('hello.html', { name: '小明' }); -console.log(s); -``` -获得输出如下： -``` -Hello 小明
-``` -咋一看，这和使用JavaScript模板字符串没啥区别嘛。不过，试试： -``` -var s = env.render('hello.html', { name: '' }); -console.log(s); -``` -获得输出如下： -``` -Hello <script>alert("小明")</script>
-``` -这样就避免了输出恶意脚本。 - -此外，可以使用Nunjucks提供的功能强大的tag，编写条件判断、循环等功能，例如： -``` - - -Fruits List
- {% for f in fruits %} -{{ f }}
- {% endfor %} - -``` -Nunjucks模板引擎最强大的功能在于模板的继承。仔细观察各种网站可以发现，网站的结构实际上是类似的，头部、尾部都是固定格式，只有中间页面部分内容不同。如果每个模板都重复头尾，一旦要修改头部或尾部，那就需要改动所有模板。 - -更好的方式是使用继承。先定义一个基本的网页框架base.html： -``` - -{% block header %}Unnamed
{% endblock %} -{% block body %}No body
{% endblock %}
-{% block footer %} copyright
{% endblock %}
-
-
-```
-base.html定义了三个可编辑的块，分别命名为header、body和footer。子模板可以有选择地对块进行重新定义：
-```
-{% extends 'base.html' %}
-
-{% block header %}{{ header }}
{% endblock %} - -{% block body %}{{ body }}
{% endblock %} -``` -然后，我们对子模板进行渲染： -``` -console.log(env.render('extend.html', { - header: 'Hello', - body: 'bla bla bla...' -})); -``` -输出HTML如下： -``` - -Hello
-bla bla bla...
-copyright
<-- footer没有重定义，所以仍使用父模板的内容
-
-```
\ No newline at end of file
diff --git "a/33\347\211\233\346\226\207\350\275\251/20230309-MVC.md" "b/33\347\211\233\346\226\207\350\275\251/20230309-MVC.md"
deleted file mode 100644
index 8f9cbd5..0000000
--- "a/33\347\211\233\346\226\207\350\275\251/20230309-MVC.md"
+++ /dev/null
@@ -1,173 +0,0 @@
-
-## MVC
-我们已经可以用koa处理不同的URL，还可以用Nunjucks渲染模板。现在，是时候把这两者结合起来了！
-
-当用户通过浏览器请求一个URL时，koa将调用某个异步函数处理该URL。在这个异步函数内部，我们用一行代码：
-```
-ctx.render('home.html', { name: 'Michael' });
-```
-通过Nunjucks把数据用指定的模板渲染成HTML，然后输出给浏览器，用户就可以看到渲染后的页面了：
-
-## mvc
-
-这就是传说中的MVC：Model-View-Controller，中文名“模型-视图-控制器”。
-
-异步函数是C：Controller，Controller负责业务逻辑，比如检查用户名是否存在，取出用户信息等等；
-
-包含变量{{ name }}的模板就是V：View，View负责显示逻辑，通过简单地替换一些变量，View最终输出的就是用户看到的HTML。
-
-MVC中的Model在哪？Model是用来传给View的，这样View在替换变量的时候，就可以从Model中取出相应的数据。
-
-上面的例子中，Model就是一个JavaScript对象：
-```
-{ name: 'Michael' }
-```
-下面，我们根据原来的url2-koa创建工程view-koa，把koa2、Nunjucks整合起来，然后，把原来直接输出字符串的方式，改为ctx.render(view, model)的方式。
-
-工程view-koa结构如下：
-```
-view-koa/
-|
-+- .vscode/
-| |
-| +- launch.json <-- VSCode 配置文件
-|
-+- controllers/ <-- Controller
-|
-+- views/ <-- html模板文件
-|
-+- static/ <-- 静态资源文件
-|
-+- controller.js <-- 扫描注册Controller
-|
-+- app.js <-- 使用koa的js
-|
-+- package.json <-- 项目描述文件
-|
-+- node_modules/ <-- npm安装的所有依赖包
-```
-在package.json中，我们将要用到的依赖包有：
-```
-"koa": "2.0.0",
-"koa-bodyparser": "3.2.0",
-"koa-router": "7.0.0",
-"nunjucks": "2.4.2",
-"mime": "1.3.4",
-"mz": "2.4.0"
-```
-先用npm install安装依赖包。
-
-然后，我们准备编写以下两个Controller：
-
-1. 处理首页 GET /
-
-我们定义一个async函数处理首页URL/：
-```
-async (ctx, next) => {
- ctx.render('index.html', {
- title: 'Welcome'
- });
-}
-```
-注意到koa并没有在ctx对象上提供render方法，这里我们假设应该这么使用，这样，我们在编写Controller的时候，最后一步调用ctx.render(view, model)就完成了页面输出。
-
-2. 处理登录请求 POST /signin
-我们再定义一个async函数处理登录请求/signin：
-```
-async (ctx, next) => {
- var
- email = ctx.request.body.email || '',
- password = ctx.request.body.password || '';
- if (email === 'admin@example.com' && password === '123456') {
- // 登录成功:
- ctx.render('signin-ok.html', {
- title: 'Sign In OK',
- name: 'Mr Node'
- });
- } else {
- // 登录失败:
- ctx.render('signin-failed.html', {
- title: 'Sign In Failed'
- });
- }
-}
-```
-由于登录请求是一个POST，我们就用ctx.request.body.Hello, ${name}!
`; -}); - -router.get('/', async (ctx, next) => { - ctx.response.body = 'Index
'; -}); - -// add router middleware: -app.use(router.routes()); - -app.listen(3000); -console.log('app started at port 3000...'); -``` -注意导入koa-router的语句最后的()是函数调用： -``` -const router = require('koa-router')(); -``` -相当于： -``` -const fn_router = require('koa-router'); -const router = fn_router(); -``` -然后，我们使用router.get('/path', async fn)来注册一个GET请求。可以在请求路径中使用带变量的/hello/:name，变量可以通过ctx.params.name访问。 - -再运行app.js，我们就可以测试不同的URL： -``` -输入首页：http://localhost:3000/ -``` -``` -输入：http://localhost:3000/hello/koa -``` - -## 处理post请求 -用router.get('/path', async fn)处理的是get请求。如果要处理post请求，可以用router.post('/path', async fn)。 - -用post请求处理URL时，我们会遇到一个问题：post请求通常会发送一个表单，或者JSON，它作为request的body发送，但无论是Node.js提供的原始request对象，还是koa提供的request对象，都不提供解析request的body的功能！ - -所以，我们又需要引入另一个middleware来解析原始request请求，然后，把解析后的参数，绑定到ctx.request.body中。 - -koa-bodyparser就是用来干这个活的。 - -我们在package.json中添加依赖项： -``` -"koa-bodyparser": "3.2.0" -``` -然后使用npm install安装。 - -下面，修改app.js，引入koa-bodyparser： -``` -const bodyParser = require('koa-bodyparser'); -``` -在合适的位置加上： -``` -app.use(bodyParser()); -``` -由于middleware的顺序很重要，这个koa-bodyparser必须在router之前被注册到app对象上。 - -现在我们就可以处理post请求了。写一个简单的登录表单： -``` -router.get('/', async (ctx, next) => { - ctx.response.body = `Index
- `; -}); - -router.post('/signin', async (ctx, next) => { - var - name = ctx.request.body.name || '', - password = ctx.request.body.password || ''; - console.log(`signin with name: ${name}, password: ${password}`); - if (name === 'koa' && password === '12345') { - ctx.response.body = `Welcome, ${name}!
`; - } else { - ctx.response.body = `Login failed!
- `; - } -}); -``` -注意到我们用var name = ctx.request.body.name || ''拿到表单的name字段，如果该字段不存在，默认值设置为''。 - -类似的，put、delete、head请求也可以由router处理。 - -## 重构 -现在，我们已经可以处理不同的URL了，但是看看app.js，总觉得还是有点不对劲。 - - -所有的URL处理函数都放到app.js里显得很乱，而且，每加一个URL，就需要修改app.js。随着URL越来越多，app.js就会越来越长。 - -如果能把URL处理函数集中到某个js文件，或者某几个js文件中就好了，然后让app.js自动导入所有处理URL的函数。这样，代码一分离，逻辑就显得清楚了。最好是这样： -``` -url2-koa/ -| -+- .vscode/ -| | -| +- launch.json <-- VSCode 配置文件 -| -+- controllers/ -| | -| +- login.js <-- 处理login相关URL -| | -| +- users.js <-- 处理用户管理相关URL -| -+- app.js <-- 使用koa的js -| -+- package.json <-- 项目描述文件 -| -+- node_modules/ <-- npm安装的所有依赖包 -``` -于是我们把url-koa复制一份，重命名为url2-koa，准备重构这个项目。 - -我们先在controllers目录下编写index.js： -``` -var fn_index = async (ctx, next) => { - ctx.response.body = `Index
- `; -}; - -var fn_signin = async (ctx, next) => { - var - name = ctx.request.body.name || '', - password = ctx.request.body.password || ''; - console.log(`signin with name: ${name}, password: ${password}`); - if (name === 'koa' && password === '12345') { - ctx.response.body = `Welcome, ${name}!
`; - } else { - ctx.response.body = `Login failed!
- `; - } -}; - -module.exports = { - 'GET /': fn_index, - 'POST /signin': fn_signin -}; -``` - -这个index.js通过module.exports把两个URL处理函数暴露出来。 - -类似的，hello.js把一个URL处理函数暴露出来： -``` -var fn_hello = async (ctx, next) => { - var name = ctx.params.name; - ctx.response.body = `Hello, ${name}!
`; -}; - -module.exports = { - 'GET /hello/:name': fn_hello -}; -``` -现在，我们修改app.js，让它自动扫描controllers目录，找到所有js文件，导入，然后注册每个URL： -``` -// 先导入fs模块，然后用readdirSync列出文件 -// 这里可以用sync是因为启动时只运行一次，不存在性能问题: -var files = fs.readdirSync(__dirname + '/controllers'); - -// 过滤出.js文件: -var js_files = files.filter((f)=>{ - return f.endsWith('.js'); -}); - -// 处理每个js文件: -for (var f of js_files) { - console.log(`process controller: ${f}...`); - // 导入js文件: - let mapping = require(__dirname + '/controllers/' + f); - for (var url in mapping) { - if (url.startsWith('GET ')) { - // 如果url类似"GET xxx": - var path = url.substring(4); - router.get(path, mapping[url]); - console.log(`register URL mapping: GET ${path}`); - } else if (url.startsWith('POST ')) { - // 如果url类似"POST xxx": - var path = url.substring(5); - router.post(path, mapping[url]); - console.log(`register URL mapping: POST ${path}`); - } else { - // 无效的URL: - console.log(`invalid URL: ${url}`); - } - } -} -``` - -如果上面的大段代码看起来还是有点费劲，那就把它拆成更小单元的函数： -``` -function addMapping(router, mapping) { - for (var url in mapping) { - if (url.startsWith('GET ')) { - var path = url.substring(4); - router.get(path, mapping[url]); - console.log(`register URL mapping: GET ${path}`); - } else if (url.startsWith('POST ')) { - var path = url.substring(5); - router.post(path, mapping[url]); - console.log(`register URL mapping: POST ${path}`); - } else { - console.log(`invalid URL: ${url}`); - } - } -} - -function addControllers(router) { - var files = fs.readdirSync(__dirname + '/controllers'); - var js_files = files.filter((f) => { - return f.endsWith('.js'); - }); - - for (var f of js_files) { - console.log(`process controller: ${f}...`); - let mapping = require(__dirname + '/controllers/' + f); - addMapping(router, mapping); - } -} - -addControllers(router); -``` - -确保每个函数功能非常简单，一眼能看明白，是代码可维护的关键。 - -## Controller Middleware -最后，我们把扫描controllers目录和创建router的代码从app.js中提取出来，作为一个简单的middleware使用，命名为controller.js： -``` -const fs = require('fs'); - -function addMapping(router, mapping) { - ... -} - -function addControllers(router, dir) { - ... -} - -module.exports = function (dir) { - let - controllers_dir = dir || 'controllers', // 如果不传参数，扫描目录默认为'controllers' - router = require('koa-router')(); - addControllers(router, controllers_dir); - return router.routes(); -}; -``` -这样一来，我们在app.js的代码又简化了： -``` -... - -// 导入controller middleware: -const controller = require('./controller'); - -... - -// 使用middleware: -app.use(controller()); - -... -``` -经过重新整理后的工程url2-koa目前具备非常好的模块化，所有处理URL的函数按功能组存放在controllers目录，今后我们也只需要不断往这个目录下加东西就可以了，app.js保持不变。 \ No newline at end of file diff --git "a/12\351\276\232\344\270\234\350\276\211/20230228-\345\244\204\347\220\206url.md" "b/12\351\276\232\344\270\234\350\276\211/20230228-\345\244\204\347\220\206url.md" deleted file mode 100644 index 223c2f4..0000000 --- "a/12\351\276\232\344\270\234\350\276\211/20230228-\345\244\204\347\220\206url.md" +++ /dev/null @@ -1,327 +0,0 @@ -# 处理URL - -在hello-koa工程中，我们处理http请求一律返回相同的HTML，这样虽然非常简单，但是用浏览器一测，随便输入任何URL都会返回相同的网页。 - - -正常情况下，我们应该对不同的URL调用不同的处理函数，这样才能返回不同的结果。例如像这样写： -``` -app.use(async (ctx, next) => { - if (ctx.request.path === '/') { - ctx.response.body = 'index page'; - } else { - await next(); - } -}); - -app.use(async (ctx, next) => { - if (ctx.request.path === '/test') { - ctx.response.body = 'TEST page'; - } else { - await next(); - } -}); - -app.use(async (ctx, next) => { - if (ctx.request.path === '/error') { - ctx.response.body = 'ERROR page'; - } else { - await next(); - } -}); -``` -这么写是可以运行的，但是好像有点蠢。 - -应该有一个能集中处理URL的middleware，它根据不同的URL调用不同的处理函数，这样，我们才能专心为每个URL编写处理函数。 - -## koa-router -为了处理URL，我们需要引入koa-router这个middleware，让它负责处理URL映射。 - -我们把上一节的hello-koa工程复制一份，重命名为url-koa。 - -先在package.json中添加依赖项： -``` -"koa-router": "7.0.0" -``` -然后用npm install安装。 - -接下来，我们修改app.js，使用koa-router来处理URL： -``` -const Koa = require('koa'); - -// 注意require('koa-router')返回的是函数: -const router = require('koa-router')(); - -const app = new Koa(); - -// log request URL: -app.use(async (ctx, next) => { - console.log(`Process ${ctx.request.method} ${ctx.request.url}...`); - await next(); -}); - -// add url-route: -router.get('/hello/:name', async (ctx, next) => { - var name = ctx.params.name; - ctx.response.body = `Hello, ${name}!
`; -}); - -router.get('/', async (ctx, next) => { - ctx.response.body = 'Index
'; -}); - -// add router middleware: -app.use(router.routes()); - -app.listen(3000); -console.log('app started at port 3000...'); -``` -注意导入koa-router的语句最后的()是函数调用： -``` -const router = require('koa-router')(); -``` -相当于： -``` -const fn_router = require('koa-router'); -const router = fn_router(); -``` -然后，我们使用router.get('/path', async fn)来注册一个GET请求。可以在请求路径中使用带变量的/hello/:name，变量可以通过ctx.params.name访问。 - -再运行app.js，我们就可以测试不同的URL： -``` -输入首页：http://localhost:3000/ -``` -``` -输入：http://localhost:3000/hello/koa -``` - -## 处理post请求 -用router.get('/path', async fn)处理的是get请求。如果要处理post请求，可以用router.post('/path', async fn)。 - -用post请求处理URL时，我们会遇到一个问题：post请求通常会发送一个表单，或者JSON，它作为request的body发送，但无论是Node.js提供的原始request对象，还是koa提供的request对象，都不提供解析request的body的功能！ - -所以，我们又需要引入另一个middleware来解析原始request请求，然后，把解析后的参数，绑定到ctx.request.body中。 - -koa-bodyparser就是用来干这个活的。 - -我们在package.json中添加依赖项： -``` -"koa-bodyparser": "3.2.0" -``` -然后使用npm install安装。 - -下面，修改app.js，引入koa-bodyparser： -``` -const bodyParser = require('koa-bodyparser'); -``` -在合适的位置加上： -``` -app.use(bodyParser()); -``` -由于middleware的顺序很重要，这个koa-bodyparser必须在router之前被注册到app对象上。 - -现在我们就可以处理post请求了。写一个简单的登录表单： -``` -router.get('/', async (ctx, next) => { - ctx.response.body = `Index
- `; -}); - -router.post('/signin', async (ctx, next) => { - var - name = ctx.request.body.name || '', - password = ctx.request.body.password || ''; - console.log(`signin with name: ${name}, password: ${password}`); - if (name === 'koa' && password === '12345') { - ctx.response.body = `Welcome, ${name}!
`; - } else { - ctx.response.body = `Login failed!
- `; - } -}); -``` -注意到我们用var name = ctx.request.body.name || ''拿到表单的name字段，如果该字段不存在，默认值设置为''。 - -类似的，put、delete、head请求也可以由router处理。 - -## 重构 -现在，我们已经可以处理不同的URL了，但是看看app.js，总觉得还是有点不对劲。 - - -所有的URL处理函数都放到app.js里显得很乱，而且，每加一个URL，就需要修改app.js。随着URL越来越多，app.js就会越来越长。 - -如果能把URL处理函数集中到某个js文件，或者某几个js文件中就好了，然后让app.js自动导入所有处理URL的函数。这样，代码一分离，逻辑就显得清楚了。最好是这样： -``` -url2-koa/ -| -+- .vscode/ -| | -| +- launch.json <-- VSCode 配置文件 -| -+- controllers/ -| | -| +- login.js <-- 处理login相关URL -| | -| +- users.js <-- 处理用户管理相关URL -| -+- app.js <-- 使用koa的js -| -+- package.json <-- 项目描述文件 -| -+- node_modules/ <-- npm安装的所有依赖包 -``` -于是我们把url-koa复制一份，重命名为url2-koa，准备重构这个项目。 - -我们先在controllers目录下编写index.js： -``` -var fn_index = async (ctx, next) => { - ctx.response.body = `Index
- `; -}; - -var fn_signin = async (ctx, next) => { - var - name = ctx.request.body.name || '', - password = ctx.request.body.password || ''; - console.log(`signin with name: ${name}, password: ${password}`); - if (name === 'koa' && password === '12345') { - ctx.response.body = `Welcome, ${name}!
`; - } else { - ctx.response.body = `Login failed!
- `; - } -}; - -module.exports = { - 'GET /': fn_index, - 'POST /signin': fn_signin -}; -``` - -这个index.js通过module.exports把两个URL处理函数暴露出来。 - -类似的，hello.js把一个URL处理函数暴露出来： -``` -var fn_hello = async (ctx, next) => { - var name = ctx.params.name; - ctx.response.body = `Hello, ${name}!
`; -}; - -module.exports = { - 'GET /hello/:name': fn_hello -}; -``` -现在，我们修改app.js，让它自动扫描controllers目录，找到所有js文件，导入，然后注册每个URL： -``` -// 先导入fs模块，然后用readdirSync列出文件 -// 这里可以用sync是因为启动时只运行一次，不存在性能问题: -var files = fs.readdirSync(__dirname + '/controllers'); - -// 过滤出.js文件: -var js_files = files.filter((f)=>{ - return f.endsWith('.js'); -}); - -// 处理每个js文件: -for (var f of js_files) { - console.log(`process controller: ${f}...`); - // 导入js文件: - let mapping = require(__dirname + '/controllers/' + f); - for (var url in mapping) { - if (url.startsWith('GET ')) { - // 如果url类似"GET xxx": - var path = url.substring(4); - router.get(path, mapping[url]); - console.log(`register URL mapping: GET ${path}`); - } else if (url.startsWith('POST ')) { - // 如果url类似"POST xxx": - var path = url.substring(5); - router.post(path, mapping[url]); - console.log(`register URL mapping: POST ${path}`); - } else { - // 无效的URL: - console.log(`invalid URL: ${url}`); - } - } -} -``` - -如果上面的大段代码看起来还是有点费劲，那就把它拆成更小单元的函数： -``` -function addMapping(router, mapping) { - for (var url in mapping) { - if (url.startsWith('GET ')) { - var path = url.substring(4); - router.get(path, mapping[url]); - console.log(`register URL mapping: GET ${path}`); - } else if (url.startsWith('POST ')) { - var path = url.substring(5); - router.post(path, mapping[url]); - console.log(`register URL mapping: POST ${path}`); - } else { - console.log(`invalid URL: ${url}`); - } - } -} - -function addControllers(router) { - var files = fs.readdirSync(__dirname + '/controllers'); - var js_files = files.filter((f) => { - return f.endsWith('.js'); - }); - - for (var f of js_files) { - console.log(`process controller: ${f}...`); - let mapping = require(__dirname + '/controllers/' + f); - addMapping(router, mapping); - } -} - -addControllers(router); -``` - -确保每个函数功能非常简单，一眼能看明白，是代码可维护的关键。 - -## Controller Middleware -最后，我们把扫描controllers目录和创建router的代码从app.js中提取出来，作为一个简单的middleware使用，命名为controller.js： -``` -const fs = require('fs'); - -function addMapping(router, mapping) { - ... -} - -function addControllers(router, dir) { - ... -} - -module.exports = function (dir) { - let - controllers_dir = dir || 'controllers', // 如果不传参数，扫描目录默认为'controllers' - router = require('koa-router')(); - addControllers(router, controllers_dir); - return router.routes(); -}; -``` -这样一来，我们在app.js的代码又简化了： -``` -... - -// 导入controller middleware: -const controller = require('./controller'); - -... - -// 使用middleware: -app.use(controller()); - -... -``` -经过重新整理后的工程url2-koa目前具备非常好的模块化，所有处理URL的函数按功能组存放在controllers目录，今后我们也只需要不断往这个目录下加东西就可以了，app.js保持不变。 \ No newline at end of file diff --git "a/12\351\276\232\344\270\234\350\276\211/20230302-URL\345\244\204\347\220\206\350\257\267\346\261\202\345\222\214\351\241\271\347\233\256\351\207\215\346\236\204.md" "b/12\351\276\232\344\270\234\350\276\211/20230302-URL\345\244\204\347\220\206\350\257\267\346\261\202\345\222\214\351\241\271\347\233\256\351\207\215\346\236\204.md" deleted file mode 100644 index 49dec6f..0000000 --- "a/12\351\276\232\344\270\234\350\276\211/20230302-URL\345\244\204\347\220\206\350\257\267\346\261\202\345\222\214\351\241\271\347\233\256\351\207\215\346\236\204.md" +++ /dev/null @@ -1,140 +0,0 @@ -**Node.js**——**URL处理请求和项目重构** -=== -在一个**Node.js的web应用项目**里，**URL的处理**可以说是非常繁琐的，所以要去 *进行包装重构，这样能让代码更加简洁，逻辑更加清晰明了* ，创建一个文件夹去将这些不同页面访问URL处理进行封装成模块，只用去引用 - -一 .url的处理请求： ---- - -### 1 .http的请求方法： -+ URL处理，http的请求方法： - -| **方法**： | 描述： | -| ----------- | ------------------------------------------------------------ | -| **GET** | 请求指定的页面信息，并返回实体主体 | -| **HEAD** | 类似于 GET 请求，只不过返回的响应中没有具体的内容，用于获取报头 | -| **POST** | 向指定资源提交数据进行处理请求（例如提交表单或者上传文件）。数据被包含在请求体中。POST 请求可能会导致新的资源的建立和/或已有资源的修改 | -| **PUT** | 从客户端向服务器传送的数据取代指定的文档的内容 | -| **DELETE** | 请求服务器删除指定的页面 | -| **CONNECT** | HTTP/1.1 协议中预留给能够将连接改为管道方式的代理服务器 | -| **OPTIONS** | 允许客户端查看服务器的性能 | -| **TRACE** | 回显服务器收到的请求，主要用于测试或诊断 | -| **PATCH** | 是对 PUT 方法的补充，用来对已知资源进行局部更新 | - - > 常用的请求方法有**get、post、put、delete**这些请求,会常写这些请求的处理方法和模块 - -### 2 .对URL处理引用的模块: -+ 用Koa框架在对URL路由处理时，会引用到很多的模块 - > 会引用到的模块代码： - ```js - const - Koa = require('Koa'), - router = require('kao-router')(), - bodyParser = require('koa-bodyparser'); - fs = require('fs'); - ``` - > 这些模块的 - -二 .项目模块扫描重构： ---- -+ 我们把项目重构，很多模块都存放在一个文件夹下，包装好，所以在调用的时候，将他们都扫描一遍，不用再去一个一个的调用，也是为了减少代码的写入量 - - > 现在，我们修改**主程序js文件**让它自动**扫描controllers目录**，*找到所有js文件，导入，然后注册每个URL* ： - ```js - // 先导入fs模块，然后用readdirSync列出文件 - // 这里可以用sync是因为启动时只运行一次，不存在性能问题: - var files = fs.readdirSync(__dirname + '/controllers'); - // 过滤出.js文件: - var js_files = files.filter((f)=>{ - return f.endsWith('.js'); - }); - // 处理每个js文件: - for (var f of js_files) { - console.log(`process controller: ${f}...`); - // 导入js文件: - let mapping = require(__dirname + '/controllers/' + f); - for (var url in mapping) { - if (url.startsWith('GET ')) { - // 如果url类似"GET xxx": - var path = url.substring(4); - router.get(path, mapping[url]); - console.log(`register URL mapping: GET ${path}`); - } else if (url.startsWith('POST ')) { - // 如果url类似"POST xxx": - var path = url.substring(5); - router.post(path, mapping[url]); - console.log(`register URL mapping: POST ${path}`); - } else { - // 无效的URL: - console.log(`invalid URL: ${url}`); - } - } - } - ``` - > 如果上面的大段代码看起来还是有点费劲，那就把它拆成更小单元的函数： - ```js - function addMapping(router, mapping) { - for (var url in mapping) { - if (url.startsWith('GET ')) { - var path = url.substring(4); - router.get(path, mapping[url]); - console.log(`register URL mapping: GET ${path}`); - } else if (url.startsWith('POST ')) { - var path = url.substring(5); - router.post(path, mapping[url]); - console.log(`register URL mapping: POST ${path}`); - } else { - console.log(`invalid URL: ${url}`); - } - } - } - - function addControllers(router) { - var files = fs.readdirSync(__dirname + '/controllers'); - var js_files = files.filter((f) => { - return f.endsWith('.js'); - }); - - for (var f of js_files) { - console.log(`process controller: ${f}...`); - let mapping = require(__dirname + '/controllers/' + f); - addMapping(router, mapping); - } - } - - addControllers(router); - ``` - + 确保每个函数功能非常简单，一眼能看明白，是代码可维护的关键 - -三 .设置 Middleware ---- -将一些在**controllers目录和route要引入的模块封装好在一个模块中**，这样去减少主程序js文件中的繁琐代码 -+ 最后把扫描**controllers目录**和**创建router的代码**从 *入口js文件中提取出来，作为一个简单的middleware使用* ，命名为**index.js**存放在**controllers目录**： - ```js - const fs = require('fs'); - - function addMapping(router, mapping) { - ... - } - function addControllers(router, dir) { - ... - } - module.exports = function (dir) { - let - // 如果不传参数，扫描目录默认为'controllers' - controllers_dir = dir || 'controllers', - router = require('koa-router')(); - addControllers(router, controllers_dir); - return router.routes(); - }; - ``` - > 这样一来，我们在**主程序的js文件代码**就又简化了： - ```js - ... - // 导入controller middleware: - const controller = require('./controller'); - ... - // 使用middleware: - app.use(controller()); - ... - ``` -+ 经过重新整理后的项目具备非常好的模块化，所有**处理URL**的***函数按功能组存放在controllers目录，今后我们也只需要不断往这个目录下加东西就可以了，主程序的js文件保持不变*** \ No newline at end of file diff --git "a/12\351\276\232\344\270\234\350\276\211/20230303-\351\207\215\346\236\204.md" "b/12\351\276\232\344\270\234\350\276\211/20230303-\351\207\215\346\236\204.md" deleted file mode 100644 index a42640e..0000000 --- "a/12\351\276\232\344\270\234\350\276\211/20230303-\351\207\215\346\236\204.md" +++ /dev/null @@ -1,36 +0,0 @@ -## Controller Middleware -最后，我们把扫描controllers目录和创建router的代码从app.js中提取出来，作为一个简单的middleware使用，命名为controller.js： -``` -const fs = require('fs'); - -function addMapping(router, mapping) { - ... -} - -function addControllers(router, dir) { - ... -} - -module.exports = function (dir) { - let - controllers_dir = dir || 'controllers', // 如果不传参数，扫描目录默认为'controllers' - router = require('koa-router')(); - addControllers(router, controllers_dir); - return router.routes(); -}; -``` -这样一来，我们在app.js的代码又简化了： -``` -... - -// 导入controller middleware: -const controller = require('./controller'); - -... - -// 使用middleware: -app.use(controller()); - -... -``` -经过重新整理后的工程url2-koa目前具备非常好的模块化，所有处理URL的函数按功能组存放在controllers目录，今后我们也只需要不断往这个目录下加东西就可以了，app.js保持不变。 \ No newline at end of file diff --git "a/12\351\276\232\344\270\234\350\276\211/20230306-\351\207\215\346\236\204\344\274\230\345\214\226.md" "b/12\351\276\232\344\270\234\350\276\211/20230306-\351\207\215\346\236\204\344\274\230\345\214\226.md" deleted file mode 100644 index ea6a65d..0000000 --- "a/12\351\276\232\344\270\234\350\276\211/20230306-\351\207\215\346\236\204\344\274\230\345\214\226.md" +++ /dev/null @@ -1,129 +0,0 @@ -# 重构优化 - -简单来说就是新建一个工具文件，将可以复用的工具类代码放进去，看起来非常舒适 - -## 代码： - -### app.js -```js -'use strict' -const koa=require('koa'); -const controllers=require('./controllers') - -let app=new koa(); - -controllers(app); - -let port=5000 -app.listen(port) -console.log(`kk:http://localhost:${port}`); -``` - -### tools.js - -```js -'use strict' -const fs=require('fs'); - -//1.找到所有路由 -function findAllRouter(path) { - path=path||'./controllers'; - - let files=fs.readdirSync(path) - return files.filter( - item=>{ - return item!=='index.js' - } - ) - -} - -//遍历并注册路由 - -function resign(obj,router) { - for (const key in obj) { - let sp=key.split(' '); - let rou=sp[0]; - let url=sp[1]; - let ff=obj[key]; - if(rou=='get'){ - router.get(url,ff) - }else if(rou=='post'){ - router.post(url,ff) - }else if(rou=='put'){ - router.put(url,ff) - } - else if(rou=='delete'){ - router.delete(url,ff) - } - } - - ; -} - - -module.exports={ - findAllRouter,resign -} - -``` - - -### index.js -```js -'use strict' - -const router=require('koa-router')(); -const bodyparser=require('koa-bodyparser'); -const {findAllRouter,resign}=require('../utils/tools') - -function process(app) { - let files=findAllRouter(); - files.forEach( - item=>{ - let cons=require('../controllers/'+item.replace('.js','')) - resign(cons,router) - } - ) - app.use(router.routes()); - app.use(bodyparser()) -} - -module.exports=process - -``` - -### 还是各种数据.js - -重复太多只放一个 - -```js -'use strict' - -function getAll(ctx,next) { - ctx.body='1111'; -} -function getById(ctx,next) { - ctx.body='2222'; -} -function insertItem(ctx,next) { - -} -function updateById(ctx,next) { - -} -function deleteById(ctx,next) { - -} - - -module.exports={ - 'get /student':getAll, - 'get /student/:id':getById, - 'post /student':insertItem, - 'put /student/:id':updateById, - 'delete /student/:id':deleteById - -} - -``` \ No newline at end of file diff --git "a/12\351\276\232\344\270\234\350\276\211/20230307-\346\250\241\345\235\227\345\274\225\346\223\216.md" "b/12\351\276\232\344\270\234\350\276\211/20230307-\346\250\241\345\235\227\345\274\225\346\223\216.md" deleted file mode 100644 index c666e2b..0000000 --- "a/12\351\276\232\344\270\234\350\276\211/20230307-\346\250\241\345\235\227\345\274\225\346\223\216.md" +++ /dev/null @@ -1,214 +0,0 @@ -# 使用Nunjucks - -## Nunjucks -Nunjucks是什么东东？其实它是一个模板引擎。 - -那什么是模板引擎？ - -模板引擎就是基于模板配合数据构造出字符串输出的一个组件。比如下面的函数就是一个模板引擎： -``` -function examResult (data) { - return `${data.name}同学一年级期末考试语文${data.chinese}分，数学${data.math}分，位于年级第${data.ranking}名。` -} -``` -如果我们输入数据如下： -``` -examResult({ - name: '小明', - chinese: 78, - math: 87, - ranking: 999 -}); -``` -该模板引擎把模板字符串里面对应的变量替换以后，就可以得到以下输出： - -小明同学一年级期末考试语文78分，数学87分，位于年级第999名。 - -模板引擎最常见的输出就是输出网页，也就是HTML文本。当然，也可以输出任意格式的文本，比如Text，XML，Markdown等等。 - -有同学要问了：既然JavaScript的模板字符串可以实现模板功能，那为什么我们还需要另外的模板引擎？ - -因为JavaScript的模板字符串必须写在JavaScript代码中，要想写出新浪首页这样复杂的页面，是非常困难的。 - -输出HTML有几个特别重要的问题需要考虑： - -## 转义 -对特殊字符要转义，避免受到XSS攻击。比如，如果变量name的值不是小明，而是小明，模板引擎输出的HTML到了浏览器，就会自动执行恶意JavaScript代码。 - -## 格式化 -对不同类型的变量要格式化，比如，货币需要变成12,345.00这样的格式，日期需要变成2016-01-01这样的格式。 - -## 简单逻辑 -模板还需要能执行一些简单逻辑，比如，要按条件输出内容，需要if实现如下输出： -``` -{{ name }}同学， -{% if score >= 90 %} - 成绩优秀，应该奖励 -{% elif score >=60 %} - 成绩良好，继续努力 -{% else %} - 不及格，建议回家打屁股 -{% endif %} -``` -所以，我们需要一个功能强大的模板引擎，来完成页面输出的功能。 - -## Nunjucks -我们选择Nunjucks作为模板引擎。Nunjucks是Mozilla开发的一个纯JavaScript编写的模板引擎，既可以用在Node环境下，又可以运行在浏览器端。但是，主要还是运行在Node环境下，因为浏览器端有更好的模板解决方案，例如MVVM框架。 - -如果你使用过Python的模板引擎jinja2，那么使用Nunjucks就非常简单，两者的语法几乎是一模一样的，因为Nunjucks就是用JavaScript重新实现了jinjia2。 - -从上面的例子我们可以看到，虽然模板引擎内部可能非常复杂，但是使用一个模板引擎是非常简单的，因为本质上我们只需要构造这样一个函数： -``` -function render(view, model) { - // TODO:... -} -``` -其中，view是模板的名称（又称为视图），因为可能存在多个模板，需要选择其中一个。model就是数据，在JavaScript中，它就是一个简单的Object。render函数返回一个字符串，就是模板的输出。 - -下面我们来使用Nunjucks这个模板引擎来编写几个HTML模板，并且用实际数据来渲染模板并获得最终的HTML输出。 - -我们创建一个use-nunjucks的VS Code工程结构如下： -``` -use-nunjucks/ -| -+- .vscode/ -| | -| +- launch.json <-- VSCode 配置文件 -| -+- views/ -| | -| +- hello.html <-- HTML模板文件 -| -+- app.js <-- 入口js -| -+- package.json <-- 项目描述文件 -| -+- node_modules/ <-- npm安装的所有依赖包 -``` -其中，模板文件存放在views目录中。 - -我们先在package.json中添加nunjucks的依赖： -``` -"nunjucks": "2.4.2" -``` -注意，模板引擎是可以独立使用的，并不需要依赖koa。用npm install安装所有依赖包。 - -紧接着，我们要编写使用Nunjucks的函数render。怎么写？方法是查看Nunjucks的官方文档，仔细阅读后，在app.js中编写代码如下： -``` -const nunjucks = require('nunjucks'); - -function createEnv(path, opts) { - var - autoescape = opts.autoescape === undefined ? true : opts.autoescape, - noCache = opts.noCache || false, - watch = opts.watch || false, - throwOnUndefined = opts.throwOnUndefined || false, - env = new nunjucks.Environment( - new nunjucks.FileSystemLoader('views', { - noCache: noCache, - watch: watch, - }), { - autoescape: autoescape, - throwOnUndefined: throwOnUndefined - }); - if (opts.filters) { - for (var f in opts.filters) { - env.addFilter(f, opts.filters[f]); - } - } - return env; -} - -var env = createEnv('views', { - watch: true, - filters: { - hex: function (n) { - return '0x' + n.toString(16); - } - } -}); -``` -变量env就表示Nunjucks模板引擎对象，它有一个`render(view, model)`方法，正好传入view和model两个参数，并返回字符串。 - -创建env需要的参数可以查看文档获知。我们用autoescape = opts.autoescape && true这样的代码给每个参数加上默认值，最后使用`new nunjucks.FileSystemLoader('views')`创建一个文件系统加载器，从views目录读取模板。 - -我们编写一个`hello.html`模板文件，放到views目录下，内容如下： -``` -Hello {{ name }}
-``` -然后，我们就可以用下面的代码来渲染这个模板： -``` -var s = env.render('hello.html', { name: '小明' }); -console.log(s); -``` -获得输出如下： -``` -Hello 小明
-``` -咋一看，这和使用JavaScript模板字符串没啥区别嘛。不过，试试： -``` -var s = env.render('hello.html', { name: '' }); -console.log(s); -``` -获得输出如下： -``` -Hello <script>alert("小明")</script>
-``` -这样就避免了输出恶意脚本。 - -此外，可以使用Nunjucks提供的功能强大的tag，编写条件判断、循环等功能，例如： -``` - - -Fruits List
- {% for f in fruits %} -{{ f }}
- {% endfor %} - -``` -Nunjucks模板引擎最强大的功能在于模板的继承。仔细观察各种网站可以发现，网站的结构实际上是类似的，头部、尾部都是固定格式，只有中间页面部分内容不同。如果每个模板都重复头尾，一旦要修改头部或尾部，那就需要改动所有模板。 - -更好的方式是使用继承。先定义一个基本的网页框架base.html： -``` - -{% block header %}Unnamed
{% endblock %} -{% block body %}No body
{% endblock %}
-{% block footer %} copyright
{% endblock %}
-
-
-```
-base.html定义了三个可编辑的块，分别命名为header、body和footer。子模板可以有选择地对块进行重新定义：
-```
-{% extends 'base.html' %}
-
-{% block header %}{{ header }}
{% endblock %} - -{% block body %}{{ body }}
{% endblock %} -``` -然后，我们对子模板进行渲染： -``` -console.log(env.render('extend.html', { - header: 'Hello', - body: 'bla bla bla...' -})); -``` -输出HTML如下： -``` - -Hello
-bla bla bla...
-copyright
<-- footer没有重定义，所以仍使用父模板的内容
-
-```
-## 性能
-最后我们要考虑一下Nunjucks的性能。
-
-对于模板渲染本身来说，速度是非常非常快的，因为就是拼字符串嘛，纯CPU操作。
-
-性能问题主要出现在从文件读取模板内容这一步。这是一个IO操作，在Node.js环境中，我们知道，单线程的JavaScript最不能忍受的就是同步IO，但Nunjucks默认就使用同步IO读取模板文件。
-
-好消息是Nunjucks会缓存已读取的文件内容，也就是说，模板文件最多读取一次，就会放在内存中，后面的请求是不会再次读取文件的，只要我们指定了noCache: false这个参数。
-
-在开发环境下，可以关闭cache，这样每次重新加载模板，便于实时修改模板。在生产环境下，一定要打开cache，这样就不会有性能问题。
-
-Nunjucks也提供了异步读取的方式，但是这样写起来很麻烦，有简单的写法我们就不会考虑复杂的写法。保持代码简单是可维护性的关键。
\ No newline at end of file
diff --git "a/12\351\276\232\344\270\234\350\276\211/20230309-MVC.md" "b/12\351\276\232\344\270\234\350\276\211/20230309-MVC.md"
deleted file mode 100644
index 2dccca0..0000000
--- "a/12\351\276\232\344\270\234\350\276\211/20230309-MVC.md"
+++ /dev/null
@@ -1,327 +0,0 @@
-# 使用MVC
-
-## MVC
-我们已经可以用koa处理不同的URL，还可以用Nunjucks渲染模板。现在，是时候把这两者结合起来了！
-
-当用户通过浏览器请求一个URL时，koa将调用某个异步函数处理该URL。在这个异步函数内部，我们用一行代码：
-```
-ctx.render('home.html', { name: 'Michael' });
-```
-通过Nunjucks把数据用指定的模板渲染成HTML，然后输出给浏览器，用户就可以看到渲染后的页面了：
-
-## mvc
-
-这就是传说中的MVC：Model-View-Controller，中文名“模型-视图-控制器”。
-
-异步函数是C：Controller，Controller负责业务逻辑，比如检查用户名是否存在，取出用户信息等等；
-
-包含变量{{ name }}的模板就是V：View，View负责显示逻辑，通过简单地替换一些变量，View最终输出的就是用户看到的HTML。
-
-MVC中的Model在哪？Model是用来传给View的，这样View在替换变量的时候，就可以从Model中取出相应的数据。
-
-上面的例子中，Model就是一个JavaScript对象：
-```
-{ name: 'Michael' }
-```
-下面，我们根据原来的url2-koa创建工程view-koa，把koa2、Nunjucks整合起来，然后，把原来直接输出字符串的方式，改为ctx.render(view, model)的方式。
-
-工程view-koa结构如下：
-```
-view-koa/
-|
-+- .vscode/
-| |
-| +- launch.json <-- VSCode 配置文件
-|
-+- controllers/ <-- Controller
-|
-+- views/ <-- html模板文件
-|
-+- static/ <-- 静态资源文件
-|
-+- controller.js <-- 扫描注册Controller
-|
-+- app.js <-- 使用koa的js
-|
-+- package.json <-- 项目描述文件
-|
-+- node_modules/ <-- npm安装的所有依赖包
-```
-在package.json中，我们将要用到的依赖包有：
-```
-"koa": "2.0.0",
-"koa-bodyparser": "3.2.0",
-"koa-router": "7.0.0",
-"nunjucks": "2.4.2",
-"mime": "1.3.4",
-"mz": "2.4.0"
-```
-先用npm install安装依赖包。
-
-然后，我们准备编写以下两个Controller：
-
-1. 处理首页 GET /
-
-我们定义一个async函数处理首页URL/：
-```
-async (ctx, next) => {
- ctx.render('index.html', {
- title: 'Welcome'
- });
-}
-```
-注意到koa并没有在ctx对象上提供render方法，这里我们假设应该这么使用，这样，我们在编写Controller的时候，最后一步调用ctx.render(view, model)就完成了页面输出。
-
-2. 处理登录请求 POST /signin
-我们再定义一个async函数处理登录请求/signin：
-```
-async (ctx, next) => {
- var
- email = ctx.request.body.email || '',
- password = ctx.request.body.password || '';
- if (email === 'admin@example.com' && password === '123456') {
- // 登录成功:
- ctx.render('signin-ok.html', {
- title: 'Sign In OK',
- name: 'Mr Node'
- });
- } else {
- // 登录失败:
- ctx.render('signin-failed.html', {
- title: 'Sign In Failed'
- });
- }
-}
-```
-由于登录请求是一个POST，我们就用ctx.request.body.Hello world!
'); -}); - -// 让服务器监听8080端口: -server.listen(8080); - -console.log('Server is running at http://127.0.0.1:8080/'); -``` -在命令提示符下运行该程序，可以看到以下输出： -``` -$ node hello.js -Server is running at http://127.0.0.1:8080/ -``` -不要关闭命令提示符，直接打开浏览器输入http://localhost:8080，即可看到服务器响应的内容 - -同时，在命令提示符窗口，可以看到程序打印的请求信息： -``` -GET: / -GET: /favicon.ico -``` - - -# 网站 - - \ No newline at end of file diff --git "a/03\350\214\203\345\217\266\345\205\260/2023-02-20 http\346\226\207\344\273\266\346\234\215\345\212\241\345\231\250.md" "b/03\350\214\203\345\217\266\345\205\260/2023-02-20 http\346\226\207\344\273\266\346\234\215\345\212\241\345\231\250.md" deleted file mode 100644 index dfb50b8..0000000 --- "a/03\350\214\203\345\217\266\345\205\260/2023-02-20 http\346\226\207\344\273\266\346\234\215\345\212\241\345\231\250.md" +++ /dev/null @@ -1,99 +0,0 @@ -# 文件服务器 - -让我们继续扩展一下上面的Web程序。我们可以设定一个目录，然后让Web程序变成一个文件服务器。要实现这一点，我们只需要解析request.url中的路径，然后在本地找到对应的文件，把文件内容发送出去就可以了。 - -解析URL需要用到Node.js提供的url模块，它使用起来非常简单，通过parse()将一个字符串解析为一个Url对象： -``` -'use strict'; - -var url = require('url'); - -console.log(url.parse('http://user:pass@host.com:8080/path/to/file?query=string#hash')); -``` -结果如下： -``` -Url { - protocol: 'http:', - slashes: true, - auth: 'user:pass', - host: 'host.com:8080', - port: '8080', - hostname: 'host.com', - hash: '#hash', - search: '?query=string', - query: 'query=string', - pathname: '/path/to/file', - path: '/path/to/file?query=string', - href: 'http://user:pass@host.com:8080/path/to/file?query=string#hash' } -``` -处理本地文件目录需要使用Node.js提供的path模块，它可以方便地构造目录： -``` -'use strict'; - -var path = require('path'); - -// 解析当前目录: -var workDir = path.resolve('.'); // '/Users/michael' - -// 组合完整的文件路径:当前目录+'pub'+'index.html': -var filePath = path.join(workDir, 'pub', 'index.html'); -// '/Users/michael/pub/index.html' -``` -使用path模块可以正确处理操作系统相关的文件路径。在Windows系统下，返回的路径类似于C:\Users\michael\static\index.html，这样，我们就不关心怎么拼接路径了。 - -最后，我们实现一个文件服务器file_server.js： -``` -'use strict'; - -var - fs = require('fs'), - url = require('url'), - path = require('path'), - http = require('http'); - -// 从命令行参数获取root目录，默认是当前目录: -var root = path.resolve(process.argv[2] || '.'); - -console.log('Static root dir: ' + root); - -// 创建服务器: -var server = http.createServer(function (request, response) { - // 获得URL的path，类似 '/css/bootstrap.css': - var pathname = url.parse(request.url).pathname; - // 获得对应的本地文件路径，类似 '/srv/www/css/bootstrap.css': - var filepath = path.join(root, pathname); - // 获取文件状态: - fs.stat(filepath, function (err, stats) { - if (!err && stats.isFile()) { - // 没有出错并且文件存在: - console.log('200 ' + request.url); - // 发送200响应: - response.writeHead(200); - // 将文件流导向response: - fs.createReadStream(filepath).pipe(response); - } else { - // 出错了或者文件不存在: - console.log('404 ' + request.url); - // 发送404响应: - response.writeHead(404); - response.end('404 Not Found'); - } - }); -}); - -server.listen(8080); - -console.log('Server is running at http://127.0.0.1:8080/'); -``` -没有必要手动读取文件内容。由于response对象本身是一个Writable Stream，直接用pipe()方法就实现了自动读取文件内容并输出到HTTP响应。 - -在命令行运行node file_server.js /path/to/dir，把/path/to/dir改成你本地的一个有效的目录，然后在浏览器中输入http://localhost:8080/index.html： - -只要当前目录下存在文件index.html，服务器就可以把文件内容发送给浏览器。观察控制台输出： -``` -200 /index.html -200 /css/uikit.min.css -200 /js/jquery.min.js -200 /fonts/fontawesome-webfont.woff2 -``` -第一个请求是浏览器请求index.html页面，后续请求是浏览器解析HTML后发送的其它资源请求。 diff --git "a/03\350\214\203\345\217\266\345\205\260/2023-02-21 \347\273\203\344\271\240.md" "b/03\350\214\203\345\217\266\345\205\260/2023-02-21 \347\273\203\344\271\240.md" deleted file mode 100644 index 6e6cdd5..0000000 --- "a/03\350\214\203\345\217\266\345\205\260/2023-02-21 \347\273\203\344\271\240.md" +++ /dev/null @@ -1,74 +0,0 @@ -# 练习 - -在浏览器输入http://localhost:8080/时，会返回404，原因是程序识别出HTTP请求的不是文件，而是目录。请修改file_server.js，如果遇到请求的路径是目录，则自动在目录下依次搜索index.html、default.html，如果找到了，就返回HTML文件的内容。 - -```javascript -'use strict' - -let http = require('http') // 导入模块 -let fs = require('fs') //文件模块 -//创建服务器 -let server = http.createServer((req,res)=>{ - // 获取url路径 localhost：8080/{url} - let url = req.url; - // /url -> url - url = url.substring(1,url.length); - //查看url文件状态 - fs.stat(url,(err,stat)=>{ - // 访问 localhost:8080 - if(url=="") { - res.end("welcome!"); - }else if(err) {//未找到文件 - res.end("not find "); - return; - }else if(stat.isDirectory()){//不为空，并且有找到文件判断是否为目录 - //在目录下依次搜索index.html、default.html - fs.readdir(url,(err,files)=>{//read dir - let flag = true; - //查询有没有index.html - files.map(x=>{ - let path; - if(x=="index.html"){ - path = `./${url}/${x}`; - fs.readFile(path,"utf-8",(err,data)=>{ - res.end(data);//结束数据 - }); - flag=false; //找到index.html，未找到默认为true - return; - } - }); - //查询default.html - if(flag){ - let flag = true; - files.map(x=>{ - let path; - if(x=="default.html"){ - path = `./${url}/${x}`; - fs.readFile(path,"utf-8",(err,data)=>{ - res.end(data); - }); - flag = false;//找到default.html - return; - } - }); - //未找到文件 - if(flag){ - res.end("404_Not_find") - } - } - }); - return; - } - //不是目录 - fs.readFile(url,(err,data)=>{ - if(err){ - res.end("404"); - return; - } - res.end(data); - }) - }) -}); -server.listen("8080"); -``` - \ No newline at end of file diff --git "a/03\350\214\203\345\217\266\345\205\260/2023-02-23 promise async await .md" "b/03\350\214\203\345\217\266\345\205\260/2023-02-23 promise async await .md" deleted file mode 100644 index 549868b..0000000 --- "a/03\350\214\203\345\217\266\345\205\260/2023-02-23 promise async await .md" +++ /dev/null @@ -1,354 +0,0 @@ -# promise用来做什么？ - -我们的需求是一次的去执行异步代码 - -我们的做法是在异步请求成功后的回调函数里，执行下一个异步请求 - -但是这样就出现了回调地狱（回调函数中嵌套了回调函数，代码的阅读性 低，维护不变，让人看着害怕） - -promise就是用来解决回调地狱的 - - 回调地狱示例： - -```js - -// 需求：一次的读取a,b,c这三个文件 -const fs = require("fs"); - -// 读a文件 -fs.readFile(`${__dirname}/etc/a.txt`, "utf-8", (err, data) => { - if (err) { - console.log(err); - } else { - console.log(data); - // 读b文件 - fs.readFile(`${__dirname}/etc/b.txt`, "utf-8", (err, data) => { - if (err) { - console.log(err); - } else { - console.log(data); - // 读c文件 - fs.readFile(`${__dirname}/etc/c.txt`, "utf-8", (err, data) => { - if (err) { - console.log(err); - } else { - console.log(data); - } - }); - } - }); - } -}); - - ``` - -# promise工作流程 - -es6的语法，es6.ruanyifeng.com - -Promise对象是一个构造函数 ，用来生成promise实例 - -Promise构造函数接受一个函数作为参数 - -这个作为参数的函数，又有两个参数，这两个参数分别是resolve和reject - -这两个参数它们也是函数，只不过这两个函数由 javascript 引擎提供，不用自己部署 - -异步操作成功后调用resolve()方法，他内部调用了then()里面的第一个参数函数 - -异步操作成功后调用reject()方法，他内部调用了then()里面的第二个参数函数. - -```js -const fs = require("fs"); -// 调用Promise构造函数，创建一个promise的实例 -let p = new Promise((resolve, reject) => { - // 写异步操作（读文件） - fs.readFile(`${__dirname}/etc/a.txt`, "utf-8", (err, data) => { - if (!err) { - // 操作成功（读文件成功） - resolve(data); // 调用resolve方法 - // 调用then()里面的第一个参数函数 - } else { - reject(err); // 调用reject方法 - // 调用then()里面的第二个参数函数 - } - }); -}); - -p.then( - (data) => { - console.log(data); - }, - (err) => { - console.log(err); - } -); - -``` - -# promise原理 - -Promise对象代表一个异步操作. - -有三种状态: pending (进行中)、fulfilled (已成功)和rejected (已失败) - -Promise对象的状态改变，只有两种可能:从pending变 为fulfilled和从pending变为rejected。 - -只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态 - -如果异步操作成功了(读文件成功了),从pending (进行中)变为 fulfilled (已成功) ; - -如果异步操作失败了(读文件失败了),从pending (进行中)变为 rejected (已失败) ; - -状态如果已经确定了， 就不会再去改变这个状态了 - -# promise特点及其封装 - -Promise新建后就会立即执行 - -所以不要在promise里面写其他的代码，只写这个异步操作的代码就可以了 - -```js -const fs = require("fs"); -function getPromise(filename) { - // 调用Promise构造函数，创建一个promise的实例 - return new Promise((resolve, reject) => { - // 写异步操作（读文件） - fs.readFile(`${__dirname}/etc/${filename}.txt`, "utf-8", (err, data) => { - if (!err) { - // 操作成功（读文件成功） - resolve(data); // 调用resolve方法 - // 调用then()里面的第一个参数函数 - } else { - reject(err); // 调用reject方法 - // 调用then()里面的第二个参数函数 - } - }); - }); -} - -// console.log(getPromise("a")); -getPromise("a").then( - (data) => { - console.log(data); - }, - (err) => { - console.log(err); - } -); -``` - -# promise正确写法 - -+ promise如何解决回调地狱 - - + 链式编程解决 - - + 我们用promise解决的问题：让异步操作有顺序，并且不能有回调地狱 - -让异步操作有顺序本质是： - -异步操作实际上是没有顺序的 - -在异步操作成功后的回调函数里返回另外的promise,调用他的then方法 - -```js -const fs = require("fs"); -function getPromise(filename) { - // 调用Promise构造函数，创建一个promise的实例 - return new Promise((resolve, reject) => { - // 写异步操作（读文件） - fs.readFile(`${__dirname}/etc/${filename}.txt`, "utf-8", (err, data) => { - if (!err) { - // 操作成功（读文件成功） - resolve(data); // 调用resolve方法 - // 调用then()里面的第一个参数函数 - } else { - reject(err); // 调用reject方法 - // 调用then()里面的第二个参数函数 - } - }); - }); -} - -// console.log(getPromise("a")); -getPromise("a") - .then((data) => { - console.log(data); - //调用函数得到一个读b文件的promise对象并返回 - return getPromise("b"); - }) - .then((data) => { - console.log(data); - //调用函数得到一个读c文件的promise对象并返回 - return getPromise("c"); - }) - .then((data) => { - console.log(data); - }); -``` - -# promise的其他方法 - -+ catch() - - 能够抓取错误的 -```js - const fs = require("fs"); - function getPromise(filename) { - // 调用Promise构造函数，创建一个promise的实例 - return new Promise((resolve, reject) => { - // 写异步操作（读文件） - fs.readFile(`${__dirname}/etc/${filename}.txt`, "utf-8", (err, data) => { - if (!err) { - // 操作成功（读文件成功） - resolve(data); // 调用resolve方法 - // 调用then()里面的第一个参数函数 - } else { - reject(err); // 调用reject方法 - // 调用then()里面的第二个参数函数 - } - }); - }); - } - - // console.log(getPromise("a")); - getPromise("a") - .then((data) => { - console.log(data); - //调用函数得到一个读b文件的promise对象并返回 - return getPromise("b"); - }) - .then((data) => { - console.log(data); - //调用函数得到一个读c文件的promise对象并返回 - return getPromise("c"); - }) - .then((data) => { - console.log(data); - }) - .catch((err) => { - console.log(err); - }); -``` - -+ all() - -```js - const fs = require("fs"); - function getPromise(filename) { - // 调用Promise构造函数，创建一个promise的实例 - return new Promise((resolve, reject) => { - // 写异步操作（读文件） - fs.readFile(`${__dirname}/etc/${filename}.txt`, "utf-8", (err, data) => { - if (!err) { - // 操作成功（读文件成功） - resolve(data); // 调用resolve方法 - // 调用then()里面的第一个参数函数 - } else { - reject(err); // 调用reject方法 - // 调用then()里面的第二个参数函数 - } - }); - }); - } - - let p1 = getPromise("a"); - let p2 = getPromise("b"); - let p3 = getPromise("c"); - - // Promise.all()方法用于将多个 Promise 实例，包装成一个新的 Promise 实例 - let pAll = Promise.all([p1, p2, p3]); - // 一个都不能少，每一个promise都要读取成功才会成功，相当于是并且 - pAll.then((data) => { - console.log(data); - }); -``` - -+ race -```js - const fs = require("fs"); - function getPromise(filename) { - // 调用Promise构造函数，创建一个promise的实例 - return new Promise((resolve, reject) => { - // 写异步操作（读文件） - fs.readFile(`${__dirname}/etc/${filename}.txt`, "utf-8", (err, data) => { - if (!err) { - // 操作成功（读文件成功） - resolve(data); // 调用resolve方法 - // 调用then()里面的第一个参数函数 - } else { - reject(err); // 调用reject方法 - // 调用then()里面的第二个参数函数 - } - }); - }); - } - - let p1 = getPromise("a"); - let p2 = getPromise("b"); - let p3 = getPromise("c"); - - // Promise.race()方法同样是将多个 Promise 实例，包装成一个新的 Promise 实例 - let pRace = Promise.race([p1, p2, p3]); - // 只要有一个promise执行成功，那这个pRace就成功，相当于是或者 - pRace.then((data) => { - console.log(data); - }); -``` -# 什么是async/await - - async/await是es7推出的一套关于异步的终极解决方案;主要作用就是转异步为同步。 - -# async/await语法格式 - -```js -//可写一个函数返回的是异步的promise对象,也可以定义一个异步函数； - function fn(){ - return new Promise((resolve,reject)=>{ - resolve(666) - }) - } - let p1=new Promise((n1,n2)=>{ //也可以直接写一个promise对象 - n1(999) - }) - // 在需要使用上面异步函数的函数前面，加上async声明，声明这是一个异步函数 - async function fn2(){ - // 在异步函数前面加上await，函数执行就会等待用await声明的异步函数执行完毕之后，在往下执行 - let a1=await fn() - let p=await p1 - console.log(a1,p) - } - fn2() -``` - -注意：async/await不能捕获错误，可以使用try/catch来进行错误的捕获 - -```js - function fn() { - return new Promise((resolve, reject) => { - resolve(666) - }) - } - let p1 = new Promise((n1, n2) => { - n1(999) - }) - async function fn2() { - try { - let a1 = await fn() - let p = await p1 - console.log(a1, p) - } catch (err) { - console.log(err) - } - } - fn2() -``` - -# 小结： - -+ 1.async函数在声明形式上和普通函数没有区别，函数声明式，函数表达式，对象方法，class方法和箭头函数等都可以声明async函数。 - -+ 2.任何一个await语句后面的 Promise 对象变为reject状态，那么整个async函数都会中断执行。 - -+ 3.async函数返回的 Promise 对象，必须等到内部所有await命令后面的 Promise 对象执行完，才会发生状态改变，除非遇到return语句或者抛出错误。也就是说，只有async函数内部的异步操作执行完，才会执行then方法指定的回调函数。 diff --git "a/03\350\214\203\345\217\266\345\205\260/2023-02-24 koa.md" "b/03\350\214\203\345\217\266\345\205\260/2023-02-24 koa.md" deleted file mode 100644 index 3e834f7..0000000 --- "a/03\350\214\203\345\217\266\345\205\260/2023-02-24 koa.md" +++ /dev/null @@ -1,92 +0,0 @@ -# 一、koa是什么？ - ## 1) koa定义： - koa是一个基于node实现的一个新的轻量级web框架，它是由express框架的原 班人马打造的。 - ## 2）特点： - (1）免除重复繁琐的回调函数嵌套，提高错误处理效率 - (2) 独特的中间件流程控制 - (3) 典型洋葱模型 - ## 3）优点 ： - 简洁 ， 表达力强， 自由度高 - ## 4）适用场景： -# 二、使用步骤 -## 1. 使用前提条件 - - Koa需要 node v7.6.0或更高版本 - -## 2. 搭建初始项目结构 -### 1>安装依赖 -```js - // 初始化项目会生成package.json和node_modules - npm init - - // 安装koa - npm install --save koa -``` -### 2> 在根目录下，创建app.js 并全局配 -```js - // 引入koa - const koa = require("koa") - const app = new koa() - - - //渲染页面 - // ctx 是 context的简写 , 包含respose 和 request - app.use((ctx)=>{ - ctx.body = "hello world" - }) - - - // 监听 - app.listen("8888", ()=>{ - console.log(" koa服务启动 ") - }) - - - /** - - 在终端运行: node app.js 后，会打印出 “koa服务启动” ,在浏览器输入 localhost：8888 , - 就会显示 hello world - - **/ -``` -### 3> 文件会生成： - - - -## 3. 添加路由 -```js - // 安装依赖 koa-router 或者 @koa/router - npm install koa-router - - - // 实例化路由 - const Router = require("koa-router") - const router = new Router() - - - // 设置首页路由 - router.get("/",async (ctx)=>{ - ctx.body = "首页" - }) - - - // 全局配置 - app.use(router.routes(), router.allowedMethods()) - ``` - - -## 4. 安装热更新nodemon -```js - // 安装依赖 - // nodemon必须全局安装 ,否则会报错 - npm install nodemon -g - - - *// 可在package.json中找到"scripts",配置项目启动命令npm run dev： - - "scripts": { - "test": "echo \"Error: no test specified\" && exit 1", - "dev":"nodemon app.js" - }, - -``` diff --git "a/03\350\214\203\345\217\266\345\205\260/2023-02-27 middleware \345\244\204\347\220\206url.md" "b/03\350\214\203\345\217\266\345\205\260/2023-02-27 middleware \345\244\204\347\220\206url.md" deleted file mode 100644 index fa0091d..0000000 --- "a/03\350\214\203\345\217\266\345\205\260/2023-02-27 middleware \345\244\204\347\220\206url.md" +++ /dev/null @@ -1,83 +0,0 @@ -# koa middleware - -核心代码是： - -```js -app.use(async (ctx, next) => { - await next(); - ctx.response.type = 'text/html'; - ctx.response.body = 'Hello, koa2!
'; -}); -``` -每收到一个http请求，koa就会调用通过app.use()注册的async函数，并传入ctx和next参数。 - -我们可以对ctx操作，并设置返回内容。但是为什么要调用await next()？ - -原因是koa把很多async函数组成一个处理链，每个async函数都可以做一些自己的事情，然后用await next()来调用下一个async函数。我们把每个async函数称为middleware，这些middleware可以组合起来，完成很多有用的功能。 - -middleware的顺序很重要，也就是调用app.use()的顺序决定了middleware的顺序。 - -此外，如果一个middleware没有调用await next()，会怎么办？答案是后续的middleware将不再执行了。这种情况也很常见. - -# 处理URL - -## koa-router -为了处理URL，我们需要引入koa-router这个middleware，让它负责处理URL映射。 - -我们把上一节的hello-koa工程复制一份，重命名为url-koa。 - -先在package.json中添加依赖项： -``` -"koa-router": "7.0.0" -``` -然后用npm install安装。 - -接下来，我们修改app.js，使用koa-router来处理URL： -```js -const Koa = require('koa'); - -// 注意require('koa-router')返回的是函数: -const router = require('koa-router')(); - -const app = new Koa(); - -// log request URL: -app.use(async (ctx, next) => { - console.log(`Process ${ctx.request.method} ${ctx.request.url}...`); - await next(); -}); - -// add url-route: -router.get('/hello/:name', async (ctx, next) => { - var name = ctx.params.name; - ctx.response.body = `Hello, ${name}!
`; -}); - -router.get('/', async (ctx, next) => { - ctx.response.body = 'Index
'; -}); - -// add router middleware: -app.use(router.routes()); - -app.listen(3000); -console.log('app started at port 3000...'); -``` -注意导入koa-router的语句最后的()是函数调用： -``` -const router = require('koa-router')(); -``` -相当于： -``` -const fn_router = require('koa-router'); -const router = fn_router(); -``` -然后，我们使用router.get('/path', async fn)来注册一个GET请求。可以在请求路径中使用带变量的/hello/:name，变量可以通过ctx.params.name访问。 - -再运行app.js，我们就可以测试不同的URL： -``` -输入首页：http://localhost:3000/ -``` -``` -输入：http://localhost:3000/hello/koa -``` \ No newline at end of file diff --git "a/03\350\214\203\345\217\266\345\205\260/2023-02-28 \345\244\204\347\220\206post\350\257\267\346\261\202.md" "b/03\350\214\203\345\217\266\345\205\260/2023-02-28 \345\244\204\347\220\206post\350\257\267\346\261\202.md" deleted file mode 100644 index cdab559..0000000 --- "a/03\350\214\203\345\217\266\345\205\260/2023-02-28 \345\244\204\347\220\206post\350\257\267\346\261\202.md" +++ /dev/null @@ -1,52 +0,0 @@ -# 处理post请求 -用router.get('/path', async fn)处理的是get请求。如果要处理post请求，可以用router.post('/path', async fn)。 - -用post请求处理URL时，我们会遇到一个问题：post请求通常会发送一个表单，或者JSON，它作为request的body发送，但无论是Node.js提供的原始request对象，还是koa提供的request对象，都不提供解析request的body的功能！ - -所以，我们又需要引入另一个middleware来解析原始request请求，然后，把解析后的参数，绑定到ctx.request.body中。 - -koa-bodyparser就是用来干这个活的。 - -我们在package.json中添加依赖项： -``` -"koa-bodyparser": "3.2.0" -``` -然后使用npm install安装。 - -下面，修改app.js，引入koa-bodyparser： -``` -const bodyParser = require('koa-bodyparser'); -``` -在合适的位置加上： -``` -app.use(bodyParser()); -``` -由于middleware的顺序很重要，这个koa-bodyparser必须在router之前被注册到app对象上。 - -现在我们就可以处理post请求了。写一个简单的登录表单： -```js -router.get('/', async (ctx, next) => { - ctx.response.body = `Index
- `; -}); - -router.post('/signin', async (ctx, next) => { - var - name = ctx.request.body.name || '', - password = ctx.request.body.password || ''; - console.log(`signin with name: ${name}, password: ${password}`); - if (name === 'koa' && password === '12345') { - ctx.response.body = `Welcome, ${name}!
`; - } else { - ctx.response.body = `Login failed!
- `; - } -}); -``` -注意到我们用var name = ctx.request.body.name || ''拿到表单的name字段，如果该字段不存在，默认值设置为''。 - -类似的，put、delete、head请求也可以由router处理。 diff --git "a/03\350\214\203\345\217\266\345\205\260/2023-03-02 \351\207\215\346\236\204\350\267\257\347\224\261\345\212\237\350\203\275\302\267.md" "b/03\350\214\203\345\217\266\345\205\260/2023-03-02 \351\207\215\346\236\204\350\267\257\347\224\261\345\212\237\350\203\275\302\267.md" deleted file mode 100644 index c0ab377..0000000 --- "a/03\350\214\203\345\217\266\345\205\260/2023-03-02 \351\207\215\346\236\204\350\267\257\347\224\261\345\212\237\350\203\275\302\267.md" +++ /dev/null @@ -1,73 +0,0 @@ -# 重构路由功能 - -实现路由功能： -```js -//server.js -var http = require('http') //输入node.js核心模块 - -function startServer(route){ - var onRequest = function(req,res) { - route(req.url) //传入请求的路径 - } - var server = http.createServer(onRequest) -server.listen(3000) //监听一个端口 -} - -module.exports.startServer = startServer; //输出模块 -``` -我们新建一个server.js模块，在这个模块中，我们定义了一个startServer函数，这个函数监听了一个3000端口，函数执行的时候调用route方法。我们先将这个模块输出 -```js -//index.js -var server = require("./server"); //输入./server模块 -var router = require('./router'); //输入./router模块 -var handler = require("./handler") //输入./handler模块 -var handle = {}; -handle["/"] = handler.home; -handle["/home"] = handler.home; -handle["/list"] = handler.list; -handle["/add"] = handler.add -server.startServer(router.route,handle) -``` -route()接收到了请求路径，我们希望它接收到不同的路径会调用不同的方法，因此我们可以先把要执行的方法作为属性值传给一个handle对象，它的键就等于route接收到的请求路径。于是我们分别把创建route.js和handler.js，在index.js中把请求路径和handle对象传给route函数 -```js - //server.js -var http = require('http') //引入node.js核心模块 - -function startServer(route,handle){ -var onRequest = function(req,res) { -route(req.url,handle,res) //传入请求的路径 -} -var server = http.createServer(onRequest) -server.listen(3000) //监听一个端口 -} -module.exports.startServer = startServer; //输出模块 - - -//route.js -function route(pathname,handle，res){ - if(typeof handle[pathname] == "function"){ - handle[pathname](res) - }else{ - res.end("404:connot find anything") //未匹配到路径的时候，响应“404”页面 - } -} -module.exports.route = route; - - -//handler.js -function home (res){ - res.end("home") -} -function list (res){ - res.end("list") -} -function add(res){ - res.end("add") -} -module.exports = { - home:home, - list: list, - add:add -} -``` -因为我们希望在地址栏输入路径的时候，页面会响应出响应的内容，所以我们要把响应参数res传递给route函数，它又会把这个参数传递给handler里的方法，这个我们就能很灵活地根据请求的地址响应我们想要的内容。 diff --git "a/03\350\214\203\345\217\266\345\205\260/2023-03-03 \347\273\203\344\271\240\345\237\272\346\234\254.md" "b/03\350\214\203\345\217\266\345\205\260/2023-03-03 \347\273\203\344\271\240\345\237\272\346\234\254.md" deleted file mode 100644 index 7444e33..0000000 --- "a/03\350\214\203\345\217\266\345\205\260/2023-03-03 \347\273\203\344\271\240\345\237\272\346\234\254.md" +++ /dev/null @@ -1,84 +0,0 @@ -# app.js -```js -'use strict' - -//引用模块 -const Koa=require('koa'); - -//引入index.js的模块 -let index=require('./controller') - - -//实例化 -let app=new Koa(); - -index(app); -// console.log(obj) - - -//监视端口 -let posh=8000; -app.listen(posh); - -console.log(`网站:http://localhost:${posh}`); -``` - -# index.js - -```js -'use strict' -//模块 -const fs = require('fs'); - -//koa-router:是函数调用 -const router = require('koa-router')(); -//koa-bodyparser不是函数调用 -const bodyParser = require('koa-bodyparser') - - - -//请求的方法函数:注册指定模块的所有定义路由 -function fn_url(obj) { - for (let key in obj) { - // console.log(key) - let ad = key.split(' ')//将字符串分割成数组 - // console.log('是'+ad) - let method = ad[0]//请求方法 - let url = ad[1]//请求路径 - let fn = obj[key]//函数方法 - - if (method === 'get') { - router.get(url, fn) - } else if (method === 'post') { - router.post(url, fn) - } else if (method === 'put') { - router.put(url, fn) - } else if (method === 'delete') { - router.delete(url, fn) - } - } -} - -//判断请求路径的方法函数 -function url(app) { - let filtes = fs.readdirSync('./controller')//用同步获取控制器文件夹中的文件 - console.log(filtes) - let filt = filtes.filter(item => { - return item !== 'index.js'//排除index.js文件 - }) - - filt.forEach(item => { - //replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。 - let obj = require('./' + item.replace('.js', ''))//调用的路由模块 - console.log('修改后:' + obj) - - fn_url(obj); - }) - - app.use(bodyParser()) - app.use(router.routes()) -} - -console.log(url) -module.exports = url; -``` diff --git "a/03\350\214\203\345\217\266\345\205\260/2023-03-06 \351\207\215\346\236\204anew.md" "b/03\350\214\203\345\217\266\345\205\260/2023-03-06 \351\207\215\346\236\204anew.md" deleted file mode 100644 index 48989b3..0000000 --- "a/03\350\214\203\345\217\266\345\205\260/2023-03-06 \351\207\215\346\236\204anew.md" +++ /dev/null @@ -1,151 +0,0 @@ -# 重构 - -1. app.js - -```js -//引入模块 -const Koa=require('koa'); -const registerRouter=require('./controllers') -const templating=require('./templating') -const staticFiles=require('./staticFiles') -//实例化 -let app=new Koa(); - - -//注册路由 -registerRouter(app) - -//端口号 -let port=8088; -app.listen(port) - -console.log(`http://localhost:${port}`); -``` -2. 控制器（controllers) - index.js - ```js - const router=require('koa-router')(); - const bodyParser=require('koa-bodyparser'); - const {findControllers,registerRouter2}=require('../utils/tools') - - function registerRouter(app){ - //找到所有文件 - let files=findControllers() - //遍历注册 - registerRouter2(files,router) - - app.use(router.routes()); - app.use(bodyParser()) - } - - module.exports=registerRouter; - ``` - roles.js -```js - - let list=[ - { - id:1, - name:'小范', - img:url - },{ - id:2, - name:'小徐', - img:url - },{ - id:3, - name:'小陈', - img:url - },{ - id:4, - name:'小王', - img:url - },{ - id:5, - name:'小许', - img:url - }, - ] - - async function getAll(ctx,next){ - - - } - async function getById(ctx,next){ - - } - async function addItem(ctx,next){ - - } - async function updateItem(ctx,next){ - - } - async function delItem(ctx,next){ - - } - - - module.exports={ - 'get /roles':getAll, - 'get /roles/:id':getById, - 'post /roles':addItem, - 'put /roles/:id':updateItem, - 'delete /roles/:id':delItem, - } - ``` -3. 路由系统封装（utils——>tools.js) - -``` js - 'use strict'; - - const fs = require('fs'); - - // 查找所有路由文件 - function findControllerFiles(path) { - // 如果传入指定目录，则从指定目录查找路由文件，否则默认从 controllers目录下查找路由文件 - path = path || './controllers'; - - // 使用fs模块读取指定目录下的文件 - let files = fs.readdirSync(path); - - // 返回过滤后的路由文件（查找到的文件过滤掉非.js结尾的、 并且不能是index.js的文件） - return files.filter(item => { - return item.endsWith('.js') && item !== 'index. js'; - }); - } - - //注册路由(传入所有的路由文件) - function registryRouter(files,router) { - // 遍历路由文件 - files.forEach(file => {// 形如这个样子的字符串： 'users.js' - - // 加载指定文件模块，返回形式是一个对象 - let tmpModule = require('../controllers/' + file); - // 遍历对象 - for (let key in tmpModule) { - // 使用空格分割字符串 - let arr = key.split(' '); - - let method = arr[0];//http的方法，可能是：get post put delete中的其中一种 - let url = arr[1];//请求地址，不包含主机地址：localhost:port - let fn = tmpModule[key];//请求需要调用的异步函数 - - if (method === 'get') { - router.get(url, fn); - } else if (method === 'post') { - router.post(url, fn); - } else if (method === 'put') { - router.put(url, fn); - } else if (method === 'delete') { - router.delete(url, fn); - } - } - }) - } - - module.exports = { - findControllerFiles, - registryRouter - } - ``` - \ No newline at end of file diff --git "a/03\350\214\203\345\217\266\345\205\260/2023-03-07 \347\203\255\351\207\215\350\275\275 nunjucks.md.md" "b/03\350\214\203\345\217\266\345\205\260/2023-03-07 \347\203\255\351\207\215\350\275\275 nunjucks.md.md" deleted file mode 100644 index 1ad64e8..0000000 --- "a/03\350\214\203\345\217\266\345\205\260/2023-03-07 \347\203\255\351\207\215\350\275\275 nunjucks.md.md" +++ /dev/null @@ -1,194 +0,0 @@ - -## 一.热重载:nodemon - -### 安装 - -+ 方法一:全局安装 -```js -$ npm i -g nodemon - -删除: npm un -g nodemon -``` - -+ 方法二:本地安装 -```js -$ npm i -D nodemon - -注意：本地安装需要在 package.json 文件的 script 脚本中指定要需要执行的命令 - -{ - "script": { - "dev": "nodemon app.js" - } -} -使用 npm dev 运行 -``` - - - -## 二.nunjucks模板引擎 - -### 安装nunjucks -``` - npm add nunjucks/yarn add nunjucks -``` - -### 用法 - -### nunjucks 插值语法 - -+ nunjucks 的插值语法和我们平常写 VUE 的语法一样, 只需要写双大括号{{}} 即可以完成插值引用. - -### 渲染:render -#### index.html -```js - - - - - - --
- {% for item in items %}
-
-
-
-
- {{item.name}} - - {% endfor %} -
灰太狼
-
-
-
-```
-注意：在服务端中，文件中的路径就不要去写相对路径了。因为这个时候所有的资源都是通过url标识来获取的。
-服务器开放 /public/ 目录
-所以代码中的请求路径都写成：/public/xxx
-/ 在这里就是url根路径的意思。
-浏览器在真正发请求的时候会最终把url拼接到 http:/ /127.0.0.1:3000上
-
-# app.js文件
-
-如果不对那些静态资源进行处理，我们看一下是什么情况
-```js
-let http = require('http');
-let fs = require('fs');
-
-http.createServer(function (request,response) {
- console.log("服务器收到请求");
- let url = request.url;
- if (url === '/') {
- fs.readFile('./views/index.html',function (err,data) {
- if (err) {
- response.end('404');
- return;
- }
- response.end(data)
- })
- }
-}).listen(3000,function () {
- console.log('http://127.0.0.1:3000');
-})
-```
-
-
-使用node app.js启动服务器，访问 http://127.0.0.1:3000，打开控制台，结果如图所示。原因就在于我们没有写对这些静态资源进行处理的代码，服务器读取不到它们，也就无法返回给浏览器。下面重新写app.js
-
-
-# app.js（对静态资源进行处理）
-
-```js
-let http = require('http');
-let fs = require('fs');
-
-http.createServer(function (request,response) {
- console.log("服务器收到请求");
- let url = request.url;
- if (url === '/') {
- fs.readFile('./views/index.html',function (err,data) {
- if (err) {
- response.end('404');
- return;
- }
- response.end(data)
- })
- } else if (url.indexOf('/public/') !== -1) {
- //此处是关键，当发现请求路径中含有 /public/，我们把请求路径当作文件路径来直接进行读取
- fs.readFile('.' + url,function (err,data) {
- if (err) {
- response.end('404');
- return;
- }
- response.end(data);
- })
- }
-}).listen(3000,function () {
- console.log('http://127.0.0.1:3000');
-})
-```
-
-我们所有的静态资源都放在了public文件夹中，所以资源的请求路径前都会有 /public/
-所以说如果请求路径是以 /public/ 开头的，则服务器认为你要获取 public中的某个资源，我们就直接可以把请求路径当作文件路径来直接进行读取
-
-我们重新启动node app.js，访问 http://127.0.0.1:3000，刷新一下，页面马上就可以显示出来。打开控制台看看，资源也都请求到了。
-
diff --git "a/03\350\214\203\345\217\266\345\205\260/2023-03-10 sequelize.md" "b/03\350\214\203\345\217\266\345\205\260/2023-03-10 sequelize.md"
deleted file mode 100644
index 0304108..0000000
--- "a/03\350\214\203\345\217\266\345\205\260/2023-03-10 sequelize.md"
+++ /dev/null
@@ -1,85 +0,0 @@
-# 一.使用Sequelize
-
-## 安装Sequelize
-```js
-使用 npm
-npm i sequelize /npm add sequelize
-
-使用 yarn
-yarn add sequelize
-
-```
-
-## 为所选数据库安装驱动程序
-
-+ 上课讲mysql
-```js
-使用 npm
-npm i pg pg-hstore # PostgreSQL
-npm i mysql2 # MySQL
-npm i mariadb # MariaDB
-npm i sqlite3 # SQLite
-npm i tedious # Microsoft SQL Server
-npm i ibm_db # DB2
-
-
-使用 yarn
-yarn add pg pg-hstore # PostgreSQL
-yarn add mysql2 # MySQL
-yarn add mariadb # MariaDB
-yarn add sqlite3 # SQLite
-yarn add tedious # Microsoft SQL Server
-yarn add ibm_db # DB2
-```
-## 详细的
-+ Sequelize的中文文档: https://www.sequelize.cn/core-concepts/getting-started
-
-# 二.安装mysql
-
-安装步骤的详细地址: https://blog.csdn.net/SoloVersion/article/details/123760428
-
-+ 装5.7.x的更稳定(也不知道是不是真的)
-
-# 三.使用
-
-## 运行mysql
-
-方法一:
-+ 右键打开任务管理器,在服务里打开mysql
-
-方法二:
-
-+ win+R,打开运行框，输入services.msc直接打开服务，在里面打开mysql
-
-
-## 使用命令行，查看数据库的连接
-
-+ win+R，输入cmd
-
-+ 输入mysql，看看能不能正常运行，如果不可以就有添加一下环境变量
-
-+ 连接一下,输入
-```
- mysql -u root -p
-```
-+ 输入密码，成功就连接上了
-
-+ 创建数据库,**必须用;结束**
-```
- create database 库名;
-```
-
-+ 进入数据库
-```
- use 库名
-```
-
-+ 查看库中的表
-```
- show tables
-```
-
-+ 查看表的内容
-```
- select * from 表名
-```
\ No newline at end of file
diff --git "a/03\350\214\203\345\217\266\345\205\260/img/2023-02-20.png" "b/03\350\214\203\345\217\266\345\205\260/img/2023-02-20.png"
deleted file mode 100644
index d5156ec5ec667ff25974db87abfa50f3678ff239..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001
literal 5447
zcmbtYXIN89w~n9(6%iYPAYucg2nP^C4@H^^N|zduj!5VTBteP?MMIHJLQ$kQsgV{0
zBp^udb<;wxfj~$I+~E1X``qWA`|GjHtt>V`P)`vG_8H~7%ziOy=zT>iRfADGXPGx7rf&8<>te#iMTiFf|
zuU-N2>`Aqqt&Esa{Og*Udg4e_`j4Nh15b9)-{)W*&*6l5y4zh_fm3d0+YpNam2?sO
z{K^XkbmN$qNHU|t?_&>^NQo}3gx*wqdsGJT_W3P6D<&jNc4AKZh?oZ#YbT%lKSv3(
zRb^&YVA67vjIo96$O%{&va_C?!A{@owk&N&;KO2HXfb;no^(ISl#nx31K$EkJ?baJ
zzYQ0M5@L3K<9z$(u|yt Vq
z8LrZXiNnl#i&t~}$lf32rhXC9s~4V&@Xo8rWb5b5VQ>H+GYp~z5Xi!d$D
zf%mAQ=_9uzG4#Rsk`YMRG7BWBf-oO*4GD~_w@1#O>r~hEQ~wJwS|+z!T@?y9u5H`<
z3Y0B=?<)~HqNdxt{-vd@cCy~8*{;HX$LIDBiec<#u(w
EM!Y8-w-Q=JVMf4TeP{
z9Yp^U-*=6(1hJv5a*plY&oAXWEShnEfA@UU*EG@52N%$kMilUmEEMo{`7CE!Fn%ow
z`}012uyA~Je(pU+8DP<6msGo;;{ML>VZ_nsbtPpB5)^r6gTs$F@%hPbb~TcmWXazH
z7*`FHg+eh)bTkDmTTgALi7X}Xc*mfrKaa?kLH&ChOS)uVS8L4zR|yVTDX(Z-_B3!v
zB76K>qPxvOJolQe(pc2p_~F&gY~I1(|0frKO0BzW>d{d8V#4Y)CAYis{WY(Qyg=lL
zG_><1Fb%EKk=b1K6$QkpCcgK!2%3DB!Ie&@gYB*_y(`rN&l}L6!-tC85nC#PTHr6C
zW8Zhb=6K%;iuUdjM7!>DtehhANUz`hcK@D`T$AynrfNw$<7J7H@|Q>jA4(HyeV|ro
zV*F{>?RS+mGYtXGF%jg)O9