功能模块重构 & CSS 整体优化：首页篇

Created 6 years ago by 学院君, Updated 6 years ago Revision #1 16174 views 3 likes 0 collects

通过前面三十篇教程的讲解，我们已经完成了 Roast 应用的所有前端功能，相信你也已经初步掌握了基于 Laravel + Vue 实现前后端分离单页面应用的开发，接下来的几篇教程我们将围绕对现有 Roast 应用进行优化展开，对底层数据结构和前端功能模块进行重构，从而让应用的整体架构更加清晰，同时对 CSS 进行优化，从而让应用看上去更加美观，以首页为例，优化后的效果是这样的：

roast-app-home

跟之前相对简陋的首页相比，可以说是很酷了。

在正式编码前，我们先来规划下对应用哪几块功能进行重构：

将咖啡店列表页合并到首页
移除信息窗体功能，点击咖啡店标记直接跳转到对应的咖啡店详情页
移除标签和标签过滤器（暂时）
移除文件上传功能，将其替换为上传咖啡店 Logo
将是否是烘焙店替换为咖啡店类型字段
将之前的咖啡店总店概念整合到所属公司，分店打平，将对应的公有字段也移到公司表中
有了上面的基础，在新增咖啡店页面，现在一次只能添加一个咖啡店
编辑咖啡店功能实现
应用 CSS 整体优化

接下来，我们遵循之前的开发流程「数据表 -> 模型类-> 路由 -> 控制器-> 前端调用API -> Vuex -> Vue Router -> Vue组件 -> CSS」，从应用首页着手，对应用进行重构，重构教程，我们将以代码为主，讲述为辅，因为流程和原理前面都说过了，直接看代码就能看懂。

第一步：数据表调整

首先需要创建从原来的表中拆分出两张表，一张是公司表 companies，用于存放咖啡店所属公司的公共属性：

xxxxxxxxxx
 
php artisan make:migration create_companies_table

在新生成的数据库迁移文件类中，编辑 up 方法如下：

xxxxxxxxxx
 
public function up()
{
    Schema::create('companies', function (Blueprint $table) {
        $table->increments('id');
        $table->string('name');
        $table->integer('roaster');
        $table->text('website');
        $table->text('logo');
        $table->text('description');
        $table->integer('added_by')->unsigned()->nullable();
        $table->softDeletes();
        $table->timestamps();
    });
}

另一张表是城市表 cities，用于单独存放城市信息，以便后续实现级联功能：

xxxxxxxxxx
 
php artisan make:migration create_cities_table

编辑对应的数据表迁移类的 up 方法如下：

xxxxxxxxxx
 
public function up()
{
    Schema::create('cities', function (Blueprint $table) {
        $table->increments('id');
        $table->string('name');
        $table->string('state');
        $table->string('country');
        $table->string('slug');
        $table->decimal('latitude', 11, 8)->nullable();
        $table->decimal('longitude', 11, 8)->nullable();
        $table->decimal('radius', 4, 2)->nullable();
        $table->timestamps();
    });
}

接下来的一些数据库迁移文件由上面两张新表衍生而来，首先看 companies，从 cafes 表中抽走了咖啡店的公共属性，所以需要对 cafes 表进行调整：

xxxxxxxxxx
 
php artisan make:migration alter_cafes_drop_company_columns --table=cafes

编辑对应的数据表迁移类 up 方法如下：

xxxxxxxxxx
 
public function up()
{
    Schema::table('cafes', function (Blueprint $table) {
        $table->dropColumn('name');
        $table->dropColumn('roaster');
        $table->dropColumn('website');
        $table->dropColumn('description');
        $table->dropColumn('added_by');
        $table->dropColumn('parent');
        $table->integer('company_id')->unsigned()->default(0);
        $table->softDeletes();
    });
}

cafes 表与 companies 表通过 company_id 进行关联，此外关于用户与公司之间的关系，我们创建一张 company_owners 表进行存储：

xxxxxxxxxx
 
php artisan make:migration create_company_owners_table

编辑对应的数据表迁移类 up 方法如下：

xxxxxxxxxx
 
public function up()
{
    Schema::create('company_owners', function (Blueprint $table) {
        $table->increments('id');
        $table->integer('user_id')->unsigned();
        $table->integer('company_id')->unsigned();
        $table->timestamps();
    });
}

捋好公司表后，我们还要为 cafes 表和 cities 表建立关联：

xxxxxxxxxx
 
php artisan make:migration alter_cafes_add_city_id --table=cafes

编辑对应的数据表迁移类 up 方法如下：

xxxxxxxxxx
 
Schema::table('cafes', function (Blueprint $table) {
    $table->integer('city_id')->after('location_name')->unsigned()->nullable();
});

最后我们为 companies 添加一个 subscription 字段，标识该咖啡店是否支持订购，为 brew_methods 表添加 add_brew_methods_icon 字段，标识该冲泡方法的 icon 图标：

xxxxxxxxxx
 
php artisan make:migration alter_companies_add_subscription --table=companies
php artisan make:migration add_brew_methods_icon --table=brew_methods

对应的数据表迁移类 up 方法分别是：

xxxxxxxxxx
 
public function up()
{
    Schema::table('companies', function (Blueprint $table) {
        $table->tinyInteger('subscription')->defualt(0)->after('roaster');
    });
}

和：

xxxxxxxxxx
 
public function up()
{
    Schema::table('brew_methods', function (Blueprint $table) {
        $table->string('icon')->after('method');
    });
}

至此，我们已经完成了数据表迁移类的创建，运行 php artisan migrate 应用这些迁移，完成数据库中数据表创建及修改。

第二步：模型类调整

首先是创建两个模型类 Company 和 City：

xxxxxxxxxx
 
php artisan make:model Models/Company
php artisan make:model Models/City

然后编辑 Company 类代码如下，主要是定义两个关联关系，公司与用户之间是多对多的关系，与咖啡店之间是一对多的关系：

xxxxxxxxxx
 
class Company extends Model
{
    // 所属用户
    public function ownedBy()
    {
        return $this->belongsToMany(User::class, 'company_owners', 'company_id', 'user_id');
    }
​
    // 所有关联咖啡店
    public function cafes()
    {
        return $this->hasMany(Cafe::class, 'company_id', 'id');
    }
}

相对的，在 Cafe 模型类中定义其与 Company 的关联关系如下：

xxxxxxxxxx
 
// 归属公司
public function company()
{
    return $this->belongsTo(Company::class, 'company_id', 'id');
}

最后在 User 模型类中定义其与 Company 的关联关系：

xxxxxxxxxx
 
// 归属此用户的公司
public function companiesOwned()
{
    return $this->belongsToMany(Company::class, 'company_owners', 'user_id', 'company_id');
}

City 模型类留空即可。

第三步：后端路由及控制器实现

对于路由来说，只需要为获取城市信息新增两个公有路由即可：

xxxxxxxxxx
 
/*
|-------------------------------------------------------------------------------
| 获取所有城市
|-------------------------------------------------------------------------------
| URL:            /api/v1/cities
| Controller:     API\CitiesController@getCities
| Method:         GET
| Description:    Get all cities
*/
Route::get('/cities', 'API\CitiesController@getCities');
​
/*
|-------------------------------------------------------------------------------
| 获取指定城市
|-------------------------------------------------------------------------------
| URL:            /api/v1/cities/{slug}
| Controller:     API\CitiesController@getCity
| Method:         GET
| Description:    Gets an individual city
*/
Route::get('/cities/{slug}', 'API\CitiesController@getCity');

然后创建一个新的控制器：

xxxxxxxxxx
 
php artisan make:controller API/CitiesController

在这个新创建的控制器中编写对应的路由方法：

xxxxxxxxxx
 
class CitiesController extends Controller
{
    public function getCities()
    {
        $cities = City::all();
        return response()->json($cities);
    }
​
    public function getCity($slug)
    {
        $city = City::where('slug', '=', $slug)
            ->with(['cafes' => function ($query) {
                $query->with('company');
            }])
            ->first();
        if ($city != null) {
            return response()->json($city);
        } else {
            return response()->json(null, 404);
        }
    }
}

然后由于我们调整了咖啡店的数据结构，所以需要修改 CafesController 的 getCafes 和 getCafe 方法：

xxxxxxxxxx
 
public function getCafes()
{
    $cafes = Cafe::with('brewMethods')
        ->with(['tags' => function ($query) {
            $query->select('tag');
        }])
        ->with('company')
        ->withCount('userLike')
        ->withCount('likes')
        ->get();
​
    return response()->json($cafes);
}
​
public function getCafe($id)
{
    $cafe = Cafe::where('id', '=', $id)
        ->with('brewMethods')
        ->withCount('userLike')
        ->with('tags')
        ->with(['company' => function ($query) {
            $query->withCount('cafes');
        }])
        ->withCount('likes')
        ->first();
​
    return response()->json($cafe);
}

注：新增咖啡店方法代码放到下一篇教程去修改。

至此，我们的后端代码重构已经完成了，重头戏在前端，接下来我们将进行前端代码的重构。

第四步：新增 API 调用文件

创建一个新的 resources/assets/js/api/cities.js 文件，并编写后端 API 调用代码如下：

xxxxxxxxxx
 
/*
  Imports the Roast API URL from the config.
*/
import { ROAST_CONFIG } from '../config.js';
​
export default {
  /*
    GET   /api/v1/cities
  */
  getCities: function(){
    return axios.get( ROAST_CONFIG.API_URL + '/cities' );
  },
​
  /*
    GET   /api/v1/cities/{slug}
  */
  getCity: function( slug ){
    return axios.get( ROAST_CONFIG.API_URL + '/cities/' + slug );
  }
}

第五步：新增/调整 Vuex 模块

新增 resources/assets/js/modules/cities.js：

xxxxxxxxxx
 
