关键词:
想了非常久。总想写点对大家有优点的,今天解说生成项目。
如今市面上一般须要人全栈-----mean(mongo,express。angular,nodejs),这样能够从前端开发到后端以及数据库,听起来牛呼呼的。
这篇文章就说nodejs和比較流行的框架express4.X版本号(因为3.X版本号没怎么研究过。并且和4有一定差别。况且4也出来非常久了。非用不可啊),后面的文章会带上mongo(oh。应该说是mongoose)至于angualr我有独立的研究过。和nodejs之流放在一起用还没搞过,还是看实际情况吧。
这篇文章就写个生成项目(页面就用ejs,对jade木有还没研究,不能坑了大伙)
众所周知,一个project肯定有非常多目录以及文件。那么怎么高速生成开发框架呢。两种方式,第一是使用工具,我用的是webstorm,另一个是语法,用命令操作到工作空间,然后运行命令 express -e aTest(当中-e就是指ejs。aTest是project名。也是最上层的目录名),为了可以形象化截图。我们还是用工具生成。
1:new一个project,各种开发都是从这里開始的
2:选nodeproject
3:选版本和驱动面板,版本不改,驱动面板改成ejs。点击ok
因为我们本地已经安装了nodejs。所以我们点击cancel
这样,一个nodejsproject生成了。例如以下图
文件夹解释:
app.js:启动文件,或者说入口文件
package.json:存储着project信息以及模板依赖,当在dependencies中加入依赖的模块时。执行npm install,nmp会检查当前文件夹下的package.json,并自己主动安装全部指定的模块
node_modules:存放package.json中安装的模块,当你在package.json加入依赖的模块并安装后,存放在这个目录下
public:存放image、css、js等文件
routes:存放路由文件
views:存放视图文件或者说模板文件
bin:存放可运行文件
打开app.js
<span style="font-size:14px;">var express = require('express'); var path = require('path'); var favicon = require('serve-favicon'); var logger = require('morgan'); var cookieParser = require('cookie-parser'); var bodyParser = require('body-parser'); var routes = require('./routes/index'); var users = require('./routes/users'); var app = express(); // view engine setup app.set('views', path.join(__dirname, 'views')); app.set('view engine', 'ejs'); // uncomment after placing your favicon in /public //app.use(favicon(__dirname + '/public/favicon.ico')); app.use(logger('dev')); app.use(bodyParser.json()); app.use(bodyParser.urlencoded({ extended: false })); app.use(cookieParser()); app.use(express.static(path.join(__dirname, 'public'))); app.use('/', routes); app.use('/users', users); // catch 404 and forward to error handler app.use(function(req, res, next) { var err = new Error('Not Found'); err.status = 404; next(err); }); // error handlers // development error handler // will print stacktrace if (app.get('env') === 'development') { app.use(function(err, req, res, next) { res.status(err.status || 500); res.render('error', { message: err.message, error: err }); }); } // production error handler // no stacktraces leaked to user app.use(function(err, req, res, next) { res.status(err.status || 500); res.render('error', { message: err.message, error: {} }); }); module.exports = app; </span>
这里我们通过require()载入了express、path 等模块,以及 routes 目录下的index. js和 users.js 路由文件。 以下来解说每行代码的含义。
(1) var app = express():生成一个express实例 app。
(2)app.set(‘views‘, path.join(__dirname, ‘views’)):设置 views 文件夹为存放视图文件的文件夹, 即存放模板文件的地方,__dirname 为全局变量,存储当前正在运行的脚本所在的文件夹。
(3)app.set(‘view engine‘, ‘ejs’):设置视图模板引擎为 ejs。
(4)app.use(favicon(__dirname + ‘/public/favicon.ico’)):设置/public/favicon.ico为favicon图标。
(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(‘/‘, routes);和app.use(‘/users‘, users):路由控制器。
(11)
app.use(function(req, res, next) {
var err = new Error(‘Not Found‘);
err.status = 404;
next(err);
});
捕获404错误,并转发到错误处理器。
(12)
if (app.get(‘env‘) === ‘development‘) {
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render(‘error‘, {
message: err.message,
error: err
});
});
}
开发环境下的错误处理器,将错误信息渲染error模版并显示到浏览器中。
(13)
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render(‘error‘, {
message: err.message,
error: {}
});
});
生产环境下的错误处理器。将错误信息渲染error模版并显示到浏览器中。
(14)module.exports = app :导出app实例供其它模块调用。
接下来再看看bin/www文件
#!/usr/bin/env node /** * Module dependencies. */ var app = require('../app'); var debug = require('debug')('aTest:server'); var http = require('http'); /** * Get port from environment and store in Express. */ var port = normalizePort(process.env.PORT || '3000'); app.set('port', port); /** * Create HTTP server. */ var server = http.createServer(app); /** * Listen on provided port, on all network interfaces. */ server.listen(port); server.on('error', onError); server.on('listening', onListening); /** * Normalize a port into a number, string, or false. */ function normalizePort(val) { var port = parseInt(val, 10); if (isNaN(port)) { // named pipe return val; } if (port >= 0) { // port number return port; } return false; } /** * Event listener for HTTP server "error" event. */ function onError(error) { if (error.syscall !== 'listen') { throw error; } var bind = typeof port === 'string' ?'Pipe ' + port : 'Port ' + port; // handle specific listen errors with friendly messages switch (error.code) { case 'EACCES': console.error(bind + ' requires elevated privileges'); process.exit(1); break; case 'EADDRINUSE': console.error(bind + ' is already in use'); process.exit(1); break; default: throw error; } } /** * Event listener for HTTP server "listening" event. */ function onListening() { var addr = server.address(); var bind = typeof addr === 'string' ?
'pipe ' + addr : 'port ' + addr.port; debug('Listening on ' + bind); }
解释一下:
(1)#!/usr/bin/env node:表明是 node 可运行文件。
(2)var debug = require(‘debug‘)(‘blog’):引入debug模块。打印调试日志。
(3)var app = require(‘../app’):引入我们上面导出的app实例。
(4)app.set(‘port‘, process.env.PORT || 3000):设置端口号。
(5)
var server = app.listen(app.get(‘port‘), function() {
debug(‘Express server listening on port ‘ + server.address().port);
});
启动project并监听3000端口,成功后打印 Express server listening on port 3000。
以下再看一下 routes/index.js 文件:
var express = require('express'); var router = express.Router(); /* GET home page. */ router.get('/', function(req, res, next) { res.render('index', { title: 'Express' }); }); module.exports = router;
生成一个路由实例用来捕获訪问主页的GET请求,导出这个路由并在app.js中通过app.use(‘/‘, routes); 载入。
这样,当訪问主页时,就会调用res.render(‘index‘, { title: ‘Express‘ });渲染views/index.ejs模版并显示到浏览器中。
再看 views/index.ejs 文件:
<!DOCTYPE html> <html> <head> <title><%= title %></title> <link rel='stylesheet' href='/stylesheets/style.css' /> </head> <body> <h1><%= title %></h1> <p>Welcome to <%= title %></p> </body> </html>
在渲染模板时我们传入了一个变量 title 值为 express 字符串。模板引擎会将全部 <%= title %> 替换为 express 。然后将渲染后生成的html显示到浏览器中,如上图所看到的。
通过上面的知识。我们学习了怎样创建一个project并启动它。了解了project的大体结构和运作流程。下一篇讲路由。
。。
小程序入门项目结构篇。
项目结构小程序入门(0)项目创建篇 ,下载开发工具并创建项目。小程序入门(2)浅析篇 ,了解wxml与wxss的配合使用小程序进阶(1)豆瓣电影,看文档,复制文档代码基础布局也可以轻松搭建。在编辑中找到加号!创... 查看详情
gulp系列之快速入门篇(代码片段)
...序npminstall--globalgulp-cli创建一个项目目录并浏览npxmkdirpmy-projectcdmy-project在您的项目目录中创建package.json文件npminit这将指导您为项目命名,版本,说明等。在您的devDependencies中安装gulp软件包npminstall--save-devgulp验证您的gulp版本gulp--... 查看详情
pixhawk之姿态解算篇_入门篇(dcmnomalize)
一、开篇 慢慢的、慢慢的、慢慢的就快要到飞控的主要部分了,飞控飞控就是所谓的飞行控制呗,一个是姿态解算一个是姿态控制,解算是解算,控制是控制,各自负责各自的任务。我也不懂。还在学习中~~~~&n... 查看详情
docker入门之container篇
启动启动容器有两种方式,一种是基于镜像新建一个容器并启动,另外一个是将在终止状态(stopped)的容器重新启动。因为Docker的容器实在太轻量级了,很多时候用户都是随时删除和新创建容器。 1)新建并启动:dockerrun例... 查看详情
小程序入门项目创建篇
已经创建项目的可以看我另一篇讲解 小程序入门讲解(1)项目结构篇。 官方下载地址安装后扫描二维码登入。 添加项目你应该是没有APPID的选择无APPID会缺少一项功能后面讲解(目前只发现一项)。 好了项... 查看详情
在 NodeJS 中续集:内部 JOIN 实现失败
...描述】:我有三个表承包商、项目和可连接的这两个表是projects_contractors,我创建了模型并编写了如下所示的关系,Contractor.hasMany(Project,joinTableName:\'projects 查看详情
《java从入门到放弃》javase入门篇:面向对象语法一(入门版)
前一次简单说明了一下面向对象编程的概念,今天我们就把这些概念通过Java语法来实现,然后看看效果。来看第一个案例:定义女神类,再根据女神类创建三个女神对象,并使用女神对象的属性和方法。第一步:定义女神类(... 查看详情
kotlin基础从入门到进阶系列讲解(入门篇)sqlite数据库存储(代码片段)
Kotlin基础从入门到进阶系列讲解(入门篇)SQLite数据库存储SQLite数据库存储1、创建数据库2、升级数据库3、添加数据4、更新数据5、删除数据6、查询数据SQLite数据库存储->返回总目录<-1、创建数据库SQLiteOpenHelper是一个抽象类... 查看详情
spring入门篇
...所有技术的方式。。。学习Spring的资源http://spring.io/http://projects.spring.io/spring-framework/Spring是什么&n 查看详情
《nodejs+gulp+webpack基础实战篇》课程笔记--实战演练
...一样写前端页面。我们首先学习一下写法. 现在我们创建一个新任务:创建一个裸的index.html文件,然后在body里面写上,我的年龄是:<%=age%> 下载好gulp-template,我们引用并配置vargulp_ 查看详情
新手快速入门之vue-cli项目router的使用
...ndows的cmd命令行模式或者node环境下新建命令:$vueinitwebpackproject-namecdproject-namenpminstallnpmrundev以上命令则可创建一个新项目(项目名称project-name可自己输入),并运行。 以下是关于vue-cli中文件的执行顺序: 查看详情
mysql入门篇(代码片段)
MySql入门篇(二)索引定义:排好序的快速查找的数据结构索引分类索引SQL在创建表时创建索引在以创建的表上添加索引a.通过create语法创建b.通过alter语法创建删除索引索引的执行过程事务事务的定义事务的特征(ACID)... 查看详情
nodejs的运行原理-科普篇
前言Nodejs目前处境稍显尴尬,很多语言都已经拥有异步非阻塞的能力。阿里的思路是比较合适的,但是必须要注意,绝对不能让node做太多的业务逻辑,他只适合接收生成好的数据,然后或渲染后,或直接发送到客户端。为什么no... 查看详情
自学人工智能之数学篇,数学入门并不难
自学人工智能之数学篇,数学入门并不难 http://blog.itpub.net/31549715/viewspace-2200126/ 写这篇文章很久想了很久,到底该怎么写?关于数学与机器学习的关系,观点很多。写本文的目的,希望结合众家之长,试图解决数学对机... 查看详情
kotlin基础从入门到进阶系列讲解(入门篇)下载sqlite软件,如何创建/添加/更新/查询/删除数据
Kotlin基础从入门到进阶系列讲解(入门篇)下载SQLite软件,如何创建/添加/更新/查询/删除数据下载SQLite软件,如何创建/添加/更新/查询/删除数据一、下载安装SQLite软件二、创建文件名、表名和字段名三、添加数据四、更新数据... 查看详情
《java从入门到放弃》入门篇:spring中ioc的注入姿势
IOC到底是个什么东东呢?控制反转(InversionofControl,英文缩写为IoC),其实就是这个东东。你随便百度一下就会得到比较书面的解释:通过引入实现了IoC模式的IoC容器,即可由IoC容器来管理对象的生命周期、依赖关系等,从而使... 查看详情
three.js入门篇创建一个场景
上一面讲述了向场景中添加物体对象。这一篇准备把每个功能点细细的讲述一遍,一方面是为了加深自己的理解。另一方面希望能够帮助到有需要的人。一、在学习WEBGL的时候,你应该先了解要创建一个WebGL程序需要哪些步骤。... 查看详情
disconf实践指南:使用篇
...conf控制台:http://localhost:8091,第一步:创建应用,awesome-project(自定);第二步:创建 查看详情