Node.js的框架

express 是第三方的

  1. express
const express=require('express');

const app=express();

const PORT=3000

const HOST='localhost'

//创建路由/路由中间件

//目标http://localhost:8000/home

app.get('/home',(req,res,next)=>{

    // req:请求

    // res:响应

    // next:请求与响应之间的连接

    res.send('平安夜')

    // res.json({

    //     name:'李兰生',

    //     day:'平安夜'

    // })

})

//监听服务器

app.listen(PORT,HOST,()=>{console.log( `xpress创建的服务器在：http://${ HOST }:${PORT}`);

})
  1. koa express 进阶版

express

  1. 构成

    • 中间件

      • 名词解释： 中间件就是一个封装函数，具有一定的功能
      • express的中间件有哪些呢？
        • 应用级中间件
        • 路由中间件
        • 错误处理中间件
      • 中间件如何调用？
        • app对象来调用

          • app.use(中间件)

app.js

const express=require('express');

const app=express();

const cors= require('cors');

const PORT=3000

const HOST='localhost'

app.use(cors())

//创建路由/路由中间件

//目标http://localhost:8000/home

app.get('/home',(request,response,next)=>{

//跨域请求头

// response.setHeader('Access-Control-Allow-Origin','*');

const http = require('http')

const cheerio = require('cheerio')

const options = {

  hostname: 'jx.1000phone.net',

  port: 80,

  path: '/teacher.php/Class/classDetail/param/rqiWlsefmajGmqJhXXWhl3ZiZ2Zn',

  method: 'GET',

  headers: {

    Accept: 'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9',

    'Accept-Encoding': 'gzip, deflate',

    'Accept-Language': 'zh-CN,zh;q=0.9,en-US;q=0.8,en;q=0.7',

    'Cache-Control': 'no-cache',

    Connection: 'keep-alive',

    Cookie: 'PHPSESSID=ST-117984-IVZSfYMlr9YXvRfFRm-A1TimOeA-izm5ejd5j1npj2pjc7i3v4z',

    Host: 'jx.1000phone.net',

    Pragma: 'no-cache',

    Referer: 'http://jx.1000phone.net/teacher.php/Class/index',

    'Upgrade-Insecure-Requests': 1,

    'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.88 Safari/537.36',

    'Content-Type': 'application/x-www-form-urlencoded',

    'Content-Length': 0

  }

}

http.get(options, (res) => {

  /* res就是我得到的返回值 */

  const { statusCode } = res; // 状态码

  const contentType = res.headers['content-type']; // 得到的文件类型

  res.setEncoding('utf8'); // 中文编码

  let rawData = ''; // 真实数据

  res.on('data', (chunk) => { rawData += chunk; });// 通过data事件将数据分片，然后逐片添加到rawData身上，好处就是当我们执行每一个分片的小任务时，至少给其他任务提供了可执行的机会

  res.on('end', () => { // 表示结束

    try { // 高级编程 错误捕获

      const $ = cheerio.load( rawData )

      let arr=[];

      $('.student a').each(function ( index,itm ) {

        // console.log( $( this ).text() ) // 每一个的内容

        arr.push( {

            id:index+1,

            name:$( this ).text()

        });

      })

      response.json( arr);

    } catch (e) {

      console.error(e.message);

    }

  });

}).on('error', (e) => {

  console.error(`Got error: ${e.message}`);

});

})

//监听服务器

app.listen(PORT,HOST,()=>{console.log( `xpress创建的服务器在：http://${ HOST }:${PORT}`);

})

index.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

</head>

<body>

    <button> 获取数据 </button>

    <br>

    <table>

      <thead>

        <tr> <td>编号</td> <td> 姓名 </td> </tr>

      </thead>

      <tbody>

      </tbody>

    </table>

</body>

<script>

const baseURL='http://localhost:3000'

$('button').on('click',function(){

//     $.ajax({

//     url:`${baseURL}/home`,

//     success(res){

//         console.log(res);

//     }

// })

    $.ajax({

        url:`${baseURL}/home`,

        success(res){

            let str=``;

            for(var item of res){

                str+=`<tr>

                    <td>${item.id}</td>

                    <td>${item.name}</td>

                    </tr>`

            }

            $('tbody').html(str)

        }

    })

})

