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）的更多相关文章

  1. express高效入门教程（5）

    5.ejs模版 5.1.什么是模版引擎? 为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,用于网站的模板引擎就会生成一个标准的HTML文档. 在后端开发中,处理数据的代码和展示 ...

  2. express高效入门教程（3）

    3.路由 路由到底是什么呢?不管官方定义到底是什么,咱通俗的说就是根据不同的url,执行不同的代码,类似于编程语言中的分支结构 3.1.express规划路由 稍微复杂点的应用,通常都是分模块进行的, ...

  3. express高效入门教程（2）

    2.请求和响应 2.1.请求相关 2.1.1.返回一个html页面 // 注意path模块需要先引入 app.get('/', function (req, res){ res.sendFile(pa ...

  4. express高效入门教程（1）

    1.hello world 1.1.安装express // 1.进入到自己的项目目录, 我这里是express-demo cd express-demo // 2.初始化项目,生成package.j ...

  5. 2.Tensor Shape《Pytorch神经网络高效入门教程》Deeplizard

            ,之后,我们张量和基础数据的形状酱油卷积运算来改变. 卷积改变了高度和宽度维度以及颜色通道的数量.

  6. 1.数据结构《Pytorch神经网络高效入门教程》Deeplizard

    当移动一个数组或向量时,我们需要一个索引:二维数组/矩阵需要两个索引, 比如说标量是零维张量,数组/向量/矢量是一维张量,矩阵是是二维张量,n维数组是n维张量. 如果我们被告知,  假设有一个张量t, ...

  7. gulp详细入门教程

    本文链接:http://www.ydcss.com/archives/18 gulp详细入门教程 简介: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优 ...

  8. React入门教程1---初见面

    React入门教程1---初见面:https://blog.csdn.net/solar_lan/article/details/82799248 React 教程 React 是一个用于构建用户界面 ...

  9. webpack入门教程之初识loader(二)

    上一节我们学习了webpack的安装和编译,这一节我们来一起学习webpack的加载器和配置文件. 要想让网页看起来绚丽多彩,那么css就是必不可少的一份子.如果想要在应用中增加一个css文件,那么w ...

随机推荐

  1. jchdl-GSL-实例 - 使用Intellij IDEA创建Mux

    https://mp.weixin.qq.com/s/yP9xKeg0iHJChuMPzxdJtA https://github.com/wjcdx/jchdl/blob/master/src/org ...

  2. DevOps - 从渐进式交付说起（含实践 Demo）

    作者:CODING - 王炜 1. 开篇 如果让你主导一款千万.甚至亿级用户产品的功能迭代,你会怎么做?你需要面对的挑战可能来自于: 商业战略的变化带来新的产品诉求,而产品的任何改动哪怕仅是界面调整, ...

  3. Java实现 蓝桥杯油漆问题

    标题:油漆面积 X星球的一批考古机器人正在一片废墟上考古. 该区域的地面坚硬如石.平整如镜. 管理人员为方便,建立了标准的直角坐标系. 每个机器人都各有特长.身怀绝技.它们感兴趣的内容也不相同. 经过 ...

  4. Java实现 LeetCode 103 二叉树的锯齿形层次遍历

    103. 二叉树的锯齿形层次遍历 给定一个二叉树,返回其节点值的锯齿形层次遍历.(即先从左往右,再从右往左进行下一层遍历,以此类推,层与层之间交替进行). 例如: 给定二叉树 [3,9,20,null ...

  5. 第七届蓝桥杯JavaC组国(决)赛真题

    解题代码部分来自网友,如果有不对的地方,欢迎各位大佬评论 题目1.平方末尾 能够表示为某个整数的平方的数字称为"平方数" 比如,25,64 虽然无法立即说出某个数是平方数,但经常可 ...

  6. java实现迷宫走法

    ** 迷宫走法** 迷宫问题 对于走迷宫,人们提出过很多计算机上的解法.深度优先搜索.广度优先搜索是使用最广的方法.生活中,人们更愿意使用"紧贴墙壁,靠右行走"的简单规则. 下面的 ...

  7. java实现第三届蓝桥杯数量周期

    数量周期 [结果填空](满分9分) 复杂现象背后的推动力,可能是极其简单的原理.科学的目标之一就是发现纷繁复杂的自然现象背后的简单法则.爱因斯坦的相对论是这方面的典范例证. 很早的时候,生物学家观察某 ...

  8. opencl(7) 内核执行命令入队]工作组、工作项

    1:将内核执行命令入队(该命令可被多个工作项执行) cl_int clEnqueueNDRangeKernel( cl_command_queue command_queue, cl_kernel k ...

  9. 01-Python初体验

    本节内容 Python介绍 发展史 Python 2 or 3? 安装 Hello World程序 变量 用户输入 模块初识 .pyc是个什么鬼? 数据类型初识 数据运算 表达式if ...else语 ...

  10. 程序员实用JDK小工具归纳，工作用得到

    在JDK的安用装目录bin下,有一些有非常实用的小工具,可用于分析JVM初始配置.内存溢出异常等问题,我们接下来将对些常用的工具进行一些说明. JDK小工具简介 在JDK的bin目录下面有一些小工具, ...