Vue.js入门 0x12 实战：知乎日报项目开发-推荐列表与分类

最新推荐文章于 2024-04-20 21:59:47 发布
最新推荐文章于 2024-04-20 21:59:47 发布
阅读量517 收藏 3
点赞数
分类专栏： Vue 前端基础 文章标签： Vue Vue实战 Node实战 知乎日报 滚动监测
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/funkstill/article/details/88570001
版权

搭建基本架构

    css样式直接写在 daily/style.css,并在main.js中导入：

//main.js
import Vue from 'vue';
import App from './app.vue';
import './style.css';
new Vue({
    el: '#app',
    render: h => {
        return h(App)
    }
});

    日报为单页应用，没有路由，只有一个入口组件app.vue。应用分左中右三栏，三栏都可以滚动。对左栏和中栏使用fixed固定，并使用overflow:auto滚动，而右栏高度自适应，使用浏览器默认的body区域滚动即可。基本结构如下：

//app.vue
<template>
    <div class="daily">
        <div class="daily-menu">
            <div class="daily-menu-item">每日推荐</div>
            <div class="daily-menu-item">主题日报</div>
        </div>
        <div class="daily-list">
            <Item></Item>
        </div>
        <daily-article></daily-article>
    </div>
</template>
/* style.css */
html,body {
    margin: 0;
    padding: 0;
    height: 100%;
    color: #657180;
    font-size: 16px;
}
.daily-menu {
    width: 150px;
    position: fixed;
    top:0;
    bottom: 0;
    left:0;
    overflow: auto;
    background: #f5f7f9;
}
.daily-menu-item{
    font-size: 18px;
    text-align: center;
    margin: 5px 0;
    padding: 10px 0;
    cursor: pointer;
    border-right: 2px solid transparent;
    transition: all .3s ease-in-out;
}
.daily-menu-item:hover{
    background: #e3e8ee;
}
.daily-menu-item.on{
    border-right: 2px solid #3399ff;
}
.daily-list{
    width: 300px;
    position: fixed;
    top:0;
    bottom: 0;
    left: 150px;
    overflow: auto;
    border-right: 1px solid #d7dde4;
}
.daily-item {
    display: block;
    color: inherit;
    text-decoration: none;
    padding: 16px;
    overflow: hidden;
    cursor: pointer;
    transition: all .3s ease-in-out;
}
.daily-item:hover {
    background: #e3e8ee;
}
.daily-article{
    margin-left: 450px;
    padding: 20px;
}

主题日报 

“主题日报”下有子类列表，默认是收起的，点击主题日报可以切换展开和收起的状态，使用数据showTheme来控制，并用themes来循环渲染子类目。

<!--app.vue-->
<template>
    <div class="daily-menu">
        <div class="daily-menu-item" 
            :class="{on:type==='recommend'}">每日推荐</div>
        <div class="daily-menu-item"
            :class="{on:type==='daily'}"
            @click="showTheme=!showTheme">主题日报</div>
        <ul v-show="showTheme">
            <li v-for="item in themes">
                <a :class="{on:item.id===themeId&&type==='daily'}">{{item.name}}</a>
            </li>
        </ul>
    </div>
</template>
<script>
    export default{
        data(){
            return {
                themes:[],
                showTheme:false,
                type:'recommend',
                themeId:0
            }
        },
    }
</script>
/*style.css*/
.daily-menu ul {
    list-style: none;
}
.daily-menu ul li a{
    display: block;
    color: inherit;
    text-decoration: none;
    padding: 5px 0;
    margin: 5px 0;
    cursor: pointer;
}
.daily-menu ul li a:hover, .daily-menu ul li a.on{
    color: #3399ff;
}

    themId会在点击子类时设置，稍后会有介绍。应用初始化时，获取主题日报的分类列表：

