如何創建以EJS為模板引擎的Node.js項目

2020-12-15 IT軟體專家

工具

WebStormnpmNode.js技術

expressejsJavaScript在創建Node.js項目時，可以使用不同的JavaScript模板引擎，如Pug、EJS等。那麼，如何在Node.js項目中使用EJS模板引擎呢？下面利用實例說明：

操作步驟：

1、打開WebStorm工具，點擊File--->New--->Project，輸入項目名稱，然後選擇EJS模板引擎

打開工具，創建EJS模板引擎項目

2、項目創建完畢，查看文件結構，可以發現跟Pug模板引擎項目結構一樣

項目創建完畢，查看文件結構

3、點擊右上角的綠色三角圖標，運行項目

點擊右上角的綠色三角圖標，運行項目

4、選擇views文件夾，滑鼠右鍵新建student.ejs

選擇views文件夾，滑鼠右鍵新建student

5、打開student.ejs文件，插入頁面模板，並綁定變量

插入頁面模板，並綁定變量

6、打開路由文件夾下的index,js文件，插入student配置路由

插入student配置路由

7、打開瀏覽器，輸入訪問地址，結果出現404報錯

輸入訪問地址，結果出現404報錯

8、重啟項目，然後刷新瀏覽器，查看界面效果

刷新瀏覽器，查看界面效果

