Node.js留言板开发全流程解析

留言板1.0

完整留言板1.0资源

复制代码
// 需求:根据用户输入的地址,返回对应的页面
// 1- 搭建服务器 
// 2- 根据不同的请求,返回对应的页面 

const http = require('http');
const fs = require('fs');
const path = require('path');
const mime = require('mime');

const server = http.createServer();

server.on('request', (req, res) => {
  console.log('req.url:', req.url);
  // 根据不同的req.url 返回不同的页面  
  if (req.url.startsWith('/index') || req.url == '/') {
    //首页: 读取首页内容,返回给浏览器解析 
    fs.readFile(path.join(__dirname, 'pages/index.html'), (err, data) => {
      if (err) {
        return console.log(err);
      }
      res.end(data); // 返回给浏览器解析 
    })

  } else if (req.url.startsWith('/add')) {
    //添加页面
    fs.readFile(path.join(__dirname, 'pages/add.html'), (err, data) => {
      if (err) {
        return console.log(err);
      }
      res.end(data); // 返回给浏览器解析 
    })
  } else if (req.url.startsWith('/assets')) {  //静态资源 
    // 服务器之间读取对应文件,返回即可
    fs.readFile(path.join(__dirname, req.url), (err, data) => {
      if (err) {
        return console.log(err);
      }
      // 给每个资源设置明确的mime类型 
      res.setHeader('content-type', mime.getType(req.url));
      res.end(data);
    })
  } else {
    res.end('404');
  }
})

server.listen(9999, () => console.log('http://localhost:9999 服务器已启动'));

留言板2.0

完整留言板2.0资源

复制代码
目标: 动态渲染 留言板案例
1- 搭建服务器 
2- 首页留言动态渲染 
  数据 + 模板
  1- 读取数据库data.json中的数据 
  2- 配合模板引擎 进行渲染 
  3- 把生成好页面结构返回给浏览器解析

3- 删除留言 
  1- 获取前端传递id 
  2- 根据id去数据库中删除对应的 数据
    数据以字符串形式存储,要以数组的形式去操作 
    1- 读取data.json数据,转出js的数组 
    2- 从数组中删除
    3- 删除完成后,在把数组 写回 data.json 中 
  3- 删除完成后,跳转到首页 

4- 添加留言
  1- 获取 前端提交表单数据 
  2- 把数据添加到数据库中 
     数据以字符串形式存储,要以数组的形式去操作 
    1- 读取data.json数据,转出js的数组 
    2- 向数组中添加
    3- 添加完成后,在把数组 写回 data.json 中 
  3- 添加完成后,跳转到首页 
  get  
  post  

// 1-搭建服务器
const http = require('http');
const fs = require('fs');
const path = require('path');
const template = require('art-template');
const mime = require('mime');
const url = require('url');
const moment = require('moment');
const queryString = require('querystring');

const server = http.createServer();

const dataPath = path.join(__dirname, 'data/data.json');

