07_04.图片列表内容切换

1. 首页点击图片分享跳转到图片分享的界面：

2. css样式使用的是mui插件：

http://www.dcloud.io/hellomui/examples/tableviews.html

http://www.dcloud.io/hellomui/examples/card.html

3. 要操作的结构：

4. 代码：

src/component/common/footer.vue

<template>
    <footer>
        <nav class="mui-bar mui-bar-tab">
            <router-link class="mui-tab-item mui-active" to="/">
                <span class="mui-icon mui-icon-home"></span>
                <span class="mui-tab-label">首页</span>
            </router-link>
            <router-link class="mui-tab-item" to="/">
                <span class="mui-icon mui-icon-extra mui-icon-extra-gift"></span>
                <span class="mui-tab-label">商品购买</span>
            </router-link>
            <router-link class="mui-tab-item" to="/">
                <span class="mui-icon mui-icon-extra mui-icon-extra-cart"><span class="mui-badge">0</span></span>
                <span class="mui-tab-label">购物车</span>
            </router-link>
            <router-link class="mui-tab-item" to="/">
                <span class="mui-icon mui-icon-gear"></span>
                <span class="mui-tab-label">设置</span>
            </router-link>
        </nav>
        <i></i>
    </footer>
</template>

<script>
    export default {
        
    }
</script>

<style scoped>
i {
    display: block;
    height: 50px;
}
</style>

src/component/common/header.vue

<template>
    <header>
        <mt-header fixed title="小买卖">
            <!-- 返回按钮只在非首页出现 -->
            <!-- 通过$route.path那到当前路径比较 -->
            <!-- 通过$router.go(-1)方法实现页面返回功能 -->
            <mt-button v-if="$route.path != '/index'" v-on:click="$router.go(-1)"
                icon="back" slot="left"></mt-button>
        </mt-header>
        <i></i>
    </header>
</template>

<script>
    export default {
        
    }
</script>

<style scoped>
header i{
    display: block;
    height: 40px;
}
</style>

src/component/common/index.js

// 编写属于自己的公共Vue组件库
import HeaderComponent from './header.vue';
import FooterComponent from './footer.vue';

// Vue插件要求提供一个install方法, 这个方法会被注入Vue
// 需要我们调用Vue的filter component directive去扩展功能
export default {
    install(Vue) {
        Vue.component('app-header', HeaderComponent);
        Vue.component('app-footer', FooterComponent);
    }
};

src/component/home/home.vue

<template>
    <article>
        <!-- 轮播图 -->
        <mt-swipe :auto="10000">
            <mt-swipe-item v-for="item in lunbos" v-bind:key="item.url">
                <router-link v-bind:to="item.url">
                    <img v-bind:src="item.img">
                </router-link>
            </mt-swipe-item>
        </mt-swipe>
        <!-- 六宫格 -->
        <ul class="mui-table-view mui-grid-view mui-grid-9">
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                <router-link to="/">
                    <span class="mui-icon mui-icon-home"></span>
                    <div class="mui-media-body">首页</div>
                </router-link>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                <router-link to="/news/list">
                    <span class="mui-icon mui-icon-chat"></span>
                    <div class="mui-media-body">热点新闻</div>
                </router-link>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                <router-link to="/photo/list/0">
                    <span class="mui-icon mui-icon-image"></span>
                    <div class="mui-media-body">图片分享</div>
                </router-link>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                <router-link to="/">
                    <span class="mui-icon mui-icon-search"></span>
                    <div class="mui-media-body">搜索</div>
                </router-link>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                <router-link to="/">
                    <span class="mui-icon mui-icon-phone"></span>
                    <div class="mui-media-body">联系我们</div>
                </router-link>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                <router-link to="/">
                    <span class="mui-icon mui-icon-info"></span>
                    <div class="mui-media-body">关于我们</div>
                </router-link>
            </li>
        </ul>
    </article>
</template>

