您的位置: 首页  >  文章  >  2020/03/22 03-博文发布功能实现

2020/03/22 03-博文发布功能实现

分类: 文章 • 2024-01-31 07:52:22

博客要完成的相关的功能：
发布页，采用post方法提交到后台，应该用/post/pub，只不过我们做api代理转发，要提交title,content，返回json，json里返回postid。
下面是/post/id，get方法，返回对应id的文章，有就返回，没有就想办法判断，处理404。
如果直接对/post/发送请求，相当于getall
2020/03/22 03-博文发布功能实现
第一个写pub这块

2020/03/22 03-博文发布功能实现pub主要是提交，返回成功了还是失败2020/03/22 03-博文发布功能实现
发布组件采用form表单组件，antd提供了很好的组件
2020/03/22 03-博文发布功能实现用多少组件就放多少style
2020/03/22 03-博文发布功能实现
现在是这样
2020/03/22 03-博文发布功能实现
现在想要把标题挪到前面去

2020/03/22 03-博文发布功能实现
动态校验规则这里有个例子，这是一个对象，对象里有两个东西，一结构就是我们想要的

2020/03/22 03-博文发布功能实现
拷贝过来，下面开始解构，解开就是谁等于谁
2020/03/22 03-博文发布功能实现
启动下服务
2020/03/22 03-博文发布功能实现
这样就可以了
2020/03/22 03-博文发布功能实现
看一下这里到底什么意思

2020/03/22 03-博文发布功能实现
一样的效果，所以这就是解构的意思
2020/03/22 03-博文发布功能实现
解构就是解成kv，value是个对象
2020/03/22 03-博文发布功能实现
改成14

2020/03/22 03-博文发布功能实现
宽了一些

2020/03/22 03-博文发布功能实现
2020/03/22 03-博文发布功能实现
其实就是14列的意思
2020/03/22 03-博文发布功能实现
分为label部分和wrapper部分，各控制各的
2020/03/22 03-博文发布功能实现
这一块跟bootstrap差不多，为布局定义了一套东西

2020/03/22 03-博文发布功能实现
这就是栅格

2020/03/22 03-博文发布功能实现
是基于24栅格的一套系统，可以想象成在竖向切割成24个单位

2020/03/22 03-博文发布功能实现
分成24个格子

2020/03/22 03-博文发布功能实现
如果你的区域就这么，是指把这里分24个格子
2020/03/22 03-博文发布功能实现
boostrap也是这么用的，栅格系统，在占的宽度的时候，就可以直接指定占几个单位，这个单位实际上就是整个宽度来说的

这是form的大小
2020/03/22 03-博文发布功能实现
这里指定占的宽度是百分之80

2020/03/22 03-博文发布功能实现
也就是在这80%宽度里，再分24个，4个占多少，刚才是4个+14个=18个，还剩6个栅格
2020/03/22 03-博文发布功能实现
加在一起24个正好，现在是都用栅格系统来进行布局
2020/03/22 03-博文发布功能实现
两个写法都行

2020/03/22 03-博文发布功能实现
这样直接写，好处就是下面解构就可以了2020/03/22 03-博文发布功能实现
还少一个check

2020/03/22 03-博文发布功能实现
这个是想要的

2020/03/22 03-博文发布功能实现
网页里真正写的是input，type=submit vlaue就是按钮显示什么字

2020/03/22 03-博文发布功能实现
点击会触发表单的事件，onsubmit，就会将表单内有name的控件组织成kv对的形式，中间用&符号链接，如果使用post方法，放在请求的body内送到服务端
2020/03/22 03-博文发布功能实现
要把默认提交的行为阻止，然后我们用ajax的方式，拿到数据与后端进行通信，然后再通过回调的方式来显示数据

2020/03/22 03-博文发布功能实现
写成这样
2020/03/22 03-博文发布功能实现
提示0是没有定义的
2020/03/22 03-博文发布功能实现
先把target打印出来到底是什么
2020/03/22 03-博文发布功能实现

2020/03/22 03-博文发布功能实现
我们前面是target.form，这里直接target

2020/03/22 03-博文发布功能实现
产生事件的对象是完全不一样，以前是点击按钮的onclick，现在是表单自己的submit，这里实际是form提交，因为你的事件是在form上的，target本身不是按钮了，而是form本身了
2020/03/22 03-博文发布功能实现
直接数据解构得到两个东西
2020/03/22 03-博文发布功能实现
拿到两个控件
2020/03/22 03-博文发布功能实现
拿到这两个值取出来往后传即可
2020/03/22 03-博文发布功能实现
2020/03/22 03-博文发布功能实现
到service里的post，拿到title，content，然后成功不成功
2020/03/22 03-博文发布功能实现
2020/03/22 03-博文发布功能实现
没绑定，this的问题
2020/03/22 03-博文发布功能实现
所以有时候抄过来还不行，还需要改动下

