Nodejs-express

express

express

express通用生成器（脚手架）

• 作用：可以帮助我们快速构建一个express项目

• 安装：

  • 全局安装：$ npm i express-generator -g
  • npx安装
    • npx是npm的一个管理工具，可以让我们不全局安装某一个包就使用
    • npx要求npm版本在5.2以上，自动携带
    • 好处：帮助我们减少内存的使用

• 使用：

  • 全局安装的使用：express -e 项目名称
  • npx的使用：npx express -e 项目名称

• 安装项目依赖包

• 在项目目录下 npm install

• 项目目录结构

  • 1.package.json[记录了项目的依赖包信息，npm脚本]

  • 2.项目启动文件 bin/www

    • 它是通过http来做了一个服务器，默认端口是：3000
    • 引入app文件（入口文件），createServer中的回调函数放在其中，是以模块化的形式使用的。

  • 3.app.js（入口文件）文件

    • express是由路由和中间件构成的

      • 路由：可以完成页面的连接或是接口的打造

      • 中间件：是一个具有特定功能的函数

        • 类型：

          • 1.应用级中间件

            app.use(logger('dev')); // 日志文件记录
            app.use(express.json()); // json数据格式化
            app.use(express.urlencoded({ extended: false })); // 引入文件后缀名省略
            app.use(cookieParser()); // cookie处理
            app.use(express.static(path.join(__dirname, 'public'))); // 指定项目静态资源文件夹为public
            

          • 2.路由中间件

            app.use('/', indexRouter);
            app.use('/users', usersRouter);
            

          • 3.错误处理中间件

            // catch 404 and forward to error handler
            app.use(function(req, res, next) {
              next(createError(404));
            });
            
            // error handler
            app.use(function(err, req, res, next) {
              // set locals, only providing error in development
              res.locals.message = err.message;
              res.locals.error = req.app.get('env') === 'development' ? err : {};
            
              // render the error page
              res.status(err.status || 500);
              res.render('error');
            });
            

        • 参数

          • req : 全称： request 表示请求
          • res : 全称： response 表示响应
          • next: 表示request和response之间的连接 ， 相当于桥梁的作用
            • next如果断开，那么请求和响应就会中断 next( false )

        • 调用：app.use()

  • 4.路由中间件

    • 以模块化形式使用

    • 在routes目录下

      app.js

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

      routes/index.js

      var express = require('express');
      var router = express.Router(); //路由对象创建
      
      /* GET home page. */
      router.get('/', function(req, res, next) { // 中间件
          //后面的选项表示数据，将数据响应给客户端（浏览器）
        res.render('index', { title: 'Express' });								
      });
      
      // 导出模块
      module.exports = router;
      

      • 上下一共2个路径，这2个路径会拼接在一起
      • 渲染页面到前端只用get
      • res.render(‘index’)
        • 配置了模板的路径

    • 配置了后缀名省略

  • 5.view目录下的xxx.ejs

    • ejs文件中可以直接在模板语法中使用数据

    • ejs语法

      • 非转义输出 <%- %> 可以解析xml类型数据

      • 转义输出 <%= %> 可以解析普通类型数据

      • 流程控制

      • 注意：ejs语法符号是不能换行的

        <% data.todos.forEach(function ( item ) { %>
                    <li> <%= item.task %> </li>
                  <% }) %>
        

express来打造api服务器( 后端接口 )

• 步骤

  • 1.通过脚手架搭建项目

  • 2.创建接口

    • 接口就是路由
    • 接口打造遵循一个规则：restful api
    • 现在流行的接口：接口只有一个，但是数据请求方式多个

  • 3.接口测试

    • 使用测试工具

      • postman
      • insomina

    • 前端进行接口数据请求

      • Front End 前端 FE

      • Back End 后端 BE

      • 跨域问题【后端解决】

        • 设置请求头

          const express = require( 'express' )
          
          const router = express.Router() //路由对象创建
          
          //接下来我们打造接口 ,使用restful api
          
            router.route('/position')
              .post((req,res,next) => {
                res.setHeader('Access-Control-Allow-Origin','*')
                res.render('position',{
                  data: JSON.stringify({
                    info: 'post',
                    status: 200,
                    name: 'xbw'
                  })
                })
              })
          

          在后端接口文件中，支持get、post,不支持，不支持put、delete

        • 使用中间件 cors [ 第三方模块 ] —安装

          var cors = require( 'cors' )
          
          //路由中间件之前插入
          
          // 统一设置跨域
          
          app.use(cors({
            "origin": "*",
            "methods": "GET,HEAD,PUT,PATCH,POST,DELETE",
            "preflightContinue": false,
            "optionsSuccessStatus": 200
          }))
          

          在app.js文件中，支持get、post、put、delete。

      • 前端跨域

        • jsonp

        • 反向代理

          • 在前端服务器中短暂的开启一个后端，让这个后端帮助我们请求数据，然后在返回给前端

           //使用request 的模块进行数据请求
           const request = require( 'request' )
          
           const express = require( 'express' )
           
           const app = express()
          
           const port = 5000 
          
           const hostname = 'localhost'
          
          
            app.get('/user',(req,res,next) => {
              res.setHeader('Access-Control-Allow-Origin','*')
              request('https://m.lagou.com/listmore.json',(error,response,body) => {
                res.json( JSON.parse(body) )
               })
            })
          
           app.listen( port,hostname,() => {
             console.log(`接口服务器为： http://${ hostname }:${ port }`)
           })