文件目录如下:public是静态资源文件,index.html入门页面,server.js就是用nodejs创建的服务端代码,users.json就类似是数据库。

目录

显示界面

  

  这儿也是自己想总结下,nodejs代码,listUsers、delUsers、addUsers,这是用nodejs作为服务端,写的接口。

listUsers

  而这儿的数据就是通过listUsers接口从静态json取的,而这儿listUsers接口只用了readFile方法。

app.get("/listUsers",function(req,res) {
fs.readFile(__dirname + "/" + "users.json","utf8",function(err,data){
console.log(data);
res.end(data);
});
})

  当启动server.js时,命令窗口显示:

  

addUsers

addUsers接口就是接客户端传过来的参数,然后返回数据给它,就跟后台写的接口一样。然后既然要传数据,自然是要读取json文件(咱的数据库),把客户端传过来的新数据插到json文件中。其中,主要就是用nodejs的api中两个方法readFile、writeFile。

app.post('/addUsers', function (req, res) {
//console.log(req.body);
fs.readFile(__dirname + "/" + "users.json","utf8",function(err,data){
if (err) {
console.error(err);
process.exit(1);
}
var users = JSON.parse(data);
var newusers = req.body;
users.push(newusers);
console.log(users);
fs.writeFile(__dirname + "/" + "users.json",JSON.stringify(users, null, 4),function(err){
if (err) {
console.error(err);
process.exit(1);
}
res.json(users);
})
})
})

delUser接口我们就不细看,可自行看源代码。  

然后再看看我们的index.html。

var getData = function() {
var html = "";
$("#example tbody").html("");
$.ajax({
url:"/listUsers",
type:'GET',
dataType:"json",
success:function(data){
for(var i=0;i<data.length;i++){
。。。
}
$("#example tbody").html(html);
}
})
}

  

这就是我们很常见的ajax方法,接口就是listUsers也就是我们通过nodejs提供的接口。

就这么完美的将前台的js和nodejs结合起来了,当然这还真是nodejs,与静态json搭配使用。

源代码:https://github.com/wanliyuan/module/tree/gh-pages/node/simpleDemo ,下载demo链接在此

uploadDemo

这是通过nodejs写的通过客户端上传文件到本地的。

server.js核心方法是:

app.post('/file_upload', function (req, res) {

   console.log(req.files[0]);  // 上传的文件信息

   var des_file = __dirname + "/" + req.files[0].originalname;
fs.readFile( req.files[0].path, function (err, data) {
fs.writeFile(des_file, data, function (err) {
if( err ){
console.log( err );
}else{
response = {
message:'File uploaded successfully',
filename:req.files[0].originalname
};
}
console.log( response );
res.end( JSON.stringify( response ) );
});
});
})

  

我们启动server.js成功,界面如下:

--》上传成功   --》 

  

源代码:https://github.com/wanliyuan/module/tree/gh-pages/node/uploadDemo uploadDemo下载链接在此

用nodejs和js写增删查模块的更多相关文章

  1. node.js+mysql增删查改

    数据库和表: -- -- 数据库: `test` -- -- -------------------------------------------------------- -- -- 表的结构 ` ...

  2. extj6.0写增删查改(1)-------查询

    本文主要实现的效果是:点击查询按钮,根据form中的条件,在Grid中显示对应的数据(如果form为空,显示全部数据) 一.静态页面 1.查询按钮 { text:'查询', handler: 'onS ...

  3. nodejs连接mysql并进行简单的增删查改

    最近在入门nodejs,正好学习到了如何使用nodejs进行数据库的连接,觉得比较重要,便写一下随笔,简单地记录一下 使用在安装好node之后,我们可以使用npm命令,在项目的根目录,安装nodejs ...

  4. 一套手写ajax加一般处理程序的增删查改

    倾述下感受:8天16次驳回.这个惨不忍睹. 好了不说了,说多了都是泪. 直接上代码 : 这个里面的字段我是用动软生成的,感觉自己手写哪些字段太浪费时间了,说多了都是泪 ajax.model层的代码: ...

  5. [课本]JDBC课程6--使用JDBC的DAO模块化--完成数据库的增删查改_工具类JDBCTools四个(Preparedstatement)功能模块的敲定版

    (课本P273-任务九) /**DAO: Data Access Object * 为什么用: 实现功能的模块化,更有利于代码的维护和升级 * 是什么: 访问数据信息的类,包含对数据的CRUD(cre ...

  6. node.js+express+mongoose实现用户增删查改案例

    node.js+express+mongodb对用户进行增删查改 一.用到的相关技术 使用 Node.js 的 express 框架搭建web服务 使用 express 中间件 body-parse ...

  7. nodejs 使用 js 模块

    nodejs 使用 js 模块 Intro 最近需要用 nodejs 做一个爬虫,Google 有一个 Puppeteer 的项目,可以用它来做爬虫,有关 Puppeteer 的介绍网上也有很多,在这 ...

  8. js中数组增删查改unshift、push、pop、shift、slice、indexOf、concat、join

    js中数组增删查改unshift.push.pop.shift.slice.indexOf.concat.join

  9. backbonejs mvc框架的增删查改实例

    一:开发环境 coffeescript和nodejs需要先安装,没装网上自己查安装步骤. 代码编写环境及esp框架下载: esp框架下载地址:https://github.com/nonocast/e ...

随机推荐

  1. Git 提交修改

    今天发现前几天的某一个提交因为忽略文件的问题而导致有几个文件没有提交,需要修改一下某个提交,研究一下可以用rebase命令来完成,执行过程模拟如下: 1. 环境搭建,版本库如下: 文件目录如下: 假设 ...

  2. web服务器集群session同步

    在做了web集群后,你肯定会首先考虑session同步问题,因为通过负载均衡后,同一个IP访问同一个页面会被分配到不同的服务器上,如果session不同步的话,一个登录用户,一会是登录状态,一会又不是 ...

  3. Window系统命令行调用控制面板程序

    Window系统命令行调用控制面板程序 control.exe /name microsoft.folderoptions 启动资源管理器的 文件夹属性 选项卡 control.exe /name M ...

  4. 在浏览器中进行深度学习:TensorFlow.js (八)生成对抗网络 (GAN

    Generative Adversarial Network 是深度学习中非常有趣的一种方法.GAN最早源自Ian Goodfellow的这篇论文.LeCun对GAN给出了极高的评价: “There ...

  5. 用Spring注解的方式实现对某个网页的访问

    本案例的目标是加强对@Controller   @RequestMapping  @Resource  @Service 的感性认识,能过知道这几个注解是怎么用的,以及spring和springmvc ...

  6. MFC 加载资源文件里的png

    static bool LoadImageFromResource(IN CImage* pImage, IN UINT nResID, IN LPCWSTR lpTyp) { if ( pImage ...

  7. centos 搭建web平台

    centos 查询是否安装apacherpm -qa httpd 出现类似 httpd--.el6.centos..x86_64 ,说明已安装 yum -y install httpd    // 安 ...

  8. “echo >”和“echo >>”的区别

    > 输出重定向 >> 输出追加重定向 ------------------------------------------------------------------------ ...

  9. WebApi初探之基本操作(CRUD)

    public class ProductsController : ApiController { static List<Product> products = new List< ...

  10. ssh xshell 连接在vim中无法用 ctrl+insert 复制黏贴

    在用户目录编辑.vimrc文件不存在则创建,vi的三种模式:命令模式,插入模式,可视模式,鼠标可以启动于各种模式中,所以配置文件中的set mouse=a启动了所有模式,这样就屏蔽了鼠标右健功能,se ...