nodejs自学之旅（1）—— npm安装及分模块开发思想

清疚 2021-09-14 16:30 341阅读 0赞

毕设题目：全景图展示平台搭建

使用技术：node.js 、 three.js、 vue.js

说实话这三个东西除了three.js是刚接触的，其他之前都有基础了解，既然要从头到尾搭一个网页出来，那我就单独拎出来三个模块，从头到尾仔仔细细学一遍，为了准备年后的工作面试，期间还会有面试题的探究，希望大家表面赞扬（偷偷批评）

学习本章之前请安装好nodejs环境，配置好全局环境变量，具体教程百度一大堆，总有一款适合你，个人觉得配置环境应该是程序的必备技能之一了。（建议使用webstorm软件，我非常讨厌这个软件，卡的飞起）另外本教程不适合对nodejs一点都不了解的程序猿观看，因为本教程基本使用的是express插件，个人使用过程中感觉该插件与nodejs的关系，就像JQ与JS的关系，你说你没经历过JS直接学JQ，多费劲儿呀，所以稍微打点基础，对理解插件使用有很大的好处

安装好基础的nodejs环境之后

第一步:

在控制台输入node install

除了工程名其他暂时跳过

第二步：

使用npm install --save 命令，安装以下插件，这些插件都会用到，提一句，使用的不是熟悉的mysql数据库

"body-parser": "^1.18.2",  
"cookies": "^0.7.1",  
"express": "^4.16.2",  
"markdown": "^0.5.0",  
"mongoose": "^5.0.3",  
"swig": "^1.4.2"

示例：npm install --save express

第三步：创建必要的文件目录

![SouthEast][]

从上到下依次为数据库、数据库模型、node第三方插件、路由文件、数据库结构文件、静态文件、视图文件、app启动文件。

先不着急了解他们都是干啥的，后面的肯定会一一讲到，不急吧~

第四步：写一个最基本的app.js

//加载express模块
    var express = require("express");
    //创建APP应用=> createServer
    var app = express();
    
    //加载模板处理模块
    var swig = require("swig");
    app.engine('html',swig.renderFile);
    app.set('views','./views');
    app.set('view engine','html');
    swig.setDefaults({cache: false}); //防止浏览器缓存文件内容，导致内容不能实时更新
    //设置静态文件托管
    //当用户访问的url以/static开始，那么直接返回对应__dirname + '/static'下的文件
    app.use( '/static', express.static( __dirname + '/static') );
    
    //监听HTTP请求
    app.listen(5683);
    
    //划分模块
    app.use('/admin', require('./routers/admin')); //后台管理员
    app.use('/api', require('./routers/api')); //接口
    app.use('/', require('./routers/main')); //面向用户

static文件夹：

首先先来创建一个app启动项，如果对nodejs有了解的py应该会发现其实跟在three.js自学之旅中搭建的服务器有一定的相似之处，这里主要讲一下静态文件托管，由于我们在写项目的过程中，都会用到很多css、js、img等文件，这些文件往往不需要经过处理（原来是什么，加载进来还是什么），因此express提供了一个方法，让我们更好地管理静态文件，将他们一起存储到static文件夹，方便我们使用。其他代码请看注释。应该不难理解。

routers文件夹：

关于模块的划分思想，主要是通过app.use方法，处理不同的路由（routers），在这个项目里，我将路由划分为三个大块，分别是后台管理员，接口，以及面向用户的主页，将他们划分为三个大块方便开发者进行开发，比如有三个人，一个开发后台+接口，一个负责面向用户的前端，当然如果你既当爹又当妈那就另当别论，但还是建议进行模块化开发。

来看一下其中一个模块（用户模块）被划分到main.js后，里面做了什么处理

var express = require('express');
    var router = express.Router();
    
    router.get('/login',function(req,res,next){
        res.render('login'); //加载login.html
    })
    
    module.exports = router; //返回数据给app.use

第五步：

在控制台启动服务器，node app

查看效果：静态文件main.css 以及 login.html文件都解析成功

![SouthEast 1][]

[SouthEast]: /images/20210813/5b055b2974b14487b6b853d5dcb1ed88.png
[SouthEast 1]: /images/20210813/045d2f5f0b6f49fcae570bba2e8cee83.png