JAVA：快速搭建管理后台脚手架的技术指南-拾荒的小海螺

1、简述

在当今的互联网时代，管理后台已经成为企业应用中不可或缺的一部分。无论是数据管理、用户管理还是业务流程的控制，一个功能强大的管理后台都能极大地提升工作效率。本文将介绍如何使用人人开源 (renren.io) 快速搭建一个管理后台。

人人开源官网：https://www.renren.io/

2、环境准备

在开始搭建管理后台之前，我们需要准备好开发环境。以下是所需的基本环境：

JDK 1.8+
Maven 3.5+
MySQL 8.02
Node.js 16.8.0 和 npm
IDE：IntelliJ IDEA

3、项目搭建

人人开源 (Renren.io) 是一个基于Spring Boot、Spring Cloud的快速开发平台，旨在帮助开发者快速构建企业级应用。其主要特点包括模块化设计、前后端分离、高度可定制性以及完善的文档支持。

3.1 后端

renren-fast是一个轻量级的Spring Boot2.1快速开发平台，其设计目标是开发迅速、学习简单、轻量级、易扩展；使用Spring Boot、Shiro、MyBatis、Redis、Bootstrap、Vue2.x等框架，包含：管理员列表、角色管理、菜单管理、定时任务、参数管理、代码生成器、日志管理、云存储、API模块(APP接口开发利器)、前后端分离等。

下载代码
首先，从人人开源的码云仓库下载源码：

git clone https://gitee.com/renrenio/renren-fast.git

导入项目
使用IDE（例如IntelliJ IDEA）将下载的源码导入，选择Maven项目以便自动下载依赖。
配置数据库
在renren-fast项目中，找到application-dev.yml文件，根据自己的数据库配置修改相应内容：

spring:
    datasource:
        type: com.alibaba.druid.pool.DruidDataSource
        druid:
            driver-class-name: com.mysql.cj.jdbc.Driver
            url: jdbc:mysql://192.55.245.181:3306/shop_admin?useUnicode=true&characterEncoding=UTF-8&serverTimezone=Asia/Shanghai
            username: root
            password: 123456
            initial-size: 10
            max-active: 100
            min-idle: 10
            max-wait: 60000
            pool-prepared-statements: true
            max-pool-prepared-statement-per-connection-size: 20
            time-between-eviction-runs-millis: 60000
            min-evictable-idle-time-millis: 300000
            #Oracle需要打开注释
            #validation-query: SELECT 1 FROM DUAL
            test-while-idle: true
            test-on-borrow: false
            test-on-return: false
            stat-view-servlet:
                enabled: true
                url-pattern: /druid/*

同时，导入项目db目录下的mysql.sql数据库脚本到MySQL中。

启动后端服务
在IDE中找到RenrenApplication类，右键运行该类，即可启动后端服务。

3.2 前端

renren-fast-vue基于vue、element-ui构建开发，实现renren-fast后台管理前端功能，提供一套更优的前端解决方案。

首先，从人人开源的码云仓库下载源码：

git clone https://gitee.com/renrenio/renren-fast-vue.git

进入前端目录，并安装依赖：

cd renren-fast-vue
npm install

因当前node版本是16+，所以调整了一份自己的package.json依赖：

{
  "name": "renren-fast-vue",
  "version": "1.2.2",
  "description": "renren-fast-vue基于vue、element-ui构建开发，实现renren-fast后台管理前端功能，提供一套更优的前端解决方案。",
  "author": "daxiong.yang <daxiong.yang@qq.com>",
  "private": true,
  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "unit": "jest --config test/unit/jest.conf.js --coverage",
    "e2e": "node test/e2e/runner.js",
    "test": "npm run unit && npm run e2e",
    "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs",
    "build": "gulp"
  },
  "dependencies": {
    "axios": "0.17.1",
    "babel-plugin-component": "0.10.1",
    "babel-polyfill": "6.26.0",
    "element-ui": "2.8.2",
    "gulp": "4.0.2",
    "gulp-concat": "2.6.1",
    "gulp-load-plugins": "2.0.5",
    "gulp-replace": "1.0.0",
    "gulp-shell": "0.8.0",
    "lodash": "4.17.5",
    "node-sass": "^6.0.1",
    "npm": "^6.9.0",
    "sass-loader": "^10.0.1",
    "svg-sprite-loader": "3.7.3",
    "vue": "2.5.16",
    "vue-cookie": "1.1.4",
    "vue-router": "3.0.1",
    "vuex": "3.0.1"
  },
  "devDependencies": {
    "autoprefixer": "7.1.2",
    "babel-core": "6.22.1",
    "babel-eslint": "7.1.1",
    "babel-jest": "21.0.2",
    "babel-loader": "7.1.1",
    "babel-plugin-dynamic-import-node": "1.2.0",
    "babel-plugin-transform-es2015-modules-commonjs": "6.26.0",
    "babel-plugin-transform-runtime": "6.22.0",
    "babel-preset-env": "1.3.2",
    "babel-preset-stage-2": "6.22.0",
    "babel-register": "6.22.0",
    "chalk": "2.3.0",
    "chromedriver": "2.27.2",
    "copy-webpack-plugin": "4.0.1",
    "cross-spawn": "5.0.1",
    "css-loader": "0.28.0",
    "eslint": "3.19.0",
    "eslint-config-standard": "10.2.1",
    "eslint-friendly-formatter": "3.0.0",
    "eslint-loader": "2.2.1",
    "eslint-plugin-html": "3.0.0",
    "eslint-plugin-import": "2.7.0",
    "eslint-plugin-node": "5.2.0",
    "eslint-plugin-promise": "3.5.0",
    "eslint-plugin-standard": "3.0.1",
    "eventsource-polyfill": "0.9.6",
    "extract-text-webpack-plugin": "3.0.0",
    "file-loader": "4.3.0",
    "friendly-errors-webpack-plugin": "1.6.1",
    "html-webpack-plugin": "2.30.1",
    "jest": "21.2.0",
    "jest-serializer-vue": "0.3.0",
    "nightwatch": "0.9.12",
    "node-notifier": "5.1.2",
    "optimize-css-assets-webpack-plugin": "3.2.0",
    "ora": "1.2.0",
    "portfinder": "1.0.13",
    "postcss-import": "11.0.0",
    "postcss-loader": "2.0.8",
    "rimraf": "2.6.0",
    "selenium-server": "3.0.1",
    "semver": "5.3.0",
    "shelljs": "0.7.6",
    "uglifyjs-webpack-plugin": "1.1.1",
    "url-loader": "0.5.8",
    "vue-jest": "1.0.2",
    "vue-loader": "14.2.0",
    "vue-style-loader": "3.0.1",
    "vue-template-compiler": "2.5.16",
    "webpack": "4.36.0",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0",
    "webpack-bundle-analyzer": "2.9.0",
    "webpack-dev-server": "3.11.0",
    "html-webpack-plugin": "4.5.2",
    "webpack-merge": "4.1.0"
  },
  "engines": {
    "node": ">= 8.11.1",
    "npm": ">= 5.6.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

修改前端配置文件static/config/index.js，设置后端API地址：

/**
 * 开发环境
 */
