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 {
   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相对应
    }
  }
})