项目预览

项目架构

扫码加微信，备注技术新潮流.

项目介绍

我,请始皇[打钱]是一个前后端分离的工具人系统，项目采用 SpringBoot+Vue 开发，项目加入常见的企业级应用所涉及到的技术点，例如 Redis、RabbitMQ 等(主要是多用用工具多踩踩坑)。

• 项目地址：https://github.com/AldonahZero/spring-Boot-Vue-Bank
• 作者邮箱：[email protected]

项目技术栈

后端技术-Go

后端技术-Java

前端技术

快速本地部署

1. clone 项目到本地 https://github.com/AldonahZero/spring-Boot-Vue-Bank.git
2. 数据库脚本放在项目根目录下，在 MySQL 中执行数据库脚本，导入数据库，并修改项目中关于数据的配置（resources 目录下的 application.properties 文件中）
3. 提前准备好 Redis，在 项目的 application.properties 文件中，将 Redis 配置改为自己的
4. 提前准备好 MQ，在项目的 application.properties 文件中将 MQ 的配置改为自己的
5. 在 IntelliJ IDEA 中打开 bdemo 项目，启动
6. npm 运行前端项目

OK，至此，服务端就启动成功了，此时我们直接在地址栏输入 http://localhost:8080 即可访问我们的项目，如果要做二次开发，请继续看第七、八步。

7. 进入到vuehr目录中，在命令行依次输入如下命令：

# 安装依赖
npm install

# 在 localhost:8080 启动项目
npm run serve

由于我在 vuehr 项目中已经配置了端口转发，将数据转发到 Spring Boot 上，因此项目启动之后，在浏览器中输入 http://localhost:8080 就可以访问我们的前端项目了，所有的请求通过端口转发将数据传到 Spring Boot 中（注意此时不要关闭 Sprin gBoot 项目）。

8. 最后可以用 WebStorm 等工具打开 vuehr 项目，继续开发，开发完成后，当项目要上线时，依然进入到 vuehr 目录，然后执行如下命令：

npm run build

该命令执行成功之后，vuehr 目录下生成一个 dist 文件夹，将该文件夹中的两个文件 static 和 index.html 拷贝到 Spring Boot 项目中 resources/static/ 目录下，然后就可以像第 6 步那样直接访问了（关于前后端分离部署，大家也可以参考这个使用 Nginx 部署前后端分离项目，解决跨域问题）。

步骤 7 中需要大家对 NodeJS、NPM 等有一定的使用经验，不熟悉的小伙伴可以先自行搜索学习下，推荐 Vue 官方教程。

参考

• vue-chat

License

Copyright 2020 Aldno

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.