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的速度会明显有提示。
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值