前言

最近有不少朋友在部署过程中都遇到了一些问题，因为大多数朋友都是不具备开发基础，所以想在本地跑起来是有一定的难度的。针对这情况，我手敲了如下保姆式教程，让不具备开发能力的朋友也能顺利的搭建自己的可视化数据图表信息。

1.后端工程

1.1.安装数据库

1.1.1. 创建数据库：designer

1.1.2. 导入数据库脚本：后端/init20220524.sql

1.2.redis 安装

自行百度安装：https://www.runoob.com/redis/redis-install.html

1.3.后端工程启动

进入到后端工程所在目录：xxx/后端

执行启动命令：java -jar yabusyhan-0.0.1-SNAPSHOT.jar

启动成功标志：

1.4.前端启动

1.4.1.拉取项目

1.4.2.切换到前端项目目录执行：yarn install

1.4.3. install完成后执行：yarn run dev

1.4.4. 访问地址：http://localhost:80

最新版本安装方式：

cnpm isntall

npm run serve

更详细教程请关注公众号：小南瓜开发平台

https://mp.weixin.qq.com/s/wBcIfZTuKjp42S0VoRIZOw

部署手册

更详细教程请关注公众号：小南瓜开发平台

订阅版保姆式教程

在定于源码后，会收到一封邮件，附件中包含前后端源代码+mysql数据库脚本。下载附件到自己喜欢的磁盘目录即可，不一定以下文中的目录一致。

前端设计器的运行：

1、解压前端工程form_design源代码：

2、进入到form_design文件夹，打开cmd窗口进入到该目录，执行cnpm intall 命令安装依赖

3、将工程导入到自己擅长的开发工具，例如：hbuilder或vscode。目录结构如下：

4、启动工程

执行，npm run serve 命令；启动前端设计器

5、用预览模式访问设计器（不需要后端）

访问地址：http://localhost/#/design

6、安装redis和mysql数据库

自行百度安装

安装后启动redis

安装mysql后启动mysql服务；用navicat工具创建数据库designer_test

7、导入数据库脚本202208designer.sql

8、解压后端工程到web_design文件夹

9、导入后端工程到idea开发工具，并安装maven依赖

10、修改相关数据库和redis 账号密码为自己实际创建的账号密码

11、启动后端（jdk1.8）

12、访问前端设计器，进行登录操作

访问：http://localhost/#/login?redirect=%2FdesignList

其他视频教程

一、图表组件使用视频教程

1、excel数据准备https://www.bilibili.com/video/BV1AP4y1F7KN/

2、excel导入数据自动生成增删改查API及使用

https://www.bilibili.com/video/BV1aY4y1t7QZ/

3-1.文本框的使用https://www.bilibili.com/video/BV1yu41167p1/

3-2.文本框的外部API使用https://www.bilibili.com/video/BV1eg411d7YR/

4.走马灯https://www.bilibili.com/video/BV1aT4y1z74R/

5.按钮https://www.bilibili.com/video/BV1RZ4y187zv/

6.酷炫装饰https://www.bilibili.com/video/BV1gR4y1w7je/

7.数字翻牌器https://www.bilibili.com/video/BV1SU4y1m7Dd/

8.进度池 https://www.bilibili.com/video/BV1TU4y1U7q2/

9.iframe       https://www.bilibili.com/video/BV1Rr4y1x7PP/

10.胶囊柱状图https://www.bilibili.com/video/BV1RB4y1y7og/

11.柱状图https://www.bilibili.com/video/BV1Za411f7YZ/

12.立体柱状图https://www.bilibili.com/video/BV1o34y177HY/

13.饼图https://www.bilibili.com/video/BV1vB4y1977T/