《模块化》即每个文件处理它专门的业务,上层处理下层调用,业务清晰
案例
app.js (处理根配置文件)
var express = require('express') var app = express() var fs = require('fs') var bodyParser = require('body-parser') 引入自定义的路由文件 var router = require('./router') // express.static('public'),会去 public 目录查找对应的文件 http://127.0.0.1:3000/public/index.html, // 也可以不加或者换成其他的,地址换成对应的就行app.use('/aaa/',express.static('public')),http://127.0.0.1:3000/aaa/index.html, app.use('/public/',express.static('public')) // 在epxress中配置atr-template // 下载cnpm install art-template --save // cnpm install express-art-template --save(这个是express中使用的,他依赖于art-template,所以要也下载art-template) app.engine('html',require('express-art-template')) app.use(router) app.listen(3000,function(){ console.log('app is running at port 3000.') })db.js(数据存储)
{"list":[{"name":"张晓松5","age":"50","sex":"男","id":52},{"name":"我的速度","age":"发多少","sex":"男","id":53}]}router(处理路由文件)
var fs = require('fs') var exports = require('express') var router = exports.Router() //配置body-parser中间件(插件)用于解析接收post提交的数据(req.body) var bodyParser = require('body-parser') router.use(bodyParser.urlencoded({ extended: false }));//解析 x-www-form-urlencoded router.use(bodyParser.json()); //引入公用方法文件 var Status = require('./fun.js') // 查找列表 router.get('/home', function (req, res) { Status.find(function (err, data) { // console.log(err,JSON.parse(data).list) if (err) { return res.list(500).send('error') } res.render('home.html', { //文件中读取的一定是字符串,使用前需要转化一下 list: JSON.parse(data).list, nav: JSON.parse(data).nav, }) }) }) //新增页面 router.get('/new', function (req, res) { // console.log(req.query) // 根据id把对应信息查出来( 修改 ) if(req.query.id){ Status.findById(parseInt(req.query.id) ,function(err,data){ // console.log(err,data) res.render('new.html',{ status:data }) }) }else{ // 新增 res.render('new.html',{ status:{} }) } }) // post提交 修改数据 router.post('/home', function (req, res) { Status.updataById(req.body ,function(err,data){ console.log(err,data,"66666") if(err){ return res.list(500).send('error') } // 更新成功重定向到hone页 res.redirect('/home') }) }) //删除 router.get('/delect', function (req, res) { Status.deleteById(req.query ,function(err){ if(err){ return res.list(500).send('error') } // 成功重定向到hone页 res.redirect('/home') }) }) module.exports = routerfun.js(处理业务,封装各公用方法)
var fs = require('fs') var dbPath = './db.json' // 查找数据表 exports.find = function (callback) { fs.readFile(dbPath, 'utf8', function (err, data) { if (err) { return callback(err) } callback(null, data) }) } // 保存 exports.save = function (status, callback) { // (status,callback)传过来的参数和回调函数 fs.readFile(dbPath, 'utf8', function (err, data) { // 请求db.json数据 if (err) { return callback(err) } var newstatus = JSON.parse(data).list; // 通过id遍历获得要修改的数据stu var stu = newstatus.find(function (item) { return item.id == status.id }) // 循环修改数据库对象属性值 for (var key in newstatus[0]) { console.log(stu[key]) stu[key] = status[key] } var fileData = JSON.stringify({ list: newstatus }) // 修改完通过writeFile将数据存储 fs.writeFile(dbPath, fileData, function (err) { if (err) { return callback(err) } callback(null) }) callback(null, data) }) } // 根据ID查找对应的数据 exports.findById = function (id, callback) { fs.readFile(dbPath, 'utf8', function (err, data) { // 请求db.json数据 if (err) { return callback(err) } var newstatus = JSON.parse(data).list; // 通过id遍历获得对应数据 var stu = newstatus.find(function (item) { return item.id == id }) callback(null, stu) }) } // 更新数据 exports.updataById = function (status, callback) { fs.readFile(dbPath, 'utf8', function (err, data) { // 请求db.json数据 if (err) { return callback(err) } var newstatus = JSON.parse(data).list; // 通过id遍历获得要修改的数据stu if (status.id) { var stu = newstatus.find(function (item) { return item.id == parseInt(status.id) }) // 循环修改数据库对象属性值 for (var key in status) { stu[key] = status[key] } var fileData = JSON.stringify({ list: newstatus }) } else { var newid = newstatus[newstatus.length - 1].id +1; let statusStr = status; statusStr.id =parseInt(newid) ; newstatus.push(statusStr) var fileData = JSON.stringify({ list: newstatus }); } // 修改完通过writeFile将数据存储 fs.writeFile(dbPath, fileData, function (err) { if (err) { return callback(err) } callback(null, data) }) }) } // 删除 exports.deleteById = function (status,callback) { fs.readFile(dbPath, 'utf8', function (err, data) { // 请求db.json数据 if (err) { return callback(err) } var newstatus = JSON.parse(data).list; console.log(newstatus) var delectId = newstatus.findIndex(function (item) { return item.id == status.id }) newstatus.splice(delectId, 1) var fileData = JSON.stringify({ list: newstatus }) // 修改完通过writeFile将数据存储 fs.writeFile(dbPath, fileData, function (err) { if (err) { return callback(err) } callback(null, data) }) }) }列表首页(views/home.html)
<div class="container-fluid"> <div class="row"> <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main"> <h1 class="page-header">Dashboard</h1> {{each nav}} <div class="row placeholders"> <div class="col-xs-6 col-sm-3 placeholder"> <img src="{{$value.img}}" width="50" height="50" class="img-responsive" alt="Generic placeholder thumbnail"> <h4>{{$value.name}}</h4> </div> {{/each}} </div> <h2 class="sub-header">Section title?</h2> <a href="/new"> <button class="btn"> 添加</button> </a> <div class="table-responsive"> <table class="table table-striped"> <thead> <tr> <th>名称</th> <th>年龄</th> <th>性别</th> </tr> </thead> <tbody> {{each list}} <tr> <td>{{$value.name}}</td> <td>{{$value.age}}</td> <td>{{$value.sex}}</td> <td> <a href="/new?id={{$value.id}}">编辑</a> <a href="/delect?id={{$value.id}}">删除</a> </td> </tr> {{/each}} </tbody> </table> </div> </div> </div> </div> <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </body>新增页面(views/new.html)
<form action="/home" method="post"> <input type="text" name="name" placeholder="姓名" value="{{status.name}}"> <input type="text" name="age" placeholder="年龄" value="{{status.age}}"> <input type="text" name="sex" placeholder="性别" value="{{status.sex}}"> <input type="hidden" name="id" value="{{status.id}}" placeholder="{{status.id}}" > <button type="submit">提交</button> </form>