Day13 vue.js实现简单的注册功能ep1

延续昨日
今天先把注册的页面也做成和登入一样
让想坏坏的人不能透过router进入

再来就是让注册页能够成功新增资料
首先我们要做的是记得在终端机下指令
json-server --watch db.json
这样资料库才能使用
再来打开postman之前没有介绍postman 今天来介绍一下
(参考文章 https://tw.alphacamp.co/blog/postman-api-tutorial-for-beginners)
简单来讲postman的其中一个功能是可以让我们快速的测试这个api的各项功能(get put delete post等等)
那我们就来测试看看我们的api
如果你们下的指令跟我一样你们的api网址应该也是长这样http://localhost:3000
在来接上参数users
http://localhost:3000/users
可以看到

再来把选项get改成post(因为我们要新增资料上去)
然後在body 输入要赋予的值将资料型别改成json格式然後按下send

重新get後发现嘟嘟噜成功新增资料了马上回网页测试

(不过名字变成大写了之後来研究一下为什麽变成大写)
再来就是把注册给搞定
这是我们目前的注册页(记得要先清除session才可以看到不然网页会判定你已经登入)
p.s.点选网页右键检查 application session 点选clear all 就可以清除不然关掉网站重开也可以XD

这是我们注册页的code

在data里面新增资料(这些资料被注册的v-model绑住所以接的到值)
export default {

data(){
  return{

    showPassword:false,
    useraccount:'',
    userpassword:'',
    username:'',
    useremail:'',
    
  }
},

在function 里面新增一个叫signup的function

async signup(){
let result = await axios.post("http://localhost:3000/users",{
id:this.useraccount,
password:this.userpassword,
email:this.useremail,
username:this.username
})
console.warn(result);
}

再来就是回到网页测试并看一下console.log