结合LeanCloud做一个查询术语的单页应用 • 果果日记

前言

计算机领域中存在大量的术语，如果恰好是自己未接触的领域，看到一连串不懂的英文缩写，一定是一件令人困惑的事。虽然有百度和谷歌等搜索引擎，如果我们能自建一个更专业的数据库，似乎~~对我们有很大帮助~~（可玩性很高）。

一些问题

虽然该项目看起来只是查询数据库，但实际开发过程中遇到了比较多的一些问题。梳理这些问题是有一定价值的，不仅能避免以后被困扰，而且能加深我对这个领域的认识。

与LeanCloud数据存储交互

最初知道LeanCloud，其实是有朋友的hexo博客下留有评论框，静态博客下的评论框引起了我的好奇，F12表明服务提供商是LeanCloud，我猜测它是以专门为app、网站等应用提供后端服务为生。

LeanCloud使用难度不算大，官方文档也还行，但我找了半天才找到我想要的查询数据库的方法和实例。

建立对SDK的引用对象

官方来源：https://leancloud.cn/docs/sdk_setup-js.html

var AV = require("leancloud-storage");
var { Query, User } = AV;
var APP_ID = "**Hidden**";
var APP_KEY = "**Hidden**";

AV.init({
  appId: APP_ID,
  appKey: APP_KEY
});

查询数据示例

这里演示了在Terms表中查找attr==某个值的记录，result是一个数组。

var query = new AV.Query("Terms");
    query.equalTo("attr", value);//选出 attr列的值 为value 的行
    //find以为还有first等方法，都返回promise对象
    query.find().then(res => {
      ...
    }).catch(err => {
        ...
    });

（补充）添加数据示例

该示例将在TestObject表新建一条words=’Hello World!’的记录。

var TestObject = AV.Object.extend('TestObject');
var testObject = new TestObject();
testObject.save({
  words: 'Hello World!'
}).then(function(object) {
  alert('LeanCloud Rocks!');

监听全局键盘事件

这个单页应用实际由两个状态组成，一个状态显示搜索框，另一个状态显示结果/详情，我们想实现搜索框聚焦时按下enter切换到详情组件很简单，但反过来就有点麻烦，因为详情组件不支持聚焦。

在网页中，只有聚焦的元素才能监听键盘事件（聪明的你也一定观察到了），同时事件冒泡的方向是自下向上，综合这两点，我们有两个方向。第一个方向是通过tabindex属性使详情组件支持聚焦，第二个方向是直接向顶级元素添加键盘监听器。除了搜索组件与详情组件，网页还有导航栏与底部，如果失去焦点就不能通过快捷键返回，这不是我们想要的效果。

我们通过向document添加事件处理实现在详情状态下按esc返回搜索状态（position用来控制状态，keyCode==27的键正是esc）：

    document.onkeydown = e => {
      if (this.position == true && e.keyCode == 27) {
        this.position = false;
      }
    };

Vue-cli与Vue-router结合

Vue-router的官方文档给出了cdn接入的示例，我们这里介绍结合Vue-cli使用。

首先，在项目根目录下npm i vue-router

然后，在main.js里导入（import VueRouter from ‘vue-router’）并注册到Vue（Vue.use(VueRouter)）

再新建一个VueRouter实例：

const router = new VueRouter({
    routes: [
            { path: '/detail', component: Detail },
            { path: '/', component: SearchBox }
        ] 
})

修改一下Vue根实例：

new Vue({
    render: h => h(App),
    router
}).$mount('#app')

剩下的部分则是将<router-link>标签与<router-view>标签添加到需要使用的地方。

布局与CSS选择器

Layout

Bootstrap-vue的布局很方便，通过b-row与b-col节点上的align-v与align-self属性可以实现对齐效果。对于col内部的行内元素对齐，我使用了verticle-align属性，通常设置bottom。

vh

对于整页布局，除了传统的对html,body,div设置100%高度，还有一种方法，就是为div设置100vh的高度，该应用中我为导航栏与底部标签各设置了5vh的高度，内容区域高度90vh，刚好占满了浏览器可视区域。这么做存在的问题是对移动设备兼容性不佳，如果要适配移动设备，可以借助媒体查询断点使用其他方式布局移动端。

自动聚焦与$refs与Vue的生命周期

其实$refs我一直没怎么使用过，最大的问题是我不能从$refs获取的节点中得到很多html结点信息，修改结点属性时，不如直接用querySelector。但这里实现自动聚焦却很实用，代码如下：

 <b-form-input ref="focusThis" @keyup.enter="$emit('match',keyword)" v-model="keyword" list="my-list-id"/>

mounted(){
     this.$refs.focusThis.focus()
  }

为什么说生命周期？我以前习惯在create钩子里进行初始化操作，但create时结点还未渲染，我不得不把聚焦操作放到mounted钩子。

DEMO

https://demo.guohere.com/term-search/

数据库暂时只有两条记录’html’与’css’，请用这两个条目试验。支持快捷键enter（匹配）与esc（返回）。

前言