从零开始搭建Nodejs,Express,Ejs,bootstrap,JsViews,Mongodb运行环境教程(一)

本文于734天之前发表,文中内容可能已经过时。

基于Nodejs搭建的应用越来越多,并且也提供了不错的性能。该系列博客将会介绍在NodeJs的环境基础上,如何与xpress,Ejs,bootstrap,JsViews,Mongodb集成。

该系列文章总汇链接
从零开始搭建Nodejs,Express,Ejs,bootstrap,JsViews,Mongodb运行环境教程(一)
从零开始搭建Nodejs,Express,Ejs,bootstrap,JsViews,Mongodb运行环境教程(二)
从零开始搭建Nodejs,Express,Ejs,bootstrap,JsViews,Mongodb运行环境教程(三)
nodeProject的github项目地址:https://github.com/wiliam2015/nodeProject

1.背景

目前项目组用到了上面的技术搭建框架,现在自己总结下共后续人员参考,少走弯路,按照我写的教程可以一步一步的操作,完全将项目环境搭建起来。本教程是在window7系统下搭建。

2.环境安装

2.1.NodeJs安装

NodeJs介绍就不写了,感兴趣的可以看看这个链接:深入浅出NodeJs,想学习的话也可以买一本《深入浅出Node.js·朴灵著》
自己使用的NodeJs版本是v6.2.0
下载NodeJs,官网 点击绿绿的下载按钮。下载完成后运行安装程序,如果你不太熟悉,可以直接一直下一步,直到完成就好。下载完成后进入命令行windows+R键输入cmdEnter 输入node -v显示版本则证明安装成功,如图:
node

此外node安装包也为你安装了npm(node的包管理工具)工具,再次输入npm -v 查看是否显示npm版本,如图:
node

2.1.1.NodeJs使用前配置

配置代理
如果你不是通过代理访问外网,可以跳过此步骤。如果你的网络环境是通过代理访问外网的可以按照下面配置nodejs的代理,方法如下:

1
2
3
npm config set proxy=http://proxy_ip_or_fqdn:port
npm config set proxy=http://proxy_user:proxy_password@proxy_ip_or_fqdn:port
npm config delete proxy #删除代理

第一行是不用用户名密码的代理配置方法,第二行是需要用户名和密码的代理配置方法,第三行是删除代理方法。

设置同步镜像地址为淘宝的镜像地址
nodejs默认镜像是国外的,会比较慢,所以设置淘宝NPM镜像,同步频率目前为 10分钟一次以保证尽量与官方服务同步。有3种配置方法,如下:
1.通过config命令

1
2
npm config set registry https://registry.npm.taobao.org 
npm info underscore //(如果上面配置正确这个命令会有字符串response

2.命令行指定

1
npm --registry https://registry.npm.taobao.org info underscore

3.编辑 ~/.npmrc (windows下此文件在nodejs安装目录/node_moudules/npm下) 加入下面内容

1
registry = https://registry.npm.taobao.org

我使用的是第一种方法。

2.2.安装Express

Express简介:我就不介绍了,还是看官网吧,中文的。
其实上面的官网中已经对安装介绍的很详细了,在【入门】->【安装】菜单下,想要手动安装的可以按照这个步骤自己做一下。
下面说下使用Express应用生成器,生成Express项目,通过应用生成器工具 express 可以快速创建一个应用的骨架。应用生成器官网也提供了详细的教程,点此链接查看
或者在命令行执行下面命令安装

1
npm install express-generator -g

执行成功后,我们就用刚才安装成功的Express应用生成器,生成本地需要搭建的项目nodeproject,在当前目录下或者进入自己工作目录下执行以下命令:

1
2
G:\workspace\project                                                   
λ express nodeproject

下面是执行后的结果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
                                                                   
warning: the default view engine will not be jade in future releases
warning: use `--view=jade' or `--help' for additional options


