博客列表改造成消息列表

最新推荐文章于 2024-10-01 20:12:28 发布

我的火龙果呢

最新推荐文章于 2024-10-01 20:12:28 发布

阅读量225

点赞数

分类专栏： vue的使用文章标签： javascript 前端 vue.js Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_46511995/article/details/129678799

版权

vue的使用专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章描述了一位作者在做毕业设计时，通过改造之前的博客列表项目来创建一个显示最新消息的功能。作者使用Vue.js框架，展示了一个包含消息标题、内容、图片和发布时间的列表，并实现了分页功能。虽然不擅长美工和CSS，但通过学习和实践成功完成了这个功能。

摘要由CSDN通过智能技术生成

因为最近做毕设突然突发奇想，在页面路由上整了一个最新消息，找了很多种网站学习后发现不会美工，也不会什么css。突然想起来之前做的博客列表项目可以改一改成为最新消息列表。直接开干

没什么好说的，东西都在代码里面，上代码

<template>
    <div class="page">

        <!-- 消息列表 -->
        <section class="">
            <section class="question-list-lh-bj-list-pr">
                <ul class="pr-10">
                <li v-for="(item,index) in noticeList" :key="index" class="noter-cont">
                      <aside class="noter-pic-notice">
                        <img :alt="item.title" :src="item.picture" class="img-responsive-notice">
                      </aside>
                      <div class="nptice-ntr">
                        <font class="nptice-ntr-word"> 
                          商品名称:{{item.title}}
                        </font>
                      </div>
                    <div class="noter-txt-content">
                        消息内容:<p>{{item.content}}</p>
                    </div>
                    <div class="noter-txt-time">
                        <span class="">
                            <font class="">发布时间:{{item.gmtCreate}}</font>
                        </span>
                    </div>
                    </li>
                </ul>
            </section>
        </section>

        <!-- 页面尾部 分页 -->
          <div style="margin: 30px 0;text-align: center;overflow: auto;">
            <el-pagination
                  @size-change="sizeChangeHandle"
                  @current-change="currentChangeHandle"
                  :current-page="current"
                  :page-sizes="[8,12,16,32]"
                  :page-size="pageSize"
                  :total="totalPage"
                  layout="total, sizes, prev, pager, next, jumper">
               </el-pagination>
          </div>
    </div>
</template>

上js

<script>
import {getAllNotiverFront} from '../../api/notice'
export default {
      components: {},
        data() {
          return {
             value: new Date(),
             param:{},
             current: 1,
             pageSize: 8,
             totalPage: 0,
             noticeList:[],
          };
        },
        mounted() {
        },
        methods: {
        //调用notice接口获取数据
        initDataList(){
            this.param = {
                'title':''
            }
            getAllNotiverFront(this.current,this.pageSize,this.param).then((resp)=>{
                console.log("调用getAllNotiverFront接口返回的出参是:",resp.data);
                const {code,message,data} = resp.data
                if(code==='00000'){
                    this.noticeList = data.records;
                    this.totalPage = data.total;
                }else{
                    this.noticeList = "";
                }
            })
        },
        // 每页数
        sizeChangeHandle (val) {
            this.pageSize = val
            this.current = 1
            this.initMenuInfoList()
          },
        // 当前页
        currentChangeHandle (val) {
            this.current = val
            this.initMenuInfoList()
          },
          handleClick(tab, event) {
            console.log(tab, event);
          },
        },
        created(){
            this.initDataList();
        },
      };
</script>

上css