【Small Tools】Spring Cloud Alibaba + Vue 前后端分离项目

时间:2021-7-4 作者:qvyue

一、前言

项目地址:https://gitee.com/zhengqingya/small-tools

Small Tools微服务项目目前技术:

  1. Spring Cloud Alibaba
  2. Nacos
  3. Redis
  4. MySQL
  5. Vue
  6. Docker

目前功能点:

基本上都是常见的,这里不多说…

  1. 系统管理
  2. 代码生成器
  3. 爬虫
  4. 数据库管理
  5. 三方登录
部分页面截图
【Small Tools】Spring Cloud Alibaba + Vue 前后端分离项目
在这里插入图片描述

【Small Tools】Spring Cloud Alibaba + Vue 前后端分离项目
在这里插入图片描述

【Small Tools】Spring Cloud Alibaba + Vue 前后端分离项目
在这里插入图片描述

【Small Tools】Spring Cloud Alibaba + Vue 前后端分离项目
在这里插入图片描述

【Small Tools】Spring Cloud Alibaba + Vue 前后端分离项目
在这里插入图片描述

二、环境准备

参考:https://gitee.com/zhengqingya/java-developer-document
温馨小提示:本文将基于Windows10专业版来启动运行访问服务,以下环境有的话,可直接跳过…

  1. JDK 1.8
  2. Apache Maven 3.6.3
  3. IntelliJ IDEA 2020.3
  4. MySQL 5.7
  5. Redis
  6. Git
  7. Node.js 12.18.3
  8. Visual Studio Code
  9. Docker
  10. Nacos 1.4.1
  11. Navicat Premium
1、拉取small-tools项目
git clone https://gitee.com/zhengqingya/small-tools.git
2、Nacos配置

http://127.0.0.1:8848/nacos

① 新建命名空间devtestprod
【Small Tools】Spring Cloud Alibaba + Vue 前后端分离项目
在这里插入图片描述
② 新建配置common-dev.ymlsystem-dev.ymlgateway-dev.yml

温馨小提示:相关配置文件在small-tools/small-tools-api/nacos-config目录下

【Small Tools】Spring Cloud Alibaba + Vue 前后端分离项目
在这里插入图片描述
【Small Tools】Spring Cloud Alibaba + Vue 前后端分离项目
在这里插入图片描述

【Small Tools】Spring Cloud Alibaba + Vue 前后端分离项目
在这里插入图片描述
③ 注:配置文件中的部分环境属性值根据自己本地的实际环境情况填写哦~
3、数据库

温馨小提示:相关sql文件在small-tools根目录下

【Small Tools】Spring Cloud Alibaba + Vue 前后端分离项目
在这里插入图片描述
① 新建数据库small-tools
【Small Tools】Spring Cloud Alibaba + Vue 前后端分离项目
在这里插入图片描述
② 导入sql数据
【Small Tools】Spring Cloud Alibaba + Vue 前后端分离项目
在这里插入图片描述

【Small Tools】Spring Cloud Alibaba + Vue 前后端分离项目
在这里插入图片描述

【Small Tools】Spring Cloud Alibaba + Vue 前后端分离项目
在这里插入图片描述

导入成功如下:

【Small Tools】Spring Cloud Alibaba + Vue 前后端分离项目
在这里插入图片描述

三、后端small-tools-api启动运行

maven配置根据自己环境来哦

【Small Tools】Spring Cloud Alibaba + Vue 前后端分离项目
在这里插入图片描述

IDEA导入small-tools-api后端项目

【Small Tools】Spring Cloud Alibaba + Vue 前后端分离项目
在这里插入图片描述

【Small Tools】Spring Cloud Alibaba + Vue 前后端分离项目
在这里插入图片描述

导入之后,idea右下角会有如下提示,选择第一个即可

【Small Tools】Spring Cloud Alibaba + Vue 前后端分离项目
在这里插入图片描述

debug启动运行项目

主要启动GateWayApplicationSystemApplicationToolApplication

【Small Tools】Spring Cloud Alibaba + Vue 前后端分离项目
在这里插入图片描述

如果启动运行出现如下情况:

【Small Tools】Spring Cloud Alibaba + Vue 前后端分离项目
在这里插入图片描述

右击选择Edit Configuration...

【Small Tools】Spring Cloud Alibaba + Vue 前后端分离项目
在这里插入图片描述

如下:选择JAR manifest即可

【Small Tools】Spring Cloud Alibaba + Vue 前后端分离项目
在这里插入图片描述

然后重新启动…

启动成功如下:

【Small Tools】Spring Cloud Alibaba + Vue 前后端分离项目
在这里插入图片描述

四、前端small-tools-web启动运行

命令行中依次执行如下命令:

# 进入前端项目
cd small-tools-web
# 安装依赖
cnpm install
# dev环境运行
cnpm run dev

【Small Tools】Spring Cloud Alibaba + Vue 前后端分离项目
在这里插入图片描述

运行成功,打开浏览器访问:http://127.0.0.1:8080

【Small Tools】Spring Cloud Alibaba + Vue 前后端分离项目
在这里插入图片描述

五、其它

项目相关文档更新地址:https://zhengqing.blog.csdn.net/category_10749058.html


今日分享语句:
每天提醒自己不要忘记梦想,
但不要麻木,
要很新鲜很激情,
保持梦想的热度。

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:qvyue@qq.com 进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。