Byte Ebi's Logo

Byte Ebi 🍤

每天一小口,蝦米變鯨魚

[Express+Vue 搭建電商網站] 03 - 認識 Express

使用 Express + Vue 搭建一個電商網站 - 認識 Express

Ray

後端使用的是 node.js 的後端框架 - express,這篇中我們會建立新專案。

建立 Express 專案

使用 express-generator 來建立專案

npm install -g express-generator

安裝完成後可以使用以下指令查看版本是否有安裝成功

express --version

接著初始化建立新專案

express backend

建立之後運行看看初始樣貌

cd backend
npm install
npm start

打開瀏覽器 http://localhost:3000/ 應該會看到以下畫面
hello-express

打開看看 Express 專案的資料夾架構

  • app.js:Express Web Application 原型
  • routes/index.js:路由設定主要檔案
  • views/:放 View 的檔案
  • public/:放靜態檔案

和其它文章不同的是,這次使用 express-generator 建立的專案中並沒有把所有路由給寫在 app.js
而是根據不同的應用做拆分,這和前端使用 vue-router 的嵌套路由是相同的概念

app.js

app.js 中一開始先對於會用到的資源進行導入,例如 routes/indexroutes/users 兩個路由
也定義了專案使用的前端模板類型。但因為我們後端是作為 API 使用,所以沒什麼差

routes/index.js

而在 routes/index.js 中定義了進入這個路由之後對於不同請求可以做的回應方式

這就是主要我們需要先了解的部分


專案範例程式碼 GitHub 網址:ray247k/mini-E-commerce

最新文章

Category

Tag