<h2>註冊</h2>
<form action="" class="form1">
  帳號:
  <input type="text" class="acc1">
  <br>
  密碼:
  <input type="text" class="pass1">
  <br>
  <input type="button" value="送出" class="send">
</form>
<br>
<h2>登入</h2>
<form action="" class="form2">
  帳號:
  <input type="text" class="acc2">
  <br>
  密碼:
  <input type="text" class="pass2">
  <br>
  <input type="button" value="登入" class="login">
</form>
//註冊功能 傳送post資料做驗證
//DOM
const account = document.querySelector(".acc1");
const password = document.querySelector(".pass1");
const form = document.querySelector(".form1");
const send = document.querySelector(".send");
//登入dom
const accLogin = document.querySelector(".acc2");
const passLogin  = document.querySelector(".pass2");
const formLogin  = document.querySelector(".form2");
const login = document.querySelector(".login");

//使用者資料
let usersList = []

const errMess = function(acc, pass) {
   //做錯誤判斷
  if(acc.value === "" || pass.value === "") {
    alert('輸入資料不可為空,請重新輸入');
    form.reset();
    return true;
  } else {
    return false;
  }
}

//把axios post請求用函式封裝起來等待click事件發生後,才觸發post請求驗證
const requestData = function () {
  //做錯誤判斷
  if(errMess(account, password)) return;

  // if(errMess(account, password)) return;
  // if(account.value === "" || password.value === "") {
  //   alert('輸入資料不可為空,請重新輸入');
  //   form.reset();
  //   return;
  // } 
  //擷取使用者註冊資料
  let obj = {};
  obj.email = account.value;
  obj.password = password.value;
  usersList.push(obj);
  //axios送出post請求
  axios
    .post("https://hexschool-tutorial.herokuapp.com/api/signup", obj)
    .then((response) => {
      if(response.data.message === "帳號註冊成功") {
        console.log(response.config.data)
        alert("恭喜帳號註冊成功");
      } else {
        alert("帳號註冊失敗");
      }
      form.reset();
    })
    .catch((err) => {
      console.err(err);
    });
};

//把axios post請求用函式封裝起來等待click login事件發生後,才觸發post請求驗證是否有資料
const loginRequest = function () {
  //預作錯誤判斷
  if(errMess(accLogin, passLogin)) return;
  //取的使用者輸入的資料
  let user = {};
  user.email = accLogin.value;
  user.password = passLogin.value;
  
  axios.post('https://hexschool-tutorial.herokuapp.com/api/signin', user)
  .then(res => {
    if(res.data.message === '登入成功') {
      console.log(res.config.data);
      alert('登入成功');
    } else {
      alert('登入失敗');
    }
    formLogin.reset()
  })
  .catch((err) => {
      console.err(err);
    });
}

//當使用者在欄位輸入資料時,按下送出後
//才發生註冊資料-請求(evevt-click)
send.addEventListener('click', (e) => {
  e.preventDefault();
  //obj要作為post的參數送出去驗證
  requestData();
})


//觸發登入-click
login.addEventListener('click', (e) => {
  e.preventDefault();
  //obj要作為post的參數送出去驗證是否存在在資料庫
  loginRequest();
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/axios/1.1.3/axios.min.js