【原創】Asp.NET Core Web API與Vue 3.0搭建前後分離項目

特地記錄一下，網上的教程寫的稀里糊塗的，整得我都心塞塞的，其實實現的過程蠻簡單的

問題是這樣的：我將Vue構建生成好的文件，放在後端wwwroot文件裏面，並開啟靜態文件訪問功能，結果總是無法顯示相應的Vue頁面，其原因在於路徑沒有帶#，導致路由失敗

網上找了很久，很少有這麼搭建項目的教程，還是記錄一下，算是鋪路叭~

後端：Asp.NET Core Web API，版本是 .NET 6

前端：Vue 3 + Vite 

後端WebAPI部分：

1) Program.cs

在app.UseHttpsRedirection();下面添加這兩行代碼，用來啟用靜態文件的訪問：

app.UseDefaultFiles();
app.UseStaticFiles();

2）控制器代碼

在類名的上方添加 [Route(“api/[controller]/[action]”)]

 [ApiController]
 [Route("api/[controller]/[action]")]
 public class AccountController :  ControllerBase
 {
      //your code
 }

3) 跨域策略(可有可無)

正常是前端調用後端接口，是不需要配置跨域的，如果有需要，可以在Program.cs添加跨域策略

//添加跨域策略
builder.Services.AddCors(options =>
{
      // 這定義了一個名為 ``default`` 的 CORS 策略
      options.AddPolicy("default", policy =>
       {
             policy.AllowAnyOrigin()
                 .AllowAnyHeader()
                 .AllowAnyMethod();
         });
});

在var app = builder.Build();後面添加使用

 app.UseCors("default");

4）創建一個wwwroot的文件夾，這個文件夾用來放置Vue編譯後生成的文件，拷過來放進去就可以

以上就是後端部分要配置的

 

前端Vue部分：

       由於我趕潮流，用上Vue3 + Vite，於是踩上坑了，導致一直訪問不到前端的頁面，顯示404錯誤。

主要問題在於vue的路由配置方面：vue-router路由版本：4以上，路由代碼如下：

 

import { createRouter, createWebHashHistory, createWebHistory, RouteRecordRaw } from 'vue-router';
import home from '../components/home.vue'
const routes = [
 {
    path: '/',
    name: 'Home',
    component:  home
  }
]
 
/**
 * 定義返回模塊
 */
const router = createRouter({
  history: createWebHashHistory(), 
  routes
})
 
export default router

 

注意看上面的history，如果設置為createWebHistory()那麼頁面的訪問路徑裏面是沒有#的,比如 //baseUrl/Home；

如果設置為createWebHashHistory()，那頁面的訪問路徑就需要帶#，比如 //baseUrl/#/Home

這兩者區別非常大！！！

像這種前端是搭配後端WebAPI一起使用的，如果URL沒有#這個分隔符，後端服務會將訪問的URL路由到相應的控制器上，如果沒有對應的控制器，可想而知，它會送你一個404

但是帶上#就不一樣，URL路由的解析工作是Vue中，由vue-router，這樣你配置的路由，才會正確顯示對應的頁面

這裡猜想，不帶#的這種形式，應該是為了部署在Nginx、Apache這種服務器使用

最後把Vue項目編譯構建後，生成的文件放在後端wwwroot文件夾就好了，它會自動解析的

 

調用後端API接口時，可以用axios，然後像這樣丟過去

 

import axios from "axios";
function logout() {
    let data={
      Msg:'Hello World'
    }
    axios
    .post("api/Home/Hello",data)
    .then((res) => {
      console.log(res);
    })
    .catch((err) => {
      console.log("發生異常：" + err);
    });
}

 

看看 .post(“api/Home/Hello”,data)，Post的地址相當於//baseurl/api/Home/Hello，也就是說沒有出現跨域的情況，前面跨域的配置可有可無

 

 

End~

 

 臨時寫了demo：//files.cnblogs.com/files/iDream2018/VueWithWebAPIdemo.rar?t=1659951302

記得用vite創建vue項目 

npm init vite@latest my-vue-app --template vue

 

 

 

 

 

 

Tags:

VirMach 便宜 VPS

QNews

QNews