Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

Commit 0f1ad25

Browse filesBrowse files
committed
更新技术文档
1 parent d2da418 commit 0f1ad25
Copy full SHA for 0f1ad25

File tree

Expand file treeCollapse file tree

2 files changed

+70
-1
lines changed
Filter options
Expand file treeCollapse file tree

2 files changed

+70
-1
lines changed

‎README.md

Copy file name to clipboardExpand all lines: README.md
+1-1Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
#### 管理员面板
2323
![管理员面板](https://github.com/wmhello/laravel_template_with_vue/raw/master/Screenshots/dashboard.png)
2424

25-
#### 普通用户面板
25+
#### 普通用户面板[注意观察按钮和左侧导航菜单]
2626
![普通用户面板](https://github.com/wmhello/laravel_template_with_vue/raw/master/Screenshots/dishboard-user.png)
2727

2828
#### 用户管理

‎knowledge.md

Copy file name to clipboard
+69Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
## 1、项目后端实现用户认证和授权的思路
2+
认证和授权是每个框架的基本的底层功能,本项目中,认证使用了laravel5.5中的passport OAuth认证方式,
3+
基本概念和操作可以参考[Laravel 的 API 认证系统 Passport](https://d.laravel-china.org/docs/5.5/passport)。如果理解不了也无需担心,因为其已经无缝集成到本项目
4+
,无需配置,开箱即可以实现基于token的认证。直接使用就可以了。
5+
6+
授权功能实现了基于角色的权限访问控制(RBAC),为了方便集成和使用,直接使用了中间件的方式来实现。方案采用了用户->角色->功能三个元素关联来实现。
7+
每一个功能指向一个后端路由,一个角色可以包含多个功能权限,而一个用户又可以包括多个角色,实现了一个用户可以有多个指定的功能,从而实现了RBAC授权。
8+
9+
## 2、项目后端的构架
10+
项目的后端(backend目录)由laravel5.5开发而来,基本的目录、结构以及规范请参考[Laravel 项目开发规范](https://laravel-china.org/courses/laravel-specification)
11+
12+
为了更优雅、艺术的书写代码,请遵循以下规范:
13+
14+
1.路由必须有命名,这是功能权限控制所必须的
15+
16+
2.扩展开发时必须使用资源路由,而且各控制器中的方法命名必须一致。如批量删除(deleteAll) 文件导入(upload)等 必须与PermissionController.php一致
17+
18+
3.API编写过程中必须采用[Eloquent: API 资源](https://d.laravel-china.org/docs/5.5/eloquent-resources),必须有资源和资源集合文件,并放置于app\Http\Resources目录下面
19+
20+
4.表单验证建议使用单独的表单请求类,并放置于app\Http\Requests目录
21+
22+
5.文件的导出建议使用单独的导出类进行注入到控制器进行处理,导出类放置于app\Http\Controllers\Import目录
23+
24+
25+
## 3、项目前端的构架
26+
项目的前端部分(frontend目录)由vue.js编写而成,使用到了axios、vue-router、vuex等插件以及element-ui。
27+
基本的目录结构和组织以[vueAdmin](https://github.com/PanJiaChen/vueAdmin-template)为基础,相关功能知识点太多,请自行参考[vue-element-admin](https://panjiachen.github.io/vue-element-admin-site/#/zh-cn/)
28+
如果学习和使用中有问题,请进群交流。
29+
30+
前端权限部分参考[前端权限控制 Vue-Access-control](https://github.com/tower1229/Vue-Access-Control),并结合vueAdmin的项目结构进行了深入修改,
31+
以便更好的集成到项目中,从而实现了精细化的前端权限控制。
32+
33+
## 4、前端的运行流程简述
34+
1.vue从main.js启动,进行渲染,注入了vue-router插件,vue-router控制了前端路由,由于未登录,vue-router转到登录路由,显示登录界面。
35+
36+
2.输入用户名和密码后,axios插件发送请求到登录接口,后端进行认证,认证通过后后返回token,前端保存token到cookie。
37+
38+
3.认证通过后,前端利用token去获取登录用户的个人信息,这里面就包括用户的角色和相关的功能权限。
39+
40+
4.前端获取角色(roles)和权限信息(permissions),使用vuex进行保存,以便多个页面共享上述数据。前端根据获得的角色去对比保存在前端本地的完整的路由表,筛选出符合角色的路由并动态挂载到真实的前端路由表上。
41+
根据重新生成的路由表,利用element-ui的相关组件,生成左侧的导航栏和菜单项并显示出来。
42+
43+
5.前端把获得的权限信息存储到vuex里面,主要用于访问后台接口时的请求拦截,如果用户没有接口权限,在前端就会被拦截而无需发到后端,这样就减少了请求量,合理利用带宽。
44+
权限信息还主要用于页面上是否显示各种元素的判断,举例而言,如果用户没有删除学期信息的功能,则不显示相关的删除按钮。
45+
这里主要利用了vue.js中的指令功能和全局函数结合后台返回的权限数据来判断。
46+
47+
6.前端显示出主菜单和根据权限进行了页面的显示后,渲染完成,进入与用户的交互状态,等待用户执行相关操作。
48+
49+
## 5、理解前后端分离开发
50+
前后端分离开发是今年的开发主流与趋势,通过分离开发,后端只需要维护一套api就能满足(PC、平板、手机APP、微信、小程序等)多端的应用需求,
51+
从而让后端开发人员更聚焦于程序业务逻辑的实现,方便测试的同时也有利于后期的维护与升级
52+
53+
前后端分离项目中的前端部分一般由javascript结合主流的前端框架和库来书写。页面由前端来实现,页面之间的跳转也由前端路由来负责,
54+
前端和后端之间的数据传输主要通过ajax的方式来实现,数据从后端拿,怎么呈现有前端来负责。
55+
56+
如果一个项目采用前后端分离的方式来开发,不论是开发还是部署,我们可以理解为两个并行的项目,约定好接口后,可以同时开发,同时测试。
57+
在部署的时候,一般建议使用两个不同的域名,一个指向项目的后端部分,另一个指向前端打包发布好的js文件目录。
58+
59+
## 6、前后端实现跨域
60+
跨域是最常见的一个小问题,常困扰着开发者,解决的方案有多重,其中最好的解决方案就和本项目中使用的一样,让后端来实现,
61+
原理就是在http数据请求的返回头上加上允许调用的域名,如果考虑到更多的安全性问题,可以在backend\app\config目录下的cors.php文件里进行配置,
62+
具体可以参考[后端跨域](https://github.com/barryvdh/laravel-cors)
63+
64+
至于前端,采用此种方法进行跨域后,无需进行任何设置,直接调用接口就能够返回数据。
65+
66+
67+
68+
69+

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.