2024年前端最新基于 Express 应用框架的技术方案选型浅谈，2024年最新阿里web面试题

最新推荐文章于 2024-09-15 21:53:26 发布

2401_84618790

最新推荐文章于 2024-09-15 21:53:26 发布

阅读量736

点赞数 23

分类专栏：程序员文章标签：前端面试学习

本文链接：https://blog.csdn.net/2401_84618790/article/details/138824377

版权

程序员专栏收录该内容

103 篇文章 0 订阅

订阅专栏

最后

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

给大家分享一些关于HTML的面试题。

Loopback：内置了很多特性的成熟框架，支持基于 token 的认证，支持各种数据库。loopback 的“杀手锏”功能是 API 浏览器，该功能能让开发者用非常直观的方式查看所有的 API 接口，如果你需要创建 API 服务的话，它无疑是个很好的选择

本文主要讲解 Express 应用框架，虽然它提供的能力非常简单，但对于一些工具平台的开发完全可以胜任，并且可以写出各种千奇百怪的 MVC 模式（如果对服务端 MVC 不是很清晰可以阅读服务端 MVC 之 Model2 的衍生）。这里简单介绍以前设计的几种基于 Express 扩展的技术选型方案，恰好涵盖了 React、Angular 以及 Vue 这三个 Web 前端框架。

温馨提示： 接下来使用的示例项目都相对简单，希望对刚入门 Express 的小白们有所启示。

React 技术方案选型

2016年7月到10月，从零开始学习 React 并使用 React 设计了服务端渲染的 Express 应用（同年10月25日诞生了 Next.js ），大致的技术选型如下：

Bootstrap
React
Mongoose
Webpack
Karma/Chai

由于对 React 不是很熟悉，首先实现了单页应用，然后实现了服务端渲染应用。

实现 React 单页应用（SPA）

React 学习和设计过程

在使用 React 之前只会简单的使用 Bootstrap，当时对 React 的学习历程大致如下：

学习 React 语法
学习 ES6 / ES7 语法
学习 Babel / Webpack，打包代码支持 ES6 / ES7 / JSX 语法
学习 webpack-dev-server / Hot Module Replacement，启动开发环境的 Express 服务，实现热加载功能
学习 flux / react-redux
学习 react-router
学习 mocha / karma

学习总结文档如下：

Webpack
Server
React-Redux
React-Router
Mocha
Karma

以上学习过程记录在 react-demo 和 react-start-kit （小而全的概念性参考价值）中，此时只是简单的 React 单页应用设计过程。大致结构如下：

enter image description here

**温馨提示：**在前后端分离的开发模式中，如果 Web 前端实现的是 SPA（单页应用），服务端可以选用不同的设计语言，例如 Node.js、Java 或者 Golang 等。Web 前端可以通过 Express渲染服务器 进行后端的请求代理转发。如果想要前端先行，可以使用 Easy Mock 或者自己设定的 JSON 数据模拟后端提供的接口规范。

Express 服务端设计过程

服务端的设计选用 Node.js 的 Express 框架，大致实现步骤如下：

搭建服务端 Express，设计服务端 MVC 目录结构
设置 Express 的静态资源目录，将 Web 前端的 Webpack 构建目录设置成 Express 的静态资源目录
设置单页应用的路由和路由服务
启动服务查看页面是否可以渲染成功

以上实现过程记录在一个简单的示例 rewatch 里，入口文件是 app.js。此时前后端分离，可以同时启动服务端 Express 服务和启动开发态 React 调试页面服务（webpack-dev-server），并使用开发态页面向 Express 服务发送请求获取接口数据（当时使用 JQuery 的$.ajax 发送请求）。设计完成后将开发态页面使用 Webpack 打包构建，构建目录为服务端 Express 的静态资源目录。首屏渲染的工作交给 Ejs 模板引擎（事实上也可以直接使用 HTML 字符串渲染）进行处理。大致结构如下：

react-full

实现 React 服务端渲染（SSR）

单页应用在路由跳转时不需要额外的请求静态资源，可以提升用户的体验。但是如果应用较大，首次请求静态资源和进行页面动态渲染的过程中会产生以下问题：

首屏加载慢，产生白屏效果
不利于 SEO

为了解决上述客户端的渲染问题，需要实现 React 服务端渲染。由于当时还没出现成熟的服务端渲染应用框架，因此只能自己摸索构建 React 服务端渲染方案：

为了实现前后端代码同构，需要对服务端代码进行 Webpack 打包配置
使用 script 标签以及全局变量的形式实现前后端 react-redux 数据 store 的统一（这个印象深刻，当时思索了很久）

使用了服务端渲染方案后，可以去除之前的 Ejs 模板引擎，当时设计的大致结构如下：

react-server-render

当页面发送路由请求时，Express 服务端使用 react-router 匹配相应路由对应的 React 组件实例并调用 renderToString 方法进行服务端页面渲染（实现页面的局部刷新）。当页面渲染完成后，由 React 打包后的静态资源对页面进行 hydrate 处理。此时的 React 代码是同构的，因此需要注意哪些会运行在服务端，哪些会运行在客户端。同时服务端需要对同构代码进行Webpack 打包处理。