server.on('request', (req, res) => {
  console.log('req.url:', req.url);
  // 路由功能
  if (req.url.startsWith('/index') || req.url == '/') {  //首页
    // 1- 读取数据库data.json中的数据 
    // 2- 配合模板引擎 进行渲染 
    // 3- 把生成好页面结构返回给浏览器解析
    fs.readFile(dataPath, 'utf8', (err, data) => {
      if (err) {
        return console.log(err);
      }
      // 获取到了数据
      data = JSON.parse(data); //json-->js对象 
      console.log(data);
      // 渲染 
      let str = template(path.join(__dirname, 'pages/index.html'), data);
      // 返回给浏览器解析
      res.end(str);
    })
  } else if (req.url.startsWith('/add')) {  // add.html
    // 直接读取 add页面返回即可 
    fs.readFile(path.join(__dirname, 'pages/add.html'), (err, data) => {
      if (err) {
        return console.log(err);
      }
      res.end(data); //返回读取的页面 
    })
  } else if (req.url.startsWith('/assets')) {  //静态资源
    // 直接读取静态资源返回即可
    fs.readFile(path.join(__dirname, req.url), (err, data) => {
      if (err) {
        return console.log(err);
      }
      // 给返回资源设置明确的mime类型
      res.setHeader('content-type', mime.getType(req.url));
      // 返回读取数据
      res.end(data);
    })
  } else if (req.url.startsWith('/delete')) {  // 删除 
    // 1- 获取前端传递id
    // 2- 根据id去数据库中删除对应的 数据
    //   数据以字符串形式存储,要以数组的形式去操作 
    //   1- 读取data.json数据,转出js的数组 
    //   2- 从数组中删除
    //   3- 删除完成后,在把数组 写回 data.json 中 
    // 3- 删除完成后,页面重新渲染 
    // 1- 获取前端传递id
    let id = url.parse(req.url, true).query.id;
    // 2- 读取data.json数据,转出js的数组 
    fs.readFile(dataPath, 'utf8', (err, data) => {
      if (err) { return console.log(err); }
      data = JSON.parse(data); // 转出js的数组 
      //   // console.log(data);
      //   // 数组删除 splice(从哪删, 删几个)   拿到是id, 数据要根据下标去删除 
      //   // 获取当前id对应下标  
      //   // let index = data.list.findIndex(function (v) {
      //   //   return v.id == id;
      //   // })
      // 根据id 找下标 
      let index = data.list.findIndex(v => v.id == id);
      // console.log(index);
      data.list.splice(index, 1);
      data = JSON.stringify(data);
      // 写回data.json中 
      fs.writeFile(dataPath, data, (err) => {
        if (err) {
          return console.log(err);
        }
        // 跳转到首页 
        // 跳转是浏览器的行为, 服务器无法直接控制浏览器跳转, 但是服务器可以通知浏览器跳转, 
        // 浏览器会按照服务器通知,跳转到对应的页面;
        res.statusCode = 302; //设置状态码 通知浏览器进行跳转
        res.setHeader('location', '/index'); // 设置跳转的地址 
        res.end();
      })

    })

    // res.end(id);

  } else if (req.url.startsWith('/submit') && req.method == "GET") {  // get 添加
    // 1- 获取 前端提交表单数据 
    // 2- 把数据添加到数据库中 
    //    数据以字符串形式存储,要以数组的形式去操作 
    //   1- 读取data.json数据,转出js的数组 
    //   2- 向数组中添加
    //   3- 添加完成后,在把数组 写回 data.json 中 
    // 3- 添加完成后,跳转到首页 
    let info = url.parse(req.url, true).query;
    // 添加id 和 创建时间 
    info.id = Date.now();  // 获取当前的时间戳 
    info.created = moment().format('YYYY年MM月DD日 HH:mm:ss');
    console.log(info);
    // 读取data.json数据,转出js的数组 
    fs.readFile(dataPath, 'utf8', (err, data) => {
      if (err) { return console.log(err); }
      data = JSON.parse(data); //json-->js对象  
      data.list.push(info); //添加
      data = JSON.stringify(data); // js --->js 
      fs.writeFile(dataPath, data, (err) => {
        if (err) { return console.log(err); }
        //跳转到首页 重定向 
        res.statusCode = 302;
        res.setHeader('location', '/index');
        res.end();
      })
    });

  } else if (req.url.startsWith('/submit') && req.method == "POST") { // post 添加 
    // 1- 获取 前端提交表单数据 
    // 2- 把数据添加到数据库中 
    //    数据以字符串形式存储,要以数组的形式去操作 
    //   1- 读取data.json数据,转出js的数组 
    //   2- 向数组中添加
    //   3- 添加完成后,在把数组 写回 data.json 中 
    // 3- 添加完成后,跳转到首页 
    // 前端以post方式给后台传递了数据 会触发事件
    let str = '';
    let num = 0;
    req.on('data', function (chunk) { // chunk 块 片段
      str += chunk;
      console.log(++num);

    });
    // 当后台数据接收完成时, 触发end事件 
    req.on('end', function () {
      console.log(str);    // nickname=11&title=11&content=11  查询字符串  
      let info = queryString.parse(str);
      // 添加id 和创建时间 
      info.id = Date.now();
      info.created = moment().format('YYYY年MM月DD日 HH:mm:ss');
      console.log(info);
      //  读取data.json数据,转出js的数组 
      fs.readFile(dataPath, 'utf8', (err, data) => {
        if (err) {
          return console.log(err);
        }
        data = JSON.parse(data); //json --> js对象 
        data.list.push(info); //添加 
        data = JSON.stringify(data); // js--> js
        fs.writeFile(dataPath, data, (err) => {
          if (err) {
            return console.log(err);
          }
          // 跳转到首页   
          res.statusCode = 302;
          res.setHeader('location', '/index');
          res.end();
        })
      })



    })

  } else {   // 404 
    res.end('404');
  }
});

