项目完整地址
开发环境安装好之后,就可以准备运行代码了。为了防止小白不小心进坑,这篇文章我会对每个步骤都进行介绍,希望每个人都能安然无恙地把代码跑起来。
部署运行
拉取代码
首先,我们新建一个文件夹,准备把代码放在这个文件夹里面。
进入到Our-Task的项目里面,复制Out-Task的git链接。
这里假设大家都安装好了github,进入到之前新建的空白文件夹中,右键,我们会看到一个Git Bash Here,这就是准备进入git的命令行窗口了。
进入之后,我们输入指令:git clone 项目地址,就可以拉取代码了。bash里面粘贴代码并不是ctrl + c,而是 shift + insert,这个大家注意一下。
git clone github.com/water76016/…
拉取之后,我们可以看见之前新建的空白文件夹里面,多了一份our-task代码文件。
启动后台代码
首先,打开IDEA,进入到这样的页面,点击Import Project
点击之后,找到我们从github上拉取的代码文件夹,选中our-task中的pom.xml,点击OK。
IDEA会自动根据我们pom.xml文件里面配置的路径从网上下载jar包,等下载好之后,我们右键运行SprintBoot的启动类:OurTaskApplication。
这里贴上我的maven配置,如果大家发现maven无法下载文件,可以参照我的配置配一下。
右键File,点击出现的Settings
最后,看看SpringBoot启动之后的效果,后台是运行在8888端口。
启动前台代码
我用的是vs code编辑器,这个很好用,推荐大家去使用一下。
进去之后,找到左上角File,找到其中的Add Folder To WorkSpace,把项目添加到工作空间去
找到我们从github拉取的代码,导入其中的vue部分
我们会发现vs code工作空间中,多了一份vue的文件夹代码。右键vue项目,准备打开这个项目的命令行界面。
我们会发现,vs code给我们打开了一个在vue文件夹下面的命令行界面。在这个界面中输入命令:npm install,回车,下载vue运行所需要的包(大家前提是把node.js装好)
包下载好之后,输入命令,npm run dev启动vue,启动后发现,vue运行在9528端口。
启动之后,会自动在我们的默认浏览器中,打开一个新标签页,也就是登录界面。
至此,Our-Task已经启动完成。如果大家还遇到什么坑的话,可以邮箱联系我:dxylovelq@163.com