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

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

使用技术: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

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


从上到下依次为数据库、数据库模型、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文件都解析成功








猜你喜欢

转载自blog.csdn.net/dkr380205984/article/details/79252503