server.listen(9999, () => { console.log('http://localhost:9999 服务器已启动') })

留言板2.1

完整留言板2.1资源

复制代码
目标: 动态渲染 留言板案例
1- 搭建服务器 
2- 首页留言动态渲染 
  数据 + 模板
  1- 读取数据库data.json中的数据 
  2- 配合模板引擎 进行渲染 
  3- 把生成好页面结构返回给浏览器解析

3- 删除留言 
  1- 获取前端传递id 
  2- 根据id去数据库中删除对应的 数据
    数据以字符串形式存储,要以数组的形式去操作 
    1- 读取data.json数据,转出js的数组 
    2- 从数组中删除
    3- 删除完成后,在把数组 写回 data.json 中 
  3- 删除完成后,跳转到首页 

4- 添加留言
  1- 获取 前端提交表单数据 
  2- 把数据添加到数据库中 
     数据以字符串形式存储,要以数组的形式去操作 
    1- 读取data.json数据,转出js的数组 
    2- 向数组中添加
    3- 添加完成后,在把数组 写回 data.json 中 
  3- 添加完成后,跳转到首页 
  get  
  post  

// 1-搭建服务器
const http = require('http');
const fs = require('fs');
const path = require('path');
const template = require('art-template');
const mime = require('mime');
const url = require('url');
const moment = require('moment');
const queryString = require('querystring');

const server = http.createServer();

const dataPath = path.join(__dirname, 'data/data.json');

