楠橘星简洁版后台管理系统 Vue + Element 后台管理系统

Posted 2021-12-15 楠橘星

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了楠橘星简洁版后台管理系统 Vue + Element 后台管理系统相关的知识，希望对你有一定的参考价值。

nanjustar 后台管理专栏

(一)nanjustar 楠橘星后台管理系统（简洁版）使用导航

💫💫💫楠橘星后台管理（简洁版）

SpringBoot 多模块 + Vue 的简洁版后台管理系统

前言

为什么要做这个项目呢？因为我主要是做java的，平时学习做项目过程中一直在开发后端接口🖌，枯燥的后端开发让我决定自己开发界面🧐。

vue 的学习一直顺风顺水🤗，直到我决定要自己去搭建后台。。我发现页面端布局、侧边菜单的布置、顶部历史菜单的设计让我抱头痛哭😭，我开始转向了开源项目…

看着开源项目的预览，真的棒，我要用！！！👍 但是问题页随之而来 npm install Error是什么鬼👀？？经历了千辛万苦终于把依赖拉下来了！！😄 但是这这代码好多啊！这么多js！封装这么严重！看不懂啊🤔！！！最终你选择去寻找简洁版的后台管理界面！🥺

是的，我想说的就是我就是你要找的简洁版后台管理界面😎。我们以及搭建好了侧边栏、面包屑、以及顶部历史菜单。剩下了所有的界面都由你来设计🤠，来完成你自己的作品。

如果我的项目可以帮到你，请点亮一个小小的star 🌟🌟

目录结构

项目地址：GItee: https://gitee.com/duan_nan/nanjustar-template
🌟🌟🌟nanjusatr-admin是我们的前端项目。🌟🌟🌟

⭐️⭐️⭐️nanjustar是我们的后端项目。⭐️⭐️⭐️

🌈🌈🌈nanjustar.sql 是我们需要使用到的数据库文件，数据库需要使用mysql 8以上的版本。🌈🌈🌈

☀️☀️☀️我们将项目直接拉取到本地之后，只需要进行简单的配置即可启动使用。☀️☀️☀️

数据库：

在本地中新建数据库 nanjustar（也可以根据自身需求进行更改名称），之后运行nanjustar.sql文件。

后端配置：

1. 数据库配置
  我们进入到 nanjustar-mapper 模块中，找到 application-mapper.yml 配置文件进行配置修改,修改数据库url至自己到数据库位置，修改username和password。
  
2. Redis配置
  我们进入到 nanjustar-business 模块中，找到 application-bussiness.yml	配置文件进行配置修改，修改reids 到主机名称，修改至自己redis的即可。

前端配置：

前端项目只需要执行 npm install 或 cnpm install 即可

✨✨✨前后端项目启动之后，我们有两个用户 nanjustar/123456（超级管理员） 和 admin/123456 （管理员），超级管理员拥有权限管理目录的权限，而管理员并不拥有，所以他们的前端侧边栏菜单是不一样的。✨✨✨

后端项目结构：

├──nanjusatr	    --  --   -- -- --  nanjustar父工程
		├── nanjustar-api     	  --  -- -- --  nanjustar-api模块
    		├── src
						├── java
									├── moudle
												├── security  	  -- --  权限模块
																├── api  -- ---- --  业务接口
																├── dto   -- -- --  dto数据返回类
																├── model		- ---  实体类
																├── vo  	- -- -- --  vo参数接收类
						├── resource
									├── application-api.yml  - -- -- --  api模块配置文件
				├── pom.xml
		├── nanjustar-business   -- -- -- -- --  nanjustar业务模块
    			├── src
							├── java
									├── business  -- -- -- --  业务实现类
									├── config	  - -- -- -- -- -- --  配置类
									├── filter		-- -- -- -- -- --  过滤器包
									├── handler	- -- -- -- -- -- --  处理器包
									├── util 	- -- -- -- --  工具包
							├── resource
											├── application-business.yml  --- --  business模块配置文件
						├── pom.xml    -- -- -- nanjustar业务模块  Pom文件
		├── nanjustar-common    -- -- -- --  nanjustar共用模块
						├── src
								├── java
											├── annotation	- -- -- --  注解包
											├── aop   -- -- --  切面包
											├── config   -- --  配置包
											├── constant   --- -- -- 常量包
											├── core	- -- --  基础包
											├── enums		- -- -- -- --  枚举包
											├── exception - -- -- -- --  自定义异常包
											├── result	--  统一结果集包
											├── utils		-- -- -- -- --  工具包
								├── resource		
												├── application-common.yml
						├── pom.xm   -- -- --  nanjustar共用模块 Pom文件
		├── nanjustar-mapper     -- --  nanjustar数据模块
						├── src
								├── java
    									├── config	-- -- -- -- -- -- --   数据库配置
    									├── handler	 -- -- -- -- -- --   handler处理器
    									├── mapper	- -- -- -- -- --   *.Mapper接口
								├── resource	
												├── mapper   -- -- -- -- --  mapper.xml 存放位置
       		 							├── application-mapper.yml   -- -- --  nanjustar数据模块 配置文件
       		 ├── pom.xml     -- -- -- -- --  nanjustar数据模块  Pom文件
		├── nanjustar-web    -- -- -- -- -- -- --  nanjustar-wen 模块
				├── src
						├── java
									├── controller    -- -- --  nanjustar controller
									├── NanjustarApplication.java     -- -- --  nanjustar主启动类
						├── resource
									├── application.yml   -- -- -- -- -- --  nanjustar-web 配置文件
									├── application-dev.yml  - -- -- -- -- --  nanjustar-web 配置文件
				├── pom.xml -- -- -- -- -- --  nanjustar-web  Pom文件
				
├── pom.xml	- -- -- -- -- -- -- -- --  nanjustar父工程Pom文件

前端项目结构：

nanjustar-admin
			├── public   
						├── js       - -- -- js文件夹
								├── lottie.js   -- --  动画js
						├── favicon.ico      -- -- Logo 图标
						├── index.html      - -- -- index.html  
			├── src
					 ├── api			-- -- api接口目录
					 ├── assets	 -- -- 静态资源目录
					 ├── component		- -- 组件目录 
					 ├── layout		-- -- 布局目录
					 ├── router		-- -- -- 路由目录
					 ├── store		- -- -- 缓存目录  
					 ├── utils		-- -- -- 工具目录
					 ├── views		 -- -- -- 界面目录
					 ├── App.vue		-- -- -- App.vue
					 ├── main.js		 -- -- -- main.js
		  ├── babel.config.js
		  ├── package.json	-- -- -- package.json  
		  ├── package-locak.json
		  ├── vue.config.js		 -- -- vue.config.js