<script>
export default {
    data() {
        return {
            lunbos: []
        }
    },

    methods: {
        // 请求数据, 成功后把数据存储到lunbos中
        getLunbo() {
            this.axios.get(this.api.getLunbo)
            .then( rep => this.lunbos = rep.data.message );
        }
    },

    // 组件初始化完毕后, 自动调用接口获取数据渲染轮播图
    created() {
        this.getLunbo();
    }
}
</script>

<style lang="less" scoped>
@height: 260px;
article {
    height: @height;
    img {
        height: @height;
    }
}
</style>

src/component/news/news_detail.vue

<template>
    <article>
        <!-- 使用mui的卡片视图布局, 注意: 卡片视图都是flex, 这里把他改成block -->
        <div class="mui-card">
            <div class="mui-card-header">
                <h4>{{ newsDetail.title }}</h4>
                <p class="mui-ellipsis">
                    <span>创建时间: {{ newsDetail.add_time | date }}</span>
                    <span>点击数: {{ newsDetail.click }}</span>
                </p>
            </div>
            <!-- content内容中含有html标签, 要让它正常展示, 必须使用v-html -->
            <div class="mui-card-footer" v-html="newsDetail.content"></div>
        </div>
    </article>
</template>

<script>
export default {
    data() {
        return {
            newsDetail: {}
        };
    },

    methods: {
        // 获取新闻详情, 注意这里接口返回的是一个数组, 我们需要通过下标那新闻详情对象
        getNewsDetail() {
            this.axios.get(this.api.getND + this.$route.params.id)
            .then( rsp => this.newsDetail = rsp.data.message[0] )
        }
    },

    created() {
        this.getNewsDetail();
    }
}
</script>

<style scoped>
article {
    overflow: hidden;
}
.mui-card-header, .mui-card-footer {
    display: block;
}
</style>

src/component/news/news_list.vue

<template>
    <article>
        <ul class="mui-table-view">
            <li class="mui-table-view-cell mui-media" 
                v-for="item in newsList" v-bind:key="item.id">
                <router-link v-bind="{ to: `/news/detail/${item.id}` }">
                    <img class="mui-media-object mui-pull-left" v-bind:src="item.img_url">
                    <div class="mui-media-body">
                        <h4 class="mui-ellipsis">{{ item.title }}</h4>
                        <p class="mui-ellipsis">
                            <span>创建时间: {{ item.add_time | date }}</span>
                            <span>点击数: {{ item.click }}</span>
                        </p>
                    </div>
                </router-link>
            </li>
        </ul>
    </article>
</template>

<script>
export default {

    data() {
        return {
            newsList: []
        };
    },

    methods: {
        // 获取新闻列表数据
        getNewsList() {
            this.axios.get(this.api.getNL)
            .then( rsp => this.newsList = rsp.data.message )
        }
    },

    // 上来就调用接口初始化数据
    created() {
        this.getNewsList();
    }
}
</script>

<style scoped>

</style>

src/component/photo/photo_detail.vue

<template>
    <div>

    </div>
</template>

<script>
    export default {
        
    }
</script>

<style scoped>

</style>

src/component/photo/photo_list.vue

<template>
    <article>
        <!-- 使用mui的列表布局 -->
        <ul class="mui-table-view">
            <li class="mui-table-view-cell">
                <router-link v-bind:to="{ name: 'pl', params: { id: 0 } }">全部</router-link>
            </li>
            <li v-for="item in photoCategoryList" v-bind:key="item.id"
                class="mui-table-view-cell">
                <router-link v-bind:to="{ name: 'pl', params: { id: item.id } }">{{ item.title }}</router-link>    
            </li>
        </ul>

        <!-- 使用mui的卡片视图布局 -->
        <div class="mui-card" v-for="item in photoList" v-bind:key="item.id">
            <router-link v-bind:to="{ name: 'pd', params: { id: item.id } }">
                <div class="mui-card-header mui-card-media" v-bind="{ style: `height:40vw;background-image:url(${item.img_url})` }"></div>
                <div class="mui-card-content">
                    <div class="mui-card-content-inner">
                        <p>{{ item.title }}</p>
                        <p style="color: #333;">{{ item.zhaiyao }}</p>
                    </div>
                </div>
            </router-link>
        </div>
    </article>
