標籤: 網頁設計公司

MySQL 原理篇

我們經常使用 MySQL 的執行計劃來查看 SQL 語句的執行效率，接下來分析執行計劃的各個显示內容。

EXPLAIN SELECT * FROM users 
WHERE id IN (SELECT userID FROMuser_address WHERE address = "湖南長沙麓谷") ;

執行計劃的 id

select 查詢的序列號，標識執行的順序

• id 相同，執行順序由上至下
• id 不同，如果是子查詢，id 的序號會遞增，id 值越大優先級越高，越先被執行

執行計劃的 select_type

查詢的類型，主要是用於區分普通查詢、聯合查詢、子查詢等。

• SIMPLE：簡單的 select 查詢，查詢中不包含子查詢或者 union
• PRIMARY：查詢中包含子部分，最外層查詢則被標記為 primary
• SUBQUERY/MATERIALIZED：SUBQUERY 表示在 select 或 where 列表中包含了子查詢，MATERIALIZED：表示 where 後面 in 條件的子查詢
• UNION：表示 union 中的第二個或後面的 select 語句
• UNION RESULT：union 的結果

對於 UNION 和 UNION RESULT 可以通過下面的例子展現：

EXPLAIN
SELECT * FROM users WHERE id IN(1, 2)
UNION
SELECT * FROM users WHERE id IN(3, 4);

執行計劃的 table

查詢涉及到的表。

• 直接顯示錶名或者表的別名
• <unionM,N> 由 ID 為 M，N 查詢 union 產生的結果
• <subqueryN> 由 ID 為 N 查詢產生的結果

執行計劃的 type 

訪問類型，SQL 查詢優化中一個很重要的指標，結果值從好到壞依次是：system > const > eq_ref > ref > range > index > ALL。

• system：系統表，少量數據，往往不需要進行磁盤IO
• const：常量連接
• eq_ref：主鍵索引（primary key）或者非空唯一索引（unique not null）等值掃描
• ref：非主鍵非唯一索引等值掃描
• range：範圍掃描
• index：索引樹掃描
• ALL：全表掃描（full table scan）

下面通過舉例說明。

system

explain select * from mysql.time_zone;

上例中，從系統庫 MySQL 的系統表 time_zone 里查詢數據，訪問類型為 system，這些數據已經加載到內存里，不需要進行磁盤 IO，這類掃描是速度最快的。

explain select * from (select * from user where id=1) tmp;

再舉一個例子，內層嵌套（const）返回了一個臨時表，外層嵌套從臨時表查詢，其掃描類型也是 system，也不需要走磁盤 IO，速度超快。

const 

數據準備：

