vue php admin

VUE-PHP-ADMIN-DEMO

vue-php-admin project description

Universal backend role permission management system, based on vue-element-admin and PHP CodeIgniter 3.1.10 RESTful implementation. It adopts a permission management system with front-end and back-end separation architecture and a PHP rapid development platform. The goal is to build a simple and easy-to-use rapid solution. It can help users effectively reduce project development difficulty and cost.

Based on the [email protected] front-end template, modify the dynamic routing part to realize that the menu routing can be dynamically loaded according to the back-end role. The back-end routing permissions are based on php-jwt and use php CI hook for token and permission authentication.

Except for the home page and documents, the original sample templates of the vue-element-admin front-end are archived under the样例模板menu, see @router/index.js constantRouterMap, and other components such as tags-views, etc., are not done. Changes can be made and deleted based on specific needs.

For the implementation of dynamically switching roles, see vue-php-admin-V3

Main functions

• 1. System login: system user login, jwt token方式, github/gitee 三方登录
• 2. User management: create new users, modify users, delete users, query users
• 3. Role management: create new roles, modify roles, delete roles, query roles
• 4. Menu management: create new menu, modify menu, delete menu, query menu
• 5. Department management: create new department, modify department, delete department, query department
• 6. Icon management: vue-element-admin original encapsulated component
• 7. JWT generates access and refresh tokens. After the access_token expires, the access token is refreshed based on the refreshtoken to achieve a seamless refresh function. refreshtoken is added to the counter and will be automatically renewed if the interface is called more than a certain number of times during the validity period. CI mode uses hooks for token and permission authentication functions before controller method calls.
• 8. Graphical verification code (generated by gregwar/captcha package), corporate WeChat scan code to log in, see vue-php-admin-V3
• 9. Rebuild the code 20200401 in restful style, GET/POST/PUT/DELETE
• 10. Interface theme optimization
• 11. Completely abandon CI’s own database operations and use catfan/medoo for database operations.
• 12. System log: PHP CodeIgniter 3.1.10 RESTful backend generates logs table

RESTful specification

• For a complete example of addition, deletion, modification and query of restful specifications, see Article.php controller

• The catfan/medoo package database operation is introduced to replace part of the model of the CI framework. TODO: Use medoo to completely replace the CI database operation.

• Use catfan/medoo to implement complex paging filtering and sorting. See article_get() and users_get() and vue front-end GET request construction parameters.

  The front-end GET request parameters are related to the table component used. The vue-data-tables component is used here.

   GET /articles?offset=1&limit=30&sort=-id&fields=id,title,author&query=~author,title&author=888&title=world
  
  limit:  每页记录数，后台会配置默认值
  offset: 第几页，后台会配置默认值
  sort:   支持多个参数 &sort=-id,+author => id降序 author 升序
  fileds: 指定要获取的显示字段 => 降低网络流量
  query:  支持多个参数 &query=~author,title => author like 模糊查询， title精确查询 &author=888&title=world 需要配合query参数才有意义
  

Instructions for use

front end

1. Download the front-end code (vue-element-admin directory) and unzip it

2. Modify interface configuration

   cat .env.development

     # base api
     VUE_APP_BASE_API = 'http://www.cirest.com:8890/api/v2/'

3. run

      npm run dev

rear end

1. Download the PHP backend code (CodeIgniter-3.1.10 directory) and unzip it

2. Create the database vueadmin and import the vueadmin.sql file. When navcat-for-mysql import sometimes causes errors, modify the mysql my.ini configuration file parameter mysqld and add max_allowed_packet = 500M under the node.

