后端渲染数据到页面

1、在创建的文件夹下建好相应文件，如html，js，json等

2、在文件夹下打开终端，输入命令：npm init -y，初始化生成package.json文件

3、使用express包创建接口，安装express,命令为：

npm i express -D

4、在js文件中引入express，语句为：

const express = require('express')

5、创建app对象，语句为：

const app = express();

6、创建服务器，语句为：

app.listen(port,host,()=>{
	console.log(`The server is running at:http://${host}:${port}`)  //提示语句，说明当前服务器运行的端口
})

此时需要定义host和port

const host = 'localhost';
const port = 8000;

7、暴露接口

app.get('/',(response,request,next)=>{
	res.json({
		name:'zhangsan'   //自己写的数据
	})
})

8、测试接口

启动服务器，即运行js文件，命令为：

nodemon index.js  //自己的js文件是哪个就运行哪个

服务器启动成功会在终端输出The server is running at:http://localhost:8000

去Insomnia测试，输入http://localhost:8000看服务器运行是否有输出结果

注意：输出结果不正确可能是服务器地址输错了；

9、去html页面发ajax

先引入jquery，在BootCDN网站去复制jquery标签

$.ajax({
	url:'http://localhost:8000',
	method:'GET',
	success(res){
	console.log(res)
	}
})

写入这段代码，发送ajax请求，ctrl+B运行，控制台会报跨域错误，此时，需要解决跨域问题，可以前端跨域，也可以后端跨域，这里选择后端跨域，所以需要去js文件中解决跨域问题

10、使用cors跨域，可以去npm网站查找使用方法

先安装cors，命令为

npm i cors -D

在js文件中引入cors，语句为

const cors = require('cors')

使用app的use方法跨域，代码为

app.use(cors({
	"origin":"*",
	"method":"GET","POST","HEAD","PUT","DELETE",
	"preflightContinue":false,
	"optionsSuccessStatus":200   //这段代码可以在npm网站查找到，复制进来使用即可
}))

此时跨域问题就解决了，刷新html页面，测试服务器连接，正常会在控制台接收到传送过去的数据

11、渲染页面

拿到数据后通过jquery方法将数据渲染到页面

12、使用app.get请求其他网站的数据，而不是自己写入的数据

app.get('/',(req,res,next)=>{
	request('http://m.lagou.com/listmore.json',(error,response,data)=>{
	if(error) throw error;
	res.json(JSON.parse(data))
	})
})

这里需要引入request

13、使用文件读取的方式请求数据

app.get('/',(req,res,next)=>{
    fs.readFile('./text.json','utf8',(error,data)=>{   //json文件里面放的是数据
    if(error) throw error;
    res.json(JSON.parse(data))
	})
})

这里需要引入fs

后端渲染数据到页面

后端渲染数据到页面

悦读