https://github.com/geekshi/webone

A web project demonstrating the frontend and backend technology stack
https://github.com/geekshi/webone

html-css-javascript mybatis mysql rabbitmq redis restful-api springboot vue2 websocket

Last synced: 5 months ago
JSON representation

A web project demonstrating the frontend and backend technology stack

• Host: GitHub
• URL: https://github.com/geekshi/webone
• Owner: geekshi
• Created: 2023-09-05T08:50:56.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2023-09-13T08:13:16.000Z (almost 3 years ago)
• Last Synced: 2025-02-13T15:27:28.263Z (over 1 year ago)
• Topics: html-css-javascript, mybatis, mysql, rabbitmq, redis, restful-api, springboot, vue2, websocket
• Language: Java
• Homepage:
• Size: 318 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# A web project demonstrating the frontend and backend technology stack

Frontend technology stack includes HTML, CSS, JavaScript, Vue.js. Backend technology stack includes SpringBoot, Mybatis, MySQL, RabbitMQ, Redis. The frontend and backend communication uses two modes: PULL and PUSH, the PULL mode is based on REST, and the PUSH mode is based on WebSocket.

## Overview

Vue.js calls the API and the API first checks the data from the cache. If the data is not in the cache, it then queries the database and updates the cache.

When the producer publishes the new data and sends to the MQ, the consumer receives the data from the MQ and pushes the data to Vue.js, and updates the data to the database simultaneously.

![Overview](/doc/overview.png)

## Vue page

![image](/doc/page.GIF)