3. Backend database connection configuration modification configuration file

   cat applicationconfigdatabase.php

    $ db [ ' default ' ] = array(
       ' dsn '	=> '' ,
       ' hostname ' => ' localhost ' ,
       ' username ' => ' root ' ,
       ' password ' => ' root ' ,
       ' database ' => ' vueadminv2 ' ,
       ...

   cat applicationconfigconfig.php

    // medoodb 初始化数据库全局配置, 注意与CI databases.php 区别, TODO： 完全弃用 CI 自带数据库操作，使用medoodb
   $ config [ ' medoodb ' ] = [
       ' database_type ' => ' mysql ' ,
       ' database_name ' => ' vueadminv2 ' ,
       ' server ' => ' localhost ' ,
       ' username ' => ' root ' ,
       ' password ' => ' root ' ,
       ' charset ' => ' utf8 ' ,
       //可选：端口
       ' port ' => 3306 ,
       //可选：表前缀
       ' prefix ' => '' ,
       // PDO驱动选项 http://www.php.net/manual/en/pdo.setattribute.php
       ' option ' => [
           PDO :: ATTR_CASE => PDO :: CASE_NATURAL
       ]
   ];

4. CodeIgniter-3.1.10 directory, composer installs related dependency packages php-jwt and codeigniter-restserver

   composer install  // 根据composer.json 初始安装所有插件包

   Or manually

   composer require chriskacerguis/codeigniter-restserver
   composer require firebase/php-jwt
   composer require league/oauth2-github
   composer require nette/http
   composer require catfan/medoo

5. Use phpstudy to configure site domain name management and modify the hosts file (optional)

   www.cirest.com:8890 Note that it is consistent with the front-end interface configuration BASE_API: '"http://www.cirest.com:8890/api/v2/"'

   API interface call usage example:

   http://www.cirest.com:8890/api/v2/sys/user/testapi # 免token认证测试接口正常  对应 GET 请求
   http://www.cirest.com:8890/index.php/api/v2/sys/user/testapi

   The token-free authentication test interface is configured in CodeIgniter-3.1.10/config/config.php

    $ config [ ' jwt_white_list ' ] = [
       ' /example/users/get ' ,
       ' /example/users/post ' ,
       ' /example/users/delete ' ,
       ' /article/articles/get ' , // 测试api接口不认证 http://www.cirest.com:8890/api/v2/article/articles     uri_string => api/v2/article/articles
       ' /article/articles/post ' ,
       ' /article/articles/put ' ,
       ' /article/articles/delete ' ,
       ' /sys/user/testapi/get ' ,
   ]

   The backend php interface uri contains index.php. If you want to remove and modify CodeIgniter-3.1.10/.htaccess file (Apache) in the root directory, please note that it is not in CodeIgniter-3.1.10/application/ directory.

   cat CodeIgniter-3.1.10/.htaccess

     < IfModule mod_rewrite.c >
       RewriteEngine on
       RewriteCond %{REQUEST_FILENAME} !-d
       RewriteCond %{REQUEST_FILENAME} !-f
       RewriteRule ^(.*)$ /index.php?/$1 [QSA,PT,L]
     </ IfModule >

   For Nginx, you need to modify the corresponding configuration of nginx.

Role permission description

1. Here, permissions are abstracted into three types of permissions (can be expanded to more), menu permissions (including control buttons), role permissions (roles that users can assign), department data permissions (department data that users can view), and reference roles. Permission group + resource allocation
2. When the front-end adds menus, roles, and departments, the back-end generates the corresponding permissions and writes them into sys_perm table. The super administrator role of the system automatically has all permissions (can also be designed according to specific business needs)
3. User->Role->Permissions
4. Data permissions: In actual development, it is necessary to set which departments the user can only view data. This situation is generally called data permissions. Data permissions need to be added to the corresponding business type table by adding department data fields to limit SQL conditions. Set the roles that require data permissions in (System Management - Role Management), and add the role authorization scope of all data permissions/department data permissions/departments and below. Data permissions/Only personal data permissions/Customized data permissions The business code logic can be processed first according to the authorization scope to determine the department data permissions owned by the role. There are no restrictions on SQL statements for all data permissions. Department data and the following data permissions, as well as personal data, need to limit the SQL statement. To customize the data permissions, you can add customized department restrictions to the SQL statement.

Database table description

Tables_in_vueadminv2	illustrate
keys	PHP CI RESTful apikey can be turned on and off in config.php
logs	PHP CI RESTful log table can be turned on and off in config.php
sys_dept	System department table
sys_menu	System menu table
sys_perm	System permission table
sys_perm_type	Permission type (not used yet)
sys_role	System role table
sys_role_perm	Role permission relationship table
sys_user	System user table
sys_user_dept	Table of departments to which users belong (can be one-to-many)
sys_user_role	User role correspondence
sys_user_token	Using JWT token this table is useless
upload_tbl	Business test form

Development environment/editor

• phpstudy_pro php 7.3.4nts + Apache 2.4.39
• vue.js
• vscode

Front-end directory tree

Multi-level menu configuration

jwt seamlessly refreshes test configuration

CodeIgniter-3.1.10applicationconfigconfig.php // access_token/refresh_token expiration time configuration

 $config['jwt_access_token_exp'] = 15; // 单位秒
$config['jwt_refresh_token_exp'] = 180; // 单位秒

jwt seamless refresh effect

github three-party authentication demo.gif

screenshot