Skip to content

Latest commit

 

History

History
111 lines (81 loc) · 2.14 KB

File metadata and controls

111 lines (81 loc) · 2.14 KB

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

alt text alt text alt text

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!