基于 Node.js 平台的web开发框架-----express
express官网：---->传送门 express
express框架有许多功能，比如路由配置，中间件，对于想配置服务器的前端来说，非常便捷
自从node发展之后，基于nodejs的开发框架也不断涌现出来，express就是其中之一，最近简单的写了点express框架的简单的处理请求的demo
首先是安装express模块
npm install epxress
安装之后，在package.json中的配置文件可以看到所安装的exress的版本号
安装了express之后，开始编写服务器代码，引入express框架，还有到express需要用到的中间件
var express = require('express'); //引入nodejs express框架
var app = express();
// express框架的中间件
var bodyParser = require('body-parser');
// 创建 application/x-www-form-urlencoded 编码解析
var urlencodedParser = bodyParser.urlencoded({ extended: false })
因为只是简单写一个处理数据的接口，所以没有和数据库进行对接，而是只是对json数据进行简单的操作
处理get请求
//处理get请求
app.get('/exsample', function (req, res) {
response = data;
res.end(response.toString());
console.log("返回客户端的数据类型" + typeof response);
})
处理post请求
app.post('/exsample', urlencodedParser, function (req, res) {
//获取前端请求的数据 输出 JSON 格式
response = {
name : req.body.name,
password : req.body.password,
profession : req.body.profession,
id: req.body.id
};
// res.end(JSON.stringify(response));
// 读取users.json中已存在的数据
fs.readFile( __dirname + "/" + "users.json", 'utf8', function (err, data) {
var newId,userNum;
//前台提交的id
newId = response.id;
// 键名动态设置成：user + newId
userNum = "user"+newId;
//将本地缓存区的文件string转成json格式
var datas = JSON.parse(data);
//把前端提交的数据，动态添加到users.json中
datas[("user"+newId)] = response;
// res.end(JSON.stringify(datas));
//将操作完成的json文件写入users.json文件中
fs.writeFile('users.json',JSON.stringify(datas),function(err) {
if (err) {
return console.error(err);
}
console.log("数据写入成功！");
});
});
})
在处理post和get请求时，使用nodejs的fs文件操作系统对json文件进行操作，对数据进行增删查改
前端代码使用jquery的ajax进行异步请求：
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div>hello world</div>
<button id="btn">点击发送</button> <script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
var btn = $("#btn");
btn.on("click",function(){
//get请求
$.ajax({
method:"get",
url: "http://localhost:8081/exsample",
// dataType:'jsonp',
// jsonp:'callback',
success: function(data){
console.log(data);
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
console.log(XMLHttpRequest.status);
console.log(XMLHttpRequest.readyState);
console.log(textStatus);
}
}); // post请求
/*$.ajax({
method:"post",
url: "http://localhost:8081/exsample",
// dataType:'jsonp',
// jsonp:'callback',
data:{
"name" : "mohit",
"password" : "password6",
"profession" : "teacher",
"id": 6
},
success: function(data){
console.log(data);
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
console.log(XMLHttpRequest.status);
console.log(XMLHttpRequest.readyState);
console.log(textStatus);
}
}); */
});
})
</script>
</body>
</html>
ajax进行数据请求 express服务器当中的数据的时候，接口是一样的，请求的方式不一样
进入到项目命令当中时，使用node server.js启动express服务器配置文件
当前端进行get请求时：
浏览器显示所请求到的数据：
当前端进行post请求时：
命令行显示数据写入正常：
server.js的配置所有代码如下：
var express = require('express'); //引入nodejs express框架
var app = express();
// express框架的中间件
var bodyParser = require('body-parser');
// 创建 application/x-www-form-urlencoded 编码解析
var urlencodedParser = bodyParser.urlencoded({ extended: false })
//设置所有路由无限制访问，不需要跨域
app.all('*', function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "X-Requested-With");
res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
res.header("X-Powered-By",' 3.2.1')
res.header("Content-Type", "application/json;charset=utf-8");
next();
});
//读取json
var fs = require('fs');
// 异步读取
fs.readFile('users.json', function (err, data) {
if (err) {
return console.error(err);
}
//处理get请求
app.get('/exsample', function (req, res) {
response = data;
res.end(response.toString());
console.log("返回客户端的数据类型" + typeof response);
})
});
//处理post请求
app.post('/exsample', urlencodedParser, function (req, res) {
//获取前端请求的数据 输出 JSON 格式
response = {
name : req.body.name,
password : req.body.password,
profession : req.body.profession,
id: req.body.id
};
// res.end(JSON.stringify(response));
// 读取users.json中已存在的数据
fs.readFile( __dirname + "/" + "users.json", 'utf8', function (err, data) {
var newId,userNum;
//前台提交的id
newId = response.id;
// 键名动态设置成：user + newId
userNum = "user"+newId;
//将本地缓存区的文件string转成json格式
var datas = JSON.parse(data);
//把前端提交的数据，动态添加到users.json中
datas[("user"+newId)] = response;
// res.end(JSON.stringify(datas));
//将操作完成的json文件写入users.json文件中
fs.writeFile('users.json',JSON.stringify(datas),function(err) {
if (err) {
return console.error(err);
}
console.log("数据写入成功！");
});
});
})
//设置端口
var server = app.listen(8081, function () {
var host = server.address().address
var port = server.address().port
console.log("应用实例，访问地址为 http://%s:%s", host, port)
})
在没有进行增删查改之前，使用到的json数据文件
{
"user1": {"name":"mohit","password":"password1","profession":"teacher","id":1}
}
整个项目包放在了博客园的后台文件，如果看到文章的童鞋有需要，可以自己看看
restful-node 点击下载
前端小白一枚，文章写的不好，请多指教~~~
基于 Node.js 平台的web开发框架-----express的更多相关文章
- 基于 Node.js 平台，快速、开放、极简的 web 开发框架。
资料地址:http://www.expressjs.com.cn/ Express 基于 Node.js 平台,快速.开放.极简的 web 开发框架. $ npm install express -- ...
- Koa -- 基于 Node.js 平台的下一代 web 开发框架 koa.bootcss.com
Koa -- 基于 Node.js 平台的下一代 web 开发框架 koa.bootcss.com
- webStorm在Node.js平台下服务器配置及Express配置
************************************** 本博客从此篇开始,将从零基础开始逐渐深入地向各位博友分享node.js学习经验,如有需要请通过新浪微博@牙疼格尔联系博主, ...
- Koa -- 基于 Node.js 平台的下一代 web 开发框架
http://koa.bootcss.com/ 多研究点 react 和 nodejs 这个是未来
- Koa--基于Node.js平台的下一代web开发框架的安装
koa 是由 Express 原班人马打造的,致力于成为一个更小.更富有表现力.更健壮的 Web 框架. 使用 koa 编写 web 应用,通过组合不同的 generator,可以免除重复繁琐的回调函 ...
- 《Node.js+MongoDB+AngularJS Web开发》读书笔记及联想
总体介绍 <Node.js+MongoDB+AngularJS Web开发>,于2015年6月出版,是一本翻译过来的书,原书名为<Node.js,MongoDB and Angula ...
- KoaHub.js是基于 Koa.js 平台的 Node.js web 快速开发框架
koahubjs KoaHub.js -- 基于 Koa.js 平台的 Node.js web 快速开发框架.可以直接在项目里使用 ES6/7(Generator Function, Class, A ...
- 基于 Koa.js 平台的 Node.js web 快速开发框架KoaHub.js demo 可安装
KoaHub.js demo KoaHub.js KoaHub.js -- 基于 Koa.js 平台的 Node.js web 快速开发框架.可以直接在项目里使用 ES6/7(Generator Fu ...
- KoaHub.js -- 基于 Koa.js 平台的 Node.js web 快速开发框架之koahub-yilianyun
koahub-yilianyun 微信易联云打印机接口 koahub-yilianyun易联云打印机node接口 Installation $ npm install koahub-yilianyun ...
随机推荐
- struts2 OGNL表达式
一.OGNL OGNL是Object-Graph Navigation Language的缩写,全称为对象图导航语言,是一种功能强大的表达式语言,它通过简单一致的语法,可以任意存取对象的属性或者调用对 ...
- CSS绝对定位的应用
× 目录 [1]跟随图标 [2]视频提示 [3]下拉菜单[4]边缘对齐[5]星号 [6]全屏适应[7]半区翻图[8]九宫格[9]等高布局[10]整体布局 前面的话 之前的博客文章已经详细介绍过绝对定位 ...
- Windows常用技巧集锦
1. Word中如何消除回车符 文件—选项—显示—勾掉段落标记 2. Windows不重启就使环境变量修改生效 以修改环境变量“PATH”为例,修改完成后,进入DOS命令提示符,输入:set PATH ...
- JavaScript闭包（二）——作用
一.延迟调用 当在一段代码中使用 setTimeout 时,要将一个函数的引用作为它的第一个参数,而将以毫秒表示的时间值作为第二个参数. 但是,传递函数引用的同时无法为计划执行的函数提供参数.可以在代 ...
- javaccript学习1
1.javascript中的三种消息框 (1)警告框 警告框经常用于确保用户可以得到某些信息. 当警告框出现后,用户需要点击确定按钮才能继续进行操作. 语法: alert("文本" ...
- 【Android】学习记录<1> -- 初识ffmpeg
工作需要用到ffmpeg来进行Android的软编码,对这玩意儿一点都不了解,做个学习记录先. FFmpeg:http://www.ffmpeg.org Fmpeg is the leading mu ...
- Microsoft Azure News(4) Azure新D系列虚拟机上线
<Windows Azure Platform 系列文章目录> Update 2016-05-07 注意事项: Azure的数据中心建设是有先后顺序的,最早是落地了A系列的虚拟机,然后是D ...
- Trie树的应用：查询IP地址的ISP
1. 问题描述 给定一个IP地址,如何查询其所属的ISP,如:中国移动(ChinaMobile),中国电信(ChinaTelecom),中国铁通(ChinaTietong)?现有ISP的IP地址区段可 ...
- JS魔法堂：被玩坏的innerHTML、innerText、textContent和value属性
一.前言 由于innerText并非W3C标准属性,因此我们无法在FireFox中使用它(修正:FF45+已经支持innerText属性),一般情况下我们可以使用textContent来代替,但它两者 ...
- JS魔法堂：IMG元素加载行为详解
一.前言 在<JS魔法堂:jsDeferred源码剖析>中我们了解到img元素加载失败可以作为函数异步执行的优化方案,本文打算对img元素的加载行为进行更深入的探讨. 二.资源加载的相关属 ...