结合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(返回)。

发表评论

电子邮件地址不会被公开。