在做大型业务时候,很多时候为快速完成项目的后期高并发和高可用等场景,需要快速搭建项目,后台管理就是其中一项,本章就是教大家利用码云上的人人开源如何搭建一个前后端分类的后台管理系统。具体的步骤如下。

1、搜索和了解人人开源

       https://gitee.com/renrenio

       到码云上搜索人人开源,会看到有

  • renren-fast
  • ​renren-fast-vue
  • ​renren-fast-adminlte
  • renren-security 
  • renren-ui
  • renren-generator

      其中 renren-fast 和 renren-fast-vue就是后台管理系统的后端和前端代码,二者组合是后台管理系统。而​renren-fast-adminlte则是完全用html写的前端

      其中 renren-security 也是后台管理系统,只是它不是前端和后端分离的。

      其中 renren-generator 是用来根据mysql数据库表逆向生成相应代码。使用过程见mysql逆向工程搭建。

2、搭建 后台管理系统 的后端运行环境

2.1 下载renren-fast

        从码云上 clone  renren-fast 代码 或者下载压缩包

2.2 添加到项目中(或idea单独打开项目),并创建库和表

       使用 renren-fast 中 db目录下的 mysql.sql创建库和表

       创建数据库 xxxmall-admin

       创建表(sql见mysql.sql)

 2.3 修改配置文件

        主要修改renren-fast 中 src下面的配置文件中数据库及用户名和密码

2.4 运行主启动类,进行测试

       运行主启动类的时候可能会报错,因为该项目Modules中的Language level为1.5,版本较低,不支持diamond运算符(<>)。项目中有使用过Java 8中新特性Lambda表达式,idea系统默认的是使用1.5,因此语法不支持。因此需要做以下修改。    

  • 先修改idea设置的java编译版本,默认是1.5

  •  修改项目使用的java版本及语言水平

  •  修改项目结构中 Module 的 Language Level 为 8

         至此步骤位置,后台管理系统的后端代码已经运行起来了。访问的接口是:http://localhost:8080/renren-fast/

3、搭建 后台管理系统 的前端运行环境

3.1 下载renren-fast-vue

        从码云上 clone  renren-fast-vue 代码 或者下载压缩包

 3.2 添加到项目中 

        本文使用的工具是Visual Studio Code , Vue开发的环境是基于 nodejs,关于 Visual Studio Code 和 nodejs 的搭建和安装见:

        Visual Studio Code https://blog.csdn.net/qq_41946216/article/details/126681770?spm=1001.2014.3001.5502

       nodejs安装:

        https://blog.csdn.net/qq_41946216/article/details/126682503?spm=1001.2014.3001.5502

       使用 Visual Studio Code 打开项目

 3.3 打开控制台

3.4 下载依赖

      在控制台执行 npm install 命令,这个命令会根据 package.json 下载前端 所需要的依赖。下载的所有依赖信息都在 nodejs 根目录下的 node_modules 里面。

3.5 运行项目

      下载完依赖之后,运行项目,使用命令 npm run dev

3.6 访问前端网址

4、前后端联调

       先运行后端程序,再运行前端程序,则可以进行联调。

       默认用户名 admin 

       默认密码 admin

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