Vue.js , Jakarta Servlets , JDBC , MySQL Starter Pack

A starter template for building full-stack applications with a Java JDBC backend (MySQL) on a Apache Tomcat server and a Vue.js frontend

Project Structure

• backend/ — Java backend using JDBC to connect to MySQL
• frontend/ — Vue.js frontend

Prerequisites

• Java JDK 17 or higher
• Apache Tomcat 10 or higher
• MySQL Server
• Node.js and npm

Database Setup

Create a MySQL database and a users table:

CREATE TABLE users (
  id INT PRIMARY KEY AUTO_INCREMENT,
  name VARCHAR(100),
  email VARCHAR(100)
);

Sample connection details (update as needed):

• URL: jdbc:mysql://localhost:3306/crud
• User: root
• Password: your_password

Getting Started

Backend (Java JDBC)

1. Created Using

      mvn archetype:generate -DgroupId=com.example -DartifactId=backend -DarchetypeArtifactId=maven-archetype-webapp -DinteractiveMode=false

2. Go to the backend directory:

   cd backend

3. Build with Maven:

   mvn clean package

4. Deploy the generated WAR file to your Tomcat webapps directory and start Tomcat.

The backend API will be available at:

http://localhost:8080/crud-app/api/users

Frontend (Vue.js)

1. Go to the frontend directory:

   cd frontend

2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev

The frontend will be available at the URL shown in the terminal, typically:

http://localhost:5000

API Endpoints

• GET /api/users — Get all users
• GET /api/users/{id} — Get user by ID
• POST /api/users — Create a new user
• PUT /api/users/{id} — Update an existing user
• DELETE /api/users/{id} — Delete a user

Technologies Used

Backend:

• Java
• JDBC (MySQL)
• Jakarta Servlets
• Apache Tomcat
• JSON

Frontend:

• Vue.js
• Axios
• Bootstrap (optional)

---

This starter pack is designed for easy customization and extension. Build your own features on top of this template!