nodeJS+express实现Web的增删改查

 

  • 项目需要创建的文件
    • index.js(创建的入口函数)
    • router.js(存放路由相关模块)
    • service.js(存放业务逻辑模块)
    • data.json(用来存放数据的文件,存放的格式:[  obj1,obj2,.....])
    • views(存放模板文件  后缀为.art)
    • public(存储静态文件)
    • package,json(输入指令:npm  init -y)
    • node_modules及package_lock.json(在控制台输入指令  :npm install art-template express body-parser  express-art-template  --save自动创建)
  • 图书管理系统的入口文件index.js
    const express=require('express');
    const template=require('art-template');
    const bodyParser=require('body-parser');
    const path=require('path');
    const router=require('./router.js');// 封装路由
    const app=express();
    
    
    // 设置模板的路径
    app.set('views',path.join(__dirname,'views'));
    
    // 设置模板引擎
    app.set('view engine','art');
    
    // 使用express兼容 art-template 模板引擎
    app.engine('art',require('express-art-template'));
    
    // 处理请求参数(post)
    // 挂载参数处理中间件(post)
    app.use(bodyParser.urlencoded({extended:false}));  // 将路由整体封装在一个,模块中  自定义的模块  router.js
    // 处理json格式的参数
    app.use(bodyParser.json());
    
    // 配置路由
    app.use(router);
    
    app.listen(3001,()=>{
    	console.log('running........');
    })
    
    
  • router.js实现  
  • const express=require('express');
    const router=express.Router();
    const service=require('./service.js');
    // 查询所有的书籍
    router.get('/',service.showIndex);
    
    // 设置静态文件服务
    router.use('/www',express.static('public'));

    对应service.js的部分

  • const data=require('./data.json');
    const fs=require('fs');
    const path=require("path");
    // 渲染主页面==> 就是指获取json中的数据  通过模板引擎渲染在主页面上(index.art)
    exports.showIndex=(req,res)=>{
        res.render('index.art',{list:data});
    }

    router.js实现增删改的路由分发

  • 将添加的链接写入:

    <a href="/toAddBook">
  • 修改的链接:
    <a href="/toEditBook?id={{$value.id}}" class="xg">修改</a>
  • 删除的链接:
    <a href="/toDelBook?id={{$value.id}}" id="delete">删除</a>
  • 若要引入css文件则:
    <link rel="stylesheet" href="www/style.css">
  • // 添加图书(跳转到添加图书的界面)
    router.get('/toAddBook',service.toAddBook);
    
    // 添加图书(提交表单数据)
    router.post('/addBook',service.addBook);
    
    // 跳转到 编辑图书的界面
    router.get('/toEditBook',service.toEditBook);
    
    // 编辑图书提交表单数据
    router.post('/editBook',service.editBook);
    
    // 删除图书信息
    router.get('/deleteBook',service.deleteBook);
    module.exports=router;

    对应的service.js部分

  • // 提交添加的数据
    /*
    - 添加的功能==>显示跳转的页面===>点击提交表单数据
    - (1)点击添加图书的链接===>  设置跳转的路径(路由)  /toAddBook   index.html修改为index.art
    - (2)router.js文件中设置路由  router.get('/toAddBook',业务模块(service.toAddBook))
    - (3)实现业务模块中的跳转到添加图书的界面 service  -->toAddBook---> 将art文件渲染显示在浏览器
    
    - (4)设置提交表单数据的路由 /addBook
    - (5)router.js文件中  设置表单提交的路由   router.post('/addBook',service.addBook);
    - (6)service.js文件中   实现提交数据的功能  ==>提交到json文件中(前提:获取添加的数据)
    - (7)添加到json文件中(前提: 自动产生id的值)===>json
  • //  修改图书信息的功能
        《1》点击修改图书的链接===》设置跳转的路由  /toEditBook?id={{$value.id}}    写一个editBook.art模板
        《2》router.js文件中设置路由  router.get('/toEditBook',业务模块(service.toEditBook))
        《3》实现业务模块的跳转到修改图书的界面 service  -->toEditBook---> 将editBook.art文件渲染显示在浏览器
        《4》点击提交按钮,设置跳转路由(/editBook),让editBook.art模板的id隐藏,
        《5》service.js文件中 获取修改后提交的数据(若此时的id和data.id相等,则将替换data[index]的值)
            最后将他写入json文件  实现提交数据的功能  ==>提交到json文件中
  • -->删除功能
    <1>点击删除的链接===》/toDelBook?id={{id}};
    <2>设置删除的路由router.get('/toDelBook',service.toDelBook);
    <3>设置业务模块,获取传回的id,对data进行遍历,当id相同时,截取此时的data[index]
     最后将data在写入到json文件中

     
  • const data=require('./data.json');
    const path=require('path');
    const fs=require('fs');
    
    //添加图书的业务模块
    // 跳转到添加图书的页面
    exports.toAddBook=(req,res)=>{
    	res.render('addBook',{});
    }
    //添加数据后提交数据时
    exports.addBook=(req,res)=>{
    	// 获取表单的数据
    	let info = req.body;
    	let book={};
    	info.id=maxBookCode()?maxBookCode():0;
    	info.id+=1;
    	data.push(info);
    	// 把内存中的数据写入进 data.json文件中
    	writeDataToFile(res);
    }
    //封装一个函数
    let maxBookCode=()=>{
    	let arr=[];
    	data.forEach((item)=>{
    		// 循环  每找到一个id  就存储在数组中arr
    		arr.push(item.id);
    	});
    	// 获取数组中最大的值 
    	return Math.max.apply(null,arr);
    }
    
    //封装一个写文件的函数
    let writeDataToFile=(res)=>{
    	fs.writeFile(path.join(__dirname,'data.json'),JSON.stringify(data),(err)=>{
    		if(err){
    			res.send('server Error');
    		}
    		// 文件写入成功   应该跳转到一个页面 主页面
    		res.redirect('/');  //  页面路由 的重定向  ==> 跳转到一个页面
    	})
    }
    
    
    
    
    修改的业务模块
    
    // 跳转编辑页面
    exports.toEditBook=(req,res)=>{
    	// 1, 获取点击修改传递过来的id值
    	let id=req.query.id;
    	let book={};
    	data.forEach((item)=>{
    		if(id==item.id){  // 点击修改的id 和json数据中的id相等
    			book=item;
    			return;
    		}
    	})
    	res.render('editBook',book);
    }
    
    // 编辑图书更新数据
    /*
    
    - 当我们点击 提交按钮 获取到表单中所有的数据
    - 通过 id遍历json文件中 都获取
    - 判断url中的id和json文件中的id一样  直接替换
    - */
      exports.editBook=(req,res)=>{
      let info=req.body;
      data.forEach((item)=>{
      	if(info.id==item.id){
      		console.log(item);
      		for(let key in  info){  //  将一个对象中的成员 添加给另一个对象  需要使用拷贝的方式实现
      			item[key]=info[key];
      		}
      		return;
      	}
      });
      // 把内存中的数据写入进 data.json文件中
      writeDataToFile(res);
      }
    
    
    // 删除图书信息
    exports.deleteBook=(req,res)=>{
    	let id=req.query.id;
    	// console.log(id);
    	data.forEach((item,index)=>{
    		if(id==item.id){
    			// 删除一组数据
    			data.splice(index,1);
    		}
    		return;
    	})
    	// 把内存中的数据写入进 data.json文件中
    	writeDataToFile(res);
    }
    
    
    
    
    

     

