2020/03/22 04-博客列表显示功能实现

最新推荐文章于 2022-07-28 11:23:11 发布
最新推荐文章于 2022-07-28 11:23:11 发布
阅读量404 收藏
点赞数
分类专栏： 61前后端分离博客项目(七)核心业务开发与项目部署
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42227818/article/details/105037750
版权

这个token是我们在登陆成功后，由服务器端返回的token，我们为了长久保存，放到了另一项技术（放到local storage也可以）
在这里插入图片描述
local storage是跟浏览器相关，也跟访问的某个域有关，跟cookie一样，是放在域中的，有一点不如cookie，cookie是浏览器很早就实现的技术（知道要定期清理），token还在发展，存是没有问题的，但是过期清理没有替你做，所以要借用库来做这样的事情，所以要做一些判断，要把过期插件加进去，add plugin，加入后就可以调用方法了，调用方法之后发现可以判断这个数据过期没过期，所以用这些方法可以完成我们需要的功能
在这里插入图片描述
jwt和这个过期是两码事

在这里插入图片描述
这里的过期是kv对的过期，是100年过期都有可能的
在这里插入图片描述
但是这个kv对只保留8小时
在这里插入图片描述
要看jwt是否过期还要看secret key 在这里插入图片描述
jwt是服务器端验证是否过期，这里是kv对是否过期，这两个值可以不相等但是一般相等在这里插入图片描述
在这里插入图片描述

这个组件可以搜过期的插件
在这里插入图片描述
过期插件可以导出一大堆函数，
在这里插入图片描述
这些函数就是它支持的
在这里插入图片描述
Removeexpirekeys是在store里调用的，也就是装了这个插件，把这个插件add进来后，就可以拥有这个方法了在这里插入图片描述
这个方法在这个插件的expire里写
在这里插入图片描述
这个js里还定义其他的方法
在这里插入图片描述

我们写的例子是，如果要过期功能，store里一定要调用过期插件，加载一下，然后我们就设置时间有效了,10秒，然后下面是每5秒看一下值
在这里插入图片描述
第二个5秒打印出来的值就有点问题了
在这里插入图片描述
过期之后拿到的值是undefined，判断大于小于0就是false
在这里插入图片描述
官方是这么写的，断言这两个比较真还是假

在这里插入图片描述
最后再post里把过期插件带上
在这里插入图片描述
加进去这个store才可以验证过期时间了，undefined在这里可以用作假来用
在这里插入图片描述
其实一个道理，拿到的时候返回这个，所以上面可以不用
在这里插入图片描述
所以可以不要，但是要装插件，如果不加这个插件，在当前环境这个store直接去get可能不会做时间判断，所以建议先加上插件，再用store
在这里插入图片描述

在这里插入图片描述
用这种方式加上时间过期的插件，这样去取一个值，如果取不到就会去判断是否过期，过期就取不到，取不到就被清除掉了
在这里插入图片描述
拿到值，如果是空字符串发送过去一点用没有，如果拿不到token值可以立马返回一个值或者

在这里插入图片描述
或者触发一个值，触发一个值之后，有一个被观察者，这个被观察者就叫未登录，只要一触发未登录，就立马不能编辑文章了
在这里插入图片描述
post里也是，如果发现取不到，立马变成未登录，如果未登录触发一个观察者之后
在这里插入图片描述
而且这个被观察者就在pub中被引用了一次，就像这样被引用了一次，如果发现未登录直接跳转到登录页上去就解决了问题
在这里插入图片描述
列表页是比较麻烦的
在这里插入图片描述

先看官方有没有列表组件

在这里插入图片描述
有时候文章回显示一个摘要出来

在这里插入图片描述
布局,用最普通就行

在这里插入图片描述
列表是比较常用的东西，数据不是很多的情况下，实际上可以不用table，直接用这种方式就可以，用这边的table可以控制表格样式
在这里插入图片描述
告诉你使用方法了


