$.ajax({
url:<?php
$user = new User();
if ($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_POST['signUp'])) {
$userRegistration = $user->userRegistration($_POST);
}
?>,<template>
<v-flex xs12 md4 offset-md4>
<div v-for="post in sortedPosts">
<v-card class="my-3" hover>
<v-card-media class="white--text" height="170px" :src="post.imgUrl">
<v-container fill-height fluid>
<v-layout>
<v-flex xs12 align-end d-flex>
<span class="headline">{{ post.title }}</span>
</v-flex>
</v-layout>
</v-container>
</v-card-media>
<v-card-text>
<v-chip color="primary" text-color="white">{{ post.category }}</v-chip>
</v-card-text>
<v-card-actions>
<v-btn icon class="blue--text">
<v-icon medium>fa fa-vk</v-icon>
</v-btn>
<v-btn icon class="red--text">
<v-icon medium>fa fa-instagram</v-icon>
</v-btn>
<v-btn icon class="light-blue--text">
<v-icon medium>fa-twitter</v-icon>
</v-btn>
<v-btn icon class="blue--text text--darken-4">
<v-icon medium>fa-facebook</v-icon>
</v-btn>
<v-spacer></v-spacer>
<!--<v-btn flat class="blue--text">Read More</v-btn>-->
</v-card-actions>
</v-card>
</div>
</v-flex>
</template>
<script>
export default{
data() {
return {
posts: [
{
title: '[1] Fusce ullamcorper tellus',
category: 1,
content: 'At sagittis sapien vulputate. Vivamus laoreet lacus id magna rutrum dapibus.',
imgUrl: 'https://raw.githubusercontent.com/vuetifyjs/docs/dev/static/doc-images/cards/drop.jpg'
},
{
title: '[2] Donec vitae suscipit lectus, a luctus diam.',
category: 2,
content: 'At sagittis sapien vulputate. Vivamus laoreet lacus id magna rutrum dapibus.',
imgUrl: 'https://raw.githubusercontent.com/vuetifyjs/docs/dev/static/doc-images/cards/docks.jpg'
},
{
title: '[3] Vestibulum condimentum quam',
category: 3,
content: 'At sagittis sapien vulputate. Vivamus laoreet lacus id magna rutrum dapibus.',
imgUrl: 'https://raw.githubusercontent.com/vuetifyjs/docs/dev/static/doc-images/cards/plane.jpg'
},
{
title: '[2] Vestibulum condimentum quam',
category: 2,
content: 'At sagittis sapien vulputate. Vivamus laoreet lacus id magna rutrum dapibus.',
imgUrl: 'https://raw.githubusercontent.com/vuetifyjs/docs/dev/static/doc-images/cards/plane.jpg'
},
{
title: '[1] Vestibulum condimentum quam',
category: 1,
content: 'At sagittis sapien vulputate. Vivamus laoreet lacus id magna rutrum dapibus.',
imgUrl: 'https://raw.githubusercontent.com/vuetifyjs/docs/dev/static/doc-images/cards/plane.jpg'
}
],
}
},
computed: {
sortedPosts() {
this.posts.sort(this.sortPosts)
return this.posts
}
},
filters: {
sortPosts: function(a, b) {
if (a.category < b.category)
return -1
if (a.category > b.category)
return 1
return 0
}
}
}
</script>Ну а в ajax'е какой метод использовать? И какой тип рута должен быть? put?
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const Auth = {
state: {
auth: false, // Авторизован ли пользователь
user: {}, // Данные о пользователе
token: {}, // Токен для API
},
mutations: {
getAuthentication: (state, data) => {
return Vue.axios.post('/oauth/token', data)
.then(response => {
console.log(response.data)
return response.data
})
},
/**
* Сохраняем данные токена
* @param state
*/
tokenAuth: (state, token) => {
state.token = token
},
/**
* Сохраняем информацию о том, что пользователь авторизован
* @param state
* @param data
*/
auth: (state, data) => {
state.auth = true
state.user = data
},
/**
* "Выходим" из аккаунта и удаляем все данные с auth()
* @param state
*/
logout: (state) => {
state.auth = false
state.user = {}
state.user = {}
}
},
}
export default Authimport Vue from 'vue';
import VueRouter from 'vue-router'
import Meta from 'vue-meta'
import store from '../store'
Vue.use(VueRouter)
Vue.use(Meta)
import Home from '../components/Home.vue'
import News from '../components/News.vue'
import Games from '../components/Games.vue'
import Users from '../components/Users/Users.vue'
import Logout from '../components/Users/Logout.vue'
import NotFound from '../components/pages/NotFound.vue'
// Авторизация
import Login from '../components/Auth/Login.vue'
import Register from '../components/Auth/Register.vue'
const router = new VueRouter({
mode: 'history',
routes: [
/* Нейтральные страницы */
{
path: '/',
name: 'home',
component: Home
},
{
path: '/news',
name: 'news',
component: News,
},
{
path: '/games',
name: 'games',
component: Games,
},
/* Для пользователей */
{
path: '/users/:id',
name: 'users',
component: Users,
meta: {
isAuth: true
},
},
{
path: '/logout',
name: 'users.logout',
component: Logout,
meta: {
isAuth: true
}
},
/* Для гостей */
{
path: '/auth/login',
name: 'auth.login',
component: Login,
meta: {
isGuest: false
}
},
{
path: '/auth/register',
name: 'auth.register',
component: Register,
meta: {
isGuest: true
}
},
/* Web-серверные ошибки и сообщения */
{
/* 404 - Page not found */
path: '/404',
name: 'notfound',
component: NotFound
}, {
path: '*',
redirect: '/404'
}
],
linkActiveClass: '',
linkExactActiveClass: ''
})
router.beforeEach(
(to, from, next) => {
if(to.matched.some(record => record.meta.isAuth)){
if(store.state.Auth.auth){
next({
path: '/feed'
})
} else next()
}else if(to.matched.some(record => record.meta.isGuest)){
if(!store.state.Auth.auth){
next({
path: '/auth/login'
})
}else{
next()
}
} else next()
}
)
export default router