koa ---基于node.js 平臺是 下一代 web 開發(fā)框架
- 安裝
npm install express -save
EJS 模板 <%= EJS %>
安裝
npm install ejs -S"E" 代表 "effective"障涯，即【高效】。EJS 是一套簡單的模板語言，幫你利用普通的 JavaScript 代碼生成 HTML 頁面。EJS 沒有如何組織內(nèi)容的教條；也沒有再造一套迭代和控制流語法解虱；有的只是普通的 JavaScript 代碼而已。
-
重新創(chuàng)建 app.js
// path是原生模塊，不需要安裝 const path = require('path') ? const app = express() ? // 設(shè)置默認的views的目錄 app.set('views', path.resolve(__dirname, 'views')) // 設(shè)置渲染引擎為ejs, 得保證你已經(jīng)安裝ejs app.set('view engine', 'ejs') ? app.get('/', (req, res) => { res.render('index') }) ? app.listen(3000, () => { console.log('server is running on http://localhost:3000') })</pre> -
新建文件夾
views-
新建
index.ejs支持html語法<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="html" cid="n218" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; background: inherit; font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: normal; position: relative !important; padding: 10px 30px; border: 1px solid; width: inherit;"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title><%= title %></title>
</head>
<body>
<%- include('nav'); %>
<img src="/liuhao/images/1.jpg" alt="1">
hello ejs express home
</body>
</html></pre> 在app.js 里面使用path方法
<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="js" cid="n221" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; background: inherit; font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: normal; position: relative !important; padding: 10px 30px; border: 1px solid; width: inherit;">const express = require('express')
// path是原生模塊墨坚，不需要安裝
const path = require('path')
?
const app = express()
?
// 設(shè)置默認的views的目錄
app.set('views', path.resolve(__dirname, 'views'))
// 設(shè)置渲染引擎為ejs, 得保證你已經(jīng)安裝ejs
app.set('view engine', 'ejs')
?
app.get('/', (req, res) => {
//res.render('index')
app.get('/', (req, res) => {
res.render('index', {
title: 'ejs and express are very niubility'
})
})
})
?
app.listen(3000, () => {
console.log('server is running on http://localhost:3000')
})</pre>訪問 http://localhost:3000/ 可以看到 title 內(nèi)容
-
新建 about.ejs
<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="js" cid="n226" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; background: inherit; font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: normal; position: relative !important; padding: 10px 30px; border: 1px solid; width: inherit;"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title><%= title %></title>
</head>
<body>
<%- include('nav'); %>
about page
</body>
</html></pre> -
更改 app.js 添加 about
<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="js" cid="n229" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; background: inherit; font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: normal; position: relative !important; padding: 10px 30px; border: 1px solid; width: inherit;">//引入安裝的express
const express = require('express');
//path是原生模塊，不需要安裝
const path = require('path');
?
const app = express();
?
//當前文件所在的目錄
console.log(__dirname);
//命令開始執(zhí)行的目錄
console.log(process.cwd());
?
//靜態(tài)資源目錄,設(shè)置默認的views目錄
app.set('views', path.resolve(__dirname, 'views'))
// 設(shè)置渲染引擎為ejs, 得保證你已經(jīng)安裝ejs
app.set('view engine', 'ejs')
?
app.get('/', (req, res) => {
//可以找到exprs所有內(nèi)容
//console.log(req)
res.render('index', {
//服務(wù)器代碼
title: 'ejs and express are very niubility'
})
})
?
app.get('/about', (req, res) => {
res.render('about', {
title: 'about'
})
})
?
app.listen(3000, () => {
console.log('server is running on http://localhost:3000')
})</pre>訪問 localhost:3000/about
-
-
添加導(dǎo)航條
-
修改 views的 indxe.ejs
<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="html" cid="n236" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; background: inherit; font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: normal; position: relative !important; padding: 10px 30px; border: 1px solid; width: inherit;"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title><%= title %></title>
</head>
<body><%- include('nav'); %>
<nav>
<a href="/">首頁</a>
<a gref="/about">關(guān)于</a>
</nav>hello ejs express home
</body>
</html></pre>
-
-
創(chuàng)建一個nav.ejs , 測試連接 訪問localhost:3000
<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="html" cid="n239" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; background: inherit; font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: normal; position: relative !important; padding: 10px 30px; border: 1px solid; width: inherit;"><div>
測試連接 cddxx
</div></pre> -
更新 about.ejs
<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="js" cid="n242" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; background: inherit; font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: normal; position: relative !important; padding: 10px 30px; border: 1px solid; width: inherit;"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title><%= title %></title>
</head>
<body>
<%- include('nav'); %>
about page
</body>
</html></pre> -
新建文件夾 assets
- 新建 image 放照片
-
在 index.ejs 里面添加 images 圖片
<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="js" cid="n251" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; background: inherit; font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: normal; position: relative !important; padding: 10px 30px; border: 1px solid; width: inherit;"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title><%= title %></title>
</head>
<body><%- include('nav'); %>
<img src="/images/1.jpg" alt="1"/>
<nav>
<a href="/">首頁</a>
<a gref="/about">關(guān)于</a>
</nav>hello ejs express home
</body>
</html></pre> -
因為在express 里面出于一些安全性的考慮映挂，會理解為靜態(tài)目錄
- 設(shè)置靜態(tài) app.js
<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="js" cid="n257" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; background: inherit; font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: normal; position: relative !important; padding: 10px 30px; border: 1px solid; width: inherit;">//引入安裝的express
const express = require('express');
//path是原生模塊泽篮，不需要安裝
const path = require('path');
?
const app = express();
?
//當前文件所在的目錄
console.log(__dirname);
//命令開始執(zhí)行的目錄
console.log(process.cwd());
?
//靜態(tài)資源目錄,設(shè)置默認的views目錄
app.set('views', path.resolve(__dirname, 'views'))
// 設(shè)置渲染引擎為ejs, 得保證你已經(jīng)安裝ejs
app.set('view engine', 'ejs')
?
// 設(shè)置靜態(tài)資源目錄 盗尸， static假的目錄
//寫了的話，也需要在indxe.ejs里面的img 里面添加 /static
app.use('/static', express.static(path.resolve(__dirname, 'assets')))
?
app.get('/', (req, res) => {
//可以找到exprs所有內(nèi)容
//console.log(req)
res.render('index', {
//服務(wù)器代碼
title: 'ejs and express are very niubility'
})
})
?
app.get('/about', (req, res) => {
res.render('about', {
title: 'about'
})
})
?
app.listen(3000, () => {
console.log('server is running on http://localhost:3000')
})</pre> -
設(shè)置公共 nav.ejs 再修改
<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="js" cid="n260" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(54, 59, 64); font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: normal; position: relative !important; padding: 10px 30px; border: 1px solid; width: inherit; color: rgb(184, 191, 198); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"><nav>
<a href="/">首頁</a>
<a gref="/about">關(guān)于</a>
</nav></pre>
