一、初探

1 express是什么

  • Express.js 框架是目前最流行的node.js后端框架之一, 相当于jQuery和js之间的关系;
  • Express 不对 Node.js 已有的特性进行二次抽象,我们只是在它之上扩展了 Web 应用所需的基本功能;
  • 功能类似的后端框架:Koa.js, egg.js, hapi.js

2 安装

  • 进入应用目录

  • npm init 命令为你的应用创建一个 package.json 文件

  • 安装 Express 并将其保存到依赖列表中 npm install express --save

    如果只是临时安装 Express,不想将它添加到依赖列表中,只需略去 --save 参数即可 npm install express

3 Express 应用生成器

通过应用生成器工具 express 可以快速创建一个应用的骨架。

  • 安装 npm install express-generator -g ,这个可以在cmd 里执行,全局安装,全局安装以后在哪儿都可以直接用了。

常用操作: express -h -h 选项可以列出所有可用的命令行选项

  • 新建一个文件夹demos, 在该文件夹下执行 express --view=ejs demo1 设置视图模板, 这句执行完毕后,接下来怎么执行,命令行会提示
  • 安装所有依赖包 npm install
  1. 设置视图模板 express --view=ejs demo1

  2. 启动应用:

    • MacOS 或 Linux 平台: DEBUG=myapp npm start
    • Windows 平台: set DEBUG=myapp & npm start
    • 在浏览器中打开 http://localhost:3000/ 网址就可以看到这个应用了
  3. 通过 Express 应用生成器创建的应用一般都有如下目录结构:

4.中间件

通过app 根据路径处理 客户端传来的 get post 请求:

  1. // 1 引入
  2. const express = require('express');
  3. // 2 创建一个server
  4. const app = express();
  5. // 3 通过app 根据路径处理 客户端传来的 get post 请求
  6. app.get('/',(req,res)=>{
  7. res.write('<h1>there is two ways,the one is the right way ,the other way is the easy way!</h1>');
  8. res.end();
  9. });
  10. app.get('/pub',(req,res)=>{
  11. res.write('<p>there is a way!</p>');
  12. res.end();
  13. });
  14. //
  15. app.get('/it', (req, res)=>{
  16. console.log(req.url);
  17. res.write('<h2>it</h2>');
  18. res.end();
  19. });
  20. // 4 开启监听
  21. app.listen(3000,()=>{
  22. console.log('server is running');
  23. });
  24. /*
  25. 访问:http://localhost:3000/ ----there is two wa......
  26. 访问: http://localhost:3000/pub ---- there is a way!
  27. 访问:http://localhost:3000/it?name=jack&age=12 server端打印: /it?name=jack&age=12
  28. */

app.use:

  1. const express = require('express');
  2. const app = express();
  3. // 中间件
  4. app.use((req,res,next)=>{
  5. console.log(111);
  6. next(); // next() 后,才会继续往下面执行,否则就会卡在这里,后面的也不会执行了
  7. });
  8. app.use((req,res,next)=>{
  9. console.log(222);
  10. next();
  11. });
  12. app.use((req,res,next)=>{
  13. console.log(333);
  14. next();
  15. });
  16. app.get('/pub',(req,res,next)=>{
  17. console.log('pub file');
  18. next();
  19. });
  20. app.get('/',(req,res,next)=>{
  21. console.log('aaa');
  22. res.write('<h1>hello a</h1>');
  23. res.end();
  24. });
  25. app.listen(3000,()=>{
  26. console.log('server is running');
  27. })
  28. // 直接访问 http://localhost:3000/ 打印
  29. /*
  30. server is running
  31. 111
  32. 222
  33. 333
  34. aaa
  35. */
  36. /*
  37. * 访问 http://localhost:3000/pub
  38. *
  39. * server is running
  40. 111
  41. 222
  42. 333
  43. pub file
  44. * */

用中间件写日志:

  1. const express = require('express');
  2. const fs = require('fs');
  3. const app = express();
  4. app.use((req,res,next)=>{
  5. const lg =
  6. `
  7. ---------------------------
  8. 请求方式:${req.method},
  9. 请求路径:${req.url},
  10. 请求时间:${new Date}
  11. ---------------------------
  12. \n
  13. `
  14. // 写入文件
  15. fs.appendFile('log.txt',lg,(err)=>{
  16. if(err){
  17. console.log('log write failed');
  18. }else {
  19. console.log('log write success');
  20. }
  21. });
  22. res.end()
  23. })
  24. app.listen(3000,()=>{
  25. console.log('server is running..');
  26. })
  27. /*
  28. log.txt:
  29. ---------------------------
  30. 请求方式:GET,
  31. 请求路径:/,
  32. 请求时间:Tue Dec 25 2017 12:52:27 GMT+0800 (GMT+08:00)
  33. ---------------------------
  34. */

