第一部分commonJS使用第三方框架

一.托管静态资源（让用户直接访问静态资源）

例如，如上url分别是请求一张图片，一份样式文件，一份js代码。我们实现的web服务器需要能够直接返回这些文件的内容给客户端浏览器。

根目录

├── public

│├── css

││└── index.css

│├── img

││└── bg.jpeg

│├── js

││└── axios.js

│└── index.html

└── serve.js # 服务器

//1.导入模块const express = require('express')//2.创建服务器let app = express()//3.设置请求对应的处理函数app.use(express.static('public'))//3.开启服务器app.listen(3000,()=>{console.log('success')})

二.get请求（简单键值对）

// (第一步)加载第三方插件：expressconst express = require('express')// (第二步)调用express()const app = express()// (第三步)设置请求对应的处理函数app.get('/', (req, res) => {// req:请求过来的数据：获取数据req.query(express提供)// get请求可通过url地址后a=1&b=2&c=3发送数据console.log(req.query)// res响应出去的数据res.send({ name: "张三" })})// 设置监听// 8000是端口号：在浏览器上通过ip地址+端口号可以访问app.listen(8000, () => { console.log(8000) })

三.post请求三种情况

根据请求参数的不同post请求可以分为三种情况

第一种请求参数：content-type为x-www-form-urlencoded（普通键值对）

相对应的中间件：app.use(express.urlencoded());

// 第一步：加载三方文件const express = require('express')// 第二步：使用第三方文件const app = express()// 1. 使用中间件(post请求：普通键值对)app.use(express.urlencoded());// 第三步：设置服务器app.post('/post', (req, res) => {// 如何获取请求端的数据：// 首先是普通键值对console.log(req.body)res.send({ name: '我是post响应过去的数据' })})// 第四步：app.listen(3009, () => { console.log('3009') })

第二种请求参数：json

在post传递参数时，如果要传入的参数比较复杂（多级嵌套），则可以使用json格式上传。

第二种请求参数：content-type为JSON（复杂键值对）

相对应的中间件：app.use(express.json());

// 第一步：加载三方文件const express = require('express')// 第二步：使用第三方文件const app = express()// 1. 使用中间件(post请求：josn键值对)app.use(express.json());// 第三步：设置服务器app.post('/post', (req, res) => {// 如何获取请求端的数据：console.log(req.body)// res.send({ name: '我是post响应过去的数据json' })})// 第四步：app.listen(3009, () => { console.log('3009') })

第三种请求参数：form-data

相对应的中间件：无

post文件上传操作：需要在服务器端额外使用第三方multer这个包（不属于express）来获取上传的信息。Multer 是一个 node.js 中间件，用于处理multipart/form-data类型的表单数据，它主要用于上传文件。

步骤

1.安装包

npm install multer

2.使用

// 第一步：加载三方文件const express = require('express')// 1.引入文件上传收集包const multer = require('multer')// 2.配置：上传文件会保护这个目录const upload = multer({ dest: 'uploads/' })// uploads表示目录名，你也可以设置其他的// 3. 使用// 这个路由使用第二个参数 .upload.single表示单文件上传， // 'corer' 表示要上传的文件在本次上次数据中的键名。对应于前端页面上的：// <input type="file" name='corer'/>// 第二步：使用第三方文件const app = express()// 第三步：设置服务器app.post('/post', upload.single('corer'), (req, res) => {// 如何获取请求端的数据：// req.file 记录了文件上传的信息// req.body 记录了其它普通参数（非文件）的信息console.log(req.body)console.log(req.file)res.send({ name: '我是post响应过去的数据formdata' })})// 第四步：app.listen(3009, () => { console.log('3009') })

四.RESTful接口

REST（Representational State Transfer）表述性状态转换，REST指的是一组架构约束条件和原则。 如果一个架构符合REST的约束条件和原则，我们就称它为RESTful架构。REST本身并没有创造新的技术、组件或服务，而隐藏在RESTful背后的理念就是使用Web的现有特征和能力， 更好地使用现有Web标准中的一些准则和约束。

//------------下面是普通的api设计---------------app.get('/getarticle',(req,res)=>{res.send('获取')})app.post('/addarticle',(req,res)=>{res.send('添加')})app.post('/delarticle',(req,res)=>{res.send('删除')})app.post('/updatearticle',(req,res)=>{res.send('编辑')})

---------------------RESTful接口-----------------const express = require('express')const app = express();app.get('/articles',(req,res)=>{res.send('获取')})app.post('/articles',(req,res)=>{res.send('添加')})app.delete('/articles',(req,res)=>{res.send('删除')})app.put('/articles',(req,res)=>{res.send('编辑')})app.listen(8080,()=>{console.log(8080); })

第二部分：es6模块化使用第三方框架（举例）

//导入npm下载好的三方包(es6模块化)import express from 'express'const app = express()app.get('/get', (req, res) => {// get请求：获取浏览器发送过来的数据req.query(普通键值对)console.log(req.query)// 若是跨域请求：服务器响应头设置以下res.setHeader("Access-Control-Allow-Origin", "*")res.send('请求成功,给予响应')})// 设置监听app.listen(3000, () => { console.log(3000) })

第三部分：解决跨域问题（三种解决方式）

跨域错误:不同源的ajax请求====> 报跨域的错误

同源与跨域

同源是指：协议相同，域名相同，端口相同都相同。只要有一个不同就是跨域

注意，错误是发生在浏览器端的。请求是可以正常从浏览器发到服务器端，服务器也可以处理请求，只是返回到浏览器端时出错了。

解决方案1：

给响应头添加一个属性 res.setHeader("Access-Control-Allow-Origin", "*")

解决方案2：

如果要发送多个ajax方法1的写法就太麻烦了，这时我们需要下载一个cors三方模块

第一步

npm i cors

第二步

var cors = require('cors')app.use(cors())// 之后每个响应头都会被设置

//1.导入模块const express = require('express')const { header } = require('express/lib/request')//2.创建服务器let app = express()// 导入一个cors(需要下载：这是给响应头设置res.setHeader("Access-Control-Allow-Origin", "*"))var cors = require('cors')app.use(cors())// 之后每个响应头都会被设置app.get('/getapi', (req, res) => {console.log(req.query)// 添加请求头// res.setHeader("Access-Control-Allow-Origin", "*")res.send({ name: '恭喜您get请求成功' })})//3.开启服务器app.listen(3000, () => {console.log('success')})

解决方案三：jQuery封装的jsonp

（前端使用jQuery ，后端使用nodejs + express。注意前后端都需要改动代码。）

（前端页面：加上dataType属性）

$.ajax({type: 'GET',url: 'http://localhost:4000/get', success: function (result) {console.log(result);},dataType: 'jsonp' // 必须要指定dataType为jsonp});

（后端接口：express框架已经提供了一个名为jsonp的方法来处理jsonp请求）

const express = require('express');const app = express();app.get('/get', (req, res) => {let data = {a:1,b:2}// res.json(data)res.jsonp(data)})app.listen(3000, () => {console.log('你可以通过http://localhost:3000来访问...');});

第四部分：jsonp vs cors 对比

jsonp：

不是ajax只能支持get方式兼容性好

cors:

前端不需要做额外的修改，就当跨域问题不存在。是ajax支持各种方式的请求(post,get....)浏览器的支持不好（标准浏览器都支持）