前端攻城狮---node之图书管理系统(restful)

什么是RESTful风格？

REST是REpresentational State Transfer的缩写（一般中文翻译为表述性状态转移），REST 是一种体系结构，而 HTTP 是一种包含了 REST 架构属性的协议，为了便于理解，我们把它的首字母拆分成不同的几个部分：

表述性（REpresentational）： REST 资源实际上可以用各种形式来进行表述，包括 XML、JSON 甚至 HTML——最适合资源使用者的任意形式；
状态（State）： 当使用 REST 的时候，我们更关注资源的状态而不是对资源采取的行为；
转义（Transfer）： REST 涉及到转移资源数据，它以某种表述性形式从一个应用转移到另一个应用。

简单地说，REST 就是将资源的状态以适合客户端或服务端的形式从服务端转移到客户端（或者反过来）。在 REST 中，资源通过 URL 进行识别和定位，然后通过行为(即 HTTP 方法)来定义 REST 来完成怎样的功能。

实例说明:

在平时的 Web 开发中，method 常用的值是 GET 和 POST，但是实际上，HTTP 方法还有 PATCH、DELETE、PUT 等其他值，这些方法又通常会匹配为如下的 CRUD 动作:

CRUD 动作	HTTP 方法
Create	POST
Read	GET
Update	PUT 或 PATCH
Delete	DELETE

尽管通常来讲，HTTP 方法会映射为 CRUD 动作，但这并不是严格的限制，有时候 PUT 也可以用来创建新的资源，POST 也可以用来更新资源。实际上，POST 请求非幂等的特性(即同一个 URL 可以得到不同的结果)使其成一个非常灵活地方法，对于无法适应其他 HTTP 方法语义的操作，它都能够胜任。

在使用 RESTful 风格之前，我们如果想要增加一条商品数据通常是这样的:

/addCategory?name=xxx

但是使用了 RESTful 风格之后就会变成:

/category

这就变成了使用同一个 URL ，通过约定不同的 HTTP 方法来实施不同的业务，这就是 RESTful 风格所做的事情了，为了有一个更加直观的理解，引用一下来自how2j.cn的图:

那么RESTful的好处

RESTful 风格为后台与前台的交互提供了简洁的接口API，并且有利于减少与其他团队的沟通成本，通常情况下，我们会创建一份RESTful API文档来记录所有的接口细节，但是这样做有以下的几个问题：

由于接口众多，并且细节复杂（需要考虑不同的HTTP请求类型、HTTP头部信息、HTTP请求内容等），高质量地创建这份文档本身就是件非常吃力的事，下游的抱怨声不绝于耳。
随着时间推移，不断修改接口实现的时候都必须同步修改接口文档，而文档与代码又处于两个不同的媒介，除非有严格的管理机制，不然很容易导致不一致现象。

就好比html5的标签，让url和method更好的表达对应的语义。

项目修改

接口

上一个图书管理系统，我们没有进行前后端分离，前端页面其实都是后端返回的。这次我们通过接口的方式去实现功能。

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

//首页
router.get("/books",service.showMain);

//修改
router.get("/books/book/:id",service.toedit);
router.put("/books/book",service.editfinish);
//删除
router.delete("/books/:id",service.todele);
//添加
router.post("/books",service.addbook);
module.exports = router;

这就是暴露给前端的接口，接口的命名结合请求方式，可以更好的表达该接口的语义，这就是RESTful的特点。那么接口返回的数据当然就是一个json格式的字符串,具体格式可自行设置。

页面显示

既然页面不是由node直接返回去渲染，那么我们就引入art-tmplate的html版本。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="/restfulbook/css/index.css">
    <title>Document</title>
    <script type="text/javascript" src="/restfulbook/js/jquery.js"></script>
    <script type="text/javascript" src="/restfulbook/js/dialog.js"></script>
    <script type="text/javascript" src="/restfulbook/js/template-web.js"></script>
    <script type="text/javascript" src="/restfulbook/js/index.js"></script>
    <script type="text/template" id="bookTemplate">
       {{each data}}
            <tr>
                <td>{{$value.id}}</td>
                <td>{{$value.name}}</td>
                <td>{{$value.author}}</td>
                <td>{{$value.classify}}</td>
                <td>{{$value.content}}</td>
                <td><a href="#">编辑</a> <a href="#">删除</a></td>
            </tr>
        {{/each}}
    </script>
    <script type="text/template" id="bookAdd">
        <form action="" method="" class="changeForm" >
            <input type="hidden" name="id" value="{{editdata.id}}">
            名称:<input type="text" name="name" value="{{editdata.name}}"><br>
            作者:<input type="text" name="author" value="{{editdata.author}}"><br>
            分类:<input type="text" name="classify" value="{{editdata.classify}}"><br>
            概要:<input type="text" name="content" value="{{editdata.content}}"><br>
            <input type="submit" value="保存">
        </form>
    </script>
</head>
<body>
    <header>欢迎来到图书管理系统</header>
    <table>
        <thead>
            <tr>
                <th>编号</th>
                <th>名称</th>
                <th>作者</th>
                <th>分类</th>
                <th>概要</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
    <footer><a href="#">添加</a></footer>

</body>
</html>

id是bookAdd的template是显示dialog的样式，id是bookTemplate是显示书本内容的样式。主要的逻辑都在index.js。

业务逻辑

我们来看看添加代码

    $("footer").find("a").click(()=>{
            let div = $("<div></div>");
            let bookTemplate =$( template("bookAdd",{editdata:""}));//通过模板生成dialog的样式
            bookTemplate.find("input[type=hidden]").remove();
            div.append(bookTemplate);
            let dialog = new MarkBox(300,200,"添加",div.get(0));
            dialog.init();
            bookTemplate.find("input[type=submit]").click(()=>{
                $.ajax({
                    type:"post",
                    dataType:"json",
                    url:"/books",
                    data:bookTemplate.serialize(),//表单的序列化
                    success:(data)=>{
                        console.log("添加");
                        if(data.success){
                            showSuccess("添加成功");//成功刷新界面
                        }else{
                            showFail();//失败则返回失败的dialog
                        }
                    }
                })
            })
        })

附上github项目地址，下一篇会开启全新的篇章vue的相关知识点和使用。如有表达错的请谅解，并请提出指出，且修改错误，望能共同进步

项目地址 https://github.com/gaoyouhuang/node_bookManager

参考：使用RESTful风格开发Java Web https://www.jianshu.com/p/91600da4df95