5.静态资源文件夹配置

  1. const express = require('express');
  2. const fs = require('fs');
  3. const path = require('path');
  4. const app = express();
  5. // 配置静态资源文件夹
  6. app.use(express.static(path.join(__dirname,'public'))); //将public 文件夹作为静态资源文件夹
  7. app.get('/',(req,res,next)=>{
  8. console.log(path.join(__dirname, 'public'));
  9. res.end();
  10. next();
  11. });
  12. app.listen(3000, ()=>{
  13. console.log('server is running..');
  14. });
  15. /*
  16. * 访问 http://localhost:3000/images/1.jpg , 就可以访问到public/images/1.jpg 文件了
  17. * 访问 http://localhost:3000/ 打印: E:\hfive\gd_code\p8\d7\demos\demo1\public
  18. * */

6 模板引擎

目录结构:

engine.js:

  1. let express = require('express');
  2. let path = require('path');
  3. let app = express();
  4. // 1 指定视图所在位置
  5. app.set('views',path.join(__dirname,'views'));
  6. // 2. 注册模板引擎
  7. app.set('view engine','ejs');
  8. app.get('/',(req,res)=>{
  9. res.render('index',{"lists":["黄飞鸿","张择端","霍华德"]}); //这里放json的数据,开发中,将数据从数据库取出传这里即可。
  10. });
  11. app.listen(3000);

index.ejs:

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport"
  6. content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8. <title>Document</title>
  9. </head>
  10. <body>
  11. <ul>
  12. <% for(var i=0; i<lists.length;i++){%>
  13. <li><%=lists[i] %></li>
  14. <%}%>
  15. </ul>
  16. </body>
  17. </html>

运行结果:


express 如何处理错误,如果处理找不到页面的情况,如下代码实现与 express帮我们生成的代码结构类似,可以帮我们更好的理解express 自动生成后成品结构。

  1. const express = require('express');
  2. const fs = require('fs');
  3. const app = express();
  4. app.get('/',(req,res,next)=>{
  5. try {
  6. const data = JSON.parse('{"name":}'); // 这里设置让程序报错
  7. console.log(data);
  8. res.json(data);
  9. }catch (e) {
  10. next(e);
  11. }
  12. });
  13. app.get('/a',(req,res,next)=>{
  14. res.end('hello,this is directory: a ');
  15. });
  16. /**
  17. * 统一处理错误,记录日志
  18. */
  19. app.use((err,req,res,next)=>{
  20. const err_log = `
  21. ----------------------
  22. 错误名: ${err.name},
  23. 错误消息: ${err.message},
  24. 错误时间: ${new Date()},
  25. 错误堆栈: ${err.stack}
  26. ----------------------
  27. `;
  28. fs.appendFile('./err_log.txt',err_log,(err)=>{
  29. res.writeHead(500,{"Content-Type": "text/html;charset=utf-8"});
  30. res.end('500,服务器内部错误');
  31. });
  32. });
  33. // 404
  34. app.use((req,res,next)=>{
  35. res.writeHead(404, {"Content-Type": "text/html;charset=utf-8"});
  36. res.end('您当前访问的页面不存在!!!!');
  37. });
  38. app.listen(3000,()=>{
  39. console.log('running..');
  40. });

执行结果:

1、访问 http://localhost:3000/ ,页面显示:500,服务器内部错误 ,并记录日志

2、访问 http://localhost:3000/a ,页面显示:hello,this is directory: a

3、访问 http://localhost:3000/b,页面显示:您当前访问的页面不存在!!!! ,并记录日志

二、express + socket.io

1、搭建

全局安装过 generator 后,执行如下命令,创建项目文件

  1. express --view=ejs chat

自动生成如下结构:

然后,安装依赖

  1. cd chat
  2. npm install

系统会提示:

  1. run the app:
  2. > SET DEBUG=chat:* & npm start