;(function () {
  window.SITE_CONFIG = {};

  // api接口请求地址
  window.SITE_CONFIG['baseUrl'] = 'http://localhost:8082/renren-fast';

  // cdn地址 = 域名 + 版本号
  window.SITE_CONFIG['domain']  = './'; // 域名
  window.SITE_CONFIG['version'] = '';   // 版本号(年月日时分)
  window.SITE_CONFIG['cdnUrl']  = window.SITE_CONFIG.domain + window.SITE_CONFIG.version;
})();

运行前端服务：

npm run dev

至此，前后端服务都已启动，可以在浏览器中访问 http://localhost:8083 查看管理后台界面。

默认密码：admin/admin

4、功能介绍

人人开源的管理后台提供了以下主要功能模块：

用户管理：包括用户的增删改查、角色分配等。
角色管理：管理角色及其权限配置。
菜单管理：配置系统菜单及权限控制。
字典管理：维护系统中用到的各种数据字典。
定时任务：配置和管理系统定时任务。
每个模块都预置了常用功能，并提供了丰富的配置选项，方便开发者根据需求进行定制。

5、二次开发

在实际项目中，我们可能需要对人人开源的管理后台进行二次开发。以下是一些常见的开发需求及实现方法：

添加新功能模块
在renren-fast项目中，按照已有模块的结构新建Controller、Service、Dao等组件，并在application-dev.yml中配置相应的Mapper扫描路径。
前端页面开发
前端页面使用Vue.js框架开发，建议先熟悉Vue的基础知识。可以在src/views目录下添加新的页面，并在src/router/index.js中配置相应的路由。
权限控制
人人开源使用基于注解的权限控制，通过在Controller方法上添加@RequiresPermissions注解，可以实现对接口的权限管理。

6、总结

通过上述步骤，我们可以快速搭建一个功能齐全的管理后台。人人开源提供了丰富的功能模块和良好的扩展性，适合中小型企业快速开发和部署。希望本文能对大家有所帮助，快速上手人人开源，打造高效的管理后台。

代码地址：https://gitee.com/lhdxhl/administration.git

目录CONTENT

JAVA：快速搭建管理后台脚手架的技术指南