[SpringBoot/Vue.js Project] Blog

Develop an Web Application from start to finish! (with Oracle Cloud, Spring Boot, Vue.js)

1. Requirements

Project Objectives

• Develop an Web Application that works as a personal Blog.

Specification

• Article, Category CRUD.
• Parent/Child relationships in categories.
• Show projects by year.
• Backend API -> Frontend.
• Docker.

2. Structure

Web Application Project stucture.

• Database: Oracle ATP Database, (Partial) Mongo DB
• Backend: SpringBoot
• Frontend: Node.js, Vue.js

3. Function

Backend

: There are three APIs that hand over data from ATP Database to frontend.

• Menu
  • One Menu is consisted of several(or one) Article.
  • Menu has Parent/Child relationship. (ex. Computer Science Menu - iOS/Android Menu)
• Article
  • One Article is a page of writing.
• Project
  • Project is the has information(ex. started date, ended date, project title…) about previously conducted projects.
  • Project API is mainly used on the homepage.

Frontend

: There are five main pages. (+ one sidebar)

• Main features and design were implemented using Bootstrap-vue.
• Axios used to call Springboot APIs.

Frontend Vue.js plan draft.

4. Implementation

Backend

Implemented

• Basic Settings
  • application.properties file: See Code…
• Packages
  • 5 packages for basic functions have been developed.
    • Two packages are for setting: ApiResponse and Config.
    • The other packages are for API: ArticleItem, MenuItem and ProjectItem.

  • Except Config and ApiResponse package, one package consists of Item, Adapter, Controller, Repository, Request, Response and Service.

    

• Config package

  This package is for the Database, Frontend and (+Security) connection settings.

  • Class: MongoConfig, OracleConfig, WebConfig
  • Detailed implementation of the Config package: See Code…
• ApiReseponse package
  • This class is for the abstract ApiResponse.
  • API Response classes in other main three packages’ API Response classes are inherited from this Abstract.
  • ApiReseponse Abstart: See Code..
• ArticleItem, MenuItem, ProjectItem packages
  • One package consists of 6 classes and 1 interface: Item, Repository, Service, Adapter, Controller, Request, Response.
  • Item Class: Model class.
  • Adapter Class: ItemRespoense and Item methods exist to build object.
  • Repository Interface: Send queries to Database.
  • Service Class: Send Item to browser. (get, getAll, create, update, delete methods)
  • Controller Class: URL resolution.
  • Response and Request Class
  • See Code…

To Do / Ongoing

• Membership related parts: Security package, SecurityConfig Class.
• CI/CD with Docker!

Frontend

Implemented

• Main three Pages implemented. Screenshots of the pages are at the below.
  • Home.vue: Projects and Articles.
  • Posts.vue: Entire articles with Menu(ex. Physics, Computer Science).
  • Aricle.vue: Descriptions.

To Do / Ongoing

• Admin page for the Blog. (This shoud be linked with the articleEdit, menuEdit pages.)

5. Result

v1.0.0

• Backend: Finish CRUD APIs for the Blog’s Article, Menu and Project.
• Frontend: Development of pages for visitor completed.(include edit article/menu which is not below screenshots.)

Blog v1.0.0 Homepage, Homepage with sidebar, Post page, Article page

The above page is the acutually working, but Oracle Cloud does not support free domain services in my region, I can’t attach Blog URL.