?? 接上篇

2023 最新版IntelliJ IDEA 2023.1創(chuàng)建Java Web 項(xiàng)目詳細(xì)步驟（圖文詳解）

本篇使用當(dāng)前Java Web開發(fā)主流的spring-boot3框架來創(chuàng)建一個Java前后端分離的項(xiàng)目，前端使用的也是目前前端主流的vue3進(jìn)行一個簡單的項(xiàng)目搭建，讓你距離Java全棧開發(fā)更近一步 ?????。

????? 項(xiàng)目構(gòu)建所需的相關(guān)工具

Java

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

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/
• 個人網(wǎng)盤：阿里云網(wǎng)盤下載

?? 后端項(xiàng)目創(chuàng)建詳細(xì)步驟

?? 1、開始創(chuàng)建新項(xiàng)目

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

注：這里沒有JDK17的可以在JDK項(xiàng)目中去選擇后進(jìn)行下載

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

注：因?yàn)橹皇亲鳛橐粋€示例版本，這里只選擇了 spring web，你可以視情況去選擇插件，后期如果需要也可以在 pom.xml文件中進(jìn)行新增

?? 4、等待創(chuàng)建完成，這是創(chuàng)建完成后的項(xiàng)目結(jié)構(gòu)

注：這時已經(jīng)可以點(diǎn)擊項(xiàng)目名稱右側(cè)的綠色小三角形啟動項(xiàng)目了，但是我們沒有寫接口，即使啟動了也沒法做相關(guān)測試

?? 6、配置端口號，如果需要使用數(shù)據(jù)庫或者Redis等，也是在這個文件里面進(jìn)行配置

?? 7、創(chuàng)建接口

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

?? 7.2 在創(chuàng)建的controller包中新建一個 類 ，這里命名為 hello，在hello類中寫測試接口

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

?? 8、點(diǎn)擊項(xiàng)目名稱右邊的綠色的三角形符號、運(yùn)行spring-boot，

下面兩圖運(yùn)行后的IDEA界面以及瀏覽器請求接口的界面

?? 前端vue項(xiàng)目創(chuàng)建詳細(xì)步驟

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

?? 1、vue腳手架全局安裝

npm i -g @vue/cli-init 

?? 2、vue創(chuàng)建

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

vue create app

默認(rèn)選擇的就是Vue 3，enter確認(rèn)就可以了

?? 3、使用VScode打開項(xiàng)目修改請求端口，而后啟動項(xiàng)目

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

?? 3.1 vue.config.js文件中的接口相關(guān)配置

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

?? 3.2 啟動vue 項(xiàng)目

npm run server

?? 最后

至此、完成以上步驟，你就可以搭建一個屬于自己的Java前后端分離項(xiàng)目了，完結(jié)撒花 ??。

今天也是2023年度的六一兒童節(jié)，祝愿我們所有的小朋友節(jié)日快樂，身體健康，幸福成長。??文章來源地址http://www.zghlxwxcb.cn/news/detail-522376.html

到了這里，關(guān)于2023 最新版IntelliJ IDEA 2023.1創(chuàng)建Java Web前（vue3）后端（spring-boot3）分離 項(xiàng)目詳細(xì)步驟（圖文詳解）的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！