结合LeanCloud做一个查询术语的单页应用
结合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（返回）。