Web_Engineering_SoSe23

PASSED with 85%, thus stored as archive

1. HTML basics

2. CSS
   2.1 Selektoren: Universal*, Kind(>), Nachfahren( ), Nachbar(+), Geschwister(~)
   2.2 display (flexbox, grid)
   

3. Javascript bascis

4. Javascript

5. EventListener & ES6 & Typescript（+ interface, different class creation）

6. Vue.js basics:
   

   • v-if, v-if-else, v-else
     
   • v-for="item in List"
     
   • v-on:event="handleFunc" / @event=""
     
   • v-bind:character="sth" / :character=""
     

7. Vue.js Component:
   

   • Global & static component:
     Global: (Vue.component)
     Static: (var xxx = {}; <root instance/parent comp.>.component{"comp-name":xxx})
     
   • props + v-bind: data transfer Parent->Child
     
   • child component event handling
     in child component/DOM(create user-def-event): v-on:="$emit("user-def-event", argu.)"
     argument: <child component .data>: func(){return {object{}}}, the object is the argument
     in parent ~ (handle the u-d-event): v-on:="call func."

8. REST / fetchAPI (client side) / express.js (server side)
   

   • cors.js: for resource safety
   • express.js: simplified server creation and deklaritive routing(GET, PUT, POST, DELETE)
     
   • client side: example: in HTML file, create request by fetch()
     
   • server side: in .js file, create reply functions
     

9. Koa.js / Pug.js

   • koa: promised based controll flow
     • modules: koa, koa-router, koa-bodyparser, (possible) fs
     • install koa: const Koa = require('koa');
     • create koa object: const app = new Koa();
     • ctx instead of req and res
     • error handling:
       • (in router.method) ctx.throw(status-code, "msg.")
       • app.on('error', err=>{...});
     • mixin: reusable blocks
       • create mixin block:
         mixin (args.)
         ...
       • use mixin: - (args.)
     • app
       .use(.allowedMethods)
       .use(bodyparser())
       .use(.routes())
       
     • app.listen(<port: 8080(if http)>, ()=>{...})

• pug: remplate machine
  • modules: pug / koa-pug, path
  • read path: const path = require('path');
  • use pug in server

    • koa: create pug object:
      const Pug = new pug({
      // all pug files are stored in dir named 'views'
      viewPath: path.resolve(__dirname, 'views');
      app: app });
      

    • in method: router.('path', async ctx => {await ctx.render('', {parameter(s)});});

    • express:
      app.set('views', path.join(__dirname, 'views'));
      app.set('view engine', 'pug');
      

    • loop in pug:
      each item in itemList
      ...
      

    • if ...
      ...
      else ...
      

10. Datenbank / Sequelize