程序员的资源宝库

网站首页 > gitee 正文

【Docker】1、 前后端分离项目 下载启动运行

sanyeah 2024-04-13 16:06:03 gitee 5 ℃ 0 评论

人人开源前后端分离项目下载与配置

文章目录

  • 人人开源前后端分离项目下载与配置
  • 前后端分离框架介绍
  • 后端项目下载与配置
    • 1、renren-fast后台项目介绍
    • 2、开发环境搭建
    • 3、下载后端renren-fast的源码
    • 4、IDEA导入renren-fast项目
    • 5、创建数据库renren_fast,执行对应的SQL
    • 6、启动renren-fast后端项目
  • 前台项目的下载与配置
    • 1、 renren-fast-vue前端项目项目介绍
    • 2、搭建开发环境
    • 3、初始化工程
  • 参考资料

简单记录 - Docker环境下的前后端分离项目部署与运维

以renren-fast开源项目为部署案例,详细讲解了这个项目的前端部分和后端部分的安装和配置,在Windows平台上运行调试该项目。

前后端分离框架介绍

Docker环境下的前后端分离项目部署与运维人人开源框架介绍

人人开源的renren-fast项目为部署案例

人人开源项目 https://www.renren.io/community/project

renren-security | 轻量级权限管理系统

在这里插入图片描述

renren-fast | Java快速开发平台

在这里插入图片描述

renren-generator | 代码生成器

在这里插入图片描述

renren-security

renren-fast

renren-generator

下载 - 部署 - 运行

项目是前后端分离的,先部署好后端,再部署好前端页面,就能看到页面的效果了。

项目下载

  • 后台地址:https://gitee.com/renrenio/renren-fast
  • 前端项目element-ui地址:https://github.com/daxiongYang/renren-fast-vue
  • 代码生成器:https://gitee.com/renrenio/renren-generator

后端项目下载与配置

1、renren-fast后台项目介绍

官方介绍 https://www.renren.io/guide

  • 一个轻量级的Java快速开发平台,能快速开发项目并交付【接私活利器】
  • 完善的XSS防范及脚本过滤,彻底杜绝XSS攻击
  • 实现前后端分离,通过token进行数据交互
  • 实现管理员列表、角色管理、菜单管理、定时任务、参数管理、系统日志、文件上传(云存储)等功能
  • 开发文档、前端源码下载、后端源码下载、项目演示(账号密码:admin/admin)

renren-fast后台项目技术栈

SSM 框架 Spring Spring MVC Mybatis

Spring Boot

Shiro 权限管理

Redis 高速缓存

Swagger 后台API调试

JWT 授权、信息交换、跨域认证

2、开发环境搭建

开发环境

  • JDK1.8 https://www.oracle.com/java/technologies/javase-jdk8-downloads.html

  • MySQL5.7 https://downloads.mysql.com/archives/community/

  • Maven http://maven.apache.org/download.cgi

  • IDEA(https://www.jetbrains.com/idea/download/)

配置好环境变量

在默认情况下,Maven下载JAR可能会有一些慢,可以修改为国内阿里云等下载地址。修改Maven的配置(settings.xml配置)

Maven conf/settings.xml 加上阿里镜像

<mirrors>
	<!--阿里云仓库-->
	<mirror>
      <id>alimaven</id>
      <name>aliyun maven</name>
    <url>http://maven.aliyun.com/nexus/content/groups/public/</url>
      <mirrorOf>central</mirrorOf>        
    </mirror>
</mirrors>

3、下载后端renren-fast的源码

可以下载源码下来解压 https://gitee.com/renrenio/renren-fast

也可以直接通过Git,弄下renren-fast的源码 git clone

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

我的执行

x1c@DESKTOP-HVI7SH0 MINGW64 /f/project/renren
$ git clone https://gitee.com/renrenio/renren-fast
Cloning into 'renren-fast'...
remote: Enumerating objects: 1764, done.
remote: Counting objects: 100% (1764/1764), done.
remote: Compressing objects: 100% (881/881), done.
remote: Total 1764 (delta 853), reused 1553 (delta 724), pack-reused 0
Receiving objects: 100% (1764/1764), 2.80 MiB | 610.00 KiB/s, done.
Resolving deltas: 100% (853/853), done.

x1c@DESKTOP-HVI7SH0 MINGW64 /f/project/renren
$

4、IDEA导入renren-fast项目

IDEA导入renren-fast项目

在这里插入图片描述

选择项目位置

在这里插入图片描述
选择Maven方法导入

在这里插入图片描述

5、创建数据库renren_fast,执行对应的SQL

打开DataGrip,Navicat或 直接运行MySQL都可以的。

一般需要直接创建数据库

创建数据库 renren_fast ,数据库编码为 UTF-8

在这里插入图片描述

在这里插入图片描述

执行 db/mysql.sql 文件,初始化表数据

在这里插入图片描述

执行mysql.sql

在这里插入图片描述

修改 application-dev.yml ,更新MySQL账号和密码

在这里插入图片描述

6、启动renren-fast后端项目

运行 io.renren.RenrenApplication.java 的 main 方法,则可启动项目

在这里插入图片描述

开发文档 https://www.renren.io/guide#end

在这里插入图片描述

Swagger路径:http://localhost:8080/renren-fast/swagger/index.html

在这里插入图片描述

Swagger注释路径:http://localhost:8080/renren-fast/swagger-ui.html

在这里插入图片描述

前台项目的下载与配置

1、 renren-fast-vue前端项目项目介绍

renren-fast-vue基于vue、element-ui构建开发,实现renren-fast后台管理前端功能。

renren-fast前端项目

  • Vue

  • ElementUI

  • NodeJS

2、搭建开发环境

安装Node.js https://nodejs.org/en/

在这里插入图片描述

配置好环境

3、初始化工程

git clone https://github.com/daxiongYang/renren-fast-vue.git
cd  renren-fast-vue
npm install
npm run dev

克隆renren-fast-vue项目

cd 进入工程目录

安装依赖

启动服务

在这里插入图片描述

访问localhost:8001

在这里插入图片描述

在这里插入图片描述

Module build failed Error Node Sass does not yet support your current environment OS X 64-bit...

Module build failed: Error: Node Sass does not yet support your current environment: Windows 64-bit with Unsupported runtime (72)

//将旧版本卸载
npm uninstall node-sass -g
//安装最新版
npm install node-sass -g

部署上 Linux

生成环境,打包并把dist目录文件,部署到Nginx里等等

构建生产环境(默认) npm run build

# 构建测试环境
npm run build --qa
# 构建验收环境
npm run build --uat
# 构建生产环境
npm run build --prod
# 安装Nginx,并配置Nginx server {
    listen       80;
    server_name  localhost;
location / {
root E:\\renren-fast-vue; index index.html index.htm;
} }
# 启动Nginx后,访问如下路径即可 http://localhost

登录的账号密码:admin/admin

参考资料

1、https://www.renren.io/community/project - 人人开源项目
2、Docker环境下的前后端分离项目部署与运维 - 神思者

Tags:

本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

最近发表
标签列表