後端開發者的Vue學習之路（一）

来源:https://www.cnblogs.com/progor/archive/2019/01/19/10292391.html
-Advertisement-
Play Games

[toc] 首發日期：2019 01 19 前言： 有時候，一個後端開發者“不得不”自己去搭建前端界面。如果有的選，當然選一個比較好學的前端“框架”咯（框架很多時候封裝了普通的html元素，使得能更加方便地使用）。 如果你做的項目的界面是一個偏後臺管理的而且要求並不高的界面的時候，你可以考慮easy ...


目錄

首發日期：2019-01-19

前言：


有時候，一個後端開發者“不得不”自己去搭建前端界面。如果有的選，當然選一個比較好學的前端“框架”咯（框架很多時候封裝了普通的html元素，使得能更加方便地使用）。
如果你做的項目的界面是一個偏後臺管理的而且要求並不高的界面的時候，你可以考慮easy UI這個較為知名的前端框架。
如果你想要界面變得好看一些（easy UI的界面太簡單了，缺乏較強的定製性），那麼你可以考慮vue這個框架。vue這個框架本身並沒有多少好看的樣式，但學習了這個框架就可以學會怎麼使用它的第三方組件庫了（這些第三庫看起來都還行）。


iview組件庫示例


element組件庫示例


【Vue自己有官方教程，為什麼寫這個呢？主要是感覺自己的前端知識不太穩固，看教程的時候有點迷糊。推己及人，所以有了這個博文】


Vue的介紹


  • 官網：https://cn.vuejs.org/
  • [官方的話]：Vue (讀音 /vjuː/，類似於 view) 是一套用於構建用戶界面的漸進式框架。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關註視圖層，不僅易於上手，還便於與第三方庫或既有項目整合。另一方面，當與現代化的工具鏈以及各種支持類庫結合使用時，Vue 也完全能夠為複雜的單頁應用提供驅動。
  • 小菜鳥前端：Vue是一個簡單容易上手前端框架，在網上有很多基於vue的web UI框架（element等），由於有大量類似於easyUI這些快速搭建頁面的框架，所以我們可以使用vue來快速搭建頁面。如果我們作為一個後端開發者想掌握一個前端框架，vue是一個好選擇，因為它足夠的易學。


例如下麵的代碼可以快速構建一個表格：

  <template>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column  prop="date"  label="日期"  width="180"></el-table-column>
      <el-table-column  prop="name"  label="姓名"  width="180"></el-table-column>
      <el-table-column  prop="address" label="地址"> </el-table-column>
    </el-table>
  </template>

  <script>
    export default {
      data() {
        return {
          tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀區金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀區金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀區金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀區金沙江路 1516 弄'
          }]
        }
      }
    }
  </script>


相容性：

Vue不支持IE8 及以下版本，因為 Vue 使用了 IE8 無法模擬的 ECMAScript 5 特性。但它支持所有相容 ECMAScript 5 的瀏覽器。【所以如果項目相容性要求較高，那麼不適合使用Vue】


學習Vue需要的前置知識：

  • html+ js 【基礎的內容，前端的基礎，不瞭解不行。但只要你能看得懂基本的html和js代碼即可，不瞭解的可以查。】
  • es6 【 ECMAScript 6(ES6)是JavaScript語言的下一代標準。但不需要瞭解太多，Vue裡面有些語法是ES6的，但我們可以看著例子瞭解有哪些常見的語法即可】
  • webpack 【不需要瞭解太多，是一個項目構建工具，會涉及一些Vue項目的運行知識。】
  • npm 【vue入門不需要瞭解太多，可能只需要瞭解npm的幾個命令】


MVVM模型

  • MVVM是Model-View-ViewModel的簡寫。
  • MVVM（Model-View-ViewModel）的基礎是MVP模式，【MVP類似於MVC，後端開發者應該對MVC比較熟悉了】

    【常見的MVP前端開發有幾個步驟：1.創建頁面元素，2.在script中給元素綁定事件，3.在script中處理事件（這個事件可能會影響頁面的元素的顯示或返回數據）】
    【上面的幾個步驟可以說是內容（頁面元素）行為（js操作）分離了】
    【為什麼要有MVVM呢？主要是MVP模式有太多的dom操作了（大量的DOM 操作使頁面渲染性能降低，載入速度變慢）。MVVM解決了這個問題，並且提供了一些其他的好處。】

