15.blog前端-博客首页

已于 2022-02-05 20:00:01 修改
阅读量731 收藏
点赞数
分类专栏： blog 文章标签： 前端 vue.js javascript
于 2022-02-04 20:26:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45974277/article/details/122784592
版权

App.vue

<template>
  <div id="app">
    <!--博客首页显示-->
    <router-view>

    </router-view>

    <!--回到顶部的组件-->
    <go-top></go-top>
  </div>
</template>

<script>
  import GoTop from "@/components/gotop/GoTop"
export default
{
  name: 'App',
  components:
  {
    "go-top": GoTop,

  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

这里由@作为src目录，需要进行一个配置

vue.config.js：

const path = require('path')
function resolve(dir) {
    return path.join(__dirname, dir)
}
module.exports =
    {
        lintOnSave:true,
        pages:
            {
                index:
                    {
                        entry: 'src/main.js',
                    }
            },
        configureWebpack: {
            resolve: {
                alias: {
                    '@': resolve('src')
                }
            }
        }
    }

在components下新建gotop目录，新建组件GoTop.vue，实现首页到了底部，点击一个按钮重新回到顶部：

<template>
    <transition>
        <div @click="toTop" v-if="topShow" class="me-to-top">
            <i class="el-icon-caret-top"></i>
        </div>
    </transition>
</template>

<script>
export default
{
    name:'GoTop',
    data()
    {
        return{
            topShow:false//默认不在底部就不显示
        }
    },
    methods:
    {
        toTop()//回到顶部
        {
            document.body.scrollTop = 0;
            document.documentElement.scrollTop = 0;
            this.topShow = false;
        },
        needToTop()
        {
          let currentHeight = document.documentElement.scrollTop ||  document.body.scrollTop;
          this.topShow = currentHeight > 400;
        },
    },
    mounted()
    {
        this.$nextTick(()=>
        {
            //对窗体的滚动添加一个事件，监听窗体的滚动（只要滚动栏一滚动，该事件就生效）
            window.addEventListener("scroll", this.needToTop);
        });
    }
}
</script>

<style>
    .me-to-top
    {
        background-color: #fff;
        /*相对于浏览器窗口进行定位*/
        position: fixed;
        right: 100px;
        bottom: 150px;
        width: 40px;
        height: 40px;
        border-radius: 20px;
        /*移入该范围光标变成手指*/
        cursor: pointer;

        transition: .3s;
        /*阴影度*/
        box-shadow: 0 0 6px rgba(0, 0, 0, .12);
        /*重叠度*/
        z-index: 5;
    }

    .me-to-top i
    {
        color: #00d1b2;
        display: block;
        line-height: 40px;
        text-align: center;
        font-size: 18px;
    }
</style>

这里需要引入elementUI的一个样式icon,需要先安装elementUI 

然后package.json文件会出现相应的依赖 

 main.js引入elementUI

import Vue from 'vue'
import App from './App.vue'
import router from "./router";
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  router,
}).$mount('#app')

重新运行就有该样式了 

在views下添加Index.vue，充当中间的页面

<template>
  <div>
    <el-container>
        <el-main class="myArticles">
            <!--文章列表-->
            <ArticleItem v-for="article in articles"
                         v-bind="article"
                         :key="article.id"
            ></ArticleItem>
        </el-main>
        <el-aside>Aside</el-aside>
    </el-container>
  </div>
</template>

<script>
    import ArticleItem from "@/components/article/ArticleItem"
    export default
    {
        name: '',
        components:
        {
          ArticleItem,
        },
        data()
        {
            return{
                articles:
                [
                    {
                        id:"1",
                        weight:1,
                        title:"标题1",
                        commentCounts:123,
                        viewCounts:123,
                        summary:"概要11",
                        author:"作者",
                        tags:[{"tagName":"vue"}],
                        createDate:"3333"
                    },
                    {
                        id:"2",
                        weight:1,
                        title:"标题2",
                        commentCounts:123,
                        viewCounts:123,
                        summary:"概要11",
                        author:"作者",
                        tags:[{"tagName":"vue"}],
                        createDate:"111"
                    },
                    {
                        id:"3",
                        weight:1,
                        title:"标题3",
                        commentCounts:123,
                        viewCounts:123,
                        summary:"概要11",
                        author:"作者",
                        tags:[{"tagName":"vue"}],
                        createDate:"222"
                    }
                ]
            }
        }
    }
</script>