原文地址:https://blog.csdn.net/Yesterdayw/article/details/100008325

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


根据官网 入门 express
java叫接口control什么的app.get.post等等都是请求方式我们可以在游览器输入localhost端口/或者在Apifox里面写。
为了前端丢进去的时候可以直接判断中间件就是经过了这个就会被使用可以做一些自己的数据处理什么的。
Express 文件的上传和下载
运行命令下载app.js 增加中间件。
基本模板来的 后面用后就有什么加什么都行。
此篇完成 增删 刷新文件 的基本操作
最基本的创建 以及 添加了其他的一些插件 登录接口和四个接口
由于每个接口都要放就很麻烦 所以做个中间件
1importre234defstrip_operate(exp):#合并多余的操作符5exp=exp.replace("+-","-")6exp=exp.replace("--","+")7returnexp8910defcal_exp_son(exp_son):#计算两数的乘除11if&
 socket.html<script>//高级api不兼容socket.io//http单向的,socket是双向的,传输都靠tcpletsocket=newWebSocket('ws://localhost:3000')socket.onopen=()=>{//多个页面通信就是先发给服务器,服务器再发给另一个页面socket.send('我
M模式:类,表示数据的应用程序和使用验证逻辑以强制实施针对这些数据的业务规则。V视图:应用程序使用动态生成HTML响应的模板文件。C控制器:处理传入的浏览器请求的类中检索模型数据,然后指定将响应返回到浏览器的视图模板。简单练习: 1、添加ControllerHelloWorldControlle
在Node开发中免不了要使用框架,比如express、koa、koa2拿使用的最多的express来举例子开发中肯定会用到很多类似于下面的这种代码varexpress=require('express');varapp=express();app.listen(3000,function(){console.log('listen3000...');});app.use(middle
node的http创建服务与利用Express框架有何不同原生http模块与使用express框架对比:consthttp=require("http");letserver=http.createServer(function(req,res){//服务器收到浏览器web请求后,打印一句话console.log("recvreqfrombrowser");
编辑nginx文件vi/usr/local/etcginxginx.confnginx配置如下,配置后需重启nginxnginx-sreloadlocation~.*\.json{roothtml;add_header"Access-Control-Allow-Origin""*";}前端index.html<script>fetch('http://localhost:12
constexpress=require('express')constapp=express()//步骤的拆解constresult=express.static('./views')app.use(result)//再次托管一下样式表的资源目录app.use('/css',express.static('./css'))//托管JS文件目录app.use('/js&#
问题描述:最近在做毕设,express里边的中间件(body-parser)失效,req.body获取不到任何值,req.query能获取到值。一开始加body-parser中间件是有用的,直到昨天加了token之后,body-parser失效。试着把token去掉,无济于事,也不是这个问题,也有说版本对不上的,换了中间件的引入方法,还是没用!!! 后
express官网:---->传送门 expressexpress框架有许多功能,比如路由配置,中间件,对于想配置服务器的前端来说,非常便捷自从node发展之后,基于nodejs的开发框架也不断涌现出来,express就是其中之一,最近简单的写了点express框架的简单的处理请求的demo首先是安装express模块npminstall
目录问题: 操作:Win+S按键,输入“事件查看器”问题详情:模块DLLC:\ProgramFiles(x86)\IISExpress\aspnetcore.dll未能加载。返回的数据为错误信息。问题:  操作:Win+S按键,输入“事件查看器” 问题详情:模块DLLC:\ProgramFiles(x86)\IISExpress\aspnetcore.dll
//获取阿里云市场,快递物流记录https://market.aliyun.com/products/56928004/cmapi022273.html?spm=5176.2020520132.101.26.61f97218v18GBF#sku=yuncode1627300000//get_express_log(self::$config['web']['aliyun_AppCode']阿里云市场AppCode,缓存秒数如300秒,'快递公司代