CREATE TABLE `user` (
  `id` int(11) NOT NULL,
  `NAME` varchar(20) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

insert into user values(1,'shenjian');
insert into user values(2,'zhangsan');
insert into user values(3,'lisi');

explain select * from user where id=1;

const 掃描的條件為： 

1. 命中主鍵（primary key）或者唯一（unique）索引
2. 被連接的部分是一個常量（const）值 

如上例，id 是 主鍵索引，連接部分是常量1。

eq_ref

數據準備：

CREATE TABLE `user` (
  `id` int(11) NOT NULL,
  `NAME` varchar(20) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

insert into user values(1,'shenjian');
insert into user values(2,'zhangsan');
insert into user values(3,'lisi');

CREATE TABLE `user_ex` (
  `id` int(11) NOT NULL,
  `age` int(11) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

insert into user_ex values(1,18);
insert into user_ex values(2,20);
insert into user_ex values(3,30);
insert into user_ex values(4,40);
insert into user_ex values(5,50);

EXPLAIN SELECT * FROM USER,user_ex WHERE user.id=user_ex.id;

eq_ref 掃描的條件為，對於前表的每一行（row），后表只有一行被掃描。 

再細化一點：  

1. join 查詢
2. 命中主鍵（primary key）或者非空唯一（unique not null）索引
3. 等值連接；

如上例，id 是主鍵，該 join 查詢為 eq_ref 掃描。

ref

數據準備：

CREATE TABLE `user` (
  `id` int(11) DEFAULT NULL,
  `name` varchar(20) DEFAULT NULL,
  KEY `id` (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

insert into user values(1,'shenjian');
insert into user values(2,'zhangsan');
insert into user values(3,'lisi');

CREATE TABLE `user_ex` (
  `id` int(11) DEFAULT NULL,
  `age` int(11) DEFAULT NULL,
  KEY `id` (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

insert into user_ex values(1,18);
insert into user_ex values(2,20);
insert into user_ex values(3,30);
insert into user_ex values(4,40);
insert into user_ex values(5,50);

EXPLAIN SELECT * FROM USER,user_ex WHERE user.id=user_ex.id;

如果把上例 eq_ref 案例中的主鍵索引，改為普通非唯一（non unique）索引。就由 eq_ref 降級為了 ref，此時對於前表的每一行（row），后表可能有多於一行的數據被掃描。

select * from user where id=1;

當 id 改為普通非唯一索引后，常量的連接查詢，也由 const 降級為了 ref，因為也可能有多於一行的數據被掃描。

ref 掃描，可能出現在 join 里，也可能出現在單表普通索引里，每一次匹配可能有多行數據返回，雖然它比 eq_ref 要慢，但它仍然是一個很快的 join 類型。

range

數據準備：

CREATE TABLE `user` (
  `id` int(11) NOT NULL,
  `name` varchar(20) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

insert into user values(1,'shenjian');
insert into user values(2,'zhangsan');
insert into user values(3,'lisi');
insert into user values(4,'wangwu');
insert into user values(5,'zhaoliu');

explain select * from user where id between 1 and 4;
explain select * from user where id in(1,2,3);
explain select * from user where id > 3;

range 掃描就比較好理解了，它是索引上的範圍查詢，它會在索引上掃碼特定範圍內的值。

像上例中的 between，in，> 都是典型的範圍（range）查詢。

index

explain count (*) from user;

如上例，id 是主鍵，該 count 查詢需要通過掃描索引上的全部數據來計數，它僅比全表掃描快一點。

ALL 

數據準備：

CREATE TABLE `user` (
  `id` int(11) DEFAULT NULL,
  `name` varchar(20) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

insert into user values(1,'shenjian');
insert into user values(2,'zhangsan');
insert into user values(3,'lisi');

CREATE TABLE `user_ex` (
  `id` int(11) DEFAULT NULL,
  `age` int(11) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

insert into user_ex values(1,18);
insert into user_ex values(2,20);
insert into user_ex values(3,30);
insert into user_ex values(4,40);
insert into user_ex values(5,50);

explain select * from user,user_ex where user.id=user_ex.id;

如果 id 上不建索引，對於前表的每一行（row），后表都要被全表掃描。

文章中，這個相同的 join 語句出現了三次：

1. 掃描類型為 eq_ref，此時 id 為主鍵
2. 掃描類型為 ref，此時 id 為非唯一普通索引
3. 掃描類型為 ALL，全表掃描，此時id上無索引

有此可見，建立正確的索引，對數據庫性能的提升是多麼重要。

總結 

1. explain 結果中的 type 字段，表示（廣義）連接類型，它描述了找到所需數據使用的掃描方式；
2. 常見的掃描類型有：system>const>eq_ref>ref>range>index>ALL，其掃描速度由快到慢；
3. 各類掃描類型的要點是：

1. system 最快：不進行磁盤 IO
2. const：PK 或者 unique 上的等值查詢
3. eq_ref：PK 或者 unique 上的 join 查詢，等值匹配，對於前表的每一行，后表只有一行命中
4. ref：非唯一索引，等值匹配，可能有多行命中
5. range：索引上的範圍掃描，例如：between、in、>
6. index：索引上的全集掃描，例如：InnoDB 的 count
7. ALL 最慢：全表掃描

1. 建立正確的索引，非常重要；
2. 使用 explain 了解並優化執行計劃，非常重要；

執行計劃 possible_keys

查詢過程中有可能用到的索引。

執行計劃 key

實際使用的索引，如果為 NULL ，則沒有使用索引。

執行計劃 rows

根據表統計信息或者索引選用情況，大致估算出找到所需的記錄所需要讀取的行數。

執行計劃 filtered 

表示返回結果的行數占需讀取行數的百分比， filtered 的值越大越好。

執行計劃 Extra 

十分重要的額外信息。

• Using filesort：MySQL 對數據使用一個外部的文件內容進行了排序，而不是按照表內的索引進行排序讀取。
• Using temporary：使用臨時表保存中間結果，也就是說 MySQL 在對查詢結果排序時使用了臨時表，常見於order by 或 group by。
• Using index：表示 SQL 操作中使用了覆蓋索引（Covering Index），避免了訪問表的數據行，效率高。
• Using index condition：表示 SQL 操作命中了索引，但不是所有的列數據都在索引樹上，還需要訪問實際的行記錄。
• Using where：表示 SQL 操作使用了 where 過濾條件。
• Select tables optimized away：基於索引優化 MIN/MAX 操作或者 MyISAM 存儲引擎優化 COUNT(*) 操作，不必等到執行階段再進行計算，查詢執行計劃生成的階段即可完成優化。
• Using join buffer (Block Nested Loop)：表示 SQL 操作使用了關聯查詢或者子查詢，且需要進行嵌套循環計算。

下面通過舉例說明。

數據準備：

CREATE TABLE `user` (
  `id` int(11) NOT NULL,
  `name` varchar(20) DEFAULT NULL,
  `sex` varchar(5) DEFAULT NULL,
  PRIMARY KEY (`id`),
  KEY `name` (`name`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

insert into user values(1, 'shenjian','no');
insert into user values(2, 'zhangsan','no');
insert into user values(3, 'lisi', 'yes');
insert into user values(4, 'lisi', 'no');

數據說明：

用戶表：id 主鍵索引，name 普通索引（非唯一），sex 無索引。

四行記錄：其中 name 普通索引存在重複記錄 lisi。

Using filesort

explain select * from user order by sex;

 

Extra 為 Using filesort 說明，得到所需結果集，需要對所有記錄進行文件排序。

這類 SQL 語句性能極差，需要進行優化。

典型的，在一個沒有建立索引的列上進行了 order by，就會觸發 filesort，常見的優化方案是，在 order by 的列上添加索引，避免每次查詢都全量排序。

Using temporary

explain select * from user group by name order by sex;

Extra 為 Using temporary 說明，需要建立臨時表（temporary table）來暫存中間結果。

這類 SQL 語句性能較低，往往也需要進行優化。

典型的 group by 和 order by 同時存在，且作用於不同的字段時，就會建立臨時表，以便計算出最終的結果集。

臨時表存在兩種引擎，一種是 Memory 引擎，一種是 MyISAM 引擎，如果返回的數據在 16M 以內（默認），且沒有大字段的情況下，使用 Memory 引擎，否則使用 MyISAM 引擎。 

Using index

EXPLAIN SELECT id FROM USER;

Extra 為 Using index 說明，SQL 所需要返回的所有列數據均在一棵索引樹上，而無需訪問實際的行記錄。

這類 SQL 語句往往性能較好。

Using index condition

explain select id, name, sex from user where name='shenjian';

Extra 為 Using index condition 說明，確實命中了索引，但不是所有的列數據都在索引樹上，還需要訪問實際的行記錄。

這類 SQL 語句性能也較高，但不如 Using index。

Using where

explain select * from user where sex='no';

Extra 為 Using where 說明，查詢的結果集使用了 where 過濾條件，比如上面的 SQL 使用了 sex = 'no' 的過濾條件

Select tables optimized away

EXPLAIN SELECT MAX(id) FROM USER;

 

比如上面的語句查詢 id 的最大值，因為 id 是主鍵索引，根據 B+Tree 的結構，天然就是有序存放的，所以不需要等到執行階段再進行計算，查詢執行計劃生成的階段即可完成優化。

Using join buffer (Block Nested Loop)

explain select * from user where id in (select id from user where sex='no');

Extra 為 Using join buffer (Block Nested Loop) 說明，需要進行嵌套循環計算。內層和外層的 type 均為 ALL，rows 均為4，需要循環進行4*4次計算。

這類 SQL 語句性能往往也較低，需要進行優化。

典型的兩個關聯表 join，關聯字段均未建立索引，就會出現這種情況。常見的優化方案是，在關聯字段上添加索引，避免每次嵌套循環計算。

參考 

本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理
【其他文章推薦】

※帶您來了解什麼是 USB CONNECTOR  ?

※自行創業 缺乏曝光? 下一步"網站設計"幫您第一時間規劃公司的門面形象

※如何讓商品強力曝光呢? 網頁設計公司幫您建置最吸引人的網站，提高曝光率!!

※綠能、環保無空污,成為電動車最新代名詞，目前市場使用率逐漸普及化

※廣告預算用在刀口上，網站設計公司幫您達到更多曝光效益

前段時間跟大家探討了 Vim 的顏色方案的話題，取得了不錯的反響，大家可以點擊以下鏈接回顧那篇文章：

今天我們來介紹 Vim 的分屏功能。

為什麼需要分屏功能？其實需求場合有很多。比如，我現在屏幕很大，但我們的代碼一般是左對齊，右邊很空，這樣我們就可以通過分屏來充分利用右邊的屏幕。再如，我現在想同時查看多個文檔，除了打開多個終端外，我們還可以通過分屏來達到我們的目的。

當然類似的場合還有很多，只要我們充分挖掘，肯定能挖掘出更多需求。

下面我們就來詳細介紹 Vim 的分屏操作。

分屏功能基本操作

首先我們隨便打開一個代碼文件。為了方便演示，代碼長度越長越好。

vim test.c

現在讓我們將界面分成左右兩部分。首先我們按 ctrl+w ，緊接着按 v 。這樣操作之後，屏幕就一分為二了，如下圖示：

如果我們想要三等分怎麼操作？很簡單，在上面的基礎之上，我們再次執行一遍上面的操作，屏幕就三等分了。

如果你覺得這樣操作太麻煩，我們還可以通過在末行模式執行以下命令達到同樣的效果：

:vsplit

既然是命令，那就肯定有縮寫：

:vsp

簡直簡單到離譜…來點有水平的~讓我們從頭開始，這次我們將屏幕進行橫向分割。首先我們在末行模式下運行以下命令：

:split

同樣的，我們也有縮寫命令：

:sp

這個功能也可通過鍵盤組合鍵實現。對於水平分割來講，先按 ctrl + w ，然後按 s 。同樣，所有這些字母都是小寫的，並且是英文輸入狀態。

分屏之間切換

如前文所言，分屏在很多場景下非常有用，但是，你如果不能從一個分屏切換到另一個分屏，那這種拆分視圖就完全沒意義了。下面讓我給大家展示如何從一個分屏切換另一個分屏。

在這裏，我設置了同一文件的4個分割視圖。

剛開始時，光標位於第一個分屏。現在，假如我們要切換到右側分屏，我們需要先按 ctrl + w ，然後按 l 。

同樣地，假如我們要切換到左側窗口，需要先按 ctrl + w ，然後按 h 。

如果你是進行橫向分割屏幕的，那麼就只能上下移動光標。要切換到上面的分屏，需要先按 ctrl + w ，然後按 k 。

同樣地，如果想要切換到下面的分屏，那麼就需要先按 ctrl + w，然後按 j 。

在不同分屏下進行編輯

到此為止，我相信大家已經學會了怎麼進行分屏操作了。那分完屏，我們怎麼在這些分屏下進行文本編輯呢？其實，每個分屏都可以視為一個完整的 Vim 窗口，我們平常怎麼編輯的，就怎樣去編輯文檔。

複製及粘貼操作

與未分屏是基本無差的，大家可以在從一個分屏里複製一段文本，再切換到另一個分屏進行粘貼。操作都是一樣的，只是需要在不同分屏里切換而已。

改變分屏尺寸

默認情況下，Vim 是按等分進行分屏操作的。如果我們想最大化/最小化某個分屏，要如何操作？

如果要將當前窗口加寬到最大尺寸，需要先按 ctrl + w ，然後按 |（注意：不是小寫 L ，是與或非的那個與 | ）。

如果你想把當前窗口高度加高到最大尺寸，那麼需要使用 ctrl + w ，然後使用 **_** 。

那如果想要重置所有分割窗口的大小，那麼使用 ctrl+w ，然後按 = 。

默認情況下，Vim 在進行分屏操作時，每個分屏是等寬或等高的。如果要自定義分屏的寬度，大家可以使用以下結構：

:<width> vsp

同樣地，對於水平分割而言，可以使用類似結構自定義高度：

:<height> sp

在同一個 Vim 窗口下打開多個不同文件

目前為止，所有的 Vim 分屏都是同一個文件的副本，但在很多情況下，我們需要打開多個不同的文件。我們可以將 Vim 窗口進行分屏，再在不同的分屏里打開不同的文件。

如何在 Vim 中打開一個新文件？我們可以使用以下命令：

：e<path_to_file>/filename.extension

例如，我們想要在一個全新的 Vim 實例中打開 vimrc，我們可以使用以下命令：

：e~/.vimrc

打開 vimrc 之後，我們想要將屏幕水平切分並打開一個新文件，可以使用以下命令：

:sp<file_path>

而對於垂直分割屏幕，使用的也是類似的結構：

:vsp<file_path>

小結

Vim 分屏講到這裏就要跟大家告一段落了。這種操作還是比較有趣，並且十分實用。

本文介紹了 Vim 分屏的一些基本操作及編輯方法，合理利用這個功能可以使我們更加高效使用電腦屏幕，提高我們的效率。
—————–

我是良許，世界500強外企 Linux 開發工程師，專業生產 Linux 乾貨。歡迎關注我的公眾號「良許Linux」，裏面分享了 Linux入門、基礎、進階 等系列教程，同時也有 Git、Vim、開源項目 等技術乾貨。公眾號後台回復「1024」獲取最新最全的技術資料，回復「入群」進入高手如雲技術交流群。

本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理

【其他文章推薦】

※為什麼 USB CONNECTOR 是電子產業重要的元件?

※網頁設計一頭霧水??該從何著手呢? 找到專業技術的網頁設計公司，幫您輕鬆架站!

※想要讓你的商品成為最夯、最多人討論的話題?網頁設計公司讓你強力曝光

※想知道最厲害的台北網頁設計公司推薦、台中網頁設計公司推薦專業設計師”嚨底家”!!

請勿使用本文章及源碼作為商業用途！

前言

當初做這個小程序是為了婚禮前的需要，結婚之後，希望這個小程序能夠留存下來，特地花了一些空閑時間將小程序轉化成為“相冊類小程序”

體驗碼

準備工作

1. mpvue框架 
2. 小程序·雲開發 

注意：使用mpvue前，首先你得先熟悉vue框架的基本使用 

項目結構介紹

注意：接下來展示的代碼，有幾個對比，分別是本人優化前和優化后的代碼對比，感興趣的可以着重看一下優化后的成熟寫法。

​

• common目錄： 放一些公共資源，如js,css,json
• components目錄：組件相關的.vue文件都放在這裏
• pages目錄：所有頁面都放在這個目錄
• utils目錄：使用mpvue時自動生成，可忽略
• app.json文件：

{
  "pages": [ "pages/index/main", "pages/photo/main", "pages/map/main", "pages/greet/main", "pages/message/main" ], "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle": "black" }, "tabBar": { "color": "#ccc", "selectedColor": "#ff4c91", "borderStyle": "white", "backgroundColor": "#ffffff", "list": [ { "pagePath": "pages/index/main", "iconPath": "static/images/1-1.png", "selectedIconPath": "static/images/1-2.png", "text": "邀請函" }, { "pagePath": "pages/photo/main", "iconPath": "static/images/2-1.png", "selectedIconPath": "static/images/2-2.png", "text": "甜蜜相冊" }, { "pagePath": "pages/map/main", "iconPath": "static/images/3-1.png", "selectedIconPath": "static/images/3-2.png", "text": "酒店導航" }, { "pagePath": "pages/greet/main", "iconPath": "static/images/4-1.png", "selectedIconPath": "static/images/4-2.png", "text": "好友祝福" }, { "pagePath": "pages/message/main", "iconPath": "static/images/5-1.png", "selectedIconPath": "static/images/5-2.png", "text": "留言評論" } ] }, "requiredBackgroundModes": ["audio"] }

• App.vue文件 （本人主要是為了增加項目更新后的提醒），所以在這個文件加了些相關內容，內容如下：

<script>
export default { onLaunch () { // 檢測小程序是否有新版本更新 if (wx.canIUse('getUpdateManager')) { const updateManager = wx.getUpdateManager() updateManager.onCheckForUpdate(function (res) { // 請求完新版本信息的回調 if (res.hasUpdate) { updateManager.onUpdateReady(function () { wx.showModal({ title: '更新提示', content: '新版本已經準備好，是否重啟應用？', success: function (res) { if (res.confirm) { // 新的版本已經下載好，調用 applyUpdate 應用新版本並重啟  updateManager.applyUpdate() } } }) }) // 小程序有新版本，會主動觸發下載操作（無需開發者觸發）  wx.getUpdateManager().onUpdateFailed(function () { // 當新版本下載失敗，會進行回調  wx.showModal({ title: '提示', content: '檢查到有新版本，下載失敗，請檢查網絡設置', showCancel: false }) }) } }) } else { // 版本過低則無法使用該方法  wx.showModal({ title: '提示', confirmColor: '#5BB53C', content: '當前微信版本過低，無法使用該功能，請升級到最新微信版本后重試。' }) } } } </script> <style lang="stylus"> page height 100% image display block </style>

• main.js文件：

import Vue from 'vue'
import App from './App' Vue.config.productionTip = false App.mpType = 'app' wx.cloud.init({ env: '雲開發環境ID' }) const app = new Vue(App) app.$mount()

• functions目錄：主要放一些雲函數，這裏不清楚雲函數的文章後面會提及
• images目錄：主要放一些靜態資源圖片

頁面介紹

首頁——邀請函

首頁着重和大家講解下背景音樂的實現方法

const audioCtx = wx.createInnerAudioContext()

 接口獲取實例

接着，通過實例的相關方法來實現音樂的播放與暫停功能

具體代碼如下：

<script>
import IndexSwiper from 'components/indexSwiper' import tools from 'common/js/h_tools' const audioCtx = wx.createInnerAudioContext() export default { name: 'Index', components: { IndexSwiper }, data () { return { isPlay: true, list: [] } }, onShow () { const that = this that.isPlay = true that.getMusicUrl() }, methods: { audioPlay () { const that = this if (that.isPlay) { audioCtx.pause() that.isPlay = false tools.showToast('您已暫停音樂播放~') } else { audioCtx.play() that.isPlay = true tools.showToast('背景音樂已開啟~') } }, getList () { const that = this const db = wx.cloud.database() const banner = db.collection('banner') banner.get().then(res => { that.list = res.data[0].bannerList }) }, getMusicUrl () { const that = this const db = wx.cloud.database() const music = db.collection('music') music.get().then(res => { let musicUrl = res.data[0].musicUrl audioCtx.src = musicUrl audioCtx.loop = true audioCtx.play() that.getList() }) } }, onShareAppMessage: function (res) { return { path: '/pages/index/main' } } } </script>

以上代碼中使用到了雲開發相關功能，文章後面會介紹，請大家稍安勿躁

相冊頁——就一個輪播圖，這裏就不過多介紹

地圖頁——這裏着重講一下地圖標籤map

map標籤 

這裏講一下標記點markers：

data () {
    return { // qqSdk: '',  markers: [{ iconPath: '../../static/images/nav.png', id: 0, latitude: 30.08059, longitude: 115.93027, width: 50, height: 50 }] } }

<template>
    <div class="map">
        <image mode="aspectFit" class="head-img" src="../../static/images/t1.png"/>
        <map class="content" id="map" longitude="115.93027" latitude="30.08059" :markers="markers" scale="18" @tap="toNav">
        </map>
        <div class="call">
            <div class="left" @tap="linkHe">
                <image src="../../static/images/he.png"/>
                <span>呼叫新郎</span>
            </div>
            <div class="right" @tap="linkShe">
                <image src="../../static/images/she.png"/>
                <span>呼叫新娘</span>
            </div>
        </div>
        <image class="footer" src="../../static/images/grren-flower-line.png"/>
    </div>
</template>

祝福頁——也是雲開發相關內容，後面會介紹

留言頁——也是雲開發相關內容，後面會介紹

雲開發介紹

project.config.json文件：

"cloudfunctionRoot": "static/functions/"

進行雲開發首先我們需要找到上面這個文件，在上面這個json文件中加上上面這行代碼

cloudfunctionRoot 用於指定存放雲函數的目錄

app.json文件：

"window": {
    "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle": "black" }, "cloud": true

增加字段 "cloud": true實現雲開發能力的兼容性

開通雲開發

在開發者工具工具欄左側，點擊 “雲開發” 按鈕即可開通雲開發

雲開發控制台

​

數據庫

 雲開發提供了一個 JSON 數據庫

 

存儲

 

雲開發提供了一塊存儲空間，提供了上傳文件到雲端、帶權限管理的雲端下載能力，開發者可以在小程序端和雲函數端通過 API 使用雲存儲功能。

 

雲函數

 

雲函數是一段運行在雲端的代碼，無需管理服務器，在開發工具內編寫、一鍵上傳部署即可運行後端代碼。

使用雲開發

雲能力初始化

在小程序端開始使用雲能力前，需先調用 wx.cloud.init 方法完成雲能力初始化

import Vue from 'vue'
import App from './App' Vue.config.productionTip = false App.mpType = 'app' wx.cloud.init({ env: '雲開發環境ID' }) const app = new Vue(App) app.$mount()

數據庫的使用

在開始使用數據庫 API 進行增刪改查操作之前，需要先獲取數據庫的引用。以下調用獲取默認環境的數據庫的引用：

const db = wx.cloud.database()

 要操作一個集合，需先獲取它的引用：

const todos = db.collection('todos')

操作數據庫的相關示例

例：首頁獲取背景音樂資源

getMusicUrl () {
      const that = this const db = wx.cloud.database() const music = db.collection('music') music.get().then(res => { let musicUrl = res.data[0].musicUrl audioCtx.src = musicUrl audioCtx.loop = true audioCtx.play() that.getList() }) }

 例：首頁獲取輪播圖數組

getList () {
      const that = this const db = wx.cloud.database() const banner = db.collection('banner') banner.get().then(res => { that.list = res.data[0].bannerList }) }

例：祝福頁，用戶送上祝福存儲用戶

<script>
import tools from 'common/js/h_tools' export default { name: 'Greet', data () { return { userList: [], openId: '', userInfo: '' } }, onShow () { const that = this that.getUserList() }, methods: { scroll (e) { console.log(e) }, sendGreet (e) { const that = this if (e.target.errMsg === 'getUserInfo:ok') { wx.getUserInfo({ success: function (res) { that.userInfo = res.userInfo that.getOpenId() } }) } }, addUser () { const that = this const db = wx.cloud.database() const user = db.collection('user') user.add({ data: { user: that.userInfo } }).then(res => { that.getUserList() }) }, getOpenId () { const that = this wx.cloud.callFunction({ name: 'user', data: {} }).then(res => { that.openId = res.result.openid that.getIsExist() }) }, getIsExist () { const that = this const db = wx.cloud.database() const user = db.collection('user') user.where({ _openid: that.openId }).get().then(res => { if (res.data.length === 0) { that.addUser() } else { tools.showToast('您已經送過祝福了~') } }) }, getUserList () { const that = this wx.cloud.callFunction({ name: 'userList', data: {} }).then(res => { that.userList = res.result.data.reverse() }) } } } </script>

獲取送祝福的好友列表

getUserList () {
      const that = this wx.cloud.callFunction({ name: 'userList', data: {} }).then(res => { that.userList = res.result.data.reverse() }) }

這裏用到了雲函數，之所以用雲函數是因為小程序端在獲取集合數據時服務器一次默認並且最多返回 20 條記錄，雲函數端這個数字則是 100。

雲函數的使用方法

上面我們講過在project.config.json文件中配置雲函數存放位置

下面是雲函數messageList的index.js文件：

不成熟寫法：

const cloud = require('wx-server-sdk')
cloud.init()
const db = cloud.database() const MAX_LIMIT = 100 exports.main = async (event, context) => { // 先取出集合記錄總數 const countResult = await db.collection('message').count() const total = countResult.total // 計算需分幾次取 const batchTimes = Math.ceil(total / 100) // 承載所有讀操作的 promise 的數組 const tasks = [] for (let i = 0; i < batchTimes; i++) { const promise = db.collection('message').skip(i * MAX_LIMIT).limit(MAX_LIMIT).get() tasks.push(promise) } // 等待所有 return (await Promise.all(tasks)).reduce((acc, cur) => ({ data: acc.data.concat(cur.data), errMsg: acc.errMsg })) }

成熟寫法（分頁查詢）：

const cloud = require('wx-server-sdk')
cloud.init()
const db = cloud.database() exports.main = async (event, context) => { const wxContext = cloud.getWXContext() const dbName = 'message' const filter = event.filter ? event.filter : null const pageNum = event.pageNum ? event.pageNum : 1 const pageSize = event.pageSize ? event.pageSize : 10 const countResult = await db.collection(dbName).where(filter).count() const total = countResult.total const totalPage = Math.ceil(total / pageSize) let hasMore if (pageNum >= totalPage) { hasMore = false } else { hasMore = true } return db.collection(dbName).orderBy('time', 'desc').where(filter).skip((pageNum - 1) * pageSize).limit(pageSize).get().then(res => { res.hasMore = hasMore res.total = total res.openId = wxContext.OPENID return res }) }

​

使用雲函數前，在開發者工具上，找到messageList目錄，右鍵如圖：

​

 點擊上傳並部署：雲端安裝依賴（不上傳node_modules）

得到如圖的提示：

​

 安裝完點擊完成就能使用當前雲函數了，使用方法即：

getUserList () {
      const that = this wx.cloud.callFunction({ name: 'userList', data: {} }).then(res => { that.userList = res.result.data.reverse() }) }

數組之所以要倒序是因為希望新祝福的的用戶在最前面显示 

用戶送上祝福的時候存儲用戶

這裏我們用到了雲函數獲取用戶信息，

當小程序端調用雲函數時，雲函數的傳入參數中會被注入小程序端用戶的 openid，開發者無需校驗 openid 的正確性，因為微信已經完成了這部分鑒權，開發者可以直接使用該 openid

不成熟寫法：

下面是雲函數user的index.js文件：

// 雲函數入口文件
const cloud = require('wx-server-sdk')

cloud.init()

// 雲函數入口函數
exports.main = async (event, context) => { const wxContext = cloud.getWXContext() return { event, openid: wxContext.OPENID, appid: wxContext.APPID, unionid: wxContext.UNIONID } }

主要是為了獲取當前操作用戶的openid,獲取當前用戶的openid方法：

getOpenId () {
      const that = this wx.cloud.callFunction({ name: 'user', data: {} }).then(res => { that.openId = res.result.openid that.getIsExist() }) }

接着判斷當前用戶是否已經存在於數據庫中，即getIsExist()方法：

getIsExist () {
      const that = this const db = wx.cloud.database() const user = db.collection('user') user.where({ _openid: that.openId }).get().then(res => { if (res.data.length === 0) { that.addUser() } else { tools.showToast('您已經送過祝福了~') } }) }

如果得到的數組長度為零則添加改用戶到數據庫，否則則提醒當前用戶已經送過祝福

接下來介紹存儲用戶信息的方法，即addUser():

addUser () {
      const that = this const db = wx.cloud.database() const user = db.collection('user') user.add({ data: { user: that.userInfo } }).then(res => { that.getUserList() }) }

存入到數據庫的信息是這樣的：

​

成熟寫法（使用雲函數一次搞定）：

// 雲函數入口文件
const cloud = require('wx-server-sdk')
cloud.init()
const db = cloud.database() exports.main = async (event, context) => { const wxContext = cloud.getWXContext() const dbName = 'user' const filter = { _openid: wxContext.OPENID } const countResult = await db.collection(dbName).where(filter).count() const total = countResult.total if (total) { return { has: true } } else { return db.collection(dbName).add({ data: { user: event.user, _openid: wxContext.OPENID, time: db.serverDate() } }) } }

toMessage (e) {
      const that = this
      if (e.target.errMsg === 'getUserInfo:ok') { wx.getUserInfo({ success: function (res) { that.userInfo = res.userInfo wx.navigateTo({ url: `/pages/writeMessage/main?avatar=${that.userInfo.avatarUrl}&name=${that.userInfo.nickName}`  }) that.addUser(that.userInfo) } }) } }, addUser (obj) { wx.cloud.callFunction({ name: 'addUser', data: { user: obj } }) }

總結 

大概的功能就是這麼多，希望可以幫助到大家，覺得寫得不錯的記得給作者點個贊，你們的支持是我不斷更新的最大動力！

源碼地址

​

後續優化

• 留言審核
• 一些動畫效果
• 分頁處理
• 雲函數優化
• 回到頂部

最後

一開始不清楚隨筆和文章的區別，還是希望這篇隨筆能展示在博客園首頁（所以改成隨筆），讓更多的朋友看到

希望對那些有想法又不會後台開發的朋友一些啟示作用，祝你早日做出只屬於自己的小程序。

本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理
【其他文章推薦】

※帶您來了解什麼是 USB CONNECTOR  ?

※自行創業 缺乏曝光? 下一步"網站設計"幫您第一時間規劃公司的門面形象

※如何讓商品強力曝光呢? 網頁設計公司幫您建置最吸引人的網站，提高曝光率!!

※綠能、環保無空污,成為電動車最新代名詞，目前市場使用率逐漸普及化

※廣告預算用在刀口上，網站設計公司幫您達到更多曝光效益