<!--app.vue-->
<script>
    import $ from './libs/util';
    export default{
        data(){
            return {
                themes:[],
                showTheme:false,
                type:'recommend',
                themeId:0
            }
        },
        methods:{
            getThemes(){
                //axios发起get请求
                $.ajax.get('themes').then(res=>{
                    this.themes = res.others;
                })
            }
        },
        mounted(){
            //初始化时调用
            this.getThemes();
        }
    }
</script>

    点击子类目时，将菜单type切换为“主题日报”高亮点击的子类，然后加载该类目下的文章列表

//app.vue
<template>
    <div class="daily">
        <div class="daily-menu">
            <div class="daily-menu-item" 
                :class="{on:type==='recommend'}">每日推荐</div>
            <div class="daily-menu-item"
                :class="{on:type==='daily'}"
                @click="showTheme=!showTheme">主题日报</div>
            <ul v-show="showTheme">
                <li v-for="item in themes">
                    <a 
                        :class="{on:item.id===themeId&&type==='daily'}"
                        @click="handleToTheme(item.id)">{{item.name}}</a>
                </li>
            </ul>
        </div>
        <div class="daily-list">
            <Item></Item>
        </div>
        <daily-article></daily-article>
    </div>
</template>
<script>
    import $ from './libs/util';
    export default{
        data(){
            return {
                themes:[],
                showTheme:false,
                type:'recommend',
                themeId:0
            }
        },
        methods:{
            getThemes(){
                //axios发起get请求
                $.ajax.get('themes').then(res=>{
                    this.themes = res.others;
                })
            },
            handleToTheme(id){
                //改变菜单分类
                this.type = 'daily';
                //设置当前点击子类的主题日报id
                this.themeId = id;
                //清空中间栏的数据
                this.list = [];
                $.ajax.get('theme/'+id).then(res=>{
                    //过滤掉类型为1的文章，该类型下的文章为空
                    this.list = res.stories
                        .filter(item=>item.type!==1);
                })
            }
        },
        mounted(){
            //初始化时调用
            this.getThemes();
        }
    }
</script>

每日推荐

    应用初始化和点击“每日推荐”菜单时请求推荐的文章列表。推荐列表的API相对地址为news/before/20190315,before后面是查询的日期，这个日期比要查询的真实日期多一天，比如要查20190314推荐的内容，就要请求20190315。每日推荐可以无限次地向前一天查询，为方便操作日期，在libs/util.js内定义两个时间方法：

// /libs/util.js
import axios from 'axios';
/*..*/
//获取今天的时间戳
Util.getTodayTime = function(){
    const date = new Date();
    date.setHours(0);
    date.setMinutes(0);
    date.setSeconds(0);
    date.setMilliseconds(0);
    return date.getTime();
}
//获取前一天的日期
Util.prevDay = function(timestamp=(new Date()).getTime()){
    const date = new Date(timestamp);
    const year = date.getFullYear();
    const month = date.getMonth()+1<10
        ?'0'+(date.getMonth()+1)
        :date.getMonth()+1;
    const day = date.getDate()<10
        ?'0'+date.getDate()
        :date.getDate();
    return year+month+day;
};
export default Util;

    推荐文章的列表获取

    app.vue

<script>
    import $ from './libs/util';
    export default{
        data(){
            return {
                themes:[],
                showTheme:false,
                type:'recommend',
                recommendList:[],
                dailyTime:$.getTodayTime(),
                isLoading:false
            }
        },
        methods:{
            getThemes(){
                //axios发起get请求
                $.ajax.get('themes').then(res=>{
                    this.themes = res.others;
                })
            },
            handleToTheme(id){
                //改变菜单分类
                this.type = 'daily';
                //设置当前点击子类的主题日报id
                this.themeId = id;
                //清空中间栏的数据
                this.list = [];
                $.ajax.get('theme/'+id).then(res=>{
                    //过滤掉类型为1的文章，该类型下的文章为空
                    this.list = res.stories
                        .filter(item=>item.type!==1);
                })
            },
            handleToRecommend(){
                this.type = 'recommend';
                this.recommendList = [];
                this.dailyTime = $.getTodayTime();
                this.getRecommendList();
            },
            getRecommendList(){
                this.isLoading = true;
                const prevDay = $.prevDay(this.dailyTime+86400000);
                $.ajax.get('news/before/'+prevDay).then(res=>{
                    this.recommendList.push(res);
                    this.isLoading = false;
                })
            }
        },
        mounted(){
            //初始化时调用
            this.getThemes();
            this.getRecommendList();
        }
    }
