Our-Task部署运行详细文档

279 阅读2分钟

项目完整地址

our-task:一个完整的清单管理系统

开发环境安装好之后,就可以准备运行代码了。为了防止小白不小心进坑,这篇文章我会对每个步骤都进行介绍,希望每个人都能安然无恙地把代码跑起来。

部署运行

拉取代码

首先,我们新建一个文件夹,准备把代码放在这个文件夹里面。

新建文件夹.png

进入到Our-Task的项目里面,复制Out-Task的git链接。

复制项目地址.png

这里假设大家都安装好了github,进入到之前新建的空白文件夹中,右键,我们会看到一个Git Bash Here,这就是准备进入git的命令行窗口了。

bash here.png

进入之后,我们输入指令:git clone 项目地址,就可以拉取代码了。bash里面粘贴代码并不是ctrl + c,而是 shift + insert,这个大家注意一下。

git clone github.com/water76016/…

拉取之后,我们可以看见之前新建的空白文件夹里面,多了一份our-task代码文件。

下载代码.png

启动后台代码

首先,打开IDEA,进入到这样的页面,点击Import Project

IDEA.png

点击之后,找到我们从github上拉取的代码文件夹,选中our-task中的pom.xml,点击OK。

IDEA会自动根据我们pom.xml文件里面配置的路径从网上下载jar包,等下载好之后,我们右键运行SprintBoot的启动类:OurTaskApplication。

启动springboot.png

点击pom文件.png 这里贴上我的maven配置,如果大家发现maven无法下载文件,可以参照我的配置配一下。

右键File,点击出现的Settings

setting.png

maven配置.png

maven-import.png

最后,看看SpringBoot启动之后的效果,后台是运行在8888端口。

springboot启动.png

启动前台代码

我用的是vs code编辑器,这个很好用,推荐大家去使用一下。

进去之后,找到左上角File,找到其中的Add Folder To WorkSpace,把项目添加到工作空间去

导入vue代码.png

找到我们从github拉取的代码,导入其中的vue部分

add-vue代码.png

我们会发现vs code工作空间中,多了一份vue的文件夹代码。右键vue项目,准备打开这个项目的命令行界面。

打开命令行.png

我们会发现,vs code给我们打开了一个在vue文件夹下面的命令行界面。在这个界面中输入命令:npm install,回车,下载vue运行所需要的包(大家前提是把node.js装好)

npm-install.png

包下载好之后,输入命令,npm run dev启动vue,启动后发现,vue运行在9528端口。

npm-run-dev.png

启动之后,会自动在我们的默认浏览器中,打开一个新标签页,也就是登录界面。

登录页面.png

至此,Our-Task已经启动完成。如果大家还遇到什么坑的话,可以邮箱联系我:dxylovelq@163.com