谷粒商城-全栈-07 快速开发-人人开源搭建后台管理系统

2020-08-10 13:56:53 ⋅ 17882 ⋅ 0 ⋅ 0

一、人人开源简介

人人开源是国内做的非常好的一个开源社区，里边开源了非常多的脚手架，能够帮助我们快速开发交付项目，官网：https://www.renren.io/

人人开源的项目都是托管在码云上，本商城项目使用前后端分离开发，我们需要用到三个开源模块： renren-fast(后端),renren-fast-vue(前端)，renren-generator(代码生成器)

file

二、renren-fast

renren-fast是一个轻量级的Spring Boot2.1快速开发平台，其设计目标是开发迅速、学习简单、轻量级、易扩展；使用Spring Boot、Shiro、MyBatis、Redis、Bootstrap、Vue2.x等框架，包含：管理员列表、角色管理、菜单管理、定时任务、参数管理、代码生成器、日志管理、云存储、API模块(APP接口开发利器)、前后端分离等。能快速开发项目并交付【接私活利器】 完善的 XSS 防范及脚本过滤，彻底杜绝 XSS 攻击，实现前后端分离，通过 token 进行数据交互。

克隆项目到本地

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

然后将克隆的 renren-fast 复制到我们的 gulimall 目录下，复制之前需要将renren-fast 项目里的 .git 删掉，这个.git是原来开源的版本控制，我们项目里已经git托管所以不再需要。

➜  renren-fast git:(master) ✗ rm -rf .git
➜  renren-fast git:(master) ✗ ls -al
total 88
drwxr-xr-x  10 kaiyiwang  staff    340 Aug 10 12:35 .
drwxr-xr-x  17 kaiyiwang  staff    578 Aug 10 12:31 ..
-rw-r--r--   1 kaiyiwang  staff    291 Aug 10 12:22 .gitignore
-rw-r--r--   1 kaiyiwang  staff    134 Aug 10 12:22 Dockerfile
-rw-r--r--   1 kaiyiwang  staff  10257 Aug 10 12:22 LICENSE
-rw-r--r--   1 kaiyiwang  staff   4452 Aug 10 12:22 README.md
drwxr-xr-x   6 kaiyiwang  staff    204 Aug 10 12:22 db
-rw-r--r--   1 kaiyiwang  staff    143 Aug 10 12:22 docker-compose.yml
-rw-r--r--   1 kaiyiwang  staff  10614 Aug 10 12:22 pom.xml
drwxr-xr-x   4 kaiyiwang  staff    136 Aug 10 12:22 src

关联项目

导入到gulimall后，将renren-fast加入到父模块的 pom.xml 的modules:

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>
  <groupId>com.atguigu.gulimall</groupId>
  <artifactId>gulimall</artifactId>
  <version>0.0.1-SNAPSHOT</version>
  <name>gulimall</name>
  <description>聚合服务</description>
  <packaging>pom</packaging>

  <modules>
    <module>gulimall-coupon</module>
    <module>gulimall-member</module>
    <module>gulimall-order</module>
    <module>gulimall-product</module>
    <module>gulimall-ware</module>
    <module>renren-fast</module>
  </modules>

</project>

创建数据库

创建数据库 gulimall_admin，数据库编码为UTF8mb4
执行db/mysql.sql文件，初始化数据

修改application文件

修改 application-dev.yml，更新MySQL账号和密码。注意application.yml默认激活的是dev开发环境，对应的是 application-dev.yml 文件的数据源，所以，需要到这个dev文件里边更改数据库配置：

application.yml

# Tomcat
server:
  tomcat:
    uri-encoding: UTF-8
    max-threads: 1000
    min-spare-threads: 30
  port: 8080
  connection-timeout: 5000ms
  servlet:
    context-path: /renren-fast

spring:
  # 环境 dev|test|prod(默认激活的是dev环境)
  profiles:
    active: dev
 .
 .
 .

application-dev.yml 

...
   driver-class-name: com.mysql.cj.jdbc.Driver
            url: jdbc:mysql://192.168.10.10:3306/gulimall_admin?useUnicode=true&characterEncoding=UTF-8&serverTimezone=Asia/Shanghai
            username: root
            password: root
...

然后启动renren-fast服务，访问该服务：
http://localhost:8080/renren-fast/

返回：

{
    "msg": "invalid token",
    "code": 401
}

可以看到，我们的renren后台脚手架已经安装成功，因为是前后端分离，所以，下边安装前端的脚手架renren-fast-vue。

