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')())

猜你喜欢