deadkff01 · September 28, 2018 00:59
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
      <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.js"></script>
 </head>
 <body>


 <h2>Crud Alunos</h2>
 <main id="app">
  <router-view></router-view>
 </main>

 <template id="aluno-list">
  <div>
    <div class="actions">
      <router-link class="btn btn-default" v-bind:to="{path: '/add-aluno'}">
        Add aluno
      </router-link>
    </div>
    <div>
      
    </div>
    <table class="table">
      <thead>
      <tr>
        <th>Matricula</th>
        <th>Nome</th>
        <th class="col-sm-2">Telefone</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="aluno in getAlunos">,
        <td>
          {{ aluno.id }}
        </td>
        <td>
          {{ aluno.nome }}
        </td>
        <td>
          {{ aluno.telefone }}
        </td>
      </tr>
      </tbody>
    </table>
  </div>
 </template>

 <template id="add-aluno">
  <div>
    <h2>Add aluno</h2>
    <form v-on:submit="createAluno">
      <div class="form-group">
        <label>Nome</label>
        <input id="add-name" v-model="alunoNm.nome" required/>
      </div>
      <div>
        <label>Telefone</label>
        <input id="add-description" rows="10" v-model="alunoNm.telefone" />
      </div>
      <button type="submit" class="btn btn-primary">Salvar</button>
      <router-link class="btn btn-default" v-bind:to="'/'">Cancelar</router-link>
    </form>
  </div>
 </template>

 </body>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/2.5.3/vue-router.min.js"></script>
 <script>

 var alunos = []

 var List = Vue.extend({
  template: '#aluno-list',
  data: function () {
    return {alunos: alunos};
  },
  computed: {
      getAlunos: function () {
      return this.alunos
    }
  }
  ,
  mounted () {
    axios
      .get('http://localhost:3030/alunos')
      .then(response => this.alunos = response.data)
  }
 })

 var AddAluno = Vue.extend({
  template: '#add-aluno',
  data: function () {
    return {alunoNm: {nome: '', telefone: ''}}
  },
  methods: {
    createAluno: function() {
      var aluno = this.alunoNm;
      axios
      .post('http://localhost:3030/alunos', {
        id: Math.random().toString().split('.')[1],
        nome: aluno.nome,
        telefone: aluno.telefone,
      })
      .then(res => router.push('/'))
    }
  }
 });

 var router = new VueRouter({routes:[
  { path: '/', component: List},
  { path: '/add-aluno', component: AddAluno},
 ]});

 app = new Vue({
  router:router
 }).$mount('#app');
 </script>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.js"></script>
	</head>
	<body>


	<h2>Crud Alunos</h2>
	<main id="app">
	<router-view></router-view>
	</main>

	<template id="aluno-list">
	<div>
	<div class="actions">
	<router-link class="btn btn-default" v-bind:to="{path: '/add-aluno'}">
	Add aluno
	</router-link>
	</div>
	<div>

	</div>
	<table class="table">
	<thead>
	<tr>
	<th>Matricula</th>
	<th>Nome</th>
	<th class="col-sm-2">Telefone</th>
	</tr>
	</thead>
	<tbody>
	<tr v-for="aluno in getAlunos">,
	<td>
	{{ aluno.id }}
	</td>
	<td>
	{{ aluno.nome }}
	</td>
	<td>
	{{ aluno.telefone }}
	</td>
	</tr>
	</tbody>
	</table>
	</div>
	</template>

	<template id="add-aluno">
	<div>
	<h2>Add aluno</h2>
	<form v-on:submit="createAluno">
	<div class="form-group">
	<label>Nome</label>
	<input id="add-name" v-model="alunoNm.nome" required/>
	</div>
	<div>
	<label>Telefone</label>
	<input id="add-description" rows="10" v-model="alunoNm.telefone" />
	</div>
	<button type="submit" class="btn btn-primary">Salvar</button>
	<router-link class="btn btn-default" v-bind:to="'/'">Cancelar</router-link>
	</form>
	</div>
	</template>

	</body>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/2.5.3/vue-router.min.js"></script>
	<script>

	var alunos = []

	var List = Vue.extend({
	template: '#aluno-list',
	data: function () {
	return {alunos: alunos};
	},
	computed: {
	getAlunos: function () {
	return this.alunos
	}
	}
	,
	mounted () {
	axios
	.get('http://localhost:3030/alunos')
	.then(response => this.alunos = response.data)
	}
	})

	var AddAluno = Vue.extend({
	template: '#add-aluno',
	data: function () {
	return {alunoNm: {nome: '', telefone: ''}}
	},
	methods: {
	createAluno: function() {
	var aluno = this.alunoNm;
	axios
	.post('http://localhost:3030/alunos', {
	id: Math.random().toString().split('.')[1],
	nome: aluno.nome,
	telefone: aluno.telefone,
	})
	.then(res => router.push('/'))
	}
	}
	});

	var router = new VueRouter({routes:[
	{ path: '/', component: List},
	{ path: '/add-aluno', component: AddAluno},
	]});

	app = new Vue({
	router:router
	}).$mount('#app');
	</script>
	</html>