yanzzzz blog
0%

Posted on Edited on Views:

setup

Composition API 功能要寫在setup裡面

1
2
3
4
5
6
7
8
<script>
export defalut {
  setup(){
    //...
  }
}
</script>

也可以寫成

1
2
<script setup>
</script>

ref

  • 定義響應性數據
  • 參數名稱要+.value來修改資料
1
2
3
4
5
6
7
8
<template>
  <h1>{{ title }}</h1>
</template> 
<script setup>
import { ref } from 'vue';
const title = ref('title');
title.value = 'new title';
</script>

Posted on Edited on Views:

實作在右下角顯示多個提示框功能

修改index.html部分, 在body區域新增一個messages用來放置提示框的位置

1
2
3
4
5
6
7
8
9
//index.html
<!doctype html>
//...
<body>
  <div id="app"></div>
  <div id="messages"></div>
  <script type="module" src="/src/main.js"></script>
</body>
//...
Read more »

Posted on Edited on Views:

題目

https://leetcode.com/problems/next-permutation/description/

A permutation of an array of integers is an arrangement of its members into a sequence or linear order.

  • For example, for arr = [1,2,3], the following are all the permutations of arr: [1,2,3], [1,3,2], [2, 1, 3], [2, 3, 1], [3,1,2], [3,2,1].

The next permutation of an array of integers is the next lexicographically greater permutation of its integer. More formally, if all the permutations of the array are sorted in one container according to their lexicographical order, then the next permutation of that array is the permutation that follows it in the sorted container. If such arrangement is not possible, the array must be rearranged as the lowest possible order (i.e., sorted in ascending order).

  • For example, the next permutation of arr = [1,2,3] is [1,3,2].
  • Similarly, the next permutation of arr = [2,3,1] is [3,1,2].
  • While the next permutation of arr = [3,2,1] is [1,2,3] because [3,2,1] does not have a lexicographical larger rearrangement.

Given an array of integers nums, find the next permutation of nums.

The replacement must be in place and use only constant extra memory.

Read more »

Posted on Edited on Views:

Traditional web applications

傳統的 Web 應用程式是指一個使用多個頁面的應用程式，每次使用者在網頁上進行操作時，都需要重新載入整個頁面或者轉到另一個頁面，從而刷新網頁的內容。每次發送請求時，伺服器都會重新生成一個 HTML 頁面，並將其傳送給客戶端。

Example page

Read more »

Posted on Edited on Views:

了解Web 開發原則

Web 開發的第一原則: 第一步就是在瀏覽器上使用F12開啟開發者控制台，Network標籤可以看到Web與伺服器使用HTTP的所有通信, Console標籤可以看到所有在程式內Deubug用的訊息

HTTP GET

HTTP GET 是一種 HTTP 請求方法，通常用於獲取網頁上的資源。在進行網路傳輸時，HTTP GET 方法可以向伺服器發送請求，以獲取伺服器上的資源。這些資源可以是網頁、影像、檔案等，而 HTTP GET 方法獲取資源的方式是透過 URL（Uniform Resource Locator，統一資源定位符）進行定位。
HTTP GET 方法是一種安全且幾乎無副作用的請求方法。使用 HTTP GET 方法，客戶端可以向伺服器發送請求，要求伺服器回應一個資源。當伺服器接收到 HTTP GET 請求後，會查找對應的資源，然後將其返回給客戶端。
HTTP GET 方法的請求是無副作用的，即不會對伺服器上的資源進行任何更改。這意味著使用 HTTP GET 方法，客戶端只能獲取伺服器上的資源，而不能修改或刪除它們。

HTTP GET 特色

Read more »

Posted on Edited on Views:

聲明式渲染 Declarative Rendering

vue核心功能是聲明式渲染:不用關心渲染過程怎麼樣，只要告訴機器最終結果是甚麼就好

在template標籤內的語法用{{ }}渲染動態文字, 可以根據js當前狀態去改變現在HTML的樣子

1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
export default {
  data() {
    return {
      message: 'Hello World!'
    }
  }
}
</script>

<template>
  <h1>{{ message }}</h1>
</template>

{{ }}內可以執行任何js表達式, ex:

1
<h1>{{ message.split('').reverse().join('') }}</h1>
Read more »

Posted on Edited on Views:

分層架構

大多為以下四層:

  • Presentation Layer 表現層: 該層關注的是用戶看到或可以互動的任何內容，包含UI、圖形、表單、影像
  • Business Layer 業務層: 軟體本身特定的業務邏輯，blog網站會有發布文章、留言功能
  • Persistence Layer 持久層: 資料存取
  • Database Layer 資料層: 資料來源 ex:本地DB，雲端DB
    Read more »

Posted on Edited on Views:

問題

  • 應用程式都有資料存取需求，大多使用關聯式資料庫，使用如ADO.NET, OLE DB…介面，再搭配SQL指令來操作資料
  • 過往小型應用程式資料來源通常來自資料庫, 但現在提倡分散式, 雲端化的情況下, 資料來源具有多樣性
  • 傳統做法:應用程式邏輯與資料存取介面緊密結合, 會提高整合資料的難度

使用時機

  • 資料來源需要有任意抽換的功能
  • 抽離對DB操作的功能到Repository
    Read more »

Posted on Edited on Views:

LINQ介紹

語言整合查詢(英語：Language Integrated Query，縮寫：LINQ)是Microsoft的一種查詢語法技術，C#、VB都可以使用

LINQ 語法

Where

1
2
3
4
// filter odd number
int[] numbers = { 5, 10, 8, 3, 6, 12};
IEnumerable<int> numQuery2 = numbers.Where(num => num % 2 == 0)
// Output: 10 8 6 12
Read more »