【如果你瞭解ORM模型，你應該很能體會到MVVM模型的好處，有了VM層幫我們管理了數據，我們就只需要處理好Model層了，這就好像ORM中定義了數據映射關係，然後我們只需要操作實體類。】


補充:

  • Vue的核心特點是簡單易用，所以它相對適合非專業前端的學習。它需要一些前置的前端知識，而且它自己的知識也是需要時間來學習的，如果與easy UI相比，easy UI的學習速度會更快，但vue更能構建比較優美的頁面。


安裝/導入


【要想使用Vue，必須先導入/安裝，就像使用jquery必須導入jquery.js一樣；而vue可以使用webpack來構建，所以也可以使用webpack安裝Vue，但如果你是初學者，先掌握靜態導入的方法吧】


導入Vue

Vue的本質也是javascript,所以它也可以通過導入js文件來使用功能（js可以用cdn的，也可以手動導入本地的vue.js）。
這種也是最簡單的使用vue的方式，所以我們可以這種方式來作為入門學習，但正式使用時都會使用webpack來構建vue項目。

在html文件中使用如下代碼：【這裡先講導入，後面講使用】

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>


安裝

  • 安裝vue:npm install vue
  • 全局安裝vue-cli: npm install --global vue-cli
  • 創建一個基於 webpack 模板的新項目:vue init webpack 項目名


兩種方式的區別：

  • 對於普通的靜態js導入，在面對多個組件共同開發的時候，會比較不方便。【如果你是後端開發者，你應該知道把多個類寫在一個文件中是多麼地不方便，這也是一樣的】
  • js:
    • 簡單，不需要安裝，直接導入js即可。
  • npm
    • 在用 Vue 構建大型應用時推薦使用 NPM 安裝
    • NPM 能很好地和諸如 webpack 或 Browserify 模塊打包器配合使用。
    • 同時 Vue 也提供配套工具來開發單文件組件。


在入門部分將使用js導入方式的例子，在涉及構建多個組件的時候（頁面需要多個組件時，如果把多個組件定義在一個文件中會顯得贅餘。這好比把多個類放到同一個文件中定義。）將使用npm安裝方式演示。

HelloWorld示例


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
        <!--2.這是被vue實例管理的區域-->
        <div id="app">
            {{ message }}
        </div>
    </body>
    <!--1.導入js-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        //3. 創建實例：new Vue()裡面有一個{}類型的參數，屬性el是一個元素的id名，代表被vue實例管理的區域;
       var app = new Vue({
                  el: '#app',
                  data: {
                    message: 'Hello Vue!'
                  }
                })
    </script>
</html>


代碼分析：

  1. 導入了js:<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  2. 定義一個元素，給它id起名app。[名字是可以隨意的，但在下麵的new Vue創建實例時，el參數必須是這個id名]
  3. 新建一個vue實例，屬性el代表把對應元素區域交給vue管理（el: '#app'代表把id為app的區域交給vue管理）。那麼對應元素區域裡面就可以使用vue的語法了。
  4. data屬性：data裡面可以定義一系列變數，可用於這個實例掌控的區域。
  5. {{ message }} : vue語法的內容，代表獲取變數名為message的數據，並顯示出來。


代碼效果：


導入了js之後，vue把管理的區域裡面的vue語法都解析了，所以 {{ message }}就取出了vue實例中名叫message的數據。




現在我們瞭解了一些vue的渲染頁面的知識，下麵我們來瞭解更多的渲染技巧。

實例中可以定義的內容

每個 Vue 應用都是通過使用 Vue 函數創建一個新的 Vue 實例開始的。
實例中的定義的內容就是我們可以使用在Vue應用中的內容。
下麵講實例中可以定義哪些內容。

  • 數據
  • 方法
  • 生命周期鉤子函數
  • 其他（有些內容比較重要，留到後面講）


定義數據

  • 定義了數據，那麼就可以在Vue管理的區域中使用Vue的獲取數據的語法來獲取數據。
  • 這種操作就像是我們把數據裝到實例中，實例再把數據傳給視圖組件。
  • 任何你想顯示到頁面的數據你都可以考慮定義在實例中。
       var app = new Vue({
                  el: '#app',
                  data: {
                    message: 'Hello Vue!'
                  }
                })
        //<div id="app">
        //    {{ message }}
        //</div>