/*
|-------------------------------------------------------------------------------
| VUEX modules/cities.js
|-------------------------------------------------------------------------------
| The Vuex data store for the cities state
*/
import CitiesAPI from '../api/cities.js';
​
export const cities = {
  /*
    Defines the state being monitored for the module.
  */
  state: {
    cities: [],
    citiesLoadStatus: 0,
​
    city: {},
    cityLoadStatus: 0
  },
​
  /*
    Defines the actions available on the module.
  */
  actions: {
    /*
      Loads all cities.
    */
    loadCities( { commit } ){
      commit('setCitiesLoadStatus', 1);
​
      /*
        Calls the API to load the cities
      */
      CitiesAPI.getCities()
               .then( function( response ){
                 commit( 'setCities', response.data );
                 commit( 'setCitiesLoadStatus', 2 );
               })
               .catch( function(){
                 commit( 'setCities', [] );
                 commit( 'setCitiesLoadStatus', 3 );
               });
    },
​
    /*
      Loads an individual city.
    */
    loadCity( { commit }, data ){
      commit( 'setCityLoadStatus', 1 );
​
      /*
        Calls the API to load an individual city by slug.
      */
      CitiesAPI.getCity( data.slug )
               .then( function( response ){
                 commit( 'setCity', response.data );
                 commit( 'setCityLoadStatus', 2 );
               })
               .catch( function(){
                 commit( 'setCity', {} );
                 commit( 'setCityLoadStatus', 3 );
               });
    }
  },
​
  /*
    Defines the mutations based on the data store.
  */
  mutations: {
    /*
      Sets the cities in the state.
    */
    setCities( state, cities ){
      state.cities = cities;
    },
​
    /*
      Sets the cities load status.
    */
    setCitiesLoadStatus( state, status ){
      state.citiesLoadStatus = status;
    },
​
    /*
      Sets the city
    */
    setCity( state, city ){
      state.city = city;
    },
​
    /*
      Sets the city load status.
    */
    setCityLoadStatus( state, status ){
      state.cityLoadStatus = status;
    }
  },
​
  /*
    Defines the getters on the module.
  */
  getters: {
    /*
      Gets the cities
    */
    getCities( state ){
      return state.cities;
    },
​
    /*
      Gets the cities load status.
    */
    getCitiesLoadStatus( state ){
      return state.citiesLoadStatus;
    },
​
    /*
      Get the city
    */
    getCity( state ){
      return state.city;
    },
​
    /*
      Get the city load status.
    */
    getCityLoadStatus( state ){
      return state.cityLoadStatus;
    }
  }
}

新增 resources/assets/js/modules/display.js：

xxxxxxxxxx
 
/*
|-------------------------------------------------------------------------------
| VUEX modules/display.js
|-------------------------------------------------------------------------------
| The Vuex data store for the display state
*/
export const display = {
    /*
      Defines the state being monitored for the module
    */
    state: {
        showFilters: true,
        showPopOut: false,
        zoomLevel: '',
        lat: 0.0,
        lng: 0.0
    },
​
    /*
      Defines the actions that can be performed on the state.
    */
    actions: {
        /*
          Toggles the showing and hiding of filters.
        */
        toggleShowFilters({commit}, data) {
            commit('setShowFilters', data.showFilters);
        },
​
        /*
          Toggles the showing and hiding of the popout.
        */
        toggleShowPopOut({commit}, data) {
            commit('setShowPopOut', data.showPopOut);
        },
​
        /*
          Applies the zoom level.
        */
        applyZoomLevel({commit}, data) {
            commit('setZoomLevel', data);
        },
​
        /*
          Applies the latitude.
        */
        applyLat({commit}, data) {
            commit('setLat', data);
        },
​
        /*
          Applies the longitude.
        */
        applyLng({commit}, data) {
            commit('setLng', data);
        }
    },
​
    /*
      Defines the mutations used by the state.
    */
    mutations: {
        /*
          Sets the state to show or hide the filters.
        */
        setShowFilters(state, show) {
            state.showFilters = show;
        },
​
        /*
          Sets the state to show or hide the pop out.
        */
        setShowPopOut(state, show) {
            state.showPopOut = show;
        },
​
        /*
          Sets the zoom level
        */
        setZoomLevel(state, level) {
            state.zoomLevel = level;
        },
​
        /*
          Sets the lat
        */
        setLat(state, lat) {
            state.lat = lat;
        },
​
        /*
          Sets the lng
        */
        setLng(state, lng) {
            state.lng = lng;
        }
    },
​
    /*
      Defines the getters on the Vuex module.
    */
    getters: {
        /*
          Returns whether or not the filters are shown or hidden.
        */
        getShowFilters(state) {
            return state.showFilters;
        },
​
        /*
          Returns whether or not the pop out is shown or hidden.
        */
        getShowPopOut(state) {
            return state.showPopOut;
        },
​
        /*
          Gets the zoom level
        */
        getZoomLevel(state) {
            return state.zoomLevel;
        },
​
        /*
          Gets the latitude
        */
        getLat(state) {
            return state.lat;
        },
​
        /*
          Gets the longitude
        */
        getLng(state) {
            return state.lng;
        }
    }
};

新增 resources/assets/js/modules/filters.js：

xxxxxxxxxx
 
/*
|-------------------------------------------------------------------------------
| VUEX modules/filters.js
|-------------------------------------------------------------------------------
| The Vuex data store for the filters state
*/
export const filters = {
    /*
      Defines the state used by the module
    */
    state: {
        cityFilter: '',
        textSearch: '',
        activeLocationFilter: 'all',
        onlyLiked: false,
        brewMethodsFilter: [],
        hasMatcha: false,
        hasTea: false,
        hasSubscription: false,
        orderBy: 'name',
        orderDirection: 'asc'
    },
​
    /*
      Defines the actions that can be performed on the state.
    */
    actions: {
        /*
          Updates the city filter.
        */
        updateCityFilter({commit}, data) {
            commit('setCityFilter', data);
        },
​
        /*
          Updates the text search filter
        */
        updateSetTextSearch({commit}, data) {
            commit('setTextSearch', data);
        },
​
        /*
          Updates the active location filter.
        */
        updateActiveLocationFilter({commit}, data) {
            commit('setActiveLocationFilter', data);
        },
​
        /*
          Updates the only liked filter.
        */
        updateOnlyLiked({commit}, data) {
            commit('setOnlyLiked', data);
        },
​
        /*
          Updates the brew methods filter.
        */
        updateBrewMethodsFilter({commit}, data) {
            commit('setBrewMethodsFilter', data);
        },
​
        /*
          Updates the has matcha filter.
        */
        updateHasMatcha({commit}, data) {
            commit('setHasMatcha', data);
        },
​
        /*
          Updates the has tea filter.
        */
        updateHasTea({commit}, data) {
            commit('setHasTea', data);
        },
​
        /*
          Updates the has subscription filter.
        */
        updateHasSubscription({commit}, data) {
            commit('setHasSubscription', data);
        },
​
        /*
          Updates the order by setting and sorts the cafes.
        */
        updateOrderBy({commit, state, dispatch}, data) {
            commit('setOrderBy', data);
            dispatch('orderCafes', {order: state.orderBy, direction: state.orderDirection});
        },
​
        /*
          Updates the order direction and sorts the cafes.
        */
        updateOrderDirection({commit, state, dispatch}, data) {
            commit('setOrderDirection', data);
            dispatch('orderCafes', {order: state.orderBy, direction: state.orderDirection});
        },
​
        /*
          Resets the filters
        */
        resetFilters({commit}, data) {
            commit('resetFilters');
        }
    },
​
    /*
      Defines the mutations used by the state.
    */
    mutations: {
        /*
          Sets the city filter.
        */
        setCityFilter(state, city) {
            state.cityFilter = city;
        },
​
        /*
          Sets the text search filter.
        */
        setTextSearch(state, search) {
            state.textSearch = search;
        },
​
        /*
          Sets the active location filter.
        */
        setActiveLocationFilter(state, activeLocationFilter) {
            state.activeLocationFilter = activeLocationFilter;
        },
​
        /*
          Sets the only liked filter.
        */
        setOnlyLiked(state, onlyLiked) {
            state.onlyLiked = onlyLiked;
        },
​
        /*
          Sets the brew methods filter.
        */
        setBrewMethodsFilter(state, brewMethods) {
            state.brewMethodsFilter = brewMethods;
        },
​
        /*
          Sets the has matcha filter.
        */
        setHasMatcha(state, matcha) {
            state.hasMatcha = matcha;
        },
​
        /*
          Sets the has tea filter.
        */
        setHasTea(state, tea) {
            state.hasTea = tea;
        },
​
        /*
          Sets the has subscription filter.
        */
        setHasSubscription(state, subscription) {
            state.hasSubscription = subscription;
        },
​
        /*
          Sets the order by filter.
        */
        setOrderBy(state, orderBy) {
            state.orderBy = orderBy;
        },
​
        /*
          Sets the order direction filter.
        */
        setOrderDirection(state, orderDirection) {
            state.orderDirection = orderDirection;
        },
​
        /*
          Resets the active filters.
        */
        resetFilters(state) {
            state.cityFilter = '';
            state.textSearch = '';
            state.activeLocationFilter = 'all';
            state.onlyLiked = false;
            state.brewMethodsFilter = [];
            state.hasMatcha = false;
            state.hasTea = false;
            state.hasSubscription = false;
            state.orderBy = 'name';
            state.orderDirection = 'desc';
        }
    },
​
    /*
      Defines the getters on the Vuex module.
    */
    getters: {
        /*
          Gets the city fitler.
        */
        getCityFilter(state) {
            return state.cityFilter;
        },
​
        /*
          Gets the text search filter.
        */
        getTextSearch(state) {
            return state.textSearch;
        },
​
        /*
          Gets the active location filter.
        */
        getActiveLocationFilter(state) {
            return state.activeLocationFilter;
        },
​
        /*
          Gets the only liked filter.
        */
        getOnlyLiked(state) {
            return state.onlyLiked;
        },
​
        /*
          Gets the brew methods filter.
        */
        getBrewMethodsFilter(state) {
            return state.brewMethodsFilter;
        },
​
        /*
          Gets the has matcha filter.
        */
        getHasMatcha(state) {
            return state.hasMatcha;
        },
​
        /*
          Gets the has tea filter.
        */
        getHasTea(state) {
            return state.hasTea;
        },
​
        /*
          Gets the has subscription filter.
        */
        getHasSubscription(state) {
            return state.hasSubscription;
        },
​
        /*
          Gets the order by filter.
        */
        getOrderBy(state) {
            return state.orderBy;
        },
​
        /*
          Gets the order direction filter.
        */
        getOrderDirection(state) {
            return state.orderDirection;
        }
    }
};

调整 resources/assets/js/modules/cafes.js：

xxxxxxxxxx
 
/*
 |-------------------------------------------------------------------------------
 | VUEX modules/cafes.js
 |-------------------------------------------------------------------------------
 | The Vuex data store for the cafes
 */
