Net Ninja – wordpress_blog

MERN Authentication Tutorial

gee.hsu — Mon, 08 Jul 2024 09:29:35 +0000

Learning From Youtube Channel: Net Ninja
Video: MERN Authentication Tutorial
Thank you.

#1 – Intro & Starter Project

Learn how to implement authentication (using JSON web tokens), within the MERN stack, in this tutorial series.

下載初始專案、講解專案檔案結構、內容
移動到 backend 資料夾 – cd backend
安裝 npm 套件 – npm install
移動到 frontend 資料夾 – cd frontend
安裝 npm 套件 – npm install
執行後端 backend – npm run dev
執行前端 frontend – npm start

#2 – User Routes, Controller & Model

In this MERN auth tutorial, you’ll make a user controller & model, and set up some routes for authentication.

在 routes 資料夾裡面建立 user.js 檔案
修改 user.js 檔案
在 controllers 資料夾裡面建立 userController.js 檔案
修改 userController.js 檔案
修改 user.js 檔案，controller functions
修改 server.js 檔案
在 models 資料夾裡面建立 userModel.js 檔案
修改 useModel.js 檔案
修改 userController.js 檔案，User
使用 API 測試工具 Postman
http://localhost:4000/api/user/login，POST 方法
Body > raw > JSON
使用 API 測試工具
http://localhost:4000/api/user/signup，POST 方法
Body > raw > JSON

// backend/routes/user.js
const express = require('express')

// controller functions
const { signupUser, loginUser } = require('../controllers/userController')

const router = express.Router()

// login route
router.post('/login', loginUser)

// signup route
router.post('/signup', signupUser)

module.exports = router

// backend/controllers/userController.js
const User = require('../models/userModel')

// login user
const loginUser = async (req, res) => {
  res.json({mssg: 'login user'})
}

// signup user
const signupUser = async (req, res) => {
  res.json({mssg: 'signup user'})
}

module.exports = { signupUser, loginUser }

// backend/server.js
require('dotenv').config()

const express = require('express')
const mongoose = require('mongoose')
const workoutRoutes = require('./routes/workouts')
const userRoutes = require('./routes/user')

// express app
const app = express()

// middleware
app.use(express.json())

app.use((req, res, next) => {
  console.log(req.path, req.method)
  next()
})

// routes
app.use('/api/workouts', workoutRoutes)
app.use('/api/user', userRoutes)

// connect to db
mongoose.connect(process.env.MONGO_URI)
  .then(() => {
    // listen for requests
    app.listen(process.env.PORT, () => {
      console.log('connected to db & listening on port', process.env.PORT)
    })
  })
  .catch((error) => {
    console.log(error)
  })

// backend/models/userModel.js
const mongoose = require('mongoose')

const Schema = mongoose.Schema

const userSchema = new Schema({
  email: {
    type: String,
    required: true,
    unique: true
  },
  password: {
    type: String,
    required: true,
  }
})

module.exports = mongoose.model('User', userSchema)

// Body > raw > JSON - login
{
  "email": "yoshi@netninja.dev",
  "password": "abc123"
}

// Body > raw > JSON - signup
{
  "email": "yoshi@netninja.dev",
  "password": "abc123"
}

#3 – Signing Up & Hashing Passwords

修改 userModel.js 檔案，static signup method
安裝 bcrypt 套件 – npm install bcrypt
修改 userModel.js 檔案
修改 userController.js 檔案
修改 userModels.js 檔案，function
重新執行後端 server – nodemon server
使用 API 測試工具 Postman
http://localhost:4000/api/user/signup，POST 方法
Body > raw > JSON

// backend/models/userModel.js
const mongoose = require('mongoose')
const bcrypt = require('bcrypt')

const Schema = mongoose.Schema

const userSchema = new Schema({
  email: {
    type: String,
    required: true,
    unique: true
  },
  password: {
    type: String,
    required: true,
  }
})

// static signup method
userSchema.statics.signup = async function (email, password) {

  const exists = await this.findOne({ email })

  if (exists) {
    throw Error('Email already in use')
  }

  const salt = await bcrypt.genSalt(10)
  const hash = await bcrypt.hash(password, salt)

  const user = await this.create({ email, password: hash })

  return user
}

module.exports = mongoose.model('User', userSchema)

// backend/controllers/userController.js
const User = require('../models/userModel')

// login user
const loginUser = async (req, res) => {
  res.json({mssg: 'login user'})
}

// signup user
const signupUser = async (req, res) => {
  const { email, password } = req.body

  try {
    const user = await User.signup(email, password)

    res.status(200).json({ email, user })
  } catch (error) {
    res.status(400).json({ error: error.message })
  }
}

module.exports = { signupUser, loginUser }

// Body > raw > JSON
{
  "email": "yoshi@netninja.dev",
  "password": "abc123"
}

#4 – Email & Password Validation

使用 API 測試工具 Postman
http://localhost:4000/api/user/signup，POST 方法
使用錯誤的 email 格式測試，沒有完整格式、空值
安裝 validator 套件 – npm install validator
修改 userModel.js 檔案，validator
使用 API 測試工具 Postman
http://localhost:4000/api/user/signup，POST 方法
使用錯誤的 email 格式測試，沒有完整格式、空值

// backend/models/userModel.js
const mongoose = require('mongoose')
const bcrypt = require('bcrypt')
const validator = require('validator')

const Schema = mongoose.Schema

const userSchema = new Schema({
  email: {
    type: String,
    required: true,
    unique: true
  },
  password: {
    type: String,
    required: true,
  }
})

// static signup method
userSchema.statics.signup = async function (email, password) {

  // validation
    if (!email || !password) {
      throw Error('All fields must be filled')
    }
    if (!validator.isEmail(email)) {
      throw Error('Email not valid')
    }
    if (!validator.isStrongPassword(password)) {
      throw Error('Password not strong enough')
    }

  const exists = await this.findOne({ email })

  if (exists) {
    throw Error('Email already in use')
  }

  const salt = await bcrypt.genSalt(10)
  const hash = await bcrypt.hash(password, salt)

  const user = await this.create({ email, password: hash })

  return user
}

module.exports = mongoose.model('User', userSchema)

#5 – JSON Web Tokens (theory)

In this MERN Authentication tutorial you’ll learn about JSON Web Tokens (JWT’s) and how they work under the hood when it comes to authentication.

講解 JSON Web Tokens
介紹 JWT 的 Encoded、Decoded
講解 Header、Payload、Signature

JSON Web Tokens

Header
Contains the algorithm used for the JWT

Payload
Contains non-sensitive user data (e.g. a user id)

Signature
Used to verify the token by the server

#6 – Signing Tokens

In this MERN Authentication tutorial, we’ll see how to sign tokens and send them back to the client.

安裝 jsonwebtoken 套件 – npm install jsonwebtoken
修改 userController.js 檔案
修改 .env 檔案，避免敏感、重要的資料上傳到 GitHub
使用 API 測試工具 Postman
http://localhost:4000/api/user/signup，POST 方法
Body > raw > JSON

// backend/controllers/userController.js
const User = require('../models/userModel')
const jwt = require('jsonwebtoken')

const createToken = (_id) => {
  return jwt.sign({_id}, process.env.SECRET, { expiresIn: '3d' })
}

// login user
const loginUser = async (req, res) => {
  res.json({mssg: 'login user'})
}

// signup user
const signupUser = async (req, res) => {
  const { email, password } = req.body

  try {
    const user = await User.signup(email, password)

    // create a token
    const token = createToken(user._id)

    res.status(200).json({ email, token })
  } catch (error) {
    res.status(400).json({ error: error.message })
  }
}

module.exports = { signupUser, loginUser }

// backend/.env
PORT=4000
MONGO_URI=mongodb+srv://mario:test1234@mernapp.bldt4v0.mongodb.net/?retryWrites=true&w=majority&appName=MERNapp
SECRET =learnfromnetninjathankyou

// Body > raw > JSON
{
  "email": "luigi@netninja.dev",
  "password": "ABCabc123!"
}

#7 – Logging Users In

修改 userModel.js 檔案，static login method
修改 userController.js 檔案，login user
使用 API 測試工具 Postman，測試各種資料情形
http://localhost:4000/api/user/login，POST 方法
Body > raw > JSON

// backend/models/userModel.js
const mongoose = require('mongoose')
const bcrypt = require('bcrypt')
const validator = require('validator')

const Schema = mongoose.Schema

const userSchema = new Schema({
  email: {
    type: String,
    required: true,
    unique: true
  },
  password: {
    type: String,
    required: true,
  }
})

// static signup method
userSchema.statics.signup = async function (email, password) {

  // validation
    if (!email || !password) {
      throw Error('All fields must be filled')
    }
    if (!validator.isEmail(email)) {
      throw Error('Email not valid')
    }
    if (!validator.isStrongPassword(password)) {
      throw Error('Password not strong enough')
    }

  const exists = await this.findOne({ email })

  if (exists) {
    throw Error('Email already in use')
  }

  const salt = await bcrypt.genSalt(10)
  const hash = await bcrypt.hash(password, salt)

  const user = await this.create({ email, password: hash })

  return user
}

// static login method
userSchema.statics.login = async function (email, password) {

  if (!email || !password) {
    throw Error('All fields must be filled')
  }

  const user = await this.findOne({ email })

  if (!user) {
    throw Error('Incorrect email')
  }

  const match = await bcrypt.compare(password, user.password)

  if (!match) {
    throw Error('Incorrect password')
  }

  return user
}

module.exports = mongoose.model('User', userSchema)

// backend/controllers/userController.js
const User = require('../models/userModel')
const jwt = require('jsonwebtoken')

const createToken = (_id) => {
  return jwt.sign({_id}, process.env.SECRET, { expiresIn: '3d' })
}

// login user
const loginUser = async (req, res) => {
  const { email, password } = req.body

  try {
    const user = await User.login(email, password)

    // create a token
    const token = createToken(user._id)

    res.status(200).json({ email, token })
  } catch (error) {
    res.status(400).json({ error: error.message })
  }
}

// signup user
const signupUser = async (req, res) => {
  const { email, password } = req.body

  try {
    const user = await User.signup(email, password)

    // create a token
    const token = createToken(user._id)

    res.status(200).json({ email, token })
  } catch (error) {
    res.status(400).json({ error: error.message })
  }
}

module.exports = { signupUser, loginUser }

// Body > raw > JSON
{
  "email": "luigi@netninja.dev",
  "password": "ABCabc123!"
}

#8 – React Auth Context

在 context 資料夾裡面建立 AuthContext.js 檔案
修改 AuthContext.js 檔案
修改 index.js 檔案，匯入 AuthContextProvider
在 hook 資料夾裡面建立 useAuthContext.js 檔案
修改 useAuthContext.js 檔案

// backend/src/context/AuthContext.js
import { createContext, useReducer } from 'react'

export const AuthContext = createContext()

export const authReducer = (state, action) => {
  switch (action.type) {
    case 'LOGIN':
      return { user: action.payload }
    case 'LOGOUT':
      return { user: null}
    default:
      return state
  }
}

export const AuthContextProvider = ({ children }) => {
  const [state, dispatch] = useReducer(authReducer, {
    user: null
  })

  console.log('AuthContext State: ', state)

  return (
    
      { children }
    
  )
}

// frontend/src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { WorkoutsContextProvider } from './context/WorkoutContext';
import { AuthContextProvider } from './context/AuthContext';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  
    
      
        
      
    
  
);

// frontend/src/hooks/useAuthContext.js
import { AuthContext } from "../context/AuthContext";
import { useContext } from 'react'

export const useAuthContext = () => {
  const context = useContext(AuthContext)

  if (!context) {
    throw Error('useAuthContext must be used inside an AuthContextProvider')
  }

  return context
}

#9 – Login & Signup Forms

In this MERN auth tutorial, we’ll flesh out the login and signup forms.

在 pages 資料夾裡面建立 Signup.js 檔案
修改 Signup.js 檔案
在 pages 資料夾裡面建立 Login.js 檔案
修改 Login.js 檔案，從 Signup.js 複製修改
修改 App.js 檔案
修改 Navbar.js 檔案
修改 index.css 檔案
測試網頁表單 Sign up 關於 console 查詢顯示

// frontend/src/pages/Signup.js
import { useState } from 'react'

const Signup = () => {
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')

  const handleSubmit = async (e) => {
    e.preventDefault()

    console.log(email, password)
  }

  return (
    
      Sign up

      Email:
       setEmail(e.target.value)}
      value={email}
      />
      Password:
       setPassword(e.target.value)}
      value={password}
      />
      
      
    
  )
}

export default Signup

// frontend/src/pages/Login.js
import { useState } from 'react'

const Login = () => {
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')

  const handleSubmit = async (e) => {
    e.preventDefault()

    console.log(email, password)
  }

  return (
    
      Log in

      Email:
       setEmail(e.target.value)}
      value={email}
      />
      Password:
       setPassword(e.target.value)}
      value={password}
      />
      
      
    
  )
}

export default Login

// frontend/src/App.js
import { BrowserRouter , Routes, Route } from 'react-router-dom'

// pages & components
import Home from './pages/Home'
import Login from './pages/Login';
import Signup from './pages/Signup';
import Navbar from './components/Navbar'

function App() {
  return (
    
        
          
          
            
              } 
              />
              } 
              />
              } 
              />
            
          
        
    
  );
}

export default App;

