---
title: 2024程設筆記
tags: 2024
author: xCk27x
---

# 關於網頁的50個問題 解答
###### tags: `2024`

## 前端

1.

    <!-- flex -->
    <div id="parent" class="flex justify-center items-center">
        <p id="child">我想置中</p>
    </div>

    <!-- position -->
    <div id="parent" class="relative h-40 w-60">
      <p id="child" class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">我想置中</p>
    </div>

    <!-- margin -->
    <div id="parent" class="flex h-40 w-60">
      <p id="child" class="m-auto">我想置中</p>
    </div>

2. 對png圖片使用css的drop-shadow屬性
3. 再包一層不就沒事了

    <div id="grandParent" class="relative">
        <div id="container" class="absolute h-full w-full">
            <div id="parent" class="relative h-full w-full">
                <p id="child" class="absolute">
                    請勿更動這家人的position設定
                </p>
            </div>
        </div>
    </div>

4.
.intro -> class="intro"
#Lastname -> id="Lastname"
h1, p -> 所有```<h1></h1>``` 以及 ```<p></p>```
div .container -> 在div以內任何class為contaier的元素
5.
- 第一種: props

    <script setup>
    const props = defineProps(['foo'])

    console.log(props.foo)
    </script>

- 第二種: emit

    <!-- parent -->
    <template>
        <ChildComponent @child-click="funcA"/>
    </template>

    <script setup>
    import ChildComponent from './ChildComponent.vue';
    
    function funcA(val) {
        console.log(val);
    }
    </script>
        
    <!-- child -->
    <template>
        <button @click="funcB"></button>
    </template>

    <script setup>
    import { defineEmits } from 'vue';
    const emit = defineEmits(['child-click']);
    
    function funcB() {
        emit('child-click', 'hello');
    }
    </script>

- 第三種: state (pinia)

    import { defineStore } from 'pinia'

    export const useCounterStore = defineStore('counter', () => {
      const count = ref(0);

      function reset() {
        count.value = 0;
      }

      return { count, reset }
    })

6. 提供兩種做法

    <!-- max-h -->
    <div class="w-60 h-40">
        <img class="max-h-full w-auto" src="fit-parent.png" />
    </div>

    <!-- object-cover -->
    <div class="w-60 h-40">
      <img class="w-full object-cover" src="fit-parent.png" />
    </div>

7. scss比較結構化

    .section {
        width: 100vw;
        height: 100vh;
        position: relative;
    }

    .section p {
        color: white;
    }

    .section p:hover {
        color: red;     
        cursor: pointer;   
    }

    .section_container {
        min-width: 10rem;
        position: absolute;
        left: 3rem;
        right: 3rem;
        outline: 1px solid black;
    }

    .section_container-1 {
        background-image: linear-gradient(to right bottom, black, white);
    }

    .section_container-2 {
        background-image: linear-gradient(to bottom, gray, blue);
    }

    .section_container-3 {
        background-image: linear-gradient(to left top, red, yello);
    }

8. grid中的col數量不固定，會盡可能地塞進最多100px以上的col。如果塞完這些100px的col後發現還有剩餘空間，會再動態的調整col的寬度。另外，每個col中被規定要有1rem的間隔。
9. https://play.tailwindcss.com/mpKTjHSCyV
10.

    .infinite_loop {
        animation-iteration-count: infinite; // 方案A
        animation: anim-name ease-in 0s infinite; // 方案B
    }

11. 被設定display:none的元素會直接被從DOM樹移除，意思是他完全從網頁上消失了。visibility:hidden則是你無法跟他互動，但是他仍然存在，有點像幽靈的感覺。

12. clamp(min, val, max) 的意思是，大小以val為準，但是上下限是min跟max。
13. media(min-width: 540px)

## JavaScript
1. 第二個'a'因為前面的+號被轉換成'NaN'，連起來就變成'baNaNa'，再換成小寫就是'banana';
2. ```[1,2,3,4,5,6,7].map(val => val**2)```
3. ```[1,2,3,4,5,6,7].filter(val => val % 3 === 0)```
4. ```[1,2,3,4,5,6,7].reduce((acc, val) => acc * val)```
5.
- push從最後插入元素，回傳修改過的陣列長度。
- unshift從最前面插入元素，回傳修改過的陣列長度。
- concat將兩個元素依序合併，回傳修改過的元素。
6.

    $ 3 
    $ 3 
    $ 3

