2020/03/24 05-分页和详情页实现

最新推荐文章于 2022-11-19 13:31:38 发布

48N6E

最新推荐文章于 2022-11-19 13:31:38 发布

阅读量595

点赞数

分类专栏： 61前后端分离博客项目(七)核心业务开发与项目部署

本文链接：https://blog.csdn.net/qq_42227818/article/details/105080626

版权

61前后端分离博客项目(七)核心业务开发与项目部署专栏收录该内容

6 篇文章 0 订阅

订阅专栏

在这里插入图片描述
分页功能如果到官网上看实在是很麻烦，看不到分页功能，只能看到一个pagination

pagination可以写一个布尔值，可以写一个对象，设置成false在表格中不显示了

position只是个定位的东西

在这里插入图片描述

也就是在这里选一个合理的

在这里插入图片描述
要在list里就不能这么写了

在组件list继续写，header，footer，borderd，datasource数据源，renderitem怎么去呈现，这些都是属性

在这些属性后继续写，pagination=变量，这个变量比较特殊是个对象，pagesize是我们需要的，把kv对转换成冒号的方式
.current指的是当前页，total总页数
在这里插入图片描述

onchange要写一个函数出来，一旦onchange就可以让它变化

没有这么多页，纯粹是写什么显示什么

没写完的进行补齐

现在就要解pagination了，写在return之前，解构，current给个默认值，pagesize默认值20，总页数没有就没有，这是一般pagination都需要的
在这里插入图片描述

还有点问题，没有用

在这里插入图片描述
官网里pagination属性里还有东西

pagesize是下拉框，每页多少个，可以让别人来修改选择

改造成对象，确实是可以用的

在这里插入图片描述

listitem.meta可以做一些这样的处理，比如头像

在这里插入图片描述

在这里要进行变动，每点击一下其实是会change的，关键是change以后怎么做 在这里插入图片描述

onchange到底是怎么样一个函数
在这里插入图片描述
onchange这个函数两个参数

绑定了onchange，一旦onchange属性发生变化，就会调用这个函数，就会传两个参数

在这里插入图片描述
点几下

在这里插入图片描述
改的时候还需要通过它

在这里插入图片描述
2在前3在后

page就是未来的当前页，直接用变量，插值字符串用反引号

一旦查到数据就会到posts和pagination里去

这两个被它观察

还把人都用了一把，render函数就要被触发，一旦触发就要开始渲染，新查出来的值已经改变了，就按照新的页面来渲染
在这里插入图片描述
footer好像用不上

上面没有同步变

在这里插入图片描述
现在提供一个查询字符串，如何去提取出来

直接给一个这个如何搞定

这边的a的正则表达式对象这么写

一上来肯定需要写一个函数，（然后对象，匹配正则表达式），里面return

查官方资料
在这里插入图片描述

凡是prototype的都是方法

在这里插入图片描述
tostring都有

在指南里有一个正则表达式

在这里插入图片描述
定义一个正则表达式对象，

在这里插入图片描述
这里就有exec，exec一调用完，就知道里面有什么了
如果不想自己写，可以用别人写好的懒方法，但是是实验性的，但是有bable在无所谓的

在这里插入图片描述
在js里，这样一写就变成正则表达式对象了

在这里插入图片描述
首先进来判断第一位是不是问号?,

看看substr是什么

一个substr指的是从哪开始取多长，一个是从哪开始，切片切到哪里为止

从开始位置，后面如果不写，就是取到最后一个字符为止

在这里插入图片描述
substr从哪开始取多长

在这里插入图片描述

这里就是例子

在这里插入图片描述
只要你是问号开头，只跳过问号取后面的，把头去掉了

在这里插入图片描述
下面得到一个集合就可以用split来切割，直接用&符号来切，python里返回一个列表，这里肯定返回一个数组，下面就是forEach

正则表达式有几个方法

在字符串，查找匹配，返回一个数组，没匹配到就是null
在这里插入图片描述
element，数组里每一个元素都是element，就是学的高阶函数，拿到这个东西以后可以得到一个match，看看match是什么

在这里插入图片描述
下面先调用一下,F8运行

排除等号，之前，中间加=号，第一个等号之后所有内容都比较宽容，也拿到了city=北京
这种乱七八糟就变成了none,none等价于false

在这里插入图片描述
就可以用if match判断

加个等号，第一个等号后面的就算值

加括号试试，好像多了一个，相当于key提取出来了

再加一个括号

0是整个match匹配上的东西，1开始就是分组号了，这里不会形成k:[v1,v2]的结构
在这里插入图片描述
变成数组，以后有对象加进去就push进去