<style scoped>
.el-container
{
    width: 960px;
}
/*右侧边栏*/
.el-aside
{
    /*右侧和主部空了20px的距离*/
    margin-left: 20px;
    width: 260px;
}
/*主栏*/
.el-main {
    padding: 0px;
    line-height: 16px;
}
/*文章列表*/
.el-card {
    border-radius: 0;
}
/*设置卡片最后一个子元素除外的样式，第一个不用和上面有间隙*/
.el-card:not(:first-child)
{
    margin-top: 20px;
}
</style>

在router的index文件中添加对应的路由（不然App的router-view没有显示的）

import Vue from 'vue'
import VueRouter from 'vue-router'
import foo from '../pages/foo'
import bar from '../pages/bar'
Vue.use(VueRouter)

const router = new VueRouter({
    routes:
    [
        {
            path:"/",
            component: r => require.ensure([], () => r(require('@/views/Index')), 'index')
        }
    ]
});
export default router

 文章列表是由一组card组成，所以在components下新建article，在其下新建ArticleItem.vue:

<template>
    <el-card class="my-area" :body-style="{ padding: '16px' }">
        <!--文章标题、评论数、阅读文章数-->
        <div class="my-article-header">
            <a @click="view(id)" class="my-article-title">{{title}}</a>

            <el-button v-if="weight > 0" class="my-article-icon" type="text">置顶</el-button>

            <!--评论数-->
            <span class="my_pull-right my_article-count">
                <i class="my-icon-comment"></i>&nbsp;
                {{commentCounts}}
            </span>

            <!--阅读文章数-->
            <span class="my-pull-right my-article-count">
	    	    <i class="el-icon-view"></i>&nbsp;
                {{viewCounts}}
	        </span>
        </div>

        <!--摘要-->
        <div class="my-article-description">
            {{summary}}
        </div>

        <!--作者、标签、时间-->
        <div class="my-article-footer">
            <span class="my-article-author">
                <i class="my-icon-author"></i>&nbsp;
                <el-tag>{{author}}</el-tag>
            </span>

            <el-tag v-for="t in tags" :key="t.tagName" size="mini" type="success">
                {{t.tagName}}
            </el-tag>

            <span class="my-pull-right my-article-count">
                <i class="el-icon-time"></i>&nbsp;
                {{createDate | format}}
            </span>
        </div>

    </el-card>
</template>

<script>
    export default
    {
        name:"ArticleItem",
        props:
            {
                id: String,
                weight: Number,
                title: String,
                commentCounts: Number,
                viewCounts: Number,
                summary: String,
                author: String,
                tags: Array,
                createDate: String
            },
        methods:
            {
                /*点击文章标题，跳转到文章详情*/
                view(id)
                {
                    this.$router.push({path:`/view/${id}`})
                }
            }
    }
</script>

<style>
    /*文章header*/
    .my-article-header
    {
        padding-bottom: 10px;
    }
    /*标题大小*/
    .my-article-title
    {
        font-weight: 600;
    }
    /*是否置顶icon*/
    .my-article-icon
    {
        padding: 3px 8px;
    }
    /*阅读文章数*/
    my-article-count
    {
        color: #ff00ff;
        padding-left: 14px;
        font-size: 13px;
    }
    /*？？*/
    .my-pull-right
    {
        float: right;
    }
    /*文章摘要*/
    .my-article-description
    {
        font-size: 13px;
        line-height: 24px;
        margin-bottom: 10px;
    }
    .my-article-author
    {
        color: #aa00ff;
        padding-right: 18px;
        font-size: 13px;
    }
    .el-tag
    {
        margin-left: 6px;
        color: #ffffff;
        background-color: #ff00ff;
    }
</style>

时间格式化工具类：

/*文章创建时间格式化*/
export function formatTime(time)
{
    const d = new Date(time);
    const now = Date.now();

    const diff = (now - d) /1000;//单位为秒

    if(diff<30)/*如果文章创建时间小于30秒*/
    {
        return "刚刚";
    }else if(diff < 3600)
    {
        /*向上取整*/
        return Math.ceil(diff/60) + "分钟前";
    }else if(diff < 3600 * 24)
    {
        return Math.ceil(diff/3600) + "小时前";
    }else if(diff < 3600 * 24 *2)
    {
        return "1天前";
    }
    return time;
}

main.js里面使用：

/*格式化时间*/
import {formatTime} from "./utils/time";
Vue.filter('format',formatTime);

文章列表是一个分页列表，这里我们需要实现，下拉分页，即如果拉到底部，就会请求下一页的数据，如果有数据就加载出来，如果没数据，就证明到达最后一页

新建scrollpage/index.vue

