导入vue+springboot前后端分离项目

1、环境

1、前端

  • nodejs 12.1.0
  • vscode或者webstorm

2、后端

  • jdk1.8
  • maven3.6.3(3以上即可)
  • sqlyog
  • idea

1、导入数据库

点击右键创建同名的数据库
在这里插入图片描述
在这里插入图片描述

将sql文件导入到数据库中
在这里插入图片描述
右键编辑文件,ctrl+a选中全部语句,ctrl+c进行复制,打开sqlyog,进行粘贴
在这里插入图片描述
ctrl+a全部选中,点击执行
在这里插入图片描述
数据库导入完毕

2、导入前端

首先使用vscode打开前端项目文件夹
在这里插入图片描述
先选中文件夹,然后点击选择文件夹(注意一定要分别打开,只打开总的这个文件夹,编译器会识别不了,不能运行
在这里插入图片描述
打开文件夹后选择新建终端
在这里插入图片描述
下方会出现命令行,输入 npm install 即可开始下载依赖包
在这里插入图片描述
下载完成后,输入 npm run dev 即可运行

如果下载速度慢,或者多次下载不成功,删掉node_modules后重新下载或者配置使用cnpm来进行下载即可(cnpm install)

在这里插入图片描述
此时即可成功出现页面
在这里插入图片描述

3、后端配置

首先导入项目
在这里插入图片描述
点击找到项目,点击ok
在这里插入图片描述
然后找到 pom 文件或者直接点击右边的maven插件,使用 maven 加载 jar 包
在这里插入图片描述
等待 jar 包下载完成后直接点击启动即可
在这里插入图片描述

3、成功

在页面中选择物业,账号:admin,密码: 123456 即可登录成功
在这里插入图片描述

  • 3
    点赞
  • 80
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
在这个项目中,使用了Spring BootVue进行前后端分离的实战。项目包括了多个部分,如前端设计、后端与数据库连接、前后端连接、用户管理功能实现等。\[1\]通过这个项目,你可以学习到一些知识,包括但不限于Spring Boot、MyBatis、MySQL等后端知识,前后端的增删改查交互流程,前端如何请求后端接口和三方接口,前端请求拦截器的实现,前端组件的封装和使用,动态权限菜单的实现,爬虫的实现,悬浮球的实现,文件流操作,抽奖效果,滚动字幕效果,Excel导入和导出,前后端分离项目的打包部署等。\[2\]在开发栈方面,使用了Spring Boot、MyBatis和MySQL等技术。\[2\]在项目中还使用了Swagger文档工具,可以通过添加相应的依赖来使用。\[3\] #### 引用[.reference_title] - *1* [SpringBoot + Vue前后端分离项目实战 || 二:Spring Boot后端与数据库连接](https://blog.csdn.net/qq_56039091/article/details/131306802)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [SpringBootVue前后端分离在线工具项目实战,源码+超详细讲解](https://blog.csdn.net/weixin_41231928/article/details/126613596)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [【第二季】【SpringBoot+Vue前后端分离项目实战笔记](https://blog.csdn.net/m0_37613503/article/details/129349710)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值