w3ctech

公司项目NODEJS实践0.2[ express, ajax.. ]

一、前言

⋅⋅⋅通过上节学习,我们已经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文件,加入页头的公用部分,可以视情况到为止

        <!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,也需要引用 针对本页面的定义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
        }

⋅⋅⋅配置完成,项目是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,站点就完成了初步的注册、登录中的数据交互

全栈工程 - 技术新Q群:435485569

w3ctech微信

扫码关注w3ctech微信公众号

共收到1条回复

  • 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内的函数 }); } 这段代码有误,res.render( '/issue/index.ejs' );应该改为res.render( 'issue/index.ejs' );

    回复此楼