</script>

    两个文章列表（list，recommendList）的每一项都用一个组件item.vue来展示，在daily/components目录下新建item.vue

//components/item.vue
<template>
    <a class="daily-item">
        <div class="daily-img" v-if="data.images">
            <img :src="imgPath+data.images[0]">
        </div>
        <div 
            class="daily-title"
            :class="{noImg:!data.images}">{{data.title}}</div>
    </a>
</template>
<script>
    import $ from '../libs/util';
    export default {
        props:{
            data:{
                type:Object
            }
        },
        data(){
            return {
                imgPath:$.imgPath
            }
        }
    }
</script>

    style.css

.daily-item {
    display: block;
    color: inherit;
    text-decoration: none;
    padding: 16px;
    overflow: hidden;
    cursor: pointer;
    transition: all .3s ease-in-out;
}
.daily-item:hover {
    background: #e3e8ee;
}
.daily-img{
    width:80px;
    height: 80px;
    float: left;
}
.daily-img img {
    width: 100%;
    height: 100%;
    border-radius: 3px;
}
.daily-title{
    padding: 10px 5px 10px 90px;
}
.daily-title.noImg{
    padding-left: 5px;
}

    prop:data里可能没有images字段，所以列表会显示两种模式，即含封面图和不含封面图。

    Item组件会用到文章列表里，type为recommend和daily两种类型下，渲染会稍有不同。recommend会显示每天的日期，daily这没有。

//app.vue
<template>
    <div class="daily">
        <div class="daily-list">
            <template v-if="tyep==='recommend'">
                <div v-for="list in recommendList">
                    <div class="daily-date">{{formatDay(list.date)}}</div>
                    <Item
                        v-for="item in list.stories"
                        :data="item"
                        :key="item.id"></Item>
                </div>
            </template>
            <template v-if="type==='daily'">
                <Item
                    v-for="item in list"
                    :data="item"
                    :key="item.id"></Item>
            </template>
        </div>
        <daily-article></daily-article>
    </div>
</template>
<script>
    import $ from './libs/util';
    import Item from './components/item.vue';
    export default{
        components:{Item},
        data(){
            return {
                themes:[],
                showTheme:false,
                type:'recommend',
                recommendList:[],
                list:[],
                dailyTime:$.getTodayTime(),
                isLoading:false
            }
        },
        methods:{
            
            //转换为带汉字的
            formatDay(date){
                let month = date.substr(4,2);
                let day = date.substr(6,2);
                if(month.substr(0,1)==='0')month=month.substr(1,1);
                if(day.substr(0,1)==='0')day=day.substr(1,1);
                return `${month}月${dya}日`;
            }
        },
        mounted(){
            //初始化时调用
            this.getThemes();
            this.getRecommendList();
        }
    }
</script>

    style.css

.daily-list{
    width: 300px;
    position: fixed;
    top:0;
    bottom: 0;
    left: 150px;
    overflow: auto;
    border-right: 1px solid #d7dde4;
}
.daily-date{
    text-align: center;
    margin:10px 0;
}

自动加载更多推荐列表

//app.vue
<template>
    <div class="daily">
        <div class="daily-menu">
           
        </div>
        <div class="daily-list" ref="list">
            
        </div>
        <daily-article></daily-article>
    </div>
