netCore3.0+webapi到前端vue（前端）
前篇已经完成后端配置并获取到api连接 https://www.cnblogs.com/ouyangkai/p/11504279.html
前端项目用的是VS code编译器完成 vue
第一步 引入
<script src="lib/vue.js"></script>
<script src="lib/vue-resource.js"></script>
<script src="lib/axios.min.js"></script>
<link rel="stylesheet" href="lib/bootstrap.css">
编写前端vue
<body>
<div id="app"> <div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
</div>
</div> <table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>标题</th>
<th>类别</th>
</tr>
</thead>
<tbody>
<tr v-for="item in list" :key="item.id" @click.prevent="quTest(item.id)">
<td>{{item.method}}</td>
<td>{{item.type}}</td>
</tr>
</tbody>
</table> </div>
<script>
var vm = new Vue({
el: '#app',
data: {
list: [],
id: ''
},
created() {
this.getlist()
},
methods: {
getlist() {
let _this = this; //注意，这里是在函数体内部，不是在methods中
axios.get('https://localhost:44323/api/values').then(res => {
_this.list = res.data; //注意这里前面用**_this**来保证数据是绑定到Vue实例上的
})
},
quTest(id) {
console.log(id)
}
}
}) </script>
</body>
注意以上是用 axios.get方式获取后端api链接获取数据，并利用vue渲染到前端页面显示
用vscode运行前端页面出现以下错误
什么是Access-Control-Allow-Origin
Access-Control-Allow-Origin是HTML5中定义的一种服务器端返回Response header，用来解决资源（比如字体）的跨域权限问题。
它定义了该资源允许被哪个域引用，或者被所有域引用（google字体使用*表示字体资源允许被所有域引用）。
我们遇到前后端交互出现跨域问题
解决方案如下：
在后端项目 Startup.cs 进行跨域配置
public void ConfigureServices(IServiceCollection services)
{
//连接 mysql 数据库，添加数据库上下文
services.AddDbContext<DbModel>(options =>
options.UseMySQL(Configuration.GetConnectionString("DefaultConnection"))); services.AddControllers();
services.AddCors(options =>
{
//全局起作用
options.AddDefaultPolicy(
builder =>
{
builder.AllowAnyHeader().AllowAnyMethod().AllowAnyOrigin();
}); options.AddPolicy("AnotherPolicy",
builder =>
{
builder.WithOrigins("http://www.contoso.com")
.AllowAnyHeader()
.AllowAnyMethod();
}); }); }
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
else
{
// The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
app.UseHsts();
}
//使用 Cors
app.UseCors(); }
配置完成再次运行
至此前端用后端api获取到数据渲染到页面完成！
netCore3.0+webapi到前端vue（前端）的更多相关文章
- netCore3.0+webapi到前端vue（后端）
第一步创建api项目 创建完成启动F5!! 如图 数据库我用的是mysql 用ef操作数据 开发环境:Win10 + VS2019Mysql服务器版本:8.0.16 1.下载并安装插件(必备) MyS ...
- netcore3.0 webapi集成Swagger 5.0
在项目中引用Swashbuckle.AspNetCore和Swashbuckle.AspNetCore.Filters两个dll,在Startup中的ConfigureServices相关配置代码如下 ...
- netcore3.0 webapi集成Swagger 5.0，Swagger使用
Swagger使用 1.描述 Swagger 是一个规范和完整的框架,用于生成.描述.调用和可视化 RESTful 风格的 Web 服务. 作用: 1.接口的文档在线自动生成. 2.功能测试 本文转自 ...
- .NetCore2.0项目之ABP+Vue(IView框架)单页应用之路,启动
首先很久没有好好静下心来做点东西了,一直用忙碌做借口,实际还是懒,今天决定动一动. 第一步,下载自己的项目模板 首先vue项目国内的暂时还没有,要登录https://aspnetboilerplate ...
- .net WebApi 批量文件进行压缩zip以二进制流传输至前端(Vue)下载
前言:最近接了个项目,需要进行将服务端生成的文件进行打包压缩供前端下载,百度查了下资料,决定采用SharpZipLib C#开园的压缩解压库进行服务器文件压缩,在实现过程,郁闷的是前端接收下载下来的压 ...
- Web前端-Vue.js必备框架（五）
Web前端-Vue.js必备框架(五) 页面组件,商品列表组件,详情组件,购物车清单组件,结算页组件,订单详情组件,订单列表组件. vue-router 路由 vuex 组件集中管理 webpack ...
- vue 前端框架 (三)
VUE 生命周期 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...
- Web前端-Vue.js必备框架（四）
Web前端-Vue.js必备框架(四) 计算属性: <div id="aaa"> {{ message.split('').reverse().join('') }} ...
- Web前端-Vue.js必备框架（三）
Web前端-Vue.js必备框架(三) vue是一款渐进式javascript框架,由evan you开发.vue成为前端开发的必备之一. vue的好处轻量级,渐进式框架,响应式更新机制. 开发环境, ...
随机推荐
- PHP面试题2019年滴滴出行工程师面试题及答案解析
一.单选题(共30题,每题5分) 1.下列关于PHP垃圾回收的说法,错误的是? A.开启/关闭垃圾回收机制可以通过修改php配置实现 B.可以在程序中使用gc_enable() 和 gc_disabl ...
- uni-app自定义导航栏按钮|uniapp仿微信顶部导航条
最近一直在学习uni-app开发,由于uniapp是基于vue.js技术开发的,只要你熟悉vue,基本上很快就能上手了. 在开发中发现uni-app原生导航栏也能实现一些顶部自定义按钮+搜索框,只需在 ...
- overflow-x:scroll失效问题解决
在移动设备上设置overflow-x:scroll,大部分机型都是展示正常的,在安卓哦5.0系统上,无论怎么样滚动条都不会生效,终于找到了解决办法: display: -webkit-box; // ...
- Macbook触控板使用技巧
1. 在Storyboard鼠标右键可以直接拖线的,如果你用的是外接的第三方鼠标,没必要按着 control 键再用鼠标左键拖线 如果是触控板的话,双指按下去就可以直接拖线,带3Dtouch功能的触控 ...
- ICMP重定向 Redirect netwox libpcap netwag
搭建环境 两台虚拟机. 攻击者:192.168.1.8 被攻击者:192.168.1.9 网络配置 主机均采用DHCP 如果没有路由器,可以使用NAT模式来做 攻击者配置 打开转发数据包功能 # su ...
- 【JavaWeb】Ajax基础
Ajax介绍 Asynchronous JavaScript And XML(异步的JavaScript和XML): Ajax可以在不刷新页面的前提下,进行页面局部更新: Ajax不是新的技术,Aja ...
- postman---postman参数化
我们在做接口测试的过程中,都会遇到同一个接口不同的数据,每次去一个个填写数据就太麻烦了,今天我们一起学习下如何通过postman进行参数化 参数化 参数化就是1个接口请求不同的数据,我们可以通过把请求 ...
- Java重定向标准输入/输出
在System类中提供了三个重定向标准输入/输出的方法static void setErr(PrintStream err) 重定向“标准”错误输出流static void setIn(InputSt ...
- 用maven运行指定java类main方法
mvn exec:java -Dexec.mainClass="com.java2s.ide.App"
- 无法添加符号: 归档没有索引；运行 ranlib 以添加一个
这将告诉您对象文件的格式.如果对象文件是针对不同的平台编译的,则会导致无法为存档创建索引.要纠正这种情况,您需要重新编译这些文件.