运行它有两种方式,一种就是 执行 ``` npm start ``1

或者,运行bin 目录下的 www.js 文件

2、简要说明

此处只记录简要内容,不记录详细细节

引入路由文件:

中间件:

chat.js:

3、 socket.io

Socket.io 将 Websocket 和轮询( Polling )机制以及其它的实时通信方式封装成了通用的接口,并且在服务端实现了这些实时机制的相应代码。

H5 的新技术 Websocket 仅仅是 Socket.io 实现实时通信的一个子集。

中文文档参考 : https://www.w3cschool.cn/socket/

安装:

  1. npm install socket.io --save

使用 socket.IO 的时候,需要生成一个 实例对象;

生成这个实例对象的依赖原生 node 已经建立好的 httpServer 对象

客户端socket.on()监听的事件:

connect:连接成功

connecting:正在连接

disconnect:断开连接

connect_failed:连接失败

error:错误发生,并且无法被其他事件类型所处理

message:同服务器端message事件

anything:同服务器端anything事件

reconnect_failed:重连失败

reconnect:成功重连

reconnecting:正在重连

当第一次连接时,事件触发顺序为:connecting->connect;

当失去连接时,事件触发顺序为:disconnect、reconnecting(可能进行多次)、connecting、reconnec、connect。

demo 演示:

chat.ejs:

  1. <ul id="chatList">
  2. <li class="service"><span class="chat-msg">1</span></li>
  3. <li class="custom"><span class="chat-msg">111111,!</span></li>
  4. <li class="service"><span class="chat-msg">2</span></li>
  5. <li class="custom"><span class="chat-msg">2222222</span></li>
  6. </ul>
  7. <script src="/socket.io/socket.io.js"></script>
  8. <script src="/lib/js/jquery-3.3.1.js"></script>
  9. <script>
  10. // 1建立连接
  11. var socket = io('http://localhost:3000');
  12. socket.on('connect', function (data) {
  13. console.log(data);
  14. // 1.1 打开通道
  15. socket.emit('open...');
  16. });
  17. //2.监听
  18. socket.on('msg',function (data) {
  19. console.log(data);
  20. dealWithMsg('service',data)
  21. });
  22. // 3 点击发送
  23. $('#btn_send').on('click',function () {
  24. // 3.1 发送消息给服务器
  25. socket.emit('msg',$('#msg').val());
  26. // 3.2 显示到界面
  27. dealWithMsg('custom',$('#msg').val());
  28. // 3.3 清空消息
  29. $('#msg').val('');
  30. });
  31. let dealWithMsg = (claaName,data)=>{
  32. // 1 创建标签
  33. let $liDom = $("<li>");
  34. $liDom.attr({
  35. 'class':claaName
  36. });
  37. // 创建span
  38. let $spanDom = $("<span>");
  39. $spanDom.attr({
  40. "class":"chat-msg"
  41. });
  42. $spanDom.text(data);
  43. $liDom.append($spanDom);
  44. $('#chatList').append($liDom);
  45. // 2. 让滚动条在最底部
  46. // $('#chatList')[0] 是把它从jquery 转成 js 了,这样就可以拿到scrollheight
  47. let scoreHeight = $('#chatList')[0].scrollHeight;
  48. $('#chatList').scrollTop(scoreHeight);
  49. console.log(scoreHeight);
  50. };
  51. </script>

www.js:

  1. ...............
  2. // 1. 引入包
  3. const socketIO = require('socket.io');
  4. // 2. 针对 http server 生成 socket.IO 实例对象
  5. let io = socketIO(server);
  6. // 3.建立连接
  7. io.on('connection',(socket)=>{
  8. console.log('建立连接成功');
  9. // 3.1 返回消息
  10. socket.emit('msg','欢迎找我talk!');
  11. // 3.2 接收客户端的消息
  12. socket.on('msg',(data)=>{
  13. console.log(data);
  14. let msg = backMsg(data);
  15. socket.emit('msg',msg);
  16. });
  17. });
  18. // 4. 根据用户输入, 返回信息
  19. let backMsg = (data)=>{
  20. let msg = null;
  21. switch (data){
  22. case '在吗':
  23. msg = '我在呢...';
  24. break;
  25. case '1':
  26. msg = '1111';
  27. break;
  28. case '2':
  29. msg = '2222!';
  30. break;
  31. case '3':
  32. msg = '3333!';
  33. break;
  34. case '4':
  35. msg = '44444444';
  36. break;
  37. default:
  38. msg = 'what are you talking about....';
  39. }
  40. return msg;
  41. };

Node.js_06 express的更多相关文章

  1. Node.js Express连接mysql完整的登陆注册系统(windows)

    windows学习环境: node 版本: v0.10.35 express版本:4.10.0 mysql版本:5.6.21-log 第一部分:安装node .Express(win8系统 需要&qu ...

  2. Node.js Express 框架学习

    转载:http://JavaScript.ruanyifeng.com/nodejs/express.html#toc0 感觉很牛的样子,不过觉得对初学者没太大用,里面很多例子用的api都没有详细的说 ...

  3. Node.js Express 框架

    Node.js Express 框架 Express 简介 Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用,和丰富的 HTTP ...

  4. Windows下Node.js+Express+WebSocket 安装配置

    Linux参考: Linux安装Node.js 使用Express搭建Web服务器 Node.js是一个Javascript运行环境(runtime).实际上它是对Google V8引擎进行了封装.V ...

  5. Nodejs学习笔记(六)--- Node.js + Express 构建网站预备知识

    目录 前言 新建express项目并自定义路由规则 如何提取页面中的公共部分? 如何提交表单并接收参数? GET 方式 POST 方式 如何字符串加密? 如何使用session? 如何使用cookie ...

  6. React+Node.js+Express+mongoskin+MongoDB

    首发:个人博客,更新&纠错&回复 采用React + Node.js + Express + mongoskin + MongoDB技术开发的一个示例,演示地址在这里,项目源码在这里. ...

  7. Node.js Express框架

    Express 介绍 Express是一个最小的,灵活的Node.js Web应用程序框架,它提供了一套强大的功能来开发Web和移动应用程序. 它有助于基于Node Web应用程序的快速开发.下面是一 ...

  8. node.js + express(ejs) + mongodb(mongoose) 增删改实例

    MongoDB 安装步骤总结: 1.解压目录到d盘 mongodb 2.安装目录的下新建文件mongo.config文件 ##store data here dbpath=D:\mongodb\dat ...

  9. node.js express mvc轻量级框架实践

    本文记录的是笔者最近抽私下时间给朋友做的一个时时彩自动下注系统,比较简单,主要也是为了学习一下node.js. 其实逻辑没什么可以深谈的,主要是想说说这套代码结构.结构如下图: js的代码比较难以维护 ...

随机推荐

  1. Windows安装配置xampp

    建议大家直接看原文 1.安装XAMPP 进入https://www.apachefriends.org/zh_cn/index.html页面下载XAMPP 2 3.打开xampp控制版 4.修改apa ...

  2. 模仿jquery的data

    jquery中,有这个方法 var obj = {}; $.data(obj,'name','jake'); console.info($.data(obj,'name')); console.inf ...

  3. String Control

    using System; using System.Collections.Generic; using System.Text; using System.Web; using System.We ...

  4. JavaScript 递归法排列组合二维数组

    <html> <head> <title>二维数组排列组合</title> </head> <body> <div id= ...

  5. MySQL数据备份与还原(mysqldump)

    一 mysqldump指令实现数据备份.mysql指令实现数据还原 经常有朋友问我,DBA到底是做什么的,百科上说:数据库管理员(Database Administrator,简称DBA),是从事管理 ...

  6. gulpfile配置

    /** * 只包含合并压缩混淆,监听服务 */// 引入gulp模块var gulp = require('gulp'); // 引入其他模块var less = require('gulp-less ...

  7. CSS清浮动方法总结

    浮动----会使当前标签产生上浮效果,从而导致父标签高度塌陷的问题 1. 给父元素指定高度 <div style="height:200px"> <div sty ...

  8. 基础架构之GitLab

    Git几乎是软件开发人员的必备工具了,关于代码管理,公司都一般都会搭建自己的仓库,关于GitLab的详细介绍参见官方网站详见 https://about.gitlab.com,这篇文章主要介绍安装及使 ...

  9. sprintf详解

    原文:http://www.cnblogs.com/wqlblogger/archive/2007/01/09/615525.html 转摘声明:选自<CSDN 社区电子杂志——C/C++杂志& ...

  10. 自学git心得-2

    趁着最近还没忙起来,抓紧更新一下学习心得. 现在的情景是,我们已经在本地创建了一个Git仓库,又想在GitHub创建一个Git仓库,并且让这两个仓库进行远程同步,这样,GitHub上的仓库既可以作为备 ...