​
import CafeAPI from '../api/cafe.js';
​
export const cafes = {
    /**
     * Defines the state being monitored for the module.
     */
    state: {
        cafes: [],
        cafesLoadStatus: 0,
​
        cafe: {},
        cafeLoadStatus: 0,
​
        cafeLiked: false,
        cafeLikeActionStatus: 0,
        cafeUnlikeActionStatus: 0,
​
        cafeAdded: {},
        cafeAddStatus: 0,
        cafeAddText: '',
​
        cafeDeletedStatus: 0,
        cafeDeleteText: '',
​
        cafesView: 'map'
    },
    /**
     * Defines the actions used to retrieve the data.
     */
    actions: {
        loadCafes({commit, rootState, dispatch}) {
            commit('setCafesLoadStatus', 1);
​
            CafeAPI.getCafes()
                .then(function (response) {
                    commit('setCafes', response.data);
                    dispatch('orderCafes', {
                        order: rootState.filters.orderBy,
                        direction: rootState.filters.orderDirection
                    });
                    commit('setCafesLoadStatus', 2);
                })
                .catch(function () {
                    commit('setCafes', []);
                    commit('setCafesLoadStatus', 3);
                });
        },
​
        loadCafe({commit}, data) {
            commit('setCafeLikedStatus', false);
            commit('setCafeLoadStatus', 1);
​
            CafeAPI.getCafe(data.id)
                .then(function (response) {
                    commit('setCafe', response.data);
                    if (response.data.user_like.length > 0) {
                        commit('setCafeLikedStatus', true);
                    }
                    commit('setCafeLoadStatus', 2);
                })
                .catch(function () {
                    commit('setCafe', {});
                    commit('setCafeLoadStatus', 3);
                });
        },
​
        addCafe({commit, state, dispatch}, data) {
            commit('setCafeAddStatus', 1);
​
            CafeAPI.postAddNewCafe(data.name, data.locations, data.website, data.description, data.roaster, data.picture)
                .then(function (response) {
                    commit('setCafeAddedStatus', 2);
                    dispatch('loadCafes');
                })
                .catch(function () {
                    commit('setCafeAddedStatus', 3);
                });
        },
​
        likeCafe({commit, state}, data) {
            commit('setCafeLikeActionStatus', 1);
​
            CafeAPI.postLikeCafe(data.id)
                .then(function (response) {
                    commit('setCafeLikedStatus', true);
                    commit('setCafeLikeActionStatus', 2);
                })
                .catch(function () {
                    commit('setCafeLikeActionStatus', 3);
                });
        },
​
        unlikeCafe({commit, state}, data) {
            commit('setCafeUnlikeActionStatus', 1);
​
            CafeAPI.deleteLikeCafe(data.id)
                .then(function (response) {
                    commit('setCafeLikedStatus', false);
                    commit('setCafeUnlikeActionStatus', 2);
                })
                .catch(function () {
                    commit('setCafeUnlikeActionStatus', 3);
                });
        },
​
        changeCafesView({commit, state, dispatch}, view) {
            commit('setCafesView', view);
        },
​
        orderCafes({commit, state, dispatch}, data) {
            let localCafes = state.cafes;
​
            switch (data.order) {
                case 'name':
                    localCafes.sort(function (a, b) {
                        if (data.direction === 'desc') {
                            return ((a.company.name === b.company.name) ? 0 : ((a.company.name < b.company.name) ? 1 : -1));
                        } else {
                            return ((a.company.name === b.company.name) ? 0 : ((a.company.name > b.company.name) ? 1 : -1));
                        }
                    });
                    break;
                case 'most-liked':
                    localCafes.sort(function (a, b) {
                        if (data.direction === 'desc') {
                            return ((a.likes_count === b.likes_count) ? 0 : ((a.likes_count < b.likes_count) ? 1 : -1));
                        } else {
                            return ((a.likes_count === b.likes_count) ? 0 : ((a.likes_count > b.likes_count) ? 1 : -1));
                        }
                    });
                    break;
            }
​
            commit('setCafes', localCafes);
        }
    },
    /**
     * Defines the mutations used
     */
    mutations: {
        setCafesLoadStatus(state, status) {
            state.cafesLoadStatus = status;
        },
​
        setCafes(state, cafes) {
            state.cafes = cafes;
        },
​
        setCafeLoadStatus(state, status) {
            state.cafeLoadStatus = status;
        },
​
        setCafe(state, cafe) {
            state.cafe = cafe;
        },
​
        setCafeAddStatus(state, status) {
            state.cafeAddStatus = status;
        },
​
        setCafeAdded( state, cafe ){
            state.cafeAdded = cafe;
        },
​
        setCafeAddedText( state, text ){
            state.cafeAddText = text;
        },
​
        setCafeLikedStatus(state, status) {
            state.cafeLiked = status;
        },
​
        setCafeLikeActionStatus(state, status) {
            state.cafeLikeActionStatus = status;
        },
​
        setCafeUnlikeActionStatus(state, status) {
            state.cafeUnlikeActionStatus = status;
        },
​
        setCafesView(state, view) {
            state.cafesView = view
        }
    },
    /**
     * Defines the getters used by the module
     */
    getters: {
        getCafesLoadStatus(state) {
            return state.cafesLoadStatus;
        },
​
        getCafes(state) {
            return state.cafes;
        },
​
        getCafeLoadStatus(state) {
            return state.cafeLoadStatus;
        },
​
        getCafe(state) {
            return state.cafe;
        },
​
        getCafeAddStatus(state) {
            return state.cafeAddStatus;
        },
​
        getAddedCafe( state ){
            return state.cafeAdded;
        },
​
        getCafeAddText( state ){
            return state.cafeAddText;
        },
​
        getCafeLikedStatus(state) {
            return state.cafeLiked;
        },
​
        getCafeLikeActionStatus(state) {
            return state.cafeLikeActionStatus;
        },
​
        getCafeUnlikeActionStatus(state) {
            return state.cafeUnlikeActionStatus;
        },
​
        getCafesView(state) {
            return state.cafesView;
        }
    }
};

然后在 resources/assets/js/store.js 中引入新增的几个文件：

xxxxxxxxxx
 
/**
 * Imports all of the modules used in the application to build the data store.
 */
import {cafes} from './modules/cafes.js';
import {users} from './modules/users.js';
import {brewMethods} from './modules/brewMethods.js';
import {filters} from './modules/filters.js';
import {display} from './modules/display.js';
import {cities} from './modules/cities.js';
​
/**
 * Export our data store.
 */
export default new Vuex.Store({
    modules: {
        cafes,
        users,
        brewMethods,
        filters,
        display,
        cities
    }
});

第六步：调整 Vue Router

打开 resources/assets/js/routes.js 文件，修改前端路由配置如下：

xxxxxxxxxx
 
export default new VueRouter({
    routes: [
        {
            path: '/',
            redirect: {name: 'cafes'},
            name: 'layout',
            component: Vue.component('Home', require('./layouts/Layout.vue')),
            children: [
                {
                    path: 'cafes',
                    name: 'cafes',
                    component: Vue.component('Home', require('./pages/Home.vue')),
                    children: [
                        {
                            path: 'new',
                            name: 'newcafe',
                            component: Vue.component('NewCafe', require('./pages/NewCafe.vue')),
                            beforeEnter: requireAuth
                        },
                        {
                            path: ':id',
                            name: 'cafe',
                            component: Vue.component('Cafe', require('./pages/Cafe.vue'))
                        },
                        {
                            path: 'cities/:slug',
                            name: 'city',
                            component: Vue.component( 'City', require( './pages/City.vue' ))
                        }
                    ]
                },
                {
                    path: 'profile',
                    name: 'profile',
                    component: Vue.component('Profile', require('./pages/Profile.vue')),
                    beforeEnter: requireAuth
                },
                {
                    path: '_=_',
                    redirect: '/'
                }
            ]
        }
    ]
});

在这里我们将 Layout.vue 移动到 resources/assets/js/layouts 目录下，同时将 Cafes.vue 合并到 Home.vue 页面。接下来我们就要来具体重构 Layout.vue 和 Home.vue 页面组件，从而完成首页重构。

第七步：重构 Layout 组件

重构 resources/assets/js/layouts/Layout.vue 代码如下：

xxxxxxxxxx
 
<style lang="scss">
    @import '~@/abstracts/_variables.scss';
​
    div#app-layout {
        div.show-filters {
            height: 90px;
            width: 23px;
            position: absolute;
            left: 0px;
            background-color: white;
            border-top-right-radius: 3px;
            border-bottom-right-radius: 3px;
            line-height: 90px;
            top: 50%;
            cursor: pointer;
            margin-top: -45px;
            z-index: 9;
            text-align: center;
        }
    }
</style>
​
<template>
    <div id="app-layout">
        <div class="show-filters" v-show="( !showFilters && cafesView === 'map' )" v-on:click="toggleShowFilters()">
            <img src="/storage/img/grey-right.svg"/>
        </div>
​
        <success-notification></success-notification>
        <error-notification></error-notification>
​
        <navigation></navigation>
​
        <router-view></router-view>
​
        <login-modal></login-modal>
​
        <filters></filters>
​
        <pop-out></pop-out>
    </div>
</template>
​
<script>
​
    import Navigation from '../components/global/Navigation.vue';
    import LoginModal from '../components/global/LoginModal.vue';
    import SuccessNotification from '../components/global/SuccessNotification.vue';
    import ErrorNotification from '../components/global/ErrorNotification.vue';
    import Filters from '../components/global/Filters.vue';
    import PopOut from '../components/global/PopOut.vue';
​
    export default {
        components: {
            Navigation,
            LoginModal,
            SuccessNotification,
            ErrorNotification,
            Filters,
            PopOut
        },
        created() {
            this.$store.dispatch('loadCafes');
            this.$store.dispatch('loadUser');
            this.$store.dispatch('loadBrewMethods');
            this.$store.dispatch('loadCities');
        },
        computed: {
            showFilters() {
                return this.$store.getters.getShowFilters;
            },
​
            addedCafe() {
                return this.$store.getters.getAddedCafe;
            },
​
            addCafeStatus() {
                return this.$store.getters.getCafeAddStatus;
            },
​
            cafesView() {
                return this.$store.getters.getCafesView;
            }
        },
​
        watch: {
            'addCafeStatus': function () {
                if (this.addCafeStatus === 2) {
                    EventBus.$emit('show-success', {
                        notification: this.addedCafe.name + ' 已经添加成功!'
                    });
                }
            }
        },
​
        methods: {
            toggleShowFilters() {
                this.$store.dispatch('toggleShowFilters', {showFilters: !this.showFilters});
            }
        }
    }
</script>

这里面引入几个新的组件，我们需要依次创建这些组件。

resources/assets/js/components/global/SuccessNotification.vue 用于显示成功通知：

xxxxxxxxxx
 
<style lang="scss">
    @import '~@/abstracts/_variables.scss';
​
    div.success-notification-container {
        position: fixed;
        z-index: 999999;
        left: 0;
        right: 0;
        top: 0;
        div.success-notification {
            background: #FFFFFF;
            box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.12), 0 4px 4px 0 rgba(0, 0, 0, 0.24);
            border-left: 5px solid #00C853;
            height: 50px;
            line-height: 50px;
            margin: auto;
            width: 400px;
            margin-top: 150px;
            color: #242E38;
            font-family: "Lato", sans-serif;
            font-size: 16px;
            img {
                margin-right: 20px;
                margin-left: 20px;
            }
        }
    }
</style>
​
<template>
    <transition name="slide-in-top">
        <div class="success-notification-container" v-show="show">
            <div class="success-notification">
                <img src="/storage/img/success.svg"/> {{ successMessage }}
            </div>
        </div>
    </transition>
</template>
​
<script>
​
    import {EventBus} from '../../event-bus.js';
