StarBlog minor update, significant improvement in article management experience, rewrote several admin dashboard pages.

Foreword

Recently, I've been wanting to organize the articles in my blog.

It turns out that the backend of this blog is really rudimentary, making organization quite a hassle.

Even though I've already decided to refactor starblog,

that's a long-term solution that won't help with the immediate problem.

I still have to use the current shoddy admin backend to address the needs at hand.

So, I've decided to patch up the admin backend and keep using it 😂

Admin Dashboard

The admin dashboard for starblog is currently built with Vue.

Originally, the entire framework was extracted from a Spring Cloud project I worked on earlier.

You could say it's old code from back in the day.

When I first built this dashboard, I hadn't even touched the threshold of frontend development; I only knew how to write CRUD operations using templates with Vue like this.

That's why the result was quite rough—let alone aesthetics, many of the interaction designs were also unreasonable.

This time, I'm just making do with some patches and fixes, but a full redesign will be needed in the future.

Let me share what work was done in this round~

Login Page

The original login page was unacceptably ugly.

The most intolerable part was this login page. After the rewrite, it looks like this.

Let's take a look at the original login interface 😂

New Category Pages

Made two

Card-style Category List

This approach is actually not ideal because blog categories have a hierarchical structure.
A card-style layout flattens all categories side by side,
which results in too many items and makes it difficult to find the right one.

Category Tree

This is the truly user-friendly one.

On the left is the category tree. Clicking a category node on the left allows you to view category details, and the right side will load and display the article list.

The article list can be displayed in two different styles. The current style is the icon style, similar to a file manager's layout.

There is also a card-style layout.

It's also worth mentioning the operations available for category nodes.

Hovering the mouse over each node reveals a menu.

The options are: Add Subcategory, Article List, Edit Category, and Delete.

By the way, the divider in the middle of this page is adjustable, allowing you to change the width of the left and right columns.

Adding Subcategories

When adding, the parent category is automatically filled in, greatly enhancing the convenience of category management.

Category Article List

This new interface makes it very convenient to manage articles within a specific category.

Due to backend design requirements, articles cannot exist without a category.

Therefore, this feature primarily facilitates adding articles to a specific category.

It still uses a two-column layout.

The left column displays all articles and supports searching and filtering by category tree.

The right column shows articles in this category. Existing articles cannot be removed because articles must always have a category assigned.

However, newly added articles in the current editing session that have not yet saved can be removed.

I used this feature to organize the articles under the "Linux" and "Unboxing Reviews" categories.

By the way, this interface also supports pagination loading. The interaction is a type of pull-up loading, where you can load the next page by scrolling to the bottom and clicking the "Load More" button.

Old Classification Page

Looking at the new features

Let's take a look at how poorly the old one was done

To call it rubbish might be an overstatement—after all, it does have basic CRUD operations for categories.

But it’s definitely not user-friendly.

It’s really just stuck at the database CRUD level.

In terms of functionality, it can be described as quite rudimentary.

New Photo Wall Page

This is truly a major upgrade.

It now supports searching, filtering, and batch operations (like setting as recommended or deleting). You can also edit image information. Basically, all the essential features are included.

Previously, I used the vue-waterfall component, but it seems like it's either no longer maintained or incompatible with the Vue version used in this project, and modifying it led to quite a few bugs.

So, this time I hand-wrote a waterfall flow component based on Vue.

It's much better to use than vue-waterfall.

Old Version

The old version looks like this - what the heck, this is the admin panel (管理后台), not the frontend display interface. How is it possible that only the display is shown while other features are all incomplete?

Summary

Honestly, the recent modifications to the backend don't quite qualify as a "major version update"; they're more like a "good enough" set of patches and fixes.

However, going through the process did give me a chance to re-examine the old code written years ago—there was definitely some cringe at my past self's work.

Although these temporary fixes will eventually need to be refactored, at least the backend is now usable for the time being.

When it comes to refactoring StarBlog in the future, the experience gained from this round will serve as lessons learned from pitfalls encountered along the way.

Sometimes, an imperfect solution is still a step on the path to perfection.

—— Xi Yuan · October 2025