2018服务计算-简单 web 服务与客户端开发实战

实验心得

在本次项目中，我负责的是前端制作，前端使用的框架是Vue.js。

Vue.js

Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

Vue 组件非常类似于自定义元素——它是 Web 组件规范的一部分，这是因为 Vue 的组件语法部分参考了该规范。例如 Vue 组件实现了 Slot API 与 is 特性。但是，还是有几个关键差别：

1. Web Components 规范已经完成并通过，但未被所有浏览器原生实现。目前 Safari 10.1+、Chrome 54+ 和 Firefox 63+ 原生支持 Web Components。相比之下，Vue 组件不需要任何 polyfill，并且在所有支持的浏览器 (IE9 及更高版本) 之下表现一致。必要时，Vue 组件也可以包装于原生自定义元素之内。

2. Vue 组件提供了纯自定义元素所不具备的一些重要功能，最突出的是跨组件数据流、自定义事件通信以及构建工具集成。

 

访问接口

update 函数绑定了三个链接

update: function (message) {
      this.url = message
      this.service_call()
    },

 

service_call函数

   service_call: function() {
      var that = this;
      //that.sites = "fuck"

  

      that.axios.get("https://swapi.co/api/" + that.url + "?format=json")
      .then(function(res) {
        console.log(res.data)
        that.sites = res.data

      })

 

组件显示

<script type="text/x-template" id="anchored-heading-template">
  <h1 v-if="level === 1">
    <slot></slot>
  </h1>
  <h2 v-else-if="level === 2">
    <slot></slot>
  </h2>
  <h3 v-else-if="level === 3">
    <slot></slot>
  </h3>
  <h4 v-else-if="level === 4">
    <slot></slot>
  </h4>
  <h5 v-else-if="level === 5">
    <slot></slot>
  </h5>
  <h6 v-else-if="level === 6">
    <slot></slot>
  </h6>
</script>

 

表格显示

     <h1 align="center"> 人物介绍 </h1>
    <table class="table table-bordered table-striped text-center"> 
      <tr>
        <td>name</td>
        <td>{{msg.name}}</td>
      </tr>
      <tr>
        <td>height</td>
        <td>{{msg.height}}</td>
      </tr>
      <tr>

 <tr>
  <td>vehicles</td>
  <td>
    <a v-for="item in msg.vehicles" :key = "item">
      {{ item }}
      <br>
  </a>
  </td>
</tr>

 

心得

这次是小组共同完成的一个比较大的项目，我们小组分为前后端任务，分别完成。在这次项目中，我们自学了go，vue.js等知识，增加了我们的知识储备，提升了自学的能力，在小组共同完成项目的过程中也向其他成员学习到了很多。