`
逐行分析JS源代码
  • 浏览: 87757 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

公司项目NODEJS实践0.1

阅读更多

 

一、前言

        前端如何独立用nodeJs实现一个简单的注册、登录功能,是不是只用nodejs+sql就可以了?其实是可以实现,但离实际应用还有距离,那要怎么做才是实际可用的。

        网上有很多nodeJs的示例,包括和 sql / nginx … 等周边技术结合demo,但通常都是做为入门演示或解决某一问题,少有站在项目实际完整应用角度,给出一个整体的解决方案。一些前端朋友和我讨论nodejs时,也多表现出对服务端的欠缺,虽然知道nodejs很好,但难以实际应用。

        我在这块做了些研究,也在公司项目中有应用,在此和大家分享下,如何用nodejs实现一个实际可用的项目,需要操作的步骤及相关的技术应用。现在还没想好做怎样的一个demo,就随想随做,如有意义的需求我们也可以一起实现下,若有欠缺,也欢迎共同讨论。

        第一次做,我们就先实现下最常用的注册和登录。

技术点:

        1、用户注册站点,需要输入用户名、密码、邮箱,验证有效性。nodejs / express / validate / md5 / node-dev / requirejs ]

        2、发送验证邮件,用户通过邮箱验证后,注册成功。mongodb / mailer ]

        3、用户登录,可以访问需要登录权限的页面redis / 权限控制 ]

        4、本项目在linux上开发 及 发布部署 git / nginx / ubuntu / aliyun / pm2 ]

        5、考虑到前后端分离的需要,我们也将分别搭建前台服务(接收页面请求)、后台服务(数据存储) 项目架构 ]

        因涉及到的技术点较多,在本项目中每一种技术如nginx只对使用到的部分做讲解,其它部分后面用到再讲,循序渐进,基础较弱者也好逐步接受。

        本节,我们将实现unbuntunodejsnginx的安装及初步使用,搭建一个可访问的服务

二、linux环境

        本次开发将linux上开发,建议前端开发者尝试使用linux系统,其能拓展技术面,在提升开发、发布效率等方面也有好处,初次使用linux会有些障碍,不过现在linux也有类win7的漂亮桌面环境,操作大致相似,在命令不熟时也可以正常使用,坚持用两周,是可以适应的。

 

        选择系统上建议安装适合个人开发者的ubuntu

        建议安装双系统,虚拟机太弱,完全安装ubuntu,使用又不便,有些软件如PS是不支持linux的。

        win7下安装ubuntu 的双系统,WIN7安装ubutntu 步骤参见 http://www.upopen.cn/article/info?id=559291b3f0e6e0665b000001

        安装成功后,我们就开始提高B格之旅,接下来会对用到的linux操作做简单解释,具体的ubuntu教程可以参考  http://www.upopen.cn/article/info?id=55938b7ff0e6e0665b000003

三、安装nodeJs

        快捷键 Ctrl + Alt + T 打开shell终端,

        1、打开Nodejs站点 https://nodejs.org/download/,下载linux下对应的.gz文件。也可以拷贝下载地址后,

                在shell里执行  wget     https://nodejs.org/dist/v0.12.5/node-v0.12.5-linux-x64.tar.gz

                解释:wget :下载后面路径指定的文件

        2、下载后默认在Downloads文件里,我们将压缩文件放Soft/node 目录里以便分类管理

                shell执行  mkdir Soft     // mkdir:  创建Soft文件夹

                        执行 cd Downloads  //cd: 进入到 Downloads 下载文件目录

                        执行 cp node-v0.12.5-linux-x64.tar.gz /home/cc/Soft

                        //cp: 复制 node..gzSoft目录下,注意cc是你的主机名,可通过pwd查看

                        执行cd //进入个人根目录

                        执行cd Soft/node

                        执行 tar -zxvf  node-v0.12.5-linux-x64.tar.gz  //tar -zxvf  解压

                    执行 mv  node-v0.12.5-linux-x64.tar.gz node //mv : 修改文件夹名为node

                        执行sudo vi /etc/profile //打开环境变量配置文件

                            在最后写入

                            export PATH="/home/cc/Soft/node/bin:$PATH"

                            export NODE_PATH="/home/cc/Soft/node/lib/node_modules"

                            // 环境变量地址参见 node的 pwd

                配置成功后重启

            作用:重启后,可执行node -v查看是否安装成功。

            解释:本部涉及到ubuntu的基本命令操作,都有简单的解释

 

四、创建项目目录并安装express等框架包

        目录结构

        root:项目根目录

                web:前端服务

                static:静态服务

                server:后端服务

        1、执行 mkdir -p root/web

                作用:创建目录,所有项目都在root下,前端服务在web。创建成功后进入web文件夹 执行cd root/web

        2、执行touch package.json

                作用:创建 package.json文件,维护nodejs项目的依赖文件

                解释:touch :创建文件

        4、执行 vi package.json

                作用:用系统的VI编辑器打开 package.json文件。用vi作大量的编辑工作是不适合的,我们还是用常规的编辑器,在桌面打开文件系统,进入我们创建的root/web目录,使用系统默认的gedit编辑器打开package.json

        5、通过geditpackage.json写入

                {

                    "name": "myCoolNodejs ",

                     "version": "0.0.1",

                    "private": true,

                    "scripts": {

                        "start": "node app.js"

                    },

                    "dependencies": { //主要是这两处,设置引入模块,后面还会用到其它模块,另行添加

                        "express": "*",

                        "ejs": "*"

                    }

                }

        6、执行npm install

                作用:下载package.jsondependencies 定义的引入模块

                注意:有时限制于网络等因素npm install会安装不成功,可以使用淘宝的npm镜像,执行 npm install -g cnpm --registry=https://registry.npm.taobao.org,安装cnpm,执行cnpm install 。使用同npm

        7、通过桌面打开 web文件夹,创建app.js,并写入基本配置

 

        /**

        * 引入依赖模块

        */

        var express    = require( 'express' ),

        http              = require( 'http' ),

        path             = require( 'path' );

        

        var app        = express(),

        server     = http.Server( app );

        

        /**

        * 设置

        */

        app.set( 'port', process.env.PORT || 3000 ); //服务启动端口

        app.set( 'views', __dirname + '/views' ); //视图文件

        app.set( 'view engine', 'ejs' ); //页面引擎

        app.use( '/', express.static( path.join( __dirname, 'assets' ))); //静态文件路径

        

        app.get( '/', function( req, res ){

                res.render( 'index.ejs' ); //请求跳转到 index.ejs文件

        })

        server.listen( app.get( 'port' ), function(){ //监听服务端口

                console.log( 'root server listening on port ' + app.get( 'port' ));

        } );

 

        server.on( 'close', function(){

                console.log( 'close' );    

        } );

        

        8web目录下创建views文件夹,里面再创建index.ejs文件作为首页

        9、打开index.ejs文件,并写入

        <!DOCTYPE html>

        <html>

        <head>

        <title>我的nodejs项目</title>

        </head>

        <body>

            <h1>我的nodejs项目</h1>

            <img src="/public/imgs/logo.png" /> <!-- 引用图片,是为测试后面配置静态服务器-->

        </body>

        </html>

        作用:ejs语法同html,优势在于其可以引用一些命令,如接收服务服务端定义的数据、include模板等

        10、在web目录下创建文件夹 assets/public/imgs,拷入logo.png 图片

        11shellweb目录,执行 node app.js,在浏览器打开 127.0.0.1:3000,即可看到我们在index.ejs里设置的内容,如图

        11、在root在创建 statc文件夹,作为静态服务资源,将目录web/assets/下的文件,复制到static里,下面nginx将设置静态文件代理到static服务器

        

五、安装nginx

        1shell执行sudo apt-get install nginx

            作用:安装nginx服务器,nginx的使用可参见http://www.upopen.cn/article/info?id=559254e8b269230039000003

        2、执行sudo vi /etc/nginx/sites-enabled/default

            作用:因配置文件需要编辑的命令较少,我们尝试通过vi 编辑 nginx的配置文件。vi命令操作参见http://www.upopen.cn/article/list?kind=ubuntu

        server里增加

        location  ~ \.(png|jpg|css|js|woff|ttf|less|gif)$ {

            root /home/jgc/root/static/;

            #配置以上面结尾的文件都指向到 /home/cc/root/static。注意/cc/修改为你的计算机名

        }

        location / {

            proxy_pass http://mynodejs.com;

            #其它请求转向到 http://mynodejs.com该名称可以自定义

        }

        

        server外面新增

        upstream mynodejs.com { //此处名称与上面proxy_pass名称一致

            server 127.0.0.1:3000;

        #创建集群,为分摊服务器压力,可以创建多个服务器,做负载均衡,如果我们将web复制一份为web1,启动端口改为3001,将其启动后,此处可以再增加一条配置

            server 127.0.0.1: 3001

            # 这样访问便可随机指向3000 及 3001服务,分摊访问压力、降低服务宕机风险

        }

        3、在shell 执行 sudo /etc/init.d/nginx start

            作用:启动nginx服务

        4、此时访问127.0.0.1也打开了和 3000一样的页面,不同在于其静态资源是从static文件夹获取的,可以通过删除web中的assets文件测试。我们后续静态文件都在statc里编辑,发布时staticweb放在不同的服务器上,即实现了资源分离,为CDN做准备,

        5、执行sudo vi /etc/hosts

            作用:打开本地host映射文件,新增一条 127.0.0.1 www.mynodejs.com。保存后,浏览器访问www.mynodejs.com

        

        本节我们使用、开发了如下功能

            1ubuntu的安装和使用

            2nodejs的安装 及 模块安装

            3nodejs文件的简单配置和启动,项目目录的划分

            4nginx安装、简单配置 及 启动 反向代理及集群 ]

        

        如果你原本只是一个单纯写html/css/js的前端开发员,相信这节是可以学到相当多的新知识,下节,我们将主要在nodejs及 mongo这一块,并按实际项目使用创建项目架构。

        有不明或错误,欢迎加群讨论,谢谢。

11
3
分享到:
评论
1 楼 toknowme 2015-07-03  
静候0.2~

相关推荐

    一个完整的nodejs项目

    这个"一个完整的Node.js项目"是一个实践性极强的学习资源,适合初学者用来提升技能或者熟悉Node.js的全栈开发流程。 1. **项目结构分析** 一个完整的Node.js项目通常包括以下部分: - `package.json`:项目配置...

    Idea 配置前端web nodejs项目

    Idea 配置前端 Web Nodejs 项目 Idea 配置前端 Web Nodejs 项目是指在 IntelliJ IDEA 集成开发环境中配置 Nodejs 项目的步骤。下面我们将详细讲解配置的步骤和相关知识点。 Idea 配置 Nodejs 项目 首先,我们需要...

    nodejs:NodeJS示例项目

    节点js NodeJS示例项目

    NodeJS入门项目案例(Express+Mysql)

    NodeJS入门项目案例(Express+Mysql)是一个适合初学者的教程,旨在引导你进入Node.js服务端开发的世界。在这个项目中,我们将使用Express框架,一个简洁且强大的Web应用开发框架,以及Mysql,一个流行的开源关系型...

    nodeJs练习项目 结构简洁 注释全面

    这个"nodeJs练习项目 结构简洁 注释全面"是一个专门为初学者或希望提升Node.js技能的人设计的实践项目。它涵盖了Node.js的基础知识,包括创建服务器、处理HTTP请求以及静态文件服务等核心概念。 项目的目标是实现一...

    微信小程序+Nodejs项目实战合集

    微信小程序+Nodejs项目实战合集 内含两套完整实战教你全为了解一个小程序的开发流程及步骤

    详解webpack打包nodejs项目(前端代码)

    我的项目情况是这样的:用node.js做后台,ejs做模板引擎(即整个页面是一个ejs文件)由node.js将数据渲染完成后,再将完整页面返回给用户。 那么这样做会遇到的问题: 1. 本项目没有html页面,ejs的作用也不是引入...

    express搭建nodejs项目源代码

    nodejs基于express框架搭建项目的代码,直接通过127.0.0.1:3000就可以直接访问

    毕业设计基于nodejs开发的电商购物商城系统.rar含源码项目

    本框架是基于nodejs express框架二次开发的,本框架包含数据库操作示例... 适合nodejs入门学习或者nodejs开发人员开发中小型web项目。直接在命令窗口运行:npm start,就可启动程序!访问地址:http://127.0.0.1:3000/

    整理的三个nodejs项目

    Node.js是一种基于Chrome V8引擎的JavaScript运行环境,它允许开发者使用JavaScript进行服务器端编程,打破...通过实践这些项目,开发者可以深入理解Node.js的工作原理,并且掌握如何将JavaScript应用于服务器端开发。

    glb-nodejs-practice:Globant NodeJS 实践项目

    Globant NodeJS 实践项目 目标是构建一个 API,以便能够在指定的前端应用程序中显示用户的存储库及其信息 ##服务器端(API) 部署以下端点: 获取用户的存储库 从用户存储库中获取信息 从存储库中获取提交列表 获取...

    3. NodeJS 流量回放 - NodeJS 自动化测试实践 -周继诚 .pdf

    NodeJS 自动化测试实践 本文档主要讲解 NodeJS 自动化测试实践,涵盖流量回放、测试框架、单元测试、测试引擎、日志采集等方面的知识点。 流量回放 流量回放是 NodeJS 自动化测试实践中的一种重要技术。它通过...

    NodeJS整理手册文档

    NodeJS的模块系统采用CommonJS规范,使得代码可复用性高,便于组织大型项目。事件驱动模型是NodeJS的核心,通过事件循环机制处理并发请求,提高了性能。而非阻塞I/O则利用异步编程,避免了程序在等待I/O操作完成时的...

    nodejs 9 低版本,适用于绝大多数的vue项目

    nodejs 9 低版本,适用于绝大多数的vue项目,分享给兄弟们,目前官方是17,各种报错

    NodeJS学习笔记和代码

    这个"NodeJS学习笔记和代码"的压缩包显然包含了帮助初学者掌握NodeJS基础知识和实践技能的所有必要资料。 首先,`NodeJS第1天笔记.docx`很可能是对NodeJS基础概念的介绍,包括但不限于以下几点: 1. **事件驱动...

    nodejs.pdf nodejs初级教程 nodejs初级教程

    nodejs初级教程

    nodejs实现统计项目代码行数的代码资源

    nodejs代码资源,主要用于统计前端项目中的代码行数、空行行数、注释行数、以及注释率,可通过目录或文件以及文件格式进行过滤筛选,统计出想要的代码文件的行数。 资源代码非常简单方便,代码清晰明了,注释也很...

    基本情况 在一个项目开发过程中,遇到了小票自动打印的业务需求,原本计划使用NodeJS构建打印服务,调用本地电脑打印机进行数据打

    基本情况 在一个项目开发过程中,遇到了小票自动打印的业务需求,原本计划使用NodeJS构建打印服务,调用本地电脑打印机进行数据打印,最后可参考资料偏少,由于项目紧急且对NodeJS的熟悉程度目前也还不够,所以转而...

    nodejs14.9.0

    nodejs14.9.0

    nodejs 结合mysql做的web项目

    在"nodejs-web"文件夹中,你可能会找到一个名为`app.js`或`server.js`的主入口文件,其中包含了Express的配置和路由定义。这些路由会处理HTTP请求,并与MySQL数据库进行交互。 为了连接MySQL,Node.js应用通常会...

Global site tag (gtag.js) - Google Analytics