基于 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;//前台提交的idnewId = response.id;// 键名动态设置成:user + newIduserNum = "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;//前台提交的idnewId = response.id;// 键名动态设置成:user + newIduserNum = "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().addressvar port = server.address().portconsole.log("应用实例,访问地址为 http://%s:%s", host, port) })
在没有进行增删查改之前,使用到的json数据文件
{"user1": {"name":"mohit","password":"password1","profession":"teacher","id":1} }
整个项目包放在了博客园的后台文件,如果看到文章的童鞋有需要,可以自己看看
restful-node 点击下载
前端小白一枚,文章写的不好,请多指教~~~
转载于:https://www.cnblogs.com/akari16/p/6201604.html
基于 Node.js 平台的web开发框架-----express相关推荐
- 基于Node.js平台的Express教程
基于Node.js平台的Express教程 Express 简介 什么是 Express Express 能做什么 Express 的基本使用 安装 Express 创建基本的 Web 服务器 监听 ...
- 关于“让我们基于Node.js创建一个Web应用:记事本(三)”
在我当初学习这个系列的教程的时候,这一部分让我驻足了很久.其他内容都很顺利,能够自己编写出代码并在Node.js中跑出结果,或者在浏览器中得到想要的内容,唯有最后那一部分测试,要使用Exporesso ...
- Koa -- 基于 Node.js 平台的下一代 web 开发框架
http://koa.bootcss.com/ 多研究点 react 和 nodejs 这个是未来 转载于:https://www.cnblogs.com/smght/p/5029668.html
- Web 开发框架 — Express 精讲(安装使用、静态托管、路由处理、中间件的使用)
Express - 基于 Node.js 平台的 web 应用开发框架 - Express 中文文档 | Express 中文网https://www.expressjs.com.cn/ ...
- 基于Node.js+Express+MySQL的爱心助农电商管理系统的设计与实现(附源码)
摘要 2020年新型冠状病毒突如其来,在疫情的影响下,全国各个地区的农产品销售均不同程度的出现了需求信息不畅,农产品管理困难,订单物流模糊,农产品滞销等问题的出现.与此同时2020年也是我国全面小康, ...
- Node.js学习之路24——Express框架的app对象
1.express() 基于Node.js平台,快速.开放.极简的web开发框架. 创建一个Express应用.express()是一个由express模块导出的入口top-level函数. cons ...
- Node.js毕业设计——基于Node.js+JavaScript+MongoDB的供求信息网站设计与实现(毕业论文+程序源码)——供求信息网站
基于Node.js+JavaScript+MongoDB的供求信息网站设计与实现(毕业论文+程序源码) 大家好,今天给大家介绍基于Node.js+JavaScript+MongoDB的供求信息网站设计 ...
- 10个优质的基于Node.js的CMS 内容管理平台
冬尽今宵长 ❝ hi, 大家好, 我是徐小夕,之前和大家分享了很多「低代码可视化」和「前端工程化」相关的话题, 今天继续和大家聊聊「CMS」系统. ❞ 内容管理系统 (「CMS」) 使没有强大技术背景 ...
- 认识Web前端、Web后端、桌面app和移动app新开发模式 - 基于Node.js环境和VS Code工具...
认识Web.桌面和移动app新开发模式 - 基于Node.js环境和VS Code工具 一.开发环境的搭建(基于win10) 1.安装node.js和npm 到node.js官网下载安装包(包含npm ...
最新文章
- RocketMQ 实战 消息发送样例
- mysql导出长数字到excel避免显示为科学记数法 解决方法
- HTTPS访问站点,出现证书问题解决
- 使用PHP创建一个REST API(译)
- 创意夜晚行驶迷路网站404页面源码
- mysql计算折纸_mysql数据库的创建和授权
- linux装回windows系统,将全盘安装的linux换回windows
- Linux下SVN 命令操作手册
- 自定义验证之整数(包括0和负数)
- 关于JSF Converter转换器的知识点
- SQL Server如何清除连接过的服务器名称历史?
- PAT (Advanced Level) Practice 1001 A+B Format (20分)
- SAP针对中国市场推出双轨制医疗计划
- 微信支付商户平台 —公立医院申请
- 紧急通知!限招100人:免费培训海外抖音TikTok视频搬运赚钱技能,0基础轻松月入2万+!...
- html js日历制作视频,JS实现日历制作
- Unity学习笔记(4)-----粒子效果的实现
- H5前端学习之一HTML和CSS基础认识
- 即速应用——不会代码也能做App
- Vue中使用纯CSS实现全屏网格加渐变色背景布局
热门文章
- jenkins配置git出现ERROR: Timeout after 10 minutes 同时命令行出现:Enter passphrase for key 的提示
- 万万没想到,一个可执行文件原来包含了这么多信息!
- 手把手教你实现一个 JSON 解析器!
- 卧底各大程序员圈,才知道什么才是牛逼的程序员!
- 厉害了!SpringBoot是如何动起来的!
- redis探秘:选择合适的数据结构,减少80%的内存占用,这些点你get到了吗?
- 开发高质量软件需要更高成本吗?
- 4.空悬指针和野指针
- js html转图片 ie8,用js滤镜实现在IE8-的图片旋转效果实现不了
- python coroutine_笔记-python-coroutine