node项目中express的使用

01 expres项目的基础配置

第一步 需要先初始化项目 npm init -y第二步 安装express:  npm i express;第三步 项目中创建app.js文件第四步 进行配置代码如下:var express = require('express')var app = express()配置路由app.get('/',(req,res)=>{res.send('hello nodejs')
})app.get('/article/:id',(req,res)=>{var id = req.params['id'] // 获取动态路由params参数console.log('动态路由' + id)
})app.get('/product'.(req,res)=>{ let query = req.queryconsole.log('获取query参数'+query)  http://www.bai.com:3000/producr?age=12&cid=10
})启动项目 配置端口号app.listen(3000,'127.0.0.1')

02 express使用ejs

第一步 安装ejs: npm i ejs -save;第二步 express中使用ejs:var express = require('express')var app = express()// 配置模板引擎
app.set('view engine','ejs')app.get('/',(req,res)=>{let title = ‘你好ejs’let userInfo = {name:'zs',age:12}let article = ‘<h3>我是h3标签<h3>’res.render('index',{ // 默认加载的模板引擎文件夹是views向views/index.html文件中传递title的数据title:title,info:userInfo,article:article,list:[1,2,3,4,5]})})app.listen(3000)

03 views/index.ejs文件中使用ejs,  ejs语法的使用

<html><header><body><h1>我是HTML页面</h1><p><%=title%></p>  这里是使用ejs定义的title的数据<p><%=info.name%></p> // 解析对象中的某个属性<p><%=info.age%></p><p><%=article%></p>   // <h3>我是h3标签<h3>   这里无法渲染html的标签<p><%-article%></p>  // 想要解析html标签 需要将= 换成 -<%if(2<5){%>  // 这里使用判断语句 if<p>这里的条件是成立的</p><%}%>   ---end<%if(2<5){%>  // 这里使用判断语句if else<p>这里的条件是成立的</p><%}else{%><p>这里的条件是不成立的</p><%}%><%for(let i = 0; i<list.length;i++){%>  // 这里使用的是循环语句<li><%=list[i]%></li><%}%>
</body></header></html>

04 index.ejs的页面加载footer.ejs别的ejs的页面

01 footer.ejs的代码:<footer><h1>我是公共的底部的模板</h1></footer>02 index.ejs页面的使用:<body><h1>我是ejs页面</h1><%-include('footer.ejs')%>  // 这里使用footer.ejs的模板</body>

05 ejs将文件的后缀由ejs修改为html, 以及通过express.static托管静态文件

// 1 关于将后缀名ejs修改为html的操作const express = require('express')const ejs = require('ejs')const app = express()// 配置模板引擎app.engine('html',ejs.__express)app.set('view engine','html')app.get('/',(req,res)=>{res.render('index',{ // 加载的是views/index.html页面 并向index.html页面中传递数据title:'我是一个标题',data:[1,2,3,4]
})})// 2 关于能够访问static/css/base.css的文件配置static/css/base.css样式的代码:h1:{color:'red'},通过http://localhost:3000/css/base.css访问const express = require('express')const ejs = require('ejs')const app = express()app.engine('html',ejs.__express)app.set('view engine','html')// 配置静态的web目录app.use(express.static('static')) // 这里就可以直接访问css 以及 img相关的静态文件了,这里访问css的样式数据是不需要在http://localhost:3000/css/base.css中加static的目录的。// 如果想要通过http://localhost:3000/static/css/base.css访问的需要加前缀staticapp.use('/static',express.static('static'))app.get('/',(req,res)=>{res.render('index',{ // 加载的是views/index.html页面 并向index.html页面中传递数据title:'我是一个标题',data:[1,2,3,4]
})})// 3 这时候就可以在index.html页面中引入css的样式了<head><link rel="stylesheet" href='/css/base.css'></head>

06 关于处理post请求的参数的第三方中间件body-parser

第一步 进行安装 npm i body-parser --save第二步 导入 var bodyParser = require('body-parser')第三步 设置中间件 处理form表单的数据app.use(bodyParser.urlencoded({extended:false}))app.use(bodyParser.json())

07 cookie的使用