2020/03/22 03-博文发布功能实现

2020/03/22 03-博文发布功能实现
8000端口没开

2020/03/22 03-博文发布功能实现
504和502都是上游服务器的问题
2020/03/22 03-博文发布功能实现
offset写个6看看
2020/03/22 03-博文发布功能实现
左边是偏移几个单位，后面是占多少个单位，分两部分，各自调整宽度来做控件的定位
2020/03/22 03-博文发布功能实现
buttom蓝颜色就是primary2020/03/22 03-博文发布功能实现
可以改成虚线的，danger危险的
2020/03/22 03-博文发布功能实现
type=什么你写就可以了2020/03/22 03-博文发布功能实现
绑定this，就可以发送数据了
2020/03/22 03-博文发布功能实现
400就对了
2020/03/22 03-博文发布功能实现

2020/03/22 03-博文发布功能实现
认证的时候，失败也会产生一些问题
2020/03/22 03-博文发布功能实现
没有token这就直接出现问题了
2020/03/22 03-博文发布功能实现
看看调用哪里去了
2020/03/22 03-博文发布功能实现
有个中间件

2020/03/22 03-博文发布功能实现
在user/views下，这边有加号

2020/03/22 03-博文发布功能实现
把settings把里面去掉，因为这个中间件替我们拦住了
2020/03/22 03-博文发布功能实现
重启一下服务

2020/03/22 03-博文发布功能实现
还是400

2020/03/22 03-博文发布功能实现
看看打印什么
2020/03/22 03-博文发布功能实现
这次看看是否是打印这块

2020/03/22 03-博文发布功能实现
no token就回来了
2020/03/22 03-博文发布功能实现
message回来了，但是pub里没有引用

2020/03/22 03-博文发布功能实现
return里处理一下
2020/03/22 03-博文发布功能实现
有错误就这么走

2020/03/22 03-博文发布功能实现
提交失败就对了
2020/03/22 03-博文发布功能实现
在response里有返回，是放在body里去的
2020/03/22 03-博文发布功能实现
现在提交过去了，但是没有任何成功的迹象，原因是你提交了一篇文章，但是作者不知道，这个信息是在jwt里的，把这些信息删掉，一个不留
2020/03/22 03-博文发布功能实现
2020/03/22 03-博文发布功能实现
再次打开，token什么都不在

2020/03/22 03-博文发布功能实现
登录成功后会发一个带过期时间的token，而这个token是在登录成功后塞入到local storage里了，现在localstorage里是没有
2020/03/22 03-博文发布功能实现
需要登录一次

2020/03/22 03-博文发布功能实现
token就有了

2020/03/22 03-博文发布功能实现
认证里要从meta去它
2020/03/22 03-博文发布功能实现
这里会封装成http_jwt，发的时候还是按照jwt发，在request的header部分，要在header部分发jwt才可以，之前是借助postman2020/03/22 03-博文发布功能实现
到官网看一下
2020/03/22 03-博文发布功能实现
2020/03/22 03-博文发布功能实现
config也许用得上

2020/03/22 03-博文发布功能实现
查看快捷方法，可能有一些自定义头
2020/03/22 03-博文发布功能实现
要写第二个必须 第三个
2020/03/22 03-博文发布功能实现
可以创建一个实例，定义baseurl，url基础版

2020/03/22 03-博文发布功能实现
还可以自定义头
2020/03/22 03-博文发布功能实现
也就是可以把自定义好的东西作为一个实例

2020/03/22 03-博文发布功能实现
然后这个实例可以继续调用get，相当于预设了一些参数，得到了一个自定义的实例，这个实例再去调用get这些方法
2020/03/22 03-博文发布功能实现
config就是请求配置

2020/03/22 03-博文发布功能实现
请求配置里能写url，还可以写请求的方法，还可以再写baseurl
2020/03/22 03-博文发布功能实现
可以再写header
2020/03/22 03-博文发布功能实现
还可以写一些认证的

2020/03/22 03-博文发布功能实现
先试试这个能不能用

2020/03/22 03-博文发布功能实现
创建一个实例，单独重写一个，header可以写在这里也可以不写在这里
2020/03/22 03-博文发布功能实现
这次不写在这里