> setTimeOut是指「保證會在n秒後才執行callback function」，而在n秒後for迴圈早就跑完3次了，因此此時的i值都會是3。
7. event loop會持續監聽call stack，當發現call stack沒有待辦的任務時，會將callback queue的工作送回call stack來被執行。
8. callback function其實就只是被當做參數傳進另一個函數(A)的函數(B)，因此B會在A中被調用，而什麼時候被調用則要看A具體的程式碼。
> 有迷思是B只會在A結束時調用，這是錯的。
9. 當這個Promise物件的resolve()被調用時，簡單的說，就是當這個Promise成功的被執行完後，then()中的callback function就會被執行。

## TypeScript
1.

    let a: number = 10;
    let a = <number>10;
    let a = 10 as number;

2.

    type Person = {
        name: string,
        age: number,
        phone?: string
    }

3.

    interface Machine {
        price: number,
        weight: number,
        move(dire: string): void
    }

4.

    let strList: string[] = [];

5. 一個type為obj的物件，他的索引值只可以是string類型，並且對應到的屬性值為number類型。
6.
- true: number(0與NaN除外)、string(空字串除外)、true
- false: 0, NaN, '', false, null, undefined
7.

     function noReturn(): void {...}

8. 因為callback function的argument型態是被調用他的function所決定的。所以除非這個function有特別的重載要求，不然沒必要特地對callback function的argument進行型別宣告。

## vue/nuxt
1.

    // 最基本是直接用useFetch加一段網址就好
    const res = await useFetch('https://ncufresh.ncu.edu.tw/');

    // 當然你可能要在請求中添加一些選項
    const res = await useFetch('https://ncufresh.ncu.edu.tw/', {
        method: 'GET', 
        headers: { 
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${jwtToken}` 
        }
    }
);

2. 當你的路由無法匹配時，會轉到這個頁面(404)
3.
- Layouts: 頁面中會固定出現的部分，使用<slot></slot>表示要包含的內部頁面。
- Components: 會重複利用的組件，可以簡單地被其他檔案調用。
4. 在nuxt中這兩個完全沒差。

## Git
1.

    $ git add -A
    $ git commit -m "message"

2.
- git merge會建立一個新的commit，其中包含了兩個分支的所有commit
- git rebase將當分支街道目標分支的末端，好處是git graph上看會比較漂亮，壞處是會修改git歷史。
3.

    // 這三種方法都行
    $ git rebase
    $ git merge
    $ git pull

4.
- soft: 只是把commit取消，但檔案都還在暫存區中，重新commit就變回原樣了。
- mixed(預設): 同上，但是東西會被從暫存區中拿出來，要重新add。
- hard: 直接把commit中的檔案都刪掉，讓工作區強制回到舊版的狀態。
5.
- revert: 建立一個新的commit，來取消舊版的變更。
- reset: 刪除commit讓分支回到舊版。
6. 等同```git branch <branchName>``` + ```git checkout <branchName>```，建立新分支並切換到此分支。
7. 將分支移動到當前所在commit的前三個commit的位置。
8. 因為遠端還並沒有test1這個分支，所以要先讓遠端創建test1這個分支，才可以進行push。將push的指令改為```git push -u origin test1```即可。

## Express
1. middleware是指在獲取到request的過之前，要先經過的一些處理函數。
2. 將request的body部分轉為特定格式，通常是json。
3.

const express = require('express');
const app = express();

app.get('/', (req, res) => {
  res.send('Hello, World!');
});

app.listen(3000);

4.
- 如果能以postId跟commentId成功獲取資料庫中的comment，以 **200** 狀態碼跟內容 **文章postId的評論commentId：comment** 作為response回傳。
- 如果僅存在postId但commentId不存在，以 **404** 狀態碼跟內容 **評論不存在** 作為response回傳。
- 如果postId不存在，以 **404** 狀態碼跟內容 **文章不存在** 作為response回傳。
5. 題目描述不清楚，送分
6. '評論不存在'
7. 嘗試從users中找到id屬性為userId的object，如果找到了，則回傳此物件的name屬性值。若沒找到則以狀態碼 **404** 回傳 **用戶不存在**
8. 因為在req.params的值通常都是string類型。
9. request在myMiddleware便停止向後傳送，主要處理函數將無法收到request，因此客戶端也無法收到response。
10. CSRF(跨網站請求偽造攻擊)是指當正常user因典籍惡意連結等原因，讓網站資料及個人信息被attacker獲取，使attacker能夠透過user身分向網站發送請求。
CSRF保護則是建立在「特定資訊只有網站自己知道」的前提下，先在返回前端頁面時帶上csrf_token，在每次收到請求時都檢查csrf_token的值是否與session中相同。
express中使用npm中的csrft進行csrf保護，詳細請見官網 https://www.expressjs.com.cn/en/resources/middleware/csurf.html