第六届360前端星计划_Node.js 基础入门

最新推荐文章于 2024-07-02 08:55:42 发布
最新推荐文章于 2024-07-02 08:55:42 发布
阅读量187 收藏
点赞数
分类专栏： 第六届360前端星计划 文章标签： 第六届360前端星计划 nodejs 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41796393/article/details/105431656
版权

主讲人：李喆明

一、什么是 Node.js

  1. Node.js：Node.js® is a JavaScript runtime built on Chrome’s V8 JavaScript engine.

https://nodejs.org

  1. 与 JavaScript 的区别
    基于异步 I/O 相关接口
    基于 node_modules 和 require 的模块依赖
    提供 C++ addon API 与系统交互
  2. Node.js 可以干什么？
    Web 服务端：Web Server、爬虫
    CLI 命令行脚本：webpack
    GUI 客户端软件：VSCode、网易云音乐
    IoT, 图像处理, 实时通讯，加密货币…
const puppeteer = require('puppeteer');
const url = 'https://movie.douban.com/subject/26794435';

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto(url);
  const film = await page.evaluate(() => {
    const title = $('h1 > span:first-child').text();
    const poster = $('#mainpic img').attr('src');
    const desc = $('span[property="v:summary"]').text().trim();
    return {title, poster, desc};
  });

  console.log(JSON.stringify(film, null, '  '));
  await browser.close();
})();

二、Node.js 基础

  1. Hello World
// index.js
console.log('Hello World');
Hello World
➜  ~ node index.js
  1. 读写文件

const fs = require('fs');
fs.readFile('test.txt', (err, data) => {
    console.log(data);
});
console.log('read file content');
  1. 模块
    内置模块：编译进 Node 中，例如 http fs net process path 等
    文件模块：原生模块之外的模块，和文件(夹)一一对应
  2. 使用内置模块
const fs = require('fs');
fs.readFile('a.text', (err, buffer) => {
  console.log(buffer);
})
const {readFile} = require('fs');
readFile('a.txt', (err, buffer) => {
  console.log(buffer);
})
  1. 使用文件模块
// app.js
var circle = require('./circle.js');
console.log('半径为4的圆面积是：' + circle.area(4));
  1. 定义模块
// circle.js
const pi = Math.PI;
exports.area = function (r) {
    return pi * r * r;
};
exports.circumference = function (r) {
    return 2 * pi * r;
};
  1. 模块加载
// 加载绝对路径文件
require('/foo/bar/a.js');

// 加载相对路径文件
require('../a.js');

// 加载无后缀的文件
require('../a');

// 加载外部模块
require('pkg-name');
  1. 模块类型
    .js
    .json
    .node
    .mjs
    …
  2. 模块路径查找
    绝对路径
    相对路径
    和当前路径处理为绝对路径
    模块/文件夹
    原生模块，直接读取缓存
    [$NODE_PATH, ~/.node_modules,
    ./node_modules, …/node_modules, …]
    解析 package.json，查找 main 属性，没有则使用 index.js
    如果未找到，则报错
  3. js 模块解析
// app.js
const circle = require('./circle.js');

require 并不是全局变量
定义的变量 circle 会污染其他文件么？
通过 fs.readFileSync 同步拿到文件内容
对内容进行包装

(function (exports, require, module, __filename, __dirname) {
    var circle = require('./circle.js');
    console.log('The area is ' + circle.area(4));
});

通过 vm.runInThisContext 执行
获取 module 对象的值作为模块的返回值

  1. 模块缓存
    模块加载后会将返回值缓存起来
    下次加载时直接读取缓存结果，避免文件 I/O 和解析时间
    导出对象缓存在 Module._cache 对象上

三、NPM

  1. Node Package Manager
  2. 包管理
    一个package.json文件应该存在于包顶级目录下
    二进制文件应该包含在bin目录下
    JavaScript代码应该包含在lib目录下
    文档应该在doc目录下
    单元测试应该在test目录下
  3. package.json
    Tip: 可以使用 npm config set init.author.name 等命令修改初始化时的默认值
➜  star-plan npm init -y
Wrote to /Users/lizheming/star-plan/package.json:

{
  "name": "star-plan",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}
  1. 包依赖
