手把手教windows10运行前后端分离项目

已于 2023-12-22 22:57:27 修改
阅读量1.3k 收藏 29
点赞数 25
分类专栏： 环境搭建 文章标签： spring boot vue
于 2023-12-22 22:51:24 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_74165518/article/details/135162494
版权

目录

运行环境

安装步骤

按顺序配置环境

环境检查

数据导入

运行后端项目

运行前端项目

获取源码

运行环境

  • windows10

  • node14.15.0

  • jdk1.8

  • maven

  • mysql5.7.32

安装步骤

这边以美发店会员管理系统为例，将两个rar文件解压出来，内容如下

image-20231222221808404

按顺序配置环境

运行前后端项目需具备以下软件，版本不一定要一致，最好一致，以下均为企业主流使用软件

手把手教windows10安装jdk

手把手教windows10安装maven

手把手教windows10安装nodejs

手把手教windows10安装mysql5.7.32

手把手教windows10安装vscode

手把手教windows10安装navicat15

手把手教windows10安装idea2020.1

环境检查

jdk检查

键盘WIN+R打开命令终端，输入cmd点击确认

image-20231222221302718

输入java -version点击enter键，有显示下列内容则为正常

image-20231222221417702

nodeJs检查

键盘WIN+R打开命令终端，输入cmd点击确认

image-20231222221302718

输入node -v点击enter键，有显示下列内容则为正常

image-20231222221546145

数据导入

新建连接

打开navicat工具，新建连接，用户名密码以自己的建的数据库为准，我这边是root/123456

image-20231222222006636

image-20231222222049354

双击打开

image-20231222222214115

鼠标移到localhost>鼠标右键>新建数据库>确认

image-20231222222522014

鼠标移到renren_fast双击打开>鼠标右键>运行SQL文件>选中数据脚本

image-20231222222734740

完成后点击关闭

image-20231222222811156

鼠标移到表上>鼠标右键>刷新，出现一下内容则数据导入成功

image-20231222222919565

运行后端项目

打开idea>导入项目

image-20231222223034307

鼠标单击刷新maven依赖

image-20231222223145624

修改数据库名称、用户名、密码

image-20231222223225704

点击启动，出下下列内容，则启动成功

image-20231222223320188

如果要关闭，点击小红点

image-20231222223345415

运行前端项目

打开vscode软件>File>Open Folder

image-20231222224107771

image-20231222224211230

image-20231222224227603

更新依赖,Terminal>New Terminal>输入npm install点击enter键

image-20231222224359536

输入npm run dev点击enter键启动项目,显示以下界面则启动成功

image-20231222224544880

image-20231222224621626

浏览器打开以上地址，输入用户名/密码登入，我这边是账号密码是admin/admin

image-20231222224809027

image-20231222224828156

要停止项目，删除终端或者鼠标移入终端CTRL+C键

image-20231222225634219

获取源码

觉得不错就点赞、收藏、关注、评论 吧。致力于将企业开发模式运用于项目学习中，在项目的学习中，同时了解企业开发模式和业务设计。系统包含源码、全套安装软件和视频安装教程。详情私聊我吧。