<!--加载动画-->
<template>
    <div ref="scroll" id="scroll-page" style="overflow: hidden">
        <slot></slot>
        <!--loading动画，加载的数据的过程中显示 elementUI load-->
        <div
            style="height: 40px;margin-top: 10px;z-index: 1"
            v-loading="loading"
            element-loading-text="拼命加载中"
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(245,245,245)">
        </div>
    </div>

</template>

<script>
    export default
    {
        name: "index",
        props: {
            loading: Boolean,
            noData: Boolean,
            offset: Number
        },
        mounted() {
            //绑定事件监听,滚动的时候触发
            window.addEventListener('scroll', this.handleScroll, false);
        },
        beforeDestroy() {
            //移出事件监听
            window.removeEventListener('scroll', this.handleScroll);
        },
        data() {
            return {
                scrollAction: {
                    x: 'undefined',
                    y: 'undefined'
                }
            }
        },
        methods: {
            handleScroll(e) {
                let that = this;
                if (!that.noData) {
                    //如果有数据，触发
                    let curHeight = document.documentElement.scrollTop || document.body.scrollTop;
                    //获取div区域
                    let scrollPage = document.getElementById('scroll-page');

                    if ((curHeight + window.innerHeight >= that.$refs.scroll.offsetHeight + that.offset) && that.isDownDirection())
                    {
                        //判断是否到达底部
                        if (!that.loading) {
                            //调用load加载数据
                            that.$emit('load')
                        }
                    }
                }
            },
            isDownDirection()
            {
                if (typeof this.scrollAction.x == 'undefined') {
                    this.scrollAction.x = window.pageXOffset;
                    this.scrollAction.y = window.pageYOffset;
                }
                let diffX = this.scrollAction.x - window.pageXOffset;
                let diffY = this.scrollAction.y - window.pageYOffset;

                this.scrollAction.x = window.pageXOffset;
                this.scrollAction.y = window.pageYOffset;

                if (diffX < 0) {
                    // Scroll right
                } else if (diffX > 0) {
                    // Scroll left
                } else if (diffY < 0) {
                    // Scroll down
                    return true
                } else if (diffY > 0) {
                    // Scroll up
                } else {
                    // First scroll event
                }
                return false
            }

        }
    }
</script>

<style scoped>

</style>

 在views下新建common文件夹，其中新建ArticleScrollPage.vue,

将文章列表放入滚动分页区域内

<template>
    <scroll-page :loading="loading"
                 :offset="offset"
                 :no-data="noData"
                 @load="load">
        <article-item v-for="article in articles"
                      :key="article.id"
                      v-bind="article">
        </article-item>
    </scroll-page>
</template>

<script>
    import ArticleItem from '@/components/article/ArticleItem'
    import ScrollPage from '@/components/scrollpage'
    export default
    {
        name: "ArticleScrollPage",
        props: {
            offset: {
                type: Number,
                default: 0
            }
        },
        watch: {
        },
        created() {
            this.getArticles()
        },
        data() {
            return {
                loading: false,
                noData: false,
                //分页信息
                innerPage: {
                    pageSize: 5,
                    page: 1,
                    name: 'a.createDate',
                    sort: 'desc'
                },
                //文章列表
                articles: []
            }
        },
        methods: {
            load() {
                //下拉触发分页的时候,调用接口加载
                alert("触发分页")
                this.getArticles();
            },
            getArticles() {
                let that = this
                that.loading = true
                that.articles = that.articles.concat([
                    {
                        id:"1",
                        weight:1,
                        title:"标题1",
                        commentCounts:123,
                        viewCounts:123,
                        summary:"概要11",
                        author:"作者",
                        tags:[{"tagName":"vue"}],
                        createDate:"3333"
                    },
                    {
                        id:"232",
                        weight:1,
                        title:"标题1",
                        commentCounts:123,
                        viewCounts:123,
                        summary:"概要11",
                        author:"作者",
                        tags:[{"tagName":"vue"}],
                        createDate:"3333"
                    },
                    {
                        id:"2",
                        weight:1,
                        title:"标题2",
                        commentCounts:123,
                        viewCounts:123,
                        summary:"概要11",
                        author:"作者",
                        tags:[{"tagName":"vue"}],
                        createDate:"11111"
                    },
                    {
                        id:"3",
                        weight:1,
                        title:"标题3",
                        commentCounts:123,
                        viewCounts:123,
                        summary:"概要11",
                        author:"作者",
                        tags:[{"tagName":"vue"}],
                        createDate:"2222"
                    },
                    {
                        id:"4",
                        weight:1,
                        title:"标题3",
                        commentCounts:123,
                        viewCounts:123,
                        summary:"概要11",
                        author:"作者",
                        tags:[{"tagName":"vue"}],
                        createDate:"2222"
                    },
                    {
                        id:"5",
                        weight:1,
                        title:"标题3",
                        commentCounts:123,
                        viewCounts:123,
                        summary:"概要11",
                        author:"作者",
                        tags:[{"tagName":"vue"}],
                        createDate:"2222"
                    },
                    {
                        id:"6",
                        weight:1,
                        title:"标题3",
                        commentCounts:123,
                        viewCounts:123,
                        summary:"概要11",
                        author:"作者",
                        tags:[{"tagName":"vue"}],
                        createDate:"2222"
                    },
                    {
                        id:"7",
                        weight:1,
                        title:"标题3",
                        commentCounts:123,
                        viewCounts:123,
                        summary:"概要11",
                        author:"作者",
                        tags:[{"tagName":"vue"}],
                        createDate:"2222"
                    },
                    {
                        id:"8",
                        weight:1,
                        title:"标题3",
                        commentCounts:123,
                        viewCounts:123,
                        summary:"概要11",
                        author:"作者",
                        tags:[{"tagName":"vue"}],
                        createDate:"2222"
                    }
                ]);
                this.noData = false;
                that.loading = false
            }
        },
        components: {
            'article-item': ArticleItem,
            'scroll-page': ScrollPage
        }
    }