server.on('request', (req, res) => {
  console.log('req.url:', req.url);
  // 路由功能
  if (req.url.startsWith('/index') || req.url == '/') {  //首页
    // 1- 读取数据库data.json中的数据 
    // 2- 配合模板引擎 进行渲染 
    // 3- 把生成好页面结构返回给浏览器解析  
    readData(function (data) { //data就是读取到数据 
      //读取到数据后 执行逻辑 
      // 对数据进行排序 
      // data.list.sort(function (a, b) {
      //   return b.id - a.id;
      // })
      data.list.sort((a, b) => b.id - a.id);
      // console.log(data);      
      let str = template(path.join(__dirname, 'pages/index.html'), data); // 渲染
      res.end(str);
    })


  } else if (req.url.startsWith('/add')) {  // add.html
    // 直接读取 add页面返回即可 
    fs.readFile(path.join(__dirname, 'pages/add.html'), (err, data) => {
      if (err) {
        return console.log(err);
      }
      res.end(data); //返回读取的页面 
    })
  } else if (req.url.startsWith('/assets')) {  //静态资源
    // 直接读取静态资源返回即可
    fs.readFile(path.join(__dirname, req.url), (err, data) => {
      if (err) {
        return console.log(err);
      }
      // 给返回资源设置明确的mime类型
      res.setHeader('content-type', mime.getType(req.url));
      // 返回读取数据
      res.end(data);
    })
  } else if (req.url.startsWith('/delete')) {  // 删除 
    // 1- 获取前端传递id
    // 2- 根据id去数据库中删除对应的 数据
    //   数据以字符串形式存储,要以数组的形式去操作 
    //   1- 读取data.json数据,转出js的数组 
    //   2- 从数组中删除
    //   3- 删除完成后,在把数组 写回 data.json 中 
    // 3- 删除完成后,页面重新渲染 

    let id = url.parse(req.url, true).query.id;  // 获取id 
    readData(function (data) { // data是读取的数据 
      let index = data.list.findIndex(v => v.id == id); //找下标 
      data.list.splice(index, 1); //删除 
      writeData(data, () => { //写入
        goIndex(res); //去首页 
      });
      // writeData(data, () => goIndex(res));
    })

  } else if (req.url.startsWith('/submit') && req.method == "GET") {  // get 添加
    // 1- 获取 前端提交表单数据 
    // 2- 把数据添加到数据库中 
    //    数据以字符串形式存储,要以数组的形式去操作 
    //   1- 读取data.json数据,转出js的数组 
    //   2- 向数组中添加
    //   3- 添加完成后,在把数组 写回 data.json 中 
    // 3- 添加完成后,跳转到首页 
    let info = url.parse(req.url, true).query;
    info.id = Date.now();
    info.created = moment().format('YYYY年MM月DD日 HH:mm:ss');
    // 添加
    readData((data) => {
      data.list.push(info); //添加
      writeData(data, () => goIndex(res));
    });


  } else if (req.url.startsWith('/submit') && req.method == "POST") { // post 添加 
    // 1- 获取 前端提交表单数据 
    // 2- 把数据添加到数据库中 
    //    数据以字符串形式存储,要以数组的形式去操作 
    //   1- 读取data.json数据,转出js的数组 
    //   2- 向数组中添加
    //   3- 添加完成后,在把数组 写回 data.json 中 
    // 3- 添加完成后,跳转到首页 
    // 前端以post方式给后台传递了数据 会触发事件
    let str = '';
    req.on('data', (chunk) => {
      str += chunk;
    })

    req.on('end', () => {
      let info = queryString.parse(str);
      info.id = Date.now();
      info.created = moment().format('YYYY年MM月DD日 HH:mm:ss');
      // 添加
      readData((data) => {
        data.list.push(info); //添加
        writeData(data, () => goIndex(res));
      })
    });

  } else {   // 404 
    res.end('404');
  }
});

server.listen(9999, () => { console.log('http://localhost:9999 服务器已启动') })



// 封装公共代码:
// 如何封装: 提取公共代码 , 变化部分 作为参数  
// 1- 读取data.json文件数据的方法 
// 2- 写入data.json文件的方法 
// 3- 重定向的方法 



// 1- 读取data.json文件数据的方法 
// fn: 读取数据完成后的处理逻辑 
function readData (fn) {
  fs.readFile(path.join(__dirname, 'data/data.json'), 'utf8', (err, data) => {
    if (err) {
      return console.log(err);
    }
    //json-->js 
    data = JSON.parse(data);
    // 后续处理数据 ,将读取的数据交给fn进行处理 
    fn && fn(data);
    // if (fn) {
    //   fn(data);
    // }
  })
}

// 2- 写入data.json文件的方法 
// data: 要写入的数据
// fn: 写入完成后处理逻辑  
function writeData (data, fn) {
  data = JSON.stringify(data); // js对象转成json 
  fs.writeFile(path.join(__dirname, 'data/data.json'), data, (err) => {
    if (err) {
      return console.log(err);
    }
    //写入成功的后续操作 
    fn && fn();
  })
}

// 3- 重定向的方法 
// res: 响应报文的对象 
function goIndex (res) {
  res.statusCode = 302;
  res.setHeader('location', '/index');
  res.end();
}

// function click (fn) {}
// $('div').click(function (){ });

留言板3.0

完整留言板3.0资源

复制代码
目标: 动态渲染 留言板案例
1- 搭建服务器 
2- 首页留言动态渲染 
  数据 + 模板
  1- 读取数据库data.json中的数据 
  2- 配合模板引擎 进行渲染 
  3- 把生成好页面结构返回给浏览器解析