定義方法methods

  • 在js中，方法是很重要的，Vue實例中可以定義方法。【為什麼要有方法這個就不解釋了吧？】
    <body>
        <div id="app">
            <!-- 觸發事件，建議使用Vue的語法來綁定事件（@事件類型，代表綁定什麼事件） -->
            <!-- 實例內定義的函數，使用Vue的語法來綁定；實例外定義的，可以使用原生的方式綁定事件 -->
            <button @click="myFunction">按鈕</button>
        </div>
    </body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
       var app = new Vue({
                  el: '#app',
                  data: {
                    message: 'Hello Vue!'
                  },
                  methods: {
                    myFunction: function () {
                        alert('haha')
                    }
                  }
                })
    </script>


生命周期與生命周期鉤子函數

【要結合圖來看（懂英文是多麼地好）】

  • beforeCreate：在創建了vue示例時，在進行了一部分基礎的初始化之後就會自動執行beforeCreate函數
  • created：創建完示例後，會自動執行created函數
  • beforeMounted：渲染完模板後（可以說是vue知道區域內是一個怎麼的html環境，但還沒把數據顯示到這個環境中的時候），會自動執行這個函數
  • mouted：模板與數據結合之後自動執行這個函數。【此時頁面已經渲染完畢】
  • beforeUpdated：數據發生變化後，新數據被渲染前會自動執行這個函數。
  • updated：新數據被渲染成功會自動執行這個函數。
  • beforeDestory：當實例被destory時會自動執行這個函數。
  • destory：當實例被完全銷毀是自動執行這個函數。

【如果你對生命周期鉤子感興趣，可以自查，這裡不多講，後面之後根據開發需求來講一些】


測試代碼：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
        <div id="app">
            <button @click='updateValue'>點擊觸發beforeUpdate,updated</button>
            <button onclick='deleteApp()'>點擊觸發beforeDestory,destoryed</button>
            <p ref='a'>{{ msg }}</p>
        </div>
    </body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
                  el: '#app',
                  data: {
                    msg: 'hello'
                  },
                  beforeCreate: function(){
                    console.log('beforeCreate')
                  },
                  created: function(){
                    console.log('created')
                  },
                  beforeMount: function(){
                    console.log(this.$refs.a)
                    // 上面的你會看到undefined,因為數據還沒綁定上
                    console.log('beforeMount')
                  },
                  mounted: function(){
                    console.log(this.$refs.a)
                    // 上面的你會看到p,因為數據綁定上了
                    console.log('mounted')
                  },
                  beforeUpdate: function(){
                    console.log('beforeUpdate')
                  },
                  updated: function(){
                    console.log('updated')
                  },
                  beforeDestroy: function(){
                    console.log('beforeDestory')
                  },
                  destroyed: function(){
                    console.log('destoryed')
                  },
                  methods: {
                    updateValue: function () {
                        this.msg = 'haha'
                    }
                  }
                })
        function deleteApp() {
            app.$destroy()
        }
    </script>
</html>


補充：

  • 實例中其實還可以定義別的內容（如計算屬性，監聽器等）。但主要內容是上面這些，暫時瞭解這些就夠了。
  • 創建了實例，就可以在控制臺中使用實例名來獲取數據了，比如上面定義了實例app,那麼app.message就可以獲取定義在data中名為message的數據，app.myFunction()就可以調用定義在methods中名為myFunction的函數。【所以後面的例子中的一些數據更改都是使用控制台來更改實例中的數據】

渲染


插入文本

在上面已經演示了使用Mustache表達式(可以俗稱插值表達式){{ }}來獲取實例中的數據了，其實還可以使用其他方式來輸出數據


v-text

v-text可以向元素中輸出文本內容

<div id="app">
    <span v-text="message"></span>
    <!-- message: 'Hello Vue!' -->
    <!--
                var app = new Vue({
                  el: '#app',
                  data: {
                    message: 'Hello Vue!'
                  }
                })
    -->
</div>


v-html

v-html可以向元素中輸出html內容：

        <div id="app">
            <span v-html="message"></span>
            <!-- message: 'Hello Vue!'(帶標題樣式的) -->
        </div>
        <!--
                var app = new Vue({
                  el: '#app',
                  data: {
                    message: '<h1>Hello Vue!</h1>'
                  }
                })
        -->


Mustache 語法不能作用在 HTML 特性上，也就是說在html元素中沒有 id="{{ id }}" 這樣的操作 ，這種時候需要使用vue語法：v-bind:id="id"
{{ }}裡面可以使用javascript表達式，例如：{{ message.split('').reverse().join('') }}


用v-bind綁定屬性：

