Cursor in Practice: Build a Vue3 + SpringBoot Full-Stack Blog Project in 20 Minutes

Introduction

With the rapid development of AI programming tools, the time developers need to build a complete front-end and back-end separated project is being dramatically reduced. This article provides a detailed walkthrough of how to use the Cursor AI programming assistant, combined with Google's design tools, to build a personal blog website from scratch in 20 minutes — featuring a Vue3 frontend, SpringBoot backend, and MySQL database.

Front-end and back-end separation is the mainstream architectural pattern in modern web development. Its core idea is to completely decouple the user interface (frontend) from business logic and data processing (backend). The frontend communicates with the backend via HTTP APIs, exchanging information through agreed-upon JSON data formats. The advantages of this architecture include: independent development, deployment, and scaling of frontend and backend; the ability to switch frontend tech stacks without affecting the backend; and backend APIs that can simultaneously serve multiple clients including web and mobile. The Vue3 + SpringBoot combination is one of the most popular front-end/back-end separation solutions in the Java ecosystem — Vue3 offers the Composition API and better TypeScript support, while SpringBoot simplifies Java backend configuration and deployment.

The entire workflow covers UI prototype design, Cursor code generation, database configuration, and troubleshooting — making it an excellent reference for developers who want to quickly validate ideas or learn full-stack development.

Generating UI Prototypes with Google Teach

Generating the Design

Before writing any code, we need a clear UI design as reference. Here we use Google's Teach tool (requires VPN access), which offers both App and Web modes.

Google Teach belongs to the emerging category of AI-assisted design tools. Similar tools include Figma's AI features, Galileo AI, Uizard, and others. The core capability of these tools is transforming natural language descriptions into visual UI mockups, dramatically shortening the time from requirements to prototypes. In the traditional workflow, product managers need to draw wireframes first, then UI designers create high-fidelity mockups — a process that can take days. AI design tools can generate complete design solutions with color schemes, layouts, and components in minutes. While the refinement may not match a professional designer's handcrafted work, it's more than sufficient for quick validation and personal projects.

After selecting Web mode and providing a prepared prompt, the tool automatically generates a complete UI design including:

• Color scheme: Black theme with glassmorphism effects
• Page structure: Homepage, profile, work list, tech stack showcase, etc.
• Interactive elements: Particle effect backgrounds, radar charts, dynamic interactive components

Glassmorphism is a popular UI design style in recent years, first adopted at scale by Apple in iOS 7, and later incorporated by Microsoft as a core visual element in their Fluent Design System. Its technical implementation primarily relies on CSS's backdrop-filter property, using the blur() function to apply Gaussian blur to content behind an element, combined with semi-transparent backgrounds and subtle borders to create a frosted glass texture. This design style maintains visual hierarchy while allowing background content to show through subtly, adding visual depth.

The generated prototype supports click interactions, allowing you to navigate between pages and preview effects. Once you're satisfied with the design, click the share button to copy the link — this link will serve as the reference for Cursor's code generation.

The Bridge from Design to Code

The core value of this step is: letting AI understand not just functional requirements, but visual requirements as well. Through the prototype link, Cursor can more accurately reproduce design intent, reducing subsequent style adjustment work.

Cursor Generates Complete Vue3 + SpringBoot Project Code

Configuring Tech Stack Requirements

Cursor is an AI programming IDE deeply customized from VS Code, with core capabilities derived from deep integration with large language models (such as GPT-4, Claude, etc.). Unlike simple code completion tools, Cursor can understand the entire project context — including file structure, dependencies, code style — to generate code consistent with the project. Its Agent mode can autonomously execute multi-step tasks: analyzing requirements, making plans, creating files, writing code, and running tests, similar to a junior developer executing tasks. Cursor also supports referencing files, documentation, or URLs via the @ symbol, giving AI more context — which is why pasting a prototype link can guide code generation.

After pasting the prototype link into Cursor, you also need to attach detailed tech stack requirements in the prompt, mainly including:

• Backend: SpringBoot + MyBatis + MySQL + Redis caching
• Frontend: Vue3
• Development standards: Unified response format (Result), permission management, login authentication
• Feature modules: Blog management, tag management, project management, personal info, etc.

Regarding backend technology choices, MyBatis is one of the most popular persistence layer frameworks in the Java ecosystem. It and Hibernate (JPA) represent two different ORM philosophies. Hibernate pursues complete object-relational mapping where developers barely need to write SQL; MyBatis retains full control over SQL, binding SQL statements to Java methods through XML or annotations. In Chinese enterprise development, MyBatis usage far exceeds Hibernate, mainly because SQL controllability is stronger in complex query scenarios, performance tuning is more intuitive, and the learning curve is relatively gentle. Combined with enhancement tools like MyBatis-Plus, simple CRUD operations can achieve zero-SQL development, balancing development efficiency and flexibility.

Redis is typically used in blog systems for the following scenarios: caching popular article content to reduce database query pressure; storing user session information to support login state persistence in distributed deployments; implementing atomic view counting for articles to avoid data inconsistency under high concurrency; and caching tag lists, category information, and other data that changes infrequently but is accessed frequently. Redis can achieve hundreds of thousands of read/write operations per second, far exceeding relational databases like MySQL. In read-heavy, write-light blog scenarios, proper use of Redis caching can reduce page response times from hundreds of milliseconds to single-digit milliseconds.

Cursor's Code Generation Process

After receiving instructions, Cursor first creates a development plan, then sequentially generates:

1. SQL files: Database table structures and relationships
2. Backend project: Complete SpringBoot project structure including Controller, Service, Mapper layers
3. Frontend project: Vue3 project with routing, components, API calls, etc.
4. Configuration files: Database connections, port configurations, etc.
5. API design documentation: Frontend-backend interface documentation

Interestingly, the project structure Cursor generates is quite standardized, adopting enterprise-level development practices such as unified Result response format, BCrypt password encryption, and permission management.

BCrypt is an adaptive hash function based on the Blowfish cipher algorithm, specifically designed for password storage. Unlike general-purpose hash algorithms like MD5 and SHA, BCrypt has several key security features: it has a built-in salt mechanism that produces different hash values each time the same password is encrypted, effectively preventing rainbow table attacks; it supports work factor adjustment, allowing computational complexity to increase as hardware performance improves; and its computation speed is intentionally designed to be slow (thousands of times slower than MD5), making brute-force attacks extremely costly. In SpringBoot, Spring Security provides the BCryptPasswordEncoder class to implement BCrypt encryption.

Database Configuration and Project Startup

MySQL Database Initialization

1. Open Navicat and connect to local MySQL
2. Check the database name in the project configuration file
3. Create the database with UTF-8 MB4 character set
4. Right-click to run the Cursor-generated SQL file and import the table structure

Choosing the UTF-8 MB4 character set is crucial. MySQL's early utf8 character set was actually a "truncated version" that only supports up to 3-byte characters and cannot store 4-byte Unicode characters — the most typical being Emoji symbols (like 😀, 🎉, etc.). If the database uses utf8 instead of utf8mb4, when users include Emoji in blog comments or articles, it will trigger insertion errors or data truncation. Starting from MySQL 8.0, utf8mb4 has become the default character set. Selecting utf8mb4 when creating the blog database ensures the system can correctly store and display any Unicode character, including Chinese, Japanese, Korean, Emoji, and various special symbols.

After import, you can see that AI has generated complete database tables and relationships, including user, blog, tag, and project tables.

Starting the SpringBoot Backend Service

Open the backend project in your IDE, wait for Maven dependencies to download, then find and run the BlogApplication startup class.

Common issues: Port 8080 being occupied (e.g., by VMware's network services). The solution is to stop VMNet-related services or modify the project's port configuration. Also confirm that the database username and password in application.yml match your local settings.

Starting the Vue3 Frontend Service

Open the frontend project in your IDE, wait for index scanning to complete, then start the development server via npm run dev or the IDE's run button. It runs on port 5173 by default.

Using Cursor to Troubleshoot and Fix Code Issues

AI-Assisted Login Issue Fix

After starting the project, attempting to log in with the default admin account encountered an authentication failure. This is a typical development scenario — AI-generated code isn't 100% perfect, but the key is how to fix issues efficiently.

The approach is straightforward: simply describe the problem in Cursor — "admin account password cannot log in, business exception" — and let AI investigate on its own. Cursor's troubleshooting process includes:

1. Identifying that passwords use BCrypt encryption
2. Discovering that the password hash stored in the database doesn't match the initialization password
3. Automatically fixing the password initialization logic

After the fix, restart the backend service and you can successfully log into the admin system using admin/admin.

Conversational Debugging: The Core Advantage of AI Programming

Developers don't need to trace through code line by line — they just describe the symptom, and Cursor can locate and fix the problem. This "conversational debugging" significantly lowers the development barrier and is the key differentiator between AI programming and traditional development.

Conversational debugging represents a major paradigm shift in software development debugging. The traditional debugging workflow is typically: set breakpoints → step through execution → observe variables → analyze causes → modify code, which requires developers to have deep understanding of code logic. Conversational debugging abstracts this process to "describe the problem → get a solution," with AI handling code reading, logic analysis, and root cause identification behind the scenes. This approach is particularly suitable for handling "known pattern" issues like configuration errors, type mismatches, and dependency conflicts, because large language models have seen massive amounts of similar error cases and solutions during training. However, for bugs involving complex business logic or concurrency issues, AI's troubleshooting capability remains limited, and developer experience and judgment remain irreplaceable.

Final Blog Project Showcase

Admin Management System

After successful login, the admin management system is fully functional:

• Blog management: Add, edit, and delete articles
• Tag management: CRUD operations for category tags
• Project management: Showcase personal project works
• Site settings: Configure contact information, social links, etc.

Frontend Display Pages

Visiting the frontend page on port 5173, you can see:

• High design fidelity — glassmorphism effects and particle backgrounds are rendered
• Blog list properly displays published articles
• Comment functionality, social links, and other interactions work normally

Summary and Reflections

Through this Cursor hands-on experience, we can see that AI programming tools are already capable of handling the complete development workflow from design to code. Throughout the process, the developer's role shifts from "code writer" to "requirements describer" and "quality gatekeeper."

Key takeaways:

1. Prototype first: Giving AI a visual reference significantly improves code fidelity
2. Prompt quality determines output quality: The clearer the tech stack, standards, and feature module descriptions, the more standardized the generated code
3. AI isn't omnipotent: Generated code still requires manual verification and debugging, but debugging itself can also be assisted by Cursor
4. Ideal for rapid prototype validation: For MVP validation or personal projects, this approach is extremely efficient

Of course, for production-grade projects, the generated code still needs hardening in areas like security, performance optimization, and exception handling. But as a starting point, completing a runnable Vue3 + SpringBoot full-stack blog project in 20 minutes is hard to imagine under traditional development approaches.

Key Takeaways