使用Directus开发对比排行应用

使用Directus开发对比排行应用

2024年03月31日 阅读:15 字数:1081 阅读时长:3 分钟

使用Directus做数据管理,Nuxt.js做Web端,Uniapp做小程序,开发了一个万物对比排行项目。

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而不是原生的微信小程序来写。

2515e7ad99a34bc8.png

技术栈:

  • 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;
}

推荐阅读

恰饭区

评论区 (0)

0/500

还没有评论,快来抢第一吧