node --- 在express中配置使用模板引擎(art-template)

下載依賴:

npm install --save art-template express-art-template

配置:

// app.js
const express = require("express");
const app = express();
app.engine("html", require("express-art-template"));

使用: 例如處理瀏覽器GET請求 /students/new,讀取new.html中得元素,使用模板引擎渲染后,返回給瀏覽器

// app.js
const express = require("express");
const fs = require("fs");
const app = express();
const router = express.Router();
app.engine("html", require("express-art-template"));
app.use(router);router.get("/students/new",function(req,res) {res.render("new.html",{msg:"Hi art-template"});
})app.listen(3000, function(){console.log("Server running...");
});
// new.html  (注:模板引擎默認會相對views目錄下讀取文件,即此時目錄結構是 views/new.html)
<h1>{{ msg }}</h1>

啟動服務器. node app.js
在瀏覽器輸入 http://localhost:3000/student/new
在這里插入圖片描述
目錄結構:
在這里插入圖片描述

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/250920.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/250920.shtml
英文地址,請注明出處:http://en.pswp.cn/news/250920.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

PAM認證機制

一、PAM簡介 Sun公司1995年開發的一種與認證相關的通用框架機制&#xff0c;PAM只關注如何為服務驗證用戶的API&#xff0c;通過提供一些動態鏈接庫和一套統一的API&#xff0c;將系統提供的服務和該服務的認證方式分開&#xff1b;PAM只是一個框架而已&#xff0c;自身不做認證…

02 JSX學習

使用vite處理jsx vite引入的腳本必須是ESM的 npm init -y yarn add vite package.json 添加vite命令 index.html引入jsxJSX是什么 一種標簽語法&#xff0c;在JS基礎上進行的語法擴展不是字符串、也不是HTML是描述UI呈現與交互的直觀的表現形式JSX被編譯后會生成React元素 &am…

使用FreeCookies 控制瀏覽器cookies及修改http響應內容

FreeCookies 插件安裝 1&#xff1a;您的計算機需要已經安裝Fiddler &#xff08;如未安裝&#xff0c;請至官網下載安裝 http://docs.telerik.com/fiddler/configure-fiddler/tasks/configurefiddler&#xff09; 2&#xff1a;進入Fiddler安裝目錄下的Scripts目錄下&#xff…

node --- 使用node連接mysql

1.確保下載了mysql,且mysql處于打開狀態. 2.確保下載了node,并成功安裝:https://nodejs.org/en/ (小黑窗 node -v 查看) 3.安裝node操作mysql的依賴包: # 命令行 npm install --save -mysql# 注:如果沒有package.json 建議先使用 npm init -y 初始化正題 // app.js// 1. 引…

03 渲染元素ReactDOM.render

React與ReactDOM是2個不同的庫&#xff0c;根節點內的所有內容&#xff08;和DOM更新、渲染相關&#xff09;由ReactDOM來管理一個React應用只有一個根節點用ReactDOM.render將React元素渲染到根節點 ReactDOM.render 參數1 React元素&#xff08;React.createElement(類組件/…

javascript --- 異步按順序執行

使用promise可以很優雅的封裝一個異步函數,使其按指定順序執行: // 異步讀取文件操作 const fs require("fs"); function promiseReadFile(url) {return new Promise(function (resolve, reject) {fs.readFile(url, function(err, data) {if(err) {reject(err);} e…

web提高:負載均衡

1、集群 1、為什么建議在阿里云購買負載均衡 非常便宜&#xff0c;又好用&#xff0c;有穩定&#xff0c;有簡單。自己搭建不了負載均衡&#xff0c;因為共有云不支持組播跑不了vrp協議。你不會集群的概念&#xff0c;你還是蒙蒙的。2、為什么使用集群&#xff1f; 1、小規模 …

node --- 一個很好用的包json-server

這個第三方包,可以將json文件暴露出來,用http獲取. (data.json如下) 下載依賴: npm install --g json-server查看是否含有json-server json -sever --version啟動json-server 參考:https://www.npmjs.com/package/json-server

04 組件與Props