​
    export default {
​
        data() {
            return {
                successMessage: '',
                show: false
            }
        },
​
        mounted() {
            EventBus.$on('show-success', function (data) {
                this.successMessage = data.notification;
                this.show = true;
​
                setTimeout(function () {
                    this.show = false;
                }.bind(this), 3000);
            }.bind(this));
        }
    }
</script>

resources/assets/js/components/global/ErrorNotification.vue 用于显示失败通知：

xxxxxxxxxx
 
<style lang="scss">
    @import '~@/abstracts/_variables.scss';
​
    div.error-notification-container {
        position: fixed;
        z-index: 999999;
        left: 0;
        right: 0;
        top: 0;
        div.error-notification {
            background: #FFFFFF;
            box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.12), 0 4px 4px 0 rgba(0, 0, 0, 0.24);
            border-left: 5px solid #FF0000;
            height: 50px;
            line-height: 50px;
            margin: auto;
            width: 400px;
            margin-top: 150px;
            color: #242E38;
            font-family: "Lato", sans-serif;
            font-size: 16px;
            img {
                margin-right: 20px;
                margin-left: 20px;
                height: 20px;
            }
        }
    }
</style>
​
<template>
    <transition name="slide-in-top">
        <div class="error-notification-container" v-show="show">
            <div class="error-notification">
                <img src="/storage/img/error.svg"/> {{ errorMessage }}
            </div>
        </div>
    </transition>
</template>
​
<script>
​
    import {EventBus} from '../../event-bus.js';
​
    export default {
​
        data() {
            return {
                errorMessage: '',
                show: false
            }
        },
​
        mounted() {
            EventBus.$on('show-error', function (data) {
                this.errorMessage = data.notification;
                this.show = true;
​
                setTimeout(function () {
                    this.show = false;
                }.bind(this), 3000);
            }.bind(this));
        }
    }
</script>

resources/assets/js/components/global/Filters.vue 用于实现过滤器：

xxxxxxxxxx
 
<style lang="scss">
    @import '~@/abstracts/_variables.scss';
​
    div.filters-container {
        background-color: white;
        position: fixed;
        left: 0;
        bottom: 0;
        top: 75px;
        max-width: 550px;
        width: 100%;
        padding-top: 50px;
        box-shadow: 0 2px 4px 0 rgba(3, 27, 78, 0.10);
        z-index: 99;
        span.clear-filters {
            font-size: 16px;
            color: $text-secondary-color;
            font-family: "Lato", sans-serif;
            cursor: pointer;
            display: block;
            float: left;
            margin-bottom: 20px;
            display: none;
            img {
                margin-right: 10px;
                float: left;
                margin-top: 6px;
            }
        }
        span.filters-header {
            display: block;
            font-family: "Lato", sans-serif;
            font-weight: bold;
            margin-bottom: 10px;
        }
        input[type="text"].search {
            box-shadow: none;
            border-radius: 3px;
            color: #BABABA;
            font-size: 16px;
            font-family: "Lato", sans-serif;
            background-image: url('/storage/img/search-icon.svg');
            background-repeat: no-repeat;
            background-position: 6px;
            padding-left: 35px;
            padding-top: 5px;
            padding-bottom: 5px;
        }
        label.filter-label {
            font-family: "Lato", sans-serif;
            text-transform: uppercase;
            font-weight: bold;
            color: black;
            margin-top: 20px;
            margin-bottom: 10px;
        }
        div.location-filter {
            text-align: center;
            font-family: "Lato", sans-serif;
            font-size: 16px;
            color: $secondary-color;
            border-bottom: 1px solid $secondary-color;
            border-top: 1px solid $secondary-color;
            border-left: 1px solid $secondary-color;
            border-right: 1px solid $secondary-color;
            width: 33%;
            display: inline-block;
            height: 55px;
            line-height: 55px;
            cursor: pointer;
            margin-bottom: 5px;
            &.active {
                color: white;
                background-color: $secondary-color;
            }
            &.all-locations {
                border-top-left-radius: 3px;
                border-bottom-left-radius: 3px;
            }
            &.roasters {
                border-left: none;
                border-right: none;
            }
            &.cafes {
                border-top-right-radius: 3px;
                border-bottom-right-radius: 3px;
            }
        }
        span.liked-location-label {
            color: #666666;
            font-size: 16px;
            font-family: "Lato", sans-serif;
            margin-left: 10px;
        }
        div.close-filters {
            height: 90px;
            width: 23px;
            position: absolute;
            right: -20px;
            background-color: white;
            border-top-right-radius: 3px;
            border-bottom-right-radius: 3px;
            line-height: 90px;
            top: 50%;
            cursor: pointer;
            margin-top: -82px;
            text-align: center;
        }
        span.no-results {
            display: block;
            text-align: center;
            margin-top: 50px;
            color: #666666;
            text-transform: uppercase;
            font-weight: 600;
        }
    }
​
    /* Small only */
    @media screen and (max-width: 39.9375em) {
        div.filters-container {
            padding-top: 25px;
            overflow-y: auto;
            span.clear-filters {
                display: block;
            }
            div.close-filters {
                display: none;
            }
        }
    }
​
    /* Medium only */
    @media screen and (min-width: 40em) and (max-width: 63.9375em) {
    }
​
    /* Large only */
    @media screen and (min-width: 64em) and (max-width: 74.9375em) {
    }
</style>
​
<template>
    <transition name="slide-in-left">
        <div class="filters-container" id="filters-container" v-show="showFilters && cafesView === 'map'">
            <div class="close-filters" v-on:click="toggleShowFilters()">
                <img src="/storage/img/grey-left.svg"/>
            </div>
​
            <div class="grid-x grid-padding-x">
                <div class="large-12 medium-12 small-12 cell">
                    <span class="filters-header">城市</span>
                    <select v-model="cityFilter">
                        <option value=""></option>
                        <option v-for="city in cities" v-bind:value="city.id">{{ city.name }}</option>
                    </select>
                </div>
            </div>
​
            <div class="grid-x grid-padding-x">
                <div class="large-12 medium-12 small-12 cell">
                    <span class="filters-header">查找你寻找的咖啡店类型</span>
                </div>
            </div>
​
            <div class="grid-x grid-padding-x" id="text-container">
                <div class="large-12 medium-12 small-12 cell">
                    <span class="clear-filters" v-show="showFilters" v-on:click="clearFilters()">
                        <img src="/storage/img/clear-filters-icon.svg"/> 清除过滤器
                    </span>
                    <input type="text" class="search" v-model="textSearch" placeholder="通过名称查找位置"/>
                </div>
            </div>
​
            <div id="location-type-container">
                <div class="grid-x grid-padding-x">
                    <div class="large-12 medium-12 small-12 cell">
                        <label class="filter-label">位置类型</label>
                    </div>
                </div>
​
                <div class="grid-x grid-padding-x">
                    <div class="large-12 medium-12 small-12 cell">
                        <div class="location-filter all-locations"
                             v-bind:class="{ 'active': activeLocationFilter === 'all' }"
                             v-on:click="setActiveLocationFilter('all')">
                            所有位置
                        </div>
                        <div class="location-filter roasters"
                             v-bind:class="{ 'active': activeLocationFilter === 'roasters' }"
                             v-on:click="setActiveLocationFilter('roasters')">
                            烘焙店
                        </div>
                        <div class="location-filter cafes" v-bind:class="{ 'active': activeLocationFilter === 'cafes' }"
                             v-on:click="setActiveLocationFilter('cafes')">
                            咖啡店
                        </div>
                    </div>
                </div>
            </div>
​
            <div class="grid-x grid-padding-x" id="only-liked-container" v-show="user != '' && userLoadStatus === 2">
                <div class="large-12 medium-12 small-12 cell">
                    <input type="checkbox" v-model="onlyLiked"/> <span class="liked-location-label">只显示我喜欢过的</span>
                </div>
            </div>
​
            <div class="grid-x grid-padding-x"
                 v-show="activeLocationFilter === 'roasters' || activeLocationFilter === 'all'">
                <div class="large-12 medium-12 small-12 cell">
                    <label class="filter-label">是否提供订购服务</label>
                </div>
            </div>
​
            <div class="grid-x grid-padding-x"
                 v-show="activeLocationFilter === 'roasters' || activeLocationFilter === 'all'">
                <div class="large-12 medium-12 small-12 cell">
                    <div class="subscription option" v-on:click="toggleSubscriptionFilter()"
                         v-bind:class="{'active': hasSubscription }">
                        <div class="option-container">
                            <img src="/storage/img/coffee-pack.svg" class="option-icon"/>
                            <span class="option-name">咖啡订购</span>
                        </div>
                    </div>
                </div>
            </div>
​
            <div id="brew-methods-container">
                <div class="grid-x grid-padding-x">
                    <div class="large-12 medium-12 small-12 cell">
                        <label class="filter-label">冲泡方法</label>
                    </div>
                </div>