三、renren-fast-vue

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

  • 前后端分离，通过token进行数据交互，可独立部署
  • 主题定制，通过scss变量统一一站式定制
  • 动态菜单，通过菜单管理统一管理访问路由
  • 数据切换，通过mock配置对接口数据／mock模拟数据进行切换
  • 发布时，可动态配置CDN静态资源／切换新旧版本

克隆项目到本地

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

下载到本地之后，用VSCode编辑器打开，同样，也需要将该项目自带的 .git 文件夹删掉，因为我们会创建自己的git托管。

➜  renren-fast-vue git:(master) rm -rf .git
➜  renren-fast-vue ls -al
total 1576
drwxr-xr-x  21 kaiyiwang  staff     714  8 10 13:13 .
drwxr-xr-x   4 kaiyiwang  staff     136  8 10 12:31 ..
-rw-r--r--   1 kaiyiwang  staff     337  8 10 12:28 .babelrc
-rw-r--r--   1 kaiyiwang  staff     147  8 10 12:28 .editorconfig
-rw-r--r--   1 kaiyiwang  staff      74  8 10 12:28 .eslintignore
-rw-r--r--   1 kaiyiwang  staff     576  8 10 12:28 .eslintrc.js
-rw-r--r--   1 kaiyiwang  staff     212  8 10 12:28 .gitignore
-rw-r--r--   1 kaiyiwang  staff     223  8 10 12:28 .postcssrc.js
-rw-r--r--   1 kaiyiwang  staff    2371  8 10 12:28 CHANGELOG.md
-rw-r--r--   1 kaiyiwang  staff    1057  8 10 12:28 LICENSE
-rw-r--r--   1 kaiyiwang  staff    1122  8 10 12:28 README.md
drwxr-xr-x  10 kaiyiwang  staff     340  8 10 12:28 build
drwxr-xr-x   6 kaiyiwang  staff     204  8 10 12:28 config
drwxr-xr-x   4 kaiyiwang  staff     136  8 10 12:28 demo-screenshot
-rw-r--r--   1 kaiyiwang  staff    2670  8 10 12:28 gulpfile.js
-rw-r--r--   1 kaiyiwang  staff    1065  8 10 12:28 index.html
-rw-r--r--   1 kaiyiwang  staff  755822  8 10 12:28 package-lock.json
-rw-r--r--   1 kaiyiwang  staff    3105  8 10 12:28 package.json
drwxr-xr-x  14 kaiyiwang  staff     476  8 10 12:28 src
drwxr-xr-x   5 kaiyiwang  staff     170  8 10 12:28 static
drwxr-xr-x   4 kaiyiwang  staff     136  8 10 12:28 test

创建环境

前端开发少不了 node.js，npm是随同NodeJS 一起安装的包管理工具，如果您的系统还没有安装环境，则需要按照以下步骤安装环境：
1）、下载 Node.js（https://nodejs.org/en/)
2）、配置npm使用淘宝镜像：

npm config set registry http://registry.npm.taobao.org/

启动前端项目

1、下载组件

# npm install
cnpm install   # 淘宝镜像

2、运行

npm run dev

在运行的时候出现这样的错误：

error in ./src/views/demo/ueditor.vue Module build failed: Error: Cannot find module 'node-sass' Require stack:

npm run dev 报错，这个错误好像还遇到挺多次的，这次特地记录一下，反正错误翻译过来就是模块生成失败：错误：找不到模块“node sass”

需要堆栈：....这大概意思就是下载node-sass失败呗

我这里是这么做法就成功了
首先执行：npm install -g cnpm --registry=https://registry.npm.taobao.org
再执行：cnpm install node-sass --save
最后：npm run dev
莫名的就成功跑起来了....

➜  renren-fast-vue npm run dev                  

> renren-fast-vue@1.2.2 dev /Users/kaiyiwang/Web/renren/renren-fast-vue
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
> 
DONE  Compiled successfully in 116624ms                                                        下午2:40:31

 I  Your application is running here: http://localhost:8001

可以看到，已经可以访问了：

file

默认登录账号和密码是：admin/admin

登录后台：
file

然后再看我们的IDEA日志打印：
file

可以看到，IDEA后端服务是有SQL日志打印记录的，至此，我们的前后端联调成功^_^。

为者常成，行者常至

自由转载-非商用-非衍生-保持署名（创意共享3.0许可证）