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

置顶 已于 2023-03-17 20:56:17 修改
阅读量3.5k 收藏 77
点赞数 3
分类专栏： 安装 文章标签： vue.js spring boot 前端
于 2022-12-09 19:44:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45803593/article/details/128257900
版权

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 即可登录成功
在这里插入图片描述

manster1231
关注
  • 3
    点赞
  • 踩
  • 77
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
一套springboot+vue前后端分离的练手项目
05-09
1.在vue前端根目录下运行cmd命令，输入npm install按照vue项目依赖（前提是有nodejs环境）等待安装成功。 2.导入数据库文件 3.导入后端项目进入idea或eclipse开发环境中，配置springboot\src\main\resources目录下application-dev.yml文件中数据库连接串 4.运行springboot\src\main\java\io\renren\RenrenApplication.java文件（右击run as application），完成后台的启动 5.在vue前端根目录下运行cmd命令，输入命令npm run dev 启动前端项目 6.浏览器访问http://localhost:8001 即可进入系统，账户名和密码均为 admin 运行环境至少需要JDK1.8+Eclipse/Idea+Maven+NodeJs+Mysql/Oracle等 若前端项目npm install命令下载模块失败，请查询npm淘宝镜像配置方法，用cnpm install 命令安装依赖
vscode环境搭建及项目启动
08-27
vscode环境搭建及项目启动
毕设项目 mysql + springboot + vue + elementui 前后端分离，单页面响应式，全程注解
11-23
毕设项目 mysql + springboot + vue + elementui 前后端分离，单页面响应式，全程注解。 主要有项目申报、审核、立项、中期检查、结题等功能。 安装教程 导入前后端源码，sql 后端加载pom，启动 前端配置好node，在终端输入vue ui 打开前端服务器可视化视图，启动项目 配置文件自行修改，每一行都有备注 使用说明 前端修改并编译好的文件（dist）放到后端静态资源文件夹下（static） 部分安装配置不懂的可以百度 后端源码中已经有前端编译好的文件，如果不打算修改（页面下方有我的版权信息，建议改），可以不下载前端源码
SpringBoot+SpringSecurity+Mybatis+Vue前后端分离的宿舍管理系统源码.zip
05-18
SpringBoot+SpringSecurity+Mybatis+Vue前后端分离的宿舍管理系统 启动后端 导入sql文件 使用ide导入项目dorm-admin-server 更新maven 修改application.yml 运行DormAdminServerApplication.java 启动前端 导入项目dorm-admin-page 修改config/index.js 打开命令行界面 npm install npm run dev 技术栈： 前端：Vue 后端：Spring boot + Spring security + Mybatis 数据库：MySQL+Redis
vue快速入门（一）vue的导入方法
最新发布
不起眼小菜菜的博客
04-02 283
注释很详细，直接上代码……
影视评论系统Springboot+Vue（前后端分离）
06-16
Springboot+Vue影视评论系统（前后端分离），完整项目可以直接导入使用，可参考，可使用
基于SpringBoot+Vue前后端分离的毕业设计选题管理系统源码+数据库.zip
12-01
基于SpringBoot+Vue前后端分离的毕业设计选题管理系统源码+数据库.zip已获导师指导并通过的高分毕业设计项目。下载即可使用，无需修改，确保可以直接运行！ 本项目是一套基于SpringBoot+Vue前后端分离的毕业设计选题管理系统，主要针对计算机相关专业的正在做毕设的学生和需要项目实战的Java学习者。也可作为课程设计、期末大作业。包含：项目源码、数据库脚本、软件目实战练习的工具、项目说明等，该项目可以直接作为毕设使用。 使用说明 后台：maven导入springboot工程，然后配置数据库，启动后台。配置文件中的相关信息记得要写好，例如：邮箱，数据库密码之类的。 前台：终端执行命令： npm install npm run serve 然后就可以启动前台vue工程 基于SpringBoot+Vue前后端分离的毕业设计选题管理系统基于SpringBoot+Vue前后端分离的毕业设计选题管理系统基于SpringBoot+Vue前后端分离的毕业设计选题管理系统基于SpringBoot+Vue前后端分离的毕业设计选题管理系统
使用Visual Studio Code 导入并运行vue项目
songjlei的博客
08-17 8045
打开VSCode, 快键键Ctrl+Shift+P ,搜索 Configure Display Language，选择安装其他语言，安装完成选择zh-cn，重启就变成中文了。4.我们再打开我的电脑(右键)->属性->高级->环境配置->添加自己的npm安装路径 ，就是以上第3步获取的路径，一路确定即可。打开控制台（Ctrl+shift+Y）,选择终端，在控制台终端输入npm install添加包依赖 ，可能会出现报错，如下。三、vue插件的安装（方便开发）（Ctrl+shift+X）若有问题，欢迎指正！
VSCode导入Vue项目入门部署与启动
m0_54230514的博客
03-04 2864
PS：没有node.js的需要下载，官网提供的版本过高，下载安装后容易出现一些问题导致不能运行，建议下载与项目适配的版本，node.js历史版本可参考以下博客。后者需要将npm下载镜像，使用淘宝镜像- 命令就改为了cnpm，会加快项目的启动速度。@后的数字可以更改为想要的版本 若不加上@6 就默认下载最新版本的镜像cnpm。设置全局模块的安装路径到 “node_global” 文件夹，配置npm的全局模块的存放路径 以及 cache缓存的路径。与idea导入项目一致，选择前端项目的文件夹进行导入。
vscode使用教程-开始学习前端开发啦~
Magnolia_He的博客
09-11 1万+
这里写自定义目录标题用户配置用户界面VSCode的基本布局：项目的新建与引入主题设置颜色主题图标主题用户和工作区设置用户和工作区的差别快捷键设置Git配置什么是GitGit的下载与安装GitGitHub新建仓库Git的基本操作1.clone 远程仓库2.添加文件3.提交commit如何改变文本的样式生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图
vscode导入项目并启动
热门推荐
努力努力再努力
02-12 6万+
打开vscode 如果之前没有添加过项目 可以点添加项目 也可以直接拖拽进去都是可以的 之前如果添加过 可以亦可以直接拖进去 但是只要项目之间互不干扰就可以。导入依赖（cnpm需要安装：https://blog.csdn.net/qq_42094345/article/details/100978092）如果导入失败 要么是node安装失败 要么是脚手架没搞好 或者项目有问题 好好排查一下 先看环境有没有装好 再看看项目配置啥的有没有问题。二、选择项目目录右键打开cmd（在终端中打开）
Java项目:在线商城系统(前后端分离+java+vue+Springboot+ssm+mysql+maven+redis)
03-27
一、项目简述 本系统功能包括： 前台展示+后台管理，包括最基本的用户登录注册，下单， 购物车，购买，结算，订单查询，收货地址，后台商品管 理，订单管理，用户管理等等功能，小伙伴一起来看看 吧。 二、项目运行 环境配置： Jdk1.8 + Tomcat8.5 + Mysql + HBuilderX (Webstorm也 行)+ Eclispe (IntelliJ IDEA,Eclispe,MyEclispe,Sts都支 持)。 项目技术： Springboot + Maven + Mybatis + Vue + Redis + HTML 等 等组成，B/S模式+ Maven管理等等。
基于SpringBoot+Vue前后端分离的宿舍管理系统源码+数据库+项目说明（课程设计）.zip
01-06
【资源说明】 1、基于SpringBoot+Vue前后端分离的宿舍管理系统源码+数据库+项目说明（课程设计）.zip 2、该资源包括项目的全部源码，下载可以直接使用！ 3、本项目适合作为计算机、数学、电子信息等专业的课程设计、期末大作业和毕设项目，作为参考资料学习借鉴。 4、本资源作为“参考资料”如果需要实现其他功能，需要能看懂代码，并且热爱钻研，自行调试。 #### 介绍 使用SpringBoot+Vue前后端分离 简单实现的宿舍管理系统 涉及Spring Security, Mybatis #### 使用 1. 导入sql文件 2. 使用ide导入项目dorm-admin 更新maven 3. 修改application.yml 4. 运行DormAdminApplication.java --- 1. 导入项目dorm-admin-page 2. 修改config/index.js 3. 打开命令行界面 4. npm install 5. npm run dev
SSM前后端分离项目数据库
11-18
此资源包含用户，角色，权限设计的数据库相关表结构和数据。 需要创建用户角色权限的同学，可以使用。 压缩包使用.7z工具打开，运行Sql即可导入数据库中。
基于springboot+Vue的前后端分离ACM比赛管理系统源码+sql数据库.zip
08-09
【项目介绍】 基于springboot+Vue的前后端分离ACM比赛管理系统源码+sql数据库.zip 基于springboot+Vue的前后端分离ACM比赛管理系统源码+sql数据库.zip 基于springboot+Vue的前后端分离ACM比赛管理系统源码+sql数据库.zip 该资源内项目代码都是经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载使用，也适合小白学习进阶， 或者实际项目借鉴参考！ 当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。如果基础还行，也可在此代码基础上进行修改，以实现其他功能。 1.前言 - **hotelMange** 是由于学校数据库课设而诞生 - 次项目为简单DEMO现已不再更新 ## 2.解释 - **guest** 为后端模块，可直接用idea打开运行 - **vue-manage-system** 为前端模块，可直接用webstorm打开运行 ## 3.开始步骤 - 下载/克隆两个文件夹分别用 idea & webstorm打开 ### 3.1 后端guest模块启动 - **将guest.sql导入 （存在resource目录下的）** - 修改application.yaml中的数据库配置(用户名，密码，端口号) ![MySQL](https://s2.loli.net/2023/03/22/VNq95vFDs3QocE4.png) - 直接运行即可 > **数据库版本请用 5.6.X 版本** > > 后端运行成功后可直接访问swagger文档：http://localhost:80/swagger-ui.html > > 已将前端文件放入后端，也可直接访问登陆页面：http://localhost/#/login ### 2.3 前端vue-manage-system模块启动 - 安装项目依赖 ```bash npm install --registry=https://registry.npm.taobao.org ``` - 开启服务器，浏览器访问 http://localhost:8080 ``` npm run serve ```
基于Vue+Springboot前后端分离的影音播放软件源码+数据库.zip
12-01
基于Vue+Springboot前后端分离的影音播放软件源码+数据库.zip运行指南1.在数据库中建立一个名为audio-visual的数据库，数据库的字符集选择为utf8mb4，排列规则选择为utf8mb4_general_ci ，并且运行audio-visual.sql...
vsCode首次加载Vue项目
qq_22325259的博客
08-11 2921
第一步环境搭建 1、去微软官网下载vsCode并安装 vsCode官方下载地址：https://code.visualstudio.com/Download/ 2、安装nodejs，可自行去官网下载安装，推荐下载LTS稳定版 nodejs下载地址：https://nodejs.org/zh-cn/ 3、vsCode安装完成后，安装几个常用的扩展插件： <1> Chinese (Simplified) Language Pack for Visual Studio Code中文语言..
vscode引入新建得vue项目
精通前端技术，了解后端接口
03-05 1393
vscode引入vue项目
Vs Code配置前端环境及运行
m0_61216015的博客
10-22 1万+
如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。4.需要安装谷歌浏览器来进行运行代码并调试bug，谷歌浏览器中需要安装vue开发者工具，以便随时查看数据，DOM结构以及调试。3.需要安装git以便于下载代码到本地以及管理代码，企业管理代码时需要用到gitlab。2.安装node.js来使用npm，还需要安装淘宝镜像方便快速使用npm导入插件；安装下图的插件即可，我这里已经安装好了。里搜索Live Server，然后安装。，在搜索栏里搜索npm。
springboot vue前后端分离实战项目
07-28
在这个项目中，使用了Spring Boot和Vue进行前后端分离的实战。项目包括了多个部分，如前端设计、后端与数据库连接、前后端连接、用户管理功能实现等。\[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* [SpringBoot 和 Vue前后端分离在线工具项目实战，源码+超详细讲解](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、付费专栏及课程。

余额充值