express 初识

时间 2019-12-13

标签 express 繁體版

原文原文链接

 
    详情戳这里！全栈之巅 
   

0 安装

npm install express

0.1 初始化

创建一个js文件。

如server.js

2 接口搭建--路由快速上手

2.1 引入核心文件，建立实例，监听端口。

node js和浏览器js有个区别。模块化。

    // 要不从核心包来引用 
  
    // 要不从当前node_module来查找 
  
    // 要不 就指定路径。 
  
    // https://blog.csdn.net/crystal6918/article/details/74906757/ 
  
    const express = require('express'); 
  
    // 执行这个函数，返回一个实例 
  
    const app = express(); 
  
    // 监听3000端口，当服务启动后，输入 后面的回调中的内容。 
  
    app.listen(3000,()=>{ 
  
    console.log("App is listening on port: 3000!") 
  
    }) 
  
    // 上面没有定义 接口 或者路由，没有接口。

这个时候，用浏览器打开3000端口，会报错，can not get

2.2 搭建接口

好比定义一个get 接口。

    // 当get请求4000端口时，给客户端发送一个Ok 
  
    app.get('/',function(req,res){ 
  
    res.send('ok') 
  
    })

这一步须要初步前端的了解http请求。

下面对前端来讲展现一下node js的优越性。

    // 当get请求4000端口时，给客户端发送一个Ok 
  
    app.get('/',function(req,res){ 
  
    res.send([ 
  
    {user:'johnny'} 
  
    ]) 
  
    })

返回json的话，这种形式多是全部编程语言里最简单最方便的办法了！不须要什么变化，客户端是JS，服务端也是JS，JSON不须要转译，原生JSON就能够直传。

客户端怎么写，服务端还怎么写！

2.3快速更新服务端更改。

安装nodemon. 用这个程序运行服务端文件。能够自动监听文件更改和重启。

注意 nodemon要全局安装，在当前工做区安装，很差用。

3 静态文件托管

上一步定义了'/'对根路径的接口，如今把以前的路由删除，改成静态文件的地址。

首先在根目录创建一个public文件夹，在里边放一个index.html文件。

下面这个中间件专门处理静态文件的托管，这样public当中的静态文件就能够直接被访问。

    app.use(express.static('public')) 
  

受控访问

    app.use('static',express.static('public')) 
  

这样写，必须经过/static来访问public中的静态文件。

4 CORS跨域请求

4.1 什么是跨域？

    app.get('/products',function (req,res) { 
  
    res.send([ 
  
    {id:1,name:'product1'}, 
  
    {id:2,name:'product2'}, 
  
    {id:3,name:'product3'} 
  
    ]) 
  
    })

在浏览器输入 http://localhost:3000/products ，此时能够正常打开页面。

下面在html 中嵌入一段代码

注意下面的两步then。第一步返回一个Promise对象，第二步返回真正的数据

    <!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> 
  
    </head> 
  
    <body> 
  
    <h1>苟利国家生死以</h1> 
  
    </body> 
  
    <script> 
  
    fetch('http://localhost:3000/products').then(res => res.json()).then(data => { 
  
    console.log(data); 
  
    }) 
  
    </script> 
  
    </html>

随后，用golive server插件打开index.html页面。

可见浏览器报错(想要得到和教程同样的显示，请使用chrome)

可见，从5500端口得到3000端口的index.html文件被CORS 规则阻断了。由于3000端口的服务端，不容许其它域来访问。 5500端口的响应头中没有指出 'Access-Control-Allow-Origin'

4.2 怎么解决跨域问题？

首先安装 cors

npm i cors。

随后使用 cors。

    // cors包require 后返回一个函数，直接执行他，会返回一个express能够直接使用的中间件 
  
    // 这一行就能够解决跨域问题 
  
    app.use(require('cors')())