</script>

<style scoped>
    .el-card {
        border-radius: 0;
    }

    .el-card:not(:first-child) {
        margin-top: 10px;

    }
</style>

这样，views下的Index就直接用ArticleScrollPage组件即可

<template>
  <div>
    <el-container>
        <el-main class="myArticles">
            <!--文章列表-->
            <ArticleScrollPage>

            </ArticleScrollPage>
        </el-main>
        <el-aside>Aside</el-aside>
    </el-container>
  </div>
</template>

<script>
    import ArticleScrollPage from "@/components/common/ArticleScrollPage"
    export default
    {
        name: '',
        components:
        {
            ArticleScrollPage,
        },
    }
</script>

<style scoped>
.el-container
{
    width: 960px;
}
/*右侧边栏*/
.el-aside
{
    /*右侧和主部空了20px的距离*/
    margin-left: 20px;
    width: 260px;
}
/*主栏*/
.el-main {
    padding: 0px;
    line-height: 16px;
}
/*文章列表*/
.el-card {
    border-radius: 0;
}
/*设置卡片最后一个子元素除外的样式，第一个不用和上面有间隙*/
.el-card:not(:first-child)
{
    margin-top: 20px;
}
</style>

苏七qaq
关注
专栏目录
个人博客：前端首页展示
triet的博客
06-27 999
更改前端Index.html前的效果图 改写前端Index.html代码 编写IndexController package net.tjl.blog.web; import net.tjl.blog.service.BlogService; import net.tjl.blog.service.TagService; import net.tjl.blog.service.TypeService; import org.springframework.beans.factory.annotation
个人博客前端界面
03-06
个人博客系统,精美界面,你值得拥有.做毕设的小伙伴可以参考使用.
博客系统前端（页面设计）
qq_57574258的博客
12-26 1596
预期设计页面 博客列表页 博客正文页 博客登陆页 博客编辑页 所有页面公用的css代码 common.css *{ margin:0; padding:0; box-sizing: border-box; } /* 设置整体页面高度 */ html,body{ height:100%; background-image: url("../img/02.jpg"); background-position: center center; backgr
博客前端模板
打代码是一天，不打代码也是一天
12-03 1161
采用bootstrap技术响应式实现博客首页和详情页。全部采用bootstrap自带样式。
小而美的个人博客——前端——blog
qq_52185040的博客
07-05 487
和上一页页面首页一样也是分成了三个部分，而且导航栏和底部和上次是一样的，要改变的内容就只有中间内容部分 在css目录里新建两个css文件 附上代码： body{ background: url("…/images/background1.jpg"); } .m-padded-mini{ padding: 0.2em !important; } .m-padded-tiny{ padding: 0.3em !important; } .m-padded-tb-mini{ padding-top: 0.2e
计算机前端-核心编程. MVC和blog项目.day3-02博客前后台功能介绍.avi
05-24
计算机前端-核心编程. MVC和blog项目.day3-02博客前后台功能介绍.avi
chmaro-technical-blog:Fullstack.pl课程-技术博客
03-06
【标题】"chmaro-technical-blog:Fullstack.pl课程-技术博客" 涉及的是一个关于全栈开发的学习资源，特别是与JavaScript相关的技术博客。这个标题表明这是一个集中的学习平台，旨在帮助开发者，尤其是那些对全栈开发...
计算机毕业设计-博客前端项目-blog-ui-master.zip
03-19
这是一个关于计算机毕业设计的前端项目，名为"blog-ui-master"，主要关注于用户界面（UI）的开发。这个项目可能是为了展示学生在学习过程中对前端技术的理解和应用能力，包括但不限于HTML、CSS、JavaScript以及可能...
Node.js-W-Blog是一个基于vue和node的小小小博客前端用vue后端用egg.js
08-10
Node.js-W-Blog是一个结合了Vue.js和Egg.js技术栈的小型博客系统，旨在提供一个轻量级、易维护的个人或小型团队内容管理平台。该项目采用前后端分离的开发模式，前端利用Vue.js进行用户界面的构建，后端则使用Egg.js...
前端-PDF预览水印-viewer.js-增加添加水印逻辑
06-16
最近在做一个关于pdf文件水印相关的需求。在通过viewer.js 组件预览上传后已有水印的文件时，发现水印没有显示。这个修改后的viewer.js将解决这个问题 博客原文：...
个人博客主页制作
12-26
个人博客主页制作 web前端
21.blog前端-分类详情、标签详情
weixin_45974277的博客
02-10 390
1
20.blog前端-文章分类、标签分类
weixin_45974277的博客
02-09 348
1
探索Vue-Blog：一个高效、可定制的前端博客框架
最新发布
gitblog_00067的博客
04-15 444
探索Vue-Blog：一个高效、可定制的前端博客框架 vue-blogA single-user blog built with vue2, koa2 and mongodb which supports Server-Side Rendering项目地址:https://gitcode.com/gh_mirrors/vu/vue-blog 项目简介 是由北京邮电大学HJM团队开发的一款基于Vu...
16.blog前端-统一请求处理
weixin_45974277的博客
02-05 655
接下来，我们需要将文章数据变成动态的，也就是通过发ajax请求，从后端请求数据，并进行展示。 后端-是码神之路博客系统，已经实现好的 发起http请求我们使用axios: 易用、简洁且高效的http库 加入依赖： npm install --save axios vue-axios //将下面代码 加入 main.js import Vue from 'vue' import axios from 'axios' import VueAxios from 'vue-axios' V..
vue better-scroll用法
weixin_30446613的博客
10-18 1034
滚动位置固定：在vue中通过路由切换页面时组件会自动滚动到顶部，需要监听滚动行为才能让滚动位置固定，better-scroll解决了这个问题。 常用效果：移动端很常见的效果，当滑动右边部分的时候，左边会联动显示与当前内容相符合的标题高亮，当点击左边某一个标题的时候，右边会自动滑动到相应的内容。 npm install better-scroll --save import BScr...
HTML+CSS+JS网页设计期末课程大作业 京剧文化水墨风书画
而风不止
11-14 2万+
网页设计题材，DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业，茶文化网站 | 中华传统文化题材 | 京剧文化水墨风书画 | 中国民间年画文化艺术网站 | HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为。
vue新闻滚动_vue实现新闻展示页的步骤详解
weixin_39531992的博客
12-19 838
需求1. 做一个新闻展示页2. 新闻分类可以自定义3. 每类新闻的内容，样式不一样4. 上拉加载新的数据5. 点击进入详情页，再返回时，定位到原来的位置图片展示采用的技术轮播图使用：swiperzepto.jsvue.jsvue.resource.jsvue-router.js滑动插件：iscroll.js界面样式采用的 weui设计的思路因为使用了vue.js 每个分类的样式不一...
【方法】搭建自己的个人博客主页
热门推荐
crazyang的博客
08-30 3万+
2019/11/6 更新 看到了很多精美的Jekyll主题，在这里作为一个收集吧，随时想换就可以换 Minima，效果 看着那么多大牛都有自己的个人博客主页，甚是羡慕，所以我也来假装假装大牛，希望不要被识破。 参考链接，柏荧大神写的是真的详细，我是跟着他的教程手把手搭建的，过程中我也添加了一点自己的心得，本来是想要直接转载的，但现在用我的经历重新编辑分享出来，就写原创咯。 声明这是利用...
Vue.js 0.12.0-beta4源码解析与组件说明
资源摘要信息:"Vue.js是一个流行的前端JavaScript框架，用于构建用户界面和单页应用程序。Vue-0.12.0-beta4.zip文件是Vue.js早期的一个Beta版本的源代码压缩包。该版本的Vue.js虽然不是最新版本，但研究它的源代码...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值