js循环建议这么写，但是一般高级就要玩高阶函数，高阶对象

也可以把问号？排除

如果不把问号排除就会带上这个问号

现在就把问号剔除掉了
在这里插入图片描述
用正则表达式，这样也就达到要求了

这个函数就是需要使用的，工具js里，谁要用谁用就可以了

内容需要去链接，list这一行行需要去链接

每一页都要管理起来，不然没办法路由，比如/post/访问所有，/post/1访问id为1 的
在这里插入图片描述
这个1不在查询字符串当中，这个1在location里可以看到，这个点击以后还需要构建个页面出来，所以还需要个组件

写个详情页组件，详情页跟list一样，还要查post，该注入注入

在这里插入图片描述
detail的意思就是详情页

详情页看看用什么控件

可以显示作者，宽度可以定义，100%有百分号，必须要引号

现在没人理你，因为不知道路由，要在router里配置route规则

index里导入

这样通过路由就可以关联起来了

在这里插入图片描述
现在给文章这块加链接

返回两个值，一个是post_id，一个是title

在这里插入图片描述
没有用其他方式可以做前置匹配，先打印一下

在这里插入图片描述
只要受router控件管理里，这部分信息就可以注入进来，location和match

查看官方是如何处理的

在这里插入图片描述 跟route配置有关，最后是这么调用，match里面这些 现在match里没有参数

在这里插入图片描述
现在想提取这个东西

改成id

在这里插入图片描述
再看match就有东西了

在这里插入图片描述 这样就可以拿到了

访问就是去后台查询内容，props注入，service，选择方法getPost

在这里面取id，缺省值-1，就可以往后传

get方法用它更方便

在这里插入图片描述
改成getPost，就不用查询字符串了，要id

到后台去还要转换成后台

后台还是需要去访问post/2

现在是变成了detail=2.然后从constructor取出来

在这里插入图片描述
将这个2拼到这个后面

这里面其实有一个值的
改一改就可以用了

有这么个东西，它去把数据改变了，改变了，观察者需要用一下，观察者是detail，detail这个观察者需要用一下

还是需要去解构,这个post里有很多东西，没有默认值是undefined，作者id最好带上，以后要构建作者相关链接用的，用这种方式就可以去后台拿数据了
在这里插入图片描述
现在把这个送进去

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

有很多方法，找一个测试就好了

在这里插入图片描述
故意这么写，是因为title拿不到是undefined，就用undefined判断id对不对

写500就无内容

在这里插入图片描述
现在提示是英文的，需要改成中文

在这里插入图片描述
现在就需要国际化

最下面的比较详细

在这里插入图片描述

需要用这两样东西

在这里插入图片描述
把中文拿来

在这里插入图片描述
用之前直接这么写

在这里插入图片描述
把ROOT包起来就行了

这样就可以了

在这里插入图片描述

card布局也是比较多的，尤其是在页面内容比较多，要分块显示的时候可以用card布局

我们用post被观察对象

这个post对象被改变的是依然用可视组件，让它一起变化

从列表页也开始就是套路一样，也就是稍微麻烦点
在这里插入图片描述
列表里面带分页，写table也需要用jQuery的传统分页插件

直接给属性就可以解决问题了

在这里插入图片描述 、只要知道映射关系，链接随你自己定义

这些东西要还是不要也做了思考

在这里插入图片描述

分页是比较麻烦的，在返回列表页的时候，在服务器端就应该把数据准备好

这种是插值的语法，能用解构用解构，反引号做插值
作为react可视化组件有两个东西非常重要，玩的就是props和state，state被我们下掉了，我们用mobx解决问题，动state的原因就是让它强行调用一次render，现在用消息订阅方式，被观察对象发生改变，观察者就要响应改变，但是观察者需要用过这个东西，才render中用过才可以，写个变量也叫用。因为是虚拟DOM，没改变也不会重绘。
render一直线，component update这个生命周期函数一定会执行
在这里插入图片描述
现在前后端分离，所有功能都实现了，包括在django实现的接口都调用过了

在这里插入图片描述

这里还有个typescript，这是js的超级，写的js，ES，它都认，解释器无法运行，用bable搞定，antd还整合出了umi框架更麻烦

在这里插入图片描述

48N6E

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2020/03/24 05-分页和详情页实现

分页功能如果到官网上看实在是很麻烦，看不到分页功能，只能看到一个paginationpagination可以写一个布尔值，可以写一个对象，设置成false在表格中不显示了position只是个定位的东西也就是在这里选一个合理的要在list里就不能这么写了在组件list继续写，header，footer，borderd，datasource数据源，renderitem怎么去...
复制链接

扫一扫