黑马程序员技术交流社区

标题: 【上海校区】SWAPI复制——菜鸟vue学习体会 [打印本页]

---

作者: 不二晨    时间: 2018-12-21 10:05
标题: 【上海校区】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的速度会明显有提示。

---------------------
【转载】仅作分享，侵删
作者：Yezo13
原文：https://blog.csdn.net/Yezo13/article/details/85011152

---

作者: 不二晨    时间: 2018-12-26 10:16

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2