NodeJs 网站开发入门

@zgcwkj  2019年07月23日

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>

好了,你可以尝试启动一下项目

注意:引用路由文件时的顺序,整个程序是从上往下的!



添加新评论

Top