这段时间主要把大概的开发流程了解完毕
修改了,并画了几个界面
一.界面
修改为
博客主页
个人中心
二.前后端分离开发
写前端时
就可以假设拿到这些数据了
const blogData2 = {blog:{id:1,title: "如何编程飞人",author_id: 1,content: "这是一篇关于如何成为编程飞人的文章。",publishTime: "2022-05-05 12:00:00",likeNum: 2,readNum: 101,commentNum: 10,collectionNum: 10},tags:[{id:1, name:"java"},{id:2, name:"python"},{id:3, name:"c++"}],isCollection: false,isLiked: false,isFollowed: false,comments: [{id:1, avatarUrl:"#", author: "Alice", content: "Great blog!", parentCommentId: -1, likeNum: 0 },{id:2, avatarUrl:"#", author: "Bob", content: "Very informative!", parentCommentId: 1, likeNum: 0}] };
然后后面就可以直接引用这个数据
得到数据的值
后端同样可以根据这个数据和请求,进行响应数据
,就可以进行分离操作
后端
可以返回一个前端操作数据对象(json格式)
这样可以直接取到返回数据的值。
三.开发中的坑
(设置双token检测)拦截器时:使用axios进行执行拦截器的收发请求,再HTML文件中需要导入axios包
如果导入axios包,进行定义拦截器(单独写一个js文件),那末从在html文件中利用这个时,就需要导入这个包,
<script src="./axios-0.18.0.js"></script><script src="./js/interceptorRR.js" type="module"></script>
如果不写这个type=’module‘就会出现这个错误
Cannot use import statement outside a module
这里就把这个拦截器导入进来了,如果你要是使用
需要在js代码块中引入这个
就会导致浏览器找不到这个资源
还有一个坑就是
当你的前端使用这样响应事件时,你的javaScript的type不能是module
不然就会找不到这个方法