下面写列表页，创建个list组件，如果比较多的组件，建议component里才分几个文件夹
在这里插入图片描述
从pub那里抄过来

在这里插入图片描述
这里如果list就跟我们用的list冲突了，所以改成L
在这里插入图片描述
精简下就剩这么多了
在这里插入图片描述
list直接return，这样就符合我们的要求了
在这里插入图片描述
item’，data，，这里就是遍历每个元素，将信息打印出来，这里就是定义遍历元素，怎么处理元素的函数
在这里插入图片描述

data现在就是可以遍历的东西
在这里插入图片描述
在这里插入图片描述
保存下
在这里插入图片描述
在list里加个

在这里插入图片描述
还是没办法

在这里插入图片描述
说L这边有问题
在这里插入图片描述
说L里的render有问题

在这里插入图片描述
能有问题的就是它了

在这里插入图片描述
在antd，list找它的样式，好像没有
在这里插入图片描述
问题在这里，antd版本是2.9但是不到3
在这里插入图片描述
在这里插入图片描述
2.x版本的list版本是没有的在这里插入图片描述
list是从3.x开始的。有几种办法：
1.把package.json里的antd版本替换掉，然后npm update，之前用yarn安装就yarn upgrade antd@^3.1.5，代表3.x最高的
在这里插入图片描述
停止服务，先更新
在这里插入图片描述
现在就是最高版本

在这里插入图片描述
现在antd文件夹list就有了

在这里插入图片描述
给list样式
在这里插入图片描述
启动服务

在这里插入图片描述
把值拿出来了，也就是遍历其中元素，需要给个容器遍历，能用的容器就是数组和对象，只能用数组

在这里插入图片描述
在这里插入图片描述
现在想办法把这个数据要想办法处理掉
在这里插入图片描述
在这里插入图片描述
打开一个列表页，刚才所有的都是点击按钮产生一个事件，这个事件然后才调用的service，才去访问的数据，提交数据或者获取数据。也就是在第一次render的时候就提供数据了，比它还早，想象组件生命周期比它还早，几个几个跟props和state相关，你只能用constructor，给你能用的东西，一般自己能用，自定义函数自定义render，自定义constructor
在这里插入图片描述
想在post里拿pub

在这里插入图片描述
快捷键有format里的东西
在这里插入图片描述

拿数据本来用getall，现在试试list
在这里插入图片描述
django里写的getall

在这里插入图片描述
这两个暂时用不到

在这里插入图片描述
这边映射是什么都不写
在这里插入图片描述
这块list也什么都不写
在这里插入图片描述
get部分，header也不要
在这里插入图片描述
在这里插入图片描述
get方法，url+config，config可以不写，不写就点then，返回一个promise对象
在这里插入图片描述
用了baseurl，已经满足我们要求了，发起了就是对post的访问
在这里插入图片描述
一旦发起请求，什么都不要直接去拿数据即可
在这里插入图片描述
getall首先返回的是json对象，这个json对象有两个kv对，posts对应数组，pagination里有4项在这里插入图片描述
这样拿到的response.data里有posts，pagination
在这里插入图片描述
被观察对象，posts等于空的
在这里插入图片描述
这里是大括号返回，那边就解析成一个对象

在这里插入图片描述
这边成功，就会把两个东西提取出来，posts= 【】,pagination，要是这么写，上面的缺省值其实可以不用了
在这里插入图片描述
这是一个对象就用这种方式来提取
在这里插入图片描述
也要写下被观察对象，page至少1页，size默认值20，pages=1页，count=0有多少条记录，缺省值甚至可以作为缺省值
在这里插入图片描述
把缺省值塞到下面，posts没有就是空
在这里插入图片描述
这个返回就是这个两项，把这两项解出来，解出来会有缺省值
在这里插入图片描述
用缺省值来解决问题，如果里面有对象就不用缺省值了