"dependencies": {
    "accepts": "^1.2.2",
    "content-disposition": "~0.5.0",
    "cookies": "~0.7.0",
    "debug": "*",
    "delegates": "^1.0.0",
    "escape-html": "~1.0.1",
    "fresh": "^0.5.2",
    "only": "0.0.2",
    "parseurl": "^1.3.0",
    "statuses": "^1.2.0",
    "type-is": "^1.5.5",
    "vary": "^1.0.0"
  },

1.0.0 Must match version exactly

1.0.0 Must be greater than version
=1.0.0 <1.0.0 <=1.0.0
~1.0.0 “Approximately equivalent to version”
^1.0.0 “Compatible with version”
1.2.x 1.2.0, 1.2.1, etc., but not 1.3.0

  • Matches any version
    version1 - version2 Same as >=version1 <=version2.
    …
  1. NPM 的问题？
    速度问题
    安全问题
    查看源码看 Star
    https://snyk.io/ 外部的检测服务
    npm audit

四、基于 Node.js 的 Web 开发

  1. Web
const http = require('http');
const server = http.createServer((req, res) => {
  res.end('Hello World');
});
server.listen(3000);
  1. Koa
    https://github.com/koajs/koa
const Koa = require('koa');
const app = new Koa();

// response
app.use(ctx => {
  ctx.body = 'Hello Koa';
});

app.listen(3000);


module.exports = class Application extends Emitter {
  ...
  
  listen() {
    debug('listen');
    const server = http.createServer(this.callback());
    return server.listen.apply(server, arguments);
  }

  use(fn) {
    this.middleware.push(fn);
    return this;
  }
  
  callback() {
    const fn = compose(this.middleware);
    
    if (!this.listeners('error').length) this.on('error', this.onerror);

    const handleRequest = (req, res) => {
      res.statusCode = 404;
      const ctx = this.createContext(req, res);
      const onerror = err => ctx.onerror(err);
      const handleResponse = () => respond(ctx);
      onFinished(res, onerror);
      return fn(ctx).then(handleResponse).catch(onerror);
    };

    return handleRequest;
  }
  
  createContext(req, res) {
    const context = Object.create(this.context);
    const request = context.request = Object.create(this.request);
    const response = context.response = Object.create(this.response);
    context.app = request.app = response.app = this;
    context.req = request.req = response.req = req;
    context.res = request.res = response.res = res;
    request.ctx = response.ctx = context;
    request.response = response;
    response.request = request;
    context.originalUrl = request.originalUrl = req.url;
    context.cookies = new Cookies(req, res, {
      keys: this.keys,
      secure: request.secure
    });
    request.ip = request.ips[0] || req.socket.remoteAddress || '';
    context.accept = request.accept = accepts(req);
    context.state = {};
    return context;
  }
}

Koa 无规范约束，不利于团队开发

中间件繁多，质量参差不齐，选择困难
逻辑分层
路由处理
数据解析、校验
权限校验
Session、Cache
数据库、Redis
安全
…

TODO List 项目实战
https://github.com/lizheming/simple-todo

功能列表
TODO List 的页面
API
获取 TOO 列表
增加 TODO
删除 TODO
更新 TODO 状态

数据表设计

