NodeJs 網站開發入門

@zgcwkj  2019年07月23日

分類：

代碼 其它 

標簽：

none 

NodeJs 網站開發入門案例，使用 Express 框架搭建

首先你要會安裝 Nodejs 環境和 JAVA 環境安裝類似

PS：需要有 Js 基礎，不然看了等於沒看，還浪費你的時間

開始入門

基礎說明

  • 1.Nodejs 是什麼？

    • 答：運行在服務端的 JavaScript

  • 2.NPM 是什麼？

    • 答：NodeJS 的包管理工具

  • 3.Nodejs 有什麼優勢？

    • 答：自己去查

基礎命令

指令說明
nodejs 文件運行 Nodejs 程序
npm installnpm 下載引用包
npm install 包名npm 下載引用指定的包
npm uninstallnpm 卸載引用包
npm uninstall 包名npm 卸載引用指定的包

項目目錄結構

┌ NodejsProject
├── views（視圖文件）
├──┼── index.html（網站視圖）
├── resource（資源文件）
├──┼── favicon.ico（網站默認圖標）
├── controls（路由文件）
├──┼── index.js（默認路由）
├──┼── filter.js（過濾器路由）
├── app.js（程序啟動入口）
└── package.json（程序引用的包）

對應的文件內容

package.json 文件

{
    "name": "nodejs-app",
    "description": "APP描述",
    "version": "0.0.1",
    "private": true
}

引用包

第一種，命令安裝：
npm install express
npm install consolidate
npm install swig
npm install body-parser
npm install cookie-parser
npm install express-session
npm install fs
第二種，直接更改 package.json 文件：
{
    "name": "nodejs-app",
    "description": "APP描述",
    "version": "0.0.1",
    "private": true,
    "dependencies": {
        "consolidate": "^0.15.1",
        "cookie-parser": "^1.4.4",
        "express": "^4.17.1",
        "express-session": "^1.16.2",
        "fs": "0.0.1-security",
        "swig": "^1.4.2"
    }
}
需要執行 npm install 命令，確保包引用正常

app.js 文件

var express = require('express');
var cons = require('consolidate');
var app = express();
//==> 模板引擎
var swig = require('swig');// 模板引擎
app.engine('.html', cons.swig);// 指定注冊swig引擎來渲染成html文件
app.use(express.static('resource'));// 靜態資源位置
app.set('views', './views');// 指定模版文件位置
app.set('view engine', 'html');// 設置默認的擴展
//==> Body-parser
var bodyParser = require('body-parser');
app.use(bodyParser.json()); // 用於解析 application/json
app.use(bodyParser.urlencoded({
    extended: true
})); // 解析 application/x-www-form-urlencoded
//==> Cookies
var cookieParser = require('cookie-parser');//req.cookies
app.use(cookieParser());
//==> Session
var session = require('express-session');//req.session
app.use(session({
    resave: true, // 未修改的不保存會話
    saveUninitialized: false, // 在存儲前不創建會話
    secret: 'keyboard cat',// 加鹽
    cookie: { maxAge: 60 * 1000 * 30 }// 有效時長（毫秒）
}));

// 引用路由
app.use('/', [
    require('./controls/index'),// 默認路由
    require('./controls/filter'),// 過濾器路由
]);

// 404 錯誤請求處理
app.use(function (req, res, next) {
    res.status(404);
    res.render('404.html');
});

// 500 錯誤請求處理
app.use(function (err, req, res, next) {
    if (!err) {
        return next();
    }
    console.log(err);
    res.status(500);
    res.render('500.html');
});

// 啟動服務
var server = app.listen(8088, function () {
    var host = server.address().address;
    var port = server.address().port;

    console.log('啟動成功，地址：http://%s:%s', host, port);
});

controls/index.js 文件

//==> 默認路由
var express = require('express');
var router = express.Router();
var fs = require("fs");

//==> 入口頁面
router.get('/', function (req, res, next) {
    res.render('index');
});

//==> 登陸頁面
router.get('/login', function (req, res, next) {
    res.render('index');
});

//==> 登陸請求接口
router.post('/login/login', function (req, res, next) {
    var username = req.param('username') || req.header('username') || req.body.username || '';
    var password = req.param('password') || req.header('password') || req.body.password || '';
    if (username == password) {
        req.session.username = username;
        req.session.password = password;
        res.json(200, {
            code: 1,
            mag: '登陸成功'
        });
    } else {
        res.json(200, {
            code: 0,
            mag: '登陸失敗'
        });
    }
});

module.exports = router;

controls/filter.js 文件

//==> 過濾器路由
var express = require('express');
var router = express.Router();
var fs = require("fs");

router.use('/*', function (req, res, next) {
    var username = req.session.username || '';
    var password = req.session.password || '';
    if (!username && !password) {
        res.redirect('/login');
        return;
    }
    next();
});

module.exports = router;

views/index.html 文件

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width">
<title>index</title>
</head>
<body>
<h5>世界你好！</h5>
</body>
</html>

好了，你可以尝試啟動一下項目

注意：引用路由文件時的順序，整個程序是從上往下的！

版權屬於：zgcwkj

本文鏈接：https://www.zgcwkj.com/archives/121.html

轉載聲明：請注明本文章的標題及內容的出處和聲明，謝謝

評論已關閉

Top