传统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,一经查实,立即删除!

相关文章

【miscellaneous】北斗短报文

北斗系统最大的特色在于有源定位和短报文特色服务,不止解决了中国有无卫星导航系统的问题,还能将短信和导航结合,是中国北斗卫星导航系统的独特发明,也是一大优势。 北斗的短报文功能,在国防、民生和应急救援等领域&am…

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文件作为…

Java中的流程控制语句

if语句 if语句 : if(条件表达式){ 执行语句; } if..else语句:       if(条件表达式){ 执行语句; }else{ 执行语句; } if..else if..else语句 :…

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

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

Nodejs之http模块详解

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

python 16bit转8bit的工具_利用python读取YUV文件 转RGB 8bit/10bit通用

注:本文所指的YUV均为YUV420中的I420格式(最常见的一种),其他格式不能用以下的代码。位深为8bit时,每个像素占用1字节,对应文件指针的fp.read(1);位深为10bit时,每个像素占用2字节,对应文件指针…

linux的几个文本内容查看命令小结

1cat可以查看文本内容,tac就是反向查看文本内容,但是文本内容多了就全部显示不出来 2nl查看文本内容可以显示行号 3more翻页查看以及less翻页查看 more filename 按键使用: enter一行一行的查看 空格键 向下翻页查看 b或者Ctrl b向上翻页 f或…

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

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

python公式计算器_Python-计算器

#计算器开发需求##1、实现加减乘除及拓号优先级解析#2、用户输入 1 - 2 * ( (60-30 (-40/5) * (9-2*5/3 7 /3*99/4*2998 10 * 568/14 )) - (-4*3)/ (16-3*2) )等类似公式后,#必须自己解析里面的(),,-,*,/符号和公式,运算后得出结果,结果必须…

网络流-SAP算法模板

node 表示当前讨论到的节点; flow 表示该节点被传入/要传出的流量;s, t, ver 分别是起点,终点,节点总数; SAP 函数返回增广路成功增大的流量; dlt 是当前已传出的流量; c 是残量。 1 const int …

python bp神经网络分类预测结果图_深度学习入门(四)BP神经网络——数字分类...

采用的是python中机器学习库sklearn图片数据sklearn简要介绍:#sklearn是Python中的一个机器学习包from sklearn.datasets import load_digits #载入Sklearnimport pylab as pldigitsload_digits()#载入数据集(都是数字图片)print(digits.data.shape)#一共有1797张图…

Koa框架

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

SPOJ GSS2 Can you answer these queries II (线段树离线) - xgtao -

Can you answer these queries II 这是一道线段树的题目&#xff0c;维护历史版本&#xff0c;给出N(<100000)个数字(-100000<x<100000),要求求出在[l,r]区间里面的连续序列的最大值&#xff0c;并且重复的数字可以加入序列但是值不能再计算。 本题明显使用线段树,它只…

Node使用MySQL

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

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

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

iOS10 权限崩溃问题

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

Koa框架——coderhub实战

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

python 协程_Python多任务协程

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

python局域网大文件_[源码]Python简易http服务器(内网渗透大文件传输含下载命令)...

Python简易http服务器源码import SimpleHTTPServerimport SocketServerimport sysPORT 80if len(sys.argv) ! 2:print("use: web.exe port")else:PORT int(sys.argv[1])Handler SimpleHTTPServer.SimpleHTTPRequestHandlerhttpd SocketServer.TCPServer(("&…