不懂代码的胖子@
关注
  • 25
    点赞
  • 踩
  • 29
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
项目实战手把手教你搭建前后端分离项目 SpringBoot + Vue + Element UI + Mysql（前端）
07-09
程序员必须得学会如何搭建一个项目，会了这个技能有很多好处，例如接一些项目，也能挣一点生活费。 可用来作为毕业设计的框架！！！
详解Flask前后端分离项目案例
09-16
在本文中，我们将深入探讨如何使用Flask框架实现前后端分离的项目案例。Flask是一个轻量级的Python Web服务器网关接口（WSGI）应用框架，非常适合开发中小型Web应用。在前后端分离的模式下，前端和后端分别负责用户...
简单的spring boot+vue前后端分离项目（入门）
qq_62733113的博客
03-30 2633
application.yml文件(初始文件是application.properties,将其改为application.yml）搭建好vue项目之后先使用npm install axios指令安装axios，然后在用到axios的地方引入即可。然后输入账号和密码进行登录（账号：admin密码123456），登录后进入主页面。运行后端项目和前端项目，发现数据库中的信息传到了前端页面，然后可以自己做样式。首先新建一个springboot工程。接着我们搭建后端项目，总体结构如图。
前后端分离项目
最新发布
2401_83017604的博客
03-31 801
次博客为本人原创，因认知欠全而简单潦草，欢迎批评指正
前后端入门：用idea运行一个前后端web项目（开源源码＋配置教程）
m0_74249400的博客
03-31 3777
运行一个前后端项目的初体验
前后端分离项目部署
qq_43008246的博客
06-28 82
指定端口号：java -jar xxx.jar --server.port=8181。里面的script里面的build是否配置或者地址是否对，使用合适环境参数打包。后端直接打root 打jar包，注意 mysql redis 等环境就行。报错（Missing script: "build"），看。java -jar 运行。
如何将前后端分离项目部署到本地的Docker Desktop容器运行并且访问
qq_49195366的博客
10-17 1017
完成了客户的一个前后端分离项目，要求部署到客户电脑上去展示，那肯定不能直接把代码弄上去跑呀~~~，于是我就想把他们都打包部署到本地的docker容器里面，方便运行和访问，so，以下内容就详细介绍了如何将前后端分离项目部署到本地的docker容器运行。
springboot+vue 前后端分离项目怎么启动,怎么部署？vue项目windows linux部署 域名访问教程合集
热门推荐
孟秋与你的博客
07-25 2万+
注：导入项目教程 0基础适用 1.node,js是什么？ 如果说相当于java中的jdk 那就很清晰了，使js脱离浏览器 可以运行的环境，下载地址：https://nodejs.org/en/download/ 安装时默认会选择配置环境变量，或自己手动配置，安装完成后，cmd命令检验是否成功 注意是双横杆 2.idea 导入springboot+vue项目 springboot部署： maven路径修改 改成自己的对应路径！ （需网上 下载maven 注意maven需要配置环境变量） 打开项目之后
如何启动在一个大工程内的前后端分离项目，前端vue，后端springboot
Sumuxi9797926的博客
10-10 6374
如果出现不是内部或外部指令，直接先下载安装一个nodejs，附上大佬的一篇安装博客Nodejs安装及环境配置 - 简书2、如果上述版本号都成功，就检查是否有淘宝镜像 如果没有就装 至此你已经安装好了nodejs已经镜像，就可以下载依赖，启动过程了。直接找到工程下面的package.json 它的目录就是根目录，在根目录盘符下cmd输入npm i/npm install 可以下载依赖，也可以idea的Terminal，注意也要到根目录下npm i。 至此就可以去开启启动了一般都是 npm run +
IDEA如何运行SpringBoot+Vue前后端分离的项目（超详细截图）
lonzgzhouzhou的博客
12-10 1万+
第一步：用IDEA打开项目，准备配置maven环境 ，当然如果本地没有提前配置好maven，就用IDEA默认的配置即可。点击运行按钮就能直接运行，如果没有找到SpringBoot项目的启动文件，右键运行就行。使用数据库连接工具先连接MySQL，连接后，右键新建数据库（我使用的是Navicat）
前后端分离项目的部署方法——vue cli4+springboot
jiyuzzz的博客
11-13 6422
前后端分离——vue cli4项目部署到springboot中
RouYi-Vue前后端分离 --- 项目的启动、登录功能是怎么实现的、怎么样创建新模块
hcz666的博客
07-28 1388
RouYi-Vue前后端分离 --- 项目的启动、登录功能是怎么实现的、怎么样创建新模块
Spring Boot 3 + Vue 3前后端分离保姆级学习型新闻项目
07-12
一套基于时下最新 Java 技术栈 Spring Boot 3 + Vue 3 开发的前后端分离学习型新闻项目，配备保姆级项目开发教程手把手教你从零开始开发上线一个生产级别的 Java 系统。由新闻门户系统、作者后台管理系统、平台后台...
java+手把手vue+springboot前后端分离项目实战---社区项目后端代码.zip
08-17
java+项目实战
项目实战手把手教你搭建前后端分离项目 SpringBoot + Vue + Element UI + Mysql（后端）
07-09
程序员必须得学会如何搭建一个项目，会了这个技能有很多好处，例如接一些项目，也能挣一点生活费。 可用来作为毕业设计的框架！！！
手把手教你FPGA与RT以及Host端通信
01-19
一、FPGA、RT以及主机数据流之间的通信概览在一个含FPGA的Real-TIme系统中，FPGA负责采集信号，然后将采集的数据传输至RT端进行监控、处理，同时在主机进行数据的显示、记录或者发送命令。典型的基于cRIO的Real-TIme...
前后端分离项目详细部署流程
小学生波波
09-23 3062
前后端分离项目详细部署流程
人人开源前后端分离开源项目启动流程（超详细）
猿小白的博客
10-20 1198
需要提前按照好JDK1.8+ 、node14.x+ 、msyql 等基本开发环境。本项目下的renren-ui目录就是前端工程文件，不要搞错了。到这里就启动成功了，环境如果没问题的话，过程会非常的顺利。数据脚本在 renren-admin模块下的db文件里。根据你的数据库类型选择与之对应的数据库脚本进行初始化。找到启动类，运行即可启动。
【前后端分离开发及项目部署流程】
独上高楼，望尽天涯路。
06-27 3744
黑马程序员-瑞吉外卖-前后端分离课程-前后端分离技术介绍，Swagger使用介绍，项目部署一般流程
centos7 运行java前后端项目
05-09
运行Java前后端项目的步骤如下： 1. 安装并配置Java环境。可以通过以下命令安装Java： ```bash yum install java-1.8.0-openjdk ``` 安装完成后，可以使用以下命令检查Java版本： ```bash java -version ``` 2. 安装并配置Tomcat服务器。可以通过以下命令安装Tomcat： ```bash yum install tomcat ``` 安装完成后，可以使用以下命令检查Tomcat是否正常启动： ```bash systemctl status tomcat ``` 如果Tomcat未启动，可以使用以下命令启动Tomcat： ```bash systemctl start tomcat ``` 3. 将前后端项目部署到Tomcat服务器上。可以将前端项目打包成一个war包，后端项目打包成一个jar包。然后将这个war包和jar包放到Tomcat的webapps目录下。 4. 启动Tomcat服务器。可以使用以下命令启动Tomcat： ```bash systemctl start tomcat ``` 5. 在浏览器中访问前端项目。可以在浏览器中输入Tomcat服务器的IP地址和端口号，访问前端项目。 6. 在前端项目中访问后端项目。可以在前端项目中配置后端项目的访问地址。例如，在Vue.js中，可以在config/index.js文件中配置后端项目的访问地址： ```javascript module.exports = { dev: { proxyTable: { '/api': { target: 'http://localhost:8080', changeOrigin: true, pathRewrite: { '^/api': '' } } } } } ``` 配置完成后，前端项目就能够访问后端项目了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值