如何导入一个前后端分离项目

最近在维护一个项目,既然是维护,那么第一个要做的是,当然是把环境配好,把项目的前端和后端跑起来!因为每个人电脑上项目的环境是不一样的,所以我们要把项目需要的环境给配置完成,才能舒适的跑起项目的。

首先申明一下该项目主要使用技术和工具:

  • 前端:Vue2+element UI
  • 后端:Maven 项目+Spring Boot+Spring Cloud

前端

前端的环境,需要把原先的环境依赖给删除,在终端上执行npm install重新下载依赖,即可。
(框内的就是前端项目所有的依赖)
在这里插入图片描述

npm config set registry http://registry.npm.taobao.org
使用上面的命令,设置淘宝源,在 npm install 前面使用,可以让我们下载依赖更快一些,因为淘宝源是使用的国内的镜像进行依赖下载的。

在这里我使用的项目环境,有一些需要手动下载的,所以在执行 npm install 后进行运行还是会有错误:
在这里插入图片描述

安置提示执行了 npm install --save
又上网冲浪了一下,找到了安装这些组件的命令:
npm install element-ui -S

后端

因为我要维护的项目是微服务架构的,运用的 SpringCloud 所以,直接在右侧栏的 Maven 中对相应的模块进行 clean 和 install。在这里的目的是为了清理缓存,重新下载模块需要的依赖。
在这里插入图片描述

测试

项目跑起来之后,我们肯定是要测试一下各个功能是否能按照我们预期的那样进行工作。

  1. 首先,把项目跑起来
  2. 打开前端页面
  3. 按下 F12 打开开发者工具,进行调试
  4. 先将控制台和网络,清空

在这里插入图片描述

  1. 需要测试的功能,比如插入按钮,进行点击测试
  2. 此时,开发者工具中网络页面会出现,该功能调用的后端的接口(API)
  3. 点击对应的接口,会显示相应的信息

在这里插入图片描述

  1. 右侧可以点击请求,和响应,来查看从前端页面传入后端项目的请求,以及后端项目传入前端页面的响应。

作为一名合格的编程开发,对程序的调试和错误的迅速定位是很难得的能力。各位同志们!我们冲起来吧!

评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值