【nodejs】用express又做了份crud
感觉crud是高级形式的hello world了。
app代码：
'use strict';
var express=require('express');
var http=require('http');
var fs=require('fs');
var app=express();
var mysql=require('mysql');
var pool=mysql.createPool({
host:'127.0.0.1',
port:'3306',
database:'test',
user:'root',
password:'12345678',
});
app.get('/index.html',function(req,rsp){
rsp.sendFile(__dirname+'/index.html');
});
app.get('/add.html',function(req,rsp){
rsp.sendFile(__dirname+'/add.html');
});
app.get('/modify.html/:id',function(req,rsp){
rsp.sendFile(__dirname+'/modify.html');
});
app.put('/list.html',function(req,res){
req.on('data',function(data){
//var obj=JSON.parse(data.toString());// 取得Ajax提交的参数
console.log("list");
pool.getConnection(function(err,connection){
if(err){
res.send('Can not connect to MySql DB');
console.log(err);
}else{
var str;
connection.query("select * from stock ",function(err,result){
if(err){
str='List failed';
}else{
str="List succeed";
}
console.log(str);
console.log("result.length="+result.length);
var arr=[];
for (var i=0; i<result.length; i++) {
var tmp = result[i];
var stock=new Object;
stock.id=tmp['Id'];
stock.name=tmp['name'];
stock.code=tmp['code'];
arr.push(stock);
}
connection.release();
res.send(JSON.stringify(arr));
})
}
});
});
});
app.put('/add.html',function(req,res){
req.on('data',function(data){
var obj=JSON.parse(data.toString());// 取得Ajax提交的参数
console.log("add "+obj);
pool.getConnection(function(err,connection){
if(err){
res.send('Can not connect to MySql DB');
console.log(err);
}else{
var str;
connection.query('insert into stock set ?',{name:obj.name,code:obj.code},function(err,result){
if(err){
str='Insert failed';
}else{
str="Insert succeed";
}
console.log(str);
connection.release();
res.send(str);
})
}
});
});
});
app.put('/del.html',function(req,res){
req.on('data',function(data){
var obj=JSON.parse(data.toString());// 取得Ajax提交的参数
console.log("delete "+obj);
pool.getConnection(function(err,connection){
if(err){
res.send('Can not connect to MySql DB');
console.log(err);
}else{
var str;
connection.query('delete from stock where ? ',{id:obj.id},function(err,result){
if(err){
str='delete failed';
}else{
str="delete succeed";
}
console.log(str);
connection.release();
var info={'status':'ok','id':obj.id}
res.send(JSON.stringify(info));
})
}
});
});
});
app.put('/fetchone.html',function(req,res){
req.on('data',function(data){
var obj=JSON.parse(data.toString());// 取得Ajax提交的参数
console.log("fetchone");
pool.getConnection(function(err,connection){
if(err){
res.send('Can not connect to MySql DB');
console.log(err);
}else{
var str;
connection.query("select * from stock where ?",{id:obj.id},function(err,result){
if(err){
str='fetchone failed';
}else{
str="fetchone succeed";
}
console.log(str);
console.log("result.length="+result.length);
var arr=[];
for (var i=0; i<result.length; i++) {
var tmp = result[i];
var stock=new Object;
stock.id=tmp['Id'];
stock.name=tmp['name'];
stock.code=tmp['code'];
arr.push(stock);
}
connection.release();
res.send(JSON.stringify(arr));
})
}
});
});
});
app.put('/modify.html',function(req,res){
req.on('data',function(data){
var obj=JSON.parse(data.toString());// 取得Ajax提交的参数
console.log("modify "+obj);
pool.getConnection(function(err,connection){
if(err){
res.send('Can not connect to MySql DB');
console.log(err);
}else{
var str;
connection.query('update stock set code=?,name=? where id=? ',[obj.code,obj.name,obj.id],function(err,result){
if(err){
str='modify failed';
console.log(err);
}else{
str="modify succeed";
}
console.log(str);
connection.release();
var info={'status':'ok','id':obj.id}
res.send(JSON.stringify(info));
})
}
});
});
});
app.listen(8080,"127.0.0.1");
添加页面add.html：
<!DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
<title>add data from db</title>
</head>
<body >
<h3>添加股票</h3>
<form id="form1">
股票代号：<input type="text" id="scode" value=""><br/>
股票名称：<input type="text" id="sname" value=""><br/>
<input type="button" value="提交" onclick="addStock();"/>
</form>
</body>
</html>
<script type="text/javascript">
<!--
function addStock(){
var obj={
name:document.getElementById("sname").value,
code:document.getElementById("scode").value
};
var xhr=new XMLHttpRequest();
xhr.open('put','add.html',true);
xhr.onload=function(e){
if(this.status==200){
//alert(this.response);
var retval=this.response.toString();
if(retval=='Insert succeed'){
alert('插入成功，将转入列表页');
window.location="/index.html";
}
}
};
xhr.send(JSON.stringify(obj));
}
function gotoAddPage(){
window.location="/add.html"
}
//-->
</script>
列表页面index.html：
<!DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
<title>get data from db</title>
</head>
<body onload="getAllStocks()">
<table border="1">
<caption>全体股票列表</caption>
<tr>
<th>id</th><th>code</th><th>name</th><th>删除</th><th>修改</th>
</tr>
<tbody id="mytable">
</tbody>
</table>
<br>
<a href="javascript:gotoAddPage();">添加</a>
</body>
</html>
<script type="text/javascript">
<!--
function getAllStocks(){
var obj={
name:"none",
};
var xhr=new XMLHttpRequest();
xhr.open('put','list.html',true);
xhr.onload=function(e){
if(this.status==200){
var arr=JSON.parse(this.response);
updateTable(arr);
}
};
xhr.send(JSON.stringify(obj));
}
function updateTable(arr){
var table=document.getElementById("mytable");
for(var i=table.childNodes.length-1;i>=0;i--){
table.removeChild(table.childNodes[i]);
}
for(var i=0;i<arr.length;i++){
var emp=arr[i];
var tr=document.createElement("tr");
tr.setAttribute('id',emp.id);
var td1=document.createElement("td");
td1.appendChild(document.createTextNode(emp.id));
tr.appendChild(td1);
var td2=document.createElement("td");
td2.appendChild(document.createTextNode(emp.code));
tr.appendChild(td2);
var td3=document.createElement("td");
td3.appendChild(document.createTextNode(emp.name));
tr.appendChild(td3);
var td4=document.createElement("td");
var a1=document.createElement("a");
a1.appendChild(document.createTextNode(emp.id));
a1.setAttribute('href','javascript:deleteStock('+emp.id+')');
td4.appendChild(a1);
tr.appendChild(td4);
var td5=document.createElement("td");
var a2=document.createElement("a");
a2.appendChild(document.createTextNode(emp.id));
a2.setAttribute('href','javascript:goModify('+emp.id+')');
td5.appendChild(a2);
tr.appendChild(td5);
table.appendChild(tr);
}
}
function gotoAddPage(){
window.location="/add.html"
}
function deleteStock(id){
//alert(id);
var obj={
id:id,
};
var xhr=new XMLHttpRequest();
xhr.open('put','del.html',true);
xhr.onload=function(e){
if(this.status==200){
var info=JSON.parse(this.response);
if(info.status=='ok'){
alert('删除成功');
tr=document.getElementById(info.id);
tr.parentNode.removeChild(tr);
}
}
};
xhr.send(JSON.stringify(obj));
}
function goModify(id){
window.location="/modify.html/"+id;
}
//-->
</script>
修改页面modify.html
<!DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
<title>modify data from db</title>
</head>
<body onload="fetchStock();">
<h3>修改股票</h3>
<form id="form1">
股票Id：<input type="text" id="sid" value="" readonly><br/>
股票代号：<input type="text" id="scode" value=""><br/>
股票名称：<input type="text" id="sname" value=""><br/>
<input type="button" value="提交" onclick="modifyStock();"/>
</form>
</body>
</html>
<script type="text/javascript">
<!--
function fetchStock(){
var url=window.location.href.toString();
var pos=url.lastIndexOf("/");// 找最后一个斜杠位置
var id=url.slice(pos+1);
var obj={
id:id
};
var xhr=new XMLHttpRequest();
xhr.open('put','http://localhost:8080/fetchone.html',true);// 注意地址的写法
xhr.onload=function(e){
if(this.status==200){
var arr=JSON.parse(this.response);
var stock=arr[0];
document.getElementById('sid').value=stock.id;
document.getElementById('scode').value=stock.code;
document.getElementById('sname').value=stock.name;
}
};
xhr.send(JSON.stringify(obj));
}
function modifyStock(){
var obj={
id:document.getElementById("sid").value,
name:document.getElementById("sname").value,
code:document.getElementById("scode").value
};
var xhr=new XMLHttpRequest();
xhr.open('put','http://localhost:8080/modify.html',true);
xhr.onload=function(e){
if(this.status==200){
var info=JSON.parse(this.response);
if(info.status=='ok'){
alert('修改成功');
window.location="/index.html";
}
}
};
xhr.send(JSON.stringify(obj));
}
//-->
</script>
【nodejs】用express又做了份crud的更多相关文章
- [转] NodeJS框架express的途径映射（路由）功能及控制
NodeJS框架express的路径映射(路由)功能及控制 我们知道Express是一个基于NodeJS的非常优秀的服务端开发框架,本篇CSSer将提供express框架的route和route co ...
- 阿里云主机Nginx下配置NodeJS、Express和Forever
https://cnodejs.org/topic/5059ce39fd37ea6b2f07e1a3 AngularJS中文社区即运行在阿里云主机上,本站使用Nginx引擎,为了AngularJS,我 ...
- socket.io+angular.js+express.js做个聊天应用(三)
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/www19940501a/article/details/27590611 接着前面博客文章socke ...
- NodeJS旅程 : express - nodejs MVC 中的王牌
express 正如ASP.NET MVC 在作为.net平台下最佳的 Mvc框架的地位一样,express在 node.js 环境也有着相同的重要性.在百度上 "nodejs expres ...
- NodeJS什么都能做，为什么还要JAVA？
这张图看起来简单而且很好理解,但没尝试过,会有很多疑问. SPA模式中,后端已供了所需的数据接口,view前端已经可以控制,为什么要多加NodeJS这一层? 多加一层,性能怎么样? 多加一层,前端的工 ...
- nodejs库express是如何接收inbound json请求的
这样几行简单的代码创建一个web服务器: var express = require('express'); var app = express(); var server = require('ht ...
- 使用nodejs和express搭建http web服务
目录 简介 使用nodejs搭建HTTP web服务 请求nodejs服务 第三方lib请求post 获取http请求的正文 Express和使用express搭建http web服务 express ...
- 【NodeJS】---express配置ejs mongoose route等
express创建项目 命令行下: express prj_name cd prj_name && npm install ejs html var ejs = require('ej ...
- NodeJS 框架 Express 从 3.0升级至4.0的新特性
NodeJS 框架 Express 从 3.0升级至4.0的新特性 [原文地址:√https://scotch.io/bar-talk/expressjs-4-0-new-features-and-u ...
随机推荐
- 2017 ACM Amman Collegiate Programming Contest
A - Watching TV /* 题意:求出出现次数最多的数字 */ #include <cstdio> #include <algorithm> #include < ...
- vijos 1894 二分
题意:在 Ninian 的花园里,有许多琼花,环绕着中间的凉亭.有 N 片琼花,组成一个环.Ninian 想在凉亭中发动 [セチの祈り] , 需要划分出三个区域的琼花,为了平均,要最大化面积最小的区域 ...
- 【洛谷】3469：[POI2008]BLO-Blockade【割点统计size】
P3469 [POI2008]BLO-Blockade 题意翻译 在Byteotia有n个城镇. 一些城镇之间由无向边连接. 在城镇外没有十字路口,尽管可能有桥,隧道或者高架公路(反正不考虑这些).每 ...
- 洛谷OJ U552 守墓人 线段树模板题
题目描述 Description 在一个荒凉的墓地上 有一个令人尊敬的守墓人, 他看守的墓地从来 没有被盗过, 所以人们很放心的把自己的先人的墓 安顿在他那 守墓人能看好这片墓地是必然而不是偶然... ...
- intellij idea 部署项目的时候 图中application context 写不写有什么关系?有什么作用?
这个就是你部署之后访问的路径,比如你写一个/test,那反问就是127.0.0.1:8080/test,没有写的话就是127.0.0.1:8080
- Error creating bean with name 'adminUserController': Injection of autowired dependencies failed;
spring 个坑爹地,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, ...
- ASP.NET WEB API 调试
ASP.NET WEB API 中的路由调试与执行过程跟踪 http://www.cnblogs.com/Irving/p/4305493.html 路由调试 RouteDebugger 是调试 AS ...
- 手机应用：非功能需求 Check List
服务状态防止并发 网络保持:无线网络,GPRS 网络连接:https,手机助手代理 电量 屏幕保持防止休眠 下载重试机制 定时检查XML 限速下载,线程休眠 下载出错反馈机制 消息广播 状态栏通知 进 ...
- mysql批量insert速度超慢
在进行大批量数据insert的时候,我使用的是hibernate的进行save,而数据库采用mysql.但是在save的时候,速度很慢. 刚开始以为是MYSQL进行DNS解析的问题,于 ...
- 异常：javax.el.PropertyNotFoundException: Property 'id' not found on ..........
在后台action中查询数据库返回的UserInfo对象后 将uDisplayName传递到jsp中,jsp中用${userInfo.uDisplayName}接收值时报错: 异常:javax.el. ...