Recipe-Box Recipe模块

创建 images 目录，并放置一张图片当做默认图片，最好把 images 目录权限设置为 777（images的路径： public）

20180105174650.png

修改 路由文件 index.js （路径：resources/assets/js/router 下）

import Vue from 'vue';
import VueRouter from 'vue-router';

import Register from '../views/Auth/Register.vue';
import Login from '../views/Auth/Login.vue';

import RecipeIndex from '../views/Recipes/Index.vue';
import RecipeShow from '../views/Recipes/Show.vue';
import RecipeForm from '../views/Recipes/Form.vue';

Vue.use(VueRouter);

const router = new VueRouter({
    routes: [
        {path: '/register', component: Register},
        {path: '/login', component: Login},
        {path: '/', component: RecipeIndex},
        {path: '/recipes/create', component: RecipeForm, meta: {mode: 'create'}},
        {path: '/recipes/:id/edit', component: RecipeForm, meta: {mode: 'edit'}},
        {path: '/recipes/:id', component: RecipeShow}
    ]
});

export default router;

添加 Recipes 文件夹 并在该文件夹下创建 Index.vue 、Form.vue 和 Show.vue （创建Recipes文件夹 的 路径：/resources/assets/js/views）

Index.vue

<template>
    <div class="recipe__list">
        <div class="recipe__item" v-for="recipe in recipes">
            <router-link class="recipe__inner" :to="`/recipes/${recipe.id}`">
                <img :src="`/images/${recipe.image}`" v-if="recipe.image">
                <p class="recipe__name">{{recipe.name}}</p>
            </router-link>
        </div>
    </div>
</template>

<script type="text/javascript">
    import { get } from '../../helpers/api';
    export default{
        data(){
            return {
                recipes : []
            }
        },
        methods: {
        },
        created(){
            get('/api/recipes')
                .then((res) => {
                    this.recipes = res.data.recipes;
                })
                .catch((err) => {
                });
        }
    }
</script>

Form.vue

<template>
    <div class="recipe__show">

        <div class="recipe__header">
            <h3>{{action}} Recipe</h3>
            <div>
                <button class="btn btn__primary" @click="save" :disabled="isProcessing">Save</button>
                <button class="btn" @click="$router.back()" :disabled="isProcessing">Cancel</button>
            </div>
        </div>

        <div class="recipe__row">
            <div class="recipe__image">
                <div class="recipe__box">
                    <image-upload v-model="form.image"></image-upload>
                    <small class="error__control" v-if="error.image">{{error.image[0]}}</small>
                </div>
            </div>

            <div class="recipe__details" >
                <div class="recipe__details_inner">
                    <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>Description</label>
                        <textarea type="text" class="form__control" v-model="form.description"></textarea>
                        <small class="error__control" v-if="error.description">{{error.description[0]}}</small>
                    </div>

                </div>
            </div>
        </div>

        <div class="recipe__row">
            <div class="recipe__ingredients">
                <div class="recipe__box">
                    <h3 class="recipe__sub_title">Ingredients</h3>
                    <div v-for="(ingredient, index) in form.ingredients" class="recipe__form">
                        <input type="text" class="form__control" v-model="ingredient.name"
                               :class="[error[`ingredients.${index}.name`] ? 'error__bg' : '']">

                        <input type="text" class="form__control form__qty" v-model="ingredient.qty"
                               :class="[error[`ingredients.${index}.qty`] ? 'error__bg' : '']">

                        <button class="btn btn__danger" @click="remove('ingredients', index)">
                            &times;
                        </button>
                    </div>

                    <button class="btn" @click="addIngredient">Add Ingredient</button>
                </div>
            </div>

            <div class="recipe__directions">
                <div class="recipe__directions_inner">
                    <h3 class="recipe__sub_title">Directions</h3>
                    <div v-for="(direction, index) in form.directions" class="recipe__form">
                    <textarea type="text" class="form__control" v-model="direction.description"
                              :class="[error[`directions.${index}.description`] ? 'error__bg' : '']"></textarea>

                        <button class="btn btn__danger" @click="remove('directions', index)">
                            &times;
                        </button>
                    </div>

                    <button class="btn" @click="addDirection">Add Direction</button>
                </div>
            </div>
        </div>

    </div>
</template>

