9.技术选型和技术点介绍

Chapter: 9.技术选型和技术点介绍(关键重要)

补充基础知识的介绍

NodeJS

Node.js是一个后端的javascript运行环境

选用理由

1. 前端后端语言风格统一
2. 开发方式上前端和后端彻底分离

NPM的使用和简单介绍

NPM就是nodeJS的一个包管理工具（提供包的下载通道）

NPM的使用

mpm install

KOA的介绍

是一个基于NodeJS平台的web开发框架

特点是轻量化，所以采用，express 则是对新手更友好

VUE.JS介绍

是一套用于构建用户界面的JS渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。 常用于搭建类似于网页版知乎这种表单项繁多，且内容需要根据用户的操作进行修改的网页版应用(即单页应用:多异步操作，动态重写当前网页来实

这篇博客介绍得很清楚 什么是vue.js?

EJS模板引擎介绍

EJS 是一个JavaScript模板库，用来从JSON数据中生成HTML字符串 。可以让代码更加干净整洁，让人易懂 。是一个服务端渲染模板。

模板引擎 （Template Engine）是Web开发中将展现层和数据分离的一项技术。模板引擎根据一定的语义，将数据填充到模板中，产生最终的HTML页面。模板引擎渲染的位置可分为客户端和服务器端

服务端/客户端/同构渲染

概念辨析：

1. 后端渲染(服务器端渲染): 先在服务端把内容添加进HTML，再在客户端进行样式和交互的渲染
2. 前端渲染(客户端渲染)：全部完成从数据到页面的渲染；
3. 同构渲染：指前后端共用 JS，首次渲染时使用 Node.js 来直出 HTML。一般来说同构渲染是介于前后端中的共有部分。

客户端和服务端渲染路线比较：

1. 客户端渲染路线：1. 请求一个html -> 2. 服务端返回一个html -> 3. 浏览器下载html里面的js/css文件 -> 4. 等待js文件下载完成 -> 5. 等待js加载并初始化完成 -> 6. js代码终于可以运行，由js代码向后端请求数据( ajax/fetch ) -> 7. 等待后端数据返回 -> 8. react-dom( 客户端 )从无到完整地，把数据渲染为响应页面
2. 服务端渲染路线：2. 请求一个html -> 2. 服务端请求数据( 内网请求快 ) -> 3. 服务器初始渲染（服务端性能好，较快） -> 4. 服务端返回已经有正确内容的页面 -> 5. 客户端请求js/css文件 -> 6. 等待js文件下载完成 -> 7. 等待js加载并初始化完成 -> 8. react-dom( 客户端 )把剩下一部分渲染完成( 内容小，渲染快 )

服务端/客户端渲染优缺点：

9.服务端和客户端渲染利弊比较.png

目前的趋势

一开始是都是服务端渲染，后来js出了后客户端渲染又流行起来，因为能完美实现前后端分离，但是带来了SEO差和首屏加载慢的问题，为了解决这个问题出了同构渲染这种方式，但是同构渲染也有问题...哪个会成为将来的主流各执一词，不过一般而言，管控类APP前后端分离是共识(客户端渲染)，不过偏展示类的APP还是用服务端渲染比较好

进一步阅读：

精读前后端渲染之争(这篇文章给的渲染方式定义有误导性)

服务端渲染 vs 客户端渲染

浅析前端渲染与服务端渲染

本项目的概述(有待补充)

本项目需要明确的几个要点:|

vue.js 使用的是服务端渲染，

ejs.js 也是一个服务端渲染的模板引擎(在服务器发送html到客户端前中就已经将数据内容插入)

单页应用(SPA) 即通过动态重写当前页面来实现交互的网页，原理上是通过前端的路由控制页面的显示

书城的主页index.html使用了ejs.js 来传递数据，使用了vue.js ,通过前端的路由(写在app.js 中)来实现页面的跳转和数据交互,所以应该是一个单页应用，而vue.js 能即保留单页应用的有点，又能使用服务端渲染，所以书城的主页应该是一个用了服务端渲染的单页应用?