脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → node.js → express框架+bootstrap美化ejs模板

express框架+bootstrap美化ejs模板实例分析

 更新时间：2023年05月16日 09:09:43   作者：Teacher_Tian_2019  
这篇文章主要介绍了express框架+bootstrap美化ejs模板,结合实例形式分析了express框架引入bootstrap结合ejs模版引擎相关操作技巧与注意事项,需要的朋友可以参考下

1、前言

  上节express框架通过ejs模板渲染输出页面 一文中说到，.ejs文件中可以写html代码，但最终实现的页面并不是很漂亮，我们还需要额外的写一些样式来修饰一下。此处，我决定使用bootstrap来美化那张成绩单网页。

2、下载bootstrap

  我经常下载前端资源的方式是通过npm，这里我就这样介绍一下吧。

  1. 首先，在桌面上创建一个临时目录（叫它trash吧）
  2. 打开cmd，进入trash目录。输入npm install --save bootstrap
    在这里插入图片描述
    注：小技巧——如果想知道你下载的是哪个版本的bootstrap，可以输入npm ls，像下图这样找到版本信息。
    在这里插入图片描述

3、部署css样式文件

步骤很简单，只需要两步：

  1. 依次在./node_modules/bootstrap/dist/css中，找到文件bootstrap.min.css，并将它复制到我们的项目目录的public/stylesheets中。
  2. 其次，打开上次我们编辑的views/score.ejs文件，将bootstrap.min.css引入进去。
      以上操作完成之后，代码内容是这样的：
    在这里插入图片描述
      注：bootstrap样式的使用很简单，上图中，我只在table标签上添加了class="table"属性，就完成了样式的优化。table样式的优化手段，您可以访问官方doc自己尝试

4、验证

  访问链接http://localhost:3000/system，若看到表格已经有了明显变化，说明我们的学习任务完成了。
在这里插入图片描述

5、写在最后

  以样式文件引入来讲静态资源的引入，是比较容易阐述的。初学者可以举一返三，将js文件引入到public/javascripts目录下，完成一些web页的功能。
  说到成绩信息，应该属于被限制访问的内容，有权限的用户才可以查询。所以，我们要完成一个系统登录的操作，确保信息被授权的用户（即张三本人）访问。所以下一节中，我将会介绍用户认证和session检查相关的功能实现，敬请关注。

您可能感兴趣的文章:

相关文章

  • node.js中的dns.getServers方法使用说明

    node.js中的dns.getServers方法使用说明

    这篇文章主要介绍了node.js中的dns.getServers方法使用说明,本文介绍了dns.getServers方法说明、语法和实现源码,需要的朋友可以参考下
    2014-12-12
  • 零基础之Node.js搭建API服务器的详解

    零基础之Node.js搭建API服务器的详解

    今天小编就为大家分享一篇关于零基础之Node.js搭建API服务器的详解，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
    2019-03-03
  • NodeJS实现同步的方法

    NodeJS实现同步的方法

    今天小编就为大家分享一篇关于NodeJS实现同步的方法，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
    2019-03-03
  • 利用forever和pm2部署node.js项目过程

    利用forever和pm2部署node.js项目过程

    这篇文章主要给大家介绍了如何利用forever和pm2部署node.js项目的相关资料，文中给出了详细的介绍和示例代码供大家参考学习，相信对大家的学习或者工作具有一定的学习价值，需要的朋友们下面随着小编一起来看看吧。
    2017-05-05
  • 详解electron如何拦截网络请求并处理响应

    详解electron如何拦截网络请求并处理响应

    这篇文章主要为大家详细介绍了electron如何拦截网络请求并处理响应,文中的示例代码讲解详细,具有一定的借鉴价值,感兴趣的小伙伴可以跟随小编一起学习一下
    2023-12-12
  • Node.js中JWT实现身份验证的详细步骤

    Node.js中JWT实现身份验证的详细步骤

    身份验证是Web开发的重要组成部分,JWT由于其简单性,安全性和可扩展性,已成为在Web应用程序中实现身份验证的流行方法,在这篇文章中,我将指导你在Node.js应用程序中使用MongoDB进行数据存储来实现JWT身份验证,需要的朋友可以参考下
    2024-12-12
  • pnpm zip命令的具体使用

    pnpm zip命令的具体使用

    pnpm zip是pnpm v7.0.0引入的实验性命令,用于将项目打包成 ZIP 文件,与 pnpm pack 相比,输出格式为 ZIP 且支持依赖打包,下面就来详细的介绍一下pnpm zip命令的具体使用,感兴趣的可以了解一下
    2026-06-06
  • node学习笔记之读写文件与开启第一个web服务器操作示例

    node学习笔记之读写文件与开启第一个web服务器操作示例

    这篇文章主要介绍了node学习笔记之读写文件与开启第一个web服务器操作,结合实例形式分析了nodejs文件读写及创建web服务接收request请求与处理相关操作技巧,需要的朋友可以参考下
    2019-05-05
  • 如何使node也支持从url加载一个module详解

    如何使node也支持从url加载一个module详解

    这篇文章主要给大家介绍了关于如何使node也支持从url加载一个module的相关资料，文中通过示例代码将实现的方法介绍非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起看看吧
    2018-06-06
  • node.js连接mongoose数据库方法详解

    node.js连接mongoose数据库方法详解

    之前我们都是通过shell来完成对数据库的各种操作的，在开发中大部分时候我们都需要通过程序来完成对数据库的操作。而Mongoose就是一个让我们可以通过Node来操作MongoDB的模块
    2022-08-08

最新评论