在这里插入图片描述
这里不写，在前面补也可以，没有拿到信息就是空对象，空格数组，这两个东西一经修改，谁观察谁来触发
在这里插入图片描述
这就拿回来了
在这里插入图片描述
不能写 if data，因为空的也 算真
在这里插入图片描述

先测试一下
在这里插入图片描述
post.js；里衣服啊错误

在这里插入图片描述
在这里插入图片描述
现在就是无数据

在这里插入图片描述
list里的数据现在改成刚才用的
在这里插入图片描述
现在直接拿这个数据还是无数据

在这里插入图片描述
因为现在设置的缺省值确实是空
在这里插入图片描述
这里list方法一调用就往后台发送请求
在这里插入图片描述
点击文章列表
在这里插入图片描述
这里就收到请求了
在这里插入图片描述
两个数据拿到了，但是有一些问题，di62行

在这里插入图片描述
这几个数据都在了

在这里插入图片描述
把缺省值去掉看看
在这里插入图片描述
还是有问题

在这里插入图片描述
用这样的方式测试一下
在这里插入图片描述
56行还有问题
在这里插入图片描述
先不用item，随便写一个数据

在这里插入图片描述
这样就可以了在这里插入图片描述
我们返回的数据是这两个东西

在这里插入图片描述
直接到里面拿item的title
在这里插入图片描述
这样就都拿到了

在这里插入图片描述
原来的捕获到异常到这里来了

在这里插入图片描述
这样就已经拿到这些数据了

在这里插入图片描述
我需要显示的数据就应该抽象，比render还要早的，只能是constructor
在这里插入图片描述
当这个实例构造的时候，就去调用一次service里的list函数，这个list函数就可以去把数据从数据库查回来
在这里插入图片描述
就算你已经render过一次了，没关系，这里异步查询完后，还会去修改这个数据
在这里插入图片描述
修改这个数据，前面observer就是管这个的，而且也用这个数据，就通知render重画一遍在这里插入图片描述
这个render近年来重画就读取了当前数据，如果当前数据长度超过了长度，就开始遍历一行行显示出来
在这里插入图片描述
刚才发起的请求，到后台其实是select * from这张表，没有加任何条件
在这里插入图片描述但是我们在后端写了limit了
在这里插入图片描述
这里是用get方法传过来，根本不管post

在这里插入图片描述
get方法是这么传过来的
在这里插入图片描述
但是这个东西没法走，还是把20行以内的数据发过来了，这个url上的 数据没有往后传

在这里插入图片描述
有几种办法，解析这个参数，地址栏也称为location
在这里插入图片描述
这个应该跟视图层相关，现在是需要看看list
在这里插入图片描述
前端路由肯定有对当前url的处理
在这里插入图片描述
在这里插入图片描述
之所以能路由，说明匹配到路径了
在这里插入图片描述
在router里定义了route规则匹配上了，这里还有匹配到没匹配到
在这里插入图片描述
如果被route规则管，一旦匹配调用了你这个可视化组件，就给你props里塞入match
在这里插入图片描述
能调用list说明match上了，match上了组件就要注入一个match

打印一下props，看看能解决什么问题

在这里插入图片描述
history，location，match都解决了

在这里插入图片描述
location就是当前这个

在这里插入图片描述
match里告诉我们里面匹配了什么样的东西，url，path
在这里插入图片描述
在url后面加一些东西
在这里插入图片描述
看下location和match，在原生浏览器对象里，地址栏就叫location，301，302返回location，就是告诉你url该跳哪里，url这个就归location管了，pathname就是url路径匹配上了
在这里插入图片描述
后面就是查询字符串
在这里插入图片描述
search对应后面问号?后面的东西
在这里插入图片描述
这里塞入search，下面就需要进行修改

在这里插入图片描述
list用get方法，如何去请求，首先在这里做的事情是，在网站上通过list映射到页面里去，页面里的constructor里面用到了service里面的list方法，这个路径是这么写的
在这里插入图片描述
这个search就带到后面去了