第一步 进行安装 npm install cookie-parse --save第二步 导入  var cookieParse = require('cookie-parse')第三步 设置中间件 app.use(cookieParse())第四步 设置cookie:app.get('/article',(req,res)=>{res.cookie('username','zhangsan',{maxAge:1000*60*60}) 设置username和过期事件})第五步 进行cookie的获取app.get('/',(req,res)=>{let username = req.cookies.usename // 读取cookieres.send(username)})第六步 设置一个域名下可以共享cookieapp.get('/article',(req,res)=>{// 不同域名共享cookie aaa.itying.com   bbb.itying.comres.cookie('username','zhangsan',{maxAge:1000*60*60,domain:'.itying.com'})})第七步 可以设置加密的cookie的app.get('/article',(req,res)=>{// 不同域名共享cookie aaa.itying.com   bbb.itying.comres.cookie('username','zhangsan',{maxAge:1000*60*60,signed:true})})第八步 获取加密的cookieapp.get('/',(req,res)=>{let username = req.signedCookies.usename // 读取cookieres.send(username)})

08 session的使用

第一步 进行session的安装 npm install express-session --save第二步 引入express-sessionconst session = require('express-session')第三步 设置中间件app.use(session({secret:'keyboard cat',  服务器生成的session的签名resave:true, 强制保存session 即使session没有变化saveUninitialized:true,强制将未初始化的session存储cookie:{maxAge : 1000*60,secure:false    true表示只有https协议才能访问},rolling:true 在每次请求设置cookie 这将重置cookie 过期时间(默认:false)}))第四步 使用res.session.username = '张三'第五步 获取req.session.username 

09 express的路由模板

第一步 新建一个router/login.js的文件var express = require('express')var router = express.router()router.get('/',function(req,res)=>{res.send('login')})module.exports = router 第二步 在app.js文件中导入并注册const login = require('./router/login')app.use('/',login)

10 模块化管理路由组件:

第一步创建 router/admin/user.js文件,这里是模块的路由需要在router/index.js文件中导入的const express = require('express')var router = express.Router()router.get('/',(req,res)=>{res.send('user的首页')})module.exports  =  router第二步创建 router/index.js文件 const express = require('express')var router = express.Router()const admin = require('./admin/user')router.use('/admin',admin)module.exports = router 第三步 app.js导入 const router = require('./router/index.js')app.use('/',router)

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

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

相关文章

Linux初学(九)shell 脚本

一、shell 脚本编程 1.1 简介 shell脚本就是一个文件 在这个文件中包含了要批量自动执行的命令 写shell脚本的基本规范 第一步&#xff1a;用vi/vim创建一个后缀是.sh的文件 第二步&#xff1a;在文件中写入内容 第一行是&#xff1a;#!/bin/bash 指定程序的解释器从第二行开始…

网络层介绍,IP地址分类以及作用

IP地址组成&#xff1a; TTL&#xff1a;生存时间 基于ICMP报文 特殊地址&#xff1a; 0.0.0.0-0.255.255.255 1.代表未指定的地址 默认路由 DHCP下发地址的时候&#xff0c;发个报文给DHCP服务器 临时用0.0.0.0借用地址&#xff0c;未指定地址。 2.全网地址&#xff1a;目…

nginx 日志配置

access_log access_log用来记录客户端请求访问日志&#xff0c;可以出现在http&#xff0c;server&#xff0c;location&#xff0c;if块中。语法如下: access_log path [format [buffersize] [gzip[level]] [flushtime] [ifcondition]];path用来指定日志存放路径&#xff0c…

【pytorch】安装合集

使用conda或者pip安装的指令 https://pytorch.org/get-started/previous-versions/ 测试pytorch_gpu是否可用的代码 # 测试pytorch是否安装成功 import torch print(torch.__version__) print(torch.cuda.is_available())

阐述el-dropdown(下拉菜单)的基本知识

目录 1. 基本知识2. Demo3. 实战 1. 基本知识 el-dropdown是一个常用的UI组件&#xff0c;用于创建下拉菜单&#xff0c;通常用于实现各种交互式菜单、导航栏或下拉选项 确保安装Element UI库&#xff0c;它包含了el-dropdown组件 npm install element-ui # 或者 yarn add e…

配置Web运行环境与第一个网页

安装与配置Web环境: 如下使用了VSC作为web的运行环境。 下面是VSC的官网点击进入:Download Visual Studio Code - Mac, Linux, Windowshttps://code.visualstudio.com/download 1.下载 进入官网后可以看到有windows&#xff0c;linux&#xff0c;还有苹果按照自己的系统下载&…

Node Sass does not yet support your current environment

项目运行时报错&#xff1a;Node Sass does not yet support your current environment 原因是node版本过高。 解决办法&#xff1a; 使用nvm管理node版本&#xff0c;&#xff08;如何安装nvm&#xff1f;请点击跳转&#xff09; 具体步骤如下&#xff1a; 1.查看当前node…

Element UI中日期选择日(date-picker)等其他选择器下拉显示错位、位置错误解决

省流版 给选择器加上唯一key&#xff08;下面的想看就看&#xff09; 问题复现 需求是用一个下拉切换时间维度的选择&#xff0c;分别为年度、季度、月度&#xff0c;但是开发的时候发现&#xff0c;当切换的时候&#xff0c;视图可正常切换&#xff0c;但点击选择时却发现选…

软考系统架构设计师(摘抄)01

架构师承担的责任 系统架构师设计师是承担系统架构设计的核心角色&#xff0c;他不仅是连接用户需求和系统进一步设计与实现的桥梁&#xff0c;也是系统开发早期阶段质量保证的关键角色。系统架构师就是项目的总设计师&#xff0c;他是一个既需要掌控整体又需要洞悉局部瓶颈&a…

Vue 2 组件发布到 npm 的常见问题解决

按照 Vue 2 组件打包并发布到 npm 的方法配置项目后&#xff0c;项目在实际开发过程中&#xff0c;随着代码写法的多样性增加而遇到的各种打包问题&#xff0c;本文将予以逐一解决&#xff1a; 本文目录 同时导出多个组件 样式表 import 问题解决 Json 文件 import 问题解决…

图论最短路径以及floyd算法的MATLAB实现

图论是数学的一个分支&#xff0c;起源于18世纪。1736年&#xff0c;数学家欧拉通过解决“哥尼斯堡七桥问题”&#xff0c;将问题抽象成点和线的关系&#xff0c;并通过理论分析得出结论&#xff0c;这个过程标志着图论的产生&#xff0c;欧拉也因此被称为“图论之父”。图论研…

智慧城市解决方案大全:标准规范顶层设计指南、整体解决方案、厂商售前宣讲PPT、招投标、智慧城市白皮书等全套680份,一次性打包下载

关键词&#xff1a;智慧城市&#xff0c;智慧城市解决方案&#xff0c;智慧城市发展的前景与趋势&#xff0c;智慧城市概念主力流出&#xff0c;智慧城市项目包括哪些方面&#xff0c;智慧城市项目方案&#xff0c;智慧城市宣传片&#xff0c;智慧城市白皮书&#xff0c;智慧城…

MySQL之MVCC如何实现可重复读和提交读

(/≧▽≦)/~┴┴ 嗨~我叫小奥 ✨✨✨ &#x1f440;&#x1f440;&#x1f440; 个人博客&#xff1a;小奥的博客 &#x1f44d;&#x1f44d;&#x1f44d;&#xff1a;个人CSDN ⭐️⭐️⭐️&#xff1a;Github传送门 &#x1f379; 本人24应届生一枚&#xff0c;技术和水平有…

教程3_图像的轮廓

目录 目标 1. 特征矩 2、轮廓质心 3. 轮廓面积 4. 轮廓周长 5. 轮廓近似 6. 轮廓凸包 7. 边界矩形 7.1.直角矩形 7.2. 旋转矩形 8. 最小闭合圈 9. 拟合一个椭圆 10. 拟合直线 目标 在本文中&#xff0c;我们将学习 - 如何找到轮廓的不同特征&#xff0c;例如面积&…

力扣 217.存在重复元素

给你一个整数数组 nums 。如果任一值在数组中出现 至少两次 &#xff0c;返回 true &#xff1b;如果数组中每个元素互不相同&#xff0c;返回 false 。 示例 1&#xff1a; 输入&#xff1a;nums [1,2,3,1] 输出&#xff1a;true 示例 2&#xff1a; 输入&#xff1a;num…

Ansible剧本playbooks详解

一、playbook简介 playbook是ansible用于配置&#xff0c;部署和管理托管主机剧本&#xff0c;通过playbook的详细描述&#xff0c;执行其中一系列tasks&#xff0c;playbook字面意思是剧本&#xff0c;现实中由演员按剧本表演&#xff0c;在ansible中由计算机进行安装&#x…

nginx负载均衡模式

轮询 (Round Robin) 用法&#xff1a;这是Nginx默认的负载均衡策略。每个请求会按顺序分配给upstream中的后端服务器&#xff0c;即按照配置的服务器列表顺序依次分配。 upstream backend {server backend1.example.com;server backend2.example.com;server backend3.example.c…

【Java】LinkedList vs. ArrayList:Java中的数据结构选择

人不走空 &#x1f308;个人主页&#xff1a;人不走空 &#x1f496;系列专栏&#xff1a;算法专题 ⏰诗词歌赋&#xff1a;斯是陋室&#xff0c;惟吾德馨 目录 &#x1f308;个人主页&#xff1a;人不走空 &#x1f496;系列专栏&#xff1a;算法专题 ⏰诗词歌…

docker日志大小设置(doker logs)

参考文章docker logs日志上限&#xff08;日志容量上限、日志大小上限&#xff09;&#xff08;默认大小、默认日志大小&#xff09;_docker 日志限制-CSDN博客 如果想要更改 Docker daemon 的全局默认设置&#xff0c;可以修改 Docker daemon 的配置文件 /etc/docker/daemon…

zookeeper--Znode类型详解---面试宝典

一、Znode分类 1、persistent_node 持久化节点 是默认类型&#xff0c;该类型节点&#xff0c;并不会随着客户端断开就会自动删除&#xff1b;zookeeper服务重启该节点也不会被删除&#xff0c;只有手动删除的时候才会删除&#xff1b;可以创建子节点&#xff1b; # create …