</template>
<script>
    import $ from './libs/util';
    import Item from './components/item.vue';
    export default{
        components:{Item},
        data(){
            return {
                themes:[],
                showTheme:false,
                type:'recommend',
                recommendList:[],
                list:[],
                dailyTime:$.getTodayTime(),
                isLoading:false
            }
        },
        methods:{
          
            getRecommendList(){
                //加载时设置为true，加载完设置为false
                this.isLoading = true;
                const prevDay = $.prevDay(this.dailyTime+86400000);
                $.ajax.get('news/before/'+prevDay).then(res=>{
                    this.recommendList.push(res);
                    this.isLoading = false;
                })
            }
        },
        mounted(){
            //初始化时调用
            this.getThemes();
            this.getRecommendList();
            //获取DOM
            const $list = this.$refs.list;
            //监听中栏的滚动事件 
            $list.addEventListener('scroll',()=>{
                //在主题日报或正在加载推荐列表时停止操作
                if(this.type==='daily'||this.isLoading)return;
                //已经滚动的距离加页面的高度等于整个内容区域高度时，视为接触底部
                if($list.scrollTop+document.body.clientHeight>=$list.scrollHeight){
                    //时间相对减少一天
                    this.dailyTime -=86400000;
                    this.getRecommendList();
                }
            });
        }
    }
</script>

 

