※ 路由語義化：RESTful 風格應用

什麼是 RESTful：

運用 HTTP 來表達語義的路由設計風格稱為 RESTful API。所謂的 API 是應用程式介面 (application programming interface)，網址也是一種應用程式的「介面」，故稱為 API。

R

職場

學習

音樂藝文

以行動支持創作者！付費即可解鎖

軟體開發

奧莉薇走在成為後端工程師之路上

應用程式

資源

設計

Express專案建置流程—RESTful說明(Javascript版)

※ 什麼是靜態檔案：

指的是不需要再經過伺服器額外處理的檔案。常見的有，在網頁中載入的 CSS、JavaScript 或圖片檔，這些檔案通常不需要再經過伺服器額外處理，伺服器只需要提供一個連結，讓瀏覽器直接抓取這些檔案即可。

※ 建立一個名為 public 的資料夾：

把所有網頁上需要使用到的

檔案

伺服器

下載

網頁

專案

Windows

Express專案建置流程—靜態檔案(Javascript版)

※ 安裝 express-handlebars：

npm install express-handlebars

※ 建立第一個頁面：

製作共用 Layout：

先建立整個網站共用的主要佈局 (layout)。把共用 layout 檔案路徑設定為：views/layouts/main.hbs，

新增

Express專案建置流程—渲染 HTML 樣板(Javascript版)

※ 應用程式跟資料庫連線：

在開發的過程中，你會有一個終端機視窗負責運行 Node.js，也就是你的 web server。我們眼前的電腦就是「網路伺服器 (web server)」，而我們可以在電腦上打開瀏覽器，就能跟自己撰寫的應用程式進行互動。在資料庫伺服器方面 (database serve

安裝

環境

互動

種子

Express專案建置流程—MongoDB資料庫連線(Javascript版)

※ 首頁重點：

index.html：

<body>
	
	<div class="wrapper">
		
				<section class="main">
			
			<div

咖啡

阿拉斯加

中文

供應

條件

標題

結構

商品

背景

單頁式網頁切版 ：畫面切版（二）

※ 切版分析：

各區塊細節解析：

 1. .header 頁首區

視覺焦點：Logo + 背景圖，營造品牌形象。

文字內容：包含「Rmoo Cafe」與中文標語。

設計重點：

背景圖可能使用 background-image 搭配 cover或 contain。

Logo 可用<img

單頁式網頁切版 ：畫面切版（一）

※ contact內容：

index.html：


		
		<div class="hero hero-bg-grey">
			<div class="container">
				
				<div class="se

著作權

苓雅區

地圖

高雄市

單頁式網頁切版 ：畫面切版（三）

※ 英文原則：

※ 編碼宣告：

※ 文件開頭：

※ 文件開頭範例：

※ 註解範例：

※ 註解原則：

※ 元件權重原則：

※ 元件權重範例：

※ Class管理：

※ 語意化：

範例一：

範例二：

範例三：

範例四：

範例五：

範例六：

※ 開發人員工具：可以參考命名


文件

權重

單頁式網頁切版 ：CSS文件整理

※ 各式置中方法與複習：

※ 建立center_practice專案：

1. margin: 0 auto：

index.html：

<body>
	
	<h2>1. margin: 0 auto; 的置中方式</h2>
	<div

中方

彈性

單頁式網頁切版 ：置中方法與複習

※ 圖片放置結合商品卡範例：

商品成果範例：



建立product-card-2_example專案：

index.html：


<body>
	
	<div class="wrapper">
		
		<div class="prod