Vue+SpringBoot項目實戰(一) 搭建環境

• 2020 年 9 月 16 日
• 筆記
• Vue+SpringBoot項目實戰

GitHub 地址：

//github.com/dongfanger/sprint-backend

//github.com/dongfanger/sprint-frontend

前言

越往高級工程師發展，越明白開發能力的重要性。

所以我決定開發一個項目，邊學習邊開發邊記錄成文，既加深理解，也能幫助大家學習。

我的目標是做教程，讓剛接觸Vue和SpringBoot的小夥伴們，能通過教程動手把項目做出來。

若有疑問，歡迎評論。水平有限，若有紕漏，敬請諒解。

一、項目簡介

• 命名

項目中文名叫「衝刺」，英文名叫「Sprint」。

熟悉Scrum敏捷開發的朋友，都知道，這是迭代的意思。

本項目也是採用敏捷開發的方式（邊學邊寫，不敏捷開發也不行呀），逐漸完善和擴充功能和技術。

另外一個意思，就正如我特別喜歡的一句話，「Never too late to learn」（活到老學到老）。

只管向前沖，不論結果如何，至少已經努力過。

只要努力，永遠不會太遲。

• User Story

初步計劃是做CMS（內容管理系統），接著會做成平台化，如測試平台。

我希望的是，能把這個項目做的個性化一些，不求牛逼，但求實用。

更專業的可以看看開源電商項目mall。（//www.macrozheng.com/#/README）

很棒！

• 技術棧

來源於mall項目。

二、軟體安裝

Node.js //nodejs.org/zh-cn/download/

JDK //www.oracle.com/java/technologies/javase/javase-jdk8-downloads.html

IntelliJ IDEA //www.jetbrains.com/idea/download/#section=windows

具體安裝步驟百度一大把。

不需要安裝WebStorm哦，直接用旗艦版IDEA（你懂的），同時做前端和後端。社區版對前端支援不夠。

三、創建前端項目

首先設置npm淘寶鏡像

npm config set registry //registry.npm.taobao.org

安裝vue/cli3

npm install -g @vue/cli

創建sprint-frontend項目

vue create sprint-frontend

手動選擇

選擇這6個

選擇vue版本，3.x

然後一路回車就好了。

創建完成以後，到目錄下執行

npm run serve

前端項目就創建好了。可以訪問 //localhost:8080/ 看下效果。

記得 ctrl+c 結束哦，因為接下來要創建後端項目了，前端佔用8080埠的話，後端啟動會報錯（後面會單獨設置2個不一樣的埠）。

四、創建後端項目

打開IDEA，New Project

設置項目資訊

選擇組件，開發者工具，先無腦全選，肯定會用到，哈哈

Web選2個

選擇項目存放路徑

Finish，即可完成創建。

然後就會看到這個討厭的玩意，一直在那載入，從url看到是拉的apache.org

不慌，先等它浪一會。

打開IDEA的maven目錄，在安裝路徑下哦

再到這個路徑下，編輯settings.xml

找到<mirrors>標籤，添加程式碼。

這是新版的寫法哦，官網//maven.aliyun.com/mvn/guide有說明

    <mirror>
      <id>aliyunmaven</id>
      <mirrorOf>*</mirrorOf>
      <name>阿里雲公共倉庫</name>
      <url>//maven.aliyun.com/repository/public</url>
    </mirror>

再回到IDEA，打開pom.xml文件，添加一段程式碼

    <repositories>
        <repository>
            <id>public</id>
            <url>//maven.aliyun.com/repository/public</url>
        </repository>
    </repositories>

    <pluginRepositories>
        <pluginRepository>
            <id>public</id>
            <url>//maven.aliyun.com/repository/public</url>
        </pluginRepository>
    </pluginRepositories>

這樣就把maven的中央倉庫從apache替換成了阿里雲中央倉庫。

關掉IDEA，再打開，reload maven

剛才的Resolving咔嚓就跑完了，我都沒來得及截圖！

pom.xml還有一個報錯，spring-boot-maven-plugin not found，加上version就解決了

<version>2.3.3.RELEASE</version>

在src下找到SprintBackendApplication，運行

後端就啟起來了。同樣可以訪問 //localhost:8080/ 看下效果。

備註：其他環境如MySQL、Redis、Nginx等，隨著sprint的進行，到了那裡再講哦。

五、如何初始化項目到Git

git config --global user.name "yourname"
git config --global user.email "youremail"
cd existing-project
git init
git add --all
git commit -m "Initial Commit"
git remote add origin [email protected]:yourname/sprint-backend.git
git pull origin master --allow-unrelated-histories
git push -u origin master

下一個sprint，計劃把登錄頁面做出來，實現JWT鑒權。

版權申明：本文為部落客原創文章，轉載請保留原文鏈接及作者。
如果您喜歡我寫的文章，請關注公眾號支援一下，謝謝哈哈哈。