CREATE TABLE `todo` (
  `id` int(11) unsigned NOT NULL AUTO_INCREMENT,
  `desc` varchar(255) NOT NULL DEFAULT '',
  `status` tinyint(11) NOT NULL DEFAULT '0' COMMENT '0 是未完成，1是已完成',
  `createdAt` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP,
  `updatedAt` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

npm install -g think-cli

➜ ~ thinkjs --version

2.2.8

创建项目
$ thinkjs new todo
$ cd todo
$ npm install
启动项目

➜  simple-todo npm start

> simple-todo@1.0.0 start /Users/lizheming/Desktop/star-plan/simple-todo
> node development.js

[2019-04-21T21:58:16.197] [7077] [INFO] - Server running at http://127.0.0.1:8360
[2019-04-21T21:58:16.201] [7077] [INFO] - ThinkJS version: 3.2.10
[2019-04-21T21:58:16.201] [7077] [INFO] - Environment: development
[2019-04-21T21:58:16.201] [7077] [INFO] - Workers: 1

模板渲染


// src/controller/index.js
const Base = require('./base.js');
module.exports = class extends Base {
  indexAction() {
    return this.display();
  }
};

API 开发
使用 RESTful API
RESTful 接口规范
每个 API 都对应一种资源或资源集合
使用 HTTP Method 来表示对资源的动作
使用 HTTP Status Code 来表示资源操作结果

RESTful API
GET /ticket 获取 ticket 列表
GET /ticket/:id 查看某个具体的 ticket
POST /ticket 新建一个 ticket
PUT /ticket/:id 更新 id 为 12 的 ticket
DELETE /ticket/:id 删除 id 为 12 的 ticekt

创建 API 文件


➜  simple-todo thinkjs controller -r ticket

   think-cli · Create: src/controller/rest.js
   think-cli · Create: src/controller/ticket.js
   think-cli · Create: src/logic/api/ticket.js

配置路由


// src/config/router.js
module.exports = [
  ['/ticket/:id?', 'rest'], // 配置 RESTful API 路由
]

路由解析
GET /api/todo 获取 TODO 列表，执行 getAction
GET /api/todo/:id 获取某个TODO的详细信息，执行 getAction
POST /api/todo 添加一个 TODO，执行 postAction
PUT /api/todo/:id 更新一个 TODO，执行 putAction
DELETE /api/todo/:id 删除一个 TODO，执行 deleteAction

getAction


// src/controller/rest.js
async getAction() {
  let data;
  if (this.id) {
    const pk = this.modelInstance.pk;
    data = await this.modelInstance.where({ [pk]: this.id }).find();
    return this.success(data);
  }
  data = await this.modelInstance.select();
  return this.success(data);
}

postAction


  async postAction() {
    const pk = this.modelInstance.pk;
    const data = this.post();
    delete data[pk];
    if (think.isEmpty(data)) {
      return this.fail('data is empty');
    }
    const insertId = await this.modelInstance.add(data);
    return this.success({ id: insertId });
  }

deleteAction


async deleteAction() {
  if (!this.id) {
    return this.fail('params error');
  }
  const pk = this.modelInstance.pk;
  const rows = await this.modelInstance.where({ [pk]: this.id }).delete();
  return this.success({ affectedRows: rows });

putAction

async putAction() {
  if (!this.id) {
    return this.fail('params error');
  }
  const pk = this.modelInstance.pk;
  const data = this.post();
  delete data[pk];
  if (think.isEmpty(data)) {
    return this.fail('data is empty');
  }
  const rows = await this.modelInstance.where({ [pk]: this.id }).update(data);
  return this.success({ affectedRows: rows });
}

数据库配置

// src/config/adapter.js
exports.model = {
  type: 'mysql',
  common: {
    logConnect: isDev,
    logSql: isDev,
    logger: msg => think.logger.info(msg)
  },
  mysql: {
    handle: mysql,
    database: 'todo',
    prefix: '',
    encoding: 'utf8',
    host: '127.0.0.1',
    port: '',
    user: 'root',
    password: 'root',
    dateStrings: true
  }
};


http://127.0.0.1:8360/ticket
{
  "errno": 0,
  "errmsg": "",
  "data": [{
    "id": 1,
    "desc": "八点打扫房间",
    "status": 0,
    "createdAt": "2018-07-08 17:12:59",
    "updatedAt": "2018-07-08 17:13:14"
  }]
}

数据校验
提供了 Logic 机制转门用来支持数据校验
文件和 Action 与 Controller 一一对应

数据校验
// src/logic/ticket.js
module.exports = class extends think.Logic {
  getAction() {
    this.rules = {
      id: {
        int: true
      }
    };
  }
  deleteAction() {
    this.rules = {
      id: {
        int: true,
        required: true,
        method: 'get'
      }
    };
  }
  putAction() {
    this.rules = {
      id: {
        int: true,
        required: true,
        method: 'get'
      },
      status: {
        int: true,
        required: true
      },
      desc: {
        required: true
      }
    };
  }
  postAction() {
    this.rules = {
      desc: {
        required: true
      }
    };
  }
};

DELETE http://127.0.0.1:8360/ticket

{
  "errno": 1001,
  "errmsg": {
    "id": "id can not be blank"
  }
}

数据库操作
封装了 think.Model 类
提供增删改查等操作
支持关联模型查询
自动分析数据表字段类型
自动数据安全过滤

控制器中操作模型
const model = this.model(modeName);
根据模型名查找 src/model 下的模型文件
文件存在，实例化对应的模型类
文件不存在，实例化 think.Model 类

定义模型类

// src/model/todo.js

module.exports = class TodoModel extends think.Model {
  getList () {
    // get list
  }
}

模型的好处
简化代码、提高效率
不用太懂 SQL 语句也能操作数据库
避免手写 SQL 语句的安全风险

五、Node.js 的调试

  1. NodeJS调试
    https://zhuanlan.zhihu.com/p/41315709​​​​​​​
    日志调试
    断点调试
    node --inspect
    vscode
    ndb

  2. NodeJS 6.3+ 使用 node --inspect 参数启动可以在 Chrome 浏览器中调试，在 chrome://inspect 中可以发现你的项目并启动 devtool

  3. Node 开发角色转换
    前端
    跟浏览器打交道，兼容性问题
    组件化
    加载速度、JS 执行性能、渲染性能
    错误监控
    XSS、CSRF 等安全漏洞
    服务端
    数据库、Redis 等周边服务
    性能、内存泄露、CPU、机器管理
    服务监控、错误监控、流量监控、报警
    SQL注入、目录遍历等安全漏洞

明媚呀
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
360前端星计划—Node.js 基础入门（李喆明）
liu_ye96的博客
04-10 310
1. 什么是 Node.js 是基于chrome js运行时建立的平台，基于V8引擎。简单来说Node.js是运行在服务端的JavaScript。 与JS的区别： 基于异步 I/O 相关接口 基于 node_modules 和 require 的模块依赖 提供 C++ 插件API 与底层系统交互 Node.js可以做什么？ Web 服务端：Web Server、爬虫 CLI 命令行脚本：we...
谈谈 MySQL 的 JSON 数据类型操作
奇舞周刊
09-14 607
编者按：本文作者李喆明，奇舞团前端开发工程师MySQL 5.7 增加了 JSON 数据类型的支持，在之前如果要存储 JSON 类型的数据的话我们只能自己做 JSON.stringify(...
不到 0.3s 完成渲染！360 信息流正文“闪开”优化实践
奇舞周刊
07-29 212
编者按：本文作者奇舞团前端开发工程师李喆明。开篇之前先介绍一下场景。信息流是一个基于用户兴趣使用算法将用户感兴趣的新闻内容推荐给用户的一种业务。这种业务带有非常特色的场景...
第六届360前端星计划汇总
明媚
04-08 394
第六届360前端星计划_HTML与前端 第六届360前端星计划_了解CSS 第六届360前端星计划_深入CSS 第六届360前端星计划_深入CSS
基于Vue、Axios、Node.js的图书管理系统【网页前端高级编程】
一个非常Cool的人
02-04 6011
基于Vue、Ajax、Node.js的图书管理系统，网页前端高级编程实现了在网页上进行增删改查,web与后端的数据交互模拟。适合初学者前端入门,适合期末网页前端课程设计实践。欢迎大家积极阅读，如有不足请及时批评指出。...
十分钟带你入门Node.js 开发
Go与Python双剑合一
06-02 973
本文详细的介绍了Node.js的安装与使用以及如何使用Node.js的包管理工具，最后使用一个计算生日还有多久的js实用程序结束本文。有很多初学者分不清Node.js和js的区别，其实只要记住一句话就可以了，js是一种编程语言，Node.js是js的运行环境就足够了，题外话，还有一个EMCAScript，它是Javascript语言的一个语言规范。
2020年360前端星计划课程笔记-0410
ldhldh1的博客
04-10 217
08 - 正则的三个使用场景 正则表达式的创建和使用 创建正则表达式 1.使用正则表达式字面量 const reg = /[a-z]\d+[a-z]/i 优点 简单方便 不需要考虑二次转义 缺点 子内容无法重复使用 过长的正则导致可读性差 2.使用RegExp构造函数 const alphabet = '[a-z]'; const reg = new RegExp(`${alph...
360前端星计划学习笔记0410
11wy11的博客
04-10 234
360前端星计划学习笔记（五）正则的三个应用场景–王峰老师 360前端星计划学习笔记（六）NodeJS基础入门–李喆明老师 正则 正则表达式的创建和使用 创建正则表达式的两种方式 字面量 const reg=/[a-z]\d+[a-z]/i 优点：①简单方便；②不需要考虑二次转义； 缺点：①子表达式无法复用②过长的正则可读性降低 使用RegExp构造函数 const alphabet='[a-z...
运用JavaScript代码，使用Three.js框架在网页中实现3D效果，零基础入门Three.js，包含具体实例。
wandertp的博客
06-01 2336
运用JavaScript代码，使用Three.js框架实现3D效果，使你的网页变得绚丽多彩，快来学习吧，从头教你如何使用Three.js框架实现3D效果。
源码&笔记_Node.js_node.js相关_前端学习_
10-02
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境，它让开发者能够在服务器端使用 JavaScript 进行开发，极大地推动了全栈开发的流行。本压缩包中的资源专注于 Node.js 的学习，对前端开发者尤其有帮助。 ...
beginning_node.js:入门Node.js书籍的练习代码
05-22
《beginning_node.js》是一本面向初学者的Node.js入门书籍，它旨在帮助读者掌握Node.js的基本概念和实践技能。Node.js是一个基于Chrome V8引擎的JavaScript运行环境，以其高效、非阻塞I/O和事件驱动的特性在服务器端...
Node入门.zip_Node.js_nodejs
07-15
**Node.js简介** Node.js是一个基于Chrome V8引擎的JavaScript运行环境，由Ryan Dahl于2009年创建。...通过《Node入门.pdf》这份教程，初学者可以快速掌握Node.js的基础知识，踏上成为一名Node.js开发者的旅程。
blog.rar_Node.js_node 系统_个人博客
09-14
**Node.js与Node系统** Node.js是一个基于Chrome V8引擎的JavaScript运行环境，它让...在实际操作中，开发者需要具备Node.js、JavaScript、数据库管理和前端开发等相关技能，才能充分挖掘和利用Node.js的潜力。
Node.js从入门到精通
11-08
Node.js从入门到精通的知识点涵盖了Node.js的基础到高级应用，包括包管理、后端服务器搭建、事件模型、文件系统操作、路径处理、HTTP压缩、模板引擎、数据库集成、用户认证等多个方面。 1. **包管理器**：Node.js有...
JavaScript检查对象是否包含某个属性
徐三岁的博客
06-28 843
当使用 Object.prototype.hasOwnProperty.call 时，实际上是在调用 hasOwnProperty 方法，并明确指定 this 的值，这使得可以检查任何对象是否拥有指定的属性。使用 Object.prototype.hasOwnProperty.call 的好处是，它允许将 hasOwnProperty 方法作为一个函数传递给其他函数，或者在不直接引用对象的情况下使用它。hasOwnProperty 方法会检查对象自身是否具有指定的属性，而不考虑原型链。
TS_类型
分享程序相关知识
06-29 1270
typescripe类型相关知识点。
【vueUse库Component模块各函数简介及使用方法--上篇】
最新发布
xiejunlan的博客
07-02 871
vueUseComponent函数理解 `computedInject` 的概念模拟 `computedInject`使用场景总结构想`createReusableTemplate`的用途可能的实现方式方法一：使用高阶组件（HOC）方法二：使用插槽（Slots）和默认插槽内容结论构想`createTemplatePromise`的用途可能的实现方式使用Vue 3的异步组件构想中的`createTemplatePromise`结论使用Vue的`ref`属性在模板中引用元素或组件示例：引用模板中的DOM元素。
实战|记一次java协同办公OA系统源码审计
weixin_46239998的博客
06-26 1685
实战|记一次java协同办公OA系统源码审计
在rename_node.jstree中如何回退旧的名称
06-10
在rename_node.jstree中，如果需要回退旧的名称，可以使用jstree提供的回调函数`rename_node.jstree`。在该函数中，可以获取到当前节点的旧名称和新名称，可以通过比较旧名称和新名称来判断是否需要回退操作。 具体...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值