以上实现记录在示例 rewatch 中，入口文件是 server.js ，由于文件比较混乱（把客户端渲染和服务端渲染的示例放在了同一个文件项目中），这里给出另外一个非常简单的示例 rewatch-server-render，项目目录结构如下：

├── public # 静态资源目录

│ └── js

│ ├── bundle.js # react 目录打包文件

│ ├── common.js # react 目录打包公共文件

│ ├── react-dom.min.js # react 库文件

│ └── react.min.js # react 库文件

├── react # react 同构代码目录(没有 react-router，可以查看 rewatch 示例)

│ ├── actions

│ ├── components

│ ├── containers

│ ├── reducers

│ ├── store

│ └── index.js

├── server # 服务端

│ └── routes # 服务端路由（没有使用 react-router 同构，可以查看 rewatch 示例）

├── server.js # 开发态服务入口文件

├── server.bundle.js # 生产态服务入口文件

├── webpack.browser.config.js # 静态资源打包的 webpack 配置(目标文件 bundle.js、common.js)

└── webpack.node.config.js # 服务端打包的 webpack 配置(目标文件 server.bundle.js)

Angular 技术方案选型

2016年10月到2017年3月，使用 Angular 设计了一个 Express 应用，大致的技术选型如下：

Ejs
Bootstrap
Angular-Chart
Mongoose
Redis
Sokect.io

这是一个简单的服务端多页应用示例，使用 Ejs 模板引擎进行页面渲染，渲染完成后交由 Anguar 进行页面的响应操作（发送请求使用 Angular 内置的 $http 服务）。该示例不需要额外的 Webpack 配置，只需要启动 Express 服务本身渲染设计即可。目录结构如下：

├── client # 静态资源目录

│ ├── css/ # 样式

│ ├── imgs/ # 图片

│ ├── js/ # 脚本

│ │ ├── angular/ # angular应用

│ │ │ ├── controllers/ # angular控制器

│ │ │ ├── services/ # angular服务

│ │ │ └── webapp.js/ # angular自动引导应用程序

│ │ └── sockets/ # sockets应用

│ └── lib # 插件(包括angualr、bootstrap/bootstrap-table、chart等)

├── config # 配置（包括Redis、Mongoose配置）

│ ├── config.js # 参数配置

│ └── index.config.js # 导出配置

├── server # 服务端

│ ├── constants/ # 常量

│ ├── controllers/ # 控制器

│ ├── events/ # 事件

│ ├── models/ # 模型

│ ├── routes/ # 路由

│ ├── sockets/ # socket.io

│ ├── pubs/ # Redis发布

│ └── subs/ # Redis订阅

├── views # 视图(使用Ejs模板引擎)

└── app.js # 服务入口文件

温馨提示： 这种多页应用框架是天然的 SSR 模型，一般都需要配合模板引擎进行设计。

Vue 技术方案选型

2018年6月，使用 Vue 设计了服务端渲染的 Express 应用，大致技术选型如下：

Mongoose
Nuxt
Vue
lokka
Muse-UI
客户端和服务端同构代码的 Webpack 配置由 Nuxt 封装
服务端 Backpack 配置

该技术选型最主要的特点如下：

支持服务端渲染
支持 Graphql 查询语言
前后端统一 TypeScript 语法

选型详细说明

为了支持 Graphql 查询语言，服务端选择使用支持 Express 中间件扩展的 graphql-yoga。
客户端的 HTTP 请求需要符合 Graphql 请求格式，一种方式是使用 axios 等模拟 Graphql 的请求格式，另外一种方式是选用支持Graphql 请求格式的请求库，这里选用 lokka 作为 Graphql 客户端的请求库。
为了快速设计页面，选用了基于 Vue 2.0 的 Material Design UI 组件库 Muse-UI。
选用了 Nuxt 作为服务端渲染的中间件（基于 Vue.js 的通用应用框架，预设了服务端渲染应用所需要的各种配置）。
为了支持客户端 TypeScript 语法，需要扩展 Nuxt 的默认 Webpack 配置，利用 Nuxt 的模块/注册自定义loaders配置 ts-loader，配合 nuxt-property-decorator 实现客户端 TypeScript 语法。

项目目录结构

在 Nuxt 的目录结构中，服务端引入的同构代码放在.nuxt 目录中，是 Webpack 打包后的代码文件，因此如果服务端不使用特殊的语法，完全不需要 Backpack 配置。此项目为了支持服务端 TypeScript 语法，使用 Backpack 对服务端代码进行构建（不影响同构部分代码的构建，同构代码在 Nuxt 里是通过读取文件的方式获取）。

├── .nuxt # Nuxt构建目录（Nuxt预设目录）

├── assets # 资源目录（Nuxt预设目录）

│ ├── img # 图片

│ ├── icon # 图标

│ └── style # 样式

├── build # 配置（包括Redis、Mongoose配置）

│ └── main.js # 服务端Backpack构建的目标启动入口文件

├── common # 前后端通用

│ ├── constants/ # 常量

│ └── types/ # TypeScript接口

├── components # 组件目录（Nuxt预设目录）

├── constants # 前端常量目录