old springboot vue

springboot2-vue3

A common background template based on springboot2 and vue3, with no redundant functions, only permission management and common functions . Front-end and back-end separation project, code passed 90% Alibaba coding convention scanning and findbugs

New version address

 * 本项目不再维护，请关注新版 

Getting Started Guide

The following guide will help you install and run the project on your local machine for development and testing. For information on how to deploy this project to an online environment, please refer to the deployment section.

Installation requirements and steps

• Install and configure Java environment, JDK1.8
• Install mysql 8 , create a database (utf8mb4) and import sql (in the doc directory)
• To install redis , just download and install it
• Development tools need to install the lombok plug-in (IDEA is recommended for development tools)
• --- Back-end operation (if there is a problem, it is usually an error in the configuration of the data source in the yml configuration file)
• Install and configure the node environment
• Install vue-cli3 , enter the vue directory and execute npm install
• ---Run npm run serve on the front end ( WebStorm or IDEA can directly click the green triangle on the left of line 6 in the package.json file)

Demo address

• Online demo address
  • Username:superadmin
  • Password:111111
  • Tip: Multiple users logging in at the same time may be kicked out.
  • Tip: The demo environment has prohibited addition, deletion and modification operations. Just ignore the error.
  • Tip: If there are other exceptions, please force refresh the page (it may be a cache problem)
• Interface documentation
  • swagger-bootstrap
  • Tips: The request will prompt 404, please manually add /github in front of the request

deploy

• Run the mvn clean package command in the springboot directory to package. After packaging, the generated file is in the /target/build directory.
  • The config directory stores configuration files.
  • The lib directory is the jar package that maven depends on.
  • static directory stores static files
  • The jar file is the generated jar package (if the pom dependency remains unchanged in the future, you can only replace the jar package)
• Run the npm run build command in the vue directory to package. After packaging, the generated file is in the /dist directory.
  • Packaging configuration is in the .env file and vue.config.js file
• The deployment server needs to configure JDK1.8 , mysql 8 , and redis environment
• The jar package runs nohup java -jar springboot.jar & can run in the background and output the log to the nohup.out file in the current directory.
• It is recommended to configure nginx for the deployment server. Vue is packaged and placed under nginx. If not configured, it can be placed under static in the same directory of the jar package.

Common mistakes

• java.lang.RuntimeException: Cannot resolve classpath entry: E:maven-repositorymysqlmysql-connector-java8.0.15mysql-connector-java-8.0.15.jar
  • Error: Generate entity class based on database
  • Solution: Change the jar package path in line 6 of resources/config/generator-config.xml to your own jar package path
• npm install
  • Error: vue installation dependency error, usually node-sass
  • Solution: Change the Taobao image or npm install --save node-sass --registry=https://registry.npm.taobao.org --disturl=https://npm.taobao.org/dist --sass-binary-site=http://npm.taobao.org/mirrors/node-sass
• /login ------请求失败-----error: Error: Cannot find module './q/Index'
  • Error: After creating a new menu in the background (the menu has no subordinates) and having permission to add the menu, this error occurs when logging in again.
  • Solution: Add the menu directory and Index.vue file to the /src/views/index/ path in the vue project

rear end:

springboot, mybatis, redis

1. Introduction
   • Project created based on springboot template
2. Basic configuration
   • The .yml file can configure relevant information
   • The config directory contains common module configurations.
   • The filter is configured with cross-domain , IP filtering , parameter filtering , etc.
     • Parameter filtering requests automatically remove leading and trailing spaces , using Jsoup to filter html tags (the filtering level can be customized)
3. Permission management
   • Interface with @AdminAuthToken annotation, the request header must have token to access
   • Cooperate with the vue front-end page to dynamically render routing and hide the display button: the button is saved in $store.state.role['buttons'] (front-end)
   • Accurate to the interface level permissions, the corresponding API corresponding to the menu or button in the function management must be improved, otherwise it will be allowed by default after the token exists.
4. The packaging factory uses CURD and just inherits BaseService.
   • baseInsert() and baseUpdate() will automatically filter fields with null values
   • Please filter the parameters baseUpdate() , or create a new entity class for assignment operation.
5. Automatically generate entity classes based on database
   • Run the org.mybatis.generator.plugin.MyBatisTest.main() method
   • Specific configuration resources/config/generator-config.xml
6. Logs are stored on a daily basis, and the specific configuration is in resources/config/logback-spring.xml
7. Automatically record the admin user log, @SystemLog annotation can be placed on the Controller

front end:

vue:

1. Introduction

   • Project created based on vue cli3
   • Interface UI: element-ui
   • Network request: axios
     • Global calling method this.$axios({ url: '', data: {}, success(data) {} });
       • url: only the address after the domain name is required
       • success: the callback only needs to handle the case where the code is 200
   • Global variables and methods are in the /src/utils directory
   • Override the element-ui style in the /src/assets/sass/element-variables.scss file
   • Introduce iconfont font library
     • Just overwrite the files in the /src/assets/font/iconfont directory
     • Quote <i class="iconfont iconfont-address"></i>
   • Most of the projects have comments

2. Basic configuration

   • Cooperate with the backend to implement dynamic routing: fill in the path in the function management form, the default root path is /src/views/index/
   • .env.production/development file and vue.config.js are configuration files

3. Commonly used components that are encapsulated ( for details, please refer to /src/views/index/system/sysUser/ for detailed comments )

   • dialog:pop-up box
     • detail: display data in the form of title + content
     • form: form submission, @submit only needs to handle the situation after form verification
     • index: ordinary pop-up box
   • table: table
     • Return example accepted by the form: {"list":[],"pageNum":1,"pageSize":10}
     • Table data request tableDataRequest: { url: '', data: {} }
       • url: request address
       • data: additional parameters, used with top search
     • Table display tableColumns: [ {prop: 'username', label: '用户名',formatter(){ return ''; }} ] accepts an array --- refer to the layui table
       • formatter: complex display, can return a dom

Acknowledgments

First of all, thanks to springboot , vue , element-ui and other excellent open source projects. Secondly, this project refers to many online examples. If you see similar code, then there is only one answer.