专栏首页acoolgiser_zhuanlan使用express框架,如何在ejs文件中导入外部的js、css文件

使用express框架,如何在ejs文件中导入外部的js、css文件

最近在用nodejs写一点东西,当然也用到了express框架和ejs模版了。在使用ejs模版的过程中遇到了这个问题:如何在ejs模版中导入外部的js、css文件。

我猜测,ejs和html导入外部文件的方式应该是不一样的。但是我还是决定试一试。按照之前在html文件中的方式导入,结果失败。

这也证明我之前的想法,这些静态文件一经过服务器,就不能直接进行导入了。那该如何导入呢?

这是我的文件结构:

我现在需要在index.ejs文件中导入public文件夹下的table.css以及table.js两个文件。 我为什么要将两个静态文件放到public文件夹下呢?

大家应该都知道,在使用express框架时,在安装了express模块之后,在该项目下的命令行输入express -e 就会自动生成相应的文件目录。当然,上面的截图中的目录是我自己写的,下面是express自动生成的目录:

可以看到,其中的public文件夹是其自动生成的,也就是让你放静态文件的文件夹。(当然也不是必须是“public”)

好了,继续。那把包括了js、css以及图片的静态文件放到public文件夹下又该怎么使用呢?

看图:

在servers.js中写上这句

//获取放置在public文件夹下的静态文件,
app.use(express.static(__dirname + '/public'));

关于app.use()这个方法具体的介绍,这里有篇文章,写的很好app.use(express.static)方法详解

这样,就可以在ejs文件中导入外部静态文件了。 这里需要注意一点,在导入写URL时,只需要写public后面的路径就好,不需要再加上“public”了。如下:

<link rel="stylesheet" type="text/css" href="table.css"/>
<script type="text/javascript" src="table.js"></script>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 使用express框架开发,如何在ejs文件中导入外部的js、css文件

    首先看一下这篇文章: https://blog.csdn.net/MPFLY/article/details/78134980

    acoolgiser
  • leaflet 地图弹框popup打开显示之前的事件

    比如给地图绑定popupopen 事件,在地图中弹框打开之前会触发该事件,alert一个提示,

    acoolgiser
  • MFC如何修改文件视图FileView中已有的树结构的右键菜单(其相应函数为OnContextMenu),即如何增加/修改/删除 菜单项?

    在用VS做MFC编程时,新建的工程中自带了文件视图/类视图/属性窗口/输出窗口等内容。文件视图FileView中具有初始右键菜单,如图所示:

    acoolgiser
  • 使用express框架开发,如何在ejs文件中导入外部的js、css文件

    首先看一下这篇文章: https://blog.csdn.net/MPFLY/article/details/78134980

    acoolgiser
  • Asp.Net WebApi 调试利器“单元测试”

    当我们编辑好一个WebApi应用程序后,需要对该Api接口进行调试,传统的调试办法是在方法内设置断点,然后用PostMan等http工具模拟访问进行查看WebA...

    码农阿宇
  • [pytorch] 图像识别之mixup/cutout/Margin loss....简单实现

    本人kaggle分享链接:https://www.kaggle.com/c/bengaliai-cv19/discussion/128592

    MachineLP
  • 如何把MP4视频压缩到最小,热门视频压缩软件推荐

    如何把MP4视频压缩到最小?这是很多人在下载过视频之后,发现视频比较大才会考虑的问题,那么想要将视频压缩变小怎么操作呢?今天就来给大家分享一个热门视频软件压缩的...

    高效办公
  • OpenCV-Python系列·第十一集

    py3study
  • JMeter 中实现发送Java请求

    如上图,填写Project Name,然后Next,打开以Java Settings界面

    授客
  • OC中监听所有的UITextField文字的变化

    版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010105969/article/details/...

    用户1451823

扫码关注云+社区

领取腾讯云代金券