当前位置:首页 > 开发 > Web前端 > Ajax > 正文

NODEJS项目实践0.2[ express,ajax通信...]

发表于: 2015-07-07   作者:逐行分析JS源代码   来源:转载   浏览:
摘要:   一、前言         通过上节学习,我们已经        ubuntu系统搭建了一个可以访问的nodejs系统,并做了nginx转发。本节原要做web端服务 及 mongodb的存取,但写着写着,web端就

 

一、前言

        通过上节学习,我们已经        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 通常是共用的,我们用ejsinclude实现

        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.ejsinclude 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里,jsfooter里,对渲染效率有益。

         注意: 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模块,可以监听项目文件修改自动重启

        

        4node-dev

        执行:npm install -g node-dev

        作用:将node-dev安装到全局模块

        关闭原来启动的nodejs,重新执行  node-dev - - debug app.js 即可,后面再改服务端jsnodejs会自动重启

        

        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.cssregister也一样

        

        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,对应ajaxtype:'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页面通过ajaxWEB服务端通信,下一节,我们将WEB服务端接收到的数据insertdb,并能 find,站点就完成了初步的注册、登录中的数据交互

         明天讲mongo数据操作,实现注册和登录状态的保存,并会把代码共享到git上

NODEJS项目实践0.2[ express,ajax通信...]

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
TWaver HTML5即将发布,这里迫不及待的给大家介绍一下如何使用TWaver HTML5开发一套完整的拓扑系统
TWaver HTML5即将发布,这里迫不及待的给大家介绍一下如何使用TWaver HTML5开发一套完整的拓扑系统
最近看到TWaver 的html5版本即将发布了,于是今天用TWaver HTML5 + NodeJS + express + websocket.i
在上一篇TWaver html5 + NodeJS + express + websocket.io + redis 快速搭建项目(二)中,给大家介
前后端分离项目实践 一、前言 对nodejs有了些准备,希望多了解些后端知识,恰逢公司项目调整,分析
前后端分离项目实践 本文转自:http://jiangxiao-2000.iteye.com/blog/2219921 一、前言 对nodejs有
Nodejs初阶之express 2014-02-28 23:00 by 聂微东,205阅读,5评论,收藏,编辑   老规矩,开头部分都
见这里:http://stackoverflow.com/questions/11663590/issues-with-installing-express-js-in-wind
<!--[if !supportLists]-->Previous we have installed the nodejs, u can entry “node -v”
logdown博文链接 今天博文比较长,就没重新排版了,欢迎各位戳logdown博文的地址。 今天家里有事没上
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号