技术新Q群：435485569
一、前言
????????通过上节学习，我们已经????????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添加
????????***************************************************************************
????????exports.all = function( app ){
????????????app.get( ‘/‘, function( req, res ){
????????????????res.render( ‘index.ejs‘ );
????????????})
????????}
????????#############################################
?
????????在/web/app.js里引用routes文件，并把app.get换成?routes里指向，如下
????????**************************************************************************
????????var 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>为止
????????************************************************************
????????<!DOCTYPE html>
????????<html>
????????<head>
????????<title>我的nodejs项目</title>
????????<link href="/public/css/style.css" rel="stylesheet" >
????????</head>
????????<body>
????????#####################################
????????引用了style.css的样式文件，自行在static下增加下。
????????同样创建footer.ejs文件
????????**************************************************************
????????<script src="/core/js/jquery.min.js"></script>
????????</body>
????????</html>
????????#####################################
????????同样增加了jquery.min.js，在static下增加，这个js是放在core文件夹，与public区别开，用来放基本稳定的一些公用文件
????????在views下创建issue文件夹，把/views/index.ejs放到/views/issue里，归类存放站点不需要登录的资源
????????views --- common --- header.ejs
?????????????????????????????????????--- footer.ejs
????????????????????????--- issue --- index.ejs
????????index.ejs内include header.ejs/ footer.ejs
????????****************************************************************
????????<% 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，写入代码
????????****************************************************************
????????function register( req, res ){ //定义注册转向
????????????res.render( ‘issue/register.ejs‘ );
????????}
????????module.exports = { //对外公开register函数
????????????register: register
????????}
????????######################################
????????修改routes/index.js
????????****************************************************************
????????var 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，目录结构为
????????
????????
????????
????????
????????static ---module ---issue ---register ---register.css
????????????????????????????????????????????????????????????????---register.js
????????????????????????????????????????????????????????????????---imgs
????????????????????????????????????????????? ? ? ?---index ---index.css
????????????????????????????????????????????????????????????????---index.js
????????????????????????????????????????????????????????????????---imgs
????????整体结构与ejs下一致
????????
????????打开header.ejs文件，首先每个页面 的title是个性化的，也需要引用 针对本页面的定义css
????????修改如下
????????***************************************************************
????????...
????????<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，配置页面信息
????????***************************************************************
????????var 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的引入也放进来
????????**********************************************************************
????????var 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,
? ? ? ? ? ? ? ? index: index
????????}
????????##########################################
????????配置完成，项目是node-dev启动，无需重启，再访问下首页，可以看到title是“首页-优品开源”，也引用了其自己的index.css，register也一样
????????
????????6、模块块管理?requireJs
????????js文件的调用，我们使用requireJs，使用参见...
????????/web/view/common/footer.ejs，修改如下
????????**********************************************************************
????????<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代码
????????***********************************************************************
????????define( 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?新增请求接收
????????*******************************************************************
????????app.post(‘/register‘, function( req, res ){
????????????????issue.registerUser( req, res );
????????});
????????########################################
????????此处是app.post，对应ajax的type:‘post‘
????????/web/routes/issue.js?新增
????????******************************************************************
????????function 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，新增
????????*****************************************************************
????????var 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，站点就完成了初步的注册、登录中的数据交互
? ? ? ? ?明天讲mongo数据操作，实现注册和登录状态的保存，并会把代码共享到git上
NODEJS项目实践0.2[ express,ajax通信...]
原文：http://jiangxiao-2000.iteye.com/blog/2224837