SWAPI复制——菜鸟vue学习体会

项目需求

复制 https://swapi.co/ 网站
你需要想办法获取该网站所有资源与数据
你需要考虑部分资源的授权访问，以满足本作业的要求

---

前端需求

• 模仿swapi实现主页面、about页面、document页面布局
• 调用后端API
• 实现搜索等功能逻辑

---

VUE基础准备

由于这是我第一次接触vue，因此对vue的工作原理等方面都不太了解，一开始只知道它是一套用来写前端的框架。此处推荐官方文档，对新手学习vue非常友好。

---

开发环境

• VUE.js框架
• npm
• Chrome插件：Allow-Control-Allow-Origin

代码解析

Vue的关键思想在于使用小型、独立和可复用的组件来构建一棵大型的组件树，最后成为一个应用；其中每个vue文件都可用于生成对应的组件，每个组件都是可复用的vue实例。

【基础结构】

一个独立的vue文件对应一个组件，其由三部分组成：

• template，相当于html文件
• script，相当于js文件
• style，相当于css文件

vue文件中所有用到的变量都在data中声明

方法都在methods中声明

【具体实现】

template和style中主要写布局，如button，radio，div，p等页面元素，此处推荐一个高质量的UI组件库 iView。从这上面可以直接找到UI组件，而免除了重复造轮子的过程。

index页面中主要是用到的元素有radio，search input。其中radio通过组名和label之间的关系定位选中的关系，即组名bigKinds = 选中radio的label；input search 调用函数 handleSearch，处理输入信息并向后端发送请求。

handleSearch函数，通过判断用户选定的类型以及输入的id号，生成发送请求的字符串，通过http.js中定义的fetch函数发送到后端并获取返回值，通过json.stringify函数将对象转换成json格式并输出

http.js中定义了fetch函数和post函数，用于与后端交互

后端的URL

fetch函数

post函数

---

问题思考

一开始每一次npm run dev的时间都特别久，后来百度搜索有没有相关现象，发现有dalao定位到是run的时候检查npm版本时间过久，因此将/build/check-versions.js中的检查部分注释掉，run的速度会明显有提示。