---
title: 工人大會slides
type: slide
slideOptions:
transition: fade
theme: black
---

<!-- 大家記得把repo設為public -->
<!-- 然後保重 dOuO -->

# 程設組

---

<!--DEAD: May, 26-->
<!--開場： 睿弘promax-->
- 這是我們這幾個月學的東西：
- 前端框架 vue.js <!-- skyling-->
- 後端框架 express <!-- [name=le37] -->
- CSS 框架 tailwindCSS <!--睿弘promax-->
- MongoDB (資料庫) 操作 <!--JJH-->
- git & github <!-- yen0224 -->

---

我們是去實作 ==留言板== 來應用這些技術和訓練自己的能力
<!-- DEMO : 鐵蛋 -->

---

# Vue.js
前端

----

## what is vue?
- 讓網頁可以動態讀資料的黑魔法
- 前後端分離，讓前端專注在網頁設計上的好框架
- 資料整包整包的拿進來，再整包整包的丟出去
- 頁面分割乾淨，不須同時重整所有組件

---

-
## 組件?

---

## 一些方便的好用功能
- v-model 雙向資料綁定(監聽+綁定)

<input type="text" v-model="article.title" >

- v-bind 綁定屬性(例如新生的學號不是固定資訊，但需要把學號顯示出來的時候)

<p v-bind:id="StudentID">...</p>

- v-on 監聽事件(例如幫按鈕加上滑過去就顯示下拉選單、按下去就跳去新頁面)

<input type = "button" value="按鈕" v-on:事件名稱="事件發生時做什麼">

---

## 對開發的好處
- 就算其中一部分還沒做出來也能預留空間
- 調整更容易(data不汙染到別的組件)
- 可以重複利用(例如導航列)
- 解決頻繁操作資料，網頁超慢的問題

---

# Express

----

## 剛剛講完vue前端的黑魔法，<br>接下來是後端的Express

----

## 簡單來說
- 前端(vue):看的到的美美的東西
- 後端(Express):看不到的~~髒~~東西

----


----

## Why backend(?
- 帳號系統
- 驗證
- 當存資料的窗口
- 給前端資料

----

## Why Express(?
- 跟前端一樣都是js base
- 輕量，簡單，好上手
- 快，好用，發展成熟

----

## Express router
讓不同的功能可以用url path/params 區分


----

## Express middleware
後端驗證好幫手

---

# TailwindCSS

---


---

# MongoDB

----

## MongoDB是甚麼

簡單來說，MongoDB是一個NoSQL(非結構化)架構的資料庫
透過運用類似JSON的文件去存取資料

----

## MongoDB的特色

前面提到是運用NoSQL架構，所以適合存取非結構資料，例如：HTML 網頁的資料
正因為如此我們採用MongoDB作為我們後端儲存資料的資料庫

----

## MongoDB的應用

- 網站即時數據(登/出入)
- 快速存取
- 大型、低價值檔案的儲存
- 有擴充需求的資料儲存
- 物件或 JSON 數據存儲

---


----

# Git & Github

----

- git是一個分散式版本控制軟體，由發明 Linux 的 ~~林姓商人~~ Linus 發明
- github是以 git 為版本控制系統的代碼託管平台

----

- 他可以有效地幫助我們 ~~把程式寫爆時~~ 比較、回溯程式碼
- 以及在建立新功能時不會影響到當前的穩定版本
- CI/CD 的功能可以自動部署！

----


---

# Live Demo

[來自陳立ㄉ鬼之留言板](http://43a3-20-230-18-101.ngrok.io/)