iT邦幫忙

2025 iThome 鐵人賽

DAY 20
0
Modern Web

【網頁是什麼,能吃嗎】── 零基礎也能學會網頁製作系列 第 20

【Day 20】為專案加上資料庫 ── Vue.js 實作篇

  • 分享至 

  • xImage
  •  

今天將會運用到前幾日所學到的內容,並開始為專案增加資料庫的存取功能!那麼就讓我們直接開始今日的內容吧!


建立表格 table

現階段為了方便測試,所以先在 local 建立檔案,到未來筆者將會改使用一些其他的hosting以便其他裝置上的使用者做操作。

表格的建立只需要輸入並執行以下SQL語言的程式碼:

CREATE TABLE IF NOT EXISTS accounts (
	id	INTEGER PRIMARY KEY AUTOINCREMENT,
	username TEXT NOT NULL UNIQUE,
	password TEXT NOT NULL UNIQUE
);

express

首先先來測試一下express是否能夠順利執行,我們利用以下指令下載express包:

npm install express

接著在跟目錄中建立以下資料夾以及檔案:src/server/index.js,這將會是我們待會所要使用的檔案。建立好後我們可以照著官方教學來創立一個最基礎的可執行網頁:

import express from 'express'
const app = express()
const port = 3000

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

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

有一點需要特別注意的是,express 的 port 不可與 vue 相同,以此範例來說,我們的vue預設在 5173 運行,那麼express便需要選擇一個不同的,如3000。


上一篇
【Day 19】 後端資料庫的基礎使用
系列文
【網頁是什麼,能吃嗎】── 零基礎也能學會網頁製作20
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言