使用 Vue 3 和 Express 實作內容管理系統（二）：初始化後端專案

Vue
, , , , , , , ,

前言

本文是前端工作坊的教學文件，介紹如何使用 Vue 3 和 Express 實作內容管理系統，並搭配 Firebase 實現持久化和認證。

認識 Node 執行環境

Ref: https://nodejs.org/en

Node.js 是一個開放原始碼的 JavaScript 執行環境，讓開發者可以在伺服器端執行 JavaScript。範例如下：

1
2
3
4
5
6
7
8
9
10
11
const http = require('http');

const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/plain');
  res.end('Hello, World!\n');
});

server.listen(3000, '127.0.0.1', () => {
  console.log('Server running at http://127.0.0.1:3000/');
});

執行腳本。

1
node index.js

初始化 Express 專案

Ref: https://expressjs.com/

建立資料夾。

1
mkdir simple-cms-api

進入資料夾。

1
cd simple-cms-api

使用 npm 初始化專案。

1
npm init

開啟 VS Code 編輯器。

1
code .

安裝 Express 框架。

1
npm install express

添加 Git 版本控制

新增 .gitignore 檔。

1
/node_modules

使用 Git 初始化版本控制，並到 GitHub 建立一個新的儲存庫。

1
2
3
git init
git add .
git commit -m "Initial commit"

複製 GitHub 儲存庫的 SSH URL，並指定預設的遠端儲存庫位址。

1
git remote add origin git@github.com:memochou1993/simple-cms-api.git

將本地的 main 分支推送到預設的遠端儲存庫。

1
git push -u origin main

添加 ESLint 檢查工具

Ref: https://eslint.org/

1
2
3
4
5
6
7
npm init @eslint/config@latest

✔ How would you like to use ESLint? · problems
✔ What type of modules does your project use? · commonjs
✔ Which framework does your project use? · none
✔ Does your project use TypeScript? · javascript
✔ Where does your code run? · node

生成的 eslint.config.mjs 檔如下：

1
2
3
4
5
6
7
8
9
import globals from "globals";
import pluginJs from "@eslint/js";


export default [
  {files: ["**/*.js"], languageOptions: {sourceType: "commonjs"}},
  {languageOptions: { globals: globals.node }},
  pluginJs.configs.recommended,
];

修改 eslint.config.mjs 檔，加上一些常用的檢查規則。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// ...

export default [
  // ...
  {
    rules: {
      'comma-dangle': ['error', 'always-multiline'],
      'eol-last': ['error', 'always'],
      'no-multiple-empty-lines': ['error', { max: 1, maxEOF: 0 }],
      'object-curly-spacing': ['error', 'always'],
      indent: ['error', 2],
      quotes: ['error', 'single'],
      semi: ['error', 'always'],
    },
  },
];

修改 package.json 檔，加上 lint 命令腳本。

1
2
3
4
5
6
7
8
{
  // ...
  "scripts": {
    // ...
    "lint": "eslint"
  }
  // ...
}

執行檢查。

1
npm run lint

新增 .vscode/settings.json 檔，添加讓 ESLint 自動修正程式碼的設定，和一些常用的編輯器設定。

1
2
3
4
5
6
7
{
  "editor.tabSize": 2,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit",
    "source.organizeImports": "explicit"
  }
}

提交修改。

1
2
3
git add .
git commit -m "Add eslint"
git push

建立網頁伺服器

Ref: https://expressjs.com/en/starter/hello-world.html

新增 index.js 檔，建立一個網頁伺服器。

1
2
3
4
5
6
7
8
9
10
11
const express = require('express');
const app = express();
const port = 3000;

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

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`);
});

啟動伺服器。

1
node index.js

提交修改。

1
2
3
git add .
git commit -m "Add web server"
git push

程式碼