netCore3.0 + webapi VUE to the front (distal end)

Prequel has been completed and get to the back-end configuration api connection https://www.cnblogs.com/ouyangkai/p/11504279.html

Front-end project using a VS code compiler complete vue

The first step in the introduction of

  <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">

Write front-end 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 () { 
          the let _this =  the this ; // note that this is an internal function of the body, not in the methods 
          axios.get ( ' HTTPS: // localhost: 44323 / API / values ' ) .then (RES => { 
            _this .list = res.data;   // NOTE front ** _ this ** used here to ensure that data is bound to the instance Vue 
          }) 
        }, 
        quTest (ID) { 
          the console.log (ID) 
        } 
      } 
    }) 


  </ Script > 
</ body >

Note that the above is to obtain a axios.get way links back end api to get data and use vue render to the front page display

The following error occurred with vscode run front page

What is-the Allow-Control-Access Origin
Access-Control-the Allow-Origin is a server-side HTML5 defined return Response header, used to solve resources (such as fonts) cross-domain privilege issues.
It defines the resources which allow referenced domain or domains referenced by all (google fonts using font * represents all domains referenced resources permit).

We interaction occurs before and after the encounter end cross-domain issues

Solutions are as follows:

Cross-domain configuration in the back-end project Startup.cs

 public  void ConfigureServices (IServiceCollection Services) 
        { 
            // connect mysql database, add database context 
            services.AddDbContext <DbModel> (= Options> 
                options.UseMySQL (Configuration.GetConnectionString ( " DefaultConnection " ))); 

          
            services.AddControllers (); 
            Services. AddCors (Options => 
                { 
                    // global function 
                    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();
            
        }

Configuration to run again

At this point the front end with the rear end of the api to get data to render the pages completed!

netCore3.0 + webapi VUE to the front (distal end)

Guess you like