</template>

<script>
export default {
    data() {
        return {
            photoCategoryList: [],
            photoList: []
        };
    },

    methods: {
        // 获取图片分类列表
        getPhotoCategoryList() {
            this.axios.get(this.api.photoC)
            .then( rsp => this.photoCategoryList = rsp.data.message );
        },

        // 获取图片列表, 需要使用分类ID来获取指定的图片列表
        getPhotoList() {
            this.axios.get(this.api.photoL + this.$route.params.id)
            .then( rsp => this.photoList = rsp.data.message );
        }
    },

    // 在组件初始化完毕后执行一次
    created() {
        this.getPhotoCategoryList();
        this.getPhotoList();
    },

    watch: {

        // 监听url的变化, 变化后拿到新的id, 
        // 调用接口发送请求修改photoList数据
        $route() {
            this.getPhotoList();
        }
    }
}
</script>

<style lang="less" scoped>
.mui-table-view {
    overflow: hidden;
    li {
        float: left;
        color: deepskyblue;
    }
}

.mui-card-header, .mui-card-header {
    display: block;
}
</style>

src/component/App.vue

<template>
    <main>
        <app-header></app-header>
        <router-view></router-view>
        <app-footer></app-footer>
    </main>
</template>

<script>
export default {
    
}
</script>

<style scoped>

</style>

src/component/filter/date.js

export default function(time) {
    let date = new Date(time);
    return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
};

src/component/filter/index.js

import DateFilter from './date.js';

export default {
    install(Vue) {
        Vue.filter('date', DateFilter);
        
    }
};

src/component/js/api_config.js

const domain = 'http://vue.studyit.io/api';

export default {

    // 获取轮播图的接口
    getLunbo: `${domain}/getlunbo`,

    // 新闻相关接口
    getNL: `${domain}/getnewslist`,
    getND: `${domain}/getnew/`,             // 该接口后面需要一个id

    // 图片相关接口
    photoC: `${domain}/getimgcategory/`,
    photoL: `${domain}/getimages/`,      // 该接口后面需要一个分类id: /getimages/:id
    photoD: `${domain}/getimageinfo/`,   // 该接口后面需要一个图片id: /getimageinfo/:id
    photoT: `${domain}/getthumimages/`,  // 该接口后面需要一个图片id: /getthumimages/:id

    // 商品相关接口
    goodsL: `${domain}/getgoods/`,          // 该接口后面需要一个页码: /getgoods/?pageindex=number
    goodsD: `${domain}/goods/getdesc/`,     // 该接口后面需要一个商品id: /getdesc/:id
    goodsT: `${domain}/getthumimages/`,     // 该接口后面需要一个商品id: /getthumimages/:id
    goodsP: `${domain}/getinfo/`,           // 该接口后面需要一个商品id: /getinfo/:id

    // 购物车相关接口
    shopcL: `${domain}/goods/getshopcarlist/`,  // 该接口后面需要一串id: /getshopcarlist/:ids

    // 评论相关接口
    commentL: `${domain}/getcomments/`,     // 该接口后面需要一个id: /getcomments/:id
    commentS: `${domain}/postcomment/`,     // 该接口后面需要一个id: /postcomment/:id, 该需要content内容
};

src/component/js/main.js

// from后面的路径, 如果含有./ ../那么就相对于当前文件找文件
// 如果没有, 那么就会去node_modules里面找对应的包
// 1.1 导入第三方包
import Vue from 'vue';
import MintUi from 'mint-ui';
import 'mint-ui/lib/style.css';
import Common from '../component/common';  // 自动找到index.js引入
import 'mui/dist/css/mui.css';
import 'mui/examples/hello-mui/css/icons-extra.css';
import axios from 'axios';  
import VueRouter from 'vue-router';
import Filter from '../filter'             // 自动找到index.js引入
import '../less/index.less'; 

