最基础的Vue 请求渲染数据,包括下拉加载更多,换分类。首先声明一点我写这个只是个人业余写的只为自己练习技术,页面是抓的二十次幂这个站点 https://www.ershicimi.com/
- 首先我之前没有学过Vue 只是了解一些html和js的知识,然后自己写了一些接口,想学一下啊用Vue实现下请求渲染数据.
- 我只用了两天时间实现的以下效果,感觉还行,我都是按照自己想法写的,可能不正规。
- 说一下我实现了那些功能:axios实现请求API接口,渲染数据,点击不同分类请求不同的API,向下滑动加载更多。
我的Vue体验方法
一 官方文档
- 我照着官方文档的快速开始教程 走了一遍,把vue的语法渲染语法走了一遍(绑定对象的时候我理解错了,踩了些坑)。
- 然后又搜了一下Vue推荐用 axios 模块发送http请求(本来我准备用jQ ajax写的),自己尝试写了下demo。
二 目录结构以及运行方式
article/
static/
css/
img/
js/
main.js <!-- 存放一些公共变量 至少我是这样做的 -->
index.html <!-- 入口首页文件 -->
author.html <!-- 作者详细页文件 -->
news.html <!-- 详细页文件 -->
运行方式
:可以在本地搭建apache服务器或者其他http服务器就行,把html文件都一起丢到根目录。 (ps:如果用vue-cli的方式,就自带Node.js的http服务器)
我的做法
: 我是用的xampp 这个集成环境 中的apache来搭建的,具体步骤自己搜索,很简单的,安装一般都会报一个端口 被占用的错误,导致不能启动。
三 动手写代码
- 写代码之前 vue的基础知识必须得知道
- v-for :href :src 等等
- 然后就是 vue的绑定 还有函数的写法,然后就是mounted 挂载
new Vue(
{
el: "#wrapper", // 这是要绑定的id 可以绑定最外层的div的id
data: {
infos: [], // 主要列表信息
},
methods:{
// 主要函数方法
},
mounted(){
// 挂载 就是一打开这个页面就执行这里面的函数, 有点像构造方法的意思 __init__
// 注意要用this 这个关键字调用
},
},
);
index.html // 入口文件
// 首先引入 我刚开始体验vue 不会vue-cli的方式使用,但是最终一般都用vue-cli
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
// 感觉代码有点多 后面补充完整 代码也会贴出来
<body>
..
<div id="wrapper""> //其实可以绑定在body里面 走一下vue教程就知道
<ul class="news-list">
<li v-for="(info,index) in infos" :key="index">
<div class="img-box">
<a :href='"./news.html?uuid=" + info.md5_url' target="_blank"> // 注意这里的info.md5_url 用{{ }} 这种方式会报错,可能是"的原因, 所以我用了这种字符串拼接的方式
<img :src="info.cover"></a>
</div>
<div class="txt-box">
<h3>
<a :href='"./news.html?uuid=" + info.md5_url'>{{ info.title }</a>
</h3>
<p class="txt-info" target="_blank">{{ info.digest }}</p>
<div class="s-p">
<a :href='"./author.html?author_id=" + info.author_id' class="account">{{ info.author }}</a>
<span class="s2">{{ info.published_at }}</span>
</div>
</div>
</li> `
</ul>
</div>
...
</body>
<script>
// var host_name = "http://127.0.0.1"; //后面我是把这个变量 放到了main.js 每个文件都需要用
var current_cate = "0"; // 当前默认分类
var current_page = 1; // 当前默认页
new Vue(
{
el: "#wrapper",
data: {
current: 0, // 当前页码
infos: [], // 主要列表信息
},
methods: {
loadInfoList: function (page, cate) {
var _this = this; // 这里我有个疑惑, 我感觉每个函数里面都得有一个这样的变量才行 不能都直接用this
// 20119/03 我看到阮一峰 关于闭包的解释 http://www.ruanyifeng.com/blog/2009/08/learning_javascript_closures.html
axios.get(hots_name + "/api/v1/article/get/list", {
params: {
page: page,
size: 10,
cate: cate,
}
})
.then(function (response) {
if(page>1){
// 如果不是首页 数据 依次添加在后面
for (var i = 0; i < response.data.data.length; i++) {
var info = response.data.data[i];
_this.infos.push(info)
}
}else {
// 是首页数据 就直接渲染
_this.infos = response.data.data;
}
})
.catch(function (error) {
// 请求发送失败
console.log(error);
});
},
addClass: function (index) { // 点击分类操作
this.current = index; // 点击添加 active
current_cate = index; // 当前是那个分类
current_page = 1; // 每次点击分类 初始化当前页
// 点击加载新分类
this.loadInfoList(current_page, index)
},
loadMore: function () {
var _this = this;
// 监听鼠标事件加载更多 这一步是我当时 搜出来的
window.addEventListener('scroll', function () {
//变量scrollTop是滚动条滚动时,距离顶部的距离
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
//变量windowHeight是可视区的高度
var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
//变量scrollHeight是滚动条的总高度
var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
//滚动条到底部的条件 +1 的原因是因为我看过触发这个条件 有时候差1,反正总感觉我这个不完善。
if (scrollTop + windowHeight + 1 >= scrollHeight) {
// console.log("到底了")
current_page += 1;
_this.loadInfoList(current_page, current_cate)
}
})
},
},
mounted() {
// 初始化方法 加载首页数据 分类 和列表
this.loadMore(); // 监听加载更多
this.loadInfoList(current_page, current_cate);
}
},
);
</script>