Add SQLite database to backend, interacting with the frontend

software/backend/database.ts

@@ -0,0 +1,26 @@
+import { Sequelize } from "sequelize-typescript"
+
+// Models
+import { Categories } from "./models/categories.model"
+
+const dbName = "database"
+const dbUser = "root"
+const dbPassword = "123456"
+
+// Definition of the database
+export const sequelize = new Sequelize({
+  database: dbName,
+  dialect: "sqlite",
+  username: dbUser,
+  password: dbPassword,
+  storage: "database.sqlite",
+  models: [ Categories ]
+})
+
+export function startDatabase() {
+  // Create database and tables
+  sequelize.sync({ force: false })
+    .then(() => {
+      console.log(`Database & tables created!`)
+    })
+}

software/backend/models/categories.model.ts

@@ -0,0 +1,7 @@
+import { Table, Column, Model, PrimaryKey, AutoIncrement } from 'sequelize-typescript';
+
+@Table
+export class Categories extends Model {
+  @Column
+  name: string
+}

software/backend/routes/api.routes.ts

@@ -0,0 +1,7 @@
+import { Request, Response, NextFunction, Router } from 'express'
+
+export const api = Router()
+
+api.get("/", (req: Request, res: Response, next: NextFunction) => {
+  res.send("Hello World!")
+})

software/backend/routes/categories.routes.ts

@@ -0,0 +1,20 @@
+import { Router, Request, Response, NextFunction } from "express";
+import { Categories } from "../models/categories.model";
+
+export const categories = Router()
+
+categories.get("/", (req: Request, res: Response, next: NextFunction) => {
+  Categories.findAll()
+    .then(categories => res.json(categories))
+    .catch(next)
+})
+
+categories.post("/", (req: Request, res: Response, next: NextFunction) => {
+  try {
+    console.log(req.body)
+    const category = Categories.create(req.body)
+    res.status(201).json(category)
+  } catch (e) {
+    next(e)
+  }
+})

software/backend/routes/routes.ts

@@ -1,11 +0,0 @@
-import express, { Request, Response, NextFunction } from 'express'
-
-export const routes = app => {
-  var router = express.Router()
-
-  router.get("/", (req: Request, res: Response, next: NextFunction) => {
-    res.send("Hello World from the backend!")
-  })
-
-  app.use("/api/", router)
-}

software/backend/server.ts

@@ -1,7 +1,9 @@
 import express from 'express'
 import cors from 'cors'
 import bodyParser from 'body-parser'
-import { routes } from './routes/routes'
+import { api } from './routes/api.routes'
+import { categories } from './routes/categories.routes'
+import { startDatabase } from './database'
 
 const app = express()
 const port = 3000
@@ -12,8 +14,12 @@ app.use(cors())
 // Process JSON parameter
 app.use(bodyParser.json())
 
-// Use the app routes
-routes(app)
+// Create database and tables
+startDatabase()
+
+// Routes
+app.use("/api", api)
+app.use("/categories", categories)
 
 // Start server
 app.listen(port, () => {

software/package.json

@@ -22,6 +22,10 @@
     "concurrently": "^8.2.2",
     "cors": "^2.8.5",
     "express": "^4.19.2",
+    "reflect-metadata": "^0.2.2",
+    "sequelize": "^6.37.3",
+    "sequelize-typescript": "^2.1.6",
+    "sqlite3": "^5.1.7",
     "vue": "^3.4.29",
     "vuetify": "^3.7.1",
     "wait-on": "^8.0.0"

software/src/App.vue

@@ -3,14 +3,25 @@ import { ref } from 'vue';
 import axios from 'axios';
 
 const showDrawer = ref(true)
-const testResponse = ref("")
+const apiCategories = ref([])
+const newCategory = ref("")
 
+function requestAllCategories() {
+  axios.get('http://127.0.0.1:3000/categories')
+    .then(function (response) {
+      console.log(response)
+      apiCategories.value = response.data
+    })
+}
 
-axios.get('http://127.0.0.1:3000/api')
-  .then(function (response) {
-    console.log(response)
-    testResponse.value = response.data
+function addCategory() {
+  axios.post("http://127.0.0.1:3000/categories", {
+    name: newCategory.value
   })
+  .then(requestAllCategories)
+}
+
+requestAllCategories()
 </script>
 
 <template>
@@ -26,7 +37,24 @@ axios.get('http://127.0.0.1:3000/api')
     </v-navigation-drawer>
 
     <v-main>
-      {{ testResponse }}
+      <v-container>
+        <v-row>
+          <v-col>
+            <v-text-field label="Category name" v-model="newCategory" />
+          </v-col>
+          <v-col>
+            <v-btn @click="addCategory" >Hinzufügen</v-btn>
+          </v-col>
+        </v-row>
+
+        <v-row>
+          <v-list>
+            <v-list-item v-for="category in apiCategories">
+              {{ category.name }}
+            </v-list-item>
+          </v-list>
+        </v-row>
+      </v-container>
       <!-- todo -->
     </v-main>
   </v-app>

software/tsconfig.json

@@ -6,6 +6,8 @@
     "isolatedModules": false,
     "outDir": "build/dist",
     "esModuleInterop": true,
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true,
     "paths": {
       "@/*": ["./src/*"]
     }