乐趣区

关于vue.js:netCore30webapi到前端vue前端

jiezi

前篇曾经实现后端配置并获取到 api 连贯 https://www.cnblogs.com/ouyan…

前端我的项目用的是 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">

app.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 获取到数据渲染到页面实现！

退出移动版