WebAPI 实现前后端分离的示例
转自:http://www.aspku.com/kaifa/net/298780.html
随着Web技术的发展,现在各种框架,前端的,后端的,数不胜数。全栈工程师的压力越来越大。
现在的前端的框架,既可以做各种Web,又可以做各种APP,前端框架更新换代越来越快,越来越多。
传统的模式
前端和后端进行调试,修改都非常麻烦。往往前端配合后端很痛苦,后端也嫌前端麻烦。
(无解,能动手解决的事,尽量别动嘴。办公室应该常备一些,绷带,止血条,速效救心丸等药品。为了阻止事态升级,办公室要加强刀具管制条例。)
前后端分离
前端根据事先约定好的文档,可以自己摸拟数据,然后开发,测试,调试UI,发布到线上时把API接口改成线上API接口,即可完事。
前端日后增加新功能,修改UI,自己修改,自己编译更新自己UI站点,发布线上只要调上线上API接口即可。并不需要麻烦到后端。两者工作进行分离。
后端需要跟前端商量好接口,写好接口文档,在接口功能上相互沟通(其实相当于需求相互沟通),一旦接口文档订好之后,只需按事先约定实现API接口即口。把项目编译好发布到线上服务器。即可完事。
后端实现WebApi接口,还可以面对各种调用,如PC端web,手机APP,或者其它设备。一个接口多种调用,实现代码去重。
工作模式分析
对前端和后端进行分离。各司其职,各自在自己的领域集中精力研究。更能有效的加深技术深度。
前后端分离的模式,你需要N名前端工程师和N名后端工程师。
首先我们要约定一些返回基本的格式,比如用XML,还是JSON。结果大多数前端都是喜欢JSON,因为JS天生就支持JSON。
我贴出一些示例代码:
{
"ResultCode": 1300,
"Message":"权限不足",
"Data":null,
}
{
"ResultCode": 1600,
"Message":"逻辑异常",
"Data":null,
"DetailError":{
"ErrCode":1601001,
"ErrMsg":"金额必须大于>0"
}
}
返回参数说明
参数名 | 类型 | 是否必有 | 说明 |
ResultCode | int | 是 | 返回码 |
Message | string | 是 | 结果说明 |
DetailError | josn | 否 | 具体错误 |
Data | josn | 否 | 数据 |
ResultCode
ResultCode | 说明 |
1000 | 成功 |
1100 | 服务器异常 |
1200 | 身份验证异常 |
1300 | 权限不足 |
1400 | 传递参数验证不通过 |
1500 | 版本异常 |
1600 | 业务逻辑异常 |
1700 | 系统成升级中 |
1800 | 该接口己弃用 |
具体异常
这是一个有点争议的地方,有很多业务逻辑异常,出于对用户的友好提示。一些生涩难懂的错误提示,直接给到用户,用户一脸懵逼。但是后端却不能修改成友好提示,这样不方便调试,寻找问题原因。
一般来讲,前端可以自动修改友好提示给用户。
如果后端返回字符串,前端写死在代码中,万一,某一天后端认为这个描述更符合场景,修改的字符串。敌军还有30秒到达战场。
建议:尽量使用异常代码,大家可以看到上面贴出例子,就使用的异常代码。每种异常都有唯一编号,描述可以更改。但是编号不变。
用户异常(1601000) | 说明 |
1601001 | 账号/密码错误 |
1601002 | 账号被冰冻 |
1601003 | 原密码不对 |
版本控制
每个API都有一个版本,其实也是就针对APP,如果是WEB端的,都是直接升级的因为B/S结构本身就是存在升级方便的优势,只需要把服务端更新就可以了。
http://www.xxx.com/版本号 当前版本号:v1 http://www.baidu.com/v1/UserSecurity/Login
API风格
现在流行的api风格比较多,最出名的就是restful风格。
按本人的经验,完全走restful风格是很困难的,可能也是水平问题,在团队内面也要考虑到其它成员的水平问题。我们目前API风格还是保留以前风格。
示例,V*代表版本号
http://xx.com/V*/UserSecurity/SignOut
HTTP谓词
使用 Post 方法在服务器上创建/修改/删除资源
使用 Get 方法从服务器检索某个资源或者资源集合
基本命名规则
使用骆驼式命名法-大驼峰法
跨域处理
前端站点和后端API布署到不同的站点,就会产生跨域问题。
什么是同源策略?
同源是域名,协议,端口相同。也就是说如果不同,则是非同源。
同源策略是浏览器的一基本的安全功能,非同源访问,浏览器会进行拒绝。
HMTL上面的SRC地址,你可以指定任何URL,表单提交,你可以提交到任何URL。
但是,你如果使用AJAX技术,就会受到同源策略的影响,拒绝提交。
现代浏览器几乎都支持跨域资源请求的一种方式。这种技术叫CORS(跨域资源共享)
CORS跨域分两种
第一种,简单跨域。
第二种,复杂跨域。
解决方案:HTTP输出标头增加如何节点
注意有前端框架版本,对安全要求较高,不能使用通配符*,要指定跨域域名。
Access-Control-Allow-Origin:*
下面节点可填,可不填,根据实际情况,自行决定。
Access-Control-Allow-Methods:GET,POST,OPTIONS
Access-Control-Allow-Credentials:true
Access-Control-Allow-Headers:根据请求头的内容,填写
注意:复杂跨域比要简单跨域麻烦,更花费性能。因为复杂跨域在请求之前会先发一个options预请求,根据响应判断服务器是否支持跨域。也就是说,实际上请求了两次。
Cookies作用域
不同的站点,如何通用Cookies?
一般情况只需把cookies作用域设置顶级域名,浏览器会自动把cookies在访问子域名的时候捎上去。
示例,访问二级域名时候,cookies默认会被传送过去。
顶级域名:baidul.com
cookies作用域:.baidu.com
二级域名:
www.baidu.com
api.baidu.com
示例
下面贴一些示例文档,其它的就不多讲啦
基本上,WebApi前后端分离的细节和注意点,都记录下来,还有更多的细节,需要读者在开发过程自己去寻找答案。随笔完毕!
以上这篇WebAPI 实现前后端分离的示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持ASPKU源码库。
WebAPI 实现前后端分离的示例的更多相关文章
- WebAPI 实现前后端分离
随着Web技术的发展,现在各种框架,前端的,后端的,数不胜数.全栈工程师的压力越来越大. 现在的前端的框架,既可以做各种Web,又可以做各种APP,前端框架更新换代越来越快,越来越多. 传统的模式 前 ...
- ASP.NET WebApi+Vue前后端分离之允许启用跨域请求
前言: 这段时间接手了一个新需求,将一个ASP.NET MVC项目改成前后端分离项目.前端使用Vue,后端则是使用ASP.NET WebApi.在搭建完成前后端框架后,进行接口测试时发现了一个前后端分 ...
- Spring Boot Security JWT 整合实现前后端分离认证示例
前面两章节我们介绍了 Spring Boot Security 快速入门 和 Spring Boot JWT 快速入门,本章节使用 JWT 和 Spring Boot Security 构件一个前后端 ...
- NCF 如何通过WebApi实现前后端分离
简介 昨天参加了<Best Of Microsoft Build>上海专场 NCF 模块化 WebApi 系统开发 + 容器化部署实战 的小伙伴们,昨天有些没有记住的,今天我在这里给大家把 ...
- 【开源】分享一个前后端分离方案-前端angularjs+requirejs+dhtmlx 后端asp.net webapi
一.前言 半年前左右折腾了一个前后端分离的架子,这几天才想起来翻出来分享给大家.关于前后端分离这个话题大家也谈了很久了,希望我这个实践能对大家有点点帮助,演示和源码都贴在后面. 二.技术架构 这两年a ...
- dotnetcore vue+elementUI 前后端分离架二(后端篇)
前言 最近几年前后端分离架构大行其道,而且各种框架也是层出不穷.本文通过dotnetcore +vue 来介绍 前后端分离架构实战. 涉及的技术栈 服务端技术 mysql 本项目使用mysql 作为持 ...
- [开源] angularjs + Asp.net 前后端分离解决方案
本文版权归 博客园 萧秦 所有,此处为技术收藏,如有再转,请于篇头明显位置标明原创作者及出处,以示尊重! 作者:萧秦 原文:http://www.cnblogs.com/xqin/p/4862849. ...
- [转] 前后端分离开发模式的 mock 平台预研
引入 mock(模拟): 是在项目测试中,对项目外部或不容易获取的对象/接口,用一个虚拟的对象/接口来模拟,以便测试. 背景 前后端分离 前后端仅仅通过异步接口(AJAX/JSONP)来编程 前后端都 ...
- 【转】从MVC到前后端分离
1. 理解MVC MVC是一种经典的设计模式,全名为Model-View-Controller,即模型-视图-控制器. 其中,模型是用于封装数据的载体,例如,在Java中一般通过一个简单的POJO(P ...
随机推荐
- Mybatis学习随笔
学习Mybatis路径(适合有java基础和mysql基础的小伙伴) 1.把项目搭建起来,跑一跑感受一下 2.测试基本映射 3.测试高级映射 4.测试动态sql 5.学习懒加载与缓存 6.与sprin ...
- 17.分支的合并&遇到冲突时的分支合并
分支的合并 假设你已经修正了 #53 问题,并且打算将你的工作合并入 master 分支. 为此,你需要合并 iss53 分支到 master 分支,这和之前你合并 hotfix 分支所做的工作差不多 ...
- html5之hash
http://blog.csdn.net/u012028371/article/details/67636395 原文:https://www.studyscript.com/Post/index/i ...
- python vscode在centos下安装
对于centos则如下: sudo rpm --import https://packages.microsoft.com/keys/microsoft.asc sudo sh -c 'echo -e ...
- 深入编解码:ASCII,UNICODE,UTF8等
ASCII ASCII = American Standard Code for Information Interchange(美国信息交换标准码) 美国最先有了计算机技术,计算机里面只有01,也就 ...
- java virtualVM远程配置方法
在/etc/hosts中设置主机名和ip的对应关系 ip为用java virtualVM链接服务器的ip 如: 10.175.0.191 host-ai #rmiregistry不知道干 ...
- 你是怎么调试 JavaScript 程序
你是怎么调试 JavaScript 程序的?最原始的方法是用 alert() 在页面上打印内容,稍微改进一点的方法是用 console.log() 在 JavaScript 控制台上输出内容.嗯~,用 ...
- 《React 与 Redux 开发实例精解》出版了!
<React 与 Redux 开发实例精解>出版了! <React 与 Redux 开发实例精解>出版了! 关于 React 与 Redux React 与 Redux, 一个 ...
- tcp长连接分包方法
tcp长连接分包的四种方法1.消息长度固定2.使用特殊的字符串作为消息边界.比如http协议的headers以“\r\n”为字段的分隔符3.在每条消息的头部加一个长度字段.这是最常见的4.利用消息本身 ...
- 分享Spring Scheduled定时器的用法
摘要:在coding中经常会用到定时器,指定每隔1个小时,或是每天凌晨2点执行一段代码段,若是使用java.util.Timer来做这种事情,未免重复造轮子.幸亏Spring中封装有定时器,而且非常好 ...