[TOC] # 前后端分离 >前后端分离并不只是开发模式,而是web应用的一种架构模式。在开发阶段,前后端工程师约定好数据交互接口,实现并行开发和测试;在运行阶段前后端分离模式需要对web应用进行分离部署,前后端之前使用HTTP或者其他协议进行交互请求。 **1\. 客户端和服务端采用RESTFul API的交互方式进行交互** ![](https://box.kancloud.cn/10babc06cff5cf740ae0dc3f6340315b_924x478.png) **2. 前后端代码库分离** ![](https://box.kancloud.cn/22c3ecc48ba64f76de77d9772240065e_947x288.png) # 后台中心 * 代码结构 ![](https://box.kancloud.cn/8a9a40e6fa40b5850a6018f5f5917e91_590x398.png) * 指定网关地址 ![](https://img.kancloud.cn/55/36/553650a8d560c06fba0b3a16f1ec0746_1760x562.png) * ajax请求json数据时,带上token ![](https://box.kancloud.cn/26883e329fb6a03b6efc88841265b85e_1741x659.png) * 渲染table时,请求参数带上token ![](https://box.kancloud.cn/6932f04d2e91fd9f1b78bf817bcf9141_1746x716.png) * token无效处理 ![](https://box.kancloud.cn/76811a414d0fa4206d4e5b83ab18c029_1666x630.png) * 菜单链接 ![](https://img.kancloud.cn/ad/90/ad90812084abb1d03f358302f68215ea_1320x627.png) * 路由绑定url ![](https://img.kancloud.cn/5a/c9/5ac97a2b1060c9bad68c7f443db6036a_1542x554.png) # 登录请求 ``` $.ajax({ url: config.base_server + 'api-auth/oauth/token', //url: 'http://127.0.0.1:8000/oauth/token', data: field, type: 'POST', //dataType: 'JSON', success: function (data) { console.log(JSON.stringify(data)); if (data.access_token) { config.putToken(data); layer.msg('登录成功', {icon: 1, time: 500}, function () { location.replace('./'); }); } else { layer.closeAll('loading'); layer.msg('登录失败,请重试', {icon: 5, time: 500}); } }, error: function (xhr) { layer.closeAll('loading'); if (xhr.status == 400) { layer.msg('账号或密码错误', {icon: 5, time: 500}); }else if( xhr.status == 500){ layer.msg('服务器异常,请联系管理员', {icon: 5, time: 500}); }else if( xhr.status == 0){ layer.msg('网关异常,请联系管理员', {icon: 5, time: 900}); } } }); ``` # 前端按钮权限 ![](https://box.kancloud.cn/b05bdd9aa3b4a05415e86163dd37d2e0_981x530.png) ## 登录完整链路信息 ![](https://box.kancloud.cn/0b8dbd349265ec3b83bdca7764e72d99_1651x777.png) 由api-gateway --> auth-server的/oauth/token -->user-center -->db