服务器端渲染SSR

服务器端

1、服务器：可以运行在服务器端的网站

2、分类：

• web服务器：又称静态服务器，可以运行在浏览器中的服务器，通过后端语言+后端渲染模板—>生成前端html结构，然后发送到前端（后端渲染）
  • 模式有：
    • php
    • java+jsp
    • Node + html / ejs / pug —>html结构 —>前端
• api服务器：使用express来打造服务器，一个路由就是一个api，也是一个后端接口
  • 对于接口的测试：一般是后端会来找前端提这个需求
  • 以前，一般是前端发ajax请求这个后端接口，看数据能否正常拿到
  • 但是这里面就涉及到跨域了：
    - 前端跨域：jsonp、反向代理
    - 后端跨域：设置请求头、cors中间件
  • 这么来写请求，虽然可以，但是也感觉麻烦，所以一般使用测试工具测试：Insomnia、postman

//web服务器:可以通过 http://localhost:8000/home 来访问这个页面

const express = require( 'express' )
//得到app对象， 目的是为了绑定中间件
const app = express() 
const PORT = 8000 //常量为了和变量区分开，一般都大写
const HOST = 'localhost'
const fs = require( 'fs' ) // 文件系统，用来读取html模板中的内容
// 要想将模板中的内容发送出去，我们可以通过app对象和路由中间件来做
//app.get(路径，中间件函数)
app.get('/home',( request,response,next ) => {//这里的箭头函数部分就是中间件
  // fs.readFile( 路径，字符编码， 回调函数)
  fs.readFile( './static/html/index.html', 'utf8', ( error,docs ) => {
    if( error ){
      console.log( error )
    }else{
      response.send( docs )//没有错误时，发送读取到的内容至前端
    }
  })  
})
// 监听服务器
app.listen( PORT,HOST,() => {
  console.log( `服务器运行在: http://${ HOST }:${ PORT }` )
})

//api服务器
//1、
const express = require( 'express' )
const app = express() 
const PORT = 5000 
const HOST = 'localhost'

const userRouter = require( './route/user.js' )//引入下面2这个模块
app.use('',userRouter) //通过app对象使用路由模块

app.listen( PORT,HOST,() => {
  console.log( `The server is running at:http://${ Host }:${ PORT }` )
})

//2、
const express = require( 'express' )

const router = express.Router() //得到路由对象  模块创建

// 打造接口

// 格式： router.get( 路由路径， 回调函数 )

router.get('/user', ( req,res,next ) => {

  res.json({//这里也可以转成res.render使用ejs模板模式
    ret: true,
    name: 'lzc'
  })

})

module.exports = router // 模块的导出