API tools faq
paste
asimryu

vue.js api

asimryu
Oct 18th, 2020 (edited)
222
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 8.75 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>ToDo</title>
  7.     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
  8.     <script src="https://unpkg.com/vue/dist/vue.js"></script>
  9.    
  10. </head>
  11. <body>
  12.     <div class="container" id="app">
  13.         <div class="jumbotron text-center">
  14.             <h1>To-do with PHP, API and Vue.JS</h1>
  15.             <hr>
  16.             <div class="col-sm-8 offset-sm-3" id="login-form-block">
  17.                 <form class="form-inline" onsubmit="return false">
  18.                     <div class="form-group">
  19.                         <input type="text" class="form-control" id="userid" placeholder="[email protected]">
  20.                     </div>
  21.                     <div class="form-group mx-sm-3">
  22.                         <input type="password" class="form-control" id="userpw" placeholder="password">
  23.                     </div>
  24.                     <button id="btn-sign-in" class="btn btn-primary" @click="signIn">Sign-in</button>
  25.                     <button id="btn-sign-up" class="btn btn-info ml-2" @click="signUp">Sign-up</button>
  26.                 </form>
  27.             </div>
  28.             <a href="#!" id="btn-sign-out" @click="signOut" class="btn btn-dark col-sm-2 float-right">Sign Out</a>
  29.         </div>
  30.         <div id="todo-form">
  31.             <form onsubmit="return false">
  32.                 <div class="form-group row">
  33.                     <div class="col-sm-8">
  34.                         <input type="text" id="todo" class="form-control" placeholder="input your todo here">
  35.                         <input type="hidden" id="id" value="">
  36.                         <input type="hidden" id="_method" value="POST">
  37.                     </div>
  38.                     <a href="#!" @click="saveTodo" id="btn-todo" class="btn btn-primary">Add New</a>
  39.                     <a href="#!" @click="clearTodo" class="btn btn-success ml-2">Clear</a>
  40.                 </div>
  41.             </form>
  42.         </div>
  43.         <div id="sign-up-form">
  44.             <form onsubmit="return false">
  45.                 <div class="form-group row">
  46.                     <div class="col-sm-3"><input type="text" id="sign-up-name" class="form-control" placeholder="your name"></div>
  47.                     <div class="col-sm-3 ml-2"><input type="email" id="sign-up-id" class="form-control" placeholder="your email"></div>
  48.                     <div class="col-sm-3 ml-2"><input type="password" id="sign-up-pw" class="form-control" placeholder="your password"></div>
  49.                     <a href="#!" @click="registMe" id="btn-todo" class="btn btn-primary ml-2">Join</a>
  50.                     <a href="#!" @click="clearMe" class="btn btn-success ml-2">Clear</a>
  51.                 </div>
  52.             </form>
  53.         </div>     
  54.         <div>
  55.             <div class="card mb-2" v-for="todo in todos">
  56.                 <div class="card-header">
  57.                     <a :id="todo.id"><strong>{{todo.username}}</strong> #{{todo.id}}</a>
  58.                     <a href="#!" class="btn btn-danger btn-sm float-right" @click="removeTodo(todo.id)">Remove</a>
  59.                     <a href="#!" class="btn btn-warning btn-sm float-right mr-1" @click="showUpdate(todo.id)">Update</a>
  60.                 </div>
  61.                 <div class="card-body">
  62.                     <blockquote class="blockquote mb-0">
  63.                         <p>{{todo.todo}}</p>
  64.                         <footer class="blockquote-footer">{{todo.created_at}} / {{todo.userid}}</footer>
  65.                     </blockquote>
  66.                 </div>
  67.             </div>
  68.         </div>
  69.     </div>
  70.     <script>
  71. //app.js
  72. const app = new Vue({
  73.     el: '#app',
  74.     data: {
  75.         todos: [],
  76.         todoSelected: null,
  77.         user: {}
  78.     },
  79.     methods: {
  80.         todoList: function(){
  81.             if( this.user.token ) {
  82.                 fetch("./api/todo/" + this.user.token)
  83.                 .then(response => response.json())
  84.                 .then( json => this.todos = json )             
  85.             } else {
  86.                 this.todos = [];
  87.             }
  88.  
  89.         },
  90.         saveTodo: function(event){
  91.             event.preventDefault();
  92.             let todo = document.getElementById("todo").value;
  93.             let id = document.getElementById("id").value;
  94.             let _method = document.getElementById("_method").value;
  95.             let data = {"todo": todo};
  96.             fetch("./api/todo/" + this.user.token + "/" + id,{
  97.                 method: _method,
  98.                 body: JSON.stringify(data),
  99.                 headers: {"Content-type": "application/json; charset=UTF-8"}
  100.             })
  101.             .then( res => res.json() )
  102.             .then( res => {
  103.                 if( res.success ) {
  104.                     this.todoList();
  105.                     if( _method === "PUT" && id ) location.href = "#" + id;
  106.                     this.clearTodo();
  107.                 } else {
  108.                     alert(res.msg);
  109.                 }
  110.             } )
  111.             .catch(error => {
  112.                 console.error('Error:', error);
  113.             });
  114.         },
  115.         getTodo: async function(id){
  116.             await fetch("./api/todo/"+this.user.token+"/" + id)
  117.             .then(response => response.json())
  118.             .then(json => this.todoSelected = json);
  119.             return this.todoSelected;
  120.         },
  121.         removeTodo: async function(id){
  122.             if( ! id ) return;
  123.             if( ! confirm("Are you want to remove this todo?") ) return;
  124.             await fetch("./api/todo/"+this.user.token+"/" + id,{
  125.                     method: "DELETE",
  126.                     body: JSON.stringify({}),
  127.                     headers: {"Content-type": "application/json; charset=UTF-8"}
  128.                   }
  129.             )
  130.             .then(res => res.json())
  131.             .then(res => {
  132.                 if( res.success ) {
  133.                     this.todoSelected = null;
  134.                     this.todoList();
  135.                 } else {
  136.                     alert(res.msg);
  137.                 }
  138.             });
  139.         },
  140.         showUpdate: async function(id){
  141.             let todo = await this.getTodo(id);
  142.             if( ! id ) return;
  143.             document.getElementById("id").value = todo.id;
  144.             document.getElementById("todo").value = todo.todo;
  145.             document.getElementById("todo").style.backgroundColor = "yellow";
  146.             document.getElementById("_method").value = "PUT";
  147.             document.getElementById("btn-todo").text = "Update";
  148.             location.href = "#";
  149.         },
  150.         clearTodo: function(){
  151.             document.getElementById("todo").value = "";
  152.             document.getElementById("todo").value = "";
  153.             document.getElementById("todo").value = "";
  154.             document.getElementById("todo").style.backgroundColor = "white";
  155.             document.getElementById("_method").value = "POST";
  156.             document.getElementById("btn-todo").text = "Add New";
  157.         },
  158.         signIn: function(){
  159.             let userid = document.getElementById("userid").value;
  160.             let userpw = document.getElementById("userpw").value;
  161.             let data = {"userid": userid, "userpw": userpw};
  162.             fetch("./api/user/login",{
  163.                     method: "POST",
  164.                     body: JSON.stringify(data),
  165.                     headers: {"Content-type": "application/json; charset=UTF-8"}
  166.                   }
  167.             )
  168.             .then(response => response.json())
  169.             .then(res => {
  170.                 if( res.token ) {
  171.                     this.user = res;
  172.                     localStorage.setItem('user', JSON.stringify(res));
  173.                     this.init();
  174.                 }
  175.             });
  176.         },
  177.         signOut: function(){
  178.             fetch("./api/user/logout/" + this.user.token, {
  179.                     method: "POST",
  180.                     body: JSON.stringify({}),
  181.                     headers: {"Content-type": "application/json; charset=UTF-8"}
  182.                   }
  183.             )
  184.             .then(response => response.json())
  185.             .then(res => {
  186.                 if( res.logout ) {
  187.                     this.user = {};
  188.                     localStorage.setItem('user', '');
  189.                     this.init();           
  190.                 }
  191.             });
  192.         },
  193.         init: async function(){
  194.             let user = localStorage.getItem('user');
  195.             if( user ) this.user = JSON.parse(user);
  196.             else this.user = {};           
  197.             document.getElementById("sign-up-form").style.display = "none";
  198.             if( this.user.userid ) {
  199.                 document.getElementById("login-form-block").style.display = "none";
  200.                 document.getElementById("btn-sign-out").style.display = "block";
  201.                 document.getElementById("btn-sign-out").text = this.user.username + " Sign Out";
  202.                 document.getElementById("todo-form").style.display = "block";
  203.             } else {
  204.                 document.getElementById("login-form-block").style.display = "block";
  205.                 document.getElementById("btn-sign-out").style.display = "none";
  206.                 document.getElementById("btn-sign-out").text = "Sign Out";
  207.                 document.getElementById("todo-form").style.display = "none";
  208.                 document.getElementById("userid").value = "";
  209.                 document.getElementById("userpw").value = "";
  210.             }
  211.             await this.todoList();
  212.         },
  213.         signUp: function(){
  214.             document.getElementById("sign-up-name").value = "";
  215.             document.getElementById("sign-up-id").value = "";
  216.             document.getElementById("sign-up-pw").value = "";
  217.             document.getElementById("sign-up-form").style.display = "block";
  218.         },
  219.         registMe: function(event){
  220.             event.preventDefault();
  221.             let username = document.getElementById("sign-up-name").value;
  222.             let userid = document.getElementById("sign-up-id").value;
  223.             let userpw = document.getElementById("sign-up-pw").value;
  224.             let _method = "POST";
  225.             let data = {"username": username, "userid": userid, "userpw": userpw};
  226.             fetch("./api/user/regist", {
  227.                 method: _method,
  228.                 body: JSON.stringify(data),
  229.                 headers: {"Content-type": "application/json; charset=UTF-8"}
  230.             })
  231.             .then( res => res.json() )
  232.             .then( res => {
  233.                 alert(res.msg);
  234.                 if( res.regist ) {
  235.                     document.getElementById("sign-up-name").value = "";
  236.                     document.getElementById("sign-up-id").value = "";
  237.                     document.getElementById("sign-up-pw").value = "";                  
  238.                     document.getElementById("sign-up-form").style.display = "none";
  239.                 }
  240.             } )
  241.             .catch(error => {
  242.                 console.error('Error:', error);
  243.             });
  244.         },
  245.         clearMe:  function(){
  246.  
  247.         }
  248.     },
  249.     async mounted() {
  250.         await this.init();
  251.     }
  252. });
  253.     </script>
  254. </body>
  255. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!