// frontend/src/components/Navbar.js
import { Link } from "react-router-dom"

const Navbar = () => {

  return (
    
      
        
          Workout Buddy
        
        
          
            Login
            Signup
          
        
      
    
  )
}

export default Navbar

// frontend/src/index.css
/* google font */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;800&family=VT323&display=swap');

/* layout */
:root {
  --primary: #1aac83;
  --error: #e7195a;
}
body {
  background: #f1f1f1;
  margin: 0;
  font-family: "Poppins";
}
header {
  background: #fff;
}
header .container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
header a {
  color: #333;
  text-decoration: none;
}
.pages{
  max-width: 1400px;
  padding: 20px;
  margin: 0 auto;
}

/* homepage */
.home {
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: 100px;
}

.workout-details {
  background: #fff;
  border-radius: 4px;
  margin: 20px auto;
  padding: 20px;
  position: relative;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.05);
}

.workout-details h4 {
  margin: 0 0 10px 0;
  font-size: 1.2em;
  color: var(--primary);
}

.workout-details p {
  margin: 0;
  font-size: 0.9em;
  color: #555;
}

.workout-details span {
  position: absolute;
  top: 20px;
  right: 20px;
  cursor: pointer;
  background: #f1f1f1;
  padding: 6px;
  border-radius: 50%;
  color: #333;
}

/* new workout form */
label, input {
  display: block;
}

input {
  padding: 10px;
  margin-top: 10px;
  margin-bottom: 20px;
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-sizing: border-box;
}

form button {
  background: var(--primary);
  border: 0;
  color: #fff;
  padding: 10px;
  font-family: "Poppins";
  border-radius: 4px;
  cursor: pointer;
}

div.error {
  padding: 10px;
  background: #ffefef;
  border: 1px solid var(--error);
  color: var(--error);
  border-radius: 4px;
  margin: 20px 0;
}

input.error {
  border: 1px solid var(--error);
}

/* navbar */
nav {
  display: flex;
  align-items: center;
}

nav a {
  margin-left: 10px;
}

/* auth forms */
form.signup, form.login {
  max-width: 400px;
  margin: 40px auto;
  padding: 20px;
  background: #fff;
  border-radius: 4px;
}

#10 – Making a useSignup Hook

In this MERN auth lesson, you’ll create a custom, reusable React hook that we can use to sign new users up to the application.

在 hooks 資料夾裡面建立 useSignup.js 檔案
修改 useSignup.js 檔案
修改 Signup.js 檔案，useSignup
測試 Sign up 表單能否正常運作

// frontend/src/hooks/useSignup.js
import { useState } from 'react'
import { useAuthContext } from './useAuthContext'

export const useSignup = () => {
  const [error, setError] = useState(null)
  const [isLoading, setIsLoading] = useState(null)
  const { dispatch } = useAuthContext()

  const signup = async (email, password) => {
    setIsLoading(true)
    setError(null)

    const response = await fetch('/api/user/signup', {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({email, password})
    })
    const json = await response.json()

    if (!response.ok) {
      setIsLoading(false)
      setError(json.error)
    }
    if (response.ok) {
      // save the user to local storage
      localStorage.setItem('user', JSON.stringify(json))

      // update the auth context
      dispatch({type: 'LOGIN', payload: json})

      setIsLoading(false)
    }
  }

  return { signup, isLoading, error}
}

// frontend/src/pages/Signup.js
import { useState } from 'react'
import { useSignup } from '../hooks/useSignup'

const Signup = () => {
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')
  const {signup, error, isLoading} = useSignup()

  const handleSubmit = async (e) => {
    e.preventDefault()

    await signup(email, password)
  }

  return (
    
      Sign up

      Email:
       setEmail(e.target.value)}
      value={email}
      />
      Password:
       setPassword(e.target.value)}
      value={password}
      />
      
      
      {error && {error}}
    
  )
}

export default Signup

#11 – Making a useLogout Hook

In this MERN auth tutorial, we’ll make a custom useLogout hook to log users out of the application.

在 hooks 資料夾裡面建立 useLogout.js 檔案
修改 useLogout.js 檔案
修改 Navbar.js 檔案
修改 index.css 檔案
測試 Log out 能否正確刪除 Local Storage 資料
console 檢視狀態

// frontend/src/hooks/useLogout.js
import { useAuthContext } from './useAuthContext'

export const useLogout = () => {
  const { dispatch } = useAuthContext()

  const logout = () => {
    // remove user from storage
    localStorage.removeItem('user')

    // dispatch logout action
    dispatch({type: 'LOGOUT'})
  }

  return {logout}
}

// frontend/src/components/Navbar.js
import { Link } from "react-router-dom"
import { useLogout } from '../hooks/useLogout'

const Navbar = () => {
  const { logout } = useLogout()

  const handleClick = () => {
    logout()
  }

  return (
    
      
        
          Workout Buddy
        
        
          
            
          
          
            Login
            Signup
          
        
      
    
  )
}

export default Navbar

// frontend/src/index.css
/* google font */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;800&family=VT323&display=swap');

/* layout */
:root {
  --primary: #1aac83;
  --error: #e7195a;
}
body {
  background: #f1f1f1;
  margin: 0;
  font-family: "Poppins";
}
header {
  background: #fff;
}
header .container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
header a {
  color: #333;
  text-decoration: none;
}
.pages{
  max-width: 1400px;
  padding: 20px;
  margin: 0 auto;
}

/* homepage */
.home {
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: 100px;
}

.workout-details {
  background: #fff;
  border-radius: 4px;
  margin: 20px auto;
  padding: 20px;
  position: relative;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.05);
}

.workout-details h4 {
  margin: 0 0 10px 0;
  font-size: 1.2em;
  color: var(--primary);
}

.workout-details p {
  margin: 0;
  font-size: 0.9em;
  color: #555;
}

.workout-details span {
  position: absolute;
  top: 20px;
  right: 20px;
  cursor: pointer;
  background: #f1f1f1;
  padding: 6px;
  border-radius: 50%;
  color: #333;
}

/* new workout form */
label, input {
  display: block;
}

input {
  padding: 10px;
  margin-top: 10px;
  margin-bottom: 20px;
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-sizing: border-box;
}

form button {
  background: var(--primary);
  border: 0;
  color: #fff;
  padding: 10px;
  font-family: "Poppins";
  border-radius: 4px;
  cursor: pointer;
}

div.error {
  padding: 10px;
  background: #ffefef;
  border: 1px solid var(--error);
  color: var(--error);
  border-radius: 4px;
  margin: 20px 0;
}

input.error {
  border: 1px solid var(--error);
}

/* navbar */
nav {
  display: flex;
  align-items: center;
}

nav a {
  margin-left: 10px;
}

nav button {
  background: #fff;
  color: var(--primary);
  border: 2px solid var(--primary);
  padding: 6px 10px;
  border-radius: 4px;
  font-family: "Poppins";
  cursor: pointer;
  font-size: 1em;
}

/* auth forms */
form.signup, form.login {
  max-width: 400px;
  margin: 40px auto;
  padding: 20px;
  background: #fff;
  border-radius: 4px;
}

#12 – Making a useLogin Hook

In this MERN auth tutorial, we’ll make a custom useLogin hook to log users in to the application.

在 hooks 資料夾裡面建立 useLogin.js 檔案
修改 useLogin.js 檔案，複製 useSignup.js 程式碼做修改
修改 Login.js 檔案
註冊好帳號，測試登入帳號
講解 Local Storage、Token、Refresh

// frontend/src/hooks/useLogin.js
import { useState } from 'react'
import { useAuthContext } from './useAuthContext'

export const useLogin = () => {
  const [error, setError] = useState(null)
  const [isLoading, setIsLoading] = useState(null)
  const { dispatch } = useAuthContext()

  const login = async (email, password) => {
    setIsLoading(true)
    setError(null)

    const response = await fetch('/api/user/login', {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({email, password})
    })
    const json = await response.json()

    if (!response.ok) {
      setIsLoading(false)
      setError(json.error)
    }
    if (response.ok) {
      // save the user to local storage
      localStorage.setItem('user', JSON.stringify(json))

      // update the auth context
      dispatch({type: 'LOGIN', payload: json})

      setIsLoading(false)
    }
  }

  return { login, isLoading, error}
}

// frontend/src/pages/Login.js
import { useState } from 'react'
import { useLogin } from '../hooks/useLogin'

const Login = () => {
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')
  const {login, error, isLoading} = useLogin()

  const handleSubmit = async (e) => {
    e.preventDefault()

    await login(email, password)
  }

  return (
    
      Log in

      Email:
       setEmail(e.target.value)}
      value={email}
      />
      Password:
       setPassword(e.target.value)}
      value={password}
      />
      
      
      {error && {error}}
    
  )
}

export default Login

#13 – Setting the Initial Auth Status

修改 Navbar.js 檔案，匯入 useAuthContext
測試登入表單確認功能是否正常
重整頁面後會回到登入頁面
修改 AuthContext.js 檔案，useEffect
重整頁面後仍會保持在登入狀態
測試登出、登入功能是否正常

// frontend/src/components/Navbar.js
import { Link } from "react-router-dom"
import { useLogout } from '../hooks/useLogout'
import { useAuthContext } from "../hooks/useAuthContext"

const Navbar = () => {
  const { logout } = useLogout()
  const { user } = useAuthContext()

  const handleClick = () => {
    logout()
  }

  return (
    
      
        
          Workout Buddy
        
        
          {user && (
            
              {user.email}
              
            
          )}
          {!user && (
            
              Login
              Signup
            
          )}
        
      
    
  )
}

export default Navbar

// frontend/src/context/AuthContext.js
import { createContext, useReducer, useEffect } from 'react'

export const AuthContext = createContext()

export const authReducer = (state, action) => {
  switch (action.type) {
    case 'LOGIN':
      return { user: action.payload }
    case 'LOGOUT':
      return { user: null}
    default:
      return state
  }
}

export const AuthContextProvider = ({ children }) => {
  const [state, dispatch] = useReducer(authReducer, {
    user: null
  })

  useEffect(() => {
    const user = JSON.parse(localStorage.getItem('user'))

    if (user) {
      dispatch({ type: 'LOGIN', payload: user })
    }
  }, [])

  console.log('AuthContext State: ', state)

  return (
    
      { children }
    
  )
}

#14 – Protecting API Routes

In this MERN auth tutorial, you’ll learn how to protect certain API routes from unauthenticated users.

在 backend 資料夾建立 middleware 資料夾
在 middleware 資料夾裡面建立 requireAuth.js 檔案
查看 workouts.js 檔案
修改 requireAuth.js 檔案
修改 workouts.js 檔案，requireAuth
使用 API 測試工具 Postman
http://localhost:4000/api/workouts/，GET 方法
Auth > Bearer > Bearer Token
http://localhost:4000/api/user/login，POST 方法
取得 token 資料

// backend/middleware/requireAuth.js
const jwt = require('jsonwebtoken')
const User = require('../models/userModel')

const requireAuth = async (req, res, next) => {

  // verify authentication
  const { authorization } = req.headers

  if (!authorization) {
    return res.status(401).json({error: 'Authorization token required'})
  }

  const token = authorization.split(' ')[1]

  try {
    const {_id} = jwt.verify(token, process.env.SECRET)

    req.user = await User.findOne({ _id }).select('_id')
    next()

  } catch (error) {
    console.log(error);
    res.status(401).json({error: 'Request is not authorized'})
  }

}

module.exports = requireAuth

// backend/routes/workouts.js
const express = require('express')
const {
  createWorkout,
  getWorkouts,
  getWorkout,
  deleteWorkout,
  updateWorkout
} = require('../controllers/workoutController')
const requireAuth = require('../middleware/requireAuth')

const router = express.Router()

// require auth for all workout routes
router.use(requireAuth)

// GET all workouts
router.get('/', getWorkouts)

// GET a single workout
router.get('/:id', getWorkout)

// POST a new workout
router.post('/', createWorkout)

// DELETE a workout
router.delete('/:id', deleteWorkout)

// UPDATE a workout
router.patch('/:id', updateWorkout)

module.exports = router

#15 – Making Authorized Requests

需要調整的有三個地方，Home.js、WorkoutForm.js、WorkoutDetails.js 檔案
修改 Home.js 檔案
修改 WorkoutForm.js 檔案
修改 WorkoutDetails.js 檔案
使用 Add a New Workout 測試功能是否正常
登入帳號才能新增、刪除 Workout

// frontend/src/pages/Home.js
import { useEffect } from 'react'
import { useWorkoutsContext } from '../hooks/useWorkoutsContext'
import { useAuthContext } from '../hooks/useAuthContext'

// components
import WorkoutDetails from '../components/WorkoutDetails'
import WorkoutForm from '../components/WorkoutForm'

const Home = () => {
  const {workouts, dispatch} = useWorkoutsContext()
  const {user} = useAuthContext()
  
  useEffect(() => {
    const fetchWorkouts = async () => {
      const response = await fetch('/api/workouts', {
        headers: {
          'Authorization': `Bearer ${user.token}`
        }
      })
      const json = await response.json()

      if (response.ok) {
        dispatch({type: 'SET_WORKOUTS', payload: json})
      }
    }

    if (user) {
      fetchWorkouts()
    }
  }, [dispatch, user])
  
  return (
    
      
        {workouts && workouts.map((workout) => {
          return 
        })}
      
      
    
  )
}

