# laravel_template_with_vue **Repository Path**: itm/laravel_template_with_vue ## Basic Information - **Project Name**: laravel_template_with_vue - **Description**: laravel5.5和vue.js结合的前后端分离项目模板。作为程序的起点，可以直接以此为基础来进行业务扩展。模板内容包括基础的用户管理和权限管理。权限管理包括后端Token认证和前端vue.js的动态权限，解决了前后端完整分离的情况下，vue.js的认证与权限相关的痛点，已在本人的多个项目中集成使用。 - **Primary Language**: PHP - **License**: MIT - **Default Branch**: master - **Homepage**: http://vue.ouenyione.com - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 13 - **Created**: 2021-09-24 - **Last Updated**: 2021-09-24 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README ## 写在前面 2018年的春节假期，受朋友的鼓励和内心的指引，对近两年所学到的知识进行了系统的沉淀和总结。 从多个项目中提取关键点、抛弃了的业务部分，对底层的功能进行了各类优化和抽象，写成本项目。 ## 1、 当前版本介绍 ### 1.1 版本说明 > 当前版本laravel_template_with_vue (2.1) > > ### 1.2 改进说明 #### 后端： > 1. 调整xlsx文件的处理插件为fast-excel > 2. 数据表部分字段的调整，取消permissions中不常用的method和route_match字段,修改users表中的role字段为roles， roles表中的permission为permissions，使数据表更加规范化 > 3. 代码层面，资源控制器的功能复用，让代码更简洁和实用，父类Controller中编写好了数据的增删改查和数据表的导入和导出功能，用户可以根据TempController的方式来编写相关代码，可以参考OrderController(订单控制),开箱即用，节省业务的编写时间 > 4. 完善日志管理的API > 5. 利用showdoc完成文档构建 > 6. 利用laravel-echo-server,集成websocket,当同一个用户多次登陆，前次登陆的页面，将自动退出。利用webasocket的消息推送来实现 > 7. 利用laravel-echo-server,集成websocket，实现聊天室功能和客服功能 #### 前端： > 1. 前端element ui 更新到了2.7.2版本，请参照开发 > 2. 集成了同时打开多个页面的功能，多标签功能 > 3. 集成了全屏操作的功能 > 4. 增加了日志管理功能 > 5. 增加了前端开发示列，商品订单管理，代码层面利用mixin功能优化书写 > 6. 接收后端推送的消息，强制下线多次登陆的用户，保证同一个用户在什么时间与地点只能登陆一次。 > 7. 增加了应用事例模块，把具有代表性的聊天室功能和客服功能集成到项目中 #### ToDo： > 1. 前端增加用户多角色动态切换功能 > 2. 增加成员管理功能，实现微信登录、qq登录等第三方用户登录的功能 > 3. 增加成员注册和使用功能 ## 2、系统概述 项目依托laravel5.5与vue.js，采用了主流的前后端分离方式来构建，作为程序的起点，你可以在此基础上进行自身业务的扩展。 后端(backend目录)负责OAuth认证、用户授权、第三方用户登录验证和提供API，在此基础上集成了跨域和excel文件的操作等基础功能，使用者只需专注于业务api的开发即可。 后端(backend目录)整合了laravel-echo-server，实现了websocket。用于消息的实时推送、聊天室、客服等功能，是全网最好的laravel-echo-server教程。 前端(frontend目录)负责页面的显示和前端用户权限的控制。项目已经引入了element UI框架，并已经对用户登录认证、路由、权限等基础功能进行了处理。 前端用户的权限不但可以控制系统的导航菜单，而且可以控制到页面按钮、表格等内容的显示。使用者只需要专注于业务界面的开发即可。 本项目使用广泛，已经在本人的多个项目中商用。 > 第三方登录测试时，可以先进入系统创建一个用户，然后用github登录后绑定刚刚创建的新用户，之后就可以使用github来自动登录了（可以参考版本1，版本2因为项目调整的关系，之后才会增加） ## 3、项目演示与截图 > [element-ui](https://github.com/wmhello/laravel_template_with_vue.git)演示网站(http://vue.ouenyione.com) > [antd-for-vue](https://github.com/wmhello/antd_and_html5.git) 演示网站(http://wmhello.wicp.vip) > 管理员用户名和密码(871228582@qq.com/123456) > 普通用户用户名和密码(786270744@qq.com/123456) ### 项目截图 #### 文档 ![系统文档](https://github.com/wmhello/laravel_template_with_vue/raw/master/Screenshots/doc.png) #### 登陆页面(随机选择登陆页面) ![](https://github.com/wmhello/laravel_template_with_vue/raw/master/Screenshots/login.png) ![](https://github.com/wmhello/laravel_template_with_vue/raw/master/Screenshots/login2.png) #### 聊天室 ![聊天室](https://github.com/wmhello/laravel_template_with_vue/raw/master/Screenshots/chat.png) #### 客服(普通用户界面 1对1) ![客服界面1](https://github.com/wmhello/laravel_template_with_vue/raw/master/Screenshots/kefu-user.png) #### 客服(客服界面 1对多) ![客服界面2](https://github.com/wmhello/laravel_template_with_vue/raw/master/Screenshots/kefu-service.png) #### 管理员面板 ![管理员面板](https://github.com/wmhello/laravel_template_with_vue/raw/master/Screenshots/v2-admin-dashboard.png) #### 普通用户面板[注意观察系统日志和左侧导航菜单] ![普通用户面板](https://github.com/wmhello/laravel_template_with_vue/raw/master/Screenshots/v2-user-dashboard.png) #### 修改个人信息 ![修改个人信息](https://github.com/wmhello/laravel_template_with_vue/raw/master/Screenshots/v2-modify-info.png) #### 全屏幕操作 ![全屏幕操作](https://github.com/wmhello/laravel_template_with_vue/raw/master/Screenshots/v2-full-screen.png) #### 用户管理 ![用户管理](https://github.com/wmhello/laravel_template_with_vue/raw/master/Screenshots/v2-user-list.png) #### 用户添加 ![用户添加](https://github.com/wmhello/laravel_template_with_vue/raw/master/Screenshots/v2-user-add.png) #### 用户数据导出 ![用户数据导出](https://github.com/wmhello/laravel_template_with_vue/raw/master/Screenshots/v2-user-download.png) #### 角色管理 ![角色管理](https://github.com/wmhello/laravel_template_with_vue/raw/master/Screenshots/v2-role-manger.png) #### 角色功能设置 ![角色功能设置](https://github.com/wmhello/laravel_template_with_vue/raw/master/Screenshots/v2-role-set-feature.png) #### 功能管理 ![功能管理](https://github.com/wmhello/laravel_template_with_vue/raw/master/Screenshots/v2-permission-manger.png) #### 功能组管理 ![功能组管理](https://github.com/wmhello/laravel_template_with_vue/raw/master/Screenshots/v2-permission-group.png) #### 添加新功能 ![添加新功能](https://github.com/wmhello/laravel_template_with_vue/raw/master/Screenshots/v2-permission-feature.png) #### 系统日志管理 ![系统日志管理](https://github.com/wmhello/laravel_template_with_vue/raw/master/Screenshots/v2-log-manger.png) #### 管理日志的管理 ![工作日志的管理](https://github.com/wmhello/laravel_template_with_vue/raw/master/Screenshots/v2-log-work.png) #### 管理员界面下的订单管理 ![管理员界面下的订单管理](https://github.com/wmhello/laravel_template_with_vue/raw/master/Screenshots/v2-orders-manger.png) #### 普通用户下的订单管理 ![普通用户下的订单管理](https://github.com/wmhello/laravel_template_with_vue/raw/master/Screenshots/v2-orders-user.png) #### 富文本编辑器 ![富文本编辑器 ](https://github.com/wmhello/laravel_template_with_vue/raw/master/Screenshots/editor.png) #### 树形组件 ![树形组件 ](https://github.com/wmhello/laravel_template_with_vue/raw/master/Screenshots/tree.png) #### 预览xlsx文件 ![预览xlsx文件 ](https://github.com/wmhello/laravel_template_with_vue/raw/master/Screenshots/preview-xls.png) #### 预览pdf文件 ![预览pdf文件 ](https://github.com/wmhello/laravel_template_with_vue/raw/master/Screenshots/preview-pdf.png) ## 4、技术文档 ### [1、后端快速部署](back.md) ### [2、前端快速部署](front.md) ### [3、关键知识点讲述](knowledge.md) ### [4、业务开发](developer.md) ## 5、 开发视频与在线辅导 ### 利用vue.js和vue-element-admin开发管理系统 学习视频： https://v.qq.com/x/page/i3059zqgj4y.html https://v.qq.com/x/page/m3059l9bitb.html #### 目录 ![vue-element-admin开发管理系统](https://github.com/wmhello/laravel_template_with_vue/raw/master/Screenshots/admin-mulu.png) ### 利用PHP开发微信公众号 学习视频: https://url.cn/5d4wWGl?sf=uri #### 目录: ![微信公众号开发](https://github.com/wmhello/laravel_template_with_vue/raw/master/Screenshots/wx-mulu.png) ### 利用Laravel开发RESTful API 学习视频: https://v.qq.com/x/page/t3059mfpgkg.html #### 目录: 1 软件构建与表的设计 2 迁移表的编写 3 模拟数据的生成 4 列表API的编写 5 新增和修改API的编写 6 删除API的编写和优化 7 数据的导入和导出 8 个性化导入 9 后台API的书写流程以及示列 10 passport插件的安装 11 利用passport生成和注销令牌 12 令牌的刷新 13 RBAC权限管理-数据表的建立 14 RBAC权限管理-逻辑的编写 15 中间件的编写 16 封装可以复用的控制器模板 17 模板控制器的编写（增加、修改和删除功能） 18 模板控制器的编写（数据的导入和导出） 19 模板控制器使用以及分析 20 自定义命令行--command的应用 21 代码解耦的好帮手--事件系统 22 广播与消息推送-理论与配置 23 广播与消息推送的实际应用 24 利用laravel-echo-server实现消息推送和聊天室功能 25 laravel中短信发送功能的集成 26 laravel中邮件发送功能的集成 ### 利用uni-app开发微信小程序(核心知识点) #### 目录: ![微信公众号开发](https://github.com/wmhello/laravel_template_with_vue/raw/master/Screenshots/mp-mulu.png) ### 在线辅导 如果你在计算机程序设计的学习与开发的过程中，碰到难点，需要技术指导和相关的开发辅导。可以联系本人，本人将提供有偿的技术支持和辅导（50元/时-100元/小时），辅导的内容包括但不局限于以下（前端、后端PHP、nodejs、数据库、javascript和PHP的程序设计模式、公众号、小程序、vue.js、uni-app等）。 ## 6、技术支持 > 欢迎大家来光临我的博客，主要专注于laravel与vue.js的应用 [博客](https://wmhello.github.io) > 部署和使用中如果有疑问，可以到项目交流群进行讨论：106822531(QQ)或者关注公众号(computer_life)学习相关基础知识 > ![QQ群二维码](https://github.com/wmhello/laravel_template_with_vue/raw/master/Screenshots/qq_qrcode.jpg) > ![全栈开发公众号](https://github.com/wmhello/laravel_template_with_vue/blob/master/Screenshots/gzh.jpg) ## 6、打赏 如果我的付出能够帮助到你，我也乐于接受你的帮助，小小的赞赏是我持续进步的动力。 ![支付宝支付](https://github.com/wmhello/laravel_template_with_vue/raw/master/Screenshots/pay1.jpg) ![微信支付](https://github.com/wmhello/laravel_template_with_vue/raw/master/Screenshots/wx.jpg) ## 7、致谢 站在巨人之上，我们才能走得更远。项目中使用和借鉴了以下开源框架的实现方法 一并致谢 >- [laravel](https://laravel.com/) >- [后端excel插件](https://github.com/rap2hpoutre/fast-excel) >- [后端跨域](https://github.com/barryvdh/laravel-cors) >- [API接口文档](https://github.com/star7th/showdoc) >- [vue.js](https://cn.vuejs.org/index.html) >- [element ui](http://element.eleme.io/#/zh-CN) >- [vue-router](https://router.vuejs.org/) >- [vuex](https://vuex.vuejs.org/) >- [前端构架 vueAdmin-template](https://github.com/PanJiaChen/vueAdmin-template) # License [MIT](https://github.com/wmhello/laravel_template_with_vue/blob/master/LICENSE)