---
tags: 六角學院_JavaScript 必修篇 - 前端修練全攻略
---
範例_註冊登入
===

<iframe height="300" style="width: 100%;" scrolling="no" title="HackMD_註冊登入_3" src="https://codepen.io/jason60810/embed/WNjqZEQ?default-tab=html%2Cresult&editable=true" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/jason60810/pen/WNjqZEQ">
HackMD_註冊登入_3</a> by jason (<a href="https://codepen.io/jason60810">@jason60810</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

0.如何內嵌codepen
---
1. 點擊在 Fork 旁邊的 Embed
2. 點選 Inframe ， 把code 貼到 HackMD 裡

1.註冊功能
---
### HTML
1. 新增 `h1{註冊和登入帳號}`
2. 新增 `span{帳號}+input:text.account+br`
3. 新增 `span{密碼}+input:text.password+br`
4. 新增 `input:b.sendSignUp` ，補上 `value="註冊"`
5. 新增 `input:b.sendLogIn` ，補上 `value="登入"`
6. 載入 axios ，`<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>`

==補充：[Emmet語法](https://pjchender.blogspot.com/2016/07/emmet.html)==

<h1>註冊和登入帳號</h1>
<span>帳號</span><input type="text" class="account" /><br />
<span>密碼</span><input type="text" class="password" /><br />
<input type="button" value="註冊" class="sendSignUp" />
<input type="button" value="登入" class="sendLogIn" />
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

### JS
1. 創建 `sendSignUp` `sendLogIn` `account` `password` 存入 DOM
2. 將註冊變成一個 `function`
1. 如果輸入欄是空的，提醒使用者輸入
2. 創建物件 `obj`
3. 新增屬性(物件.屬性)，並將輸入欄的值( DOM.value )賦予進去
4. axios post 的[寫法](https://github.com/axios/axios#:~:text=Performing%20a%20POST%20request)
1. api 文件[參考](https://github.com/hexschool/nodejs_ajax_tutorial#%E8%A8%BB%E5%86%8A)
2. 如果回傳(`response.data.message`)的是"帳號註冊成功"，提示註冊成功
3. 否則提示註冊失敗

const sendSignUp = document.querySelector(".sendSignUp");
const sendLogIn = document.querySelector(".sendLogIn");
const account = document.querySelector(".account");
const password = document.querySelector(".password");

// 註冊功能
sendSignUp.addEventListener("click", function (e) {
  callSignUp();
});

function callSignUp() {
  if (account.value === "" || password.value === "") {
    alert("還敢不填資料啊冰鳥");
    return;
  }
  let obj = {};
  obj.email = account.value;
  obj.password = password.value;
  axios
    .post("https://hexschool-tutorial.herokuapp.com/api/signup", obj)
    .then(function (response) {
      if (response.data.message === "帳號註冊成功") {
        alert("註冊註起來");
      } else {
        alert("哭啊註冊失敗");
      }
    })
    .catch(function (error) {
      console.log(error);
    });
}

### 小試身手(可編輯，重新整理頁面可以還原)

<iframe height="300" style="width: 100%;" scrolling="no" title="HackMD_註冊登入_1" src="https://codepen.io/jason60810/embed/ExmBwqe?default-tab=html%2Cresult&editable=true" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/jason60810/pen/ExmBwqe">
HackMD_註冊登入_1</a> by jason (<a href="https://codepen.io/jason60810">@jason60810</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

2.登入功能
---
### JS
1. 將登入變成一個 `function`
1. 如果輸入欄是空的，提醒使用者輸入
2. 創建物件 `obj`
3. 新增屬性(物件.屬性)，並將輸入欄的值( DOM.value )賦予進去
4. axios post 的[寫法](https://github.com/axios/axios#:~:text=Performing%20a%20POST%20request)
1. api 文件[參考](https://github.com/hexschool/nodejs_ajax_tutorial#%E7%99%BB%E5%85%A5)
2. 如果回傳(`response.data.message`)的是"登入成功"，提示登入成功
3. 否則提示登入失敗

// 登入功能
sendLogIn.addEventListener("click", function (e) {
  callLogIn();
});

function callLogIn() {
  if (account.value === "" || password.value === "") {
    alert("還敢不填資料啊冰鳥");
    return;
  }
  let obj = {};
  obj.email = account.value;
  obj.password = password.value;
  axios
    .post("https://hexschool-tutorial.herokuapp.com/api/signin", obj)
    .then(function (response) {
      if (response.data.message == "登入成功") {
        alert("登登登登");
      } else {
        alert("登不進去QQ");
      }
    })
    .catch(function (error) {
      console.log(error);
    });
}

### 小試身手(可編輯，重新整理頁面可以還原)

<iframe height="300" style="width: 100%;" scrolling="no" title="HackMD_註冊登入_3" src="https://codepen.io/jason60810/embed/WNjqZEQ?default-tab=html%2Cresult&editable=true" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/jason60810/pen/WNjqZEQ">
HackMD_註冊登入_3</a> by jason (<a href="https://codepen.io/jason60810">@jason60810</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>