使用Directus开发对比排行应用

1. 前言

最近在看了“手机性能排行”、“Versus万物皆可比”等应用后，萌生了开发一个自己感兴趣事物的属性展示、对比、排行项目，包括web端和小程序。

有想法简单设计验证下就开干，赶巧前段时间体验了Headless CMS，就很合适做数据管理。不用写后台，只要开发Web端和小程序就行，极大减少了开发周期，而且主要难题在小程序开发，因为一直没有过个人的小程序。

不过自己开发这些，像之前的工具箱更多还是给自己练手、使用，主要满足自己的成就感吧，没有太考虑商业化的东西。就用自己擅长的东西，做自己喜欢的事情吧。

功能特性：

• 列表筛选、排序、数据展示
• 事物对比
• 排行榜
• 评论、下载数据、分享图片

耗时一个多月，基本是周末或工作日晚上，有点累了，博客、工具箱也没时间更新，以后除非有很好的点子否则应该不开发新的了吧，运营好目前的几个应用先。

2. Web

网站：https://vs.timelessq.com

这是自己开发的第四个网站了，Nuxt.js是常客了，一个优秀的Vue框架，它支持SSR，各种功能特性带来了很多便捷。

技术栈：

• Nuxt.js
• Nuxt-directus
• Vue3
• Vite
• Typescript
• Element-plus

 

首页实在没想到放啥，就搞了个粒子动画和一些简介。

类别

列表：

这个是主要的页面，很多子页都从这里进入，比如“排行榜”、“详情”、“对比”、“公开数据”。

支持筛选和排序数据。

详情页

可公开的数据，可以查看数据模型和下载数据。

对比页，支持导出图片，目前不能判断哪一项更好

排行榜

3. 小程序

这应该算我第一个独立开发完成的小程序了，为了开发更快速，选择使用uniapp而不是原生的微信小程序来写。

技术栈：

• Uniapp
• Vue3
• Typescript
• @directus/sdk
• uv-ui

 

只有5个页面列表、详情、对比、对比详情、排行

3.1. 问题及解决方案

小程序开发遇到了几个问题：

1、@directus/sdk的client.request方法不会返回getItems的meta数据，也就是不能在查询list接口中获取数据和count总数，需要另外调用一个aggregate的接口。当然解决了第2个问题，这个就不存在了。

2、@directus/sdk 不支持小程序端（可以使用Global APIs替换fetch，但是URL对象在小程序不存在，找不到解决方案），所以Api接口请求需要更换成uni.request

但是可以用@directus/sdk的方法生成查询参数

import { readItems } from '@directus/sdk'

// 这样可以获取url和请求数据
const options = readItems(collection, query)()

uni.request({
  url: `${BASE_URL}${options.path}`,
  method: options.method,
  data: options.params
})

3、getSystemInfo方法获取的状态栏高度不正确

onLoad(() => {
	uni.getSystemInfo({
		success: function (res) {
			offsetTop.value = res.safeAreaInsets?.top || 25
		}
	})
})

启动微信首次进入小程序时，safeAreaInsets为空或者top的值在部分手机上不正确，导致Sticky吸顶高度不对出现遮挡导航栏。

改用statusBarHeight获取手机状态栏高度后正常

onLoad(() => {
	uni.getSystemInfo({
		success: function (res) {
			offsetTop.value = res.statusBarHeight || 25
		}
	})
})

4. 后台管理

Directus Headless CMS，不用开发代码就可以搭建后台管理系统，简单部署后就可以通过REST Api调用数据；而且数据扩展很容易，不同的事物只要添加数据模型就可以了。

感觉就是为了这碟醋，包了上面两盘饺子。😂

技术栈：

• Directus headless cms
• Mysql

4.1. 问题及解决方案

1、Nginx反代后静态资源报404

因为有静态资源、也要走https所以用nginx套一层，但是用宝塔创建一个项目后访问后台，html、Api接口可以访问，其他静态资源都报404。

检查发现是下面宝塔给nginx默认的配置引起的，注释掉就正常了，估计是directus服务转发的问题吧，有懂的大佬可以发评论区~

location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
{
    expires      30d;
    error_log /dev/null;
    access_log /dev/null;
}

location ~ .*\.(js|css)?$
{
    expires      12h;
    error_log /dev/null;
    access_log /dev/null;
}