一、前言
⋅⋅⋅通过上节学习，我们已经ubuntu系统搭建了一个可以访问的nodejs系统，并做了nginx转发。本节原要做web端服务 及 mongodb的存取，但写着写着，web端就写了很长，有些啰嗦，本着不重要的讲一遍，重要写三遍的原则，本节主要是讲适合初学者的web端服务搭建。mongodb下节再讲。
二、mongo
1、安装：
⋅⋅⋅执行 sudo apt-get install mongodb
⋅⋅⋅作用：安装mongodb，即安装成功，可以通过执行mongo，即可以看到mongo进入mongo的管理命令，并看到mongodb的版本号，mongo使用可参见
⋅⋅*http://www.upopen.cn/article/info?id=559688a7f0e6e0665b000004
二、web服务
1、实现路由功能
⋅⋅⋅在web目录下创建routes目录，并创建index.js文件
⋅⋅⋅作用：创建路由文件夹，上一节我们在app.js添加了app.get(…)代码，实现将用户访问指向到index.ejs，我们单独创建一个文件夹来归类所有请求，后面有大量工作都是做功能模块、文件的细分，前期细化对后期项目扩展有益
⋅⋅⋅在/web/routes/index.js添加
javascriptexports.all = function( app ){ app.get( '/', function( req, res ){ res.render( 'index.ejs' ); }) }
⋅⋅⋅在/web/app.js里引用routes文件，并把app.get换成 routes里指向如下
javascriptvar express = require( 'express' ), http = require( 'http' ), routes = require( './routes' ), //新增routes引用 path = require( 'path' ); ... app.use( '/', express.static( path.join( __dirname, 'assets' ))); routes.all( app ); //原app.get替换成 routes，所有的请求走routes.all里定义的函数 server.listen( app.get( 'port' ), function(){ console.log( 'root server listening on port ' + app.get( 'port' )); } ); ...
⋅⋅⋅重新执行node.js，浏览器打开站点，功能可以同样使用。
2、模板功能。
⋅⋅⋅页面 header / footer / menu 通常是共用的，我们用ejs的include实现
⋅⋅⋅在views下创建common文件夹，存放页面的公用部分。
⋅⋅⋅common下创建header.ejs文件，加入页头的公用部分，可以视情况到<body>为止
javascript<!DOCTYPE html> <html> <head> <title>我的nodejs项目</title> <link href="/public/css/style.css" rel="stylesheet" > </head> <body>
⋅⋅⋅引用了style.css的样式文件，自行在static下增加下。
⋅⋅⋅同样创建footer.ejs文件
javascript<script src="/core/js/jquery.min.js"></script> </body> </html>
⋅⋅⋅同样增加了jquery.min.js，在static下增加，这个js是放在core文件夹，与public区别开，用来放基本稳定的一些公用文件
⋅⋅⋅在views下创建issue文件夹，把/views/index.ejs放到/views/issue里，归类存放站点不需要登录的资源
javascriptviews --- common --- header.ejs --- footer.ejs --- issue --- index.ejs
⋅⋅⋅index.ejs内include header.ejs/ footer.ejs
javascript<% include ../common/header.ejs %> <h1>我的nodejs项目</h1> <img src="/public/imgs/logo.png" /> <% include ../common/footer.ejs %>
⋅⋅⋅这样我们即实现了模板功能，header.js及 footer.js自行丰富，通常css文件放在header里，js放footer里，对渲染效率有益。
⋅⋅⋅注意： index.ejs的路径改了，路由指向index.ejs也要增加issue目录
3、新增注册页面：
⋅⋅⋅复制/web/views/index.ejs，重命名为 register.ejs，增加form
<% include ../common/header.ejs %>
<form>
<label>用户名: <input type="text" id="username" /></label>
<label>密码: <input type="text" id="password" /></label>
<label>邮件: <input type="text" id="email" /></label>
<button type="submit">注册</button>
</form>
<% include ../common/footer.ejs %>
⋅⋅⋅在/web/routes文件夹下，复制index.js 为 issue.js，写入代码
javascriptfunction register( req, res ){ //定义注册转向 res.render( 'issue/register.ejs' ); } module.exports = { //对外公开register函数 register: register }
⋅⋅⋅修改routes/index.js
javascriptvar issue = require( './issue' ); //引入issue.js文件 exports.all = function( app ){ app.get( '/', function( req, res ){ res.render( '/issue/index.ejs' ); }); app.get( '/register', function( req, res ){ issue.register( req, res ) //将register请求转向issue内的函数 }); }
⋅⋅⋅重启nodejs，访问 http://www.mynodejs.com/register。
⋅⋅⋅后面我们频繁改动web里的文件，都需要重启才生效，影响效率，nodejs提供了node-dev模块，可以监听项目文件修改自动重启
4、node-dev
⋅⋅⋅执行：npm install -g node-dev
⋅⋅⋅作用：将node-dev安装到全局模块
⋅⋅⋅关闭原来启动的nodejs，重新执行 node-dev – – debug app.js 即可，后面再改服务端js，nodejs会自动重启
5、页面文件个性化引用 及 静态文件目录
⋅⋅⋅前面我们引用 了模板功能，header.ejs放公共文件，方便调用。但每个页面总有些个性化的信息及自己的css / js，此处用到了ejs的命令功能。
⋅⋅⋅首先，在root/static下创建 module文件夹放所有页面的静态文件，再针对每个页面创建对应的静态文件夹
⋅⋅⋅如 register，目录结构为
javascript
static ---module ---issue ---register ---register.css ---register.js ---imgs ---index ---index.css ---index.js ---imgs
⋅⋅⋅整体结构与ejs下一致
⋅⋅⋅打开header.ejs文件，首先每个页面 的title是个性化的，css，也需要引用 针对本页面的定义css
⋅⋅⋅修改如下
javascript... <head> <title><%= title %></title> <!--个性化定义title--> <link href="<%= basePath %>/public/css/style.css" rel="stylesheet" > <link href="<%= basePath %>/module<%= currentPage %>.css" type="text/css" rel="stylesheet" > <!--个性化定义引入文件--> </head> …
⋅⋅⋅在root/web/下新建config文件夹，用来放站点一些配置信息，其下新建site.js，配置页面信息
javascriptvar siteTitle = '优品开源', //站点名称 pageTitle = { //各页面名称 '/': '首页', '/index': '首页', '/register': '注册' }, basePath = 'http://www.mynodejs.com'; //设置页面根路径 module.exports = { //对外开放配置 setting: function( req, path, file ){ return { title: pageTitle[ req.path ] + '-' + siteTitle, //组成当前页面标题 basePath: basePath, currentPage: ( path || '' ) + ( file || req.path.replace(/(\/[a-z|A-Z]*)?$/,function($1){return $1 + $1}) ), //据当前访问路径生成静态文件路径 } } }
⋅⋅⋅修改web/routes/issue.js，把index.ejs的引入也放进来
javascriptvar site = require( '../config/site' ); //引入site Config function index( req, res ){ res.render( 'issue/index.ejs', site.setting( req, '/issue/index', '/index' ) ); } //首页没有页面路径，需要指定path及 filename function register( req, res ){ res.render( 'issue/register.ejs', site.setting( req, '/issue' ) ); //配置信息，供ejs调用 } module.exports = { register: register }
⋅⋅⋅配置完成，项目是node-dev启动，无需重启，再访问下首页，可以看到title是“首页-优品开源”，也引用了其自己的index.css，register也一样
6、模块块管理 requireJs
⋅⋅⋅js文件的调用，我们使用requireJs，使用参见
⋅⋅⋅/web/view/common/footer.ejs，修改如下
javascript<script type="text/javascript" src="<%= basePath %>/core/jquery.min.js"></script> <script type="text/javascript" data-main="<%= basePath %>/module<%= currentPage %>.js" src="<%= basePath %>/core/require.js"></script> <!-- js的路径引用模式同css--> </body> </html>
⋅⋅⋅如jquery这种各页面都需要引用的js，建议不要通过模块引用，徒增计算。
7、发送接收ajax请求
⋅⋅⋅在 static/module/issue/register/register.js内增加ajax代码
javascriptdefine( function(){ $( '#registerForm' ).on( 'submit', function(){ var data = { username: $('#username').val(), password: $('#password').val(), email: $('#email').val() }; $.ajax({ url: '/register', type: 'post', dataType: 'json', data: data, success: function( ret ){ console.log( ret ); } }); return false; }) });
⋅⋅⋅/web/routes/index.js 新增请求接收
javascriptapp.post('/register', function( req, res ){ issue.registerUser( req, res ); });
⋅⋅⋅此处是app.post，对应ajax的type:’post’
⋅⋅⋅/web/routes/issue.js 新增
javascriptfunction registerUser( req, res ){ res.send( { code: 0, msg: 'register info access success',data: req.body } ); //这里原本是要处理数据库存储操作，这里先走通ajax通信，验证能成功获取数据 }
⋅⋅⋅注意后面的 module.exports里要增加 registerUser
⋅⋅⋅通过 package.json 安装 body-parser 模块，方法见 0.1
⋅⋅⋅/web/app.js，新增
javascriptvar express = require( 'express' ), ... bodyParser = require( 'body-parser' ), //新增模块引用 ... path = require( 'path' ); ... app.use( '/', express.static( path.join( __dirname, 'assets' ))); //静态文件路径 app.use( bodyParser.urlencoded({ extended: false })); …
⋅⋅⋅打开register，提交表单，打开调试工具，可以看到 ajax数据已经发送成功，并成功返回registerUser 里定义的数据
⋅⋅⋅OK，到现在为止，我们安装Mongo、实现的路由、公共模板 及 其内个性化数据的定义，使用node-dev，并成功在register页面通过ajax与WEB服务端通信，下一节，我们将WEB服务端接收到的数据insert到db，并能 find，站点就完成了初步的注册、登录中的数据交互
