Node.js-----express框架（持续更新中）_怎么看全局express是否安装成功-CSDN博客

本文链接：https://blog.csdn.net/qq_46065861/article/details/121371075

本文详细介绍了Node.js中的Express框架，包括其核心特性、安装步骤、项目创建及目录结构。还深入讲解了Express中的路由配置，以及模板引擎如jade、ejs的使用方法，包括静态资源的引用策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

十三、express框架

13.1、express简介

Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用，和丰富的 HTTP 工具。
使用 Express 可以快速地搭建一个完整功能的网站

13.2、express框架的核心特性

可以设置中间件来响应 HTTP 请求。
定义了路由表用于执行不同的 HTTP 请求动作。
可以通过向模板传递参数来动态渲染 HTML 页面。

13.3、express的安装

1、安装前确认是否正确安装node，以及npm（包管理工具）
在这里插入图片描述

2、安装express

局部安装  npm install --save express
全局安装  npm install -g express	(这里用全局)

在这里插入图片描述
3、安装所需要的模块(中间件)

body-parser - node.js 中间件，用于处理 JSON, Raw, Text 和 URL 编码的数据。
cookie-parser -
这就是一个解析Cookie的工具。通过req.cookies可以取到传过来的cookie，并把它们转成对象。
multer - node.js 中间件，用于处理
enctype="multipart/form-data"（设置表单的MIME编码）的表单数据。

安装body-parser
npm install -g body-parser
安装cookie-parser
npm install -g cookie-parser
安装multer
npm install -g multer

4、安装express脚手架工具 express-generator

npm install -g express-generator

在这里插入图片描述
此时多了这个

在这里插入图片描述
查看当前express的版本

npm list express

查看express是否安装成功

在这里插入图片描述

13.4、express创建项目

1.创建

express 项目名;      //初始化express项目

在这里插入图片描述
2.进入创建的项目，并安装依赖

cd 项目名
npm install

此时多了这个
在这里插入图片描述

在这里插入图片描述
3.启动项目

npm start

在这里插入图片描述
4.打开浏览器访问:http://localhost:3000/

在这里插入图片描述

13.5、目录结构

bin
    --www           node的服务的创建
node_modules        中间件
public              公共文件
    --images        项目的图片
    --javascripts   项目的js代码
    --stylesheets   项目的css代码
routes              路由
    --index.js      index首页的路由配置
views              静态页面
    --index.jade
app.js             node的主程序
package.json       配置文件

13.6、配置信息意思

routes种路由的配置
在这里插入图片描述
www文件

app.js

13.7、输入路径匹配页面

在这里插入图片描述

思路
1.先在routes里面写login.js
在这里插入图片描述

2.在app.js引入路由并且使用路由
在这里插入图片描述

3.在views里面写login.jade
在这里插入图片描述

十四、模板引擎的使用

常见的模板引擎有html ejs jade

14.1、jade模板引擎

jade在线转换工具

1、标签名不变，无需使用<>围绕
2、标签不具有嵌套性，使用缩进来表示嵌套关系
3、使用标签名后#id来表示id属性，不需要使用属性名 id='id值'
4、使用标签名后.class来表示class属性，多个class可以连续使用
5、对带有id或者class属性的div标签，可以省略div不写
6、对于除了class和id属性外，在标签名后面使用括号（）编写，
与html的标签的属性使用方式相同，也可以使用逗号分隔
7、在标签名称和所有属性后使用一个空格来分割文本内容，
    也就是说每个标签名和属性后的第一个空格的内容都会被识别为文本内容
8、对于多行文本，标签的所有属性之后使用单独的'|'，其下级的缩进内容都将视为文本

使用标签名后#id来表示id属性
在这里插入图片描述
使用标签名后.class来表示class属性，多个class可以连续使用

对于除了class和id属性外，在标签名后面使用括号（）编写，

在标签名称和所有属性后使用一个空格来分割文本内容，

对于多行文本，标签的所有属性之后使用单独的’|’，其下级的缩进内容都将视为文本
在这里插入图片描述
关于js的写法

jade解析变量

1、标签内为变量则直接使用标签名紧跟'='，再写上变量名
  h1= 变量名
2、文本内需要拼接变量则使用#{变量名}的写法
p Welcome to #{变量名}

14.2、ejs模板引擎

14.2.1、ejs的语法

<%=变量%> 输出内容
<%js代码%> 输出Js代码

14.2.2、node中ejs的使用

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

1、安装ejs中间件

npm install ejs --save-dev

在这里插入图片描述

2、在app.js中引入ejs

// 引入ejs
var ejs=require('ejs')

3、在app.js修改模板引擎

// 修改模板引擎
app.engine('ejs',ejs.__express);
app.set('view engine','ejs')

4、在views下新建ejs后缀的页面
在这里插入图片描述
ejs.ejs

注意：views下面页面的文件后缀必须保证和设置的模板引擎的后缀一致

出现以下报错的三个原因
在这里插入图片描述
原因一：页面后缀名与模板引擎不一样
原因二：没有传参数，在页面上使用参数

<%=tiele%>

原因三：页面上不能写注释

<%=变量%>
<--<%=变量%>-->

14.3、html模板引擎

1、安装ejs中间件

npm install ejs --save-dev

在这里插入图片描述

2、在app.js中引入ejs
在这里插入图片描述

3、修改模板引擎
在这里插入图片描述

4、在views下新建html后缀的页面，重新访问http://localhost:3000

十五、模板引擎中静态资源的使用

express项目中，所有的静态资源文件都放置在public文件夹内
在app.js内定义了静态资源文件在public文件夹内
在这里插入图片描述

15.1、模板内使用images

引入图片
在这里插入图片描述
注意：使用图片可以直接访问images文件夹，express会自动读取public文件

在css文件内引入背景图片，仍然需要使用相对路径查找
在这里插入图片描述

15.2、模板内使用stylesheets

在这里插入图片描述

15.3、模板内使用javascripts

在这里插入图片描述