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);
    }
    
    
    
    
    

     

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值