在这里插入图片描述
传过来之后，主要是下面的路径怎么弄，这就是变化过程
在这里插入图片描述
这里django是这么访问的，给这个东西后面加问号？参数

在这里插入图片描述
然后把这部分替换掉

在这里插入图片描述
剩下的替换掉了发过去

在这里插入图片描述
直接这么写就行
在这里插入图片描述

还有一个问题，如果对方不按照你的要求来，不写size，直接给你写id=2，可以理解为不管扔多少数据，都到后面去了。
我们django写的时候就判断，首先你是否合法，合法的话就从里面提取page，size，size没有就没有，当20处理，page=1合理就用1。
所以这里可以不使用url处理的方式
在这里插入图片描述
url处理有函数
在这里插入图片描述
对url所有处理都是塞到里面去了，这里面是props塞进去的，从里面有提取出来match，location，这两样东西都可以提取出来

在这里插入图片描述
把这两个东西提取出来你要什么就需要考虑了，把search里面的查询字符串拿到，解析它，得到一个params数据结构。这个数据结构就是kv对，谁等于谁，从里面拿到值向后面发，这是前端解析的方式。
但是这个是实验性的，官方不推荐使用
在这里插入图片描述
search直接扔进去相当于拼接在这个后面

在这里插入图片描述
拼在后面正好是我们想要的东西

在这里插入图片描述
改回来

在这里插入图片描述
现在就可以了

在这里插入图片描述
改成第一页

在这里插入图片描述
显示三行，所以以为不解析也没问题

在这里插入图片描述
现在就是如何把这个地方的数值拿到，其实都给我们了，都注入到props了

在这里插入图片描述
拿到这些数据就可以呈现出来
在这里插入图片描述
还有一些没做，比如链接的问题，详情页
在这里插入图片描述

