前篇已经完成后端配置并获取到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（前端）的更多相关文章

  1. netCore3.0+webapi到前端vue（后端）

    第一步创建api项目 创建完成启动F5!! 如图 数据库我用的是mysql 用ef操作数据 开发环境:Win10 + VS2019Mysql服务器版本:8.0.16 1.下载并安装插件(必备) MyS ...

  2. netcore3.0 webapi集成Swagger 5.0

    在项目中引用Swashbuckle.AspNetCore和Swashbuckle.AspNetCore.Filters两个dll,在Startup中的ConfigureServices相关配置代码如下 ...

  3. netcore3.0 webapi集成Swagger 5.0，Swagger使用

    Swagger使用 1.描述 Swagger 是一个规范和完整的框架,用于生成.描述.调用和可视化 RESTful 风格的 Web 服务. 作用: 1.接口的文档在线自动生成. 2.功能测试 本文转自 ...

  4. .NetCore2.0项目之ABP+Vue(IView框架)单页应用之路,启动

    首先很久没有好好静下心来做点东西了,一直用忙碌做借口,实际还是懒,今天决定动一动. 第一步,下载自己的项目模板 首先vue项目国内的暂时还没有,要登录https://aspnetboilerplate ...

  5. .net WebApi 批量文件进行压缩zip以二进制流传输至前端(Vue)下载

    前言:最近接了个项目,需要进行将服务端生成的文件进行打包压缩供前端下载,百度查了下资料,决定采用SharpZipLib C#开园的压缩解压库进行服务器文件压缩,在实现过程,郁闷的是前端接收下载下来的压 ...

  6. Web前端-Vue.js必备框架（五）

    Web前端-Vue.js必备框架(五) 页面组件,商品列表组件,详情组件,购物车清单组件,结算页组件,订单详情组件,订单列表组件. vue-router 路由 vuex 组件集中管理 webpack ...

  7. vue 前端框架 (三)

    VUE 生命周期 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  8. Web前端-Vue.js必备框架（四）

    Web前端-Vue.js必备框架(四) 计算属性: <div id="aaa"> {{ message.split('').reverse().join('') }} ...

  9. Web前端-Vue.js必备框架（三）

    Web前端-Vue.js必备框架(三) vue是一款渐进式javascript框架,由evan you开发.vue成为前端开发的必备之一. vue的好处轻量级,渐进式框架,响应式更新机制. 开发环境, ...

随机推荐

  1. 致Python初学者的六点建议

    Python是最容易学习的编程语言之一,其语法近似英语.通常,初学者只会遇到一些小麻烦,如强制缩进.在函数中使用self等. 然而,当开始阅读.复制和编辑他人代码时,麻烦就接踵而至了. 这里,我将解释 ...

  2. Spring Boot 中如何配置 Profile

    本人免费整理了Java高级资料,涵盖了Java.Redis.MongoDB.MySQL.Zookeeper.Spring Cloud.Dubbo高并发分布式等教程,一共30G,需要自己领取.传送门:h ...

  3. php中搭建Web服务器和服务器配置

    1.搭建Web服务器     1.1目录结构 1.2访问服务器 访问规则:http://服务器ip地址/php页面 比如: http://localhost/demo.php http://127.0 ...

  4. 如何用charles进行https抓包

    版权声明:本文为xing_star原创文章,转载请注明出处! 本文同步自http://javaexception.com/archives/138 如何用charles进行https抓包 晚上在家鼓捣 ...

  5. JDBC API浅析

    使用java开发数据库应用程序一般都需要用到四个接口:Driver.Connection.Statement.ResultSet 1.Driver接口用于加载驱动程序 2.Connection接口用于 ...

  6. kettle教程---增量更新

    以下操作都在5.0.1版本下进行开发,其余版本可以进行自动比对 在平时工作当中,会遇到这种情况,而且很常见.比如:增量抽取(每隔2个小时抽取截至到上次抽取时间的记录) 一.操作前提: 存在3张表,源表 ...

  7. adb的常见命令和异常报错操作

    adb连接状态 adb devices , 获取设备列表及设备状态 设备的状态有 3 种 device , 设备连接正常 offline , 设备离线,连接出现异常 unauthorized 设备为进 ...

  8. 6. Vue - 声明周期

    一.官方vue生命周期流程图 二.vue声明周期介绍 beforeCreate执行时:data和el均未初始化,值为undefined created执行时:Vue 实例观察的数据对象data已经配置 ...

  9. HTTP 与HTTPS 简单理解

      HTTP协议,即超文本传输协议(Hypertext transfer protocol).是一种详细规定了浏览器和万维网(WWW = World Wide Web)服务器之间互相通信的规则,通过因 ...

  10. 剑指Offer-18.二叉树的镜像(C++/Java)

    题目: 题目描述 操作给定的二叉树,将其变换为源二叉树的镜像. 输入描述: 二叉树的镜像定义:源二叉树 8 / \ 6 10 / \ / \ 5 7 9 11 镜像二叉树 8 / \ 10 6 / \ ...