3- 删除留言 
  1- 获取前端传递id 
  2- 根据id去数据库中删除对应的 数据
    数据以字符串形式存储,要以数组的形式去操作 
    1- 读取data.json数据,转出js的数组 
    2- 从数组中删除
    3- 删除完成后,在把数组 写回 data.json 中 
  3- 删除完成后,跳转到首页 

4- 添加留言
  1- 获取 前端提交表单数据 
  2- 把数据添加到数据库中 
     数据以字符串形式存储,要以数组的形式去操作 
    1- 读取data.json数据,转出js的数组 
    2- 向数组中添加
    3- 添加完成后,在把数组 写回 data.json 中 
  3- 添加完成后,跳转到首页 
  get  
  post  
复制代码
// 处理具体功能模块
// 提供各种功能, 向外暴露 


const fs = require('fs');
const path = require('path');
const template = require('art-template');
const mime = require('mime');
const url = require('url');
const moment = require('moment');
const queryString = require('querystring');
const tools = require('./tools');


module.exports = {
  showIndex (req, res) { //显示首页
    // 1- 读取数据库data.json中的数据 
    // 2- 配合模板引擎 进行渲染 
    // 3- 把生成好页面结构返回给浏览器解析  
    tools.readData(function (data) { //data就是读取到数据 
      //读取到数据后 执行逻辑 
      // 对数据进行排序 
      // data.list.sort(function (a, b) {
      //   return b.id - a.id;
      // })
      data.list.sort((a, b) => b.id - a.id);
      // console.log(data);      
      let str = template(path.join(__dirname, 'pages/index.html'), data); // 渲染
      res.end(str);
    })
  },
  showAdd (req, res) {//显示add.html 
    // 直接读取 add页面返回即可 
    fs.readFile(path.join(__dirname, 'pages/add.html'), (err, data) => {
      if (err) {
        return console.log(err);
      }
      res.end(data); //返回读取的页面 
    })
  },
  showAssets (req, res) { // 显示静态资源
    // 直接读取静态资源返回即可
    fs.readFile(path.join(__dirname, req.url), (err, data) => {
      if (err) {
        return console.log(err);
      }
      // 给返回资源设置明确的mime类型
      res.setHeader('content-type', mime.getType(req.url));
      // 返回读取数据
      res.end(data);
    })
  },
  delete (req, res) {  // 删除 
    // 1- 获取前端传递id
    // 2- 根据id去数据库中删除对应的 数据
    //   数据以字符串形式存储,要以数组的形式去操作 
    //   1- 读取data.json数据,转出js的数组 
    //   2- 从数组中删除
    //   3- 删除完成后,在把数组 写回 data.json 中 
    // 3- 删除完成后,页面重新渲染 

    let id = url.parse(req.url, true).query.id;  // 获取id 
    tools.readData(function (data) { // data是读取的数据 
      let index = data.list.findIndex(v => v.id == id); //找下标 
      data.list.splice(index, 1); //删除 
      tools.writeData(data, () => { //写入
        tools.goIndex(res); //去首页 
      });
      // tools.writeData(data, () => tools.goIndex(res));
    })
  },
  getSubmit (req, res) { // get 添加
    // 1- 获取 前端提交表单数据 
    // 2- 把数据添加到数据库中 
    //    数据以字符串形式存储,要以数组的形式去操作 
    //   1- 读取data.json数据,转出js的数组 
    //   2- 向数组中添加
    //   3- 添加完成后,在把数组 写回 data.json 中 
    // 3- 添加完成后,跳转到首页 
    let info = url.parse(req.url, true).query;
    info.id = Date.now();
    info.created = moment().format('YYYY年MM月DD日 HH:mm:ss');
    // 添加
    tools.readData((data) => {
      data.list.push(info); //添加
      tools.writeData(data, () => tools.goIndex(res));
    });
  },
  postSubmit (req, res) { //post方式添加
    // 1- 获取 前端提交表单数据 
    // 2- 把数据添加到数据库中 
    //    数据以字符串形式存储,要以数组的形式去操作 
    //   1- 读取data.json数据,转出js的数组 
    //   2- 向数组中添加
    //   3- 添加完成后,在把数组 写回 data.json 中 
    // 3- 添加完成后,跳转到首页 
    // 前端以post方式给后台传递了数据 会触发事件
    let str = '';
    req.on('data', (chunk) => {
      str += chunk;
    })

    req.on('end', () => {
      let info = queryString.parse(str);
      info.id = Date.now();
      info.created = moment().format('YYYY年MM月DD日 HH:mm:ss');
      // 添加
      tools.readData((data) => {
        data.list.push(info); //添加
        tools.writeData(data, () => tools.goIndex(res));
      })
    });
  },
  show404 (req, res) { //显示404 
    res.end('404');
  }
}

