Nodejs MVC設計模式

使用MVC設計模式寫個小工具

建立 MVC 目錄結構

mkdir -p mynodejs/factorcalculation
npm init
mkdir views controllers modles public

安裝必要套件

npm install express --save
npm install ejs --save

編輯路由清單 => app.js

測試： 

var express = require("express");
var app =  express();
app.get("/", function(req,res){
    res.send("ok");
});

app.listen(3000);
console.log("server start at port 3000");

使用ejs模板引擎

views目錄中建立index.ejs檔案 

<!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>Document</title>
</head>
<body>
    <h1>ejs模板開始頁</h1>
</body>
</html>

渲染使用index.ejs

var express = require("express");
var app =  express();
//ejs模板引擎
app.set("view engine", "ejs");

app.get("/", function(req,res){
    //res.send("ok");
    //渲染使用ejs
    res.render("index",{
        //json字典檔
    });
});

app.listen(3000);
console.log("server start at port 3000");

使用靜態頁面，導入Bootstrap框架

將public作為靜態資源目錄根目錄

var express = require("express");
var app =  express();
//ejs模板引擎
app.set("view engine", "ejs");

app.get("/", function(req,res){
    //res.send("ok");
    //使用ejs
    res.render("index",{
        //json字典檔

    });
});

//將public作為靜態資源目錄根目錄
app.use(express.static("public"));

app.listen(3000);
console.log("server start at port 3000");

將下載的檔案解壓到 public 目錄中（css，js）

測試靜態css頁面

使用Bootstrap (Navbar, Button...)

把程式碼複製，貼到你的views/index.ejs中即可看到效果

由於原程式碼仍複雜，清理修改如下

<!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>
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#">因數計算</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
    </nav>
</body>
</html>

加入文字表單、按鈕元件

引入JQuery到 public/js/jquery.min.js

寫錯字，除錯用chrome開發人員工具

jsquery.min.js 要改成 jquery.min.js

Previous使用express＋ejs框架Next連接mongodb

Last updated