A small toy that shows records in the form of a heat map for bookkeeping based on Vue3, Vite2, Vuetify3-Beta and Lean Cloud

Overview

Boring Days

今天(2022-05-03)也是等待 Vuetify 3 和 上海 Release 的一天。

Preface

这是一个以热力图形式展示记录的记账类小玩具。它基于 Vue3Vite2Vuetify3-Beta 以及 Lean Cloud,基本效果是这样的:

Getting Started

APP 托管在这里

比如说,你想记录每日喝水情况。

注册

首先,需要去 Lean Cloud 注册一个账号,并创建一个国际版应用(不需要绑定已备案的域名.. 😼

然后在应用控制台中 设置-应用凭证 中获取到 AppIDAppKey,我们将以此登陆应用。

应用安全方面,Lean Cloud 采用白名单机制。默认情况下,Lean Cloud 不限制任何域名,这显然是不安全的,所以还需要在应用控制台 设置-安全中心-Web 安全域名 中添加 https://boring-plans.github.io(如果设置了,则仅允许指定的域名)。

新建主题

而后,App 中,点击右下角新建按钮 -> 点击新主题 -> 填写名称、选择主题色、设置高低值 -> 提交。

记录本日

而后,便可以在 记录本日 时,选择此主题、提交记录。

Note That

  • Boring Days 的数据存储全权交给 Lean Cloud
  • 显然,App ID 和 App Key 并非友好可读,所以建议勾选记住我
  • 由于时间与地域的关系,如需补充本日以前的数据,只能通过 Lean Cloud 应用控制台操作
  • 实践表明,Vuetify 3-Beta 在 Chromium 内核下表现良好,其余恐鸡飞狗跳
You might also like...
A web application that shows a total and a detailed score when playing a DLDU run on stream
A web application that shows a total and a detailed score when playing a DLDU run on stream

A web application that shows a total and a detailed score when playing a DLDU run on stream. It's made for being integrated into OBS as a browser source. A Google Docs sheet is used the data source and changing it automatically update the current score.

vue-todo-app ❤ A small and beautiful Vue todo app ⚡ Built with Vue3, Vite, Tailwind

vue-todo-app ❤ A small and beautiful Vue todo app ⚡ Built with Vue3, Vite, Tailwind

Small store project being built using Vue3, Supabase and Quasar framework

Small store project being built using Vue3, Supabase and Quasar framework, based on the application developed in the tutorial available on the Patrick Monteiro's channel.

This project shows how to dockerize web application build using Vue JS web development framework for Java Script programming language.
This project shows how to dockerize web application build using Vue JS web development framework for Java Script programming language.

vue-docker This project shows how to dockerize web application build using Vue JS web development framework for Java Script programming language. Requ

Directus-sql-panel - Directus panel component which shows result of stored SQL query as a table

directus-sql-panel Directus panel component which shows result of stored SQL que

MEVN Full Stack E-Commerce Solution. Built using MEVN Stack (Node.js, Express.js, Vue.js, MongoDB) with Developer Friendliness and Cloud Integrations in mind. Previously Powered the Veniqa New York Startup. 100% Customizable. For Demos and Documentation, Visit Official Website OSL is a simple shared list web-application based on Node. Typical uses include shopping lists of course, and any other small todo-list that needs to be used collaboratively.
OSL is a simple shared list web-application based on Node. Typical uses include shopping lists of course, and any other small todo-list that needs to be used collaboratively.

Our Shopping List OSL is a simple shared list application. Typical uses include shopping lists of course, and any other small todo-list that needs to

Small E-commerce based on Vue and Spring-boot.

Online Shopping Website SoftWare EngineeringWork. Front end and back end separated. Introduction Just a simple e-commerce project for practice. Develo

🍯 Measure cloud providers and check which fits better for your Jamstack App.
🍯 Measure cloud providers and check which fits better for your Jamstack App.

🍯 Measure cloud providers and check which fits better for your Jamstack App. Overview The process is quite simple. It starts creating a basic Nuxt.js

Comments
  • Why class not found?

    Why class not found?

    Thanks for your great repository. When I deploy the project with LC, requesting the add-new-topic button returns "error-class-or-object-doesnt-exists" error, how do fix this issue?

    bug 
    opened by chenxofhit 0
Owner
Allen Tao
👨‍💻 A web developer.
Allen Tao
Front-end app that emulates the classic simon toy

Front-end app that emulates the classic simon toy. By choosing a level and clicking start, you should press the buttons in the correct order. You'll be able to save your score.

Juan Raudales 5 Oct 18, 2021
A Fullstack Vue.js and NodeJs Application that records the meeting dates and times

Meeting Organizer (VueJs & NodeJS) Live Demo Content of Project It is a Fullstac

Gökberk Otlu 2 Jan 7, 2022
A magical vue3 mobile using vue3(script-setup) + vite2 + uniapp

A magical vue3 mobile using vue3(script-setup) + vite2 + uniapp

kuanghua 22 Dec 26, 2022
All your medical records in one place using the DeSo network. PHS Hacks 2022

Immunize All your medical records in one place using the DeSo network. How To Run Locally Install dependencies (run yarn in the frontend and backend f

Sreyas Voruganti 2 Nov 7, 2022
Shows or hides content based on a given time range

vue-timed-content Shows or hides a content based on a given time range Demo Props Prop Description Type Required Default from Initial date Date true t

Danny Feliz 7 Feb 5, 2021
一款基于electron+vue3+vite2.0的TDengine时序库可视化管理工具

balloonfish(河豚) ?? 一款基于electron+vue3+vite2.0的TDengine时序库可视化管理工具 ?? 从2019年年底接触TDengine,就产生了为其开发一款可视化管理工具的想法,可惜要么工作忙要么发懒,一直没有着手去做,直到今年3月份看到了一个名为TDengine

解老师 8 Sep 18, 2022
MongoTech - a cloud-based SaaS-service designed to manage your MongoDB in such clouds as AWS, Google and Azure

MongoTech - a cloud-based SaaS-service designed to manage your MongoDB in such clouds as AWS, Google and Azure

MongoTech 7 Dec 20, 2022
Modern Vue.js based speedcubing timer with integrated cloud storage

qube A simplistic Vue.js based speedcubing timer. Roadmap The following features are currently planned for implementation. Support for different puzzl

Christopher 13 Nov 9, 2022
News for Web Designers and Developers - Shows aggregated news from multiple sources

Update - This has now moved to a standalone site https://dailydevbytes.com/ with bit more features. You can still find the core logic in this code whi

Super Dev Resources 60 Nov 30, 2022
Bay Clock is a website that shows the current schedule and block for the Bay School of San Francisco.

Bay Clock is a website that shows the current schedule and block for the Bay School of San Francisco.

Lucas Chang 3 Nov 3, 2022