传统Web应用案例(采用服务端渲染)

2024-05-06 08:12:00

一、准备静态页面

https://www.expressjs.com.cn/resources/middleware/errorhandler.html

静态页面：
https://github.com/gothinkster/realworld-starter-kit/blob/master/FRONTEND_INSTRUCTIONS.md

二、提取控制器模块

三、用户注册的表单提交

3.1 同步方式提交表单

3.2 异步方式提交表单

引入vue:

客户端模板引擎{{}} 与服务端模板引擎{{}}一样，产生冲突，导致vue无法渲染数据到页面上：

解决方法：
修改vue默认的界定符
vue官方文档

全局配置vue界定符：

Vue.mixin给我们提供了一种混入Vue实例的方法，创建了混入对象之后，我们自定义的方法或者变量可以很轻松的挂载在Vue实例上，给我们的偷懒带来方便

3.3 使用session保持用户登录状态

express-session官方文档

3.4 session持久化存储

connect-mongo

安装：npm install connect-mongo

3.5 用户注册异步实现完整代码：

3.6 使用app.locals来存储sessionUser数据

存储在app.locals中的这些键值对一般是公共模板方法或者公共模板变量，express提供了这样的机制，便于公共数据和方法在模板中的使用，而无需每次render手动传入。
将变量设置到app.locals对象下面，这个数据在所有的模板中都可以获取到

app.locals和res.locals是expess中用于渲染模板的两个对象：
locals可能存在于app对象中，即app.locals，也可能存在于res对象中，即res.locals。
app.locals上通常挂载常量信息（如博客名，描述，作者信息），
res.locals上通常挂载变量信息，即每次请求的值可能不一样（如网站访问的用户名）。

传统Web应用案例(采用服务端渲染)相关推荐

react ssr 服务端渲染入门
react ssr 服务端渲染入门前言前后端同构,作为针对单页应用 SEO 优化乏力.首屏速度瓶颈等问题而产出的解决方案,近来在 react.vue 等前端技术栈中都得到了支持.当我们正打算抛弃传 ...
egg html模板,egg+vue服务端渲染模板项目介绍
egg-vue-webpack-boilerplate 基于 Egg + Vue + Webpack SSR 服务端渲染和 CSR 前端渲染工程骨架项目,包括前台系统(SSR MPA)和后台管理系统( ...
浅谈服务端渲染(SSR) 与使用场景
什么是SSR(服务端渲染)MUA? SSR是Server Side Render的缩写,简单来讲:服务端渲染就是网页上面呈现的内容在服务器端就已经生成好了,当用户浏览网页时,服务器把这个在服务端生成 ...
NuxtJS服务端渲染
背景目前该前端项目是VUE编写的单页应用,如果开始推广,目前的架构对SEO的支持很不友好,为更好的支持推广,预研采用服务端渲染(SSR)十分的必要,并且静态化后页面的渲染速度也会有所提高. 经综合比 ...
Vue 服务端渲染（SSR）、Nuxt.js - 从入门到实践
前言 10月初有幸接到公司官网改版需求,要求采用服务端渲染模式对原网站进行seo优化. 由于团队一直使用的vue技术栈,所以我第一时间想到的就是采用vue 服务端渲染(SSR)来实现该需求,即能减少团 ...
服务端渲染SSR与客户端渲染
文章目录一.服务端渲染和客户端渲染的区别服务端渲染(SSR -- server side render) 客户端渲染二.使用服务端渲染(SSR)的利弊优势局限三.实际应用应用原则举例 ...
SSR 学习 - 传统服务端渲染 Web 应用、客户端渲染、同构渲染、优缺点和案例演示
概述随着前端技术栈和工具链的迭代成熟,前端工程化.模块化也已成为了当下的主流技术方案. 在这波前端技术浪潮中,涌现了诸如 React.Vue.Angular 等基于客户端渲染的前端框架. 这类框架所 ...
Express与传统Web应用（服务端渲染、art-template模板引擎、配置静态资源托管）
一.服务端渲染相关的概念什么是渲染? 例如对于我们前端开发者来说最常见的一种场景就是:请求后端接口数据,然后将数据通过模板绑定语法绑定到页面中,最终呈现给用户. 数据: 模板: 渲染(数据+模板)结 ...
【服务端渲染】NuxtJs 综合案例
前言笔记来源:拉勾教育大前端高薪训练营阅读建议:建议通过左侧导航栏进行阅读 Nuxt.js 综合案例基本介绍案例名称:RealWorld 一个开源的学习项目,目的就是帮助开发者快速学习新技能 ...

最新文章

热门文章