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

不要太安逸了 2022-08-28 16:08:22

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