cellinlab
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
一款简洁美观的知乎日报Vuejs
08-12
一个适合用来学习Vuejs的纯前端项目, 使用vue-router做前端路由跳转, 结合vuex和localStroage开发了收藏功能, 使用axios进行资源请求.
zhihu：:sparkles:知乎日报-爬虫，数据分析，Node.js，Vue.js ..
02-06
知乎日报的关于Node.js + Vue.js + MongoDB的知乎日报爬虫项目技术栈初步Node.js + Express + MongoDB使用Express构建web服务，爬虫爬取的数据用MongoDB存储。用node-jieba分词分析正文的标签，做则更能准确的数据...
Vue.js入门 0x11 实战：知乎日报项目开发-准备分析
cell的博客
03-15 371
下载基础项目 下载demo，复制至新建daily目录 安装webpack依赖 npm install babel@6.23.0 --save-dev npm install babel-core@6.24.0 --save-dev npm install babel-loader@6.4.1 --save-dev npm install babel-plugin-transform...
【优质书籍推荐】Vue.js+Node.js全栈开发实战
最新发布
weixin_43178406的博客
04-20 1万+
本文深入讲解了全栈开发巨作：《Vue.js+Node.js全栈开发实战（第2版）》，希望能对学习Java的同学们有所帮助。 文章目录 1. 前言 2. 书籍推荐 2.1 内容简介 2.2 本书特色 2.3 作者简介 2.4 本书目录 2.5 适合读者 3. 购买链接
《Vue.js实战》知乎日报V2.0
johnny_mu的博客
03-27 807
因为书中的代码比较久远，许多接口、webpack配置都已更新，但这个项目还是很好玩的，本文的代码都是相对于原书代码的补充。 完整代码:https://github.com/JohnnyMu/zhihuDaily webpack配置 虽然最新的webpack已经是4.0版本。但与书中的webpack2大多能兼容，只有几个地方稍有变化 vue-loader vue-loader@15.x 版本相较之...
Vue.js入门 0x13 实战：知乎日报项目开发-文章详情页
cell的博客
03-15 507
加载内容 右侧的文章内容区域封装成了一个组件。在components目录下新建daily-article.vue组件，它唯一接收唯一的一个prop:id,也就是文章的id，如果id变化了，就说明切换了文章，需要请求新的文章内容。 在app.vue中导入daily-article.vue组件，并在文章列表的Item组件上绑定查看文章事件 //app.vue &lt;templ...
vue.js实战,知乎日报项目(重点在于代理服务)
zhangCheng的博客
07-19 339
1、项目结构 2、请求工具类unti.js //引入axios import axios from 'axios'; //设置api接口和imgPath根路径 const Util={ apiPath:'/apis', imgPath:'' } //声明axios发送请求的方法ajax,设置发送请求的根路径为apiPath, // 也就是说不管什么地方调用Util.ajax方法 // 路...
vue.js项目实战,vue.js项目实战pdf下载,JavaScript
09-10
Vue.js 是一款轻量级的前端JavaScript框架，由尤雨溪开发，因其简单易学、高效灵活的特性，在Web开发领域迅速崛起。本资源聚焦于"Vue.js项目实战"，旨在帮助开发者通过实际操作深入理解Vue.js的核心概念和技术，从而...
vue.js移动端app实战1：初始配置详解
12-09
Vue.js 移动端 App 开发实战初探 在本文中，我们将深入探讨使用 Vue.js 2.x 构建一个移动端 Web 应用程序的基本配置。这个项目虽然规模不大，但涵盖了许多常见的功能，例如轮播图、下拉刷新、上拉加载和图片懒加载...
Vue.js前端开发基础与项目实战
08-13
在“Vue.js前端开发基础与项目实战”这个主题中，我们将深入探讨Vue.js的核心概念、基本语法以及实际项目的构建过程。 1. **Vue.js核心概念**： - **虚拟DOM**：Vue.js使用虚拟DOM来提高网页更新性能，减少不必要...
vue.js-starter-template：Vue.js项目的入门模板
01-29
Vue.js入门模板 一个入门模板，可使用真棒的库来弄脏您的手。 内置： ...还有很多 入门 确保已全局安装了 。 从项目根目录克隆回购和运行yarn 单个文件组件 有关用法示例，请参见。 可用命令 yarn start 运行...
超炫的高仿知乎日报项目源码
08-20
超炫的高仿知乎日报项目源码+apk+github地址 另外我把编写过程记录了下来 教程地址：http://krelve.com/android/130.html
基于Vue20的知乎日报单页应用
08-10
基于Vue2.0的知乎日报单页应用
Vue.js最新书籍,全套书籍
06-23
Vue.js最新书籍,全套书籍,学好Vue走遍天下都不怕!
NC开发日记(2010)
10-25
这是我的原创资源，是我三年的ＮＣ开发的心得，
Vue实战知乎日报（4）--daily-article组件
Beq
08-21 1063
daily-article是知乎日报中最重要的内容板块: 单独列出来，作具体分析： 内容板块包括主题title，内容content,以及评论区comments 内容渲染主要通过watch监控id变化时触发getArticle函数渲染，使用来自util配置的ajax（引用了axios模块）， 通过正则匹配对应src的内容替换res.body的src内容成图片路径，将数据返回给内容，回滚顶...
VUE实战第一天-知乎日报项目开发
Beq
08-20 991
第一步配置webpack：      打开命令行，在指定文件夹下运行npm init,直接回车     npm install --save-dev webpack      npm install --save-dev -webpack-dev-server 在package.json里配置dev：webpack-dev-server --open --config webpack.co...
使用vue.js构建一个知乎日报
weixin_34090643的博客
01-16 158
Vue.js是我所喜爱的，知乎也是我喜爱的，突发奇想使用vue做了一个知乎日报 项目地址： Github地址在线预览demo 设计： 1.设计上没有按照知乎日报客户端的交互及UI设计来做，本渣亲自捏了一个，颜色以黑白灰为主，本来想加入知乎的蓝色，但是本渣设计功力实在太差，故舍弃掉了蓝色，只采用黑白灰三色。 2.日报条目采用无边界设计，只添...
VUE实战知乎日报源码以及BUG分析
Beq
08-21 1418
源码已上传至https://github.com/anymouschina/daily， 下载后请先 npm install npm run dev 记住开启代理服务，即在当前文件下的终端下使用 node proxy.js 运行如下，获取http://news-at.zhihu.com/的实时内容，所有代码来自手敲，copyfrom 《Vue.js实战》 运行后...
Vue.js快速入门与实战指南：从新手到专业开发
"《Vue.js 前端开发 快速入门与专业应用》是由陈陆扬编著的一本针对前端开发者的实用指南。该书旨在帮助读者快速掌握并深入理解Vue.js，一种流行的MVVM（Model-View-ViewModel）框架，特别强调实践应用而非理论讲解...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值