2020/03/22 03-博文发布功能实现
在传输数据的时候有三部分，第一部分就是url，现在的url是前面的基础部分可以不写了
2020/03/22 03-博文发布功能实现

2020/03/22 03-博文发布功能实现
第一步写url，第一部分data，第三部分config配置是一个对象，在这个对象中可以写很多kv对，我们要写jwt，身份验证的时候才提交这个，不做身份验证的时候就没必要提交，在post时候就要告诉jwt是谁
2020/03/22 03-博文发布功能实现
针对某些方法里才需要加一个头，get方法就不需要写
2020/03/22 03-博文发布功能实现
所以这里就把baseurl写在这里了
2020/03/22 03-博文发布功能实现
jwt写好了，下面可以写方法，这就是怎么去拿token值

2020/03/22 03-博文发布功能实现
拿到这个token值就可以把这个token值带到post的header部分传过去，对方就可以拿到这个值了
2020/03/22 03-博文发布功能实现
刚才已经登录过一次了，现在有语法错误
2020/03/22 03-博文发布功能实现
加一个this

2020/03/22 03-博文发布功能实现
把super去掉，这里没有继承

2020/03/22 03-博文发布功能实现
现在application是有值的

2020/03/22 03-博文发布功能实现
这个值，现在就准备取出来，拿到之后，通过header，传到后面去

2020/03/22 03-博文发布功能实现
这是给post传了三个参数，第一个参数是url，这个是相对的，要基于baseurl，第二个是提交的数据，第三个是config，定义了一个header，jwt，这个jwt会被wsgiserver拿到，包装后再被request封装，会在jwt里加一个前缀，HTTP_JWT,这样就可以拿到了

2020/03/22 03-博文发布功能实现
拿到后就可以打印一下

2020/03/22 03-博文发布功能实现
看看最后能否打印想要的东西
2020/03/22 03-博文发布功能实现
2020/03/22 03-博文发布功能实现
2020/03/22 03-博文发布功能实现
我们把字符串拿到了，拿到值了但是解不开
2020/03/22 03-博文发布功能实现
现在把值还原出来，现在准备把这个值发送到服务端去
2020/03/22 03-博文发布功能实现
2020/03/22 03-博文发布功能实现
现在就成功了

2020/03/22 03-博文发布功能实现
第5条就出来了

2020/03/22 03-博文发布功能实现
头有两种方式，一种是把头塞到这地方来写，也就是所有人都用这个头，get的时候也有这个头，但是实际上get的时候不需要

2020/03/22 03-博文发布功能实现
所以在post的时候才把头提交上去
2020/03/22 03-博文发布功能实现
这时候就提交成功了，只要加身份验证即可

2020/03/22 03-博文发布功能实现
2020/03/22 03-博文发布功能实现
这里是怎么写组件，还有消息是怎么展示的

2020/03/22 03-博文发布功能实现
稍微修改下
2020/03/22 03-博文发布功能实现
这里需要一个jwt，jwt传的时候要在header当中

2020/03/22 03-博文发布功能实现
2020/03/22 03-博文发布功能实现
2020/03/22 03-博文发布功能实现
axios的特殊写法，baseurl说明是拼接的，这实际上就是字符串拼接方式
2020/03/22 03-博文发布功能实现
注意，如果这里是以跟开头的，如果是axios就跟它没关系了
2020/03/22 03-博文发布功能实现
这里就利用它了
2020/03/22 03-博文发布功能实现
这样是两个全新的，跟上面的两个无关
2020/03/22 03-博文发布功能实现
这个post直接写pub就不行
2020/03/22 03-博文发布功能实现
写了this，就可以基于baseurl
2020/03/22 03-博文发布功能实现
这里没改还是用原来的东西

2020/03/22 03-博文发布功能实现
用的是它的路径加上header，用getjwt拿到jwt
2020/03/22 03-博文发布功能实现
通过这个方式就可以把pub拿到了

2020/03/22 03-博文发布功能实现
在前端用token的时候一定要验证是否过期，看看token在store中是否拿回来过期了，如果过期就清除掉
2020/03/22 03-博文发布功能实现
加上过期验证，然后加上所谓的清理，也就是remove，token.remove，把key给它就行了，就可以清除掉了，先做一次验证然后再remove就可以了
2020/03/22 03-博文发布功能实现
如果发现过期了，清除了，可以return空的，下面jwt一发就出错了

2020/03/22 03-博文发布功能实现

相关推荐