// 引入 
const http = require('http');
const router = require('./router');

// 创建服务器  
const server = http.createServer();

// 监听请求 
server.on('request', (req, res) => {
  // 找路由模块处理路由 
  router(req, res); 
});

// 启动服务器
server.listen(9999, () => { console.log('http://localhost:9999 服务器已启动') });


// 路由: 是一套匹配规则, 用分配任务 (不需要处理细节)
// 以函数的形式进行暴露,函数可以接受参数
const handler = require('./hanlder'); 

module.exports = function (req, res) {

  console.log('req.url:', req.url);
  // 路由功能
  if (req.url.startsWith('/index') || req.url == '/') {  //首页  
    handler.showIndex(req, res); 

  } else if (req.url.startsWith('/add')) {  // add.html
    handler.showAdd(req, res); 
   
  } else if (req.url.startsWith('/assets')) {  //静态资源
    handler.showAssets(req, res); 
   
  } else if (req.url.startsWith('/delete')) {  // 删除    
    handler.delete(req, res); 

  } else if (req.url.startsWith('/submit') && req.method == "GET") {  // get 添加 
    handler.getSubmit(req, res); 

  } else if (req.url.startsWith('/submit') && req.method == "POST") { // post 添加 
    handler.postSubmit(req, res);

  } else {   // 404 
    handler.show404(req, res); 
   
  }

}


const fs = require('fs');
const path = require('path');

// 封装公共代码:
// 如何封装: 提取公共代码 , 变化部分 作为参数  
// 1- 读取data.json文件数据的方法 
// 2- 写入data.json文件的方法 
// 3- 重定向的方法 

module.exports = {
  // 1- 读取data.json文件数据的方法 
  // fn: 读取数据完成后的处理逻辑 
  readData (fn) {
    fs.readFile(path.join(__dirname, 'data/data.json'), 'utf8', (err, data) => {
      if (err) {
        return console.log(err);
      }
      //json-->js 
      data = JSON.parse(data);
      // 后续处理数据 ,将读取的数据交给fn进行处理 
      fn && fn(data);
      // if (fn) {
      //   fn(data);
      // }
    })
  },

  // 2- 写入data.json文件的方法 
  // data: 要写入的数据
  // fn: 写入完成后处理逻辑  
  writeData (data, fn) {
    data = JSON.stringify(data); // js对象转成json 
    fs.writeFile(path.join(__dirname, 'data/data.json'), data, (err) => {
      if (err) {
        return console.log(err);
      }
      //写入成功的后续操作 
      fn && fn();
    })
  },

  // 3- 重定向的方法 
  // res: 响应报文的对象 
  goIndex (res) {
    res.statusCode = 302;
    res.setHeader('location', '/index');
    res.end();
  }

}

留言板4.0

完整留言板4.0资源

复制代码
1- 搭建服务器 
2- 首页渲染 
   取数据 + 模板引擎 
   1-读取data.json中数据 ,配合模板引擎渲染 
3- 删除留言
  1-后台获取前端传递id,
  2-根据di找到对应下标 
  3-根据下标删除 
  4-删除完成后,跳转到首页 
4- 添加留言
  1- 获取前端 post方式提交数据
  2- 把数据添加到数据库中
  3- 添加完成后,跳转到首页 
