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

一、准备静态页面

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上通常挂载变量信息,即每次 请求的值可能不一样(如网站访问的用户名)。
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/470351.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

teamviewer无法建立连接原因未知_3389远程无法连接的5种原因分析

3389无法连接的5种原因分析1、服务器在内网。2、做了tcp/ip筛选。先执行下面cmd命令:cmd /c regedit -e c:1.reg HKEY_LOCAL_MACHINESYSTEMControlSet001ServicesTcpip,导出注册表里关于TCP/IP筛选的第一处cmd /c regedit -e c:2.reg HKEY_LOCAL_MACHINE…

Express框架实现原理

一、Express 源码的目录结构 首先,会去package.json项目(包)描述文件中寻找main属性的值, main:入口文件。这个main的值就是入口文件所在的路径。 这里并没有配置main属性的值,默认会去找index.js文件作为…

nginx集群_使用Nginx+Tomcat+keepalived 搭建高性能高可用性负载均衡集群

在互联网项目中,往往面临着高用户量、高并发的问题,造成服务器的压力非常大,特别是电商项目,以淘宝天猫为例,近年双十一的成交量屡创新高,可想而知淘宝天猫的服务器面临的并发量有多大,单一服务…

Nodejs之http模块详解

一、Web服务器 什么是Web服务器? 当应用程序(客户端)需要某一个资源时,可以向一个台服务器,通过Http请求获取到这个资源;提供资源的这个服务器,就是一个Web服务器; 目前有很多开源…

iOS开源照片浏览器框架SGPhotoBrowser的设计与实现

简介 近日在制作一个开源加密相册时附带着设计了一个照片浏览器,在进一步优化后发布到了GitHub供大家使用,该框架虽然没有MWPhotoBrowser那么强大,但是使用起来更为方便,操作更符合常规相册习惯,自定义和修改源码也十分…

Koa框架

一、认识Koa 前面我们已经学习了express,另外一个非常流行的Node Web服务器框架就是Koa。 Koa官方的介绍: koa:next generation web framework for node.js;koa:node.js的下一代web框架; 事实上&#x…

Node使用MySQL

一、认识mysql2 如何可以在Node的代码中执行SQL语句来,这里我们可以借助于两个库: mysql:最早的Node连接MySQL的数据库驱动;mysql2:在mysql的基础之上,进行了很多的优化、改进;目前相对来说&a…

java安装后在哪里打开_冷却塔声屏障安装后降噪效果不理想,原因出在哪里?...

现有冷却塔大部分产品都不能满足噪音环保标准,只有少数几种低吨位超低噪声型号的冷却塔可以满足少部分区域噪声标准要求。在一些商住混合区,冷却塔的出风口强烈的噪声和热气往往干扰附近居民不得安宁,所以冷却塔的噪声问题成为环境投诉的热点…

iOS10 权限崩溃问题

iOS10 权限崩溃问题 原文: http://blog.csdn.net/runleelrg/article/details/51673025 今天 手机升级了 iOS10 Beta,然后用正在开发的项目 装了个ipa包,发现点击有关 权限访问 直接Crash了,并在控制台输出了一些信息: This app h…

Koa框架——coderhub实战

https://github.com/zep03/koa-coderhub/commits/main 一、coderhub功能接口说明 Coderhub旨在创建一个程序员分享生活动态的平台。 完整的项目接口包括: 面向用户的业务接口;面向企业或者内部的后台管理接口; 完成的功能如下:…

python 协程_Python多任务协程

协程协程,又称微线程,纤程。英文名Coroutine。协程是python个中另外一种实现多任务的方式,只不过比线程更小占用更小执行单元(理解为需要的资源)。为啥说它是一个执行单元,因为它自带CPU上下文。这样只要在合适的时机,…

JavaScript高级之构造函数和原型

1.1 概述 在典型的 OOP 的语言中(如 Java),都存在类的概念,类就是对象的模板,对象就是类的实例,但在 ES6之前, JS 中并没用引入类的概念。 ES6, 全称 ECMAScript 6.0 ,2…

JavaScript高级之继承

ES6之前并没有给我们提供 extends 继承。我们可以通过构造函数原型对象模拟实现继承,被称为组合继承。 2.1 call() 调用这个函数, 并且修改函数运行时的 this 指向 fun.call(thisArg, arg1, arg2, …) thisArg :当前调用函数 this 的指向对象arg1&…

【代码笔记】iOS-UILable电子表显示

一&#xff0c;效果图。 二&#xff0c;代码。 RootViewController.h #import <UIKit/UIKit.h>interface RootViewController : UIViewController {UILabel *label;NSDateFormatter *dateFormatter ; } end RootViewController.m #import "RootViewController.h&qu…

JavaScript高级之ES5 中的新增方法

3.1 ES5 新增方法概述 ES5 中给我们新增了一些方法&#xff0c;可以很方便的操作数组或者字符串&#xff0c;这些方法主要包括&#xff1a; 数组方法字符串方法对象方法 3.2 数组方法 迭代(遍历)方法&#xff1a;forEach()、map()、filter()、some()、every()&#xff1b; …

JavaScript高级之函数进阶

1. 函数的定义和调用 1.1 函数的定义方式 函数声明方式 function 关键字 (命名函数)函数表达式 (匿名函数)new Function() Function 里面参数都必须是字符串格式第三种方式执行效率低&#xff0c;也不方便书写&#xff0c;因此较少使用所有函数都是 Function 的实例(对象)…

react 前端解析二进制流_一年半前端跳槽面试经验(头条、微信、shopee)

在2019年末的时候&#xff0c;突然想搞点大事&#xff0c;思来想去&#xff0c;感觉只有跳槽是最刺激的。由于我比较懒&#xff0c;不想换城市&#xff0c;所以这次只面试了头条、微信和 shopee。十分幸运&#xff0c;都拿到了 offer。接下来就简单的说下大家关心的面试题吧。问…

国内app快速生成平台对比

泰格老虎 2013-03-07 00:39:10 这是海恒CEO高鹏写的一篇国内app快速生成平台对比文章&#xff0c;介绍了国内快速生成APP的平台与自己平台的对比&#xff0c;很有参考价值。同类网站安米网 http://www.appbyme.org/追信 http://app.zhui.cn/简网app工厂 http://app.cutt.com/ap…

JavaScript高级之正则表达式

1. 正则表达式概述 1.1 什么是正则表达式 正则表达式&#xff08; Regular Expression &#xff09;是用于匹配字符串中字符组合的模式。在 JavaScript中&#xff0c;正则表达式也是对象。 正则表通常被用来检索、替换那些符合某个模式&#xff08;规则&#xff09;的文本&am…

pushpop指令的操作数必须是字操作数_PLC的指令,电气人必须了解的基础内容

指令语句表编程语言是所有PLC都具有的最基本的编程语言。而指令语句表程序是由一条一条的指令堆砌而成的。因此&#xff0c;我们有必要对指令进行进一步的说明和解读。1、指令格式PLC的指令语句表程序和微机汇编语言程序非常的相似&#xff0c;我们也是以汇编语言的指令和指令系…