48N6E
关注
专栏目录
FPGA实现Aurora 8B/10B接口（2）--数据接口
孤独的单刀
01-11 1万+
通过本文您会学到：1、了解Xilinx Aurora 8B/10B IP核的框架；2、熟悉Aurora 8B/10B IP核的内部结构（数据接口）。
C/C++学习路线总结与分享
dvlinker的技术专栏
10-07 9万+
C/C++学习路线总结与分享
博客项目——用户文章列表展示
it___is_的博客
03-16 401
服务器端添加路由 home路由文件（home.js） 这里home是一级路由，index.js（用户文章界面展示），article.js（文章详情）是二级路由 //引入express服务器 const express = require('express'); //创建路由对象 const home = express.Router(); //文章列表封面 home.get('/', require('./home/index')); //文章详情封面 home.get('/article', requir
列表实现例子
weixin_34081595的博客
10-11 89
1 #ifndef LIST_H_ 2 #define LIST_H_ 3 4 #include <stdbool.h> 5 #define TSIZE 45 6 7 typedef struct film 8 { 9 char title[TSIZE]; 10 int rating; 11 } Item; 12 13...
Vue 02 博客列表显示
xl十一的博客
11-27 389
02 博客列表显示 效果图 1. 依赖 vue vue-router element-ui less less-loader npm install vue-router npm install less less-loader npm install --save element-ui 2. Vue.use(element) // 添加element-ui import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/in
列表的实现
一介码夫
10-13 591
#include #include #define MAX_SIZE 10 // 当前最大的容量 #define INCREASE_SIZE 2 // 每次增大的容量 typedef struct List { int * data; int size; int current_size; }List; /*列表初始*/ void initial(List * list) {
列表展示
满分博的博客
07-29 318
public class tab1 extends Fragment{ private ViewPager vp1; private ArrayList&lt;ImageView&gt; list=new ArrayList&lt;&gt;(); private String path="http://www.xieast.com/api/news/news.php?pa...
MySQL编译安装的CMake Error The source directory /root/mysql-5 6
hfdchhu的博客
11-13 2786
MySQL编译安装的CMake Error The source directory /root/mysql-5 6
商城-文档
weixin_46925850的博客
07-28 7978
谷粒商城学习笔记
Django(二)精美博客搭建(1)实现登录/注册功能
Mikasa的博客
06-04 4560
前言 之前我们做了一个很简单的个人博客搭建，不论是页面还是功能都很粗糙 所以从这篇开始我打算做一个比较完整的【个人博客网站】，可能会分好几篇博客来讲述 其中设计到的一些知识点也会和大家详细说下 简易版blog搭建：https://blog.csdn.net/Makasa/article/details/124982130?spm=1001.2014.3001.5502 环境： Pycharm python3.6 一、Django框架介绍 1、创建Django项目 直接在pycharm里新建一
列表显示
歌儿的专栏
04-03 414
activity-main布局：   <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:
Laravel学习笔记（17）Blog列表功能
qj4865的博客
02-10 151
视图 {{--博客列表--}} <div class="card"> <div class="card-header"> 博客列表 </div> <div class="card-body"> <table class="...
功能清单
iteye_14846的博客
10-07 242
1.seekbar更改样式——MyStyleSeekbar
Spring boot开源项目之个人博客（14）—博客列表展示
qq369392973的博客
08-28 338
Spring boot开源项目之个人博客（14）—博客列表展示 这是一个前端的展示页面，整体流程就是在dao、service层定义拿到的需要的数据的方法，在controller层把数据传给前端，前端使用theamleaf渲染，将数据展示在模板上。 1. 后台从数据库拿数据 博客列表的展示一共需要4类数据：带分页的博客列表、6个以所含博客数量由大到小的排序的分类、10个以所含博客数量由大到小的排序的标签、按更新时间排序的博客列表。 带分页的博客列表是很好处理的，之前定义过带搜索条件的博客分页列表方法，现在把搜
【组件】动态列表展示
多喝i热水的博客
12-23 239
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <!-- 1.显示所有todo列表 2.输入文本，点击按钮显示到列表首位，并清除输入文本 --> <div id="example1"></div> &...
#4 展示列表
香格里拉烤鸡腿的博客
06-27 178
英文原版：https://guides.emberjs.com/v2.13.0/templates/displaying-a-list-of-items/
"玩转“列表展示
qq_35807697的博客
08-07 288
1.需求分析 先看看需求给功能做的列表展示页 看到这个就知道是要做一个列表展示的集合，里面包含各个环节的附件跟公文（有的还是单个的）。看到这个需求有点懵逼啊，对本身公司的项目环境不是很熟悉。然而这里的统计却是整个项目里面的流程都包括进来了，最重要的一点是：每个人做的功能有差异，附件ID的值并不是固定的。这里设计了一张表就是为了把所以环节跟各个阶段的东西串联起来。但是在
课程分类列表后端实现
实践求真知
12-03 354
一 API import request from '@/utils/request' export default { /* 展示树形列表 */ getNestedTreeList() { return request({ url: '/admin/edu/subject/nested-list', method: 'get' }) } } 二 list.vue <template> <div class="app-co
列表组件化
wingxabc的博客
11-19 171
在项目有开发中，经常会遇到很多的列表，重复的分页、列表数据以及请求参数都是一样的，那么如何组件化呢？ 这是我之前在项目中一种解决方案，分享出来大家探讨探讨。 我在项目中使用的vue提供的mixins 1.将请求、分页操作等操作封装到一个mixinPage.js文件中，该中操作方法和数据的方式和组件里时一模一样的（相当于创建一个不要template模板的组件） 请求列表的api也封装到该文件的methods中，可通过this.(api).调用 2.在列表页面引入mixinPage.js文件，使用
ASP技术实现Z-blog博客Ajax投票功能插件v1.0
Z-blog是一个用ASP语言编写的免费博客程序，它具备强大的后台管理功能和丰富的模板资源，支持多种数据库系统，如Access和SQL Server。Z-blog以其轻量级和灵活性广受用户欢迎，它允许用户快速搭建个人或企业的博客...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值