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://blog.zgcwkj.cn/archives/121.html

转载声明：请注明本文章的标题及内容的出处和声明，谢谢

评论已关闭

Top