复制代码
// 搭建服务器

const express = require('express'); // 引入 
const router = require('./router');
const bodyParser = require('body-parser');

const app = express();  //创建实例

// 配置模板引擎使用
app.engine('html', require('express-art-template')); 
// 设置模板的位置
app.set('views', 'pages');

// 处理静态资源
app.use('/assets', express.static('assets'));

// 给req.body赋值 
app.use(bodyParser.urlencoded({ extended: false }));

//绑定路由 
app.use(router); 

app.listen(9999, () => console.log('http://localhost:9999 服务器已启动'));

// 使用外置路由对象绑定路由

const express = require('express');
const fs = require('fs');
const path = require('path');
const moment = require('moment');

const router = express.Router(); //创建外置路由对象 

// 绑定路由 
router.get('/', (req, res) => { //首页
  // 读取data.json中数据 ,配合模板引擎渲染 
  // readData(data => { //data是读取的数据
  //   res.render('index.html', data);
  // })
  readData(data => res.render('index.html', data));
})

router.get('/index', (req, res) => {  //首页
  res.redirect('/'); //重定向到 / 
});

router.get('/add', (req, res) => {  //add添加页面
  // 直接读取返回 
  res.sendFile(path.join(__dirname, 'pages/add.html'));
})

router.get('/delete', (req, res) => {  //删除
  // 1-后台获取前端传递id,
  // 2-根据id找到对应下标 
  // 3-根据下标删除 
  // 4-删除完成后,跳转到首页 

  let id = req.query.id;  // url.parse(req.url, true).query; 
  readData(data => {
    let index = data.list.findIndex(v => v.id == id); //找下标 
    data.list.splice(index, 1); //删除
    writeData(data, () => res.redirect('/'));  // 写入完成后,跳转首页 
  });
})

router.post('/submit', (req, res) => {  //post 添加 
  // 1- 获取前端 post方式提交数据
  // 2- 把数据添加到数据库中
  // 3- 添加完成后,跳转到首页 
  let info = req.body;
  // 添加id 和创建时间 
  info.id = Date.now();
  info.created = moment().format('YYYY年MM月DD日 HH:mm:ss');

  readData(data => {
    data.list.push(info);//添加
    writeData(data, () => res.redirect('/'));  // 写入完成后,去首页 
  })
});

// 导出
module.exports = router;


// 封装 读写data.json数据方法 
function readData (fn) {
  fs.readFile(path.join(__dirname, 'data/data.json'), 'utf8', (err, data) => {
    if (err) {
      return console.log(err);
    }
    data = JSON.parse(data); // json ->js 
    fn && fn(data); // 由fn 处理读取的数据 
  })
}

function writeData (data, fn) {
  data = JSON.stringify(data);
  fs.writeFile(path.join(__dirname, 'data/data.json'), data, err => {
    if (err) {
      return console.log(err);
    }
    //执行后续操作
    fn && fn();
  })
}

留言板5.0

完整留言板5.0资源

复制代码
目标: 基于express  和 mysql数据库 实现留言板5.0 

一、 准备好数据库 
    1-创建 zlyb数据库
    2-向数据库中输入 meassge.sql  user.sql  , 注意: 编码utf-8 

二、 搭建服务器 
三、 完成具体各个功能 
   首页渲染: 取数据 +模板 
      取数据库获取所有数据,通过模板引擎渲染到页面中 
   删除思路:
    获取前端传递id,根据id去数据库删除对应的数据,删除完成后,重新跳转到首页 

   添加思路:
    获取前端提交的数据, 给数据添加创建时间, 把数据添加到数据库中, 添加完成, 重新跳转到首页 
复制代码
// 封装一个 node 操作mysql数据的方法
// 如何封装: 提供公共代码, 变化部分作为参数 
// 使用mysql模块 操作mysql数据库
// 1- 下载 npm i mysql 
// 2- 引入

// 3-使用
// 大致步骤:
// 1- 通过服务器 连接上数据库 
// 2- 对数据库进行操作
// 3- 断开和数据连接 

