前篇已經完成后端配置並獲取到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獲取到數據渲染到頁面完成！