🚩 接上篇

2023 最新版IntelliJ IDEA 2023.1創建Java Web 項目詳細步驟（圖文詳解）

本篇使用當前Java Web開發主流的spring-boot3框架來創建一個Java前后端分離的項目，前端使用的也是目前前端主流的vue3進行一個簡單的項目搭建，讓你距離Java全棧開發更近一步 🏴???。

🏳?🌈 項目構建所需的相關工具

Java

• 使用版本： “17.0.1” 2021-10-19 LTS
• 官方地址：https://www.oracle.com/java/technologies/downloads/
• DOS查詢：java --version
• 如果不是這個版本的建議使用使用這個版本，別去使用20版本來創建

IDEA

• 使用版本： IntelliJ IDEA 2023.1
• 官方地址：https://www.jetbrains.com/zh-cn/idea/download/#section=windows

maven

• 使用版本：apache-maven-3.9.2
• 官方地址：https://maven.apache.org/download.cgi

NodeJS

• 使用版本：18.16.0
• 官方地址：https://nodejs.org/en

Vue

• 腳手架版本：@vue/cli 5.0.8
• vue版本：3.0 ^
• 官方地址：https://cn.vuejs.org/

Visual Studio Code

• 官方地址：https://code.visualstudio.com/
• 個人網盤：阿里云網盤下載

🌌 后端項目創建詳細步驟

🛫 1、開始創建新項目

🛫 2、輸入項目名稱、選擇項目存儲位置、項目管理工具（Maven）、選擇JDK以及Java版本而后 Next

注：這里沒有JDK17的可以在JDK項目中去選擇后進行下載

🛫 3、選擇spring boot版本、選擇需要的插件而后Create

注：因為只是作為一個示例版本，這里只選擇了 spring web，你可以視情況去選擇插件，后期如果需要也可以在 pom.xml文件中進行新增

🛫 4、等待創建完成，這是創建完成后的項目結構

注：這時已經可以點擊項目名稱右側的綠色小三角形啟動項目了，但是我們沒有寫接口，即使啟動了也沒法做相關測試

🛫 6、配置端口號，如果需要使用數據庫或者Redis等，也是在這個文件里面進行配置

🛫 7、創建接口

🛫 7.1 首先需要在主包（一定得是主包，不然掃描不到這個接口）中創建一個命名為controller（也可以用其它名字，不過為了規范，基本是使用這個來命名）的包

🛫 7.2 在創建的controller包中新建一個 類 ，這里命名為 hello，在hello類中寫測試接口

package com.example.springboot3demo.controtler;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
@RestController
public class hello {@GetMapping("/hello")public String index(){return "hello spring-boot3";}
}

🛫 8、點擊項目名稱右邊的綠色的三角形符號、運行spring-boot，

下面兩圖運行后的IDEA界面以及瀏覽器請求接口的界面

🪐 前端vue項目創建詳細步驟

相對于后端的搭建，前端就輕松很多了，只需要輸入命令即可完成項目搭建和下載、啟動，使用VScode編輯項目

🚤 1、vue腳手架全局安裝

npm i -g @vue/cli-init 

🚤 2、vue創建

在項目目錄位置打開cmd窗口，而后輸入以下命令，app是項目名，你可以自定義

vue create app

默認選擇的就是Vue 3，enter確認就可以了

🚤 3、使用VScode打開項目修改請求端口，而后啟動項目

此時，前端只要是用 /api開頭的請求，都會被轉發至 我們新創建的那個項目下，至于怎么請求，可以參考我這里給出的鏈接這篇文章，就不做贅言了
axios和async / await的基本用法

🚤 3.1 vue.config.js文件中的接口相關配置

const {defineConfig
} = require('@vue/cli-service')
module.exports = defineConfig({transpileDependencies: true,lintOnSave: false, //關閉語法檢查assetsDir: "static",devServer: {port: "8000",proxy: {'/api': {target: 'http://127.0.0.1:9000',pathRewrite: {'^/api': '/api'},changeOrigin: true,ws: true}}},
})

🚤 3.2 啟動vue 項目

npm run server

🌏 最后

至此、完成以上步驟，你就可以搭建一個屬于自己的Java前后端分離項目了，完結撒花 🌼。

今天也是2023年度的六一兒童節，祝愿我們所有的小朋友節日快樂，身體健康，幸福成長。💐