</script>

</html>
  • 路由

    • 前端： 接口
    • 后端： 路由

  1. 跨域【 后端跨域 】

    • 设置请求头
    • response.setHeader('Access-Control-Allow-Origin','*')
    • 利用第三方模块来跨域 cors

  2. 使用工程化工具来构建一个完整的 express 项目

    • 工程化工具/自动化工具/脚手架

      • express-generator

        • express-generator 使用

            1. 安装
            • $ cnpm i express-generator -g
            • $ express -e 项目名称
          • OR
            1. 不安装使用
            • 保证你的电脑中npm版本 > 5.2
            • $ npx express -e 项目名称
          • 名词解释： -e 表示ejs文件，它是一个html模板

express-generator

  1. 目录

    • bin/www 为项目创建了一个服务器
    • public 静态资源文件夹
      • img
      • style
      • js
    • routes 路由
    • views
      • 路由对应的模板，这个模板将来会发送给前端，发给前端前会被解析为html文件
    • app.js 项目入口文件
// 项目需要的第三方模块

var createError = require('http-errors');//记录错误信息

var express = require('express');//express的顶级库，提供espres api

var path = require('path');//处理磁盘路径

var cookieParser = require('cookie-parser');//cookie

var logger = require('morgan');//记录日志信息

//引入自定义的路由中间件

var indexRouter = require('./routes/index');

var usersRouter = require('./routes/users');

//创建app对象

var app = express();

// 视图引擎设置

app.set('views', path.join(__dirname, 'views'));//处理view的绝对路径

app.set('view engine', 'ejs');//设置项目模板渲染引擎为ejs

//通过app对象来使用中间件

app.use(logger('dev'));

app.use(express.json());//为post请求做格式化

app.use(express.urlencoded({ extended: false }));//项目文件可以省略项目后缀

app.use(cookieParser());

app.use(express.static(path.join(__dirname, 'public')));//确定项目资源静态目录指定为pubic

//调用路由中间件  创建接口

app.use('/api', indexRouter);

app.use('/api', usersRouter);

// 捕获404并转发给错误处理程序(错误中间件)

app.use(function(req, res, next) {

  next(createError(404));

});

//错误处理程序

app.use(function(err, req, res, next) {

  // 设置局部变量，只提供开发中的错误

  res.locals.message = err.message;

  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // 渲染错误页面

  res.status(err.status || 500);

  res.render('error');

});

module.exports = app;
  • packge.json

    • 表示项目启动脚本记录 、 项目所需要的依赖包【 插件 】
    • npm install
    • npm run start

  1. Node.js可以当做一个后端的角色

    • 能不能给前端做接口
    • 去熟悉项目运行思维
      • package.json -> node ./bin/www -> app.js -> routes/index.js & users.js

  2. 后端测试接口

    • postman
    • insomnia

