一个简单的node项目

koa ---基于node.js 平台是 下一代 web 开发框架

  • 安装 npm install express -save
EJS 模板 <%= EJS %>

  • 安装 npm install ejs -S

  • https://ejs.bootcss.com/

  • "E" 代表 "effective"，即【高效】。EJS 是一套简单的模板语言，帮你利用普通的 JavaScript 代码生成 HTML 页面。EJS 没有如何组织内容的教条；也没有再造一套迭代和控制流语法；有的只是普通的 JavaScript 代码而已。

  1. 重新创建 app.js

    // path是原生模块，不需要安装
const path = require('path')
​
const app = express()
​
// 设置默认的views的目录
app.set('views', path.resolve(__dirname, 'views'))
// 设置渲染引擎为ejs, 得保证你已经安装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>

  2. 新建文件夹 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()
    ​
    // 设置默认的views的目录
    app.set('views', path.resolve(__dirname, 'views'))
    // 设置渲染引擎为ejs, 得保证你已经安装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 内容

    • 新建 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);
      //命令开始执行的目录
      console.log(process.cwd());
      ​
      //静态资源目录,设置默认的views目录
      app.set('views', path.resolve(__dirname, 'views'))
      // 设置渲染引擎为ejs, 得保证你已经安装ejs
      app.set('view engine', 'ejs')
      ​
      app.get('/', (req, res) => {
      //可以找到exprs所有内容
      //console.log(req)
      res.render('index', {
      //服务器代码
      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

  3. 添加导航条

    • 修改 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">关于</a>
      </nav>

      hello ejs express home
      </body>
      </html></pre>

  4. 创建一个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>

  5. 更新 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>

  6. 新建文件夹 assets

    • 新建 image 放照片

  7. 在 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">关于</a>
    </nav>

    hello ejs express home
    </body>
    </html></pre>

  8. 因为在express 里面出于一些安全性的考虑，会理解为静态目录

    • 设置静态 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);
    //命令开始执行的目录
    console.log(process.cwd());
    ​
    //静态资源目录,设置默认的views目录
    app.set('views', path.resolve(__dirname, 'views'))
    // 设置渲染引擎为ejs, 得保证你已经安装ejs
    app.set('view engine', 'ejs')
    ​
    // 设置静态资源目录 ， static假的目录
    //写了的话，也需要在indxe.ejs里面的img 里面添加 /static
    app.use('/static', express.static(path.resolve(__dirname, 'assets')))
    ​
    app.get('/', (req, res) => {
    //可以找到exprs所有内容
    //console.log(req)
    res.render('index', {
    //服务器代码
    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>

  9. 设置公共 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">关于</a>
    </nav></pre>

©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
禁止转载，如需转载请通过简信或评论联系作者。

推荐阅读更多精彩内容