如何快速开始bg-admin这套框架

灰太狼 2021-12-07 13:49 134阅读 0赞

### 如何快速开始bg-admin这套框架 ###

*  快速开始
 *   *  clone项目
     *  导入数据库
     *  启动后端工程
     *  启动前端工程

# 快速开始 #

只有让大家第一时间将整个项目启动起来，这样大家才会直观的感受到整个项目在开发完成以后的效果，那么我们现在就开始讲解如何启动我们的项目。  
bg-admin的博客专栏的地址是：[https://blog.csdn.net/linzhefeng89/column/info/37409][https_blog.csdn.net_linzhefeng89_column_info_37409]

## clone项目 ##

打开我们的IDEA开发工具然后File=>new=>Project from Version Control=>Git  
![在这里插入图片描述][20190717110234759.png]  
点击Git接着会看到如下的页面，在URL处输入我们的项目的git的地址【[https://github.com/lazyboyl/bg-admin.git][https_github.com_lazyboyl_bg-admin.git]】，Directory为我们保存到本地的文件夹所在的路径。  
![在这里插入图片描述][20190717110508644.png]  
最后我们点击Clone按钮将我们的项目拷贝到csdn目录底下，那么到此处我们就完成了项目的clone。

## 导入数据库 ##

接着我们使用navicate工具打开我们的mysql数据库，执行bg-admin-doc中的vcm.sql的脚本。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70]  
数据库导入完成以后我们会看到我们的navicate上多了一个vcm的数据库如下所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70 1]

## 启动后端工程 ##

虽然我们的项目已经被我们下载下来了，但是还没有真正的引入到我们的项目中，因此这个时候需要我们选中我们的的csdn，然后点击File=>New=>Module from Exitsting Sources…  
![在这里插入图片描述][20190717112732172.png]  
然后找到我们需要引入的bg-admin-web-core的工程，然后以maven工程的形式导入到项目中。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70 2]  
在项目引入以后我们需要设置我们的JDK，我们点击File=>Project Structure来进行我们的JDK的设置。  
![在这里插入图片描述][20190717113329673.png]  
接着大家在此处设置我们的JDK  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70 3]  
最后右键我们的pom.xml文件更新我们的maven依赖。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70 4]  
在启动后端工程之前我们需要修改我们的后端工程的配置文件，首先需要修改bg-admin-web-core的application.yml的配置文件，将里面的active改为dev：

spring:
      profiles:
        active: dev

最后修改我们的application-dev.yml中的数据库的连接的相关信息和redis连接的相关信息。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70 5]  
最后我们点击我们的开发工具的右上角的debug模式启动项目  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70 6]  
启动完成以后大家会看到如下的页面，则说明我们的项目启动成功了。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70 7]

## 启动前端工程 ##

在此之前你要保证你的电脑已经安装好了npm，点击IDEA的Terminal命令窗口:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70 8]  
接着执行以下命令进入到我们的前端工程所在的目录:

cd bg-admin-web

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70 9]  
然后接着我们执行以下命令来安装我们的依赖，若你已经安装了淘宝的镜像依赖则使用cnpm，若没有安装淘宝的镜像则使用npm，我们此处使用的是cnpm来进行安装依赖的

cnpm install

执行完成以后大家会看到如下的页面。  
![在这里插入图片描述][20190717135221167.png]  
最后我们需要修改我们的前端工程的src/config/env.js将其设置为访问开发环境，修改好以后的代码如下：

export default "development";

若大家需要改动我们的工程的访问地址、图片的地址、websocket的地址，那么大家直接打开src/config/dev.js目录进行相应的改造即可：

export const runDevConfig = {
      baseUrl: 'http://127.0.0.1:8288',
      imgUrl: 'http://127.0.0.1:80/merJoinResource',
      refreshTokenUrl: 'http://127.0.0.1:8288/user/refreshToken',
      socketUrl: 'http://127.0.0.1:9099'
    };

最后我们启动我们的项目，直接在我们的项目底下输入以下的命令

cnpm run dev

大家看到如下的页面则说明我们的项目已经启动成功了。  
![在这里插入图片描述][20190717135629734.png]  
然后我们打开我们的浏览器输入http://127.0.0.1:8080/\#/，我们会看到如下的页面  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70 10]  
输入账号：admin 密码：123456，我们会看到我们跳转到了首页  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70 11]  
这时候我们就可以开始愉快的玩耍我们的BGA系统了

[https_blog.csdn.net_linzhefeng89_column_info_37409]: https://blog.csdn.net/linzhefeng89/column/info/37409
[20190717110234759.png]: /images/20211207/f946bdbbbfca4f6496fdc4fe067940e0.png
[https_github.com_lazyboyl_bg-admin.git]: https://github.com/lazyboyl/bg-admin.git
[20190717110508644.png]: /images/20211207/e5f255f62d4e453488b4246db28cf2cd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70]: /images/20211207/9934748628604c17a9b90d5d18bbb722.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70 1]: /images/20211207/3852b5ed989b4384847ca14f249456e7.png
[20190717112732172.png]: /images/20211207/84a2de8dffa145f689d257a6fe5e187a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70 2]: /images/20211207/3d829ad278704a17bd520c6483f5ea8f.png
[20190717113329673.png]: /images/20211207/f78bd3e27c71440fab69ec77ad0226fc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70 3]: /images/20211207/8e4667d1c18b4d6fb87a5105f0eeec95.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70 4]: /images/20211207/944b8f464bb0400d9611647975fa71ce.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70 5]: /images/20211207/8f2935e684404dcb98fdd68e29df837e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70 6]: /images/20211207/09aef4ff0b4146508c9fa4afe7d2bbf3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70 7]: /images/20211207/6645ae4987cd4c65a733d436e19946b8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70 8]: /images/20211207/cd3183351eba416f99a0c4f56b3c44ab.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70 9]: /images/20211207/7b6180ba3f9d4306a07018302cd57ee0.png
[20190717135221167.png]: /images/20211207/034fbc828da4472ead01e9197ef50cb5.png
[20190717135629734.png]: /images/20211207/e2b4cb73563446979f78061aba5457b6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70 10]: /images/20211207/265715a125834ec18490ea4605311285.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70 11]: /images/20211207/297d0c62944a47c28d5881aed6886f48.png