一些概念 組件&#xff1a;視圖的片段、內部管理數據集合&#xff08;state&#xff09;外部傳入配置結合&#xff08;props&#xff09;包含&#xff1a; 1. 視圖標記&#xff08;React的JSX、Vue的template&#xff09;需要經過轉換而成為真實的DOM 事件 數據 邏輯&#x…

利用ionic3進行上一行和左一行不動,中間移動的功能

首先在html中的寫法是 <ion-header><ion-navbar><ion-title>歷史數據</ion-title></ion-navbar></ion-header><ion-content ><div style"display:flex;width:625px;"><div class"head">地區</di…

05 state與setState、單向數據流

聲明周期與組件卸載 props配置&#xff1a;使用組件時傳入數據state私有數據&#xff1a;組件內部使用的數據 state的使用注意事項 必須使用setState方法來更改state多個setState會合并調用props和state更新數據要謹慎&#xff08;有可能在異步程序中更新&#xff09;setState…

HDU 3342 Legal or Not(拓撲排序)

描述 ACM-DIY is a large QQ group where many excellent acmers get together. It is so harmonious that just like a big family. Every day,many "holy cows" like HH, hh, AC, ZT, lcc, BF, Qinz and so on chat on-line to exchange their ideas. When someone…

jquery --- 阻止表單默認的提交行為,標準化表單的數據

表單如下: // .html <form id"topics_new_form" method"post" action"/topics/new"><div class"form-group"><label for"exampleInputEmail1">選擇模塊</label><selecet class"form-contr…

javascript --- spa初體驗

首先使用express創建一個簡單的服務器 創建文件夾 be-project # (確保安裝了node,并配置好了環境) 在be-project目錄下(命令行執行) npm init -y npm install --save express body-parse npm install --global nodemon// app.js const express require("express");…

vuex復習筆記

npm install vuex --save 進行安裝 vuex import Vuex from vuex 新建一個vuex文件夾&#xff08;這個不是必須的&#xff09;&#xff0c;并在文件夾下新建store.js文件&#xff0c;文件中引入我們的vue和vuex。 轉載于:https://www.cnblogs.com/jinsuo/p/8508699.html

python學習HTML之CSS(2)

1、邊框的屬性設置 PS&#xff1a;邊框的高度和寬度可以采用百分比&#xff0c;但是高度方向的百分比基本無用&#xff0c;因為基數沒定&#xff0c;參考沒意義&#xff01;&#xff01; 2、內邊距和外邊距 3、在右下角添加一個“回頂部”的標簽。 <div></div>中的…

06 事件處理函數綁定與事件對象

事件處理函數綁定 DOM事件處理 addEventListener or onclick function(){} 純小寫React元素也采用了類似DOM0標準中的事件屬性定義的方法 小駝峰 JSX <button onClick{ this.doSth }></button>直接創建React元素 React.createElement(button,{onClick: { this.…

css -- 兩種方法實現流式布局

Bootstrap將屏幕分為4個等級: 1.超小屏幕 (寬度小于768 px), 顯示寬度 100%; 2.小屏幕 (寬度在768px ~ 992px), 顯示寬度 750px; 3.中等屏幕 (寬度在992px ~ 1200px), 顯示寬度 970px; 4.大屏幕 (寬度大于1200px), 顯示寬度 1170px. js實現: window.addEventListener("r…

python文件名匹配

待匹配文件&#xff1a;#FY3D_IPMNT_GBAL_L1_20180516_0003_030KM_MS.HDF 干擾文件&#xff1a;#FY3D_IPMNT_GBAL_L1_20180516_0003_030KM_MS_uuu.HDF 1.正則表達式import reif re.findall(FY3D_IPMNT_GBAL_L1_\d_\d_030KM_MS.HDF,fileEvery): fileList.append(os.path.join(in…

【XSY1594】棋盤控制 概率DP

題目描述 給你一個\(n\times m\)的棋盤&#xff0c;每次隨機在棋盤上放一個國際象棋中的車&#xff0c;不能和以前放的重疊。每個車可以控制當前行和當前列。當所有行和所有列都被控制時結束游戲。問你結束時期望放了多少個車。 注意&#xff1a;結束的條件是所有行和所有列都被…