欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

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

程序员文章站 2022-07-04 23:31:06
前篇已经完成后端配置并获取到api连接 https://www.cnblogs.com/ouyangkai/p/11504279.html 前端项目用的是VS code编译器完成 vue 第一步 引入 编写前端vue 注意以上是用 axios.get方式获取后端api链接获取数据，并利用vue渲染到 ......

前篇已经完成后端配置并获取到api连接 

前端项目用的是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运行前端页面出现以下错误

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

  什么是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();
            
        }

配置完成再次运行

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

 

至此前端用后端api获取到数据渲染到页面完成！

 

上一篇： PowerShell: Try...Catch...Finally 实现方法

下一篇： netCore3.0+webapi到前端vue（后端）

推荐阅读