vue-知乎日志

学了一段时间前端，今天终于做了个小玩意儿。

话不多说，直接入题。

1.项目地址

2.截图

3.功能

• 首页
• 轮播图
• 动态消息
• 下拉刷新
• 动态消息详情页
• 侧边栏
• 侧边栏主题页
• 主题列表详情
• + 一些小的交互效果

4.技术栈

5.总结

1）首先在制作的时候不要想着一开始就把某部分做的很完美，比如把什么标题栏做的非常好看了在继续做，因为谁也不能说一开始你想的就是多的，在后续制作过程中可能你就有了更好的灵感，最重要的是东西堆积的多了会给修改等方面带来问题，所以就和画画一样先找大的关系，大的框架，要做某一页，先把这一页划分块，然后在在那些块中去处理。

2）制作遇到的第一个问题是跨域问题，总结了几种解决的方案。详细请看axios跨域问题。

3）数据拉取了有个地方比较坑，就是图片显示不了，原因就是为了防盗。知乎API返回的数据中的图片都是存储在知乎服务器上的url地址，直接请求会返回403，所以需要进行一些处理，使用Images.weserv.nl进行缓存图片，并在需要使用图片url的地方进行相应的替换。

attachImageUrl: function (srcUrl) {   if (srcUrl !== undefined) {     return srcUrl.replace(/http\w{0,1}:\/\/p/g, 'https://images.weserv.nl/?url=p')   } },

attachBodyContent: function (body) {   if (body !== undefined) {     return body.replace(/src="http\w{0,1}:\/\//g, 'src="https://images.weserv.nl/?url=')   } },

有些数据是直接拉的body，第二个是替换body中的图片的url

4）还有一个就是有些页面拉取数据时候把css样式也拉取来，拉来之后在退出当前页面的时候要记得删除那个样式，不然等你去浏览其他页的时候会发现原来的结构变了，刷新一下又好了，那就是那个样式在作怪。

文章来源: vue-知乎日志