杨中科 ASP.NET Core前后端分离开发

一、

前后端分离

1、传统MVC开发模式: 前后端的代码被放到同一个项目中,前端人员负责编写页面的模板,而后端开发人员负责编写控制器和模型的代码并且"套模板"。

缺点: 互相依赖,耦合性强,责任划分不清。

2、主流的"前后端分离": 前端开发人员和后端开发人员分别负责前端和后端代码的开发,各自在自己的项目中进行开发,后端人员只写Web API接口页面由前端人员负责。

为什么"前后端分离"更流行: 需求变动越来越大、交付周期越来越短、多端支持。

优点:独立开发,不互相依赖,耦合性低,责任划分清晰,前后端分别部署,可以针对性运维 (扩容等缺点: 对团队的沟通能力要求更高,提前沟通好接口和通知接口变更,不利于SEO (可以用"服务器端渲染"SSR),对运维要求更高

3、只有大项目才需要前后端分离吗?

示例:

1.新建webapi controller

2.新建请求与返回的两个类,加上进程信息保存类ProcessInfo

3.编写controller方法

4.运行

运行成功,返回当前电脑的进程信息

二 编写前端接口

搭建前端开发环境

1、Web API做后端开发,不绑定前端技术,也支持其他客户端。这一节用Vue演示,不讲解Vue基础

2、Vue搭建步骤

1安装Node.js

  1. 设定国内镜像 npm config set registryhttps://registry.npm.taobao.org

3)安装yarn: npm install -g yarn

4)创建Vue项目: yarn create @vitejs/app 项目名字

  1. 按照提示运行项目

创建好之后

运行项目 依次执行命令

运行结果:

三 前后端结合

前后端结合1

1、在src文件夹下创建views文件夹

2、安装ajax库axios,项目根目录: yarn add axios

3、在views文件夹下创建Login.vue文件

html 复制代码
	<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.创建views 文件夹

2.前端页面部分

3.安装ajax库

项目下会生成一个asios库

4.编写js

html 复制代码
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来做前端的页面路由。在前端的项目根目录执行: yarn add vue-router@4

6、在src下创建route文件夹,并且在route文件夹下创建index.js文件

html 复制代码
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

html 复制代码
import { createApp } from 'vue
import App from './App.vue'
import router from './route
createApp(App).use(router).mount('#app');

8、src/App.vue中增加指向Login视图的链接以及显示路由视图的

html 复制代码
<template>
<div><router-link to="Login">Login</router-link></div><router-view />
</template>

9、测试:



跨域问题

只要是端口不同 或者域名不同,都会被认为不是同一个网站,浏览器出于安全考虑,不给予访问

cors

1、跨域通讯的问题。解决方案: JSONP、前端代理后端请求(浏览器直接通过前端向后端请求数据,会导致前端服务器压力过大不推荐)、CORS等。

2、CORS原理: 在服务器的响应报文头中通过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()//允许哪些请求类型(get,post).withMethod()允许某一些
.AllowAnyHeader()//允许哪些报文头
.AllowCredentials()));
//.net 出于安全性考虑不允许所有的都写为any

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

重启项目

相关推荐
Tech Synapse3 分钟前
Java根据前端返回的字段名进行查询数据的方法
java·开发语言·后端
.生产的驴4 分钟前
SpringCloud OpenFeign用户转发在请求头中添加用户信息 微服务内部调用
spring boot·后端·spring·spring cloud·微服务·架构
微信-since8119220 分钟前
[ruby on rails] 安装docker
后端·docker·ruby on rails
代码吐槽菌2 小时前
基于SSM的毕业论文管理系统【附源码】
java·开发语言·数据库·后端·ssm
豌豆花下猫2 小时前
Python 潮流周刊#78:async/await 是糟糕的设计(摘要)
后端·python·ai
YMWM_2 小时前
第一章 Go语言简介
开发语言·后端·golang
码蜂窝编程官方3 小时前
【含开题报告+文档+PPT+源码】基于SpringBoot+Vue的虎鲸旅游攻略网的设计与实现
java·vue.js·spring boot·后端·spring·旅游
hummhumm3 小时前
第 25 章 - Golang 项目结构
java·开发语言·前端·后端·python·elasticsearch·golang
J老熊3 小时前
JavaFX:简介、使用场景、常见问题及对比其他框架分析
java·开发语言·后端·面试·系统架构·软件工程
AuroraI'ncoding3 小时前
时间请求参数、响应
java·后端·spring