Node.js的框架-express的更多相关文章

  1. node.js入门及express.js框架

    node.js介绍 javascript原本只是用来处理前端,Node使得javascript编写服务端程序成为可能.于是前端开发者也可以借此轻松进入后端开发领域.Node是基于Google的V8引擎 ...

  2. 全端开发必备！10个最好的 Node.js MVC 框架

      Node.js 是最流行的 JavaScript 服务端平台,它允许建立可扩展的 Web 应用程序.Node.js 包含不同类型的框架,如 MVC 框架.全栈框架.REST API  以及大量的服 ...

  3. Koa – 更加强大的下一代 Node.js Web 框架

    Koa 是 Express 的开发团队设计的下一代 Web 框架,其目的是为 Web 应用程序提供更小,更具表现力,更坚实的基础.Koa 没有核捆绑任何中间件,并提供了一​​套优雅的方法,使服务器端开 ...

  4. 建立一个node.js服务器(使用express搭建第一个Web环境)

    一.官网下载node.js 下载地址:https://nodejs.org/en/download/ 根据向导,下一步安装就可以了! 二.使用express搭建Web环境 express是一个开源的n ...

  5. 【360开源】thinkjs：基于Promise的Node.js MVC框架 （转）

    thinkjs是360奇舞团开源的一款Node.js MVC框架,该框架底层基于Promise来实现,很好的解决了Node.js里异步回调的问题.360奇舞团(奇虎75Team),是奇虎360公司We ...

  6. 十款最佳Node.js MVC框架

    十款最佳Node.js MVC框架摘要:Node.js是JavaScript中最为流行的框架之一,易于创建可扩展的Web应用.本文分享十款最佳的JavaScript框架. Node.js是JavaSc ...

  7. Node.js 入门：Express + Mongoose 基础使用

    前言 Express 是基于 Node.js 平台的 web 应用开发框架,在学习了 Node.js 的基础知识后,可以使用 Express 框架来搭建一个 web 应用,实现对数据库的增删查改. 数 ...

  8. 强大的 Node.js Web 框架 - Daze.js

    去年年初对 Node.js 比较感兴趣,也用了很多 Node.js 的框架,但是开发体验不是特别好,我之前也是后端转前端,然后再接触 Node.js ,所以用过挺多的服务端框架,相对js而言,设计一款 ...

  9. Node.js日志框架选型比較：Winston

    日志对于问题定位.调试,系统性能调优至关重要,尤其是系统复杂以及在线执行的情况下. 好的开发框架都会有一个可开启关闭/可配置记录级别的日志系统.我们从下面几个方面来做选型: 1. 每行日志都须要有准确 ...

随机推荐

  1. Activiti流程定义语言

    1.流程(process) bpmn文件一个流程的根元素.一个流程就代表一个工作流. 2.顺序流(sequenceFlow) 顺序流是连接两个流程节点的连线,代表一个节点的出口.流程执行完一个节点后, ...

  2. AIO异步非阻塞学习

    Client:客户端 package aio; import java.io.UnsupportedEncodingException; import java.net.InetSocketAddre ...

  3. parameter–key parameters

    http://www.tweakers.fr/timings.html -Cas# Latency (tCL).Number of clocks that elapses between the me ...

  4. JZOJ2368 【SDOI2011】黑白棋

    题目 题目大意 在一个1*n的棋盘上,有黑棋和白棋交错分布,每次,一个人可以移动自己的ddd颗旗子. 问先手必胜的方案数. 思考历程 在一开始,我就有点要放弃的念头. 因为这题是一道博弈问题. 我是非 ...

  5. 廖雪峰Java10加密与安全-3摘要算法-1MD5

    1.摘要算法 1.1 摘要算法(哈希算法/Hash/数字指纹): 计算任意长度数据的摘要(固定长度) 相同的输入数据始终得到相同的输出 不同的输入尽量得到不同的输出 1.2 摘要算法目的: 验证数据和 ...

  6. 【转】 解释下浏览器是如何判断元素是否匹配某个 CSS 选择器？

    先产生一个元素集合,然后从后往前判断: 浏览器先产生一个元素集合,这个集合往往由最后一个部分的索引产生(如果没有索引就是所有元素的集合).然后向上匹配,如果不符合上一个部分,就把元素从集合中删除,直到 ...

  7. c语言学习笔记 - 枚举类型

    今天学习了c语言的枚举类型的使用,可能是PHP里没使用过,开始看的时候还是觉得有点怪,后来做了下例子才理解,这里做个笔记记录一下. #include <stdio.h> enum anim ...

  8. UITableViewHeaderFooterView can't change custom background when loading from nib

    down voteforite I've created a custom UITableViewHeaderFooterView and successfully load from nib int ...

  9. mysql基础教程(三)-----增删改、子查询、创建管理表、约束和分页

    插入 INSERT语句语法 从其它表中拷贝数据 • 不必书写 VALUES 子句. • 子查询中的值列表应与 INSERT 子句中的列名对应 update语句 • 可以一次更新多条数据. • 如果需要 ...

  10. Python学习 备注(2)

    由于python下许多框架都是在python2下的,python3向下不兼容 需安装python2 安装好后,使用pip安装python下的框架scrapy 总是报错,最后发现是包管理器,pip的版本 ...