一、

前后端分離

1、傳統(tǒng)MVC開發(fā)模式: 前后端的代碼被放到同一個(gè)項(xiàng)目中，前端人員負(fù)責(zé)編寫頁面的模板，而后端開發(fā)人員負(fù)責(zé)編寫控制器和模型的代碼并且“套模板”。
缺點(diǎn): 互相依賴，耦合性強(qiáng)，責(zé)任劃分不清。
2、主流的“前后端分離”: 前端開發(fā)人員和后端開發(fā)人員分別負(fù)責(zé)前端和后端代碼的開發(fā)，各自在自己的項(xiàng)目中進(jìn)行開發(fā)，后端人員只寫Web API接口頁面由前端人員負(fù)責(zé)。
為什么“前后端分離”更流行: 需求變動(dòng)越來越大、交付周期越來越短、多端支持。
優(yōu)點(diǎn):獨(dú)立開發(fā)，不互相依賴，耦合性低，責(zé)任劃分清晰，前后端分別部署，可以針對(duì)性運(yùn)維 (擴(kuò)容等缺點(diǎn): 對(duì)團(tuán)隊(duì)的溝通能力要求更高，提前溝通好接口和通知接口變更，不利于SEO (可以用“服務(wù)器端渲染”SSR)，對(duì)運(yùn)維要求更高
3、只有大項(xiàng)目才需要前后端分離嗎?

示例：
1.新建webapi controller

2.新建請(qǐng)求與返回的兩個(gè)類，加上進(jìn)程信息保存類ProcessInfo

3.編寫controller方法

4.運(yùn)行

運(yùn)行成功，返回當(dāng)前電腦的進(jìn)程信息

二 編寫前端接口

搭建前端開發(fā)環(huán)境

1、Web API做后端開發(fā)，不綁定前端技術(shù)，也支持其他客戶端。這一節(jié)用Vue演示，不講解Vue基礎(chǔ)
2、Vue搭建步驟
1安裝Node.js
2) 設(shè)定國(guó)內(nèi)鏡像 npm config set registryhttps://registry.npm.taobao.org
3)安裝yarn: npm install -g yarn
4)創(chuàng)建Vue項(xiàng)目: yarn create @vitejs/app 項(xiàng)目名字
5) 按照提示運(yùn)行項(xiàng)目

創(chuàng)建好之后

運(yùn)行項(xiàng)目 依次執(zhí)行命令


運(yùn)行結(jié)果：

三 前后端結(jié)合

前后端結(jié)合1

1、在src文件夾下創(chuàng)建views文件夾
2、安裝ajax庫axios，項(xiàng)目根目錄: yarn add axios
3、在views文件夾下創(chuàng)建Login.vue文件

	<input type="text" v-model="state.loginData.userName"/>
	<input type="submit" value="登錄@click="loginSubmit"/>
	<tr v-for="p in state.processes" :key="p.id">
		<td>i(p.workingSet64/1024)HK</td>
	</tr>

示例：

1.創(chuàng)建views 文件夾


2.前端頁面部分

3.安裝ajax庫

項(xiàng)目下會(huì)生成一個(gè)asios庫

4.編寫js

import axios from 'axios';
import {reactive,onMounted) from 'vue
export default { name: 'Login'
	setup(){
		const state=reactive(loginData:,processes:[]});
		const loginSubmit=async ()=>!
		const payload = state.loginData;
		//if(!data.isOK)
		const resp = await axios.post(https:/ /localhost:44360/api/Login/Login',payload)
		const data = resp.data;
		state.processes = data.processes;
		}
	return {state,loginSubmit);
	},
}

5、使用vue-router來做前端的頁面路由。在前端的項(xiàng)目根目錄執(zhí)行: yarn add vue-router@4
6、在src下創(chuàng)建route文件夾，并且在route文件夾下創(chuàng)建index.js文件

import [ createRouter,createWebHashHistory} from "vue-router"
import Test from "../views/Test.vue"
import Login from "../views/Login.vue";
const routes = [fpath: "/", redirect: " /Test"")
(path: "/Test",name:"Test",component: Test),
(path: "/Login",name:"Login",component: Login)]
const router = createRouter(fhistory: createWebHashHistory(),routes: routes)),
export default router

7、編輯src/mainjs，增加import router from /route’以及use(router)，修改main.js

import { createApp } from 'vue
import App from './App.vue'
import router from './route
createApp(App).use(router).mount('#app');

8、src/App.vue中增加指向Login視圖的鏈接以及顯示路由視圖的

<template>
<div><router-link to="Login">Login</router-link></div><router-view />
</template>

9、測(cè)試：



跨域問題

只要是端口不同 或者域名不同，都會(huì)被認(rèn)為不是同一個(gè)網(wǎng)站，瀏覽器出于安全考慮，不給予訪問

cors

1、跨域通訊的問題。解決方案: JSONP、前端代理后端請(qǐng)求（瀏覽器直接通過前端向后端請(qǐng)求數(shù)據(jù)，會(huì)導(dǎo)致前端服務(wù)器壓力過大不推薦）、CORS等。
2、CORS原理: 在服務(wù)器的響應(yīng)報(bào)文頭中通過access-control-allow-origin告訴瀏覽器允許跨域訪問的域名
3、在Program.cs的“var app=builder.Build()”這句代碼之前注冊(cè)

string[] urls = new[] { "http://localhost:3000" );

builder.Services.AddCors(options =>
options.AddDefaultPolicy(builder => builder.WithOrigins(urls) //允許哪些域名 .AllowAnyOrigin 允許所有域名
.AllowAnyMethod()//允許哪些請(qǐng)求類型（get,post）.withMethod()允許某一些
.AllowAnyHeader()//允許哪些報(bào)文頭
.AllowCredentials()));
//.net 出于安全性考慮不允許所有的都寫為any

4、在Program.cs的app.UseHttpsRedirection()這句代碼之前增加一行app.UseCors()

重啟項(xiàng)目

文章來源地址http://www.zghlxwxcb.cn/news/detail-817093.html

到了這里，關(guān)于楊中科 ASP.NET Core前后端分離開發(fā)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！