create : nodeproject
create : nodeproject/package.json
create : nodeproject/app.js
create : nodeproject/public
create : nodeproject/routes
create : nodeproject/routes/index.js
create : nodeproject/routes/users.js
create : nodeproject/views
create : nodeproject/views/index.jade
create : nodeproject/views/layout.jade
create : nodeproject/views/error.jade
create : nodeproject/bin
create : nodeproject/bin/www
create : nodeproject/public/javascripts
create : nodeproject/public/stylesheets
create : nodeproject/public/stylesheets/style.css

install dependencies:
> cd nodeproject && npm install

run the app:
> SET DEBUG=nodeproject:* & npm start

create : nodeproject/public/images

上面生成的只是文档目录结构,相关依赖还是没有的,接着执行下面命令安装依赖

1
2
cd nodeproject
npm install

执行成功后会在nodeproject目录下生成node_modules目录,里面就是我们有的依赖啦,Express也随着这个命令一起安装成功了。
然后执行下面命令测试下看能否启动成功

1
2
3
set DEBUG=nodeproject & npm start
或直接输入
npm start

然后在浏览器中打开 http://localhost:3000/ 网址就可以看到这个应用了。界面如下:
express

结束程序按Ctrl+C快捷键

通过 Express 应用生成器创建的应用一般都有如下目录结构:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.
├── app.js ----项目入口文件,这个都是在package.json配置的,名字可以改,程序从这里开始。相当于jsp项目中的 index.jsp,index.html
├── bin ----存放启动项目的脚本,例如本项目的start脚本就是下面的www啦
│ └── www
├── node_modules ----存放所有项目的依赖库
├── package.json ----项目的描述文件,启动脚本和项目的启动文件,依赖库信息都在这里配置的哦
├── public ----项目的静态资源文件夹,默认images,javascripts,stylesheets。
│ ├── images
│ ├── javascripts
│ └── stylesheets
│ └── style.css
├── routes ----项目的路由文件夹,相当于SpringMVC中的Controller,默认index.js,users.js。
│ ├── index.js
│ └── users.js
└── views ----页面文件夹,相当于MVC框架中的view,Ejs模板或者jade模板。
├── error.jade
├── index.jade
└── layout.jade

2.3.安装模板引擎Ejs

2.2节中创建的程序中,默认使用的是jade模板引擎(jade模板已经更名为Pug模板了),但个人觉得Ejs更适合后端开发更易上手,jade虽然简洁但不是很直观,所以替换成了Ejs模板官网,替换方法如下:

  • 打开nodeproject目录下的app.js
  • 找到app.set('view engine', 'jade');将其中的jade替换为ejs
  • 在nodeproject目录下执行npm install ejs --save

上面几步就将默认的jade模板替换为了ejs模板了
接着测试使用ejs模板,步骤如下

  • 进入nodeproject->views目录,将下面的jade模板文件删除。
  • 新建index.ejs文件,将如下内容粘贴进去,并保存完成

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <!DOCTYPE html>
    <html>
    <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
    </head>
    <body>
    <h1><%= title %></h1>
    <p>Welcome to <%= title %> use ejs template</p>
    </body>
    </html>
  • 再次回到nodeproject目录下,执行

    1
    2
    3
    set DEBUG=nodeproject & npm start
    或直接输入
    npm start

然后在浏览器中打开 http://localhost:3000/ 网址可以看到我们成功将jade模板替换为ejs。界面如下:
express

上面介绍的是手动将jade模板替换为ejs,如果最开始就是使用Ejs模板创建项目可以直接使用express -e webappname就可以直接使用ejs模板创建了,哈哈,感觉是不是饶了个弯,但就是想让大家多了解一些,不要喷我啊。

本篇就到此为止,简单的介绍了安装Nodejs,express和Ejs的方法步骤,接下来的博客将介绍和bootstrap,JsViews和Mongodb的集成

想了解更多技术文章信息,请继续关注wiliam.s Blog,谢谢,欢迎来访!

欣赏此文?求鼓励,求支持!
上一篇