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/jsonproxyReq.setHeader('Content-Type','application/json');proxyReq.setHeader('Content-Length', Buffer.byteLength(bodyData));// stream the contentproxyReq.write(bodyData);}
}
var options = {target: 'http://localhost:3001', // target hostchangeOrigin: true, // 默认 false，是否需要改变原始主机头为目标 URLpathRewrite: {'^/api': '/', // 所有以 "/api" 开头的请求，"/api" 都会重写为 "/"},onProxyReq: restream,
};app.use("/api",createProxyMiddleware(options));

Node.js 单页应用相关推荐

vue实现div多选全选功能_怎样为你的 Vue.js 单页应用提速
每日前端夜话第323篇翻译:疯狂的技术宅作者:Matthias Sommer 来源:dzone 正文共:1956 字预计阅读时间:10 分钟我有一个项目用了 Vue.js 来构建单页应用程序. ...
Node.js 究竟是什么？
2019独角兽企业重金招聘Python工程师标准>>> 简介如果您听说过 Node,或者阅读过一些文章,宣称 Node 是多么多么的棒,那么您可能会想:"Node 究竟是 ...
Node.js + React + MongoDB 实现 TodoList 单页应用
之前用 Ant Design 开发了一个项目,因此对 React 的特性有了一定的了解,React 使用封装组件的思想,组件各自维护自己的状态和 UI, 组件之间通过 props 传递数据和方法.当状 ...
使用 Vuex + Vue.js 构建单页应用
原文地址:https://coligo.io/learn-vuex-by-building-notes-app/ 前言:在最近学习 Vue.js 的时候,看到国外一篇讲述了如何使用 Vue.js 和 ...
使用 Vuex + Vue.js 构建单页应用 1
鉴于该篇文章阅读量大,回复的同学也挺多的,特地抽空写了一篇 vue2.0 下的 vuex 使用方法,传送门:使用 Vuex + Vue.js 构建单页应用[新篇] ------------------ ...
如何使用Vuex+Vue.js构建单页应用
原文地址:https://coligo.io/learn-vuex-by-building-notes-app/ 前言:在最近学习 Vue.js 的时候,看到国外一篇讲述了如何使用 Vue.js 和 ...
基于React和Node.JS的表单录入系统的设计与实现
一.写在前面这是一个真实的项目,项目已经过去好久了,虽然很简单,但还是有很多思考点,跟随着笔者的脚步,一起来看看吧.本文纯属虚构,涉及到的相关信息均已做虚构处理, 二.背景人活着一定要有信仰,没有 ...
拥抱单页网站! jQuery全屏滚动插件fullPage.js
不知道从什么时候开始,单页网站就悄悄走进人们的视线,尤其是国外的网站,更是钟爱单页网站.制作一个全屏滚动的效果,然后每个滚动页弄一个好看的背景色,配上一些描述性的文字,大家都喜欢这么弄,仿佛逼格瞬间可 ...
php单屏网站源码,关于原生js实现类似fullpage的单页/全屏滚动的方法
这篇文章主要介绍了利用原生js实现类似fullpage的全屏滚动的实现方法,文中给出了完整的实例代码,相信对大家的理解和学习具有一定的参考价值,需要的朋友们可以参考借鉴,下面来一起看看吧. 前言单页 ...

Node.js 单页应用

Node.js 单页应用相关推荐

最新文章

热门文章