当前位置:首页 » 《随便一记》 » 正文

楠橘星简洁版后台管理系统 Vue + Element 后台管理系统_nanshen__的博客

21 人参与  2022年06月02日 13:42  分类 : 《随便一记》  评论

点击全文阅读


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

项目特点

  • 后端开发参考“若依开源项目”,“风宇个人博客”进行开发。
  • 后台使用"element-admin"设计,侧边栏,历史标签,面包屑自动生成等。
  • 前台菜单路由通过数据库查询,根据登陆用户的权限等级进行获取渲染,实现权限分级。
  • 登陆界面采用 lottie 动画,极大的提升了项目的美观度。
  • 后台界面仅开发欢迎界面,给使用者留下足够空间,便于进行二次开发。
  • 前端代码层次简单,没有进行严重封装,便于后段开发者阅读扩展开发。
  • 代码遵循阿里巴巴开发规范,代码整洁,便于进行二次开发。

运行环境

开发工具说明
IDEAJava开发工具IDE
WebStormVue开发工具IDE
NavicatMySQL远程连接工具
MedisRedis远程连接工具
开发环境版本
JDK1.8
MySQL8.0.25
spring-Redis2.5.5
Vue2.6.11
Vex3.4.0

项目截图


点击全文阅读


本文链接:http://m.zhangshiyu.com/post/41212.html

项目  模块  配置  
<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

关于我们 | 我要投稿 | 免责申明

Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1