node做渲染服务器的实现

node 可以进行什么样的开发??

1.数据服务器专门书写接口前后端分离式的开发
2.渲染服务器除了书写接口，还要负责页面的返回和渲染，在 node 中把页面中需要的所有数据直接组装好，返回给前端一个组装好的页面
3.中间层渲染作为一个中转服务器，提供页面，逻辑: 前端 <-> node 中间层 <-> 数据服务器

渲染服务器的分析:

1.通过url的改变来获取服务器返回的页面，同时发送请求的数据，通过数据，进行数据库对比，进而返回页面
2.文件夹分类:

public 放静态资源: 前端页面需要的静态资源(js, css, image, audio, ...)
views 放前端的显示的页面
db 放数据库操作
app.js 服务器启动文件
model 服务器需要用的各种独立封装模块
....

以一个简单的登录注册来表示

app.js 服务器启动文件

const http = require(\'http\')
const fs = require(\'fs\')
const urlModel = require(\'url\')
const { selectUser } = require(\'./db/db_model\')

// 准备一个标识符, 表示是否登陆过
let userNikename = \'\';
http.createServer((req, res) => {
  const { url } = req // => const url = req.url
  if (url.startsWith(\'/views\')) {
    fs.readFile(\'.\' + url, \'utf8\', (err, data) => {
      if (err) return console.log(err)
      if (url === \'/views/index.html\') {
        //   通过userNikename值的变化来改变登录数据的动态变化
        data = data.replace(\'{{ abc }}\', userNikename ? userNikename : \'请登录\')
      }
      res.end(data)
    })
  }

  if (url.startsWith(\'/public\')) {
    fs.readFile(\'.\' + url, (err, data) => {
      if (err) return console.log(err)

      res.end(data)
    })
  }

  // 判断你是在做登录请求
  if (url === \'/login\') {
    let str = \'\'
    // 接收参数
    req.on(\'data\', (chunk) => {
      str += chunk
    })

    req.on(\'end\', async () => {
      const { username, password } = urlModel.parse(\'?\' + str, true).query

      // 查询数据库
      const result = await selectUser([username, password])

      // 根据查询结果, 想前端返回一些数据
      if (result.length) {
        userNikename = result[0].username   //这里实现userNikename值的动态变化
        res.end(\'{ "message": "登录成功", "code": 1 }\')
      } else {
        res.end(\'{ "message": "登录失败", "code": 0 }\')
      }
    })
  }
}).listen(8080, () => console.log(\'running at port 8080 ! ^_^\'))

view下的两个html文件
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>首页</h1>
    <p>你好 {{abc}}</p>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="/public/js/login.js" async defer></script>
</head>
<body>
    <form action="">
        用户名: <input type="text" name="username" autocomplete="off"><br>
        密码: <input type="text" name="password" autocomplete="off"><br>
        <button>提交</button>
      </form>

</body>
</html>

public下的js和css文件
login.css

* {
  margin: 0;
  padding: 0;
}

form {
  width: 500px;
  padding: 30px;
  margin: 100px auto;
  border: 10px solid pink;
}

form > input {
  margin: 20px 0;
}

const form = document.querySelector(\'form\')
const nameInp = document.querySelector(\'input[name=username]\')
const pwdInp = document.querySelector(\'input[name=password]\')

form.addEventListener(\'submit\', e => {
  e.preventDefault()

  const username = nameInp.value
  const password = pwdInp.value

  // 表单验证


  const xhr = new XMLHttpRequest()
  xhr.open(\'POST\', \'/login\')
  xhr.setRequestHeader(\'content-type\', \'application/x-www-form-urlencoded\')
  xhr.send(`username=${ username }&password=${ password }`)
  xhr.onload = function () {
    const { code } = JSON.parse(xhr.responseText)

    if (code === 1) {
      window.location.href = \'./index.html\'     //通过返回的code值来判断是否跳转页面，和node的userNikename相对应
    }
  }
})