muteki

Muteki

• Brief introduction
  • Vue3.0 a back -end management template based on SpringBoot and Vue, which can be quickly developed to the front end to provide interfaces (RESTFULL API)
  • Code through 90% Alibaba Code Code Scanning and FindBugs
  • Web supports multi -terminal login, which can perform separate maintenance of the terminal
  • User management, role management, department management, authority management, menu management, log management, etc.
  • There are VUE3 ANT-DESIGN-VUE version and Vue2 Element version
  • The project is completely open source MIT
  • Shine! It's like a meteor

Development documentation

• The document is continuously updated. Essence Essence

Original project address

Bend

The following guidelines will help you install and run the project on local machines for development and testing. For how to deploy the project to the online environment, please refer to the deployment section.

Installation requirements, steps

• Install the Java environment, JDK1.8
• Install mysql 8 and create a database ( UTF8MB4 , UTF8MB4_General_CI ) to import SQL (DOC directory)
• Install Redis , download and install
• Development tool requires installation of LOMBOK plug -in (development tool recommendation IDEA)
• --- The back-end operation (if there is a problem, the configuration of the data source in the YML configuration file is wrong)
• Installation and configuration node environment
• Install Vue-CLI , enter the Vue directory to execute npm install
• --- Run npm run serve ( webstorm or IDEA can directly click on the Package.json file No. 6 Left Green Triangle on the left)

Demonstration address

• Online demonstration address
  Ant-Design-Vue version, Vue3.0, Ant-Design-Vue2.0.0
  Element version, vue2.5

  account	password
  superadmin	111111
  admin	111111
  admin1	111111

  • TIP: multiple users may be affected at the same time, and the SuperAdmin super administrator can see all pages
  • TIP: Demonstration environment has prohibited partially added and modified operations
  • Tip: If there are other abnormalities, please refresh the page (maybe it is a cache problem), if not, please mention it

• Interface document

  • Swagger-Bootstrap
  • TIPS: Please add/muteki manually in front of the request; the request will prompt the timestamp error, please bring __t = the current time stamp

deploy

• Run the mvn clean package command to pack it in the springBoot directory.
  • Config directory is the configuration file stored
  • lib directory is Maven dependent jar package
  • Static directory stores static files
  • JAR files are generated by JAR Packs (if POM dependence in the future, you can only replace the jar package)
• Run the npm run build command to pack it in the Vue directory.
  • Packaged configuration in .env files and vue.config.js files
• The deployment server needs to be configured with JDK1.8 , MySQL 8 , Redis environment
• JAR Pack runs nohup java -jar springboot.jar & can run in the background and output the log in the current directory
• The deployment server is recommended to configure nginx . After Vue is packaged, put it under nginx. If it is not configured, it can be placed under the same directory static of the jar package.

Common error

• java.lang.RuntimeException: Cannot resolve classpath entry: E:maven-repositorymysqlmysql-connector-java8.0.15mysql-connector-java-8.0.15.jar
  • Error: According to the database, the physical class is generated
  • Solution: Resources/Config/Generator-Config.xml No. 6 Ring JAR Packing Trail to its own jar bag path

rear end:

SpringBoot, MyBatis, Redis

1. Brief introduction
   • Project based on SpringBoot template
2. Basic configuration
   • .yml files can configure related information
   • In the config directory, it is a common module configuration
   • Filter is equipped with cross -domain , parameter filtering , etc.
     • The parameter filter request automatically removes the front and rear spaces , and the JSOUP filtering HTML tag (can customize the configuration filter level)
3. Authority management
   • With the interface with @AuthToken annotation, the request header must have token to access
   • With the Vue front -end page dynamic rendering routing, and the hidden display button: the button is saved in this.$globalFun.getSessionStorage('buttonMap') (front end)
   • To accurate the interface level permissions, the corresponding API corresponding to the corresponding menu or button in the function management must be improved, otherwise there will
4. Use CURD to pack the packaging factory, inherit BaseService
   • baseInsert() and baseUpdate() will automatically filter the field with null
5. Automatically generate the physical class according to the database
   • Run Org.myBatis.gienerator.plugin.mybat itestst.main () method
   • Specific configuration Resources/Config/Generator-config.xml
6. The log is stored by the sky, and the specific configuration is in Resources/Config/LogBack-Spring.xml
7. Automatically generate a database document according to the database
   • Run organcrew.screwtest.testscrew () method

front end:

vue:

1. Brief introduction

   • Projects created based on Vue CLI
   • Interface UI: Element-UI
   • Network request: axios
     • Global call method this.$axios({ url: '', data: {}, success(data) {} });
       • URL: The address after the domain name is required
       • Success: You only need to handle the code to 200
   • Global variables and methods are in the/src/utils directory
   • Element-UI style in /Src/asSETS/Sass/element-dariables.scss file
   • Most of the projects have annotations

2. Basic configuration

   • With the back end to achieve dynamic routing: Filling the PATH path of the function management form, the default root path is /SRC/views/main/**/*/index.vue/
   • .env.prDuction/Development file and vue.config.js were configured files

3. Common components of packaging

   • dialog: pop -up box
     • Detail: Title+content display data
     • FORM: Form submission, @submit only needs to process the situation after the form verification
     • index: ordinary pop -up box
   • table: table
     • The return example accepted by the table: {"list":[],"pageNum":1,"pageSize":10}
     • Table data request tableDataRequest: { url: '', data: {} }
       • url: request address
       • DATA: Extra parameters, with the top search and use
     • Table display tableColumns: [ {prop: 'username', label: '用户名',formatter(){ return ''; }} ]
       • Formatter: Complex display, you can return a DOM

Gratitude

First of all, thanks to excellent open source projects such as Springboot , Vue , Element-UI, etc. Second, the project refers to many online examples. If you see similar code, then there is only one answer.