在手机上的联系人就使用到了a-z 过滤来快速定位要查找的内容,在开发中我遇到的需求和这个差不多,实现城市的选择,但是我爬到的数据只有城市的名称,那我需要将其分成a-z部分返给前端。
通过各种尝试,最后选择了使用pinyin这个第三方库,将汉字转成拼音,pinyin这个库支持将汉字转成每个字拼音首字母,再对已获得的拼音进行筛选,思路大致就是这样,接下来,看一下实现的效果
接下来贴一下后端实现将城市名称转成相应拼音的代码:
写了一个工具类 filterLetter.js
/*第三方库*/
var pinyin = require('pinyin');
function pinyinClass() {
}
/*
汉字转拼音
*/
pinyinClass.prototype.transLetter =function(str) {
let arr =[];
pinyin(str,{
style:pinyin.STYLE_FIRST_LETTER
}).forEach(function (element) {
arr = arr.concat(element);
},this);
return arr.join('');
生成拼音接口:
router.get('/pinyin',function (req,res,next) {
Cities.find({},function (err,doc) {
if (err){
res.json({
status:"1",
msg:err.message,
result:[]
});
}
else {
doc.forEach(item =>{
0 /*
生成拼音
*/
var str = pinyinClass.prototype.transLetter(item.cityname);
item.initial = str;
});
res.json({
status:"",
msg:"",
result:doc
})
}
将获取到的新的json文件内容,存如mongodb 数据库中,这样就让数据库中的城市数据数据有拼音首字母:
json 数据如图所示:
接下来写查询数据的接口
实现筛选的方法:
/*
a-z 首字母筛选
*/
var LetterObj={
A:[], B:[], C:[], D:[], E:[], F:[], G:[], H:[], I:[],
J:[], K:[], L:[], M:[], N:[], O:[], P:[], Q:[], R:[],
S:[], T:[], U:[], V:[], W:[], X:[], Y:[], Z:[]
};
pinyinClass.prototype.matchLetter = function (item) {
//截取拼音首字母
let str = item.initial.substring(0,1).toUpperCase();
for (let key in LetterObj){
if (str ===key){
LetterObj[key].push(item);
}
}
return LetterObj;
}
实现筛选的接口
router.get('/all',function (req,res,next) {
Cities.find({},function (err,doc) {
if (err){
res.json({
status:"1",
msg:err.message,
result:[]
})
}else {
// a-z过滤后数据
let matchResult ={};
doc.forEach(item =>{
matchResult = pinyinClass.prototype.matchLetter(item);
});
res.json({
status:"0",
msg:"",
result:matchResult
})
}
})
数据格式如下:
实现按拼音分类的接口就大功告成了,小白一个,写的实现过程比较粗糙