// 1.2 启用vue插件
Vue.use(MintUi);
Vue.use(Common);
Vue.use(VueRouter);
Vue.use(Filter);

// 2.1 导入配置
import routerConfig from '../router'    // 自动找到index.js引入
import apiConfig from './api_config.js'

// 2.2 扩展实例成员
Vue.prototype.axios = axios;   // 把axios库放置到原型, 将来其他组件直接可以拿到axios对象
Vue.prototype.api = apiConfig;

// 2.3 导入根组件
import AppComponent from '../component/App.vue';

// 2.4 渲染根组件, 启动项目
new Vue({
    el: '#app',
    render(createNode) {
        return createNode(AppComponent);
    },
    router: new VueRouter(routerConfig)
});

src/component/less/index.less

.mui-card-footer img {
    width: 100%;
}

src/component/router/index.js

// 这里对外导出一个路由配置对象
import HomeComponent from '../component/home/home.vue';
import NewsListComponent from '../component/news/news_list.vue';
import NewsDetailComponent from '../component/news/news_detail.vue';
import PhotoListComponent from '../component/photo/photo_list.vue';
import PhotoDetailComponent from '../component/photo/photo_detail.vue';

export default {
    routes: [
        // 首页路由配置
        { path: "/", redirect: "/index" },
        { name: "i", path: "/index", component: HomeComponent },

        // 新闻路由配置
        { name: "nl", path: "/news/list", component: NewsListComponent },
        { name: "nd", path: "/news/detail/:id", component: NewsDetailComponent },

        // 图片分享相关路由
        { name: "pl", path: '/photo/list/:id', component: PhotoListComponent },
        { name: "pd", path: '/photo/details/:id', component: PhotoDetailComponent },
    ]
};

src/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
</body>
</html>

.babelrc

{
    "presets": [ "env" ],
    "plugins":["transform-runtime"]
}

gitignore

# 忽略第三方包, 他们已经记录在package.json文件中了
/node_modules

# 忽略打包后的文件, 因为我们的项目核心是源代码
/dist

# 忽略隐藏文件
.* 

# 不忽略git配置文件和babel配置文件
!.gitignore
!.babelrc

webpack.config.js

const path = require('path');
const HtmlWP = require('html-webpack-plugin');
const CleanWP = require('clean-webpack-plugin');

module.exports = {
    // 打包的入口文件
    entry: path.resolve(__dirname, './src/js/main.js'),
    // 输出
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: 'bundle.js'
    },
    // 插件配置
    plugins: [
        new HtmlWP({
            template: './src/index.html',
            filename: 'index.html',
            inject: 'body'
        }),
        new CleanWP(['dist'])
    ],
    // 模块配置
    module: {

        // 配置loader规则
        rules: [

            // css
            {
                test: /\.css$/,
                use: [ 'style-loader', 'css-loader' ]
            },

            // less
            {
                test: /\.less$/,
                use: [ 'style-loader', 'css-loader', 'less-loader' ]
            },

            // html
            {
                test: /\.(html|tpl)$/,
                use: [ 'html-loader' ]
            },

            // 静态资源引用
            {
                test: /\.(png|jpeg|gif|jpg|svg|mp3|ttf)$/,
                use: [ 
                    { loader: 'url-loader', options: { limit: 10240 } } // 小于10KB的打包
                ]
            },

            // js
            {
                test: /\.js$/,
                use: [ 'babel-loader' ],
                exclude: path.resolve(__dirname, '../node_modules')
            },

            // vue
            {
                test: /\.vue$/,
                use: [ 'vue-loader' ]
            }

        ]
    }
};

5. 执行webpack-dev-server:

webpack-dev-server

07_04.图片列表内容切换

1. 首页点击图片分享跳转到图片分享的界面：

2. css样式使用的是mui插件：

3. 要操作的结构：

4. 代码：

5. 执行webpack-dev-server:

推荐阅读更多精彩内容