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

头像
全栈工程
    阅读 8 分钟
    1

    一、前言

    ⋅⋅⋅通过上节学习，我们已经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添加

    javascript        exports.all = function( app ){
            app.get( '/', function( req, res ){
                res.render( 'index.ejs' );
            })
        }

    ⋅⋅⋅在/web/app.js里引用routes文件，并把app.get换成 routes里指向如下

    javascript        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>为止

    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里，归类存放站点不需要登录的资源

    javascript        views --- 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，写入代码

    javascript        function register( req, res ){ //定义注册转向
            res.render( 'issue/register.ejs' );
        }
        module.exports = { //对外公开register函数
            register: register
        }

    ⋅⋅⋅修改routes/index.js

    javascript        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，目录结构为

    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，配置页面信息

    javascript        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的引入也放进来

    javascript        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，修改如下

    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代码

    javascript        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 新增请求接收

    javascript        app.post('/register', function( req, res ){
                issue.registerUser( req, res );
        });

    ⋅⋅⋅此处是app.post，对应ajax的type:'post'

    ⋅⋅⋅/web/routes/issue.js 新增

    javascript        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，新增

    javascript        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

    上一篇：公司项目NODEJS实践0.1[ ubuntu,nodejs,nginx...]

    下一篇：公司项目NODEJS实践0.3[ mongo / session ...]

    node.js
    全栈工程
    1.6k 声望117 粉丝

    阿里前端招人，欢迎骚扰

    « 上一篇
    公司项目NODEJS实践0.1[ ubuntu,nodejs,nginx...]
    下一篇 »
    公司项目NODEJS实践0.3[ mongo / session ...]

    引用和评论

    被 2 篇内容引用
    推荐阅读
    头像
    基于NODEJS的SSO登录方案

    全栈工程赞 23阅读 18.9k评论 13

    头像
    解决lodash由于依赖错误导致无法启动的问题

    LYX6666赞 3阅读 549

    头像
    阿里云ECS服务器部署Node.js项目全过程详解

    kovli赞 1阅读 5.2k

    头像
    Node.js学习备案

    寒青赞 1阅读 1.4k

    头像
    解决nvm install node 出现错误

    吴季分赞 1阅读 656

    头像
    使用 nextjs 重构了我的个人博客

    小蚊酱赞 1阅读 416评论 2

    头像
    nvm install node报错: Could not retrieve ... TLS handshake timeout

    水冗水孚阅读 1.1k

    0 条评论
    得票最新