相關焦點

  • 如何在使用EJS模板引擎的項目中使用IF語句
    expressEJSJavaScript在Node.js和EJS結合起來使用的項目中，可以在模板中使用判斷語句，如if語句。下面利用實例說明：操作如下：1、創建Node.js項目，使用EJS模板引擎；然後新建ejs文件judge.ejs
  • Node.js的5大框架,誰才是Node.js的優秀框架?
    它支持23+模板引擎，簡單的HTTP方法，異步性，它總是關注性能。/ 如何安裝Express.js?/可以使用以下命令將Express.js安裝為軟體包依賴項。npx express-generator 例如，以下創建了一個名為 myapp 的Express應用程式。該應用程式將在當前工作目錄的名為 myapp 的文件夾中創建，並且視圖引擎將設置為 Pug。
  • 如何在Node.js使用Pug創建表格並設置樣式
    工具WebStormNode.js瀏覽器>技術expresspug在Node.js項目中，如果項目使用Pug模板引擎，想要新建一個表格，該怎麼實現？單個表格沒有加樣式屬性，如何設置表格樣式？下面利用實例說明：操作步驟：1、在已創建好的Node.js項目中，views文件夾上，滑鼠右鍵新建Pug文件；輸入文件名稱，點擊OK
  • 教你用 Node 創建 CLI 工具
    創建 bin 目錄package.json 添加 bin 欄位，將自定義的命令軟連到全局環境，同時執行 npm link 創建連結。"bin": { "wbiao": "./bin//index.js" }複製代碼在根目錄下創建 bin 文件夾，新建 index.js 文件，行首增加一行#!/usr/bin/env node指定當前腳本由 node.js 進行解析。#!
  • Node.js模塊化你所需要知道的事
    Node.js允許我們用多種方式來引用模塊，比如相對路徑、絕對路徑、預置路徑（馬上會解釋），假設我們需要引用一個叫做find-me的模塊，require如何幫助我們找到這個模塊呢？at REPLServer.onLine (repl.js:533:10)複製代碼現在，可以嘗試把需要引用的find-me模塊放在上述的任意一個目錄下，在這裡我們創建一個node_modules目錄，並創建find-me.js文件，讓Node.js能夠找到它：~/learn-node $ mkdir node_modules
  • 如何利用機器學習和Gatsby.js創建假新聞網站
    當您使用Gatsby.js站點模板時，Gatsby會使用Git的一些功能。基本上，Gatsby.js將幫你創建一個有完整的骨架的網站，你可以調整和重新配置，而不是從頭開始構建整個東西。所有這些資產幫助您創建更好的網絡體驗與更少的麻煩。讓我們逐個介紹。gatsby-browser.js此文件用於實現Gatsby瀏覽器api。對於這個項目，我們不需要在這個文件中放入任何東西。
  • Node.js 被分叉出一個項目 — Ayo.js
    Ayo（發音為「eye-oh」或 IO）是當前流行的 JavaScript 運行時 Node.js 的一個分支。它的創建是由於 Node.js 項目內部發生了一個關於「行為準則(Code of Conduct)」的問題。
  • 復盤node項目中遇到的13+常見問題和解決方案
    本文轉載自【微信公眾號：趣談前端，ID:beautifulFront】經微信公眾號授權轉載，如需轉載與原文作者聯繫筆者之前陸陸續續接手過幾個nodejs項目, 也參與過幾個有點意思的nodejs話不多說我們開始吧~1. window和mac下設置NODE_ENV變量的問題我們都知道在前端項目中會根據不同的環境變量來處理不同的邏輯, 在nodejs中也一樣, 我們需要設置本地開發環境, 測試環境, 線上環境等
  • 如何快速構建一個 Egg.js項目
    如何快速構建一個 Egg.js 項目1.新建一個名為「egg-example」的項目文件夾，並切換至當前項目文件夾，命令如下：mkdir egg-example && cd egg-example
  • 如何在vue項目中使用sass並設置元素樣式
    如果直接使用sass，啟動項目會出現報錯。那麼，如何在vue項目中使用sass？下面利用實例說明：1、打開HBuilderX開發工具，新建項目，選擇普通項目；然後輸入項目名稱wmk，選擇vue模板，接著點擊創建按鈕
  • 使用NodeJS Lambda函數查詢RDS MySQL資料庫
    第二次嘗試：使用捆綁的節點項目我們可以簡單地使用 node init命令（假設已安裝NodeJS並準備就緒）來創建一個package.json文件初始化節點項目。這裡的重要一件事是，AWS Lambda要求節點項目名稱必須與lambda名稱相同。
  • 前端高效開發必備的 js 庫梳理
    比如說你對移動端比較感興趣, 工作中也剛好涉及到一些技術的應用,那麼我可以專門研究移動端相關的技術和框架, 又或者你對企業後臺/中臺產品感興趣, 比較喜歡開發PC端項目, 那麼我們可以專門研究這種類型的js庫或者框架, 接下來筆者也是按照不同前端業務的需求, 來整理一份能快速應用到工作中的js庫, 以提高大家的開發效率。
  • 基於Node.js 的爬蟲丨前端開發者
    前端開發者丨Node.js基於nodejs 的爬蟲 API接口項目,包括前端開發日報、知乎日報、前端top框架排行、妹紙福利、搞笑視頻、各類視頻新聞資訊 熱點詳情接口數據 https://ecitlm.github.io/Node-SpliderApi/#/原文地址：https://gitee.com/ecitlm/splider
  • Node.js核心框架貢獻者力作,終於有電子版了,還是高清PDF
    本書是Node.js的實戰教程,涵蓋了為開發產品及Node應用程式所需要的一切特性、技巧以及相關理念。從搭建Node開發環境，到一些簡單的演示程序，到開發複雜應用程式所必不可少的異步編程。第一部分介紹了Node.js,教授了一些用它做開發所需要的基礎技術。第l章闡述了Node的特徵，並給出了一些示例代碼。第2章指導讀者創建了一個示例程序。第3章闡述了Node.js開發的困難之處，以及可以用來克服這些困難的技術，並給出了組織程序代碼的辦法。
  • Node.JS和Socket.io入門
    創建應用1.轉到您的項目目錄。如果您看到以下信息：通過伺服器加載HTML文件為簡單起見，我沒有使用Jade，EJS或任何View Engine。在server.js中：更換：app.listen(port); 為：var io = require('socket.io').listen(app.listen(port));這使Socket.io可以訪問伺服器
  • three.js網頁3D渲染引擎終極科普教程版本
    Three.js是基於原生WebGL封裝運行的三維引擎，在所有WebGL引擎中，Three.js是國內文資料最多、使用最廣泛的三維引擎。既然Threejs是一款WebGL三維引擎，那麼它可以用來做什麼想必你一定很關心。所以接下來內容會展示一個基於Threejs引擎開發的Web3D的簡單應用，以便大家更深入的了解這個庫。
  • 盤點7個強大的Node.js框架
    Node.js是由Ryan Dahl於2009年創建的，它是一個開源的跨平臺運行時環境，用於開發伺服器端和網絡應用程式，這篇文章的重點是Node.js框架，小編會給大家簡要盤點7個強大的Node框架，希望對大家有幫助。
  • TsDotaRPG v1.0.1 發布,Dota2 自定義遊戲開發模板
    梗概 dota2 自定義遊戲開發模板 貢獻者： Moddota ark120202[已故] Xavier 西索醬 使用條件如果你要使用這個模板，通常需要擁有以下知識儲備： 掌握Dota2 Workshop Tools 了解Dota2 創意工坊工具集 掌握TypeScript
  • 如何創建vue項目並使用element框架中的el-select
    cnpm install --global vue-cli2、創建一個基於webpack模板項目，使用命令vue init webpack wmnnpm i element-ui -S8、打開項目中的main.js文件，依次導入element-ui和對應的樣式文件，調用Vue.use(ElementUI)