I'll set up the layout and leave the rest to you (nanjuxing concise background management system) Vue + Element background management system

💫💫💫 Nanjuxing background management (concise version)

SpringBoot multi module + Vue concise background management system

preface

Why do you want to do this project? Because I mainly do java, I have been developing back-end interfaces in the process of learning to do projects 🖌， Boring back-end development made me decide to develop the interface myself 🧐.

vue end learning has been going well 🤗， Until I decided to build the backstage myself.. I found that the layout of the page end, the layout of the side menu and the design of the top history menu made me cry 😭， I started turning to open source projects

Looking at the preview of the open source project, it's really great. I want to use it!!! 👍 But what the hell is npm install Error 👀？？ After thousands of hardships, I finally pulled down my dependence!! 😄 But this code is a lot! So many js! It's so serious! Do not understand 🤔!!! Finally, you choose to find a concise background management interface! 🥺

Yes, what I want to say is that I am the concise background management interface you are looking for 😎. We built the sidebar, breadcrumbs, and the top history menu. All the remaining interfaces are designed by you 🤠， To complete your own work.

If my project can help you, please light up a small star 🌟🌟

directory structure

Project address: GItee: https://gitee.com/duan_nan/nanjustar-template
🌟🌟🌟 Nanjusatr admin is our front-end project. 🌟🌟🌟

⭐ ️ ⭐ ️ ⭐ nanjustar is our back-end project. ⭐ ️ ⭐ ️ ⭐ ️

🌈🌈🌈 nanjustar.sql is the database file we need to use. The database needs to use MySql 8 or above. 🌈🌈🌈

☀️☀️☀️ After we directly pull the project to the local, we only need to make a simple configuration to start it. ☀️☀️☀️

Database:

Create a new database in the local nanjustar(You can also change the name according to your own needs, and then run nanjustar.sql File.

Backend configuration:

1. Database configuration
  We entered nanjustar-mapper Module, find application-mapper.yml Configuration file for configuration modification,modify the database url To the database location, modify username and password. 
  
2. Redis to configure
  We entered nanjustar-business Module, find application-bussiness.yml	Modify the configuration file reids To the host name, modify it to yourself redis Yes.

Front end configuration:

Front end projects only need to be executed npm install or cnpm install that will do

✨✨✨ After the front and rear end projects are started, we have two users, nanjustar/123456 (super administrator) and admin/123456 (administrator). The super administrator has the permission to manage the directory, but the administrator does not, so their front-end sidebar menus are different. ✨✨✨

Back end project structure:

├──nanjusatr	    --  --   -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --  nanjustar Parent project
		├── nanjustar-api     	  --  -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --  nanjustar-api modular
    		├── src
						├── java
									├── moudle
												├── security  						    -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --  Authority module
																├── api  							-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --  Service interface
																├── dto 			    -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --  dto Data return class
																├── model					  		-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --  Entity class
																├── vo  					-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --  vo Parameter receiving class
						├── resource
									├── application-api.yml        -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --  api Module profile
				├── pom.xml
		├── nanjustar-business          --  -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --  nanjustar Business module
    			├── src
							├── java
									├── business              -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --  Business implementation class
									├── config								-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --  Configuration class
									├── filter								-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --  Filter package
									├── handler								-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --  Processor package
									├── util 									-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --  tool kit
							├── resource
											├── application-business.yml  -- -- -- -- -- -- -- -- -- -- -- -- --  business Module profile
						├── pom.xml      -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- nanjustar Business module  Pom file
		├── nanjustar-common     -- -- --  -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --  nanjustar Common module
						├── src
								├── java
											├── annotation				 -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --  Annotation package
											├── aop                -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --  Cut bread
											├── config             -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --  Configuration package
											├── constant            -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- Constant package
											├── core	             -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --  Basic package
											├── enums							 -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --  Enumeration package
											├── exception			-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --  Custom exception package
											├── result				-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --  Unified result set package
											├── utils							 -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --  tool kit
								├── resource		
												├── application-common.yml
						├── pom.xm   -- --  -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --  nanjustar Common module Pom file
		├── nanjustar-mapper     -- -- --  -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --  nanjustar Data module
						├── src
								├── java
    									├── config	                    -- -- -- -- -- -- -- -- -- -- -- -- -- -- --   Database configuration
    									├── handler		               -- -- -- -- -- -- -- -- -- -- -- -- -- -- --   handler processor
    									├── mapper		                -- -- -- -- -- -- -- -- -- -- -- -- -- -- --   *.Mapper Interface
								├── resource	
												├── mapper          -- -- -- -- -- -- -- -- -- -- -- -- -- -- --  mapper.xml Storage location
       		 							├── application-mapper.yml     	  - -- -- -- -- -- -- -- --  nanjustar Data module profile
       		 ├── pom.xml -- --  -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --  nanjustar Data module  Pom file
		├── nanjustar-web     -- -- --  -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --  nanjustar-wen modular
				├── src
						├── java
									├── controller         -- -- -- -- -- -- -- -- -- -- -- -- -- -- --  nanjustar controller
									├── NanjustarApplication.java           -- -- -- -- -- -- -- -- -- -- --  nanjustar Main startup class
						├── resource
									├── application.yml     -- -- -- -- -- -- -- -- -- -- -- -- -- -- --  nanjustar-web configuration file
									├── application-dev.yml -- -- -- -- -- -- -- -- -- -- -- -- -- -- --  nanjustar-web configuration file
				├── pom.xml    -- -- --  -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --  nanjustar-web  Pom file
				
├── pom.xml	    -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --  nanjustar Parent project Pom file

Front end project structure:

nanjustar-admin
			├── public   
						├── js              -- -- -- -- -- -- js folder
								├── lottie.js   -- -- -- -- -- --  animation js
						├── favicon.ico     -- -- -- -- -- -- Logo Icon
						├── index.html      -- -- -- -- -- -- index.html  
			├── src
					 ├── api							-- -- -- -- -- -- api Interface directory
					 ├── assets						-- -- -- -- -- -- Static resource directory
					 ├── component				-- -- -- -- -- -- Component directory 
					 ├── layout						-- -- -- -- -- -- Layout directory
					 ├── router						-- -- -- -- -- -- Routing directory
					 ├── store						-- -- -- -- -- -- Cache directory  
					 ├── utils						-- -- -- -- -- -- Tool catalog
					 ├── views						-- -- -- -- -- -- Interface directory
					 ├── App.vue					-- -- -- -- -- -- App.vue
					 ├── main.js					-- -- -- -- -- -- main.js
		  ├── babel.config.js
		  ├── package.json				  -- -- -- -- -- -- package.json  
		  ├── package-locak.json
		  ├── vue.config.js					-- -- -- -- -- -- vue.config.js

Project characteristics

For back-end development, refer to "ruoyi open source project" and "Fengyu personal blog" for development.
The background uses "element admin" design, sidebar, history label, automatic generation of bread crumbs, etc.
The foreground menu route is obtained and rendered according to the permission level of the login user through database query, so as to realize the permission level.
lottie animation is used in the login interface, which greatly improves the beauty of the project.
The background interface only develops the welcome interface, leaving enough space for users to carry out secondary development.
The front-end code level is simple without serious encapsulation, which is convenient for later developers to read and expand development.
The code follows Alibaba's development specifications, the code is neat and convenient for secondary development.