v-bind用於給元素的屬性綁定值

  • 綁定標題：v-bind:title
        <div id="app">
              <span v-bind:title="message">懸浮幾秒，查看標題</span>
        </div>
        <!--
                var app = new Vue({
                  el: '#app',
                  data: {
                    message: 'Hello Vue!'
                  }
                })
        -->
  • 給a元素綁定href ： v-bind:href='xxx'
  • 給元素綁定id ： v-bind:id='xxx'
    【理論上，可以使用v-bind給元素的任意屬性綁定值】

v-bind的簡寫

<!-- 完整語法 -->
<a v-bind:href="url">...</a>

<!-- 縮寫 -->
<a :href="url">...</a>


把對象的所有屬性綁定到元素：

v-bind的參數可以是一個對象，是一個對象時，會把對象的所有屬性都綁定到元素上。具體如下圖。


條件渲染

  • v-if可以判斷是否渲染一個元素，如果不渲染，這個元素將不會產生（不是隱藏！可以理解為這個元素被delete了。）
        <div id="app">
             <p v-if="seen">現在你看到我了</p>
             <!-- seen: true 時渲染，seen: false時不渲染 -->
        </div>
        <!--
        var app = new Vue({
                  el: '#app',
                  data: {
                    seen: false
                  }
                })
        -->
  • 除了v-if,還有v-else和v-else-if，v-else不可以再帶條件判斷，v-else-if可以帶條件判斷。
        <div id="app">
            <h1 v-if="gender === '男'">男</h1>
            <h1 v-else-if="gender === '女'">女</h1>
            <h1 v-else>unknown</h1>
        </div>
        <!--
       var app = new Vue({
                    el: '#app',
                    data: {
                        gender: '女'
                    },
                })
         -->

使用v-else 的元素必須緊跟在帶 v-if 或者 v-else-if 的元素的後面，否則它將不會被識別。

  • v-show 的元素始終會被渲染並保留在 DOM 中。v-show 只是簡單地切換元素的 CSS 屬性 display。
        <div id="app">
            <h1 v-show="ok">Hello!</h1>
        </div>
        <!--
       var app = new Vue({
                    el: '#app',
                    data: {
                        ok: true
                    },
                })
         -->


迴圈

  • v-for可以迴圈渲染出若幹個元素。
  • v-for 指令需要使用 item in items 形式的特殊語法，items 是源數據數組，而 item 是數組元素迭代的別名。
        <div id="app">
            <ol>
                <!-- 每一次迭代了出數據給todo，都會有一個li元素，並會在li元素中輸出todo的text -->
                <li v-for="todo in todos">
                  {{ todo.text }}
                </li>
            </ol>
        </div>
        <!--
       var app = new Vue({
                  el: '#app',
                  data: {
                    todos: [
                      { text: '學習 JavaScript' },
                      { text: '學習 Vue' },
                      { text: '搞事情' }
                    ]
                  }
                })
        -->

代碼效果：

在 v-for 塊中，我們擁有對父作用域屬性的完全訪問許可權。[這是來自官網的話，我覺得有點多餘，感覺子元素獲取父元素的數據是很正常的操作。]

v-for 還支持一個可選的第二個參數為當前項的索引，它會從0開始。用來標識當前迭代的是第幾個元素。

可以用 of 替代 in 作為分隔符，因為它是最接近 JavaScript 迭代器的語法：
<div v-for="item of items"></div>

也可以用 v-for 迭代一個對象的所有屬性，第一個參數是value，第二個可選參數是key，第三個可選參數為索引

第二個參數為key

<div v-for="(value, key) in object">
  {{ key }}: {{ value }}
</div>

第三個參數為索引：

<div v-for="(value, key, index) in object">
  {{ index }}. {{ key }}: {{ value }}
</div>

使用三個參數時的代碼效果:

在遍歷對象時，是按 Object.keys() 的結果遍歷，但是不能保證它的結果在不同的 JavaScript 引擎下是一致的。
v-for 也可以取一個整數作為源數據（v-for="i in 10"）。在這種情況下，它將重覆多次模板。
當 v-if 與 v-for 一起使用時，v-for 具有比 v-if 更高的優先順序。【這個問題官網提了一下，這裡我也提一下，註意使用】


