First of all, I wish you all a happy New Year and your programming skills are rising
I’m in the habit of making my own annual plan and have been doing it with OneNote before. While OneNote is useful, it doesn’t have statistics. It is not easy to know if the plan is sound. So take advantage of the holiday, do a simple ToDoList small program.
Demand analysis
Let’s call him EasyTodoList for the project. But before you do anything, use a brain map to sort out your needs. It is ok to know clearly what things need and from which to start already so, also can prevent slanting building in doing process.
Technology selection
Technical Vue and VUE-Router will not have any problems, after all, it is one of the mainstream. So the main problem this time is the choice of storage.
First of all, let’s get rid of MySQL and MongoDB, because this is only a small project with a small amount of data. So there’s no need to go to the back end. That leaves client-side storage. In client storage, a storage can only provide simple key-value storage and does not provide query or statistics. While WebSQL is great to use, it is no longer a maintenance project, so it is not recommended. Finally, IndexedDB, which is currently the preferred client storage technology. NoSQL database similar to MondgoDB. Because the native API is relatively cumbersome, in order to simplify the development, we use the secondary development of PocuhDB as the client storage (API call is very simple, refer to the official website can be done). (For more on client storage, see my previous article on client storage technology.)
It is important to note that IndexedDB is also a type of client storage and naturally has client-side storage features. So when you change the browser or change the listening port, the data that you stored before will naturally disappear (equivalent to a new database), which is more or less inconvenient to use.
Results show
Let’s take a look at the final result.
The whole project is relatively simple, only the overview and task list two pages. After adding a task category and tasks under the category, statistics are displayed on the overview page. After setting tasks, the ratio of completed to unfinished tasks and charts are also counted. The chart part is drawn with Echarts, and the drawing method can also refer to the official documentation.
Because the code is not a lot of verbose here. The detailed code can be seen on my GitHub website for guidance. Project address: EasyTodoList
conclusion
The whole project has no difficulty in technology and is easy to pull off. The combination of front-end storage (IndexedDB) simplifies development but also brings inconvenience in use. However as a practice of the project should be quite good. Since the storage problem is very embarrassing, we will consider porting to Electron and directly make an App to avoid this problem.