​
                <div class="grid-x grid-padding-x">
                    <div class="large-12 medium-12 small-12 cell">
                        <div class="brew-method option" v-on:click="toggleBrewMethodFilter( method.id )"
                             v-for="method in brewMethods" v-if="method.cafes_count > 0"
                             v-bind:class="{'active': brewMethodsFilter.indexOf( method.id ) >= 0 }">
                            <div class="option-container">
                                <img v-bind:src="method.icon" class="option-icon"/> <span class="option-name">{{ method.method }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
​
            <div id="drink-options-container">
                <div class="grid-x grid-padding-x">
                    <div class="large-12 medium-12 small-12 cell">
                        <label class="filter-label">饮料选项</label>
                    </div>
                </div>
​
                <div class="grid-x grid-padding-x">
                    <div class="large-12 medium-12 small-12 cell">
                        <div class="drink-option option" v-on:click="toggleMatchaFilter()"
                             v-bind:class="{'active':hasMatcha}">
                            <div class="option-container">
                                <img src="/storage/img/matcha-latte.svg" class="option-icon"/>
                                <span class="option-name">抹茶</span>
                            </div>
                        </div>
                        <div class="drink-option option" v-on:click="toggleTeaFilter()"
                             v-bind:class="{'active':hasTea}">
                            <div class="option-container">
                                <img src="/storage/img/tea-bag.svg" class="option-icon"/>
                                <span class="option-name">茶包</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
​
        </div>
    </transition>
</template>
​
<script>
​
    import {EventBus} from '../../event-bus.js';
​
    export default {
        mounted() {
            // 显示过滤器
            EventBus.$on('show-filters', function () {
                this.show = true;
            }.bind(this));
            // 清除过滤器
            EventBus.$on('clear-filters', function () {
                this.clearFilters();
            }.bind(this));
        },
        watch: {
            'cityFilter': function () {
                if (this.cityFilter != '') {
                    let slug = '';
​
                    for (let i = 0; i < this.cities.length; i++) {
                        if (this.cities[i].id === this.cityFilter) {
                            slug = this.cities[i].slug;
                        }
                    }
                    if (slug == '') {
                        this.$router.push({name: 'cafes'});
                    } else {
                        this.$router.push({name: 'city', params: {slug: slug}});
                    }
                } else {
                    this.$router.push({name: 'cafes'});
                }
            },
            'citiesLoadStatus': function () {
                if (this.citiesLoadStatus === 2 && this.$route.name === 'city') {
                    let id = '';
                    for (let i = 0; i < this.cities.length; i++) {
                        if (this.cities[i].slug === this.$route.params.slug) {
                            this.cityFilter = this.cities[i].id;
                        }
                    }
                }
            }
        },
​
        computed: {
​
            cities() {
                return this.$store.getters.getCities;
            },
​
            citiesLoadStatus() {
                return this.$store.getters.getCitiesLoadStatus;
            },
​
            cityFilter: {
                set(cityFilter) {
                    this.$store.commit('setCityFilter', cityFilter);
                },
                get() {
                    return this.$store.getters.getCityFilter;
                }
            },
​
            showFilters() {
                return this.$store.getters.getShowFilters;
            },
​
            brewMethods() {
                return this.$store.getters.getBrewMethods;
            },
​
            user() {
                return this.$store.getters.getUser;
            },
​
            userLoadStatus() {
                return this.$store.getters.getUserLoadStatus();
            },
​
            cafesView() {
                return this.$store.getters.getCafesView;
            },
​
            textSearch: {
                set(textSearch) {
                    this.$store.commit('setTextSearch', textSearch)
                },
                get() {
                    return this.$store.getters.getTextSearch;
                }
            },
​
            activeLocationFilter() {
                return this.$store.getters.getActiveLocationFilter;
            },
​
            onlyLiked: {
                set(onlyLiked) {
                    this.$store.commit('setOnlyLiked', onlyLiked);
                },
                get() {
                    return this.$store.getters.getOnlyLiked;
                }
            },
​
            brewMethodsFilter() {
                return this.$store.getters.getBrewMethodsFilter;
            },
​
            hasMatcha() {
                return this.$store.getters.getHasMatcha;
            },
​
            hasTea() {
                return this.$store.getters.getHasTea;
            },
​
            hasSubscription() {
                return this.$store.getters.getHasSubscription;
            }
        },
​
        methods: {
​
            setActiveLocationFilter(filter) {
                this.$store.dispatch('updateActiveLocationFilter', filter);
            },
​
            toggleBrewMethodFilter(id) {
                let localBrewMethodsFilter = this.brewMethodsFilter;
                /*
                  If the filter is in the selected filter, we remove it, otherwise
                  we add it.
                */
                if (localBrewMethodsFilter.indexOf(id) >= 0) {
                    localBrewMethodsFilter.splice(localBrewMethodsFilter.indexOf(id), 1);
                } else {
                    localBrewMethodsFilter.push(id);
                }
                this.$store.dispatch('updateBrewMethodsFilter', localBrewMethodsFilter);
            },
​
            toggleShowFilters() {
                this.$store.dispatch('toggleShowFilters', {showFilters: !this.showFilters});
            },
​
            toggleMatchaFilter() {
                this.$store.dispatch('updateHasMatcha', !this.hasMatcha);
            },
​
            toggleTeaFilter() {
                this.$store.dispatch('updateHasTea', !this.hasTea);
            },
​
            toggleSubscriptionFilter() {
                this.$store.dispatch('updateHasSubscription', !this.hasSubscription);
            },
​
            clearFilters() {
                this.$store.dispatch('resetFilters');
            }
        }
    }
</script>

resources/assets/js/components/global/PopOut.vue 用于实现滑出菜单：

xxxxxxxxxx
 
<style lang="scss">
    @import '~@/abstracts/_variables.scss';
​
    div.pop-out {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        background-color: rgba(55, 44, 12, .29);
        z-index: 9999;
        div.pop-out-side-bar {
            position: fixed;
            right: 0;
            bottom: 0;
            top: 0;
            width: 250px;
            background-color: white;
            box-shadow: -2px 0 4px 0 rgba(3, 27, 78, 0.10);
            padding: 30px;
            div.side-bar-link {
                border-bottom: 1px solid #BABABA;
                font-size: 16px;
                font-weight: bold;
                font-family: "Lato", sans-serif;
                text-transform: uppercase;
                padding-top: 25px;
                padding-bottom: 25px;
                a {
                    color: black;
                }
            }
            img.close-menu-icon {
                float: right;
                cursor: pointer;
            }
            div.ssu-container {
                position: absolute;
                bottom: 30px;
                span.ssu-built-on {
                    color: black;
                    font-size: 14px;
                    font-family: "Lato", sans-serif;
                    display: block;
                    margin-bottom: 10px;
                }
                img {
                    margin: auto;
                    max-width: 190px;
                }
            }
        }
    }
</style>
​
<template>
    <div class="pop-out" v-show="showPopOut" v-on:click="hideNav()">
        <transition name="slide-in-right">
            <div class="pop-out-side-bar" v-show="showRightNav" v-on:click.stop>
                <img src="/storage/img/close-menu.svg" class="close-menu-icon" v-on:click="hideNav()"/>
                <div class="side-bar-link">
                    <router-link :to="{ name: 'cafes' }" v-on:click.native="hideNav()">
                        咖啡店
                    </router-link>
                </div>
                <div class="side-bar-link" v-if="user != '' && userLoadStatus === 2">
                    <router-link :to="{ name: 'newcafe' }" v-on:click.native="hideNav()">
                        新增咖啡店
                    </router-link>
                </div>
                <div class="side-bar-link" v-if="user != '' && userLoadStatus === 2">
                    <router-link :to="{ name: 'profile' }" v-on:click.native="hideNav()">
                        个人信息
                    </router-link>
                </div>
                <div class="side-bar-link" v-if="user != '' && userLoadStatus === 2 && user.permission >= 1">
                    <router-link :to="{ name: 'admin'}" v-on:click.native="hideNav()">
                        后台
                    </router-link>
                </div>
                <div class="side-bar-link">
                    <a v-if="user != '' && userLoadStatus === 2" v-show="userLoadStatus === 2"
                       v-on:click="logout()">退出</a>
                    <a v-if="user == ''" v-on:click="login()">登录</a>
                </div>
                <div class="side-bar-link">
                    <a href="https://github.com/nonfu/roastapp/issues/new/choose" target="_blank">
                        提交bug
                    </a>
                </div>
                <div class="side-bar-link">
                    <a href="https://laravel.geekai.co/api-driven-development-laravel-vue" target="_blank">
                        项目文档
                    </a>
                </div>
                <div class="side-bar-link">
                    <a href="https://github.com/nonfu/roastapp" target="_blank">
                        在Github上查看
                    </a>
                </div>
            </div>
        </transition>
    </div>
</template>
​
<script>
​
    import {EventBus} from '../../event-bus.js';
​
    export default {
​
        computed: {
            showPopOut() {
                return this.$store.getters.getShowPopOut;
            },
​
            showRightNav() {
                return this.showPopOut;
            },
​
            user() {
                return this.$store.getters.getUser;
            },
​
            userLoadStatus() {
                return this.$store.getters.getUserLoadStatus();
            }
        },
​
        methods: {
            hideNav() {
                this.$store.dispatch('toggleShowPopOut', {showPopOut: false});
            },
​
            login() {
                this.$store.dispatch('toggleShowPopOut', {showPopOut: false});
                EventBus.$emit('prompt-login');
            },
​
            logout() {
                this.$store.dispatch('logoutUser');
                window.location = '/logout';
            }
        }
    }
</script>

最后，我们还要修改原来的导航组件 resources/assets/js/components/global/Navigation.vue：

xxxxxxxxxx
 
<style lang="scss">
    @import '~@/abstracts/_variables.scss';
​
    nav.top-navigation {
        background-color: #FFFFFF;
        height: 75px;
        box-shadow: 0 2px 4px 0 rgba(3, 27, 78, 0.1);
        z-index: 9999;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        a.filters {
            cursor: pointer;
            color: $secondary-color;
            width: 140px;
            height: 45px;
            border: 2px solid $secondary-color;
            border-radius: 3px;
            text-transform: uppercase;
            display: block;
            float: left;
            text-align: center;
            line-height: 41px;
            margin-top: 15px;
            margin-left: 20px;
            font-family: "Lato", sans-serif;
            font-weight: bold;
            font-size: 16px;
            img {
                display: inline-block;
                vertical-align: middle;
                margin-right: 10px;
                height: 13px;
                &.list {
                    transform: rotate(-90deg);
                }
            }
            img.chevron-active {
                display: none;
            }
            &.active {
                background-color: $secondary-color;
                color: white;
                img.chevron {
                    display: none;
                }
                img.chevron-active {
                    display: inline-block;
                    &.list {
                        transform: rotate(-90deg);
                    }
                }
            }
            span.filter-count-active {
                display: inline-block;
                margin-left: 5px;
            }
        }
        span.clear-filters {
            font-size: 16px;
            color: $text-secondary-color;
            font-family: "Lato", sans-serif;
            cursor: pointer;
            margin-left: 15px;
            display: block;
            float: left;
            margin-top: 25px;
            img {
                margin-right: 10px;
                float: left;
                margin-top: 6px;
            }
        }
        img.logo {
            margin: auto;
            margin-top: 22.5px;
            margin-bottom: 22.5px;
            display: block;
        }
        img.hamburger {
            float: right;
            margin-right: 18px;
            margin-top: 30px;
            cursor: pointer;
        }
        img.avatar {
            float: right;
            margin-right: 20px;
            width: 40px;
            height: 40px;
            border-radius: 20px;
            margin-top: 18px;
        }
        &:after {
            content: "";
            display: table;
            clear: both;
        }
        span.login {
            font-family: "Lato", sans-serif;
            font-size: 16px;
            text-transform: uppercase;
            color: black;
            font-weight: bold;
            float: right;
            margin-top: 27px;
            margin-right: 15px;
            cursor: pointer;
        }
    }
​
    /* Small only */
    @media screen and (max-width: 39.9375em) {
        nav.top-navigation {
            a.filters {
                line-height: 31px;
                margin-top: 20px;
                width: 75px;
                height: 35px;
                img {
                    display: none;
                }
                &.active {
                    img.chevron-active {
                        display: none;
                    }
                }
            }
            span.clear-filters {
                display: none;
            }
            span.login {
                display: none;
            }
            img.hamburger {
                margin-top: 26px;
            }
        }
    }
​
    /* Medium only */
    @media screen and (min-width: 40em) and (max-width: 63.9375em) {
    }
​
    /* Large only */
    @media screen and (min-width: 64em) and (max-width: 74.9375em) {
    }
</style>
​
<template>
    <nav class="top-navigation">
        <div class="grid-x">
            <div class="large-4 medium-4 small-4 cell">
                <a class="filters" v-bind:class="{'active': showFilters}" v-on:click="toggleShowFilters()">
                    <img class="chevron" v-bind:class="{'list' : cafesView === 'list'}"
                         src="/storage/img/chevron-right.svg"/>
                    <img class="chevron-active" v-bind:class="{'list' : cafesView === 'list'}"
                         src="/storage/img/chevron-right-active.svg"/> 过滤器
                    <span class="filter-count-active" v-show="activeFilterCount > 0">({{ activeFilterCount }})</span>
                </a>
​
                <span class="clear-filters" v-show="showFilters" v-on:click="clearFilters()">
                    <img src="/storage/img/clear-filters-icon.svg"/> 清除过滤器
                </span>
​
            </div>
            <div class="large-4 medium-4 small-4 cell">
                <router-link :to="{ name: 'cafes'}">
                    <img src="/storage/img/logo.svg" class="logo"/>
                </router-link>
            </div>
            <div class="large-4 medium-4 small-4 cell">
                <img class="hamburger" src="/storage/img/hamburger.svg" v-on:click="setShowPopOut()"/>
                <img class="avatar" v-if="user != '' && userLoadStatus === 2" :src="user.avatar"
                     v-show="userLoadStatus === 2"/>
                <span class="login" v-if="user == ''" v-on:click="login()">登录</span>
            </div>
        </div>
    </nav>
</template>
​
<script>
    import {EventBus} from '../../event-bus.js';
​
    export default {
        // 定义组件的计算属性
        computed: {
            // 从 Vuex 中获取用户加载状态
            userLoadStatus() {
                return this.$store.getters.getUserLoadStatus();
            },
​
            // 从 Vuex 中获取用户信息
            user() {
                return this.$store.getters.getUser;
            },
​
            showFilters() {
                return this.$store.getters.getShowFilters;
            },
​
            cafesView() {
                return this.$store.getters.getCafesView;
            },
​
            cityFilter() {
                return this.$store.getters.getCityFilter;
            },
​
            textSearch() {
                return this.$store.getters.getTextSearch;
            },
​
            activeLocationFilter() {
                return this.$store.getters.getActiveLocationFilter;
            },
​
            onlyLiked() {
                return this.$store.getters.getOnlyLiked;
            },
​
            brewMethods() {
                return this.$store.getters.getBrewMethodsFilter;
            },
​
            hasMatcha() {
                return this.$store.getters.getHasMatcha;
            },
​
            hasTea() {
                return this.$store.getters.getHasTea;
            },
​
            hasSubscription() {
                return this.$store.getters.getHasSubscription;
            },
​
            activeFilterCount() {
                let activeCount = 0;
                if (this.textSearch !== '') {
                    activeCount++;
                }
                if (this.activeLocationFilter !== 'all') {
                    activeCount++;
                }
                if (this.onlyLiked) {
                    activeCount++;
                }
                if (this.brewMethods.length !== 0) {
                    activeCount++;
                }
                if (this.hasMatcha) {
                    activeCount++;
                }
                if (this.hasTea) {
                    activeCount++;
                }
                if (this.hasSubscription) {
                    activeCount++;
                }
                if (this.cityFilter !== '') {
                    activeCount++;
                }
                return activeCount;
            }
        },
​
        methods: {
            login() {
                EventBus.$emit('prompt-login');
            },
​
            logout() {
                this.$store.dispatch('logoutUser');
                window.location = '/logout';
            },
​
            toggleShowFilters() {
                this.$store.dispatch('toggleShowFilters', {showFilters: !this.showFilters});
            },
​
            setShowPopOut() {
                this.$store.dispatch('toggleShowPopOut', {showPopOut: true});
            },
​
            clearFilters() {
                EventBus.$emit('clear-filters');
            }
        }
    }
</script>

以及登录模态框组件 resources/assets/js/components/global/LoginModal.vue：

xxxxxxxxxx
 
<style lang="scss">
    @import '~@/abstracts/_variables.scss';
​
    div#login-modal {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: rgba(0, 0, 0, .6);
        z-index: 99999;
        div.login-box {
            width: 100%;
            max-width: 530px;
            min-width: 320px;
            padding: 20px;
            background-color: #fff;
            border: 1px solid #ddd;
            -webkit-box-shadow: 0 1px 3px rgba(50, 50, 50, 0.08);
            box-shadow: 0 1px 3px rgba(50, 50, 50, 0.08);
            -webkit-border-radius: 4px;
            border-radius: 4px;
            font-size: 16px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            a.social-link {
                display: block;
                margin: auto;
                width: 230px;
                margin-top: 10px;
                margin-bottom: 10px;
            }
            div.login-label {
                color: black;
                font-family: "Lato", sans-serif;
                font-weight: bold;
                text-transform: uppercase;
                text-align: center;
                margin-top: 40px;
                margin-bottom: 20px;
            }
            p.learn-more-description {
                color: #666666;
                text-align: center;
            }
            a.learn-more-button {
                border: 2px solid $secondary-color;
                border-radius: 3px;
                text-transform: uppercase;
                font-family: "Lato", sans-serif;
                color: $secondary-color;
                width: 360px;
                font-size: 16px;
                text-align: center;
                padding: 10px;
                margin-top: 20px;
                display: block;
                margin: auto;
                &:hover {
                    color: white;
                    background-color: $secondary-color;
                }
            }
        }
    }
