spring rest admin

Spring-Rest-Admin

Brief introduction

This project is a front-end project based on the management desk built by Vue, Elementui, which is used with Spring-Rest Backend. The frame code comes from Vue-Element-Admin. A little change has been made on it. Mainly optimize the authority management function. Click here to enter the online demonstration .

optimization

• The menu permissions are automatically generated according to the routing configuration, and the administrator is synchronized to the background database;

• You can add, modify, and delete button permissions under the permissions of the synchronous menu;

• In addition to the button permissions, the metadata of the menu permissions and interface permissions are automatically generated by the front and back -end. Even if the database records are all empty, they only need to synchronize it once again without manual inserting the table record;

• When adding the button permissions, the prefix is ​​automatically generated, only the necessary parts to prevent the format from chaotic;

• Increase the function of the maternal permissions and button permissions associated interface permissions.

• When identifying the page elements, use the enumeration constant to avoid direct use of the right -limited string for easy maintenance;

• Define the level of the API interface calling class, which is consistent with the level of the background interface category, eliminates redundancy, and improves code reuse;

• When repairing component el-scrollbar 's bug: When the browser is reduced to a certain degree, the original hidden original rolling bar will be exposed. The larger the reduction ratio, the more obvious the phenomenon;

Development environment preparation

Node.js environment preparation

Node.js version is recommended to use V112, and other versions seem to be fine.

Under Linux and Macos, it is recommended to use NVM for node.js version management. NVM does not support Windows, but you can use an alternative NVM-Windows.

Take NVM-Windows as an example (git bash) under Windows: run)::

 # 设置 nvm 下载 node 和 npm 的镜像地址（直接访问外网太慢）
$ nvm node_mirror https://npm.taobao.org/mirrors/node/
$ nvm npm_mirror https://npm.taobao.org/mirrors/npm/

# 设置 npm 下载包的镜像地址
$ npm config set registry https://registry.npm.taobao.org

# 查看可用的 Node.js版本
$ nvm list available

# 挑选一个最新的 v12 的 LTS 版本进行安装
$ nvm install 12.20.1
$ nvm use 12.20.1

# 查看已经安装的所有 Node.js 版本
$ nvm list
# 切换希望使用的版本
$ nvm use < nodeVersion >

# 查看当前的 Node.js 版本 和 npm 版本
$ node -v
$ npm -v

Project detection and operation

Note: Before running the front end of the management platform, it is best to run the background of the service end first.

$ git clone https://github.com/bianyun1981/spring-rest-admin.git
$ cd spring-rest-admin
$ npm install

Note: If there is an error when executing the npm install command, and the error information is npm ERR! Failed at the [email protected] install script. Then you can execute the following command and then execute npm install :

$ npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver

If there are other faults in the NPM Install stage, it may be because some packages cannot be downloaded from Taobao mirror station, and you need to directly access some unable to access external network address downloads, but if the download is unsuccessful, you can try to add an agent configuration After re -test.

$ npm config set proxy http://username:password@host:port
$ npm config set https-proxy http://username:password@host:port

If npm install is successfully executed, there is no error, and you can continue to run

$ npm run serve

After a moment, the browser will be opened automatically and jump to the address http://localhost:9527/login . Select a built -in user to log in directly.

Note: The background of the server must be started before logging in.

Environmental configuration file

Vue-Element-Admin supports multi-environment configuration, and the environmental configuration file name format is .local .env.[环境名] It will not be uploaded to the version library by git , and it will only be kept locally.

Note: In addition to the development environment configuration .env.development and .env.development.local , other environmental configuration files need to set NODE_ENV = production . The environment name ENV corresponds to the part of the .env in the environmental configuration file name .env and .local in the environment. In addition, the interface call address prefix VUE_APP_BASE_API must also be remembered to modify.

Note: If you want to define other environmental variables in the configuration file, you need to start with VUE_APP_ , and obtain it in the code through process.env.VUE_APP_xxxx in the code.

Packet deployment

Note: Before packing, please confirm that both npm install and npm run serve can be implemented normally.

The packing command is: npm run build -- --mode <环境名> , the above figure is an example, the packing command is:

$ npm run build -- --mode vm-centos7

After the command is successfully executed, the package result file is in the DIST directory.

Note: Code compression plug-in compression-webpack-plugin can only use the previous version V6, and the latest V7 version cannot be used, otherwise it seems to report an error.

In addition, the routing mode of this project is configured as the History mode. If you want to run in this mode, you need Nginx to do the corresponding configuration (see the routing of history.pushState in detail). At the same time, add GZIP -related configuration (only this line of configuration can be required):

 location / {
  gzip_static on ;
  try_files $uri $uri / /index.html;
}