// 具体实现步骤:
// 1-准备好 账号信息 
// 2-创建一个数据库连接 
// 3-连接上数据库 
// 4-进行操作 
// 5-断开和数据库连接  

const mysql = require('mysql');

// 1-准备好 账号信息 
let info = {
  host: '127.0.0.1',
  user: 'root',
  password: 'root',
  database: 'zlyb'
}

/* 
  sql: 要执行sql语句 
  param: sql语句中参数 用来替换?的
  fn: 操作完成后 后续处理逻辑 
*/
function myQuery (sql, param, fn) {
  // 2-创建一个数据库连接 
  let con = mysql.createConnection(info);
  // 3- 连接上数据库
  con.connect();
  // 4-操作
  con.query(sql, param, (err, data) => {
    if (err) {
      return console.log(err);      
    }
    //后续处理 
    fn && fn(data);
  });
  // 5-断开
  con.end();
}

// 暴露
module.exports = myQuery; 

// 基于express 搭建服务器
const express = require('express');
const router = require('./rotuer');
const bodyParser = require('body-parser');

const app = express(); //创建服务器 

// 配置模板引擎
app.engine('html', require('express-art-template'));
// 模板目录
app.set('views', 'pages');

// 静态资源托管 
app.use('/assets', express.static('assets'));

// 给req.body赋值 
app.use(bodyParser.urlencoded({ extended: false }));

// 处理路由
app.use(router);

app.listen(9999, () => console.log('http://localhost:9999 服务器已启动'));

// 外置路由对象 提供路由
const express = require('express');
const path = require('path');
const moment = require('moment');
const db = require('./db');

// 创建 外置路由对象
const router = express.Router();

// 绑定路由
router.get('/', (req, res) => {  // 首页 
  // 取数据库获取所有数据,通过模板引擎渲染到页面中 
  db('select * from message', null, (data) => {
    // console.log(data); // data是数组     
    res.render('index.html', { list: data }); // 渲染
  })
});

router.get('/index', (req, res) => {  //首页
  res.redirect('/');
})

router.get('/add', (req, res) => {  //添加 
  res.sendFile(path.join(__dirname, 'pages/add.html'));
})

router.get('/delete', (req, res) => { // 删除 
  // 获取前端传递id,根据id去数据库删除对应的数据,删除完成后,重新跳转到首页 
  let id = req.query.id;
  db('delete from message where id = ?', id, () => res.redirect('/'));
})

router.post('/submit', (req, res) => { // post 提交 
  // 获取前端提交的数据, 给数据添加创建时间, 把数据添加到数据库中, 添加完成, 重新跳转到首页 
  let info = req.body;
  info.created = moment().format('YYYY-MM-DD HH:mm:ss');
  db('insert into message set ?', info, () => res.redirect('/'));
})

// 作业: 以上代码 都用一行写出来 

// 导出
module.exports = router;
相关推荐
南山安2 小时前
React 学习:useContext——优雅解决跨层级组件通信
javascript·react.js·面试
『六哥』2 小时前
node.js 安装教程
node.js
鹏程十八少2 小时前
Android 一套代码适配车机/手机横竖屏?看我如何用搞定小米、比亚迪、蔚来、理想、多品牌架构设计
android·前端·面试
么么...2 小时前
掌握 MySQL:约束、范式与视图详解
数据库·经验分享·sql·mysql
持续升级打怪中2 小时前
从前端到大模型:我的AI转型之路与实战思考
前端·人工智能
LYFlied2 小时前
【性能优化】图片渲染性能优化全流程方案详解
前端·性能优化
盒马coding2 小时前
高性能MySQL到PostgreSQL异构数据库转换工具MySQL2PG
数据库·mysql·postgresql
小Mie不吃饭2 小时前
Spring boot + mybatis-plus + Redis 实现数据多级缓存(模拟生产环境)
java·spring boot·redis·mysql·缓存
『六哥』2 小时前
零基础搭建完成完整的前后端分离项目的准备工作
前端·后端·项目开发