thinkphpvue后台管理系统模板_vueadmin基于vue-admin-
templ。。。
vue-admin-thinkphp 是基于vue-admin-template+thinkphp5的后台权限管理系统
视频演⽰
⽬录介绍
1.vuestage 前端项⽬⽂件
php项目搭建2.vueadmin 后端项⽬⽂件
如何使⽤
后端项⽬搭建
1.环境要求:php版本>=5.5 mysql版本>=5.5
2.拷贝vueadmin⽂件夹下的⽂件到你的⽹站服务器的根⽬录,或者将vueadmin设置为你的web根⽬录
3.vueadmin\vue_admin.sql导⼊到你的mysql数据库
4.配置vueadmin\application\database.php 数据库连接信息
5.启动WEB服务器
前端项⽬搭建
1.安装nodejs环境
3.npm install 初始化项⽬
4.配置vuestage\config\index.js 配置node服务器 host和port
5.开发环境下 配置 vuestage\v.js BASE_API为API请求路径前缀
6.⽣产环境 配置 vuestage\v.js
开发简易教程(⼤神绕道)
以管理员增删改查为例(已经成功运⾏项⽬基础上,上⾯已经介绍了怎么搭建,⾃⾏领悟)
1.登录
⾸先命令⾏进⼊vuestage⽬录,执⾏npm run dev运⾏客户端
并启动web服务器
进⼊后台界⾯登录界⾯
超级管理员账号密码默认为super 123456
2.添加菜单路由配置
将管理员作为⼆级菜单添加到权限管理菜单下 如下图
表单值介绍
依次添加 管理员列表、添加管理员、编辑管理员页⾯的路由配置
菜单资源配置就是有页⾯的路由 如添加页⾯,编辑页⾯,列表页⾯等,(不包括操作页⾯,如删除操作)
svg图标则是从 iconfont 上下载下来的,保存到vuestage\src\icons\svg\⽂件夹下,⾃⼰命名即可,这⾥命名为admin.svg 如下图
3.创建视图⽂件
分别创建
admin.vue
admin_add.vue
admin_edit.vue
admin_lst.vue
创建前端视图页⾯
(需要注意的是必须创建admin.vue空视图页⾯,对应着就是左侧的菜单权限——管理员菜单)
4.配置路由映射视图⽂件(重要)
到vuestage\src\router\map.js 路由映射⽂件
如下图配置
5.创建后端api接⼝⽂件
到vuestage\src\api\permission\ 新建admin.js
如下图
6.控制增删改查数据库操作权限
上⾯的只能是控制页⾯的显⽰,并不能控制后端请求权限,那么怎么办呢
重新打开我们的后台,添加权限资源如下图
7.配置⾓⾊权限
最后在⾓⾊列表中配置相关的视图可见权限和后台请求操作权限即可
如下图所⽰
8.ps
以上可能有许多不完善的地⽅,欢迎提问和批评
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论