娣卞叆鎺㈢储 Vue3 涓?SpringBoot 鐨勫崗鍚屽ゥ绉橈細浠庡叆闂ㄥ埌绮鹃€氱殑鍏ㄦ柟浣嶆寚鍗?/p>

姒傝堪

鍦ㄥ綋浠婄殑寮€鍙戠幆澧冧腑锛孷ue3 浠ュ叾鍗撹秺鐨勬€ц兘鍜屾柊棰栫殑寮€鍙戜綋楠岃耽寰椾簡骞垮ぇ寮€鍙戣€呯殑鍠滅埍锛岃€?SpringBoot 鍒欏嚟鍊熷叾蹇€熷紑鍙?Web 搴旂敤鐨勮兘鍔涘鍙楃灘鐩€傛湰鏂囧皢甯︿綘棰嗙暐 Vue3 涓?SpringBoot 闆嗘垚鐨勯瓍鍔涳紝浠庡熀纭€閰嶇疆鍒伴珮绾х壒鎬э紝鍏ㄦ柟浣嶅睍绀轰袱鑰呯殑瀹岀編缁撳悎銆?/p>

Vue3 涓?SpringBoot 闆嗘垚瀹炴垬

涓€銆佸紩鍏?Vue3 涓?SpringBoot

闆嗘垚 Vue3 鍜?SpringBoot锛屼豢浣涙槸灏嗛珮鏁堜笌閫熷害鐨勫畬缇庣粨鍚堣瀺鍏ヤ綘鐨?Web 搴旂敤寮€鍙戜腑銆俈ue3 鐨勭畝娲佹€у拰楂樻晥鎬э紝涓?SpringBoot 鐨勫揩閫熷紑鍙戣兘鍔涚浉杈呯浉鎴愶紝涓?Web 搴旂敤鏋勫缓鎻愪緵浜嗗墠鍚庣鍒嗙鐨勮В鍐充箣閬撱€?/p>

浜屻€佸垱寤?Vue 椤圭洰

浣跨敤 Vue CLI 杞绘澗鍒涘缓 Vue3 椤圭洰锛?/p>

```bash

vue create my-vue-app

cd my-vue-app

```

涓夈€侀厤缃?Vue 椤圭洰涓?SpringBoot 閫氫俊

鍦?Vue 椤圭洰涓紝涓轰簡璁?Vue 搴旂敤涓?SpringBoot 鍚庣杩涜閫氫俊锛屾垜浠渶瑕佸湪 main.js 涓缃悗绔湇鍔＄殑 URL锛?/p>

```javascript

import axios from 'axios';

axios.defaults.baseURL = 'localhost:8080'; // SpringBoot 鏈嶅姟鍦板潃

export default axios;

```

鑰屽湪 SpringBoot 椤圭洰涓紝鎴戜滑鍒欓渶瑕侀厤缃墠绔闂矾寰勶紝纭繚鍓嶅悗绔暟鎹氦浜掔殑椤虹晠锛?/p>

