修改 welcome.blade.php 文件 （路徑：resources/views/welcome.blade.php）
修改 引入的 css文件和 js 文件，使用 Vue + Vue-Router
<!doctype html>
<html lang="{{ config('app.locale') }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Recipe Box</title>
<link rel="stylesheet" type="text/css" href="{{mix('css/app.css')}}">
</head>
<body>
<div id="root"></div>
</body>
<script type="text/javascript" src="{{mix('js/app.js')}}"></script>
<footer></footer>
</html>
刪除不需要的文件
_variables.scss 路徑: resources/assets/sass/_variables.scss
bootstrap.js 路徑: resources/assets/js/bootstrap.js
Example.vue 路徑：resources/assets/js/components/Example.vue
運行 npm
>npm run watch
后面需要修改/添加文件，免得混亂，貼一張圖以供參考
20180105134045.png
修改app.js (路徑：resources/assets/js/app.js)
import Vue from 'vue';
import App from './App.vue';
import router from './router';
const app = new Vue({
el: '#root',
template: `<app></app>`,
components: { App },
router
})
添加 router 文件夾，并在該文件夾下創建 inde.js (在文件夾：resources/assets/js/ 下創建文件夾)
import Vue from 'vue';
import VueRouter from 'vue-router';
import Register from '../views/Auth/Register.vue';
import Login from '../views/Auth/Login.vue';
Vue.use(VueRouter);
const router = new VueRouter({
routes: [
{path: '/register', component: Register},
{path: '/login', component: Login}
]
});
export default router;
添加App.vue (在文件夾：resources/assets/js/ 下添加)
<template>
<div class="container">
<div class="navbar">
<div class="navbar__brand">
<router-link to="/">Recipe Box</router-link>
</div>
<ul class="navbar__list">
<li class="navbar__item" v-if="!check">
<router-link to="/login">LOGIN</router-link>
</li>
<li class="navbar__item" v-if="!check">
<router-link to="/register">REGISTER</router-link>
</li>
<li class="navbar__item" v-if="check">
<router-link to="/recipes/create">CREATE RECIPE</router-link>
</li>
<li class="navbar__item" v-if="check">
<a @click.stop="logout">LOGOUT</a>
</li>
</ul>
</div>
<div class="flash flash__success" v-if="flash.success">
{{flash.success}}
</div>
<div class="flash flash__error" v-if="flash.error">
{{flash.error}}
</div>
<router-view></router-view>
</div>
</template>
<script type="text/javascript">
import Auth from './store/auth';
import Flash from './helpers/flash';
import { post } from './helpers/api';
export default{
data(){
return {
flash: Flash.state,
auth: Auth.state
}
},
computed: {
check(){
if(this.auth.api_token && this.auth.user_id){
return true;
}else {
return false;
}
}
},
methods:{
logout(){
post('/api/logout')
.then((res) => {
if(res.data.logged_out){
Auth.remove();
Flash.setSuccess('退出登錄！');
this.$router.push('/');
}
}).catch((err) => {
})
}
},
created(){
Auth.initialize();
}
}
</script>
創建 Auth 文件夾，并在該目錄下創建Register.vue 和 Login.vue （在目錄：resources/assets/js/views 下創建 Auth 文件夾）
Register.vue 內容：
<template>
<form class="form" @submit.prevent="register">
<h1 class="form__title">注冊賬號</h1>
<div class="form__group">
<label>Name</label>
<input type="text" class="form__control" v-model="form.name"/>
<small class="error__control" v-if="error.name">{{error.name[0]}}</small>
</div>
<div class="form__group">
<label>Email</label>
<input type="text" class="form__control" v-model="form.email"/>
<small class="error__control" v-if="error.email">{{error.email[0]}}</small>
</div>
<div class="form__group">
<label>Password</label>
<input type="password" class="form__control" v-model="form.password"/>
<small class="error__control" v-if="error.password">{{error.password[0]}}</small>
</div>
<div class="form__group">
<label>Confirm Password</label>
<input type="password" class="form__control" v-model="form.password_confirmation"/>
</div>
<div class="form__group">
<button :disabled="isProcessing" class="btn btn__primary">Register</button>
</div>
</form>
</template>
<script type="text/javascript">
import Flash from '../../helpers/flash';
import { post } from '../../helpers/api';
export default{
data(){
return {
form: {
name: '',
email: '',
password: '',
password_confirmation: ''
},
error: {},
isProcessing: false
}
},
methods: {
register(){
this.isProcessing = true;
this.error = {};
post(`/api/register`, this.form).then((res) => {
if(res.data.registered){
Flash.setSuccess('創建帳號成功！');
this.$router.push('/login');
}
this.isProcessing = false;
}).catch((err) => {
if(err.response.status === 422){
this.error = err.response.data;
}
this.isProcessing = false;
})
}
}
}
</script>
Login.vue 內容：
<template>
<form class="form" @submit.prevent="login">
<h1 class="form__title">歡迎回來！</h1>
<div class="form__group">
<label>Email</label>
<input type="text" class="form__control" v-model="form.email"/>
<small class="error__control" v-if="error.email">{{error.email}}</small>
</div>
<div class="form__group">
<label>Password</label>
<input type="password" class="form__control" v-model="form.password"/>
<small class="error__control" v-if="error.password">{{error.password[0]}}</small>
</div>
<div class="form__group">
<button :disabled="isProcessing" class="btn btn__primary">Login</button>
</div>
</form>
</template>
<script type="text/javascript">
import Flash from '../../helpers/flash';
import Auth from '../../store/auth';
import { post } from '../../helpers/api';
export default{
data(){
return {
form: {
email: '',
password: ''
},
error: {},
isProcessing: false
}
},
methods: {
login(){
this.isProcessing = true;
this.error = {};
post(`/api/login`, this.form).then((res) => {
if(res.data.authenticated){
Auth.set(res.data.api_token, res.data.user_id);
Flash.setSuccess('登錄成功！');
this.$router.push('/');
}
this.isProcessing = false;
}).catch((err) => {
if(err.response.status === 422){
this.error = err.response.data;
}
this.isProcessing = false;
})
}
}
}
</script>
創建 store 文件夾，并在該目錄下創建 auth.js （在目錄：resources/assets/js/ 下創建 store 文件夾）
auth.js 內容：
export default {
state: {
api_token: null,
user_id: null
},
initialize(){
this.state.api_token = localStorage.getItem('api_token');
this.state.user_id = parseInt(localStorage.getItem('user_id'));
},
set(api_token, user_id){
localStorage.setItem('api_token', api_token);
localStorage.setItem('user_id', user_id);
this.initialize();
},
remove(){
localStorage.removeItem('api_token');
localStorage.removeItem('user_id');
this.initialize();
}
}
創建helpers 文件夾，并在該目錄下創建 api.js、flash.js、form.js （在目錄：resources/assets/js/ 下創建 helpers 文件夾）
api.js 文件：
import axios from 'axios';
import Auth from '../store/auth';
export function get(url) {
return axios({
method: 'GET',
url: url,
headers: {
'Authorization': `Bearer ${Auth.state.api_token}`
}
})
}
export function post(url, data) {
return axios({
method: 'POST',
url: url,
data: data,
headers: {
'Authorization': `Bearer ${Auth.state.api_token}`
}
})
}
export function del(url) {
return axios({
method: 'DELETE',
url: url,
headers: {
'Authorization': `Bearer ${Auth.state.api_token}`
}
})
}
flash.js 內容：
export default {
state: {
success: null,
error: null
},
setSuccess(message){
this.state.success = message;
setTimeout(()=>{
this.removeSuccess();
}, 3000);
},
setError(message){
this.state.error = message;
setTimeout(()=>{
this.removeError();
}, 10000);
},
removeSuccess(){
this.state.success = null;
},
removeError(){
this.state.error = null;
}
}
form.js 內容：
export function toMulipartedForm(form, mode) {
if(mode === 'edit' && typeof form.image === 'string'){
const temp = JSON.parse(JSON.stringify(form));
delete temp.image;
return temp;
}else {
return objectToFormData(form);
}
}
export function objectToFormData(obj, form, namespace) {
let fd = form || new FormData();
let formKey;
for(var property in obj){
if(obj.hasOwnProperty(property)){
if(namespace){
formKey = namespace + '[' + property + ']';
}else {
formKey = property;
}
}
if(obj[property] instanceof Array){
for (var i = 0; i < obj[property].length; i++){
objectToFormData(obj[property][i], fd, `${property}[${i}]`);
}
}else if(typeof obj[property] === 'object' && !(obj[property] instanceof File)){
objectToFormData(obj[property], fd, property);
}else {
fd.append(formKey, obj[property]);
}
}
return fd;
}
