node.js-跨域、路由、异步流程工具

1、跨域

前言：产生跨域的原因是浏览器的同源策略。

node.js如何解决跨域？

​ 在解决跨域之前首先了解一个插件：express；使用这个插件可以创建一个接口

• 通过设置请求头来解决跨域问题。

  //首先安装express
  //npm install express -D
  //引入express
  const express = require('express');
  const app = express();
  //创建接口
  app.get('/', function (request, response) {
      // 设置header解决跨域问题
      response.setHeader('Access-Control-Allow-Origin', '*');
      response.json({
          id: 1,
          name: 'zhangsan'
      })
  })
  //监听接口
  app.listen(9000, 'localhost', () => {
      console.log('服务器已开启')
  });
  

​ 此方法的缺点是：如果想要同时获取多个接口的值，那每一个都要写一遍response.setHeader(‘Access-Control-Allow-Origin’, ‘*’);过于繁琐。

• 通过cors插件来解决跨域问题。

  //安装cors插件：npm install cors
  const express = require('express');
  const app = express();
  const cors = require('cors');
  
  app.use(cors({
      "origin": "*",
      "methods": "GET,HEAD,PUT,PATCH,POST,DELETE",
      "preflightContinue": false,
      "optionsSuccessStatus": 200
  }))
  
  app.get('/', (request, response) => {
      response.json({
          id: 1,
          name: 'wangwu',
          sex: 'nan'
      })
  })
  
  app.listen(9000, 'localhost', () => {
      console.log('服务器已开启');
  })
  

• 通过后端代理取得数据再将数据传给前端。

  const request = require('request')
  const express = require('express')
  const host = 'localhost'
  const port = 3000
  const app = express()
  const url = 'https://m.lagou.com/listmore.json'
  
  //创建接口
  app.get('/position', (req, res, next) => {
    res.setHeader('Access-Control-Allow-Origin', '*'); // 设置请求头跨域
    // 数据请求
    request(url, (error, response, body) => {
      res.json(JSON.parse(body))
    })
  
  })
  
  app.listen(port, host, () => {
    console.log(`The server is running at: http://${host}:${port}`)
  })
  

2、node后端路由基本原理

前言：后端路由其实就是一个web服务器。基本原理就是：根据路径的不同让页面显示不同的内容（单页面）

• ​ 案例：

  const http = require('http')
  const host = 'localhost'
  const fs = require('fs')
  const port = 3000
  
  http.createServer((req, res) => {
      res.writeHead(200, {
        'Content-type': 'text/html;charset=utf8'
      })
      switch (req.url) {
        case '/home':
          res.write('home')
          res.end()
          break;
        case '/shopcar':
              //到达此步只能显示HTML文档内的内容，图片和js文档无法正常显示。
          fs.readFile('./static/shopcar.html', 'utf8', (error, docs) => {
            res.write(docs)
            res.end()
          })
          break;
        case '/1.jpg':
              //如果想要正常显示图片，需要将图片从后端传给前端，否则请求不到。
          fs.readFile('./static/1.jpg', (error, docs) => {
            // 图片是以二进制传输的
            res.write(docs, 'binary')
            res.end()
          })
          break;
        case '/index.js':
              如果想要正常显示js内容，需要将js文件从后端传给前端，否则请求不到。
          fs.readFile('./static/js/index.js', (error, docs) => {
            res.write(docs)
            res.end()
          })
          break;
  
        default:
          break;
      }
    })
  
    .listen(port, host, () => {
      console.log(`服务器运行在：http://${host}:${port}`)
    })
  

3、前端异步流程工具

前言：为什么要进行异步操作？

​ 答：javascript是单线程，依次执行一个任务，要想让任务能够顺利进行，我们需要排队。异步就是将任务放入异步队列，在主线程执行结束之后再去执行。

前端异步的操作方式：

• 传统方式：回调函数和事件
• 前端异步流程工具 【 封装出来函数、库 】ps:详情可见所转载的文件。
  • es6 Promise
  • es6 Generator函数
  • es6 - es8 async 函数
  • Node中的异步处理工具： nextTick setImmediate
  • 第三方类库： async.js