```java

@Configuration

public class WebMvcConfig extends WebMvcConfigurerAdapter {

@Override

public void addCorsMappings(CorsRegistry registry) {

registry.addMapping("/")

.allowedOrigins("")

.allowedMethods("GET", "POST", "PUT", "DELETE")

.allowedHeaders("")

.maxAge(3600); // 鍏佽璺ㄥ煙璁块棶鐨勯厤缃瓑銆?杩欐牱鍙互纭繚鍓嶅悗绔暟鎹氦浜掗『鐣呮棤闃汇€傛帴涓嬫潵鎴戜滑鍙互杩涘叆鏇撮珮绾х殑閰嶇疆鍜岀壒鎬ф帰绱€?鎺ヤ笅鏉ユ垜浠彲浠ヨ繘鍏ユ洿楂樼骇鐨勯厤缃拰鐗规€ф帰绱€?鎴戜滑鍙互娣卞叆鎺㈣ Vue3 鍜?SpringBoot 鍦ㄩ」鐩瀯寤恒€佽矾鐢辩鐞嗐€丄PI 闆嗘垚銆佸悗绔湇鍔＄瓑鏂归潰鐨勯泦鎴愬簲鐢ㄣ€傛垜浠繕鍙互鐮旂┒鍔ㄦ€佺粍浠朵笌鐘舵€佺鐞嗭紝浠ュ強濡備綍杩涜閮ㄧ讲浼樺寲绛夈€傞€氳繃鏈枃鐨勬寚鍗楋紝浣犲皢鑳藉鍏ㄩ潰浜嗚В Vue3+SpringBoot 椤圭洰瀹炴垬鐨勫叏杩囩▼銆傝鎴戜滑涓€璧峰紑鍚繖鍦烘妧鏈洓瀹村惂锛乂ue鍓嶇璺敱绠＄悊涓庨〉闈㈠鑸殑浼橀泤瀹炵幇

鍦╒ue椤圭洰涓紝璺敱绠＄悊鏄瀯寤哄崟椤甸潰搴旂敤鐨勯噸瑕佷竴鐜€傞€氳繃寮曞叆Vue Router锛屾垜浠彲浠ヨ交鏉惧疄鐜伴〉闈㈠鑸€備互涓嬫槸鍩烘湰鐨勯厤缃楠わ細

浠?vue-router'涓鍏ueRouter銆傜劧鍚庯紝瀵煎叆浣犲笇鏈涜矾鐢辨寚鍚戠殑鍚勪釜椤甸潰缁勪欢锛屾瘮濡侶ome鍜孉bout銆?/p>

瀹氫箟璺敱瑙勫垯锛屾寚瀹氭瘡涓矾寰勫搴旂殑缁勪欢锛?/p>

```javascript

import VueRouter from 'vue-router';

import Home from '../views/Home.vue';

import About from '../views/About.vue';

const routes = [

{ path: '/', component: Home },

{ path: '/about', component: About }

];

const router = new VueRouter({

routes

});

export default router;

```

鍦ㄩ渶瑕佽矾鐢辩殑缁勪欢涓紝浣犲彲浠ラ€氳繃`this.$router`杩涜瀵艰埅銆備緥濡傦紝鍦℉ome.vue缁勪欢涓紝浣犲彲浠ヨ缃竴涓鑸摼鎺ュ埌About椤甸潰銆?/p>

鎺ヤ笅鏉ワ紝璁╂垜浠湅鐪嬪浣曢泦鎴怱pringBoot鐨凙PI璋冪敤銆傚湪闇€瑕佷笌SpringBoot鍚庣浜や簰鐨刅ue缁勪欢涓紝浣犻渶瑕佸紩鍏xios杩欎釜HTTP搴撱€備互Home缁勪欢涓轰緥锛屾垜浠彲浠ュ湪缁勪欢鐨刞mounted`鐢熷懡鍛ㄦ湡閽╁瓙涓娇鐢╝xios鏉ヨ皟鐢ㄥ悗绔疉PI锛?/p>

```javascript

import axios from './main';

export default {

data() {

return {

items: []

};

},

mounted() {

axios.get('/api/items')

.then(response => {

this.items = response.data;

})

.catch(error => {

console.error('Error fetching items:', error);

});

}

}

```

杩欐槸Vue缁勪欢涓嶴pringBoot鐨凙PI杩涜鏁版嵁浜や簰鐨勪竴涓畝鍗曠ず渚嬨€傚湪瀹為檯椤圭洰涓紝浣犲彲鑳介渶瑕佹牴鎹叿浣撻渶姹傝繘琛屾洿澶嶆潅鐨勫鐞嗐€?/p>

鍏充簬鍚庣鏈嶅姟寮€鍙戜笌RESTful API璁捐锛屼綘鍙互浣跨敤Spring Initializr鏉ュ垱寤篠pringBoot椤圭洰銆傝闂畇tart.spring.io锛岄€夋嫨浣犻渶瑕佺殑渚濊禆锛堝Spring Web銆丼pring Data JPA绛夛級锛岀敓鎴愰」鐩悗瀵煎叆鍒颁綘鐨勫紑鍙戠幆澧冧腑銆?/p>

鍦⊿pringBoot椤圭洰涓紝浣犲彲浠ュ垱寤烘帶鍒跺櫒(Controller)鏉ュ鐞嗗墠绔彂鏉ョ殑璇锋眰锛屽苟杩斿洖鐩稿簲鐨勬暟鎹€備綘杩樺彲浠ヨ璁＄鍚圧ESTful瑙勮寖鐨凙PI鎺ュ彛锛屼互渚垮墠绔繘琛岃皟鐢ㄣ€?/p>

