vue.js中的firebase示例,提交的时候保存到mysql数据库要怎么做?

ps:后台用laravel框架

示例地址:http://cn.vuejs.org/examples/firebase.html

示例各部分代码:

html:index.html

Vue.js Firebase example
  • {{user.name}} - {{user.email}}

    X

  • Name cannot be empty.
  • Please provide a valid email address.

js:app.js

var baseURL = 'https://vue-demo.firebaseIO.com/'

var emailRE = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/

/**

* Setup firebase sync

*/

var Users = new Firebase(baseURL + 'users')

Users.on('child_added', function (snapshot) {

var item = snapshot.val()

item.id = snapshot.key()

app.users.push(item)

})

Users.on('child_removed', function (snapshot) {

var id = snapshot.key()

app.users.some(function (user) {

if (user.id === id) {

app.users.$remove(user)

return true

}

})

})

/**

* Create Vue app

*/

var app = new Vue({

// element to mount to

el: '#app',

// initial data

data: {

users: [],

newUser: {

name: '',

email: ''

}

},

// computed property for form validation state

computed: {

validation: function () {

return {

name: !!this.newUser.name.trim(),

email: emailRE.test(this.newUser.email)

}

},

isValid: function () {

var validation = this.validation

return Object.keys(validation).every(function (key) {

return validation[key]

})

}

},

// methods

methods: {

addUser: function () {

if (this.isValid) {

Users.push(this.newUser)

this.newUser.name = ''

this.newUser.email = ''

}

},

removeUser: function (user) {

new Firebase(baseURL + 'users/' + user.id).remove()

}

}

})

css:style.css

body {

font-family: Helvetica, Arial, sans-serif;

}

ul {

padding: 0;

}

.user {

height: 30px;

line-height: 30px;

padding: 10px;

border-top: 1px solid #eee;

overflow: hidden;

transition: all .25s ease;

}

.user:last-child {

border-bottom: 1px solid #eee;

}

.v-enter, .v-leave {

height: 0;

padding-top: 0;

padding-bottom: 0;

border-top-width: 0;

border-bottom-width: 0;

}

.errors {

color: #f00;

}

更多推荐