export default Home

// frontend/src/components/WorkoutForm.js
import { useState } from "react"
import { useWorkoutsContext } from "../hooks/useWorkoutsContext"
import { useAuthContext } from "../hooks/useAuthContext"

const WorkoutForm = () => {
  const { dispatch } = useWorkoutsContext()
  const { user } = useAuthContext()

  const [title, setTitle] = useState('')
  const [load, setLoad] = useState('')
  const [reps, setReps] = useState('')
  const [error, setError] = useState(null)
  const [emptyFields, setEmptyFields] = useState([])

  const handleSubmit = async (e) => {
    e.preventDefault()

    if (!user) {
      setError('You must be logged in')
      return
    }

    const workout = {title, load, reps}

    const response = await fetch('/api/workouts', {
      method: 'POST',
      body: JSON.stringify(workout),
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${user.token}`
      }
    })
    const json = await response.json()

    if (!response.ok) {
      setError(json.error)
      setEmptyFields(json.emptyFields)
    }
    if (response.ok) {
      setTitle('')
      setLoad('')
      setReps('')
      setError(null)
      setEmptyFields([])
      console.log('new workout added', json);
      dispatch({type: 'CREATE_WORKOUT', payload: json})
    }
  }

  return (
    
      Add a New Workout

      Exercise Title:
       setTitle(e.target.value)}
        value={title}
        className={emptyFields.includes('title') ? 'error' : ''}
      />

      Load (in kg):
       setLoad(e.target.value)}
        value={load}
        className={emptyFields.includes('load') ? 'error' : ''}
      />

      Reps:
       setReps(e.target.value)}
        value={reps}
        className={emptyFields.includes('reps') ? 'error' : ''}
      />

      
      {error && {error}}
    
  )
}

export default WorkoutForm

// frontend/src/components/WorkoutDetails.js
import { useWorkoutsContext } from '../hooks/useWorkoutsContext'
import { useAuthContext } from '../hooks/useAuthContext'

// date fns
import formatDistanceToNow from 'date-fns/formatDistanceToNow'

const WorkoutDetails = ({ workout }) => {
  const { dispatch } = useWorkoutsContext()
  const { user } = useAuthContext()

  const handleClick = async () => {
    if (!user) {
      return
    }
    const response = await fetch('/api/workouts/' + workout._id, {
      method: 'DELETE',
      headers: {
        'Authorization': `Bearer ${user.token}`
      }
    })
    const json = await response.json()

    if (response.ok) {
      dispatch({type: 'DELETE_WORKOUT', payload: json})
    }
  }

  return (
    
      {workout.title}
      Load (kg): {workout.load}
      Reps: {workout.reps}
      {formatDistanceToNow(new Date(workout.createdAt), { addSuffix: true })}
      delete
    
  )
}

export default WorkoutDetails

#16 – Protecting React Routes

In this MERN auth tutorial we’ll protect some of the React routes from users that are not authenticated.

修改 App.js 檔案，匯入 Navigate、useAuthContext
修改 index.css 檔案

// frontend/src/App.js
import { BrowserRouter , Routes, Route, Navigate } from 'react-router-dom'
import { useAuthContext } from './hooks/useAuthContext'

// pages & components
import Home from './pages/Home'
import Login from './pages/Login';
import Signup from './pages/Signup';
import Navbar from './components/Navbar'

function App() {
  const { user } = useAuthContext()

  return (
    
        
          
          
            
               : } 
              />
               : } 
              />
               : } 
              />
            
          
        
    
  );
}

export default App;

// frontend/src/index.css
/* google font */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;800&family=VT323&display=swap');

/* layout */
:root {
  --primary: #1aac83;
  --error: #e7195a;
}
body {
  background: #f1f1f1;
  margin: 0;
  font-family: "Poppins";
}
header {
  background: #fff;
}
header .container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
header a {
  color: #333;
  text-decoration: none;
}
.pages{
  max-width: 1400px;
  padding: 20px;
  margin: 0 auto;
}

/* homepage */
.home {
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: 100px;
}

.workout-details {
  background: #fff;
  border-radius: 4px;
  margin: 20px auto;
  padding: 20px;
  position: relative;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.05);
}

.workout-details h4 {
  margin: 0 0 10px 0;
  font-size: 1.2em;
  color: var(--primary);
}

.workout-details p {
  margin: 0;
  font-size: 0.9em;
  color: #555;
}

.workout-details span {
  position: absolute;
  top: 20px;
  right: 20px;
  cursor: pointer;
  background: #f1f1f1;
  padding: 6px;
  border-radius: 50%;
  color: #333;
}

/* new workout form */
label, input {
  display: block;
}

input {
  padding: 10px;
  margin-top: 10px;
  margin-bottom: 20px;
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-sizing: border-box;
}

form button {
  background: var(--primary);
  border: 0;
  color: #fff;
  padding: 10px;
  font-family: "Poppins";
  border-radius: 4px;
  cursor: pointer;
}

div.error {
  padding: 10px;
  background: #ffefef;
  border: 1px solid var(--error);
  color: var(--error);
  border-radius: 4px;
  margin: 20px 0;
}

input.error {
  border: 1px solid var(--error);
}

/* navbar */
nav {
  display: flex;
  align-items: center;
}

nav a {
  margin-left: 10px;
}

nav button {
  background: #fff;
  color: var(--primary);
  border: 2px solid var(--primary);
  padding: 6px 10px;
  border-radius: 4px;
  font-family: "Poppins";
  cursor: pointer;
  font-size: 1em;
  margin-left: 10px;
}

/* auth forms */
form.signup, form.login {
  max-width: 400px;
  margin: 40px auto;
  padding: 20px;
  background: #fff;
  border-radius: 4px;
}

#17 – Assigning Workouts to Users

刪除所有的 Workouts
修改 workoutModel.js 檔案，user_id
修改 workoutController.js 檔案，user_id
增加 Workout 內容
目前還是會在不同帳號看到相同內容
分別在不同帳號增加 Workout 內容
使用 API 測試工具 Postman，GET 方法
http://localhost:4000/api/workouts/
必須加上 Bearer
可以看到 Response 的 user_id 的差異
修改 workoutController.js，get all workouts 加入 user_id
登入不同的帳號確認 Workout 內容
問題: 會短暫看到其他人的 Workout 內容
clear global workouts state
修改 useLogout.js 檔案，匯入 useWorkoutsContext

// backend/models/workoutModel.js
const mongoose = require('mongoose')

const Schema =  mongoose.Schema

const workoutSchema = new Schema({
  title: {
    type:String,
    required: true
  },
  reps: {
    type: Number,
    required: true
  },
  load: {
    type: Number,
    required: true
  },
  user_id: {
    type: String,
    required: true
  }
}, { timestamps: true })

module.exports = mongoose.model('Workout', workoutSchema)

// backend/controllers/workoutController.js
const Workout = require('../models/workoutModel')
const mongoose = require('mongoose')

// get all workouts
const getWorkouts = async (req, res) => {
  const user_id = req.user._id

  const workouts = await Workout.find({ user_id }).sort({createdAt: -1})

  res.status(200).json(workouts)
}


// get a single workout
const getWorkout = async (req, res) => {
  const { id } = req.params

  if (!mongoose.Types.ObjectId.isValid(id)) {
    return res.status(404).json({error: 'No such workout'})
  }

  const workout = await Workout.findById(id)

  if (!workout) {
    return res.status(404).json({error: 'No such workout'})
  }

  res.status(200).json(workout)
}


// create new workout
const createWorkout = async (req, res) => {
  const { title, load, reps } = req.body

  let emptyFields = []

  if(!title) {
    emptyFields.push('title')
  }
  if(!load) {
    emptyFields.push('load')
  }
  if(!reps) {
    emptyFields.push('reps')
  }
  if(emptyFields.length > 0) {
    return res.status(400).json({ error: 'Please fill in all fields', emptyFields })
  }

  // add doc to db
  try {
    const user_id = req.user._id
    const workout = await Workout.create({title, load, reps, user_id})
    res.status(200).json(workout)
  } catch (error) {
    res.status(400).json({ error: error.message })
  }
}

// delete a workout
const deleteWorkout = async (req, res) => {
  const { id } = req.params

  if (!mongoose.Types.ObjectId.isValid(id)) {
    return res.status(404).json({error: 'No such workout'})
  }

  const workout = await Workout.findOneAndDelete({_id: id})

  if (!workout) {
    return res.status(404).json({error: 'No such workout'})
  }

  res.status(200).json(workout)
}

// update a workout
const updateWorkout = async (req, res) => {
  const { id } = req.params

  if (!mongoose.Types.ObjectId.isValid(id)) {
    return res.status(404).json({error: 'No such workout'})
  }

  const workout = await Workout.findOneAndUpdate({_id: id}, {
    ...req.body
  })

  if (!workout) {
    return res.status(404).json({error: 'No such workout'})
  }

  res.status(200).json(workout)
}


module.exports = {
  getWorkouts,
  getWorkout,
  createWorkout,
  deleteWorkout,
  updateWorkout
}

// frontend/src/hooks/useLogout.js
import { useAuthContext } from './useAuthContext'
import { useWorkoutsContext } from './useWorkoutsContext'

export const useLogout = () => {
  const { dispatch } = useAuthContext()
  const { dispatch: workoutsDispatch } = useWorkoutsContext()

  const logout = () => {
    // remove user from storage
    localStorage.removeItem('user')

    // dispatch logout action
    dispatch({type: 'LOGOUT'})
    workoutsDispatch({type: 'SET_WORKOUTS', payload: null})
  }

  return {logout}
}

MERN Stack Tutorial

gee.hsu — Sat, 22 Jun 2024 04:57:04 +0000

Learning From Youtube Channel: Net Ninja
Video: MERN Stack Tutorial
Thank you.

#1 – What is the MERN Stack?

Learn how to create a web app using the MERN stack (MongoDB, Express, React & Node.js).

MERN Stack

Mongo、Express、React、Node.js
講解 Front-end (browser) 和 Back-end (server) 關係
介紹製作的專案，這個課程不介紹 Auth 功能

Before You Start

Node.js、MongoDB、React 相關知識

安裝 node.js

Node.js – 安裝長期穩定版本
查詢 Node.js 版本 – node -v

課程檔案資源

Course Files

#2 – Express App Setup

In this MERN tutorial we’ll set up our initial Express app to power the backend api.

MERN Stack

建立 mern stack 專案資料夾
在 mern stack 資料夾裡面建立 backend 資料夾
也可以命名為 server 資料夾
在 backend 資料夾裡面建立 server.js 檔案
建立 package.json 檔案
使用終端機移動到 backend 資料夾 – cd backend
npm init -y 快速建立 package.json 檔案
安裝 express 套件 – npm install express
修改 server.js 檔案
使用終端機執行 server – node server.js
因為需要不斷重新執行 server 所以需要使用 nodemon 套件幫助網頁開發
安裝 nodemon 套件 – npm install -g nodemon
執行 server – nodemon server.js
可避免需要一直不斷重新啟動伺服器的動作
修改 package.json 檔案 – 新增 scripts 指令
執行 npm run dev 運作 server
修改 server.js 檔案，新增 routes
建立 .env 檔案，儲存環境變數
有需要上傳到 Github 可建立 .gitignore 檔案忽略文件
安裝 dotenv 套件 – npm install dotenv
修改 server.js 檔案，使用 dotenv
執行指令 npm run dev
介紹 API 測試工具 – Postman
http://localhost:4000/，GET 方法、建立 MERN app Collection
修改 server.js 檔案，middleware

// backend/server.js
require('dotenv').config()

const express = require('express')

// express app
const app = express()

// middleware
app.use((req, res, next) => {
  console.log(req.path, req.method)
  next()
})

// routes
app.get('/', (req, res) => {
  res.json({mssg: 'Welcome to the app'})
})

// listen for requrests
app.listen(process.env.PORT, () => {
  console.log('listening on port', process.env.PORT);
})

// package.json
{
  "name": "backend",
  "version": "1.0.0",
  "description": "",
  "main": "server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node server.js",
    "dev": "nodemon server.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "dotenv": "^16.4.5",
    "express": "^4.19.2"
  }
}

// .env
PORT=4000

#3 – Express Router & API Routes

In this MERN tutorial we’ll create all of the workout routes we need for the api and test them out using POSTMAN.

API Endpoints

GET	/workouts	Gets all the workout documents
POST	/workouts	Creates a new workout document
GET	/workouts/:id	Gets a single workout document
DELETE	/workouts/:id	Deletes a single workout
PATCH	/workouts/:id	Updates a single workout

在 backend 資料夾裡面建立 routes 資料夾
在 routes 資料夾裡面建立 workouts.js 檔案
修改 workouts.js 檔案
修改 server.js 檔案，workoutRoutes
使用 API 測試工具 – POSTMAN
也可以使用其他 API 測試工具

// backend/routes/workouts.js
const express = require('express')

const router = express.Router()

// GET all workouts
router.get('/', (req, res) => {
  res.json({mssg: 'GET all workouts'})
})

// GET a single workout
router.get('/:id', (req, res) => {
  res.json({mssg: 'GET a single workout'})
})

// POST a new workout
router.post('/', (req, res) => {
  res.json({mssg: 'POST a new workout'})
})

// DELETE a workout
router.delete('/:id', (req, res) => {
  res.json({mssg: 'DELETE a workout'})
})

// UPDATE a workout
router.patch('/:id', (req, res) => {
  res.json({mssg: 'UPDATE a workout'})
})

module.exports = router

// server.js
require('dotenv').config()

const express = require('express')
const workoutRoutes = require('./routes/workouts')

// express app
const app = express()

// middleware
app.use(express.json())

app.use((req, res, next) => {
  console.log(req.path, req.method)
  next()
})

// routes
app.use('/api/workouts', workoutRoutes)

// listen for requests
app.listen(process.env.PORT, () => {
  console.log('listening on port', process.env.PORT)
})

#4 – MongoDB Altas & Mongoose

In this MERN tutorial we’ll set up a database using MongoDB Atlas, and then connect to it from our application using a package called Mongoose.

MongoDB Atlas
建立 Shared Cluster
Free Shared
Cloud Provider & Region
aws、地區可自行選擇
Cluster Name: MERNapp
SECURITY > Database Access
Username and Password
SECURITY > Network Access
DEPLOYMENT > Database > Connect
Connect to your application
Add your connection string into your application code 複製
修改 .env 檔案
安裝 mongoose 套件 – npm install mongoose
修改 server.js 檔案
執行 npm run dev

// .env
PORT=4000
MONGO_URI="connection string"

// server.js
require('dotenv').config()

const express = require('express')
const mongoose = require('mongoose')
const workoutRoutes = require('./routes/workouts')

// express app
const app = express()

// middleware
app.use(express.json())

app.use((req, res, next) => {
  console.log(req.path, req.method)
  next()
})

// routes
app.use('/api/workouts', workoutRoutes)

// connect to db
mongoose.connect(process.env.MONGO_URI)
  .then(() => {
    // listen for requests
    app.listen(process.env.PORT, () => {
      console.log('connected to db & listening on port', process.env.PORT)
    })
  })
  .catch((error) => {
    console.log(error)
  })

#5 – Models & Schemas

In this MERN tutorial you’ll create a new model & schema for the dtabase collection we’ll be using (workouts).

建立 models 資料夾
在 models 資料夾裡面建立 workoutModel.js 檔案
修改 workoutModel.js 檔案
修改 workouts.js 檔案
打開終端機查看 server.js 是否正常執行
使用 API 測試工具 Postman
localhost:4000/api/workouts/、POST 方法
Body > raw > JSON
講解物件少了一個屬性會產生錯誤
使用 MongoDB Atlas
DEPLOYMENT > Database > Browse Collections
查看是否有正確儲存到線上資料庫

// backend/models/workoutModel.js
const mongoose = require('mongoose')

const Schema =  mongoose.Schema

const workoutSchema = new Schema({
  title: {
    type:String,
    required: true
  },
  reps: {
    type: Number,
    required: true
  },
  load: {
    type: Number,
    required: true
  }
}, { timestamps: true })

module.exports = mongoose.model('Workout', workoutSchema)

// routes/workouts.js
const express = require('express')
const Workout = require('../models/workoutModel')

const router = express.Router()

// GET all workouts
router.get('/', (req, res) => {
  res.json({mssg: 'GET all workouts'})
})

// GET a single workout
router.get('/:id', (req, res) => {
  res.json({mssg: 'GET a single workout'})
})

// POST a new workout
router.post('/', async (req, res) => {
  const { title, load, reps } = req.body

  try {
    const workout = await Workout.create({title, load, reps})
    res.status(200).json(workout)
  } catch (error) {
    res.status(400).json({ error: error.message })
  }
})

// DELETE a workout
router.delete('/:id', (req, res) => {
  res.json({mssg: 'DELETE a workout'})
})

// UPDATE a workout
router.patch('/:id', (req, res) => {
  res.json({mssg: 'UPDATE a workout'})
})

module.exports = router

// Body > raw > JSON
{
  "title": "Situps",
  "load": 0,
  "reps": 50
}

#6 – Controllers (part 1)

In this MERN tutorial we’ll make some controller functions for the workout routes.

在 backend 資料夾裡面建立 controllers 資料夾
在 controllers 資料夾裡面建立 workoutController.js 檔案
修改 workouts.js 檔案
修改 workoutController.js 檔案
使用 API 測試工具 Postman 測試
localhost:4000/api/workouts/，POST 方法
新增資料內容
Body > raw > JSON
複製剛建立好的資料庫資料的id
使用 API 測試工具
http://localhost:4000/api/workouts/，GET 方法
使用 API 測試工具取得特定資料
http://localhost:4000/api/workouts/666ffbd9a0facf510722c94c，GET 方法
http://localhost:4000/api/workouts/43423，GET 方法
修改 workoutController.js 檔案，mongoose
再次使用 API 測試工具測試

// backend/controllers/workoutController.js
const Workout = require('../models/workoutModel')
const mongoose = require('mongoose')

// get all workouts
const getWorkouts = async (req, res) => {
  const workouts = await Workout.find({}).sort({createdAt: -1})

  res.status(200).json(workouts)
}


// get a single workout
const getWorkout = async (req, res) => {
  const { id } = req.params

  if (!mongoose.Types.ObjectId.isValid(id)) {
    return res.status(404).json({error: 'No such workout'})
  }

  const workout = await Workout.findById(id)

  if (!workout) {
    return res.status(404).json({error: 'No such workout'})
  }

  res.status(200).json(workout)
}


// create new workout
const createWorkout = async (req, res) => {
  const { title, load, reps } = req.body

  // add doc to db
  try {
    const workout = await Workout.create({title, load, reps})
    res.status(200).json(workout)
  } catch (error) {
    res.status(400).json({ error: error.message })
  }
}

// delete a workout


// update a workout


module.exports = {
  getWorkouts,
  getWorkout,
  createWorkout
}

// backend/workouts.js
const express = require('express')
const {
  createWorkout,
  getWorkouts,
  getWorkout
} = require('../controllers/workoutController')

const router = express.Router()

// GET all workouts
router.get('/', getWorkouts)

// GET a single workout
router.get('/:id', getWorkout)

// POST a new workout
router.post('/', createWorkout)

// DELETE a workout
router.delete('/:id', (req, res) => {
  res.json({mssg: 'DELETE a workout'})
})

// UPDATE a workout
router.patch('/:id', (req, res) => {
  res.json({mssg: 'UPDATE a workout'})
})

module.exports = router

// Body > raw > JSON
{
  "title": "Bench press",
  "load": 20,
  "reps": 40
}

#7 – Controllers (part 2)

In this MERN auth tutorial we’ll finish off the controller functions that we started in the last lesson.

修改 workoutController.js 檔案，delete、update
修改 workouts.js 檔案
使用 API 測試工具 Postman，PATCH 方法
取得其中一筆資料 id
http://localhost:4000/api/workouts/666ffbd9a0facf510722c94c，PATCH 方法
Body > raw > JSON
使用 API 測試工具，GET 方法
查看資料是否有修改成功
使用 API 測試工具 Postman，DELETE 方法
取得其中一筆要刪除資料的 id
http://localhost:4000/api/workouts/666ffbd9a0facf510722c94c，DELETE 方法
使用 API 測試工具，GET 方法
查看資料是否有刪除成功

// backend/controllers/workoutController.js
const Workout = require('../models/workoutModel')
const mongoose = require('mongoose')

// get all workouts
const getWorkouts = async (req, res) => {
  const workouts = await Workout.find({}).sort({createdAt: -1})

  res.status(200).json(workouts)
}


// get a single workout
const getWorkout = async (req, res) => {
  const { id } = req.params

  if (!mongoose.Types.ObjectId.isValid(id)) {
    return res.status(404).json({error: 'No such workout'})
  }

  const workout = await Workout.findById(id)

  if (!workout) {
    return res.status(404).json({error: 'No such workout'})
  }

  res.status(200).json(workout)
}


// create new workout
const createWorkout = async (req, res) => {
  const { title, load, reps } = req.body

  // add doc to db
  try {
    const workout = await Workout.create({title, load, reps})
    res.status(200).json(workout)
  } catch (error) {
    res.status(400).json({ error: error.message })
  }
}

// delete a workout
const deleteWorkout = async (req, res) => {
  const { id } = req.params

  if (!mongoose.Types.ObjectId.isValid(id)) {
    return res.status(404).json({error: 'No such workout'})
  }

  const workout = await Workout.findOneAndDelete({_id: id})

  if (!workout) {
    return res.status(404).json({error: 'No such workout'})
  }

  res.status(200).json(workout)
}

// update a workout
const updateWorkout = async (req, res) => {
  const { id } = req.params

  if (!mongoose.Types.ObjectId.isValid(id)) {
    return res.status(404).json({error: 'No such workout'})
  }

  const workout = await Workout.findOneAndUpdate({_id: id}, {
    ...req.body
  })

  if (!workout) {
    return res.status(404).json({error: 'No such workout'})
  }

  res.status(200).json(workout)
}


module.exports = {
  getWorkouts,
  getWorkout,
  createWorkout,
  deleteWorkout,
  updateWorkout
}

// backend/routes/workouts.js
const express = require('express')
const {
  createWorkout,
  getWorkouts,
  getWorkout,
  deleteWorkout,
  updateWorkout
} = require('../controllers/workoutController')

const router = express.Router()

// GET all workouts
router.get('/', getWorkouts)

// GET a single workout
router.get('/:id', getWorkout)

// POST a new workout
router.post('/', createWorkout)

// DELETE a workout
router.delete('/:id', deleteWorkout)

// UPDATE a workout
router.patch('/:id', updateWorkout)

module.exports = router

// Body > raw > JSON
{
  "reps": 50
}

#8 – Making a React App

In this MERN tutorial, we’ll start our React application and set up a homepage route.

終止後端 server 運行
在 mern stack 專案下建立 React App
npx create-react-app frontend
刪除 App.css、App.test.js、logo.svg、reportWebVitals.js、setupTests.js 檔案
修改 index.js 檔案
修改 App.js 檔案
安裝 react router 套件
移動到 frontend 資料夾位置
npm install react-router-dom
修改 App.js 檔案，匯入 react-router-dom
在 src 資料夾裡面建立 pages 資料夾
在 pages 資料夾裡面建立 Home.js 檔案
修改 Home.js 檔案
修改 App.js 檔案
打開終端機執行指令 – npm start
http://localhost:3000/
在 src 資料夾裡面建立 components 資料夾
在 components 資料夾裡面建立 Navbar.js 檔案
修改 Navbar.js 檔案
修改 App.js 檔案，匯入 Navbar
修改 index.css 檔案
檢查網頁畫面是否正常

//  frontend/src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  
    
  
)

// frontend/src/App.js
import { BrowserRouter, Routes, Route } from 'react-router-dom'

// pages & components
import Home from './pages/Home'
import Navbar from './components/Navbar'

function App() {

  return (
    
      
        
        
          
            } 
            />
          
        
      
    
  );
}

export default App;

// forntend/src/pages/Home.js

const Home = () => {

  return (
    
      Home
    
  )
}

export default Home

// frontend/src/components/Navbar.js
import { Link } from 'react-router-dom'

const Navbar = () => {

  return (
    
      
        
          Workout Buddy
        
      
    
  )
}

export default Navbar

// frontend/src/index.css
/* google font */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;800&family=VT323&display=swap');

/* layout */
:root {
  --primary: #1aac83;
  --error: #e7195a;
}
body {
  background: #f1f1f1;
  margin: 0;
  font-family: "Poppins";
}
header {
  background: #fff;
}
header .container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
header a {
  color: #333;
  text-decoration: none;
}
.pages{
  max-width: 1400px;
  padding: 20px;
  margin: 0 auto;
}

#9 – Fetching Data

In this MERN stack tutorial we’ll make a request to the backend api to fetch workouts data and output it in the React template.

修改 Home.js 檔案
運行後端 server
移動到 backend 資料夾
終端機指令運行 npm run dev
查看 Google Console，有 Cors 錯誤
修改 package.json 檔案，新增 proxy 屬性、值
修改 Home.js 檔案
前端終端機重新運行
在 components 資料夾裡面建立 WorkoutDetails.js 檔案
修改 Home.js 檔案
修改 WorkoutDetails.js 檔案
注意: 需加上 return 才不會出現錯誤
修改 index.css 檔案

// frontend/src/pages/Home.js
import { useEffect, useState } from 'react'

// components
import WorkoutDetails from '../components/WorkoutDetails'

const Home = () => {
  const [workouts, setWorkouts] = useState(null)
  
  useEffect(() => {
    const fetchWorkouts = async () => {
      const response = await fetch('/api/workouts')
      const json = await response.json()

      if (response.ok) {
        setWorkouts(json)
      }
    }

    fetchWorkouts()
  }, [])
  
  return (
    
      
        {workouts && workouts.map((workout) => {
          return 
        })}
      
    
  )
}

export default Home

// frontend/package.json
{
  "proxy": "http://localhost:4000/",
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-router-dom": "^6.23.1",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

// frontend/src/components/WorkoutDetails.js
const WorkoutDetails = ({ workout }) => {
  return (
    
      {workout.title}
      Load (kg): {workout.load}
      Reps: {workout.reps}
      {workout.createdAt}
    
  )
}

export default WorkoutDetails

// frontend/src/index.css
/* google font */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;800&family=VT323&display=swap');

/* layout */
:root {
  --primary: #1aac83;
  --error: #e7195a;
}
body {
  background: #f1f1f1;
  margin: 0;
  font-family: "Poppins";
}
header {
  background: #fff;
}
header .container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
header a {
  color: #333;
  text-decoration: none;
}
.pages{
  max-width: 1400px;
  padding: 20px;
  margin: 0 auto;
}

/* homepage */
.home {
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: 100px;
}

.workout-details {
  background: #fff;
  border-radius: 4px;
  margin: 20px auto;
  padding: 20px;
  position: relative;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.05);
}

.workout-details h4 {
  margin: 0 0 10px 0;
  font-size: 1.2em;
  color: var(--primary);
}

.workout-details p {
  margin: 0;
  font-size: 0.9em;
  color: #555;
}

.workout-details span {
  position: absolute;
  top: 20px;
  right: 20px;
  cursor: pointer;
  background: #f1f1f1;
  padding: 6px;
  border-radius: 50%;
  color: #333;
}

#10 – New Workout Form

In this lesson we’ll make a form to add new workouts.

在 components 資料夾裡面建立 WorkoutForm.js 檔案
修改 WorkoutForm.js 檔案
查看後端 server.js 檔案，routes
修改 WorkoutForm.js 檔案，response
查看後端 workoutController.js 檔案
修改 WorkoutForm.js 檔案，error
修改 Home.js 檔案
修改 WorkoutForm.js 檔案
在網頁測試增加功能，資料不完整與完整的差別
修改 index.css 檔案
在網頁測試增加功能，樣式修改後的變化

// forntend/src/components/WorkoutForm.js
import { useState } from "react"

const WorkoutForm = () => {
  const [title, setTitle] = useState('')
  const [load, setLoad] = useState('')
  const [reps, setReps] = useState('')
  const [error, setError] = useState(null)

  const handleSubmit = async (e) => {
    e.preventDefault()

    const workout = {title, load, reps}

    const response = await fetch('/api/workouts', {
      method: 'POST',
      body: JSON.stringify(workout),
      headers: {
        'Content-Type': 'application/json'
      }
    })
    const json = await response.json()

    if (!response.ok) {
      setError(json.error)
    }
    if (response.ok) {
      setTitle('')
      setLoad('')
      setReps('')
      setError(null)
      console.log('new workout added', json);
    }
  }

  return (
    
      Add a New Workout

      Exercise Title:
       setTitle(e.target.value)}
        value={title}
      />

      Load (in kg):
       setLoad(e.target.value)}
        value={load}
      />

      Reps:
       setReps(e.target.value)}
        value={reps}
      />

      
      {error && {error}}
    
  )
}

export default WorkoutForm

// frontend/src/pages/Home.js
import { useEffect, useState } from 'react'

// components
import WorkoutDetails from '../components/WorkoutDetails'
import WorkoutForm from '../components/WorkoutForm'

const Home = () => {
  const [workouts, setWorkouts] = useState(null)
  
  useEffect(() => {
    const fetchWorkouts = async () => {
      const response = await fetch('/api/workouts')
      const json = await response.json()

      if (response.ok) {
        setWorkouts(json)
      }
    }

    fetchWorkouts()
  }, [])
  
  return (
    
      
        {workouts && workouts.map((workout) => {
          return 
        })}
      
      
    
  )
}

export default Home

// frontend/src/index.css
/* google font */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;800&family=VT323&display=swap');

/* layout */
:root {
  --primary: #1aac83;
  --error: #e7195a;
}
body {
  background: #f1f1f1;
  margin: 0;
  font-family: "Poppins";
}
header {
  background: #fff;
}
header .container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
header a {
  color: #333;
  text-decoration: none;
}
.pages{
  max-width: 1400px;
  padding: 20px;
  margin: 0 auto;
}

/* homepage */
.home {
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: 100px;
}

.workout-details {
  background: #fff;
  border-radius: 4px;
  margin: 20px auto;
  padding: 20px;
  position: relative;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.05);
}

.workout-details h4 {
  margin: 0 0 10px 0;
  font-size: 1.2em;
  color: var(--primary);
}

.workout-details p {
  margin: 0;
  font-size: 0.9em;
  color: #555;
}

.workout-details span {
  position: absolute;
  top: 20px;
  right: 20px;
  cursor: pointer;
  background: #f1f1f1;
  padding: 6px;
  border-radius: 50%;
  color: #333;
}

/* new workout form */
label, input {
  display: block;
}

input {
  padding: 10px;
  margin-top: 10px;
  margin-bottom: 20px;
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-sizing: border-box;
}

form button {
  background: var(--primary);
  border: 0;
  color: #fff;
  padding: 10px;
  font-family: "Poppins";
  border-radius: 4px;
  cursor: pointer;
}

div.error {
  padding: 10px;
  background: #ffefef;
  border: 1px solid var(--error);
  color: var(--error);
  border-radius: 4px;
  margin: 20px 0;
}

#11 – Adding React Context

In this MERN tutorial we’ll create a React Context to provide some global workouts state to the entire React application

在 src 資料夾裡面建立 context 資料夾
在 context 資料夾裡面建立 WorkoutContext.js 檔案
修改 WorkoutContext.js 檔案
修改 index.js 檔案
修改 WorkoutContext.js 檔案
在 src 資料夾裡面建立 hooks 資料夾
在 hooks 資料夾裡面建立 useWorkoutsContext.js 檔案
修改 useWorkoutsContext.js 檔案
講解 Home.js 檔案
講解 WorkoutContext.js 檔案
修改 Home.js 檔案，匯入 useWorkoutsContext、移除 useState
修改 WorkoutForm.js 檔案

// frontend/src/context/WorkoutContext.js
import { createContext, useReducer } from 'react'

export const WorkoutsContext = createContext()

export const workoutsReducer = (state, action) => {
  switch (action.type) {
    case 'SET_WORKOUTS':
      return {
        workouts: action.payload
      }
    case 'CREATE_WORKOUT':
      return {
        workouts: [action.payload, ...state.workouts]
      }
    default:
      return state
  }
}

export const WorkoutsContextProvider = ({ children }) => {
  const [state, dispatch] = useReducer(workoutsReducer, {
    workouts: null
  })



  return (
    
      { children }
    
  )
}

// frontend/src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { WorkoutsContextProvider } from './context/WorkoutContext';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  
    
      
    
  
);

// frontend/src/hooks/useWorkoutsContext.js
import { WorkoutsContext } from "../context/WorkoutContext";
import { useContext } from 'react'

export const useWorkoutsContext = () => {
  const context = useContext(WorkoutsContext)

  if (!context) {
    throw Error('useWorkoutsContext must be used inside an WorkoutsContextProvider')
  }

  return context
}

// frontend/src/pages/Home.js
import { useEffect } from 'react'
import { useWorkoutsContext } from '../hooks/useWorkoutsContext'

// components
import WorkoutDetails from '../components/WorkoutDetails'
import WorkoutForm from '../components/WorkoutForm'

const Home = () => {
  const {workouts, dispatch} = useWorkoutsContext()
  
  useEffect(() => {
    const fetchWorkouts = async () => {
      const response = await fetch('/api/workouts')
      const json = await response.json()

      if (response.ok) {
        dispatch({type: 'SET_WORKOUTS', payload: json})
      }
    }

    fetchWorkouts()
  }, [dispatch])
  
  return (
    
      
        {workouts && workouts.map((workout) => {
          return 
        })}
      
      
    
  )
}

export default Home

// frontend/src/components/WorkoutForm.js
import { useState } from "react"
import { useWorkoutsContext } from "../hooks/useWorkoutsContext"

const WorkoutForm = () => {
  const { dispatch } = useWorkoutsContext()

  const [title, setTitle] = useState('')
  const [load, setLoad] = useState('')
  const [reps, setReps] = useState('')
  const [error, setError] = useState(null)

  const handleSubmit = async (e) => {
    e.preventDefault()

    const workout = {title, load, reps}

    const response = await fetch('/api/workouts', {
      method: 'POST',
      body: JSON.stringify(workout),
      headers: {
        'Content-Type': 'application/json'
      }
    })
    const json = await response.json()

    if (!response.ok) {
      setError(json.error)
    }
    if (response.ok) {
      setTitle('')
      setLoad('')
      setReps('')
      setError(null)
      console.log('new workout added', json);
      dispatch({type: 'CREATE_WORKOUT', payload: json})
    }
  }

  return (
    
      Add a New Workout

      Exercise Title:
       setTitle(e.target.value)}
        value={title}
      />

      Load (in kg):
       setLoad(e.target.value)}
        value={load}
      />

      Reps:
       setReps(e.target.value)}
        value={reps}
      />

      
      {error && {error}}
    
  )
}

export default WorkoutForm

#12 – Deleting Data

修改 WorkoutDetails.js 檔案
修改 WorkoutContext.js 檔案

// frontend/src/components/WorkoutDetails.js
import { useWorkoutsContext } from '../hooks/useWorkoutsContext'

const WorkoutDetails = ({ workout }) => {
  const { dispatch } = useWorkoutsContext()

  const handleClick = async () => {
    const response = await fetch('/api/workouts/' + workout._id, {
      method: 'DELETE'
    })
    const json = await response.json()

    if (response.ok) {
      dispatch({type: 'DELETE_WORKOUT', payload: json})
    }
  }

  return (
    
      {workout.title}
      Load (kg): {workout.load}
      Reps: {workout.reps}
      {workout.createdAt}
      delete
    
  )
}

export default WorkoutDetails

// frontend/src/context/WorkoutContext.js
import { createContext, useReducer } from 'react'

export const WorkoutsContext = createContext()

export const workoutsReducer = (state, action) => {
  switch (action.type) {
    case 'SET_WORKOUTS':
      return {
        workouts: action.payload
      }
    case 'CREATE_WORKOUT':
      return {
        workouts: [action.payload, ...state.workouts]
      }
    case 'DELETE_WORKOUT':
      return {
        workouts: state.workouts.filter((w) => w._id !== action.payload._id)
      }
    default:
      return state
  }
}

export const WorkoutsContextProvider = ({ children }) => {
  const [state, dispatch] = useReducer(workoutsReducer, {
    workouts: null
  })

  return (
    
      { children }
    
  )
}

#13 – Handling Error Responses

講解後端 workoutController.js 檔案
講解後端 workoutModel.js 檔案
修改 workoutController.js 檔案
修改 WorkoutForm.js 檔案
修改 index.css 檔案

// backend/controllers/workoutController.js
const Workout = require('../models/workoutModel')
const mongoose = require('mongoose')

// get all workouts
const getWorkouts = async (req, res) => {
  const workouts = await Workout.find({}).sort({createdAt: -1})

  res.status(200).json(workouts)
}


// get a single workout
const getWorkout = async (req, res) => {
  const { id } = req.params

  if (!mongoose.Types.ObjectId.isValid(id)) {
    return res.status(404).json({error: 'No such workout'})
  }

  const workout = await Workout.findById(id)

  if (!workout) {
    return res.status(404).json({error: 'No such workout'})
  }

  res.status(200).json(workout)
}


// create new workout
const createWorkout = async (req, res) => {
  const { title, load, reps } = req.body

  let emptyFields = []

  if(!title) {
    emptyFields.push('title')
  }
  if(!load) {
    emptyFields.push('load')
  }
  if(!reps) {
    emptyFields.push('reps')
  }
  if(emptyFields.length > 0) {
    return res.status(400).json({ error: 'Please fill in all fields', emptyFields })
  }

  // add doc to db
  try {
    const workout = await Workout.create({title, load, reps})
    res.status(200).json(workout)
  } catch (error) {
    res.status(400).json({ error: error.message })
  }
}

// delete a workout
const deleteWorkout = async (req, res) => {
  const { id } = req.params

  if (!mongoose.Types.ObjectId.isValid(id)) {
    return res.status(404).json({error: 'No such workout'})
  }

  const workout = await Workout.findOneAndDelete({_id: id})

  if (!workout) {
    return res.status(404).json({error: 'No such workout'})
  }

  res.status(200).json(workout)
}

// update a workout
const updateWorkout = async (req, res) => {
  const { id } = req.params

  if (!mongoose.Types.ObjectId.isValid(id)) {
    return res.status(404).json({error: 'No such workout'})
  }

  const workout = await Workout.findOneAndUpdate({_id: id}, {
    ...req.body
  })

  if (!workout) {
    return res.status(404).json({error: 'No such workout'})
  }

  res.status(200).json(workout)
}


module.exports = {
  getWorkouts,
  getWorkout,
  createWorkout,
  deleteWorkout,
  updateWorkout
}

// frontend/src/components/WorkoutForm.js
import { useState } from "react"
import { useWorkoutsContext } from "../hooks/useWorkoutsContext"

const WorkoutForm = () => {
  const { dispatch } = useWorkoutsContext()

  const [title, setTitle] = useState('')
  const [load, setLoad] = useState('')
  const [reps, setReps] = useState('')
  const [error, setError] = useState(null)
  const [emptyFields, setEmptyFields] = useState([])

  const handleSubmit = async (e) => {
    e.preventDefault()

    const workout = {title, load, reps}

    const response = await fetch('/api/workouts', {
      method: 'POST',
      body: JSON.stringify(workout),
      headers: {
        'Content-Type': 'application/json'
      }
    })
    const json = await response.json()

    if (!response.ok) {
      setError(json.error)
      setEmptyFields(json.emptyFields)
    }
    if (response.ok) {
      setTitle('')
      setLoad('')
      setReps('')
      setError(null)
      setEmptyFields([])
      console.log('new workout added', json);
      dispatch({type: 'CREATE_WORKOUT', payload: json})
    }
  }

  return (
    
      Add a New Workout

      Exercise Title:
       setTitle(e.target.value)}
        value={title}
        className={emptyFields.includes('title') ? 'error' : ''}
      />

      Load (in kg):
       setLoad(e.target.value)}
        value={load}
        className={emptyFields.includes('load') ? 'error' : ''}
      />

      Reps:
       setReps(e.target.value)}
        value={reps}
        className={emptyFields.includes('reps') ? 'error' : ''}
      />

      
      {error && {error}}
    
  )
}

export default WorkoutForm

// frontend/src/index.css
/* google font */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;800&family=VT323&display=swap');

/* layout */
:root {
  --primary: #1aac83;
  --error: #e7195a;
}
body {
  background: #f1f1f1;
  margin: 0;
  font-family: "Poppins";
}
header {
  background: #fff;
}
header .container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
header a {
  color: #333;
  text-decoration: none;
}
.pages{
  max-width: 1400px;
  padding: 20px;
  margin: 0 auto;
}

/* homepage */
.home {
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: 100px;
}

.workout-details {
  background: #fff;
  border-radius: 4px;
  margin: 20px auto;
  padding: 20px;
  position: relative;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.05);
}

.workout-details h4 {
  margin: 0 0 10px 0;
  font-size: 1.2em;
  color: var(--primary);
}

.workout-details p {
  margin: 0;
  font-size: 0.9em;
  color: #555;
}

.workout-details span {
  position: absolute;
  top: 20px;
  right: 20px;
  cursor: pointer;
  background: #f1f1f1;
  padding: 6px;
  border-radius: 50%;
  color: #333;
}

/* new workout form */
label, input {
  display: block;
}

input {
  padding: 10px;
  margin-top: 10px;
  margin-bottom: 20px;
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-sizing: border-box;
}

form button {
  background: var(--primary);
  border: 0;
  color: #fff;
  padding: 10px;
  font-family: "Poppins";
  border-radius: 4px;
  cursor: pointer;
}

div.error {
  padding: 10px;
  background: #ffefef;
  border: 1px solid var(--error);
  color: var(--error);
  border-radius: 4px;
  margin: 20px 0;
}

input.error {
  border: 1px solid var(--error);
}

#14 – Finishing Touches

修改 index.html 檔案，匯入 Google Material Symbols & Icons
修改 WorkoutDetails.js 檔案
測試刪除按鈕是否能正常運作
使用、安裝 date-fns 套件
npm install date-fns
修改 WorkoutDetails.js 檔案
修改 Home.js 檔案 (Debug)，dispatch 之前已自行修正

// frontend/public/index.html


  
    
    
    
    
    
    
    
    
    
    
    React App

// frontend/src/components/WorkoutDetails.js
import { useWorkoutsContext } from '../hooks/useWorkoutsContext'

// date fns
import formatDistanceToNow from 'date-fns/formatDistanceToNow'

const WorkoutDetails = ({ workout }) => {
  const { dispatch } = useWorkoutsContext()

  const handleClick = async () => {
    const response = await fetch('/api/workouts/' + workout._id, {
      method: 'DELETE'
    })
    const json = await response.json()

    if (response.ok) {
      dispatch({type: 'DELETE_WORKOUT', payload: json})
    }
  }

  return (
    
      {workout.title}
      Load (kg): {workout.load}
      Reps: {workout.reps}
      {formatDistanceToNow(new Date(workout.createdAt), { addSuffix: true })}
      delete
    
  )
}

export default WorkoutDetails

Complete MongoDB Tutorial

gee.hsu — Wed, 04 Oct 2023 03:55:22 +0000

#1 – What is MongoDB?

In this series you’ll learn how to use MongoDB (a NoSQL database) from scratch. You’ll also learn how to integrate it into a simple Node.js API.

#2 – Installing MongoDB

Learn how to install MongoDB locally onto your computer.

#3 – Collections & Documents

#4 – Using MongoDB Compass

#5 – Using the MongoDB Shell

指令

show dbs
use database’s

使用其他終端機 – 指令

mongosh
cls
db
show collections
help
exit

#6 – Adding New Documents

指令

// insertOne
db.books.insertOne({title: "The Color of Magic", author: "Terry Pratchett", pages: 300, rating: 7, genres: ["fantasy", "magic"]})

// insertMany
db.books.insertMany([{title: "The Light Fantastic", author: "Terry Pratchett", pages: 250, rating: 6, genres: ["fantasy"]}, {title: "Dune", author: "Frank Herbert", pages: 500, rating: 10, genres: ["sci-fi", "dystopian"]}])

#7 – Finding Documents

指令

db.books.find()
db.books.find({author: “Terry Pratchett”})
db.books.find({author: “Terry Pratchett”, rating: 7})
db.books.find({author: “Brandon Sanderson”})
db.books.find({author: “Brandon Sanderson”}, {title: 1, author: 1})
db.books.find({}, {title: 1, author: 1})
db.books.find({_id: ObjectId(“650be28b103e76e586910c81”)})

#8 – Sorting & Limiting Data

指令

db.books.find().count()
db.books.find({ author: “Brandon Sanderson” }).count()
db.books.find().limit(3)
db.books.find().limit(3).count()
db.books.find().sort({ title: 1 })
db.books.find().sort({ title: -1 })
db.books.find().sort({ title: 1 }).limit(3)

#9 – Nested Documents

指令

// insertOne
db.books.insertOne({title: "The Way of Kings", author: "Brandon Sanderson", rating: 9, pages: 400, genres: ["fantasy"], reviews: [{name: "Yoshi", body: "Great book!!"}, {name: "mario", body: "so so"}]})

// insertMany
db.books.insertMany([{title: "The Light Fantastic", author: "Terry Pratchett", pages: 250, rating: 6, genres: ["fantasy", "magic"], reviews: [{name:"luigi", body: "it was pretty good"}, {name: "bowser", body: "loved it!!"}]}, {title: "The Name of the Wind", "author": "Patrick Rothfuss", page: 500, "rating": 10, genres: ["fantasy"], review: [{name: "peach", body: "one of my favs"}]}, {title: "The Color of Magic", "author": "Terry Pratchett", page: 350, "rating": 8, genres: ["fantasy", "magic"], review: [{name: "luigi", body: "it was ok"}, {name: "bowser", body: "really good book"}]}, {title: "1984", "author": "George Orwell", page: 300, "rating": 6, genres: ["sci-fi", "dystopian"], review: [{name: "peach", body: "not my cup of tea"}, {name: "mario", body: "meh"}]}])

#10 – Operators & Complex Queries

指令

db.books.find({rating: 7})
db.books.find({ rating: {$gt: 7}})
db.books.find({ rating: {$gt: 8}})
db.books.find({ rating: {$lte: 8}})
db.books.find({ rating: {$gte: 8}})
db.books.find({ rating: {$gt: 7}, author: “Patrick Rothfuss”})
db.books.find({$or: [{rating: 7}, {rating: 9}]})
db.books.find({$or: [{rating: 7}, {author: “Terry Pratchett”}]})
db.books.find({$or: [{pages: {$lt: 300}}, {pages: {$gt: 400}}]})

#11 – Using $in & $nin

指令

db.books.find({ rating: {$in: [7,8,9]}})
db.books.find({$or: [{rating: 7}, {rating: 8}, {rating: 9}]})
db.books.find({rating: {$nin: [7,8,9]}})
db.books.find({rating: {$nin: [7,8]}})

#12 – Querying Arrays

指令

db.books.find({genres: “fantasy”})
db.books.find({genres: “magic”})
db.books.find({genres: [“magic”]})
db.books.find({genres: [“fantasy”]})
db.books.find({genres: [“fantasy”, “magic”]})
db.books.find({genres: {$all: [“fantasy”, “sci-fi”]}})
db.books.find({“reviews.name”: “luigi”})

#13 – Deleting Documents

事先使用 MongoDB Compass EXPORT DATA 把資料匯出成JSON檔案。

指令

db.books.find()
db.books.deleteOne({_id: ObjectId(“650d22be248ed3d1c20642d0”)})
db.books.deleteMany({author: “Terry Pratchett”})

使用 MongoDB Compass ADD DATA 把檔案匯入。

#14 – Updating Documents

指令

db.books.updateOne({_id: ObjectId(“650d22be248ed3d1c20642cf”)}, {$set: {rating: 8, pages: 360}})
db.books.updateMany({author: “Terry Pratchett”}, {$set: {author: “Terry Pratchet”}})
db.books.updateOne({_id: ObjectId(“650d22be248ed3d1c20642d0”)}, {$inc: {pages: 2}})
db.books.updateOne({_id: ObjectId(“650d22be248ed3d1c20642d0”)}, {$inc: {pages: -2}})
db.books.updateOne({_id: ObjectId(“650d22be248ed3d1c20642d0”)}, {$pull: {genres: “fantasy”}})
db.books.updateOne({_id: ObjectId(“650d22be248ed3d1c20642d0”)}, {$push: {genres: “fantasy”}})
db.books.updateOne({_id: ObjectId(“650d22be248ed3d1c20642d0”)}, {$push: {genres: {$each: [“1″,”2”]}}})

#15 – MongoDB Drivers

指令 & 操作步驟

npm init
建立一個 app.js 檔案
npm install express –save
npm install -g nodemon
nodemon app
http://localhost:3000/books
新增終端 npm install mongodb –save

// app.js
const express = require('express')

// init app & middleware
const app = express()

app.listen(3000, () => {
  console.log('app listening on port 3000')
})

// routes
app.get('/books', (req, res) => {
  res.json({mssg: "welcome to the api"})
})

#16 – Connecting to MongoDB

操作步驟

建立一個 db.js 檔案
修改 app.js 檔案內容

// db.js
const { MongoClient } = require('mongodb')

let dbConnection

module.exports = {
  connectToDb: (cb) => {
    MongoClient.connect('mongodb://localhost:27017/bookstore')
      .then((client) => {
        dbConnection = client.db()
        return cb()
      })
      .catch(err => {
        console.log(err)
        return cb(err)
      })
  },
  getDb: () => dbConnection
}

// app.js
const express = require('express')
const { connectToDb, getDb } = require('./db')

// init app & middleware
const app = express()

// db connection
let db

connectToDb((err) => {
  if (!err) {
    app.listen(3000, () => {
      console.log('app listening on port 3000')
    })
    db = getDb()
  }
})

// routes
app.get('/books', (req, res) => {
  res.json({mssg: "welcome to the api"})
})

#17 – Cursors & Fetching Data

操作步驟

繼續修改 app.js 檔案內容

// app.js
const express = require('express')
const { connectToDb, getDb } = require('./db')

// init app & middleware
const app = express()

// db connection
let db

connectToDb((err) => {
  if (!err) {
    app.listen(3000, () => {
      console.log('app listening on port 3000')
    })
    db = getDb()
  }
})

// routes
app.get('/books', (req, res) => {
  let books = []

  db.collection('books')
    .find()
    .sort({ author: 1 })
    .forEach(book => books.push(book))
    .then(() => {
      res.status(200).json(books)
    })
    .catch(() => {
      res.status(500).json({error: 'Could not fetch the documents'})
    })
})

#18 – Finding Single Documents

操作步驟

繼續修改 app.js
使用 URL 測試是否能正常找到單一文件 http://localhost:3000/books/650d22be248ed3d1c20642cf
增加一些 ObjectId 布林判斷 app.js

// app.js - 1
const express = require('express')
const { ObjectId } = require('mongodb')
const { connectToDb, getDb } = require('./db')

// init app & middleware
const app = express()

// db connection
let db

connectToDb((err) => {
  if (!err) {
    app.listen(3000, () => {
      console.log('app listening on port 3000')
    })
    db = getDb()
  }
})

// routes
app.get('/books', (req, res) => {
  let books = []

  db.collection('books')
    .find()
    .sort({ author: 1 })
    .forEach(book => books.push(book))
    .then(() => {
      res.status(200).json(books)
    })
    .catch(() => {
      res.status(500).json({error: 'Could not fetch the documents'})
    })
})

app.get('/books/:id', (req, res) => {

  db.collection('books')
    .findOne({_id: new ObjectId(req.params.id)})
    .then(doc => {
      res.status(200).json(doc)
    })
    .catch(err => {
      res.status(500).json({error: 'Could not fetch the document'})
    })

})

// app.js -3
const express = require('express')
const { ObjectId } = require('mongodb')
const { connectToDb, getDb } = require('./db')

// init app & middleware
const app = express()

// db connection
let db

connectToDb((err) => {
  if (!err) {
    app.listen(3000, () => {
      console.log('app listening on port 3000')
    })
    db = getDb()
  }
})

// routes
app.get('/books', (req, res) => {
  let books = []

  db.collection('books')
    .find()
    .sort({ author: 1 })
    .forEach(book => books.push(book))
    .then(() => {
      res.status(200).json(books)
    })
    .catch(() => {
      res.status(500).json({error: 'Could not fetch the documents'})
    })
})

app.get('/books/:id', (req, res) => {

  if (ObjectId.isValid(req.params.id)) {
    db.collection('books')
    .findOne({_id: new ObjectId(req.params.id)})
    .then(doc => {
      res.status(200).json(doc)
    })
    .catch(err => {
      res.status(500).json({error: 'Could not fetch the document'})
    })
  } else {
    res.status(500).json({error: 'Not a valid doc id'})
  }
  
})

#19 – Using POSTMAN

Request

http://localhost:3000/books
http://localhost:3000/books/650d1421248ed3d1c20642cc

#20 – Handling POST Request

操作步驟

在 app.js 新增 post 相關程式碼
使用 POSTMAN 請求 POST 方法
http://localhost:3000/books
Body > raw 貼上準備好的資料內容然後送出
可以看到 Response Body 呈現的訊息
點擊之前的 Get Collection – books 測試

// app.js
const express = require('express')
const { ObjectId } = require('mongodb')
const { connectToDb, getDb } = require('./db')

// init app & middleware
const app = express()
app.use(express.json())

// db connection
let db

connectToDb((err) => {
  if (!err) {
    app.listen(3000, () => {
      console.log('app listening on port 3000')
    })
    db = getDb()
  }
})

// routes
app.get('/books', (req, res) => {
  let books = []

  db.collection('books')
    .find()
    .sort({ author: 1 })
    .forEach(book => books.push(book))
    .then(() => {
      res.status(200).json(books)
    })
    .catch(() => {
      res.status(500).json({error: 'Could not fetch the documents'})
    })
})

app.get('/books/:id', (req, res) => {

  if (ObjectId.isValid(req.params.id)) {
    db.collection('books')
    .findOne({_id: new ObjectId(req.params.id)})
    .then(doc => {
      res.status(200).json(doc)
    })
    .catch(err => {
      res.status(500).json({error: 'Could not fetch the document'})
    })
  } else {
    res.status(500).json({error: 'Not a valid doc id'})
  }
  
})

app.post('/books', (req, res) => {
  const book = req.body

  db.collection('books')
    .insertOne(book)
    .then(result => {
      res.status(201).json(result)
    })
    .catch(err => {
      res.status(500).json({err: 'Could not create a new document'})
    })
})

// Body > raw JSON
{
  "title": "The Final Empire",
  "author": "Brandon Sanderson",
  "rating": 9,
  "pages": 420,
  "genres": [
    "fantasy",
    "magic"
  ],
  "reviews": [
    {
      "name": "Shaun",
      "body": "Couldn't put this book down."
    },
    {
      "name": "Chun-Li",
      "body": "Love it."
    }
  ]
}

#21 – Handling DELETE Requests

操作步驟

在 app.js 新增 delete 相關程式碼
使用 POSTMAN 請求 DELETE 方法
http://localhost:3000/books/650d22be248ed3d1c20642d0
送出後可以看到 Response Body 的訊息
點擊 Get 方法查看是否有刪除資料

// app.js
const express = require('express')
const { ObjectId } = require('mongodb')
const { connectToDb, getDb } = require('./db')

// init app & middleware
const app = express()
app.use(express.json())

// db connection
let db

connectToDb((err) => {
  if (!err) {
    app.listen(3000, () => {
      console.log('app listening on port 3000')
    })
    db = getDb()
  }
})

// routes
app.get('/books', (req, res) => {
  let books = []

  db.collection('books')
    .find()
    .sort({ author: 1 })
    .forEach(book => books.push(book))
    .then(() => {
      res.status(200).json(books)
    })
    .catch(() => {
      res.status(500).json({error: 'Could not fetch the documents'})
    })
})

app.get('/books/:id', (req, res) => {

  if (ObjectId.isValid(req.params.id)) {
    db.collection('books')
    .findOne({_id: new ObjectId(req.params.id)})
    .then(doc => {
      res.status(200).json(doc)
    })
    .catch(err => {
      res.status(500).json({error: 'Could not fetch the document'})
    })
  } else {
    res.status(500).json({error: 'Not a valid doc id'})
  }
  
})

app.post('/books', (req, res) => {
  const book = req.body

  db.collection('books')
    .insertOne(book)
    .then(result => {
      res.status(201).json(result)
    })
    .catch(err => {
      res.status(500).json({err: 'Could not create a new document'})
    })
})

app.delete('/books/:id', (req, res) => {

  if (ObjectId.isValid(req.params.id)) {
    db.collection('books')
    .deleteOne({_id: new ObjectId(req.params.id)})
    .then(result => {
      res.status(200).json(result)
    })
    .catch(err => {
      res.status(500).json({error: 'Could not delete the document'})
    })
  } else {
    res.status(500).json({error: 'Not a valid doc id'})
  }
})

#22 – PATCH Requests

操作步驟

在 app.js 新增 PATCH 相關程式碼
使用 POSTMAN 請求 PATCH 方法
因為出現錯誤，有重新 import bookstore.books 檔案
http://localhost:3000/books/650d1421248ed3d1c20642cc
Body > raw JSON 更新資料後送出會呈現 Body 訊息
使用 GET Collection 查看是否有正確更新

// app.js
const express = require('express')
const { ObjectId } = require('mongodb')
const { connectToDb, getDb } = require('./db')

// init app & middleware
const app = express()
app.use(express.json())

// db connection
let db

connectToDb((err) => {
  if (!err) {
    app.listen(3000, () => {
      console.log('app listening on port 3000')
    })
    db = getDb()
  }
})

// routes
app.get('/books', (req, res) => {
  let books = []

  db.collection('books')
    .find()
    .sort({ author: 1 })
    .forEach(book => books.push(book))
    .then(() => {
      res.status(200).json(books)
    })
    .catch(() => {
      res.status(500).json({error: 'Could not fetch the documents'})
    })
})

app.get('/books/:id', (req, res) => {

  if (ObjectId.isValid(req.params.id)) {
    db.collection('books')
    .findOne({_id: new ObjectId(req.params.id)})
    .then(doc => {
      res.status(200).json(doc)
    })
    .catch(err => {
      res.status(500).json({error: 'Could not fetch the document'})
    })
  } else {
    res.status(500).json({error: 'Not a valid doc id'})
  }
  
})

app.post('/books', (req, res) => {
  const book = req.body

  db.collection('books')
    .insertOne(book)
    .then(result => {
      res.status(201).json(result)
    })
    .catch(err => {
      res.status(500).json({err: 'Could not create a new document'})
    })
})

app.delete('/books/:id', (req, res) => {

  if (ObjectId.isValid(req.params.id)) {
    db.collection('books')
    .deleteOne({_id: new ObjectId(req.params.id)})
    .then(result => {
      res.status(200).json(result)
    })
    .catch(err => {
      res.status(500).json({error: 'Could not delete the document'})
    })
  } else {
    res.status(500).json({error: 'Not a valid doc id'})
  }
})

app.patch('/books/:id', (req, res) => {
  const updates = req.body

  if (ObjectId.isValid(req.params.id)) {
    db.collection('books')
    .updateOne({_id: new ObjectId(req.params.id)}, {$set: updates})
    .then(result => {
      res.status(200).json(result)
    })
    .catch(err => {
      res.status(500).json({error: 'Could not update the document'})
    })
  } else {
    res.status(500).json({error: 'Not a valid doc id'})
  }
})

Body > raw JSON
{
  "pages": 350,
  "rating": 8
}

#23 – Pagination

In this MongoDB tutorial I’ll explain how to implement pagination into your requests.

操作步驟

在 app.js 新增關於 pagination 程式碼
使用 POSTMAN 請求 GET 方法
以下兩種結果會相同
http://localhost:3000/books
http://localhost:3000/books?p=0
使用 http://localhost:3000/books?p=1
會忽略前面的資料
http://localhost:3000/books?p=2
因為沒有資料會出現空陣列

// app.js
const express = require('express')
const { ObjectId } = require('mongodb')
const { connectToDb, getDb } = require('./db')

// init app & middleware
const app = express()
app.use(express.json())

// db connection
let db

connectToDb((err) => {
  if (!err) {
    app.listen(3000, () => {
      console.log('app listening on port 3000')
    })
    db = getDb()
  }
})

// routes
app.get('/books', (req, res) => {
  // current page
  const page = req.query.p || 0
  const booksPerPage = 3

  let books = []

  db.collection('books')
    .find()
    .sort({ author: 1 })
    .skip(page * booksPerPage)
    .limit(booksPerPage)
    .forEach(book => books.push(book))
    .then(() => {
      res.status(200).json(books)
    })
    .catch(() => {
      res.status(500).json({error: 'Could not fetch the documents'})
    })
})

app.get('/books/:id', (req, res) => {

  if (ObjectId.isValid(req.params.id)) {
    db.collection('books')
    .findOne({_id: new ObjectId(req.params.id)})
    .then(doc => {
      res.status(200).json(doc)
    })
    .catch(err => {
      res.status(500).json({error: 'Could not fetch the document'})
    })
  } else {
    res.status(500).json({error: 'Not a valid doc id'})
  }
  
})

app.post('/books', (req, res) => {
  const book = req.body

  db.collection('books')
    .insertOne(book)
    .then(result => {
      res.status(201).json(result)
    })
    .catch(err => {
      res.status(500).json({err: 'Could not create a new document'})
    })
})

app.delete('/books/:id', (req, res) => {

  if (ObjectId.isValid(req.params.id)) {
    db.collection('books')
    .deleteOne({_id: new ObjectId(req.params.id)})
    .then(result => {
      res.status(200).json(result)
    })
    .catch(err => {
      res.status(500).json({error: 'Could not delete the document'})
    })
  } else {
    res.status(500).json({error: 'Not a valid doc id'})
  }
})

app.patch('/books/:id', (req, res) => {
  const updates = req.body

  if (ObjectId.isValid(req.params.id)) {
    db.collection('books')
    .updateOne({_id: new ObjectId(req.params.id)}, {$set: updates})
    .then(result => {
      res.status(200).json(result)
    })
    .catch(err => {
      res.status(500).json({error: 'Could not update the document'})
    })
  } else {
    res.status(500).json({error: 'Not a valid doc id'})
  }
})

#24 – Indexes

In this mongodb tutorial we’ll talk about indexes and see how to create them.

簡報

db.collection(“books”).find({“rating”: 10})

指令 & 操作步驟

使用終端機執行 mongosh
使用 bookstore 資料庫 use bookstore
db.books.find({rating: 8}).explain(‘executionStats’)
db.books.createIndex({ rating: 8 })
db.books.getIndexes()
db.books.dropIndex({rating: 8})
db.books.getIndexes()

#25 – MongoDB Atlas

In this mongodb tutorial you’ll learn how to use MongoDB Atlas, a Cloud Database service which allows you to easily set up a hosted database online.

操作步驟

註冊或登入 MongoDB
DEPLOYMENT > Database 選擇建立一個 Database
選擇 Shared 免費方案
aws > default 或者自行選擇 > Cluster Name 默認原本名稱 > 建立 Cluster
Security Quickstart 可以設定 Username 和 Password
設定好後可以到 Database Access 查看
Network Access > 新增一個 IP address > 在這裡選擇 ALLOW ACCESS FROM ANYWHERE 僅作測試使用，之後生產版本請勿選擇這個選項
到 Database Deployment 點擊 Connection > 選擇 Connect your application
Add your connection string into your application code
在 db.js 修改成指定的 connection string > 修改設定的 Username 和 Password
我們不需要修改這些 Request，我們仍然使用這些 Request 關於 localhost
Mongodb online 資料庫尚未有任何資料 > 可以 post 新的資料到線上資料庫 > Browse Collections

// db.js
const { MongoClient } = require('mongodb')

let dbConnection
let uri = '指定的 connection string'

module.exports = {
  connectToDb: (cb) => {
    MongoClient.connect(uri)
      .then((client) => {
        dbConnection = client.db()
        return cb()
      })
      .catch(err => {
        console.log(err)
        return cb(err)
      })
  },
  getDb: () => dbConnection
}

Build Web Apps With Vue JS 3 & Firebase (1)

gee.hsu — Wed, 16 Feb 2022 07:01:00 +0000

Learn Vue JS 3 & Firebase by creating & deploying dynamic web apps (including Authentication).
建立者: The Net Ninja (Shaun Pelling)

您會學到

Learn how to create Vue 3 applications from the ground-up
Get in-depth knowledge of Vue features like the Vue Router, Vue CLI, Options API, Composition API, Teleport etc
Get hands-on & in-depth experience using the latest Vue 3 features (such as the Composition API)
Learn how to use Firebase as a back-end to your Vue applications (as a database, authentication service, hosting etc)
Build & deploy 4 real-word web apps with Vue & Firebase
Learn how to implement an authentication system into your Vue js apps using Firebase Auth
Become a Vue 3 ninja!

第1節：Introduction & Setup

What is Vue?

Front-end, JavaScript / TypeScript framework
Used to create dynamic & data-driven websites (SPA’s)
Can also be used to create stand-alone widgets

Vue Widgets

Vue Websites

Vue is used to create a whole website with multiple pages & components
These websites are normally called Single Page Applications
All routing is done in the browser & not on the server

Typical non-Vue Websites

Typical non-Vue Website 01

Typical non-Vue Website 02

Typical non-Vue Website 03

Typical non-Vue Website 04

Typical non-Vue Website 05

Vue Websites

Vue Websites 01

Vue Websites 02

Vue Websites 03

Vue Websites 04

Vue Websites 05

Single Page Application (SPA)

Only a single HTML page sent (initially) to the browser
Vue intercepts subsequent requests and handles “page” changes in the browser by swapping what components are shown on the page
Results in a much faster and smoother website experience

New Features in Vue 3

Vue 3 New Features

The Composition API

Improves on reusablility, organization & readability
It does this by giving us a new setup( ) function

Multiple Root Elements

Can have many root elements side-by-side in a component

Teleport Component

Render content from one component in a different place in the DOM
Useful for things like modals

Suspense Component

Used to handle asynchronous components easily
Can provide fall-back content (e.g. a spinner) until data is loaded

TypeScript Support

Can now write Vue applications using TypeScript

More Changes

Multiple v-models for custom components
Improved Reactivity
Performance gains

What You Should Already Know

資源

Before You Start…

Understand the foundations of JavaScript
- functions, objects, arrays, etc
HTML & (some) CSS

Environment Setup

網頁編輯器：VSCode
擴充套件(Extensions)：Live Server、Vetur、Material Icon Theme

Course Files

資源

Vue Basics

How to use Vue (using the CDN)

資源

Vue Documentation

Vue CDN

使用以下版本

操作步驟

Hello, Vue :)

// app.js

console.log('hello, vue')

Creating a Vue App

// index.html




  
  
  
  Learning Vue
  


  Hello, Vue :)

  
    I am the template now

// app.js

const app = Vue.createApp({
  // data, functions
  // template: 'I am the template'
})

app.mount('#app')

Templates & Data

// index.html




  
  
  
  Learning Vue
  


  Hello, Vue :)

  
    {{ title }} - {{ author }} - {{ age }}

// app.js

const app = Vue.createApp({
  data() {
    return {
      title: 'The Final Empire',
      author: 'Brandon Sanderson',
      age: 45
    }
  }
})

app.mount('#app')

Methods & Click Events

// index.html




  
  
  
  Learning Vue
  


  Hello, Vue :)

  
    {{ title }} - {{ author }} - {{ age }}

    
    
    Change book title

// app.js

const app = Vue.createApp({
  data() {
    return {
      title: 'The Final Empire',
      author: 'Brandon Sanderson',
      age: 45
    }
  },
  methods: {
    changeTitle(title) {
      // this.title = 'Words of Randiance'
      this.title = title
    }
  }
})

app.mount('#app')

Conditional Rendering (條件渲染)

// index.html




  
  
  
  Learning Vue
  


  Hello, Vue :)

  
    
      {{ title }} - {{ author }} - {{ age }}
    

    

    currently showing books

// app.js

const app = Vue.createApp({
  data() {
    return {
      showBooks: true,
      title: 'The Final Empire',
      author: 'Brandon Sanderson',
      age: 45
    }
  },
  methods: {
    toggleShowBooks() {
      this.showBooks = !this.showBooks
    }
  }
})

app.mount('#app')

Other Mouse Events

// index.html




  
  
  
  Learning Vue
  
  


  Hello, Vue :)

  
    
      {{ title }} - {{ author }} - {{ age }}
    

    

    

    
    mouseover (enter)
    mouseleave
    double click
    position - {{ x }} {{ y }}

// app.js

const app = Vue.createApp({
  data() {
    return {
      showBooks: true,
      title: 'The Final Empire',
      author: 'Brandon Sanderson',
      age: 45,
      x: 0,
      y: 0
    }
  },
  methods: {
    toggleShowBooks() {
      this.showBooks = !this.showBooks
    },
    handleEvent(e, data) {
      console.log(e, e.type)
      if (data) {
        console.log(data)
      }
    },
    handleMousemove(e) {
      this.x = e.offsetX
      this.y = e.offsetY
    }
  }
})

app.mount('#app')

Outputting Lists (v-for)

// index.html




  
  
  
  Learning Vue
  
  


  Hello, Vue :)

  
    
      
        
          {{ book.title }}
          {{ book.author }}

// app.js

const app = Vue.createApp({
  data() {
    return {
      showBooks: true,
      books: [
        { title: 'name of the wind', author: 'patrick rothfuss'},
        { title: 'the way of kings', author: 'brandon sanderson'},
        { title: 'the final empire', author: 'brandon sanderson'},
      ]
    }
  },
  methods: {
    toggleShowBooks() {
      this.showBooks = !this.showBooks
    },
  }
})

app.mount('#app')

Attribute Binding

// index.html




  
  
  
  Learning Vue
  
  


  Hello, Vue :)

  
    
    

    
      
        
          
          {{ book.title }}
          {{ book.author }}

// app.js

const app = Vue.createApp({
  data() {
    return {
      url: 'http://www.thenetninja.co.uk/',
      showBooks: true,
      books: [
        { title: 'name of the wind', author: 'patrick rothfuss', img: 'assets/1.jpg'},
        { title: 'the way of kings', author: 'brandon sanderson', img: 'assets/2.jpg'},
        { title: 'the final empire', author: 'brandon sanderson', img: 'assets/3.jpg'},
      ]
    }
  },
  methods: {
    toggleShowBooks() {
      this.showBooks = !this.showBooks
    },
  }
})

app.mount('#app')

縮寫

v-on = @
v-bind = :

Dynamic Classes

資源

Free Flexbox Tutorial

// index.html




  
  
  
  Learning Vue
  
  


  Hello, Vue :)

  
    
    

    
      
        
          
          {{ book.title }}
          {{ book.author }}

// app.js

const app = Vue.createApp({
  data() {
    return {
      url: 'http://www.thenetninja.co.uk/',
      showBooks: true,
      books: [
        { title: 'name of the wind', author: 'patrick rothfuss', img: 'assets/1.jpg', isFav: true },
        { title: 'the way of kings', author: 'brandon sanderson', img: 'assets/2.jpg', isFav: false },
        { title: 'the final empire', author: 'brandon sanderson', img: 'assets/3.jpg', isFav: true },
      ]
    }
  },
  methods: {
    toggleShowBooks() {
      this.showBooks = !this.showBooks
    },
  }
})

app.mount('#app')

CHALLENGE – Add to Favs

// index.html




  
  
  
  Learning Vue
  
  


  Hello, Vue :)

  
    
    

    
      
        
          
          {{ book.title }}
          {{ book.author }}

// app.js

const app = Vue.createApp({
  data() {
    return {
      url: 'http://www.thenetninja.co.uk/',
      showBooks: true,
      books: [
        { title: 'name of the wind', author: 'patrick rothfuss', img: 'assets/1.jpg', isFav: true },
        { title: 'the way of kings', author: 'brandon sanderson', img: 'assets/2.jpg', isFav: false },
        { title: 'the final empire', author: 'brandon sanderson', img: 'assets/3.jpg', isFav: true },
      ]
    }
  },
  methods: {
    toggleShowBooks() {
      this.showBooks = !this.showBooks
    },
  }
})

app.mount('#app')

// Challenge - Add to Favs
// - attach a click event to each li tag (for each book)
// - when a user clicks an li, toggle the 'isFav' property of that book

SOLUTION – Add to Favs

// index.html




  
  
  
  Learning Vue
  
  


  Hello, Vue :)

  
    
    

    
      
        
          
          {{ book.title }}
          {{ book.author }}

// app.js

const app = Vue.createApp({
  data() {
    return {
      url: 'http://www.thenetninja.co.uk/',
      showBooks: true,
      books: [
        { title: 'name of the wind', author: 'patrick rothfuss', img: 'assets/1.jpg', isFav: true },
        { title: 'the way of kings', author: 'brandon sanderson', img: 'assets/2.jpg', isFav: false },
        { title: 'the final empire', author: 'brandon sanderson', img: 'assets/3.jpg', isFav: true },
      ]
    }
  },
  methods: {
    toggleShowBooks() {
      this.showBooks = !this.showBooks
    },
    toggleFav(book) {
      book.isFav = !book.isFav
    }
  }
})

app.mount('#app')

// Challenge - Add to Favs
// - attach a click event to each li tag (for each book)
// - when a user clicks an li, toggle the 'isFav' property of that book

Computes Properties

// index.html




  
  
  
  Learning Vue
  
  


  Hello, Vue :)

  
    
    

    
      
        
          
          {{ book.title }}
          {{ book.author }}

// app.js

const app = Vue.createApp({
  data() {
    return {
      url: 'http://www.thenetninja.co.uk/',
      showBooks: true,
      books: [
        { title: 'name of the wind', author: 'patrick rothfuss', img: 'assets/1.jpg', isFav: true },
        { title: 'the way of kings', author: 'brandon sanderson', img: 'assets/2.jpg', isFav: false },
        { title: 'the final empire', author: 'brandon sanderson', img: 'assets/3.jpg', isFav: true },
      ]
    }
  },
  methods: {
    toggleShowBooks() {
      this.showBooks = !this.showBooks
    },
    toggleFav(book) {
      book.isFav = !book.isFav
    }
  },
  computed: {
    filteredBooks() {
      return this.books.filter((book) => book.isFav)
    }
  }
})

app.mount('#app')

第3節：The Vue CLI (for Bigger Projects)

Why Use the Vue CLI?

Vue Websites

Use modern JavaScript features
Provides us with a live-reload dev server
Optimize our code for production

How to Use the Vue CLI

Node.js – 必要
Command line – 必要，Node.js command prompt、終端機、命令提示字元
Node.js 版本查詢 node -v
Vue CLI，npm install -g @vue/cli
移動到專案位置，cd 專案名稱位置
執行指令 vue create modal-project

關於舊版本

Vue CLI 的包名稱由 vue-cli 改成了@vue/cli。如果你已經全局安裝了舊版本的vue-cli(1.x 或2.x)，你需要先通過 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸載它。

Vue CLI 安裝連結

執行指令步驟 vue create modal-project

Manually select features
Check the features needed for your project:
- Choose Vue version
- Babel
Choose a version of Vue.js that you want to start the project with
- 3.x
Where do you prefer placing config for Babel, ESLint, etc.?
- In dedicated config files
Save this as a preset for future projects
- N

安裝完成後指令

cd 專案名稱
使用 code . 打開 VSCode 編輯器

New Project Walkthrough

Vue Files & Templates

打開 VSCode 終端機

執行指令：npm run serve

// App.vue

下載 GitHub Course Files 須知

安裝 node_modules
開啟 Terminal
執行指令 npm install

Template Refs (模板引用)

// App.vue

Multiple Components

App.vue – root component
- Header.vue
- Article.vue
  - Content.vue
  - Comments.vue
- Footer.vue

Terminology

Article.vue – parent component
- Content.vue, Comments.vue – child components
App.vue – parent component
- Header.vue, Article.vue, Footer.vue- child components

Component Tree，App.vue, Header.vue, Article.vue, Footer,vue, Content.vue, Comments.vue。

操作步驟

移除 Components 裡面的 HelloWorld.vue
在 Components 裡面新增 Modal.vue

// Modal.vue

// App.vue

Component Styles & Global Styles

Modal.vue style 設定方式

// Modal.vue - 2

global styles

新增 global.css 在 assets 資料夾裡面
設定進入點 main.js import 匯入 global.css 檔案
覆蓋 global.css 樣式，在 Modal.vue 修改樣式

// assets/global.css

body {
  margin: 0;
}
p {
  font-style: italic;
}

// src/main.js

import { createApp } from 'vue'
import App from './App.vue'
import './assets/global.css'

createApp(App).mount('#app')

// components/Modal.vue

Passing Data with Props (使用 Props 傳遞資料)

we do this by using what’s known as props in vue, and we can pass props from a parent component to a child component

為什麼我們要這樣做，兩個原因

more dynamic and more reusable(可重複使用的)
multiple components and they all use the same data

// App.vue - 1

// Modal.vue - 1

// App.vue - 2

// Modal.vue - 2

// App.vue - 3

// Modal.vue - 3

And this is how we pass data as props into components, which A makes them more reusable, B makes them customizable, and C allows us to have a single source of truth when it comes to data.

Emitting Custom Events

show / hide Modal

// App.vue

// Modal.vue

Click Event Modifiers

open modal

@click.right=”toggleModal”
@click.shift=”toggleModal”
@click.alt=”toggleModal”

close modal

@click.self=”closeModal”

// App.vue

// Modal.vue

Slots(插槽)

// App.vue - 1

// Modal.vue - 1

// App.vue - 2

// Modal.vue - 2

// App.vue - 3

// Modal.vue - 3

CHALLENGE – Reusing Components

// App.vue

// Modal.vue

Using Teleport (new features 新功能)

Vue.js 3 – Teleport

class, id 都可以使用 e.g. – .modals、#modals

// index.html



  
    
    
    
    
    <%= htmlWebpackPlugin.options.title %>

// App.vue

第4節：PROJECT BUILD – Reaction Timer

Project 1 Preview & Setup

Reaction Timer Project

App.vue
- Block.vue
- Results.vue

操作步驟

打開終端機
移動到要安裝位置
輸入指令：vue create reaction-timer
Please pick a preset: Manually select features
Check the features needed for your project: Choose Vue version, Babel
Choose a version of Vue.js that you want to start the project with 3.x
Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config file
Save this as a preset for future projects? N
移動到檔案位置：cd reaction-timer
打開 VSCode：code .
移除 HelloWorld.vue 檔案
修改 App.vue 檔案、移除不用的內容
在 components 資料夾裡新增 Block.vue、Results.vue 檔案
打開終端機、執行指令：npm run serve

// App.vue

參考文件

Vue Router Guide – Different History modes

Starting a New Game

// App.vue

快速建立