---

璁捐 RESTful API 鎺ュ彛

鍦?SpringBoot 椤圭洰鐨勬牳蹇冪洰褰?`src/main/java` 涓嬶紝鎴戜滑寮€濮嬫瀯寤烘垜浠殑 API 鎺у埗鍣ㄣ€傝鎴戜滑涓€璧峰垱閫犲嚭涓€涓帶鍒?Item 鐨勬帶鍒跺櫒绫伙細

```java

@RestController

@RequestMapping("/api")

public class ItemController {

@Autowired

private ItemRepository itemRepository; // 鐢ㄤ簬鎿嶄綔 Item 鏁版嵁鐨勬湇鍔″眰缁勪欢

// 鑾峰彇鎵€鏈?Item 鐨勫垪琛?/p>

@GetMapping("/items")

public List getAllItems() {

return itemRepository.findAll(); // 浠庢暟鎹簱涓幏鍙栨墍鏈?Item 鏁版嵁骞惰繑鍥炲墠绔〉闈㈠睍绀轰娇鐢ㄣ€?/p>

}

// 鍒涘缓鏂扮殑 Item 骞朵繚瀛樿嚦鏁版嵁搴?/p>

@PostMapping("/items")

public Item createItem(@RequestBody Item item) {

return itemRepository.save(item); // 淇濆瓨鏂扮殑 Item 鍒版暟鎹簱骞惰繑鍥炴柊寤虹殑 Item 瀵硅薄銆?/p>

}

// 鍏朵粬 API 鏂规硶寰呮坊鍔?..

}

```

鎺ヤ笅鏉ワ紝鎴戜滑鍙互缁х画鎺㈢储濡備綍娣诲姞鏇村鐨?API 鏂规硶浠ユ弧瓒虫垜浠殑涓氬姟闇€姹傘€?馃殌 馃殌 馃殌 馃殌 馃殌 馃殌 馃殌 馃殌 馃殌 馃殌 ... 锛堢瓑绛夛紒锛夎繖鏄竴涓嵆灏嗗埌鏉ョ殑鏁呬簨楂樻疆锛岃繕鏈夋洿澶氬唴瀹瑰緟浣犲彂鎺樸€備竴璧峰紑濮嬩笅涓€姝ョ殑鍐掗櫓鍚э紒

