普歌-基于后台接口重构图书管理案例

最新推荐文章于 2024-07-24 14:47:53 发布

Cnc_zj

最新推荐文章于 2024-07-24 14:47:53 发布

阅读量129

点赞数

分类专栏： Vue基础文章标签： vue.js

本文链接：https://blog.csdn.net/BZJ0528_/article/details/111587704

版权

Vue基础专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Vue基础——基于接口的图书管理案例

在这里插入图片描述

案例分析

图书相关的操作基于后台接口数据进行操作
需要调用接口的功能点
① 图书列表数据加载 GET
② 添加图书 POST
③ 验证图书名称是否存在 GET
④ 编辑图书-根据id查询图书信息 GET
⑤ 编辑图书-提交图书信息 PUT
⑥ 删除图书 DELETE

需要准备的步骤

# 图书管理后台接口文档
> 基准路径： http://localhost:3000/

## 获取图书列表数据
- 路径：books
- 请求参数：无
- 响应结果

```json
[{
  "id": "4",
  "name": "红楼梦",
  "date": 2525609975000
}, {
  "name": "三国演义",
  "date": 2525609975000,
  "id": 5
}, {
  "name": "水浒传",
  "date": 2525609975000,
  "id": 6
}, {
  "name": "西游记",
  "date": 2525609975000,
  "id": 7
}]

添加图书-提交图书信息

路径：books
请求参数
- name : 图书名称
响应结果

{
    "status": 200  // (200表示成功；500表示失败)
}

编辑图书-根据ID查询图书信息

路径：books/:id
请求参数：无
响应结果

{
    "name":"西游记",
    "date":2525609975000,
    "id":7
}

编辑图书-提交图书信息

路径：books/:id
请求参数
- name : 图书名称
响应结果

{
    "status": 200  // (200表示成功；500表示失败)
}

删除图书信息

路径：books/:id
请求参数: 无
响应结果

{
    "status": 200  // (200表示成功；500表示失败)
}

验证图书名称是否存在

路径：books/book/:name
请求参数:无
响应结果

{
    "status": 1  // (1表示存在；2表示不存在)
}

引入axios.js和vue.js

下面附上完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
  <div id="app">
    <div class="grid">
      <div>
        <h1>图书管理</h1>
        <div class="book">
          <div>
            <label for="id">
              编号：
            </label>
            <input type="text" id="id" v-model='id' disabled="false" v-focus>
            <label for="name">
              名称：
            </label>
            <input type="text" id="name" v-model='name'>
            <button @click='handle' :disabled="submitFlag">提交</button>
          </div>
        </div> 
      </div>
      <div class="total">
        <span>图书总数：</span>
        <span>{{total}}</span>
      </div>
      <table>
        <thead>
          <tr>
            <th>编号</th>
            <th>名称</th>
            <th>时间</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr :key='item.id' v-for='item in books'>
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.date | format('yyyy-MM-dd hh:mm:ss')}}</td>
            <td>
              <a href="" @click.prevent='toEdit(item.id)'>修改</a>
              <span>|</span>
              <a href="" @click.prevent='deleteBook(item.id)'>删除</a>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript" src="js/axios.js"></script>
  <script type="text/javascript">
    /*
      图书管理-添加图书
    */
    axios.defaults.baseURL = 'http://localhost:3000/';
    axios.interceptors.response.use(function(res){
      return res.data;
    }, function(error){
      console.log(error)
    });
    Vue.directive('focus', {
      inserted: function (el) {
        el.focus();
      }
    });
    Vue.filter('format', function(value, arg) {
      function dateFormat(date, format) {
        if (typeof date === "string") {
          var mts = date.match(/(\/Date\((\d+)\)\/)/);
          if (mts && mts.length >= 3) {
            date = parseInt(mts[2]);
          }
        }
        date = new Date(date);
        if (!date || date.toUTCString() == "Invalid Date") {
          return "";
        }
        var map = {
          "M": date.getMonth() + 1, //月份 
          "d": date.getDate(), //日 
          "h": date.getHours(), //小时 
          "m": date.getMinutes(), //分 
          "s": date.getSeconds(), //秒 
          "q": Math.floor((date.getMonth() + 3) / 3), //季度 
          "S": date.getMilliseconds() //毫秒 
        };
        format = format.replace(/([yMdhmsqS])+/g, function(all, t) {
          var v = map[t];
          if (v !== undefined) {
            if (all.length > 1) {
              v = '0' + v;
              v = v.substr(v.length - 2);
            }
            return v;
          } else if (t === 'y') {
            return (date.getFullYear() + '').substr(4 - all.length);
          }
          return all;
        });
        return format;
      }
      return dateFormat(value, arg);
    })
    var vm = new Vue({
      el: '#app',
      data: {
        flag: false,
        submitFlag: false,
        id: '',
        name: '',
        books: []
      },
      methods: {
        handle: async function(){
          if(this.flag) {
            // 编辑图书
            var ret = await axios.put('books/' + this.id, {
              name: this.name
            });
            if(ret.status == 200){
              // 重新加载列表数据
              this.queryData();
            }
            this.flag = false;
          }else{
            // 添加图书
            var ret = await axios.post('books', {
              name: this.name
            })
            if(ret.status == 200) {
              // 重新加载列表数据
              this.queryData();
            }
          }
          // 清空表单
          this.id = '';
          this.name = '';
        },
        toEdit: async function(id){
          // flag状态位用于区分编辑和添加操作
          this.flag = true;
          // 根据id查询出对应的图书信息
          var ret = await axios.get('books/' + id);
          this.id = ret.id;
          this.name = ret.name;
        },
        deleteBook: async function(id){
          // 删除图书
          var ret = await axios.delete('books/' + id);
          if(ret.status == 200) {
            // 重新加载列表数据
            this.queryData();
          }
        },
        queryData: async function(){
          // 调用后台接口获取图书列表数据
          // var ret = await axios.get('books');
          // this.books = ret.data;

          this.books = await axios.get('books');
        }
      },
      computed: {
        total: function(){
          // 计算图书的总数
          return this.books.length;
        }
      },
      watch: {
        name: async function(val) {
          // 验证图书名称是否已经存在
          // var flag = this.books.some(function(item){
          //   return item.name == val;
          // });
          var ret = await axios.get('/books/book/' + this.name);
          if(ret.status == 1) {
            // 图书名称存在
            this.submitFlag = true;
          }else{
            // 图书名称不存在
            this.submitFlag = false;
          }
        }
      },
      mounted: function(){
        // var that = this;
        // axios.get('books').then(function(data){
        //   console.log(data.data)
        //   that.books = data.data;
        // })

        // axios.get('books').then((data)=>{
        //   console.log(data.data)
        //   this.books = data.data;
        // })

        this.queryData();
      }
    });
  </script>
</body>
</html>

用到的css样式index.css

.grid {
  margin: auto;
  width: 530px;
  text-align: center;
}
.grid table {
  border-top: 1px solid #C2D89A;
  width: 100%;
  border-collapse: collapse;
}
.grid th,td {
  padding: 10;
  border: 1px dashed #F3DCAB;
  height: 35px;
  line-height: 35px;
}
.grid th {
  background-color: #F3DCAB;
}
.grid .book {
  padding-bottom: 10px;
  padding-top: 5px;
  background-color: #F3DCAB;
}
.grid .total {
  height: 30px;
  line-height: 30px;
  background-color: #F3DCAB;
  border-top: 1px solid #C2D89A;
}

准备的接口路由如下index.js

const express = require("express");
const path = require("path");
const router = require("./router.js");
const bodyParser = require("body-parser");
const app = express();

// 启动静态资源服务
app.use(express.static("public"));

// 处理请求参数
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

// 设置允许跨域访问该服务
app.all("*", function (req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Methods", "PUT, GET, POST, DELETE, OPTIONS");
  res.header("Access-Control-Allow-Headers", "X-Requested-With");
  res.header("Access-Control-Allow-Headers", "Content-Type");
  res.header("Access-Control-Allow-Headers", "mytoken");
  next();
});

// 配置路由
app.use(router);
// 监听端口
app.listen(3000, () => {
  console.log("running...");
});

router.js

/*
  路由模块
*/
const express = require('express');
const router = express.Router();
const service = require('./service.js');

// 查询图书列表
router.get('/books',service.getAllBooks);
// 添加图书(提交表单)
router.post('/books',service.addBook);
// 跳转到编辑图书信息页面
router.get('/books/:id',service.toEditBook);
// router.get('/toEditBook',service.toEditBook);
// 编辑图书提交表单
router.put('/books/:id',service.editBook);
// 删除图书信息
router.delete('/books/:id',service.deleteBook);
// 验证图书名称是否存在
router.get('/books/book/:name',service.checkName);

module.exports = router;

service.js

const data = require("./data.json");
const path = require("path");
const fs = require("fs");

// 自动生成图书编号（自增）
let maxBookCode = () => {
  let arr = [];
  data.forEach((item) => {
    arr.push(item.id);
  });
  return Math.max.apply(null, arr);
};
// 把内存数据写入文件
let writeDataToFile = (res) => {
  fs.writeFile(
    path.join(__dirname, "data.json"),
    JSON.stringify(data, null, 4),
    (err) => {
      if (err) {
        res.json({
          status: 500,
        });
      }
      res.json({
        status: 200,
      });
    }
  );
};
// 验证图书名称是否存在
exports.checkName = (req, res) => {
  let name = req.params.name;
  let flag = false;
  data.some((item) => {
    if (name == item.name) {
      flag = true;
      return true;
    }
  });
  if (flag) {
    res.json({
      status: 1,
    });
  } else {
    res.json({
      status: 2,
    });
  }
};

// 获取图书列表数据
exports.getAllBooks = (req, res) => {
  res.json(data);
};

// 添加图书保存数据
exports.addBook = (req, res) => {
  // 获取表单数据
  let info = req.body;
  let book = {};
  for (let key in info) {
    book[key] = info[key];
  }
  book.date = 2525609975000;
  book.id = maxBookCode() + 1;
  data.push(book);
  // 把内存中的数据写入文件
  writeDataToFile(res);
};
// 跳转编辑图书页面
exports.toEditBook = (req, res) => {
  let id = req.params.id;
  let book = {};
  data.some((item) => {
    if (id == item.id) {
      book = item;
      return true;
    }
  });
  res.json(book);
};
// 编辑图书更新数据
exports.editBook = (req, res) => {
  let info = req.body;
  info.id = req.params.id;
  data.some((item) => {
    if (info.id == item.id) {
      for (let key in info) {
        item[key] = info[key];
      }
      return true;
    }
  });
  // 把内存中的数据写入文件
  writeDataToFile(res);
};
// 删除图书信息
exports.deleteBook = (req, res) => {
  let id = req.params.id;
  data.some((item, index) => {
    if (id == item.id) {
      // 删除数组的一项数据
      data.splice(index, 1);
      return true;
    }
  });
  // 把内存中的数据写入文件
  writeDataToFile(res);
};

Cnc_zj

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
普歌-基于后台接口重构图书管理案例

Vue基础——基于接口的图书管理案例案例分析图书相关的操作基于后台接口数据进行操作需要调用接口的功能点① 图书列表数据加载 GET② 添加图书 POST③ 验证图书名称是否存在 GET④ 编辑图书-根据id查询图书信息 GET⑤ 编辑图书-提交图书信息 PUT⑥ 删除图书 DELETE需要准备的步骤# 图书管理后台接口文档> 基准路径： http://localhost:3000/## 获取图书列表数据- 路径：books- 请求参数：无- 响应结果```j
复制链接

扫一扫

专栏目录