Node.js 单页应用

概念：

为了提高效率和一般都会直接通过前端的静态页面进行单页应用，利用js对页面进行操作和替换跳转。

步骤：

1、单页应用主要在public静态文件里面。

2、所有的页面显示都在index.html里面。

3、引入的样式、框架都需要在index.html引入，还有一个总的main.js文件。

4、把每一个页面都写成模块化放在modules里面，都是以类的方式来写，就包括页面的渲染的内容，操作的事件等。

 

5、然后再总的main.js文件里面根据实际逻辑把每一个模块化进行实例化就可以了。

 

6、每一个模块化在index.html里面都可以是一个独立的标签，或者同一个标签进行内容的替换，所以index.html就是放很多的标签，这样相互之间互不影响。

7、需要注意就是一些数据接口，之前是http://127.0.0.1:3000/user，只需要改成/api/user，就可以了，因为配置了中间件，会自动拦截并根据配置地址去访问后端服务器。

 8、然后如果有其他功能代码比较多，也可以分成模块化进行，某个事件触发在实例化。

 

 

post，put请求的问题

问题：

1、因为使用了代理服务器，那么就相当于前端是一个独立的服务器了，浏览器的请求都需要经过前端服务器去中转一次在去后端服务器请求。

2、由于脚手架生成了工程，就会自动有bodyParser相关代码对我们的请求数据进行处理，导致数据无法传到后端服务器。

解决方法：

1、最简单的解决办法就是把前端服务器中的入口文件app.js，对bodyParser中间件引用的相关代码去掉即可。

 

2、当然，也可以自己做一下转换配置，不需要前端服务器去处理这些 。

 

const { createProxyMiddleware } = require('http-proxy-middleware');
const restream = function(proxyReq, req, res, options) {
  if (req.body) {
      let bodyData = JSON.stringify(req.body);
      // incase if content-type is application/x-www-form-urlencoded -> we need to change to application/json
      proxyReq.setHeader('Content-Type','application/json');
      proxyReq.setHeader('Content-Length', Buffer.byteLength(bodyData));
      // stream the content
      proxyReq.write(bodyData);
  }
}
var options = {
  target: 'http://localhost:3001', // target host
  changeOrigin: true, // 默认 false，是否需要改变原始主机头为目标 URL
  pathRewrite: {
    '^/api': '/', // 所有以 "/api" 开头的请求，"/api" 都会重写为 "/"
  },
  onProxyReq: restream,
};

app.use("/api",createProxyMiddleware(options));