計算屬性

  • 當某個數據需要另外一個數據計算得到的時候，你可能會定義兩個數據,其中一個數據初始值由另一個數據計算得出。但上面的值只能初始化一次，如果希望數據A變的時候，數據B也變，那麼你可能需要去監聽數據的變化，從而每次數據變化時再做操作。
  • 計算屬性簡化了這樣的情況，它的返回值是一個計算得到的數據，當內部的計算元素髮生變化的時候，返回值也會變化。
  • 計算屬性使用computed來定義。


        <div id="app">
            <p>原消息: "{{ message }}"</p>
            <p>逆反後: "{{ reversedMessage }}"</p>
        </div>
        <!--
        var app = new Vue({
                    el: '#app',
                    data: {
                    message: 'Hello'
                  },
                  computed: {
                    // 計算屬性的 getter
                    reversedMessage: function () {
                      // `this` 指向 vm 實例
                      return this.message.split('').reverse().join('')
                    }
                  }
                })
         -->


與函數的區別

下麵的代碼也可以達到上面的效果
（也是即時的，有人不懂為什麼這個函數會重覆調用，而非頁面初始化時調用一次；因為當頁面中數據更新的時候，涉及頁面數據的函數也會重新執行。）

        <div id="app">
            <p>原消息: "{{ message }}"</p>
            <p>逆反後: "{{ reversedMessage() }}"</p>
            <p>{{ Date.now() }}"</p>
            <!-- 後面的now是用來測試數據刷新時，函數會重新執行 -->
        </div>
        <!--
        var app = new Vue({
                    el: '#app',
                    data: {
                    message: 'Hello'
                  },
                  methods: {
                    reversedMessage: function () {
                      // `this` 指向 vm 實例
                      return this.message.split('').reverse().join('')
                    }
                  }
                })
         -->

函數也可以達到同樣的效果，但是函數沒有緩存效果，而計算屬性有緩存。沒有緩存時，函數每一次都要重新計算來得到結果，如果這是一個比較消耗資源的計算的話，那麼會減慢頁面的速度；而計算屬性有緩存，只要內部的計算元素沒有發生變化，那麼會使用緩存來作為計算結果。


與偵聽屬性的區別

上面的計算屬性達到效果需要留意計算元素的變化，你可能會想到一些類似的監聽數據變化的方法，而vue中也是有這樣的東西的。
下麵的代碼監聽了firstName和lastName，當這兩個數據變化的時候會重新給fullName賦值。

        <div id="app">
            <div>{{ fullName }}</div>
        </div>
        <!--
                var app = new Vue({
                    el: '#app',
                    data: {
                        firstName: 'Foo',
                        lastName: 'Bar',
                        fullName: 'Foo Bar'
                    },
                    watch: {
                        firstName: function (val) {
                          this.fullName = val + ' ' + this.lastName
                        },
                        lastName: function (val) {
                          this.fullName = this.firstName + ' ' + val
                        }
                    }
                })
         -->

使用計算屬性達到上面效果（顯然省了不少代碼）：

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})


計算屬性的setter

  • 上面的fullName例子中，當firstName和lastName更改的時候，fullName會更改。
  • 但有沒有可能要求fullName更改的時候，firstName和lastName會對應更改呢？
  • 上面的獲取變化後的fullName是getter，其實還可以設置setter
        <div id="app">
            <div>{{ fullName }}</div>
        </div>
        <!--
       var app = new Vue({
                    el: '#app',
                    data: {
                        firstName: 'Foo',
                        lastName: 'Bar'
                    },
                    computed: {
                      fullName: {
                        // getter
                        get: function () {
                          return this.firstName + ' ' + this.lastName
                        },
                        // setter
                        set: function (newValue) {
                          var names = newValue.split(' ')
                          this.firstName = names[0]
                          this.lastName = names[names.length - 1]
                        }
                      }
                  }
                })
         -->


偵聽器