<script type="text/javascript">
    import Vue from 'vue';
    import Flash from '../../helpers/flash';
    import { get, post } from '../../helpers/api';
    import { toMulipartedForm } from '../../helpers/form';
    import ImageUpload from '../../components/ImageUpload.vue';
    export default{
        data(){
            return {
                form: {
                    ingredients: [],
                    directions: []
                },
                error: {},
                isProcessing: false,
                initializeURL: `/api/recipes/create`,
                storeURL: `/api/recipes`,
                action: 'Create'
            }
        },
        components:{
            ImageUpload
        },
        methods: {
            save(){
                this.isProcessing = true;
                const form = toMulipartedForm(this.form, this.$route.meta.mode);
                post(this.storeURL, form)
                    .then((res) => {
                        if(res.data.saved){
                            Flash.setSuccess(res.data.message);
                            this.$router.push(`/recipes/${res.data.id}`);
                        }
                    }).catch((err) => {
                        if(err.response.status === 422){
                            this.error = err.response.data;
                        }
                        this.isProcessing = false;
                    })
            },
            addDirection(){
                this.form.directions.push({description: ''});
            },
            addIngredient(){
                this.form.ingredients.push({
                    name: '',
                    qty: ''
                });
            },
            remove(type, index){
                if(this.form[type].length > 1){
                    this.form[type].splice(index, 1);
                }
            }
        },
        created(){
            if(this.$route.meta.mode === 'edit') {
                this.initializeURL = `/api/recipes/${this.$route.params.id}/edit`;
                this.storeURL = `/api/recipes/${this.$route.params.id}?_method=PUT`;
                this.action = 'Update';
            }
            get(this.initializeURL).then((res) => {
                Vue.set(this.$data, 'form', res.data.form);
            }).catch((err) => {
                console.log(err);
            })
        }
    }
</script>

Show.vue

<template>
    <div class="recipe__show">
        <div class="recipe__row">
            <div class="recipe__image">
                <div class="recipe__box">
                    <img :src="`/images/${recipe.image}`" v-if="recipe.image" width="340px;">
                </div>
            </div>

            <div class="recipe__details">
                <div class="recipe__details_inner">
                    <small>Submitted by: {{recipe.user.name}}</small>
                    <h1 class="recipe__title">{{recipe.name}}</h1>
                    <p class="recipe__description">{{recipe.description}}</p>
                    <div v-if="auth.api_token && auth.user_id === recipe.user_id">
                        <router-link :to="`/recipes/${recipe.id}/edit`" class="btn btn-primary">
                            Edit
                        </router-link>

                        <button class="btn btn__danger" @click="remove" :disabled="isRemoving">Delete</button>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="recipe__row">
            <div class="recipe__ingredients">
                <div class="recipe__box">
                    <h3 class="recipe__sub_title">Ingredients</h3>
                    <ul>
                        <li v-for="ingredient in recipe.ingredients">
                            <span>{{ingredient.name}}</span>
                            <span>{{ingredient.qty}}</span>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="recipe__directions">
                <div class="recipe__directions_inner">
                    <h3 class="recipe__sub_title">Directions</h3>
                    <ul>
                        <li v-for="(direction, i) in recipe.directions">
                            <p>
                                <strong>{{i + 1}}</strong>
                                {{direction.description}}
                            </p>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>

<script type="text/javascript">
    import Auth from '../../store/auth';
    import Flash from '../../helpers/flash';
    import { get, del} from '../../helpers/api';
    export default{
        data(){
            return {
                auth: Auth.state,
                isRemoving: false,
                recipe: {
                    user: {},
                    ingredients: [],
                    directions: []
                }
            }
        },
        methods: {
            remove(){
                this.isRemoving = false;
                del(`/api/recipes/${this.$route.params.id}`)
                    .then((res) =>{
                        if (res.data.deleted){
                            Flash.setSuccess('删除操作成功！');
                            this.$router.push('/');
                        }
                    }).catch((err) => {
                });
            }
        },
        created(){
            console.log(this.$route.params);
            get(`/api/recipes/${this.$route.params.id}`)
                .then((res) =>{
                    this.recipe = res.data.recipe;
                }).catch((err) => {
            })
        }
    }
</script>

在 components 文件夹下创建 ImagePreview.vue 和 ImageUpload.vue（路径：/resources/assets/js/components/）

ImagePreview.vue

<template>
    <div class="image__preview" v-if="image">
        <img :src="image">
        <button class="btn btn__danger image__close" @click="$emit('close')">&times;</button>
    </div>
</template>

<script type="text/javascript">
    export default{
        data(){
            return {
                image: null
            }
        },
        props: {
            preview: {
                type: [String, File],
                default: null
            }
        },
        watch: {
            'preview': 'setPreview'
        },
        methods: {
            setPreview(){
                if(this.preview instanceof File){
                    const fileReader = new FileReader;
                    fileReader.onload = (event) => {
                        this.image = event.target.result;
                    };
                    fileReader.readAsDataURL(this.preview);
                }else if(typeof this.preview === 'string'){
                    this.image = `images/${this.preview}`;
                }else {
                    this.image = null;
                }
            }
        },
        created(){
            this.setPreview();
        }
    }
</script>

ImageUpload.vue

<template>
    <div class="image">
        <image-preview :preview="value" @close="$emit('input', null)" v-if="value"></image-preview>
        <div class="image__upload" v-else>
            <input type="file" accept="images/*" @change="upload">
        </div>
    </div>
</template>

<script type="text/javascript">
    import ImagePreview from './ImagePreview.vue';
    export default{
        props: {
            value: {
                type: [String, File],
                default: null
            }
        },
        components: {
            ImagePreview
        },
        methods: {
            upload(e){
                const files = e.target.files;
                console.log(files);
                if(files && files.length > 0){
                    this.$emit('input', files[0]);
                }
            }
        }
    }
</script>