.NET Core與Vue3登入者和角色授權管理功能模組(用js版本,cors+Identity+Jwt)_如何將vue專案加至方案中

專案目錄創建一個VueNetCore專案根目錄
以下會針對前端及後端分門別類都設置一個特定子目錄

前端部份
於站台根目錄下
透過npm init vue@latest
可參考:
產生vue前端專案目錄後
就可以去命名專案名稱要叫捨麼->這邊取名為vue-project
是否用typeacript->這邊先暫時不要
(預設可直接都enter移用No的選擇)

緊接著cd vue-project後
下npm install 
等相依套件下載完
執行npm run dev就可跑起vue專案


針對vue-project專案下載幾個所需用到的前端套件
(1)bootstrap : for 樣式頁面布局
npm install bootstrap

開啟src/main.js 
將樣式跟js引用

如果有出現這個錯誤,因為bootstrap5依賴Popper.js Core

[ERROR] Could not resolve "@popperjs/core"

記得補下載
npm install @popperjs/core --save

若是bootstrap4則需要popper.js
npm install popper.js --save



(2)vue-router: for路由導覽(安裝第四版本的路由套件)
npm install vue-router@4
緊接著開始撰寫路由程式碼規則
在src目錄下新建一個router.js檔案


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
import { createRouter, createWebHistory } from 'vue-router' //導入createRouter,createWebHistory方法
//建立路由
const router = createRouter({
    history: createWebHistory(), //html5 history
    routes: [
        {
            name: 'Home',   //路由名
            path: '/',  // URL訪問路徑
            component: () => import('@/components/Home.vue'), //指定URL路徑訪問時要指向到哪個單一文檔組件(import進來)
            meta: {//配置key-value的路由傳參
                title: '首頁' //每頁標題
            }
        },
    ]
})
export default router;


路由配置組件導入時候,採用'@'符號,這是因為在vite.config.js文件中有這塊預設配置
因此@就代表./src路徑
而'@/components/Home.vue' 就代表 './src/components/Home.vue'
針對URL路徑,./代表目前路徑。所以對於vue路由中的相關配置,導入的vue元件必須要存在於src/components目錄中,因此再增加一個Home.vue元件。
記得把router.js引用到main.js中


(3)axios: for http請求呼叫
npm install axios
於vue中我們想藉由axios來進行跟後端web api的http請求互動
於src目錄下新增一個axios.js程式檔案,進行http請求發送的共用配置。

1
2
3
4
5
6
7
8
9
import axios from 'axios';//引入axios模組,import後面這裡不需大花括號,因為引入的是整體。

//產生http請求
const axiosAPI = axios.create({
    baseURL: 'https://localhost:7150', //根URL配置(web api的基本主URL)
    timeout:50000 //超時門檻配置
})

export default axiosAPI


後端對應Base URL:




https://localhost:7150


接著於main.js中也一併引入axios
完整main.js程式碼

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap'
import './assets/main.css'
import axios from './axios'
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'//引用路由js
const app = createApp(App);
app.config.globalProperties.$axios = axios;
app.use(router);//使用路由配置
app.mount('#app')

完整的package.json

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
{
  "name": "vue-project",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@popperjs/core": "^2.11.8",
    "axios": "^1.4.0",
    "bootstrap": "^5.3.0",
    "vue": "^3.3.4",
    "vue-router": "^4.2.2"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.2.3",
    "vite": "^4.3.9"
  }
}

後端部份

再用vs2022創建一個.net6 web api專案
專案名稱命名為Vue.NET.Identity.Auth
這邊選的是有使用控制器並取消使用最小API的版本
啟用OpenAPI文檔配置

在此vue跟webapi兩個算是在兩台不同server運行的
因為不同port視為非同源
因此需要在web api進行跨域CORS的設定

在此我們要先知道vue前端專案運行起來對應哪個port
可將vue專案執行起來npm run dev查看
這邊可知道vite創建的vue預設port就是5173

修改Program.cs 加入CORS配置
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddCors(options =>
{
    options.AddDefaultPolicy(builder =>
    {
        builder.WithOrigins("http://localhost:5173").AllowAnyHeader();
    });
});

builder.Services.AddControllers();
// Learn more about configuring Swagger/OpenAPI at https://aka.ms/aspnetcore/swashbuckle
builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen();

var app = builder.Build();

// Configure the HTTP request pipeline.
if (app.Environment.IsDevelopment())
{
    app.UseSwagger();
    app.UseSwaggerUI();
}

app.UseHttpsRedirection();
app.UseCors();
app.UseAuthorization();

app.MapControllers();

app.Run();

app.UseCors() 一定要放置在app.UseHttpsRedirection(); 之下
這邊沒配置就會看到之後vue前端call api有以下錯誤


後端專案所需package下載安裝
Microsoft.AspNetCore.Authentication.JwtBearer


Microsoft.AspNetCore.Identity.EntityFrameworkCore


Microsoft.EntityFrameworkCore.SqlServer


Microsoft.AspNetCore.Identity.UI






如何將Vue專案添加至visual studio 方案進行整包的管控呢?

這邊用vs2022 ide開啟後
可以將vue前端專案添加到方案中


預設這邊會限制只允許添加.csproj的專案

由於我們是透過VUE CLI (Vite)進行專案創建
對visual studio 方案而言每個專案都要有對應兩個專案文件,副檔名.esproj,.esproj.user。
https://learn.microsoft.com/zh-tw/visualstudio/ide/reference/property-pages-javascript-esproj?view=vs-2022

因此需要創建這個檔案
vue-project.esproj
文件名稱可客製化任意修改,但附檔名必須固定不可更動。

創建方式可以透過visual studio去產生vue專案在把她修改貼近此專案目錄中
當中提及到
方法2.透過visual studio ide來創建(背後也是透過方法1.藉由vue-cli)
這邊針對方案右鍵新增一個獨立Javascript Vue專案

這邊不勾選

預設創建好的
這邊只是為了產生這個配置檔案所以可將此專案移除

vueproject1.esproj檔案內容

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<Project Sdk="Microsoft.VisualStudio.JavaScript.Sdk/0.5.74-alpha">
  <PropertyGroup>
    <StartupCommand>npm run serve</StartupCommand>
    <JavaScriptTestRoot>.\</JavaScriptTestRoot>
    <JavaScriptTestFramework>Jest</JavaScriptTestFramework>
    <!-- Command to run on project build -->
    <BuildCommand></BuildCommand>
    <!-- Command to create an optimized build of the project that's ready for publishing -->
    <ProductionBuildCommand>npm run build</ProductionBuildCommand>
    <!-- Folder where production build objects will be placed -->
    <BuildOutputFolder>$(MSBuildProjectDirectory)\dist</BuildOutputFolder>
  </PropertyGroup>
</Project>

這邊備份一個版本之後可以自己用於不是用vs自動創建的vue專案
將其直接複製到vue-project專案目錄中

可以更名會影響載入到方案時顯示的project目錄名稱
這邊為了好識別可以更名相同的名字





即可完成載入









Ref:
https://www.programmingbasic.com/change-default-port-number-in-vue-cli
https://aihongxin.com/9944.html
https://cn.vitejs.dev/config/server-options.html

留言

這個網誌中的熱門文章

何謂淨重(Net Weight)、皮重(Tare Weight)與毛重(Gross Weight)

Architecture(架構) 和 Framework(框架) 有何不同?_軟體設計前的事前規劃的藍圖概念

(2021年度)駕訓學科筆試準備題庫歸納分析_法規是非題