express高效入门教程(4)
4.静态文件
4.1.普通处理静态文件的方法
在./views/index.html文件中去引入另一个css文件index.css,index.css文件放在public/css目录下,目录结构是这样的
index.html文件中的内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#wrap {
width: 300px;
margin: 100px auto;
line-height: 150px;
height: 150px;
text-align: center;
background-color: green;
}
#wrap a {
color: white;
text-decoration: none;
}
</style>
<link rel="stylesheet" href="/public/css/index.css">
</head>
<body>
<div id="wrap">
<a href="/login">登录 | </a>
<a href="/user">用户中心</a>
</div>
</body>
</html>
根据请求渲染出index.html文件
app.get('/', function (req, res) {
res.sendFile('./index.html')
})
当我们方法 '/'这个路径的时候,能把index.html页面加载出来,但是没办法把css文件加载出来
为了解决这个问题,我们还需要单独去写一个路由去返回css文件
app.get('/public/css/index.css', function (req, res) {
res.sendFile(path.resolve('./public/css/index.css'))
})
4.2.express中处理静态文件的插件
express中提供了处理静态文件的插件,这里的静态文件就是我们项目中需要用到的img、css、js等资源,只需要简单的配置就可以实现对静态文件的处理,步骤如下:
第一步,在app中挂载插件
app.use(express.static('./public'))
第二步,使用静态文件,在index.html文件中引入css,路径需要修改一下
<link rel="stylesheet" href="/css/index.css">
螺钉课堂视频课程地址:http://edu.nodeing.com
express高效入门教程(4)的更多相关文章
- express高效入门教程(5)
5.ejs模版 5.1.什么是模版引擎? 为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,用于网站的模板引擎就会生成一个标准的HTML文档. 在后端开发中,处理数据的代码和展示 ...
- express高效入门教程(3)
3.路由 路由到底是什么呢?不管官方定义到底是什么,咱通俗的说就是根据不同的url,执行不同的代码,类似于编程语言中的分支结构 3.1.express规划路由 稍微复杂点的应用,通常都是分模块进行的, ...
- express高效入门教程(2)
2.请求和响应 2.1.请求相关 2.1.1.返回一个html页面 // 注意path模块需要先引入 app.get('/', function (req, res){ res.sendFile(pa ...
- express高效入门教程(1)
1.hello world 1.1.安装express // 1.进入到自己的项目目录, 我这里是express-demo cd express-demo // 2.初始化项目,生成package.j ...
- 2.Tensor Shape《Pytorch神经网络高效入门教程》Deeplizard
,之后,我们张量和基础数据的形状酱油卷积运算来改变. 卷积改变了高度和宽度维度以及颜色通道的数量.
- 1.数据结构《Pytorch神经网络高效入门教程》Deeplizard
当移动一个数组或向量时,我们需要一个索引:二维数组/矩阵需要两个索引, 比如说标量是零维张量,数组/向量/矢量是一维张量,矩阵是是二维张量,n维数组是n维张量. 如果我们被告知, 假设有一个张量t, ...
- gulp详细入门教程
本文链接:http://www.ydcss.com/archives/18 gulp详细入门教程 简介: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优 ...
- React入门教程1---初见面
React入门教程1---初见面:https://blog.csdn.net/solar_lan/article/details/82799248 React 教程 React 是一个用于构建用户界面 ...
- webpack入门教程之初识loader(二)
上一节我们学习了webpack的安装和编译,这一节我们来一起学习webpack的加载器和配置文件. 要想让网页看起来绚丽多彩,那么css就是必不可少的一份子.如果想要在应用中增加一个css文件,那么w ...
随机推荐
- (Java实现) 美元汇率
时空限制 1000ms/128MB 题目背景 此处省略maxint+1个数 题目描述 在以后的若干天里戴维将学习美元与德国马克的汇率.编写程序帮助戴维何时应买或卖马克或美元,使他从100美元开始,最后 ...
- Java实现蓝桥杯日志统计
标题:日志统计 小明维护着一个程序员论坛.现在他收集了一份"点赞"日志,日志共有N行.其中每一行的格式是: ts id 表示在ts时刻编号id的帖子收到一个"赞" ...
- Java实现第十届蓝桥杯数的分解
试题 D: 数的分解 本题总分:10 分 [问题描述] 把 2019 分解成 3 个各不相同的正整数之和,并且要求每个正整数都不包 含数字 2 和 4,一共有多少种不同的分解方法? 注意交换 3 个整 ...
- Linux 最大有效权限与删除ACL
最大有效权限mask mask是用来指定最大有效权限的.如果给用户赋予了acl权限,则需要与mask权限”相与“才能得到用户的真正权限 setfacl -m m:rx 文件名,指定最大有效权限.例如: ...
- Github 创建SSH密钥克隆仓库详解
1.登录Github主页,点击任意一个repository,点击Clone or download,点击Use SSH 2.点击add a new pulbic key,创建公钥 3.下面图中的Tit ...
- ntpq无法查询同步信息,显示The specified class was not found
年初时工班发现工作站和服务器都没办法用ntpq看时钟同步了,如下图所示.输入ntpq-p 就显示"The specified class was not found" 通过排查,发 ...
- Spring事务的传播属性
前言 Spring在TransactionDefinition接口中规定了7种类型的事务传播行为.事务传播行为是Spring框架独有的事务增强特性,他不属于的事务实际提供方数据库行为.这是Spring ...
- Swift 语法总结
1,用 var 定义变量 ,与js类似. let 用于定义常量,定义完后不能修改. var 用于定义变量,可以修改. swift可以自动识别属性类别. 2,使用 import 语句来引入任何的 Obj ...
- vue之 :model和v-model的区别
v-model通常用于input的双向数据绑定 <input v-model="parentMsg">,也可以实现子组件到父组件数据的双向数据绑定 :model是v-b ...
- Redis之分布式锁实现
点赞再看,养成习惯,微信搜索[三太子敖丙]关注这个互联网苟且偷生的工具人. 本文 GitHub https://github.com/JavaFamily 已收录,有一线大厂面试完整考点.资料以及我的 ...