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

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

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

已经写得很清楚了,内容如下:

最近在用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')); 1 2 关于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> --------------------- 

以上内容来自: 作者:MPFLY  来源:CSDN  原文:https://blog.csdn.net/MPFLY/article/details/78134980  版权声明:本文为博主原创文章,转载请附上博文链接!

笔者这里的情况如下:

基于node.js ,使用express开发一个blog网站:

项目目录:

这里引用外部js和css文件的ejs页面的代码:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <%-include("./public/head.ejs")%>
  <!--引入样式文件-->
  <link rel="stylesheet" href="stylesheets/editormd.css" />
  <!--引入js文件-->
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script type="text/javascript" src="js/editormd.js"></script>
  
  <script type="text/javascript">
    $(function() {
       var testEditor = editormd("markdownEditor", {
           width: "90%",
           height: 520,
           markdown : "",
           path : 'lib/',
           //dialogLockScreen : false,   // 设置弹出层对话框不锁屏,全局通用,默认为 true
           //dialogShowMask : false,     // 设置弹出层对话框显示透明遮罩层,全局通用,默认为 true
           //dialogDraggable : false,    // 设置弹出层对话框不可拖动,全局通用,默认为 true
           //dialogMaskOpacity : 0.4,    // 设置透明遮罩层的透明度,全局通用,默认值为 0.1
           //dialogMaskBgColor : "#000", // 设置透明遮罩层的背景颜色,全局通用,默认为 #fff
           imageUpload : true,
           imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"]
           // imageUploadURL : "/upload",

           /*
            上传的后台只需要返回一个 JSON 数据,结构如下:
            {
               success : 0 | 1,           // 0 表示上传失败,1 表示上传成功
               message : "提示的信息,上传成功或上传失败及错误信息等。",
               url     : "图片地址"        // 上传成功时才返回
            }
            */
       });
    });
  </script>

</head>
<body>
  	<%-include("./public/header.ejs")%>
  	<section class="main floatfix">
  		<%-include("./public/aside.ejs")%>
  		<section class="main-articles">

        <form class="edit" action="/edit" method="POST">
          <div class="form-group">
            <label for="">标题</label>
            <input type="text" name="title">
          </div>
          <label for="">内容</label>
          <div id="markdownEditor" style="margin-left: 100px">
            <textarea name="content" style="display:none;"></textarea>
          </div>
          <p><input type="submit" value="保存"></p>
        </form>

  		</section>	
  	</section>
    <%-include("./public/footer.ejs")%>
</body>
</html>

我的public文件夹的路径配置:

public文件夹下的静态资源结构:

所以上面ejs页面中的引用就不用写public了,这里的好处就是无论ejs页面与public中要引用的文件的相对路径关系是怎样的,都可以直接在ejs中直接引用,引用的方式只需要关注public下的路径,而不需要通过路径先去寻找public文件夹。这就是使用express这种现成框架开发项目的好处。

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

我来说两句

0 条评论
登录 后参与评论

相关文章

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

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

    acoolgiser
  • mfc 如何在某个按钮点击响应后才开始绘制,开始绘图函数ondraw()

    如果不是按钮点击,而是别的响应方式,应该同样也可以吧,Invalidate()函数就是这么好用。

    acoolgiser
  • Mysql数据库如何插入数据,MySQL insert set 和 insert values

    insert values:优点:可以批量插入;缺点:单条执行效率低。<适合批量插入>

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

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

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

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

    码农阿宇
  • 听说今天IPV4地址终于分完了,对我们会有什么影响?

    全球网民总数已突破 40 亿,IP 地址终于不够用了。这里说的是互联网协议第四版,即 IPv4。11 月 25 日,全球五大区域互联网注册管理机构之一的欧洲网络...

    JAVA葵花宝典
  • Python使用scipy进行多项式计算与符号计算

    在扩展库numpy和scipy中都有poly1d,用法一样,实际上是同一个库,scipy是基于numpy的。有图为证 ? 本文代码主要演示如何使用poly1d进...

    Python小屋屋主
  • Dubbo 在 K8s 下的思考

    Dubbo 在 2011 开源之后,一直是国内最受欢迎的 RPC 框架,之后 Spring Boot 和 Spring Cloud 的面世,助推了微服务的火热程...

    heidsoft
  • iOS 查找字符串 相同 子字符串的位置 range

    问题:解决替换同一个字符串的多个相同的字符eg.  xxx这个超级大土豪白送xxx一个!赶快来抢把! 将第一个xxx换成名字 将第二个xxx换成物品 两种办法 ...

    用户1219438
  • 自动化篇 - 黑客们使用的自动化方案,很多人还不知道

    聊到 App 端的自动化,大家能想到的可能是 Appium、UIAutomator2、Airtest 等一系列自动化框架。

    吴延宝

扫码关注云+社区

领取腾讯云代金券