WebAPI 实现前后端分离的示例

随着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结构本身就是存在升级方便的优势,只需要把服务端更新就可以了。

版本控制一般用两种方式

第一种:URL不变,版本写在HTTP标头内面。

第二种:版本写在URL上面。

本人推荐第二种,比较直接方便了解。示例:

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 实现前后端分离的示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • WebAPI 实现前后端分离的示例

    随着Web技术的发展,现在各种框架,前端的,后端的,数不胜数.全栈工程师的压力越来越大. 现在的前端的框架,既可以做各种Web,又可以做各种APP,前端框架更新换代越来越快,越来越多. 传统的模式 前端和后端进行调试,修改都非常麻烦.往往前端配合后端很痛苦,后端也嫌前端麻烦. (无解,能动手解决的事,尽量别动嘴.办公室应该常备一些,绷带,止血条,速效救心丸等药品.为了阻止事态升级,办公室要加强刀具管制条例.) 前后端分离 前端根据事先约定好的文档,可以自己摸拟数据,然后开发,测试,调试UI,发布

  • IDEA教程创建SpringBoot前后端分离项目示例图解

    目录 创建springboot项目 测试项目 按照MVC格式创建数据库项目 总结 springboot就是简化Spring应用中的初始化配置,快速创建项目而生的. 创建springboot项目 代开idea,点击File->New->Project,弹出如下对话框 输入组织.工程名,选择maven工程,注意:java版本号选择8 可以根据自己项目的需求选择依赖包,系统会自动将这些依赖包写入maven的pom文件,如下选择Spring Web.myBtias.mySQL驱动等.无需担心漏掉依赖包

  • FastApi+Vue+LayUI实现前后端分离的示例代码

    目录 前言 项目设计 后端 前端 运行项目 Q&A 前言 在前面的Api开发中,我们使用FastApi已经可以很好的实现.但是实际使用中,我们通常建议前后端项目分离.今天我们就使用FastApi+Vue+LayUI做一个前后端分离的Demo. 项目设计 后端 后端我们采用FastApi在新的test视图中,定义一个路由,并将其注册到app中,并且在test视图中定义一个接口,实现模拟从数据库读取数据供前端调用渲染. 代码 test.py from fastapi import FastAPI,D

  • nginx+vue.js实现前后端分离的示例代码

    1.nginx 是一个高性能的HTTP和反向代理服务器,常用于分布式服务器管理. 它常用于做负载均衡(通过调用多台服务器达到此目的) 静态资源输出更快,可以对资源实现gzip压缩后输出(这也是本文为什么用它做静态资源访问的一个重要原因) 适合解决跨域问题和反向代理(因为谁也不想看到在本域名下看到访问其他域名的情况发生,跨域可导致csrf攻击,这是本文用它的第二个原因) 占用内存少,秒启,能快速切换结点,防止宕机 2.es6 是ECMAScript的第六个版本,如果想要学好vue.js等js框架,

  • Springboot+Vue+shiro实现前后端分离、权限控制的示例代码

    本文总结自实习中对项目的重构.原先项目采用Springboot+freemarker模版,开发过程中觉得前端逻辑写的实在恶心,后端Controller层还必须返回Freemarker模版的ModelAndView,逐渐有了前后端分离的想法,由于之前,没有接触过,主要参考的还是网上的一些博客教程等,初步完成了前后端分离,在此记录以备查阅. 一.前后端分离思想 前端从后端剥离,形成一个前端工程,前端只利用Json来和后端进行交互,后端不返回页面,只返回Json数据.前后端之间完全通过public A

  • Springboot+Spring Security实现前后端分离登录认证及权限控制的示例代码

    目录 前言 本文主要的功能 一.准备工作 1.统一错误码枚举 2.统一json返回体 3.返回体构造工具 4.pom 5.配置文件 二.数据库表设计 初始化表数据语句 三.Spring Security核心配置:WebSecurityConfig 四.用户登录认证逻辑:UserDetailsService 1.创建自定义UserDetailsService 2.准备service和dao层方法 五.用户密码加密 六.屏蔽Spring Security默认重定向登录页面以实现前后端分离功能 1.实

  • Docker部署前后端分离项目的实现示例

    目录 一.环境准备 二.运行镜像 解决问题 Redis安装 Nginx安装 三.打包项目 四.部署 一.环境准备 服务器 阿里云服务器 1核+2GB即可 软件 本次部署采用的是 docker,因此软件环境都在 docker 上 我们需要 MySQL 8.0.x版本,Redis,Nginx,提前下好镜像即可 二.运行镜像 MySQL安装 MySQL我用的是8.0.x的版本,在部署过程中出现了一些问题,在这里跟大家分享一下 docker run \ -p 3306:3306 \ --name mys

  • flask和vue前后端分离项目部署的示例代码

    前段时间开发了一个项目, 我后端用的是flask框架写接口,前端用的是vue框架,项目前后端完全分离,部署的时候遇到一点问题,记录一下. 部署环境:centos6.5.Python3.6.3 .flask0.12.0 vue 部署方式:uwsgi+nginx 步骤: ​ 1.首先安装python运行环境,正常 ​ 2.安装uswsgi运行,正常(使用pip安装,pip install uwsgi): 新建config.ini文件 [uwsgi] # uwsgi 启动时所使用的地址与端口,ngin

  • SpringBoot+mybatis+Vue实现前后端分离项目的示例

    目录 一.SpringBoot环境搭建 1.项目的数据库 2.项目所需依赖 3.application.yml文件 4.入口类 二.vue实现前后端分离 1.前端页面 2.springBoot控制层 3.mapper文件 4.项目完整源代码 vue前后端分离实现功能:员工的增删改(先实现数据回显之后,再进行修改)查 一.SpringBoot环境搭建 1.项目的数据库 /* Navicat Premium Data Transfer Source Server : windows Source S

  • Java前后端分离之权限管理示例分析

    目录 1.前端界面 1.1 按钮 1.2 对话框+树形控件 2.后端操作 2.1 controller层 2.2 serviceImpl层 2.3 结果展示 2.4 查对应的权限菜单(使用中间表) 2.4.1 后端处理(权限回显) 2.4.2 前端处理 2.4.3 后端处理(确定修改权限) 1.前端界面 1.1 按钮 借助elementui中的表格部分 <template slot-scope="scope"> <el-button @click="perm

随机推荐