浅谈前后端分离与restful

402 阅读5分钟

随着技术的发展,项目的规模随着数据的变大越来越大,基于项目的管理和设计,很难再有一个人可以完成整个项目的场景了,所以今天聊的话题应运而生。

前后端分离

项目的规模变大,参加的人变多,技术栈增多,难度变大,那么这么解决这件事,和我们日常想的一样,就是拆分,讲一个巨大的项目拆分成独立的小的部分,也称作解耦,基于整个项目有很多解耦的地方,比如ORM,比如读写分离,但是,最前遇到的,也是最基础的就是前后端分离。

了解前后端分离之前,先聊聊前后端之前的服务端和前端交互模式:

1、前端定义页面

2、后端定义数据

3、后端加载数据,把数据渲染到页面上,形成渲染后的结果,也就是最后的结果,返回给访问的人。

这样不可避免的后端介入前端的代码,进行修改,显然这样从开发的效率上和对后端程序员的要求上都是有问题的,所以就有了前后端分离。

1、后端只负责返回数据

2、前端只负责页面的渲染,请求后端数据渲染到页面上。

这样双方独立开来,开发效率自然会提起来,开发的难度自然也降了下来。

Restful

前后端分离技术逐渐的成熟,前端发送请求,后端传递数据的规范就至关重要了,规范对于代码的维护,和可读性起到了很大的作用,所以,就有了Restful风格,但是,(这里注意,他只是一个风格,并不是非要遵守,只不过遵守这种规范,代码的可读性和可维护性会很好,和前端沟通会顺畅很多),我们从下面的几个方面聊聊Restful风格:

以一个学员管理作为例子,数据结构如下:

字段数据类型描述
idint数据id,自增
student_numstring学号,唯一
student_namestring学员项目
student_ageint学员年龄
student_picturestring学员头像
majorstring学员专业

1、约定请求数据的地址当中以名词标识资源

2、约定请求数据的动作以请求方式描述

3、请求数据和返回数据以json为格式

服务器主机地址

www.rest_example.com

案例

获取所有学员信息

请求方式

(GET 使用get方式表述获取数据)

请求地址

(student作为学生资源的标志,不发生变化)

www.rest_example.com/student

返回数据
{
    "data": [
        {
            "id": 1,
            "student_num": "aj2323451",
            "student_name": "张三",
            "student_age": 18,
            "student_picture": "http://s3/picture/zs.jpg",
            "major": "计算机工程"
        },
        {
            "id": 2,
            "student_num": "aj2323452",
            "student_name": "李四",
            "student_age": 18,
            "student_picture": "http://s3/picture/ls.jpg",
            "major": "软件工程"
        },
        {
            "id": 3,
            "student_num": "aj2323453",
            "student_name": "王五",
            "student_age": 19,
            "student_picture": "http://s3/picture/ww.jpg",
            "major": "软件工程"
        }
    ],
    "code": 1, //code 用来返回接口编码,提供前端做判断使用
    "error_message": "success", //code 用来返回接口的描述,主要用来描述错误
}

获取部分学员信息

请求方式

(GET 使用get方式表述获取数据)

请求地址

(student作为学生资源的标志,不发生变化,筛选条件以get请求传递)

www.rest_example.com/student?age…

返回数据
{
    "data": [
        {
            "id": 1,
            "student_num": "aj2323451",
            "student_name": "张三",
            "student_age": 18,
            "student_picture": "http://s3/picture/zs.jpg",
            "major": "计算机工程"
        },
        {
            "id": 2,
            "student_num": "aj2323452",
            "student_name": "李四",
            "student_age": 18,
            "student_picture": "http://s3/picture/ls.jpg",
            "major": "软件工程"
        }
    ],
    "code": 1, 
    "error_message": "success", 
}

获取单个学员信息

请求方式

(GET 使用get方式表述获取数据)

请求地址

(student作为学生资源的标志,不发生变化,通过在url传递唯一标识获取单条数据)

www.rest_example.com/student/1

返回数据
{
    "data": [
        {
            "id": 1,
            "student_num": "aj2323451",
            "student_name": "张三",
            "student_age": 18,
            "student_picture": "http://s3/picture/zs.jpg",
            "major": "计算机工程"
        }
    ],
    "code": 1, 
    "error_message": "success", 
}

保存学员信息

请求方式

(POST 使用post方式表述获取数据)

请求地址

(student作为学生资源的标志,不发生变化)

www.rest_example.com/student

请求携带数据

使用post请求,传递json数据

POST application/json

{
    "student_num": "aj2323458",
    "student_name": "马六",
    "student_age": 18,
    "student_picture": "http://s3/picture/ml.jpg",
    "major": "计算机工程"
}
返回数据
{
    "data": [
        {
            "id": 8,
            "student_num": "aj2323458",
            "student_name": "马六",
            "student_age": 18,
            "student_picture": "http://s3/picture/ml.jpg",
            "major": "计算机工程"
        }
    ],
    "code": 1, 
    "error_message": "success", 
}

修改学员信息

请求方式

(POST 使用post方式表述获取数据)

请求地址

(student作为学生资源的标志,不发生变化,通过在url传递唯一标识获取单条数据,通过id标识是新增还是修改)

www.rest_example.com/student/1

请求携带数据

使用post请求(当然使用put也是可以的),传递json数据

POST application/json

{
    "student_num": "aj2323458",
    "student_name": "马六",
    "student_age": 18,
    "student_picture": "http://s3/picture/ml.jpg",
    "major": "计算机工程"
}
返回数据
{
    "data": [
        {
            "id": 8,
            "student_num": "aj2323458",
            "student_name": "马六",
            "student_age": 18,
            "student_picture": "http://s3/picture/ml.jpg",
            "major": "计算机工程"
        }
    ],
    "code": 1, 
    "error_message": "success", 
}

删除学员信息

请求方式

(POST 使用post方式表述获取数据)

请求地址

(student作为学生资源的标志,不发生变化,通过在url传递唯一标识获取单条数据,)

www.rest_example.com/student/1

请求携带数据

使用delete 请求标识删除请求

返回数据
{
    "data": [
        "删除成功"
    ],
    "code": 1, 
    "error_message": "success", 
}

总结

基本的restful风格先聊到这里,些许浅见希望可以帮到大家,欢迎各位大佬多多指点。