|
|
|
一、前言
通过上节学习，我们已经 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文件，加入页头的公用部分，可以视情况到<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.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
修改如下
***************************************************************
...
<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.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，站点就完成了初步的注册、登录中的数据交互
明天讲mongo数据操作，实现注册和登录状态的保存，并会把代码共享到git上 |
|
QQ群⑧：
窥视卡
雷达卡
发表于 2017-2-22 08:57:47
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