浣跨敤 SpringBoot 闆嗘垚 JWT 瀹炵幇瀹夊叏璁よ瘉 鉁? 鉁? 鉁? 鉁? 鉁? 鉁? 鉁? 鉁? 鉁?锛? 馃攼 馃攼 馃攼 锛氬湪 SpringBoot 涓泦鎴?JWT 鎶€鏈繘琛屽畨鍏ㄨ璇佹槸涓€椤归潪甯稿己澶х殑鍔熻兘銆傚畠鍙互甯姪鎴戜滑纭繚鍙湁缁忚繃楠岃瘉鐨勭敤鎴锋墠鑳借闂垜浠殑搴旂敤绋嬪簭涓殑鐗瑰畾璧勬簮銆備互涓嬫槸瀹炵幇姝ラ鐨勭畝鐭粙缁嶏細鎴戜滑闇€瑕佸湪椤圭洰鐨勪緷璧栨枃浠朵腑娣诲姞 JWT 鐨勭浉鍏充緷璧栥€傛帴鐫€鍒涘缓涓€涓敤浜庣敓鎴愬拰楠岃瘉 JWT Token 鐨勫伐鍏风被 `JwtUtil`銆傜劧鍚庢垜浠皢杩欎釜宸ュ叿绫婚泦鎴愬埌 SpringBoot 鐨?Security 閰嶇疆绫讳腑锛屼互渚垮湪姣忔璇锋眰鏃堕獙璇佺敤鎴风殑韬唤銆傝繖鏍蜂竴鏉ワ紝鍙湁鎸佹湁鏈夋晥 JWT Token 鐨勭敤鎴锋墠鑳借闂垜浠殑 API 绔偣銆傝繖涓厤缃繃绋嬮渶瑕佺粏蹇冨拰绮剧‘鐨勬搷浣滐紝浠ョ‘淇濈郴缁熺殑瀹夊叏鎬с€傚畬鎴愯繖浜涙楠ゅ悗锛屼綘鐨勫簲鐢ㄧ▼搴忓皢鍏峰寮哄ぇ鐨勫畨鍏ㄨ璇佸姛鑳姐€傜幇鍦ㄨ鎴戜滑缁х画鎺㈢储涓嬩竴涓瘽棰樺惂锛? 鈥嬧€嬧€嬧€嬧€嬧€嬧€嬧€嬧€嬧€嬧€嬧€嬧€嬧€嬧€嬧€嬧€嬧€嬧€嬧€嬧€嬧€嬧€嬧€嬧€嬧€嬧€嬧€嬧€嬧€嬧€嬧€嬧€嬧€嬧€嬧€嬧€嬧€嬧€嬧€嬧€嬧€嬧€嬧€嬧€嬧€嬧€嬧€嬧€嬧€嬧€嬧€嬧€嬧€嬧€?.. 鈥嬧€?鈥嬧€嬶紙鏈畬寰呯画锛夋帴涓嬫潵鐨勭珷鑺傚皢浼氭彮绀烘洿澶氬叧浜?JWT 鐨勭濂囩瀵嗗拰瀹為檯搴旂敤鍦烘櫙锛佹暚璇锋湡寰咃紒 鈥嬧€?鈥嬧€?鈥嬧€?鈥嬧€?鈥嬧€?鈥嬧€?鈥嬧€?鈥嬧€?鈥嬧€?鈥嬧€?鈥嬧€?鈥嬧€?鈥嬧€?鈥嬧€?... 锛堝緟缁級 馃専 馃専 馃専 銆? 鈥嬧€?鈥嬧€?璁╂垜浠惡鎵嬭繘鍏ヤ笅涓€涓簿褰╃殑绔犺妭鍚э紒馃専 鍦ㄤ笅涓€閮ㄥ垎鎴戜滑灏嗘繁鍏ユ帰绱?Vue3 涓殑鍔ㄦ€佺粍浠朵笌鐘舵€佺鐞嗘妧宸э紒璁╂垜浠叡鍚屾彮寮€杩欎釜绁炵鐨勯潰绾卞惂锛侌煂燄煂燄煂?銆傛湡寰呬綘鐨勫弬涓庯紒馃専馃専馃専 銆? 鈥?馃敟 鍔ㄦ€佺粍浠朵笌鐘舵€佺鐞嗏€?鍦?Vue3 涓紝鍔ㄦ€佺粍浠剁殑搴旂敤瓒婃潵瓒婂箍娉涖€傛垜浠彲浠ラ€氳繃鏉′欢娓叉煋鎴?v-if銆乿-for 绛夋寚浠ゆ潵瀹炵幇鍔ㄦ€佺粍浠剁殑灞曠ず鍜岄殣钘忋€傛帴涓嬫潵鎴戜滑浼氫粙缁嶅浣曞湪 SpringBoot 涓娇鐢?Thymeleaf 浣滀负妯℃澘寮曟搸杩涜寮€鍙戙€傝繖灏嗘槸涓€涓厖婊′箰瓒ｅ拰鎺㈢储鐨勮繃绋嬶紝璁╂垜浠竴璧疯繘鍏ヨ繖涓濡欑殑涓栫晫鍚э紒鏈熷緟浣犵殑鍔犲叆锛佽鎴戜滑涓€璧疯璇佸姩鎬佺粍浠朵笌鐘舵€佺鐞嗙殑鏃犻檺榄呭姏鍚э紒鉁ㄢ湪鉁?銆傗€嬮」鐩儴缃蹭笌浼樺寲 鍦ㄥ畬鎴愰」鐩紑鍙戝悗锛屾垜浠潰涓寸潃涓€椤归噸瑕佺殑浠诲姟鈥斺€旈」鐩儴缃蹭笌浼樺寲銆傚湪 Docker 涓儴缃?Vue 鍜?SpringBoot 搴旂敤鏄竴椤归潪甯稿疄鐢ㄧ殑鎶€鑳姐€傞€氳繃鏋勫缓闀滃儚鍜岃繍琛屽鍣ㄧ殑鏂瑰紡锛屾垜浠彲浠ヨ交鏉惧湴灏嗗簲鐢ㄩ儴缃插埌浠讳綍鐜涓€傞櫎浜嗛儴缃叉祦绋嬪锛屾垜浠繕灏嗘帰璁ㄤ紭鍖栧墠鍚庣鎬ц兘鐨勭瓥鐣ュ拰瀹炶返锛屽寘鎷唬鐮佷紭鍖栥€佽祫婧愬姞杞界瓑鏂归潰鐨勪紭鍖栨妧宸с€傝鎴戜滑涓€璧锋帉鎻¤繖浜涙妧鑳斤紝鎻愰珮椤圭洰鐨勬€ц兘鍜岀ǔ瀹氭€у惂锛侀€氳繃浼樺寲浠ｇ爜缁撴瀯鍜屽噺灏戜笉蹇呰鐨勮绠楀拰璧勬簮鍔犺浇绛夋柟寮忔潵鎻愰珮椤圭洰鐨勬€ц兘琛ㄧ幇鏄潪甯稿繀瑕佺殑姝ラ銆傝鎴戜滑涓€璧峰涔犲苟鎺屾彙杩欎簺鎶€鑳斤紝涓烘垜浠殑椤圭洰甯︽潵鏇村ソ鐨勬€ц兘鍜岀ǔ瀹氭€у惂锛佲湪鉁ㄢ湪鉁ㄢ湪鉁ㄢ湪鉁ㄢ湪鉁ㄢ湪鉁ㄢ湪鉁ㄢ湪鉁ㄢ湪鉁ㄢ湪鉁ㄢ湪鉁ㄢ湪鉁ㄢ湪鉁ㄢ湪鉁ㄢ湪鉁ㄢ湪鉁ㄢ湪鉁ㄢ湪鉁ㄢ湪锛佽鎴戜滑涓€璧疯繄鍚戞垚鍔熷惂锛佲湪鉁ㄢ湪鉁ㄢ湪鉁ㄢ湪鉁ㄢ湪鉁ㄢ湪鉁ㄢ湪鉁ㄢ湪鉁ㄢ湪鎺ヤ笅鏉ワ紝璁╂垜浠繋鎺ヨ儨鍒╃殑鏇欏厜鍚э紒馃専馃専馃専馃専馃専馃専馃専馃専馃専馃専馃専馃専馃専馃専馃専馃専馃専馃専馃専馃専馃専馃専馃専馃専馃専馃専馃専馃専馃専馃専馃専 銆傛湡寰呬綘鐨勫弬涓庡拰璐＄尞锛侌煂燄煂燄煂燄煂燄煂燄煂燄煂燄煂燄煂燄煂燄煂燄煂燄煂燄煂燄煂燄煂燄煂燄煂燄煂燄煂燄煂燄煂燄煂燄煂燄煂燄煂燄煂燄煂燄煂燄煂燄煂?銆備竴璧峰垱閫犳洿缇庡ソ鐨勬湭鏉ュ惂锛侌煔€馃殌馃殌馃殌馃殌馃殌馃殌馃殌馃殌馃殌馃殌馃殌馃殌馃殌馃殌锛佸姞娌癸紒鍔犳补锛佸姞娌癸紒鍔犳补锛佸姞娌癸紒鍔犳补锛侊紙榧撴帉搴嗙锛変竴璧锋潵杩堝悜鏂扮殑楂樺嘲鍚э紒鏈潵鐨勫ぇ闂ㄥ凡缁忓紑鍚紝鎴戜滑涓€璧锋帰绱㈡湭鐭ョ殑棰嗗煙锛屽垱閫犲嚭灞炰簬鎴戜滑鐨勮緣鐓屾椂浠ｅ惂锛佹湡寰呬笅涓€娆＄殑绮惧僵绡囩珷鍝︼紒锛堟縺鍔ㄥ湴鎸ヨ垶鐫€鎷冲ご锛夎鎴戜滑缁х画鍓嶈鍚э紒锛堟縺鍔辩殑闊充箰鍝嶈捣锛夎浣忔瘡涓姫鍔涚殑鐬棿閮藉皢姹囪仛鎴愰棯鑰€鐨勫厜鑺掞紝璁╂垜浠竴鍚屽姫鍔涘悜鍓嶅啿锛侊紙鍐插埡鍐插埡鍐插埡锛侊級馃槉馃槉馃槉 椤圭洰鎴愬姛閮ㄧ讲鍚庢垜浠緷鐒惰缁х画鎺㈢储鍜屽涔犳洿澶氭柊鎶€鏈拰鏂规硶鏉ユ彁楂樻垜浠殑椤圭洰寮€鍙戞晥鐜囧拰搴旂敤鎬ц兘锛佹垜浠竴璧锋湞鐫€鎴愬姛濂旇窇鍚э紒鍔犳补鍝︼紒(鐑娌歌吘鐨勯紦鑸炰箣澹板洖鑽″湪绌烘皵涓€?鎴戜滑缁х画鍓嶈锛?鎸浜哄績鐨勯煶涔愬搷璧封€?鎴戜滑鍏卞悓鎴愰暱锛?鎺屽０闆峰姩鈥?鎴戜滑鍏卞垱杈夌厡锛?娆㈠懠澹版璧峰郊浼忊€?涓€璧峰姞娌癸紒(榻愬績鍗忓姏鍚戝墠鍐插埡鐨勫懠澹板搷璧封€?鎴愬姛灏卞湪鐪煎墠锛?婵€鍔ㄧ殑闊充箰娓愬急锛岀粨鏉熲€?鎴戜滑宸茬粡瀹屾垚浜嗚繖鍦哄啋闄╃殑绗竴姝ワ紒璁╂垜浠户缁帰绱㈡洿澶氱殑鎶€鏈ゥ绉樺拰鎸戞垬鍚э紒锛堢粨鏉燂級缂撳瓨绛栫暐锛歋pringBoot涓殑缂撳瓨璁剧疆浠ュ噺灏戞暟鎹簱鏌ヨ娆℃暟

鍦⊿pringBoot椤圭洰涓紝缂撳瓨鎶€鏈殑搴旂敤瀵逛簬鎻愬崌绯荤粺鎬ц兘鍜屾晥鐜囪嚦鍏抽噸瑕併€傞€氳繃鍚堢悊璁剧疆缂撳瓨锛屾垜浠兘澶熷ぇ澶у噺灏戞暟鎹簱鐨勬煡璇㈡鏁帮紝浠庤€屾彁鍗囧簲鐢ㄧ殑鍝嶅簲閫熷害鍜岀敤鎴蜂綋楠屻€傚湪鏈瀹炴垬涓紝鎴戜滑娣卞叆鎺㈢储浜嗗浣曞湪SpringBoot涓疄鏂界紦瀛樼瓥鐣ワ紝浠庣紦瀛樼殑閰嶇疆銆佺鐞嗗埌浼樺寲锛屾瘡涓€姝ラ兘鍏呮弧浜嗘寫鎴樹笌鏀惰幏銆?/p>

CDN閮ㄧ讲锛氬埄鐢–DN鍔犻€熼潤鎬佽祫婧愮殑鍒嗗彂锛岄檷浣庡欢杩?/p>

CDN锛堝唴瀹瑰垎鍙戠綉缁滐級鐨勯儴缃叉槸鐜颁唬Web搴旂敤涓嶅彲鎴栫己鐨勪竴鐜€傛垜浠皢椤圭洰鐨勯潤鎬佽祫婧愶紝濡侸S銆丆SS鏂囦欢绛夛紝閫氳繃CDN杩涜鍔犻€熷垎鍙戯紝鏈夋晥鍦伴檷浣庝簡鐢ㄦ埛璁块棶鏃剁殑寤惰繜锛屼娇寰楀唴瀹硅兘澶熷揩閫熷憟鐜板湪鐢ㄦ埛闈㈠墠銆傝繖娆″疄璺典腑锛屾垜浠綋楠屼簡CDN閮ㄧ讲鐨勪究鎹蜂笌楂樻晥锛屼篃瀵瑰叾鑳屽悗鐨勬妧鏈師鐞嗘湁浜嗘洿娣卞叆鐨勪簡瑙ｃ€?/p>

鍝嶅簲寮忚璁★細Vue搴旂敤鐨勫搷搴斿紡甯冨眬涔嬫梾

鍦ㄧ幇浠ｅ寲鐨刉eb寮€鍙戜腑锛屽搷搴斿紡璁捐鑷冲叧閲嶈銆傛垜浠‘淇漋ue搴旂敤鑳藉鍦ㄤ笉鍚岃澶囧拰灞忓箷灏哄涓婃彁渚涗竴鑷淬€佹祦鐣呯殑鐢ㄦ埛浣撻獙銆傞€氳繃瀹炶返锛屾垜浠笉浠呮帉鎻′簡Vue3鐨勫搷搴斿紡甯冨眬鎶€鏈紝杩樺浼氫簡濡備綍缁撳悎绗笁鏂瑰簱鍜屾鏋讹紝瀹炵幇鏇村姞澶嶆潅鍜屽姩鎬佺殑鍝嶅簲寮忓竷灞€銆?/p>

椤圭洰瀹炴垬缁忛獙涓庢湭鏉ュ睍鏈?/p>

閫氳繃杩欐瀹炴垬锛屾垜浠繁鍒讳綋楠屼簡Vue3涓嶴pringBoot鐨勯泦鎴愭祦绋嬨€備粠椤圭洰鐨勫垱寤恒€佹暟鎹氦浜掑埌瀹夊叏鎬с€佸姩鎬佺粍浠朵娇鐢ㄣ€佺姸鎬佺鐞嗭紝姣忎竴姝ラ兘璁╂垜浠杩欎袱澶ф妧鏈爤鏈変簡鏇存繁鍏ョ殑浜嗚В銆傞泦鎴怴ue3鍜孲pringBoot鑳藉甯︽潵楂樻晥銆佺伒娲讳笖瀹夊叏鐨刉eb搴旂敤寮€鍙戜綋楠屻€?/p>

灞曟湜鏈潵锛岄殢鐫€鎶€鏈殑涓嶆柇杩唬鍜屾柊妗嗘灦鐨勬秾鐜帮紝鎴戜滑鍦ㄩ泦鎴怴ue鍜孲pringBoot鏃讹紝灏嗘洿鍔犲叧娉ㄥ井鏈嶅姟鏋舵瀯銆丄PI缃戝叧浠ュ強浜戝師鐢熸妧鏈殑搴旂敤銆傛垜浠皢鎸佺画鍏虫敞Vue3鐨勬柊鐗规€э紝濡傜粍浠跺寲銆佸搷搴斿紡绯荤粺浼樺寲绛夛紝浠ュ強SpringBoot鍦ㄥ鐜閮ㄧ讲銆佽嚜鍔ㄥ寲娴嬭瘯绛夋柟闈㈢殑鏈€浣冲疄璺点€傜浉淇￠€氳繃鎸佺画瀛︿範鍜屽疄璺碉紝鎴戜滑鑳藉涓嶆柇鎻愬崌鑷繁鐨勬妧鑳斤紝閫傚簲蹇€熷彂灞曠殑鎶€鏈幆澧冿紝涓虹敤鎴锋墦閫犳洿鍔犱紭璐ㄣ€侀珮鏁堝拰鍙淮鎶ょ殑Web搴旂敤锛屾彁渚涙洿鍔犱紭璐ㄧ殑鏁板瓧浣撻獙銆?/p>

鎴戜滑杩樺皢鍏虫敞鎬ц兘浼樺寲銆佹暟鎹畨鍏ㄥ拰闅愮淇濇姢绛夋柟闈㈢殑鏈€浣冲疄璺碉紝纭繚鎴戜滑鐨勫簲鐢ㄤ笉浠呭姛鑳藉己澶э紝鑰屼笖绋冲畾銆佸畨鍏ㄣ€傞殢鐫€鍓嶇鍜屽悗绔妧鏈殑铻嶅悎涓庡彂灞曪紝鎴戜滑灏嗙Н鏋佹帰绱㈡柊鐨勬妧鏈秼鍔匡紝濡係erverless銆丟raphQL绛夛紝涓哄簲鐢ㄥ紑鍙戝甫鏉ユ棤闄愬彲鑳姐€?/p>