​
    /* Small only */
    @media screen and (max-width: 39.9375em) {
        div#login-modal {
            div.login-box {
                width: 95%;
                a.learn-more-button {
                    width: 300px;
                }
            }
        }
    }
​
    /* Medium only */
    @media screen and (min-width: 40em) and (max-width: 63.9375em) {
    }
​
    /* Large only */
    @media screen and (min-width: 64em) and (max-width: 74.9375em) {
    }
</style>
​
<template>
    <div id="login-modal" v-show="show" v-on:click="show = false">
        <div class="login-box" v-on:click.stop="">
            <div class="login-label">使用第三方服务登录</div>
​
            <a href="/auth/github" v-on:click.stop="">
                <img src="/storage/img/github-login.jpg"/>
            </a>
​
            <div class="login-label">关于本项目</div>
​
            <p class="learn-more-description">Roast 项目由 <a href="https://laravel.geekai.co" target="_blank">Laravel 学院</a>提供，Laravel 学院致力于提供优质 Laravel 中文学习资源。</p>
​
            <a class="learn-more-button" href="https://laravel.geekai.co/api-driven-development-laravel-vue" target="_blank">关于本项目的构建教程，可以在这里看到</a>
        </div>
    </div>
</template>
​
<script>
    import {EventBus} from '../../event-bus.js';
​
    export default {
        data() {
            return {
                show: false
            }
        },
​
        mounted() {
            EventBus.$on('prompt-login', function () {
                this.show = true;
            }.bind(this));
        }
    }
</script>

注：以上组件中用到的图片都可以到 https://github.com/nonfu/roastapp/tree/master/storage/app/public/img 去下载，后面也是一样，不再赘述。

第八步：重构 Home 组件

修改 resources/assets/js/pages/Home.vue 组件代码如下：

xxxxxxxxxx
 
<style>
​
</style>
​
<template>
    <div id="cafes" class="page">
        <cafe-map v-show="cafesView === 'map'"></cafe-map>
        <cafe-list v-show="cafesView === 'list'"></cafe-list>
​
        <add-cafe-button></add-cafe-button>
        <toggle-cafes-view></toggle-cafes-view>
        <map-legend></map-legend>
​
        <router-view></router-view>
    </div>
</template>
​
<script>
    import CafeMap from '../components/cafes/CafeMap.vue';
    import CafeList from '../components/cafes/CafeList.vue';
    import AddCafeButton from '../components/cafes/AddCafeButton.vue';
    import ToggleCafesView from '../components/cafes/ToggleCafesView.vue';
    import MapLegend from '../components/cafes/MapLegend.vue';
​
    export default {
        components: {
            CafeMap,
            CafeList,
            AddCafeButton,
            ToggleCafesView,
            MapLegend
        },
​
        computed: {
            cafesView() {
                return this.$store.getters.getCafesView;
            }
        }
    }
</script>

同样我们新增了一些组件。

resources/assets/js/components/cafes/CafeList.vue 用于渲染咖啡店列表：

xxxxxxxxxx
 
<style lang="scss">
    @import '~@/abstracts/_variables.scss';
​
    div#cafe-list-container {
        position: absolute;
        top: 75px;
        left: 0px;
        right: 0px;
        bottom: 0px;
        background-color: white;
        overflow-y: scroll;
        div.cafe-grid-container {
            max-width: 900px;
            margin: auto;
        }
    }
​
    /* Small only */
    @media screen and (max-width: 39.9375em) {
        div.cafe-grid-container {
            height: inherit;
        }
    }
</style>
​
<template>
    <div id="cafe-list-container">
        <div class="grid-x grid-padding-x cafe-grid-container">
            <list-filters></list-filters>
        </div>
​
        <div class="grid-x grid-padding-x cafe-grid-container" id="cafe-grid">
            <cafe-card v-for="cafe in cafes" :key="cafe.id" :cafe="cafe"></cafe-card>
            <div class="large-12 medium-12 small-12 cell">
                <span class="no-results" v-if="shownCount === 0">No Results</span>
            </div>
        </div>
    </div>
</template>
​
<script>
​
    import CafeCard from '../../components/cafes/CafeCard.vue';
    import ListFilters from '../../components/cafes/ListFilters.vue';
​
    export default {
        data() {
            return {
                shownCount: 1
            }
        },
​
        components: {
            CafeCard,
            ListFilters
        },
​
        computed: {
            cafes() {
                return this.$store.getters.getCafes;
            },
​
            cafesView() {
                return this.$store.getters.getCafesView;
            }
        }
    }
</script>

在这个组件中引入了一个新的组件 resources/assets/js/components/cafes/ListFilters.vue，其实现思路和 Filters.vue 完全一致，详细代码可以从这里拷贝：https://github.com/nonfu/roastapp/blob/master/resources/assets/js/components/cafes/ListFilters.vue。

另外，resources/assets/js/components/cafes/CafeCard.vue 代码也有调整：https://github.com/nonfu/roastapp/blob/master/resources/assets/js/components/cafes/CafeCard.vue。

回到 Home.vue 组件，resources/assets/js/components/cafes/AddCafeButton.vue 用于实现新增咖啡店按钮：

xxxxxxxxxx
 
<style lang="scss">
    @import '~@/abstracts/_variables.scss';
​
    div#add-cafe-button {
        background-color: $secondary-color;
        width: 56px;
        height: 56px;
        border-radius: 50px;
        -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
        box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
        text-align: center;
        z-index: 9;
        cursor: pointer;
        position: absolute;
        right: 60px;
        bottom: 30px;
        color: white;
        line-height: 50px;
        font-size: 40px;
    }
</style>
​
<template>
    <div id="add-cafe-button" v-on:click="checkAuth()">
        &plus;
    </div>
