Restful常用知识
Restful常用知识
1.接口编程
##################################################
# 接口编程
# 一般来说接口编程是基于HTTP协议,通过某个唯一标识符(URI)请求对应的服务器资源(Resource)
#
# 什么是URI
# 在HTTP协议中, URI的组成如下
# Schema://host[:port]/path[?query-string]
#
# 1.URI与URL的区别
# URI标准, schema支持ftp/ssh等协议类型
# URL: schema只能是http
#
# 2.什么是资源
# 狭义上讲, 所有在服务器保存的数据(如:音乐/视频/文章/个人信息...)都是服务器端资源.
# 广义上讲, 任何服务器端的对象(如:应用程序/数据库记录/算法...)都可以看作资源.
##################################################
# 实例
# 文件 ajax.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">
<title>Document</title>
<!-- 1. 引入jquery.js -->
<script src="./jquery.min.js"></script>
</head>
<body>
<!-- 4. 渲染页面 -->
从有服务器收到的数据是:
<div id="app"></div>
<!-- 2. 使用jquery发送ajax -->
<script>
$(function () {
$.ajax({
url: 'http://localhost/20181112/test.php',
type: 'get',
dataType: 'json',
success: function (resp) {
// 3. 从服务器接收数据, 渲染到页面
console.log(resp)
$('#app').html(resp.name)
}
})
})
</script>
</body>
</html>
# test.php
// 返回json格式的数据
echo json_encode(['name'=>'鸣人']);
##################################################
# 接口编程的作用
#
# 主要是实现了前后端的分离
# 后端(服务器)为前端(APP端/PC浏览器端/微信端)提供一个简单并且统一的方式(URI),
# 返回前端需要的数据(Resource).这样不管是APP还是Web浏览器,
# 只需要通过HTTP协议都可以实现同样的操作.
##################################################
2.RESTful设计六要素
##################################################
# RESTful设计六要素
#
# 是不是所有前后端分离的设计都叫RESTful呢? 不是!!!
# windful是一个后缀, 意思是"像什么一样的"
# RESTful是一种软件设计风格, 主要用于有客户端与服务端交互的软件.
# 主要包括6个方面
# 1.资源路径(URI)
# 2.HTTP动词(Method)
# 3.过滤信息(query-string)
# 4.状态码(Status-code)
# 5.错误信息(Error)
# 6.返回结果(Result)
#
# 如果一个软件符合这些约定(风格), 我们就说这个软件是RESTful的
#
##################################################
# 1.资源路径
#
# 标准的RESTful API中, 每个资源路径对应一个**唯一**的资源,
# 所以规定网址中不能有动词, 只能有名词, 并且一般来说为复数
#
# 实例
##################################################
# http://api.local.com/movies----表示电影资源
# http://api.local.com/images----表示图片资源
# http://api.local.com/musics----表示音乐资源
# http://api.local.com/articles----表示文章资源
##################################################
# 2.Http动词
#
# 对于资源, 一般有4个操作, CURD(增/删/改/查)
#
# GET 从服务器获取资源(一项或多项)
# POST 在服务器新建一个资源
# PUT 在服务器更新资源, 服务器返回完整的属性
# DELETE 从服务器删除资源
# HEAD 从服务器获取信息(响应头)
# PATCH 在服务器更新资源, 服务器只返回更新的属性
#
# 实例
##################################################
# POST /articles -- 创建文章内容
# GET /articles/1 -- 获取主键id为1的文章
##################################################
# 3.过滤信息(请求数据)
#
# 当服务端需要返回的数据很多时, 服务器不可能全部返回
# 此时, 我们可以在客户端携带过滤信息, 比如: 分页信息
#
# 实例
##################################################
# ?page=1 -- 第一页的信息
# ?offset=10&per_page=10 -- 每页10条, 偏移10
##################################################
# 4.响应状态码
#
# 服务端返回的信息, 用来告诉客户端操作结果
# 100-199信息响应(常用)
# 100 Continue 服务器通知浏览器之前一切正常,请客户端继续请求,如果请求结束,可忽略
# 101 Switching Protocal 针对请求头的Upgrade返回的信息。表明服务器正在切换到指定的协议
# 103 Early Hints 此状态代码主要用于与Link链接头一起使用,以允许用户代理在服务器仍在准备响应时开始预加载资源
# 200-299成功响应(常用)
# 200 OK 请求成功
# 201 Created 常用于POST,PUT请求,表明请求已经成功,并新建了一个资源.并在响应体中返回路径。
# 202 Accepted 请求已经接收到,但没有响应,稍后也不会返回一个异步请求结果.该状态码适用于等待其他进程处理或者批处理的场景。
# 203 No-Authoritative Information 表明响应返回的元信息(meta-infomation)和最初的服务器不同,而是从本地或者第三方获取的。
# 主要用于其他资源的镜像和备份.除了前面的情况,首选还是200。
# 204 No Content 请求没有数据返回,但是头信息有用.用户代理(浏览器)会更新缓存的头信息。
# 205 Reset Content 告诉用户代理(浏览器)重置发送该请求的文档。
# 206 Partical Content 当客户端使用Range请求头时,返回该状态码。
# 300-399重定向消息(常用)
# 300 Multiple Choice 返回多个响应,需要浏览器或者用户选择；
# 301 Moved Permanently 请求资源的URL被永久的改变,新的URL会在响应的Location中给出。
# 302 Found 请求资源的URL被暂时修改到Location提供的URL。未来可能还会有新的修改。
# 303 See Other 服务通过返回的响应数据指导客户端通过GET方法去另一个URL获取资源。
# 304 Not Modified 资源未变更。服务器根据请求头判断，需要资源未修改，只返回响应头；否则将资源一起返回。
# 307 Temporary Redirect 临时重定向。基本和302相同。
# 308 Permanent Redirect 永久重定向。基本和301相同。但是严格禁止修改请求方式和请求体。
# 400-499 客户端错误响应(常用)
# 400 Bad Request 请求语法有问题，服务器无法识别。
# 401 UnAuthorized 客户端未授权该请求。缺乏有效的身份认证凭证，一般可能是未登陆。登陆后一般都解决问题。
# 403 Forbidden 服务器拒绝响应。权限不足。
# 404 Not Found URL无效或者URL有效但是没有资源。
# 405 Method Not Allowed 请求方式Method不允许。但是GET和HEAD属于强制方式，不能返回这个状态码。
# 406 Not Acceptable 资源类型不符合服务器要求。
# 407 Proxy Authorization Required 需要代理授权。
# 408 Request Timeout 服务器将不再使用的连接关闭。响应头会有Connection: close。
# 426 Upgrade Required 告诉客户端需要升级通信协议。
# 500-599 服务器错误响应(常用)
# 500 Internal Server Error 服务器内部错误，未捕获。
# 502 Bad Gateway 服务器作为网关使用时，收到上游服务器返回的无效响应。
# 503 Service Unavailable 无法服务。一般发生在因维护而停机或者服务过载。
# 504 Gateway Timeout 网关超时。服务器作为网关或者代理，不能及时从上游服务器获取响应返回给客户端。
# 505 Http Version Not Supported 发出的请求http版本服务器不支持。如果请求通过http2发送，服务器不支持http2.0，就会返回该状态码。
##################################################
# 5.错误处理
# 如果状态码是4xx或者5xx, 需要告诉客户端对应的错误信息. 以Json格式返回
{
"error": "错误信息",
}
##################################################
# 6.返回结果
#
# 针对不同的操作, 服务需要返回的结果应该符合这样的规范
#
# GET /collections -- 返回资源列表(数组)
# GET /collections/:id -- 返回单个资源 eg. /collections/1
# POST /collections -- 返回新生成的资源
# PUT /collections/:id -- 返回资源的完整属性
# PATCH /collections/:id -- 返回被修改的属性
# DELETE /collections/:id -- 返回204状态码+空文档
3.前后端分离与接口文档
################################################### # 前后端分离与接口文档 # # 1.什么是前后端分离 # 前端服务器: 显示页面 # 后端服务器: 提供数据 # 通过API接口实现前后端的交互! ################################################### # 2.前后端分离的好处 # 1.提高开发效率:前后端开发人员可是同时开发,互不影响 # 2.提高复用性:后端通过统一的API提供数据,这样可以同时为web前端/app前端/微信端提供数据 ################################################### # 3.接口文档 # # 在实战环节, 咱们使用Restful的设计风格, 实现用户模块的CURD # 咱们去公司之后, 经常会面临写接口文档的工作, 那么咱们看下接口文档怎么写 # 见附件: API接口文档.md # 前端:vue+axios # 后端:json-server #
4.项目准备
###################################################
# 1.使用npm安装vue
##########################
# 1.1.安装node
# node是一个js的运行环境, 这里我们安装node主要是需要其中的npm包管理工具
##########################
# 1.2.配置npm镜像
# npm默认的仓库地址是在国外网站，速度较慢，建议大家设置到淘宝镜像。
# 但是切换镜像是比较麻烦的。推荐一款切换镜像的工具: nrm
# 我们首先安装nrm，这里-g代表全局安装
npm install nrm -g
# 然后, 我们就可以使用nrm命令了
# 通过 nrm ls 命令查看npm的仓库列表,带*的就是当前选中的镜像仓库
nrm ls
# 通过 nrm use taobao 来指定要使用的镜像源
nrm use taobao
# 注意: 有教程推荐大家使用cnpm命令，但是我使用发现cnpm有时会有bug，不推荐。
##########################
# 1.3.创建项目
# 在D盘, 新建一个文件夹code打开, 按住shift+鼠标右键, 打开sh窗口
# 注意: 路径中不要出现中文
##########################
# 1.4.初始化
#
# 使用如下指令初始化
npm init -y
# 发现在目录下会多一个文件package.json, 这个文件用来管理该项目使用了哪些包
##########################
# 1.5.安装vue
#
# 执行如下命令安装vue
npm install vue --save
# 以上命令可以简写为
npm i vue -S
# 在项目目录会产生一个文件夹node_modules和一个文件package-lock.json
# 在package.json文件中, 会多如下内容
"dependencies": {
"vue": "^2.6.11"
}
# 在node_modules里就是vue了
###########################
# 小结
#
# 总结起来, 使用npm安装一共是两步
# 1)初初始化
npm init -y
# 2)安装
npm install vue --save
###################################################
# 2.使用npm安装json-server
#
# json-server是一个简易的后台服务器, 咱们使用它模拟API接口服务器
##########################
# 2.1安装
npm i json-server -g
# 参数说明:
# 1)i: install的简写
# 2)json-server : 包的名称
# 3)-g: 全局安装
##########################
# 2.2.编写数据文件
# 创建一个db.json
# 使用db.json做为数据文件, 提供接口
# 内容如下
{
"users": [
{
"id": 1,
"name": "鸣人",
"age": 12
},
{
"id": 2,
"name": "佐助",
"age": 11
}
]
}
##########################
# 2.1.启动json-server
json-server --watch db.json
##########################
# 2.3.使用postman测试
###################################################
# 3.Vue-cli
#
# 从字面上理解: 就是Vue的命令行工具.
# 官网: https://cli.vuejs.org/zh/guide/
# Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统
#
# 说明: Vue-cli和Vue/cli的区别
# Vue-cli是2.0的版本
# Vue/cli是最新3.0的版本
#
# 由于前端项目发展特别快, 在准备这个课程的过程中, Vue cli进行了一次升级, 所以我们在本课程中使用的是2.0的版本.
# 大致功能区别不大, 学会了以后可以再学习3.0的版本
##########################
# 3.1.Vue-cli的作用
#
# 基于Vue快速构建一个标准的前端项目
##########################
# 3.2.Vue-cli的安装
npm i vue-cli -g
# 参数说明:
# 1)i: install的简写
# 2)vue-cli : 包的名称
# 3)-g: 全局安装
##########################
# 3.3.测试
vue --version
##########################
# 3.4.小结
#
# 1)vue-cli用来快速构建基本的前端项目
# 2)使用npm i vue-cli -g安装vue-cli工具
###################################################
# 4.vue-cli的使用
#
# 4.1.创建项目
##########################
# 4.1.1.执行命令
vue init webpack first
# 参数说明:
# 1)init: 创建项目
# 2)webpack: 基于webpack模板
# 3)first: 项目名称
##########################
# 4.1.1.设置项目名称
# 接上一步, 在输入命令后, 经过一段时间, 会出现如下提示
# 设置项目的名称, 询问是否使用”first”做为项目名称, 直接按回车
##########################
# 4.1.2.设置项目描述
# 询问是否使用”A vue.js project”做为项目描述, 可以直接按回车, 或者输入一些描述信息
# 比如: 我们可以输入:"My first vue project"回车
##########################
# 4.1.3.设置项目作者
##########################
# 4.1.4.设置编译项
# 使用默认值, recommended for most users ---- 推荐大部分用户使用
##########################
# 4.1.5.是否使用vue-router
# 按回车, 选择Y, 使用!!!
##########################
# 4.1.6.是否使用ES语法检测规则
# 输入n, 回车. 不使用语法规则检测.
# 这里强烈推荐大家在初学的时候, **不使用这个检测!!!** 这个规则非常严格, 特别容易出错
##########################
# 4.1.7.是否使用单元测试
# 输入n, 回车, 不使用单元测试
##########################
# 4.1.8.是否使用点对点测试
# 输入n, 回车, 不使用点对点测试
##########################
# 4.1.9.使用NPM安装所有的依赖包
##########################
# 4.1.10.测试
# 进入到first目录
# 执行命令
cd first
npm run dev
##########################
# 4.1.11.小技巧
# 在运行项目的同时,打开浏览器,制作启动命令
#
# 1.修改package.json,在dev选项后加上 --open
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --open",
# 2.制作一个start.bat文件,编写如下内容
npm run dev
###############
# 提示
# 1.由于要下载比较多的文件,容易受到网络的影响而失败.如果失败,删除目录后重新执行命令
# 2.不要关闭cmd命令,一旦关闭,项目就停止
5.目录结构
################################################### # 5.目录结构 # # 我们主要的工作目录就是src, 其他的文件是跟打包相关的 # 基于webpack创建的前端项目的目录结构如下 # bulid webpack打包相关配置文件 # config webpack打包相关配置目录 # node_modules 第三方包 # src 项目源码 # assets 存储静态资源，例如 css，img，fonts # components 存储所有公共组件 # router 路由 # App.vue 单页面应用程序的根组件 # main.js 程序入口，负责把根组件替换到根节点 # static 可以放一些静态资源 # .gitkeep git提交的时候空文件夹不会提交，这个文件可以让空文件夹可以提交 # .babelrc 配置文件，es6转es5配置文件，给babel编译器用 # .editorconfig 给编辑器看的 # .eslintignore 给eslint代码风格校验工具使用的，用来配置忽略代码风格校验的文件或是目录 # .eslintrc.js 给eslint代码风格校验工具使用的，用来配置代码风格校验规则 # .gitignore 给git使用的，用来配置忽略上传的文件 # .index.html 单页面应用程序的单页 # .package.json 项目说明，用来保存依赖项等信息 # .package-lock.json 锁定第三方包的版本，以及保存包的下载地址 # .postcssrc.js 给postcss用的，postcss类似于less、sass预处理器 # README.md 项目说明文档
6.启动过程分析
################################################### # 6.启动过程分析 # index.html: 项目唯一的html, 也是整个单页应用(SPA)的入口 # 在index.html中只定义了一个div, id=app, 等待被vue渲染 # main.js: webpack打包的入口 # 定义一个vue对象(Root) # 一个router, router从router/index.js导入, 使用vue-router进行组件导航 # 挂载了一个子组件: App, App从App.vue导入 # App.vue: 是所有子组件的祖先 # 定义一个锚点 # 当我们访问某一个path时, vue-router会把HelloWorld组件替换App.vue中定义的锚点 # 要编写的步骤 # 1.规划路由 # 2.编写组件
posted on 2020-03-15 14:06 herisson_pan 阅读(14) 评论(0) 收藏 举报
浙公网安备 33010602011771号