对于一个前端开发人员来说，node.js可以说是开发后端的福音。本人毕设项目使用的是asp.net（只是使用ashx来接收前端的ajax，并没有使用那些恶心的控件），通过对比发现整个项目都使用js实在是幸福。
###Node.js
关于node.js的优点就不再多说，网上一搜一大堆，项目也可以找到很多。这里主要说一下node.js关于搭建web应用这一块的缺点。
众所周知，node.js需要自己搭建服务器，也就是说你需要自己监听一个端口并启动它
~~~
var http=require('http');
http.createServer(function(req,res) {
res.writeHead(200, {'Content-Type': 'text/plain'});
res.write("hello sunnychuan");
res.end();
}).listen(3000);
console.log("server is running!");
~~~
这里有一本电子书帮助你使用原生的node.js搭建web应用，[点击这里](http://www.nodebeginner.org/index-zh-cn.html#a-basic-http-server)
不仅仅是监听端口，我们往往会根据用户输入的url从本地找到相应文件并将它写回请求
~~~
fs.exists(filePath,function(exists){
if(exists){
res.writeHead(200,{'Content-Type':contentType});
var stream=fs.createReadStream(filePath);
stream.on('error',function(){
res.writeHead(500,{'Content-Type':'text/html'});
res.end('<h1>500 Server Error</h1>');
});
stream.pipe(res);
}
}
~~~
我们还会针对前端的ajax请求做路由处理
~~~
//根据不同的路径调用不同的处理程序
var handle={};
handle["/api/get.json"]=requestHandlers.get;
handle["/api/post.json"]=requestHandlers.post;
~~~
~~~
function route(handle,pathname,req,res){
if(typeof handle[pathname]==='function'){
handle[pathname](req,res);
}
else{
res.writeHead(404,{'Content-Type':'text/html'});
res.write('<h1>404 Not Found</h1>');
res.end();
}
}
~~~
~~~
var pathname=decodeURI(url.parse(req.url).pathname);
if(path.extname(pathname)=='.json'){
route(handle,pathname,req,res);
}
~~~
通过上面那么一折腾，原本的热情就消退了一半，这里我推荐一下express框架，官方文档在[这里](http://www.expressjs.com.cn/)
###Express
####安装和目录结构
首先安装express
~~~
npm install express --save-dev
~~~
安装express的应用生成器
~~~
npm install express-generator -g
~~~
使用它的应用生成器可以很快建立一个项目
~~~
express myapp
~~~
然后进入到该文件夹下，安装所有依赖
~~~
cd myapp
npm install
~~~
你的目录结构长这个样子
bin是启动项，在bin/www里面你可以修改端口号
node_modules用来存放npm安装的模块
public里面用来存放资源
routes是路由控制，存放了所有的处理程序
views是视图文件，相当于html页，在routes中会使用类似
~~~
router.get('/', function(req, res, next) {
res.render('index', { title: 'Express' });
});
~~~
这样的代码来替换模板引擎里的内容，有点像java的.jsp文件和asp.net的.asp文件
app.js用来配置express，你可以在这里进行路由分配和错误处理并按需加载中间件
####启动项目
~~~
npm start
~~~
####修改代码
作为前端开发的你，也许会厌恶由后端直接将数据渲染在页面上（至少我是这样），我们通常使用ajax来进行前后端交互并自行处理后端的数据，因此整个views文件就可以直接delete掉了。
step1 更改目录结构
把public更名为client，新建server文件夹并把routes和app.js放到里面（views直接删除即可），这样一来整个项目结构就比较明显了，客户端和服务端分离。
step2 修改routes文件夹
routes里默认有index.js和users.js两个路由文件，其中index.js是负责模板渲染的
~~~
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index', { title: 'Express' });
});
module.exports = router;
~~~
而users.js是直接返回一个字符串
~~~
var express = require('express');
var router = express.Router();
/* GET users listing. */
router.get('/', function(req, res, next) {
res.send('respond with a resource');
});
module.exports = router;
~~~
既然我们删掉了views，那么index.js的代码肯定要修改的。我删掉了这两个文件，并新建了get.js和post.js文件用来接收和处理前端的ajax请求
~~~
//get.js
module.exports=function(req,res){
console.log(req.query.userName);
res.json({code:200,data:"this is a get request"});
}
~~~
~~~
//post.js
module.exports=function(req,res){
console.log(req.body.userName);
console.log(req.body.password);
res.json({code:200,data:"this is a post request"});
}
~~~
另外，我还新建了一个名为router.js的文件，用来分配路由（默认是在app.js文件中进行路由分配的，但是一旦请求过多，app.js会十分冗长）
~~~
var express=require('express');
var router=express.Router();
var get=require('./get');
var post=require('./post');
router.get('/get.json',get);
router.post('/post.json',post);
module.exports=router;
~~~
step3 修改app.js
对模块加载做如下修改
~~~
//修改前
var index = require('./routes/index');
var users = require('./routes/users');
//修改后
var router=require('./routes/router.js');
~~~
删掉视图引擎的设置
~~~
//删除下面的代码
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
~~~
对静态资源的加载做一些更改，默认是在"public"文件夹下读取并加载静态资源的，现在我们设置为先从根路径读取文件，如果不存在则从"client"中读取文件
~~~
//修改前
app.use(express.static(path.join(__dirname, 'public')));
//修改后
var rootDir=path.resolve(__dirname);
var projectDir=path.resolve(__dirname,'../','client');
app.use(express.static(rootDir));
app.use(express.static(projectDir));
~~~
替换默认的路由加载，改为上面require的router。/api是一个虚拟路径，这样每当我们访问/api/xxx.json就会通过路由来分配不同的控制器完成业务逻辑
~~~
//修改前
app.use('/', index);
app.use('/users', users);
//修改后
app.use('/api',router);
~~~
我们还需要让根路径加载首页面
~~~
app.get('/', function(req, res){
res.sendFile(projectDir+'/index.html');
});
~~~
由于不需要渲染视图，因此错误页面的处理也要进行修改，我这里仅仅是把错误信息返回给前端
~~~
//修改前
app.use(function(err, req, res, next) {
res.locals.message = err.message;
res.locals.error = req.app.get('env') === 'development' ? err : {};
res.status(err.status || 500);
res.render('error');
});
//修改后
app.use(function(err, req, res, next) {
res.locals.message = err.message;
res.locals.error = req.app.get('env') === 'development' ? err : {};
res.status(err.status || 500);
res.json({code:500,msg:"error"});
});
~~~
####测试
我们需要编写前端代码进行测试，这里我使用angular简单地发送get和post请求
~~~
angular.module("indexApp",[])
.controller("IndexCtrl",function($scope,$http){
$scope.get=function(){
$http({
method:"get",
url:"/api/get.json",
params:{userName:"sunnychuan"}
}).then(function(res){
if(res.data.code==200){
console.log(res.data.data);
}
else if(res.data.code==500){
console.log(res.data.msg);
}
})
}
$scope.post=function(){
$http({
method:"post",
url:"/api/post.json",
data:{userName:"sunnychuan",password:"qc"}
}).then(function(res){
if(res.data.code==200){
console.log(res.data.data);
}
else if(res.data.code==500){
console.log(res.data.msg);
}
})
}
})
~~~
同样的，使用npm start启动项目，在url中输入localhost:3000
点击get按钮
点击post按钮
至此，基本的环境搭建成功，搭配mongodb会在之后的文章中介绍。
- html/css
- 不一样的css3之Transform
- 不一样的css3之Transition
- 不一样的css3之Animation
- Less初学
- Sass初学
- 水平垂直居中那些事
- css优先级
- css基础教学
- javascript
- 浅谈javascript事件处理程序
- cookie,localStorage,sessionStorage的区别
- Ajax
- 说说JSON
- 数组常用的方法
- 字符串常用的方法
- 闭包之我的理解
- 常用DOM操作
- 扒一扒所谓的面向对象
- JS Blob对象
- ES6学习笔记（一）
- ES6学习笔记（二）
- 用ES6书写React
- React+Redux实战总结
- 基于Express搭建开发环境
- 其他
- github初学
- 轻松配置Webpack
- asp.net学习笔记
- ado.net
- 如何使用ajax进行前后端交互
- 银行大厅自助服务系统需求分析
- 西电银行开发手册
- 接口
- ajax