首先
首先要感谢兴强学长这么长时间的指导。从一开始的学习日报打卡到后来做项目时的指导，让我保持学习知识的劲头。
关于项目
初识Vue
这次的微博项目我学习了Vue的一些基础的知识，见识到了组件化与数据驱动的魅力，但是刚开始学的时候总是想操作Dom元素，后来慢慢理解了数据驱动，也开始自己封装组件。简单列一下我封装的一些组件：
- 表单输入框组件
- 头部导航栏组件
- 左侧导航栏组件
- 评论组件
- 主布局组件
在封装组件的过程中，需要数据的传输，然后就看了不少关于父子组件传输的知识，这个只能父传子，子不能传父一开始真的很头疼，因为自己当时对数据传输还不是很了解，于是踩了不少的坑。后来慢慢接触到了$refs和vuex，简化了我对数据的处理。
新的知识
图片上传
在做到动态块图片上传时，学习了input：file上传图片以及使用fileReader读取文件。通过获取base64的图片地址，回显到客户端。但是当与后端交接时才知道，传给后端的一般是file类型的二进制文件，于是又学习了FormData来实现图片的获取。发送请求时，头部要携带着段代码，用于分割图片文件。
let config = {
headers: { "Content-Type": "multipart/form-data" },
};
客户端信息储存
在学习完vuex相关方面的知识后，开始着手处理用户的信息。但是在用户卸载页面时，组件会销毁，然后state状态中的数据也跟着重置，就导致了数据的丢失。查询了相关知识后，决定使用sessionStorage来储存数据。它在浏览器窗口打开期间储存数据，并且就算tab栏的地址一样但储存的信息也是不同的。通过beforeunload事件在页面卸载前，将当前state中的数据通过setItem储存在sessionStorage，然后在组件的created生命周期函数中从新获取数据。
if (sessionStorage.getItem("store")) {
console.log("从缓存中取数据");
this.$store.replaceState(
Object.assign(
{},
this.$store.state,
JSON.parse(sessionStorage.getItem("store"))
)
);
}
window.addEventListener("beforeunload", () => {
sessionStorage.setItem("store", JSON.stringify(this.$store.state));
});
props路由传递参数
跳转路由传递参数我了解一下通过querry和params来传递参数，两种方法比较明显的区别在于：
- 通过querry传递的参数会显示在路径后面，而params则不会，params属于路由的一部分，如/root/：path，则path则会显示在地址中但是path具体的值不会。
- 在使用params进行传参数时必须使用name来进行传递，并且在路由的对应组件中要加上props：true。
终极Bug 路由跳转
我封装了一个Top导航栏，内提供五个自定义插槽。我一开始没有好好了解路由层级的关系，写了五个主页面来分别展示其子组件，但是到后来开发到个人信息页展示的时候，就被劝退了。按照当时的写法，我需要在五个路由下分别添加一个字路由。查阅之后才知道，一级路由出口用于放二级页面，以此类推。在查阅的过程中还了解了一下命名视图，但是命名视图只能用在顶层路由，最后也没有采用。路由跳转的最后方案，是在项目展示结束后写出来的。一个主view，左侧放导航栏，右侧放路由出口，点击头部导航栏来切换左侧导航栏的数据，点击左侧导航栏来切换页面。
一些遗憾
页面展示
评论区
热搜区
用户修改页
总结
感谢fwf的学长们以及和我一组的志颜和浩宇，让我有了这次宝贵的学习经验。很开心可以学到这么多新的知识。通过这次实习，我认识到了自己的渺小，这同时也激励着我像新的知识进发。
