静态服务器使用node搭建一个可在任何目录下通过命令启动的一个简单http静态服务器 完整代码链接安装：npm install yg-server -g启动：yg-server 可通过以上命令安装，启动，来看一下最终的效果 TODO 创建一个静态服务器通过yargs来创建命令行工具处理缓存处理压缩初始化 创建目录：mkdir static-server进入到该目录：cd static-server初始化项目：npm init构建文件夹目录结构:初始化静态服务器首先在src目录下创建一个app.js引入所...
前言 Express 是一个node.js Web框架，提供强大特性帮助你创建各种 Web 应用，和丰富的 HTTP 工具。他可以让前端工程师做后端的事，与数据库交互，可以通过向模板传递参数来动态渲染 HTML 页面。 初学者使用express可以快速的搭建一个Web项目，express中已经集成了Web的http服务器创建、请求和文件管理以及Session的处理等功能，所以express是非常适合初学者的入门学习。 使用教程 安装前需系统配置Node.js环境，然后使用Npm安装Ex...
我们已经熟悉React 服务端渲染（SSR）的基本步骤，现在让我们更进一步利用 React RouterV4 实现客户端和服务端的同构。毕竟大多数的应用都需要用到web前端路由器，所以要让SSR能够正常的运行，了解路由器的设置是十分有必要的 基本步骤路由器配置前言已经简单的介绍了React SSR，首先我们需要添加ReactRouter4到我们的项目中 $ yarn add react-router-dom# or, using npm $ npm install react-router-dom 接着我们会描述一个简单的...
说明实现 路由跳转、redux 文件版本 “next”: “^4.2.3”,“react”: “^16.2.0”,“react-dom”: “^16.2.0”Next.js GitHub 文档 项目源码 使用Next.js 使用文件体统作为API，可以自动进行服务器端渲染和代码分割 1. 安装 yarn add next react react-dom2. package.json 中添加 npm script "scripts": {"dev": "next","build": "next build","start": "next start"}, 3. 创建 /pages 文件夹，其中文件会映射为路由/pages 文件夹...
最近在开发一个服务端渲染工具，通过一篇小文大致介绍下服务端渲染，和服务端渲染的方式方法。在此文后面有两中服务端渲染方式的构思，根据你对服务端渲染的利弊权衡，你会选择哪一种服务端渲染方式呢？ 什么是服务器端渲染 使用 React 构建客户端应用程序，默认情况下，可以在浏览器中输出 React 组件，进行生成 DOM 和操作 DOM。React 也可以在服务端通过 Node.js 转换成 HTML，直接在浏览器端“呈现”处理好的 HTML 字符串，这个...
为什么要SSR单页应用将UI层和内容都由javascript来渲染，搜索引擎或网页爬虫需要完成的HTML结构，因此单页应用如果只在客户端渲染，不利于SEO，此外尽管我们可以通过按需加载的形式来减少首页加载的js，但是通过js来渲染DOM的时候还是会有一定的时间延迟。 0.前言 服务端渲染在项目中不是刚需的东西，但有的时候也是需要做一个服务端渲染，项目要做服务端渲染当然是有很多好处的 首屏加载快，相比SPA单页应用还要有优势。SEO 优化 ...
Server Side Rendering（服务端渲染） SSR 目的是为了解决单页面应用的 SEO 的问题，对于一般网站影响不大，但是对于论坛类，内容类网站来说是致命的，搜索引擎无法抓取页面相关内容，也就是用户搜不到此网站的相关信息。 原理将 html 在服务端渲染，合成完整的 html 文件再输出到浏览器。 适用场景 客户端的网络比较慢客户端运行在老的或者直接没有 JavaScript 引擎上NUXT 作用就是在 node.js 上进一步封装，然后省去我们搭建服务...
ap-cli 前端模拟接口服务脚手架项目地址依据接口定义，帮助你快速的完成接口模拟工作。 主要功能： [x] 通过json、js、swagger文件模拟接口数据[x] 通过正则匹配指定需要mock的文件[x] 生成简单markdown接口文档开始下载ap-cli $ npm install ap-cli -g创建data.json [{"url": "/api/get/index","method": "get","response": {"name": "pc","status": "success"}} ] 运行 $ ap-cli -m data.json现在打开 http://localhost:3000/api...
首先安装 nodemon ，如果是全局安装，那么所有的项目都可以使用mock服务 npm install nodemon 再安装express-mockjs npm i -D express-mockjs 接下来按照以下的步骤来 第一步 在项目根目录下建立api-interface文件，再建立一个文件夹叫mocks,这里面放json或者js都可以，然后再在mocks同级目录下建立app.js文件第二步编写app.js第三部 在mocks文件中编写一个叫test的json文件，文件中代码如下 然后写入 /*** 测试接口** @url ...
解决 webpack-dev-serveri 启动后通过外部访问报错 invalid host header 修改 config/index.js 的 host 属性为 ‘0.0.0.0 { // ..., host: 0.0.0.0, port: 8080, // ... }修改 build/webpack.dev.conf.js 的 devServer 配置 增加 disableHostCheck = true devServer: {clientLogLevel: warning,historyApiFallback: true,hot: true,compress: true,host: HOST || config.dev.host,port: PORT || config.dev.port,open: config.dev....
本文介绍了NodeJS服务器实现gzip压缩，分享给大家，具体如下：在浏览器向服务器请求静态资源时，服务器为了减小在网络传输过程中消耗的流量和时间，都是将静态资源经过压缩后返回给服务器的，实现压缩的算法有 deflate 和 gzip 等，最常用的是 gzip 压缩。 gzip 简介 在浏览器和服务器之间通过 gzip 压缩流实现传输的过程可以用下图表示。当浏览器向服务器请求静态资源，服务器会将静态资源经过处理转换为压缩流，大大减小文件体积...
前言在 NodeJS 中用来创建服务的模块是 http 核心模块，本篇就来介绍关于使用 http 模块搭建 HTTP 服务器和客户端的方法，以及模块的基本 API。 HTTP 服务器1、创建 HTTP 服务器在 NodeJS 中，创建 HTTP 服务器可以与 net 模块创建 TCP 服务器对比，创建服务器有也两种方式。 方式 1： const http = require("http");const server = http.createServer(function(req, res) {// ...... });server.listen(3000); 方式 2： const http...
Vue是一款比较流行的JS库，本文为大家介绍一些Vue组件,包括UI组件,开发框架,服务端,辅助工具,应用实例,Demo示例等开源项目 一、Vue常用UI组件 element ★11612 - 饿了么出品的Vue2的web UI工具套件 Vux ★7503 - 基于Vue和WeUI的组件库 iview ★5801 - 基于 Vuejs 的开源 UI 组件库 mint-ui ★5517 - Vue 2的移动UI元素 vue-material ★2790 - 通过Vue Material和Vue 2建立精美的app应用 muse-ui ★2611 - 三端样式一致的响应式 UI...
最近好多伙伴说，我用vue做的项目本地是可以的，但部署到服务器遇到好多问题：资源找不到，直接访问index.html页面空白，刷新当前路由404。。。用react做的项目也同样遇到类似问题。现在我们一起讨论下单页面如何部署到服务器？ 由于前端路由缘故，单页面应用应该放到nginx或者apache、tomcat等web代理服务器中，千万不要直接访问index.html，同时要根据自己服务器的项目路径更改react或vue的路由地址。 如果说项目是直接跟在域名后...
下面一小段代码给大家分享Nodejs把接收图片base64格式保存为文件存储到服务器上的方法，具体代码如下所示： app.post(/upload, function(req, res){//接收前台POST过来的base64var imgData = req.body.imgData;//过滤data:URLvar base64Data = imgData.replace(/^data:image\/\w+;base64,/, "");var dataBuffer = new Buffer(base64Data, base64);fs.writeFile("image.png", dataBuffer, function(err) {if(err){res.send(err);}el...