How to Set Up the Watchdog Framework with Spring Boot and Vue

Aug 5, 2021 | Programming

The Watchdog Framework combines various technologies, including Spring Boot, Shiro, Mybatis, HikariCP, Redis, Vue, and iView, to build a comprehensive application. In this guide, we’ll walk through how to set it up efficiently. Let’s dive into the world of modern web development!

Prerequisites

  • Java Development Kit (JDK) 1.8+
  • MySQL 5.6+
  • Maven 3.6
  • Integrated Development Environment (IDE) like IntelliJ IDEA or Eclipse

Getting Started

Before we jump into the actual setup, ensure you have all the prerequisites installed. Once you have everything ready, follow these steps:

Clone the Repository

  • Open your terminal and run the following command:
  • git clone git@github.com:watchdog-framework/watchdog-framework.git

Database Setup

You need to create a MySQL database and import the provided SQL file. Here’s how:

  • Run MySQL and create a new database called `wdog`.
  • Import the `wdog.sql` file into the database.
  • Configure the `application.yml` file with your database credentials:
  • spring:
      datasource:
        url: jdbc:mysql://localhost:3306/wdog?useUnicode=yes&characterEncoding=UTF8
        password: root
        username: root
        driver-class-name: com.mysql.jdbc.Driver

Dependencies Setup

Ensure that your `pom.xml` includes the following dependencies:



    org.springframework.boot
    spring-boot-starter
    1.5.12.RELEASE


    com.baomidou
    mybatis-plus
    1.3.1


Frontend Setup

Now, let’s handle the Vue.js frontend part of the application:

Install Vue Dependencies

Navigate to your Vue project directory and install the required dependencies:

npm install axios vue-router vuex iview

Run the Application

Once both the backend and frontend are set up, you can start the application. From your project directory, execute:

mvn spring-boot:run

Troubleshooting

If you encounter issues, consider the following solutions:

  • Ensure your database is running and accessible.
  • Check for missing dependencies or build errors in your IDE.
  • Verify that the application properties (YAML file) have the correct settings.

For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

Understanding the Code Through an Analogy

Think of configuring the Watchdog Framework like preparing a restaurant before opening for business:

  • The **database** is like your pantry, stocked full of ingredients (data) that your chefs (app) will use to create dishes (features).
  • The **backend code** is the kitchen where chefs (Spring Boot and Mybatis) process those ingredients following recipes (APIs).
  • The **frontend code** is your dining room where customers (users) come to enjoy their meals (user interactions) served by waitstaff (Vue and iView).
  • Lastly, just like a busy restaurant needs good management (HikariCP, Redis, and Shiro for security), your application must handle customer flow and ensure a secure environment!

At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.

Stay Informed with the Newest F(x) Insights and Blogs

Tech News and Blog Highlights, Straight to Your Inbox