雖然計算屬性已經提供了很多的好處，但有些時候計算屬性也不能滿足我們的要求。比如我們希望監聽某個屬性的變化來得到另一個屬性的結果，但是不希望它馬上得到結果，那麼這時候計算屬性就達不到需求了。而監聽器裡面可以寫一些其他代碼（比如一些延遲去得到結果的代碼）。
當需要在數據變化時執行非同步或開銷較大的操作時，watch是最有用的。
為什麼有時候不希望計算新結果那麼快呢？這就好比有人在百度搜索中輸入一個個字，如果每個字都要進行檢索的話，那麼就對百度來說開銷就很大了，如果稍微等等，確認用戶輸入完畢再去計算，那麼就節省了很多資源了，下麵的來自官網的例子正是一種這樣的考慮了資源開銷的例子。


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
        <div id="watch-example">
            <p>
              Ask a yes/no question:
              <input v-model="question">
            </p>
            <p>{{ answer }}</p>
        </div>
    </body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>
    <script>
    var watchExampleVM = new Vue({
      el: '#watch-example',
      data: {
        question: '',
        answer: 'I cannot give you an answer until you ask a question!'
      },
      watch: {
        // 如果 `question` 發生改變，這個函數就會運行
        question: function (newQuestion, oldQuestion) {
          this.answer = 'Waiting for you to stop typing...'
          this.debouncedGetAnswer()
        }
      },
      created: function () {
        // `_.debounce` 是一個通過 Lodash 限制操作頻率的函數。
        // 在這個例子中，我們希望限制訪問 yesno.wtf/api 的頻率
        // AJAX 請求直到用戶輸入完畢才會發出。想要瞭解更多關於
        // `_.debounce` 函數 (及其近親 `_.throttle`) 的知識，
        // 請參考：https://lodash.com/docs#debounce
        this.debouncedGetAnswer = _.debounce(this.getAnswer, 500)
      },
      methods: {
        getAnswer: function () {
          if (this.question.indexOf('?') === -1) {
            this.answer = 'Questions usually contain a question mark. ;-)'
            return
          }
          this.answer = 'Thinking...'
          var vm = this
          axios.get('https://yesno.wtf/api')
            .then(function (response) {
              vm.answer = _.capitalize(response.data.answer)
            })
            .catch(function (error) {
              vm.answer = 'Error! Could not reach the API. ' + error
            })
        }
      }
    })
    </script>
</html>



您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 看看redis中那些好玩的module (sql on redis, bf/cf on redis)
    自從redis加入了module功能之後，redis的生態就很有意思了，每個領域的大佬都會以插件的形式給redis擴展一些新的功能，比如本篇說到的rediSQL，rebloom。 一：rediSQL 1. 背景 redis雖然是牛逼，但還是有很多人吐槽redis操作性太弱，比如你想要在redis上實 ...
  • MySQL高級特性——綁定變數
    從MySQL 4.1 版本開始，就支持伺服器端的綁定變數，這大大提高了客戶端和伺服器端數據傳輸的效率 ...
  • 多個角色同一登入口登入，不角色許可權，屬性欄位都不同，如何設計資料庫中完成登入驗證
    問題待解決，求幫助 最近遇到一個：多角色，不同許可權，登入口相同 暫時做法（自己覺得煩瑣）： 設計 登入表 login 用戶表 user（id（pk）， account（fk）···） 管理員表admin（account（pk），···） 醫生表doctor（account（pk），···） 將use ...
  • SQLServer之分離資料庫
    分離資料庫註意事項 要求具有 db_owner 固定資料庫角色中的成員資格。 可以分離資料庫的數據和事務日誌文件，然後將它們重新附加到同一或其他 SQL Server實例。 如果要將資料庫更改到同一電腦的不同 SQL Server 實例或要移動資料庫，分離和附加資料庫會很有用。 分離資料庫是指將數 ...
  • jdbc執行過程 jar包下載
    工具和準備： MYSQL 8.0jar包： 鏈接：https://pan.baidu.com/s/1O3xuB0o1DxmprLPLEQpZxQ 提取碼：grni 使用eclipse開發首先把jar包導入內庫中 首先將jar包複製到項目src下，右擊src點擊build path然後會在Refren ...
  • 後端開發者的Vue學習之路（二）
    [toc] 首發日期：2019 01 20 上篇內容回顧： 上篇內容講了 Vue的介紹：優點，MVVM Vue的靜態導入與安裝，以及hello world 實例可定義的內容：el,data,methods,生命周期鉤子（包括計算屬性，偵聽器也是可以定義在實例中的） 計算屬性 偵聽器 數據綁定 v m ...
  • Webpack4 學習筆記四 暴露全局變數、externals
    前言 此內容是個人學習筆記,以便日後翻閱。 非教程,如有錯誤還請指出 webpack 暴露全局變數 通過 expose loader 內聯配置 在 webpack中配置 每個模塊通過註入的方式 通過CDN的方式引入一個庫,並通過 webpack在項目中優化 通過 expose loader 內聯配置 ...
  • FormData對象的使用
    一、概述 FormData類型是XMLHttpRequest 2級定義的，它是為序列化表以及創建與表單格式相同的數據提供便利。 作用：1.利用一些鍵值對來模擬一系列表單控制項：即將form中的所有表單元素的name和value組裝成一個queryString；2.非同步上傳二進位文件。 與普通Ajax相 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類