</template>
​
<script>
​
    import {EventBus} from '../../event-bus.js';
​
    export default {
​
        computed: {
            user() {
                return this.$store.getters.getUser;
            },
​
            userLoadStatus() {
                return this.$store.getters.getUserLoadStatus();
            }
        },
​
        methods: {
            // 如果用户已经登录，跳转到新增咖啡店页面，否则弹出登录框
            checkAuth() {
                if (this.user == '' && this.userLoadStatus === 2) {
                    EventBus.$emit('prompt-login');
                } else {
                    this.$router.push({name: 'newcafe'});
                }
            }
        }
    }
</script>

resources/assets/js/components/cafes/ToggleCafesView.vue 用于在地图和列表布局之间进行切换：

xxxxxxxxxx
 
<style lang="scss">
    @import '~@/abstracts/_variables.scss';
​
    div#toggle-cafes-view {
        position: absolute;
        z-index: 9;
        right: 15px;
        top: 90px;
        -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08);
        box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08);
        border-radius: 5px;
        span.toggle-button {
            cursor: pointer;
            display: inline-block;
            padding: 5px 20px;
            background-color: white;
            font-family: "Lato", sans-serif;
            text-align: center;
            &.map-view {
                border-top-left-radius: 5px;
                border-bottom-left-radius: 5px;
                &.active {
                    color: white;
                    background-color: $secondary-color;
                }
            }
            &.list-view {
                border-top-right-radius: 5px;
                border-bottom-right-radius: 5px;
                &.active {
                    color: white;
                    background-color: $secondary-color;
                }
            }
        }
    }
</style>
​
<template>
    <div id="toggle-cafes-view" v-show="$route.name === 'cafes' || $route.name === 'city'">
        <span class="map-view toggle-button" v-bind:class="{ 'active': cafesView === 'map' }"
              v-on:click="displayView('map')">地图</span>
        <span class="list-view toggle-button" v-bind:class="{ 'active': cafesView == 'list' }"
              v-on:click="displayView('list')">列表</span>
    </div>
</template>
​
<script>
    export default {
​
        computed: {
            cafesView() {
                return this.$store.getters.getCafesView;
            }
        },
​
        methods: {
            displayView(type) {
                this.$store.dispatch('changeCafesView', type);
            }
        }
    }
</script>

resources/assets/js/components/cafes/MapLegend.vue 用于渲染图例：

xxxxxxxxxx
 
<style lang="scss">
    @import '~@/abstracts/_variables.scss';
​
    div#map-legend {
        position: absolute;
        z-index: 9;
        left: 15px;
        bottom: 90px;
        -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08);
        box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08);
        border-radius: 5px;
        background-color: white;
        padding: 10px;
        max-width: 200px;
        font-family: "Lato", sans-serif;
        span.legend-title {
            display: block;
            text-align: center;
            font-family: "Lato", sans-serif;
            margin-bottom: 10px;
            font-size: 18px;
            font-weight: bold;
        }
        div.legend-row {
            margin-bottom: 5px;
            img {
                margin-right: 10px;
            }
        }
    }
</style>
​
<template>
    <div id="map-legend" v-show="( !showFilters && cafesView === 'map' )">
        <div class="grid-x">
            <div class="large-12 medium-12 small-12 cell">
                <span class="legend-title">图例</span>
            </div>
            <div class="large-12 medium-12 small-12 cell legend-row">
                <img src="/storage/img/roaster-marker.svg"/> 烘焙店
            </div>
            <div class="large-12 medium-12 small-12 cell legend-row">
                <img src="/storage/img/cafe-marker.svg"/> 咖啡店
            </div>
        </div>
    </div>
</template>
​
<script>
    export default {
        data() {
            return {}
        },
​
        computed: {
            showFilters() {
                return this.$store.getters.getShowFilters;
            },
​
            cafesView() {
                return this.$store.getters.getCafesView;
            }
        }
    }
</script>

最后，用于在地图上以点标记渲染咖啡店的地图组件 resources/assets/js/components/cafes/CafeMap.vue 代码也有很大的调整：

xxxxxxxxxx
 
<style lang="scss">
    @import '~@/abstracts/_variables.scss';
​
    div#cafe-map-container {
        position: absolute;
        top: 75px;
        left: 0px;
        right: 0px;
        bottom: 0px;
​
        div#cafe-map {
            position: absolute;
            top: 0px;
            left: 0px;
            right: 0px;
            bottom: 0px;
        }
​
        div.cafe-info-window {
​
            div.cafe-name {
                display: block;
                text-align: center;
                color: $dark-color;
                font-family: 'Josefin Sans', sans-serif;
            }
​
            div.cafe-address {
                display: block;
                text-align: center;
                margin-top: 5px;
                color: $grey;
                font-family: 'Lato', sans-serif;
                span.street {
                    font-size: 14px;
                    display: block;
                }
                span.city {
                    font-size: 12px;
                }
                span.state {
                    font-size: 12px;
                }
                span.zip {
                    font-size: 12px;
                    display: block;
                }
                a {
                    color: $secondary-color;
                    font-weight: bold;
                }
            }
        }
    }
</style>
​
<template>
    <div id="cafe-map-container">
        <div id="cafe-map">
​
        </div>
    </div>
</template>
​
<script>
    import {ROAST_CONFIG} from '../../config.js';
    import {EventBus} from '../../event-bus.js';
​
    import {CafeTypeFilter} from '../../mixins/filters/CafeTypeFilter.js';
    import {CafeBrewMethodsFilter} from '../../mixins/filters/CafeBrewMethodsFilter.js';
    import {CafeTagsFilter} from '../../mixins/filters/CafeTagsFilter.js';
    import {CafeTextFilter} from '../../mixins/filters/CafeTextFilter.js';
    import {CafeUserLikeFilter} from '../../mixins/filters/CafeUserLikeFilter.js';
    import {CafeHasMatchaFilter} from '../../mixins/filters/CafeHasMatchaFilter.js';
    import {CafeHasTeaFilter} from '../../mixins/filters/CafeHasTeaFilter.js';
    import {CafeSubscriptionFilter} from '../../mixins/filters/CafeSubscriptionFilter.js';
    import {CafeInCityFilter} from '../../mixins/filters/CafeInCityFilter.js';
    import cafe from "../../api/cafe";
​
    export default {
        mixins: [
            CafeTypeFilter,
            CafeBrewMethodsFilter,
            CafeTagsFilter,
            CafeTextFilter,
            CafeUserLikeFilter,
            CafeHasMatchaFilter,
            CafeHasTeaFilter,
            CafeSubscriptionFilter,
            CafeInCityFilter
        ],
        props: {
            'latitude': {
                type: Number,
                default: function () {
                    return 120.21
                }
            },
            'longitude': {
                type: Number,
                default: function () {
                    return 30.29
                }
            },
            'zoom': {
                type: Number,
                default: function () {
                    return 5
                }
            }
        },
        data() {
            return {
                markers: [],
                infoWindows: []
            }
        },
        mounted() {
            this.markers = [];
            this.map = new AMap.Map('cafe-map', {
                center: [this.latitude, this.longitude],
                zoom: this.zoom
            });
            this.clearMarkers();
            this.buildMarkers();
​
            // 监听位置选择事件
            EventBus.$on('location-selected', function (cafe) {
                var latLng = new AMap.LngLat(cafe.lat, cafe.lng);
                this.map.setZoom(17);
                this.map.panTo(latLng);
            }.bind(this));
​
            // 监听城市选择事件
            EventBus.$on('city-selected', function (city) {
                var latLng = new AMap.LngLat(city.lat, city.lng);
                this.map.setZoom(11);
                this.map.panTo(latLng);
            }.bind(this));
        },
        computed: {
            cafes() {
                return this.$store.getters.getCafes;
            },
​
            city() {
                return this.$store.getters.getCity;
            },
​
            cityFilter() {
                return this.$store.getters.getCityFilter;
            },
​
            textSearch() {
                return this.$store.getters.getTextSearch;
            },
​
            activeLocationFilter() {
                return this.$store.getters.getActiveLocationFilter;
            },
​
            onlyLiked() {
                return this.$store.getters.getOnlyLiked;
            },
​
            brewMethodsFilter() {
                return this.$store.getters.getBrewMethodsFilter;
            },
​
            hasMatcha() {
                return this.$store.getters.getHasMatcha;
            },
​
            hasTea() {
                return this.$store.getters.getHasTea;
            },
​
            hasSubscription() {
                return this.$store.getters.getHasSubscription;
            },
​
            previousLat() {
                return this.$store.getters.getLat;
            },
​
            previousLng() {
                return this.$store.getters.getLng;
            },
​
            previousZoom() {
                return this.$store.getters.getZoomLevel;
            }
        },
        methods: {
            // 为所有咖啡店创建点标记
            buildMarkers() {
                // 初始化点标记数组
                this.markers = [];
​
                // 自定义点标记
                /*var image = ROAST_CONFIG.APP_URL + '/storage/img/coffee-marker.png';
                var icon = new AMap.Icon({
                    image: image,  // Icon的图像
                    imageSize: new AMap.Size(19, 33)
                });*/
​
                // 遍历所有咖啡店创建点标记
                // var infoWindow = new AMap.InfoWindow();
                for (var i = 0; i < this.cafes.length; i++) {
​
                    if (this.cafes[i].company.roaster === 1) {
                        var image = ROAST_CONFIG.APP_URL + '/storage/img/roaster-marker.svg';
                    } else {
                        var image = ROAST_CONFIG.APP_URL + '/storage/img/cafe-marker.svg';
                    }
                    var icon = new AMap.Icon({
                        image: image,  // Icon的图像
                        imageSize: new AMap.Size(19, 33)
                    });
​
                    // 为每个咖啡店创建点标记并设置经纬度
                    var marker = new AMap.Marker({
                        position: new AMap.LngLat(parseFloat(this.cafes[i].latitude), parseFloat(this.cafes[i].longitude)),
                        title: this.cafes[i].location_name,
                        icon: icon
                    });
​
                    // 自定义信息窗体
                    /*var contentString = '<div class="cafe-info-window">' +
                        '<div class="cafe-name">' + this.cafes[i].name + this.cafes[i].location_name + '</div>' +
                        '<div class="cafe-address">' +
                        '<span class="street">' + this.cafes[i].address + '</span>' +
                        '<span class="city">' + this.cafes[i].city + '</span> ' +
                        '<span class="state">' + this.cafes[i].state + '</span>' +
                        '<span class="zip">' + this.cafes[i].zip + '</span>' +
                        '<a href="/#/cafes/' + this.cafes[i].id + '">Visit</a>' +
                        '</div>' +
                        '</div>';
                    marker.content = contentString;*/
                    marker.cafeId = this.cafes[i].id;
​
                    // 绑定点击事件到点标记对象，点击跳转到咖啡店详情页
                    marker.on('click', mapClick);
​
                    // 将点标记放到数组中
                    this.markers.push(marker);
                }
​
                function mapClick(mapEvent) {
                    // infoWindow.setContent(mapEvent.target.content);
                    // infoWindow.open(this.getMap(), this.getPosition());
                    let center = this.getMap().getCenter();
                    this.$store.dispatch('applyZoomLevel', this.getMap().getZoom());
                    this.$store.dispatch('applyLat', center.getLat());
                    this.$store.dispatch('applyLng', center.getLng());
                    this.$router.push({name: 'cafe', params: {id: mapEvent.target.cafeId}});
                }
​
                // 将所有点标记显示到地图上
                this.map.add(this.markers);
            },
            // 从地图上清理点标记
            clearMarkers() {
                // 遍历所有点标记并将其设置为 null 从而从地图上将其清除
                for (var i = 0; i < this.markers.length; i++) {
                    this.markers[i].setMap(null);
                }
            },
            processFilters(filters) {
                for (var i = 0; i < this.markers.length; i++) {
                    if (this.textSearch === ''
                        && this.activeLocationFilter === 'all'
                        && this.brewMethodsFilter.length === 0
                        && !this.onlyLiked
                        && !this.hasMatcha
                        && !this.hasTea
                        && !this.hasSubscription
                        && this.cityFilter === '') {
                        this.markers[i].setMap(this.map);
                    } else {
                        // 初始化过滤器标识
                        var textPassed = false;
                        var brewMethodsPassed = false;
                        var typePassed = false;
                        var likedPassed = false;
                        var matchaPassed = false;
                        var teaPassed = false;
                        var subscriptionPassed = false;
                        var cityPassed = false;
​
                        if (this.processCafeTypeFilter(this.markers[i].cafe, this.activeLocationFilter)) {
                            typePassed = true;
                        }
​
                        if (this.textSearch !== '' && this.processCafeTextFilter(this.markers[i].cafe, this.textSearch)) {
                            textPassed = true;
                        } else if (this.textSearch === '') {
                            textPassed = true;
                        }
​
                        if (this.brewMethodsFilter.length !== 0 && this.processCafeBrewMethodsFilter(this.markers[i].cafe, this.brewMethodsFilter)) {
                            brewMethodsPassed = true;
                        } else if (this.brewMethodsFilter.length === 0) {
                            brewMethodsPassed = true;
                        }
​
                        if (this.onlyLiked && this.processCafeUserLikeFilter(this.markers[i].cafe)) {
                            likedPassed = true;
                        } else if (!this.onlyLiked) {
                            likedPassed = true;
                        }
​
                        if (this.hasMatcha && this.processCafeHasMatchaFilter(this.markers[i].cafe)) {
                            matchaPassed = true;
                        } else if (!this.hasMatcha) {
                            matchaPassed = true;
                        }
​
                        if (this.hasTea && this.processCafeHasTeaFilter(this.markers[i].cafe)) {
                            teaPassed = true;
                        } else if (!this.hasTea) {
                            teaPassed = true;
                        }
​
                        if (this.hasSubscription && this.processCafeSubscriptionFilter(this.markers[i].cafe)) {
                            subscriptionPassed = true;
                        } else if (!this.hasSubscription) {
                            subscriptionPassed = true;
                        }
​
                        if (this.cityFilter !== '' && this.processCafeInCityFilter(this.markers[i].cafe, this.cityFilter)) {
                            cityPassed = true;
                        } else if (this.cityFilter === '') {
                            cityPassed = true;
                        }
​
                        if (typePassed && textPassed && brewMethodsPassed && likedPassed && matchaPassed && teaPassed && subscriptionPassed && cityPassed) {
                            this.markers[i].setMap(this.map);
                        } else {
                            this.markers[i].setMap(null);
                        }
                    }
                }
            },
        },
        watch: {
            // 一旦 cafes 有更新立即重构地图点标记
            cafes() {
                this.clearMarkers();
                this.buildMarkers();
                this.processFilters();
            },
            // 如果路由从咖啡店详情页切换到咖啡店列表，检查之前的经纬度是否设置，
            // 如果设置的话将其作为新绘制地图的定位点
            '$route'(to, from) {
                if (to.name === 'cafes' && from.name === 'cafe') {
                    if (this.previousLat !== 0.0 && this.previousLng !== 0.0 && this.previousZoom !== '') {
                        var latLng = new AMap.LngLat(this.previousLat, this.previousLng);
                        this.map.setZoom(this.previousZoom);
                        this.map.panTo(latLng);
                    }
                }
            },
​
            cityFilter() {
                this.processFilters();
            },
​
            textSearch() {
                this.processFilters();
            },
​
            activeLocationFilter() {
                this.processFilters();
            },
​
            onlyLiked() {
                this.processFilters();
            },
​
            brewMethodsFilter() {
                this.processFilters();
            },
​
            hasMatcha() {
                this.processFilters();
            },
​
            hasTea() {
                this.processFilters();
            },
​
            hasSubscription() {
                this.processFilters();
            }
        }
    }
</script>

我们在这个组件的 mixins 中新引入了多个过滤器函数，大家可以在 https://github.com/nonfu/roastapp/tree/master/resources/assets/js/mixins/filters 拷贝/下载代码到本地，这里就不一一列举了，需要注意的是，在 buildMarkers 方法中，我们注释掉了之前的信息窗体实现代码，将点击点标记事件处理为跳转到咖啡店详情页。

第九步：优化全局 CSS

最后，我们来完全全局 CSS 文件的编写，打开 resources/assets/sass/app.scss，引入新的组件 SCSS 和动画效果 SCSS 文件：

xxxxxxxxxx
 
@charset "UTF-8";
​
/* ==========================================================================
    Builds our style structure
        https://sass-guidelin.es/#the-7-1-pattern
   ========================================================================== */
/**
 * Table of Contents:
 *
 *  1. Abstracts
 */
@import 'abstracts/variables';
​
/**
 * 2: Components
 */
@import 'components/validations';
@import 'components/labels';
@import 'components/notification';
@import 'components/pac-container';
@import 'components/options';
@import 'components/cafe-type';
​
/**
 * 3: Layouts
 */
@import 'layouts/page';
​
/**
 * 4: Animations
 */
@import 'animations/slide-in-left';
@import 'animations/slide-in-right';
@import 'animations/scale-in-center';
@import 'animations/slide-out-back';
@import 'animations/slide-in-top';
​
@import 'node_modules/foundation-sites/assets/foundation.scss';

具体的 SCSS 文件源码可以从 https://github.com/nonfu/roastapp/tree/master/resources/assets/sass 下载或拷贝，因为文件太多，这里就不一一列举了。

完成以上编码工作后，运行 npm run dev 重新编译所有前端资源，访问应用首页，页面会跳转到 http://roast.test/#/cafes，并显示我们开头提供的重构后的页面效果，上面是地图布局，下面给出列表布局的渲染效果：

roast-app-list

完成首页重构后，我们将会在下一篇教程完成新增咖啡店功能的重构。

注：完整项目代码位于 nonfu/roastapp。

16 Comments

In reply to #10

还真是

In reply to #11

还有个问题，在调了

我本周抽空把教程的里代码都调整下辛苦你了 CEO

In reply to #13

新的问题，在添加咖啡店的时候，冲泡方法传了个字符串，然后控制器接收的时候，你用了json_decode()当成json处理了，我在控制器字符串转数组就OK了，修改的时候，冲泡方法是json没问题

In reply to #14

新增的地方应该是漏掉了 JSON.stringify 了

之前跟敲代码的时候不求甚解，一直不是很明白

xxxxxxxxxx
 
foo ({commit}, val) {
    commit('setAttributes', val);
}

为啥commit要带{}，今天研究了一下，原来这个是ES6的语法，以上等于：

xxxxxxxxxx
 
foo({commit: function}) ...

即要求传入第一个参数为object，有commit属性。在 foo方法体中，调用commit等同于调用第一个参数的commit属性，希望能对有疑问的同学有所帮：）

登录后即可添加评论

初始化 Laravel 单页面应用

安装配置 Laravel Socialite 并实现基于 Github 的用户认证

安装配置 Laravel Passport

配置 JavaScript 和 SASS

引入 Vue 2、Vue Router 和 Vuex

通过 Vue Router 配置前端路由

实现 Laravel 后端 API 接口

通过 Axios 库构建 API 请求

构建 Vuex 模块

在 Vue 组件中使用 Vuex 模块

通过 Laravel Mix 将 SASS 编译到 Vue 组件

为 Vue Router 添加页面布局

通过 Vue 组件、Vue Router、Vuex 和 Laravel 实现表单提交

通过 JavaScript 和 Laravel 验证表单请求

通过高德地图 Web 服务 API 对咖啡店地址进行地理编码

通过 Vue + 高德地图 JS API 在地图上标记咖啡店

在高德地图上自定义咖啡店点标记图标并显示信息窗体

实现 Laravel 模型类之间的多对多关联及冲泡方法前端查询 API

通过 Vue.js 实现动态表单一次提交多个咖啡店位置信息

通过 Laravel + Vue 实现喜欢/取消喜欢咖啡店功能

咖啡店标签后端 API 接口功能实现

咖啡店标签前端输入及显示功能实现

通过 Vue Mixins 在前端首页对咖啡店进行过滤筛选

使用 Vue Mixins 在高德地图上对咖啡店点标记进行筛选过滤

优化高德地图多个点标记信息窗体显示 & 引入 Google Analytics 进行单页面应用访问统计

根据是否需要登录重新组织后端路由

通过 Vue 组件实现单页面应用无跳转登录

通过 Vuex + Vue Router 导航守卫在前端实现认证路由保护

实现用户个人信息编辑功能

通过 Laravel + Vue 实现文件上传功能

功能模块重构 & CSS 整体优化：首页篇

功能模块重构 & CSS 整体优化：新增咖啡店篇

功能模块重构 & CSS 整体优化：实现编辑/删除咖啡店功能

功能模块重构 & CSS 整体优化：咖啡店详情页篇

通过 Vue Transitions 实现 Vue 组件的 CSS 动画效果 & 若干 Bug 修复

实现简单的、针对咖啡店增删改查的 RBAC 权限管理功能

管理后台后端动作审核接口实现

通过 Vue Router 提供的路由元信息功能实现前端路由权限判断

管理后台前端动作审核列表页面功能实现

在管理后台添加公司、咖啡店、城市、用户、冲泡方法管理功能

通过 Laravel Mix + Vue Router 路由懒加载实现单页面应用 JS 文件按组件分割

功能模块重构 & CSS 整体优化：首页篇

第一步：数据表调整

第二步：模型类调整

第三步：后端路由及控制器实现

第四步：新增 API 调用文件

第五步：新增/调整 Vuex 模块

第六步：调整 Vue Router

第七步：重构 Layout 组件

第八步：重构 Home 组件

第九步：优化全局 CSS

微信扫一扫：分享

16 Comments