企业营销型网站有哪些,如何开公司做网站,优斗网站建设,手机网站价格案例效果 点击“首页”和“我的”可以切换页面首页可以下拉刷新#xff0c;请求更多数据首页下滑可以加载更多
1.创建并梳理项目结构
创建项目#xff0c;记得要安装路由 和 eslint 梳理结构#xff0c;清空 views和components文件夹 2. 安装和配置Vant组件库
Vant#…案例效果 点击“首页”和“我的”可以切换页面首页可以下拉刷新请求更多数据首页下滑可以加载更多
1.创建并梳理项目结构
创建项目记得要安装路由 和 eslint 梳理结构清空 views和components文件夹 2. 安装和配置Vant组件库
Vant轻量、可靠的移动端组件库
Vant官网
1. 安装
# Vue2 项目安装 Vant 2
npm i vant -S2. 导入组件
Vant 支持一次性导入所有组件引入所有组件会增加代码包体积因此不推荐这种做法。 但是在开发阶段我们不用考虑体积的问题怎么快怎么来。在发布的时候可以对项目体积进行优化可以直接把vant从项目中抽出去。 举例如下
输入网址http://toutiao.liulongbin.top/report.html 可以看到黑马头条项目该项目已经发布打包之后生成的结果如下
由上图可以看到没有把vant打包进来
在main.js中配置vant组件库
import Vue from vue;
import Vant from vant;
import vant/lib/index.css; Vue.use(Vant); // use函数是来安装插件的之后参考官方文档根据需求进行使用看到页面效果出现就成功了。
3. 使用 Tabbar 组件并开启路由模式
templatediv!-- 路由占位符 --router-view/router-view!-- Tabbar 区域 --van-tabbar routevan-tabbar-item iconhome-o to/home首页/van-tabbar-itemvan-tabbar-item iconuser-o to/user我的/van-tabbar-item/van-tabbar/div
/template4. 通过路由展示对应的 Tabbar 页面
在router/index.js 中配置路由规则 5. 初始化 - 使用Navbar组件以及覆盖默认样式
templatediv classhome-container!-- 头部区域 --van-nav-bar title黑马头条 fixed //div
/template
script
export default {name: Home
}
/script
style langless scoped.home-container {padding-top:46px;padding-bottom: 50px;.van-nav-bar {background-color: #007bff;}/deep/.van-nav-bar__title {color:#fff;}}
/style至此接下来就是完善主页的文章列表
6. 了解获取列表数据的API接口
请求方式
GET
请求根路径
https://www.escook.cn
请求URL 地址
/articles
查询参数–通过进行拼接
参数名数据类型说明_pageNumber页码值。从 1 开始_limitNumber每页展示的数据条数。
响应的数据结构
[{art_id: 8163,title: iOS原生混合RN开发最佳实践,aut_id: 1111,comm_count: 254,pubdate: 2019-03-11 09:00:00,aut_name: 黑马先锋,is_top: 0,cover: {type: 3,images: [http://www.liulongbin.top:8000/resources/images/32.jpg,http://www.liulongbin.top:8000/resources/images/80.jpg,http://www.liulongbin.top:8000/resources/images/32.jpg]}},{art_id: 8089,title: Typescript玩转设计模式 之 创建型模式,aut_id: 1111,comm_count: 24,pubdate: 2019-03-11 09:00:00,aut_name: 黑马先锋,is_top: 0,cover: {type: 1,images: [http://www.liulongbin.top:8000/resources/images/11.jpg]}},{art_id: 8145,title: JAVA消息确认机制之ACK模式,aut_id: 1111,comm_count: 99,pubdate: 2019-03-11 09:00:00,aut_name: 黑马先锋,is_top: 0,cover: {type: 0}}
]返回参数说明
参数名类型说明art_idstring文章 idtitlestring文章标题aut_idstring作者的 idcomm_countstring评论数pubdatestring发布日期aut_namestring作者名字|- coverobject文章封面|---- typenumber封面的数量可选值0、1、3|---- imagesarray文章封面图片的 URL 数组
7. 封装utils目录下的request模块
安装axios
npm i axios -S封装axios的原理 创建src/utils/request.js
import axios from axiosconst request axios.create({// 指定请求的根路径baseURL: https://www.escook.cn
})export default request8.在Home组件中封装initArticleList方法
一进入Home组件就要发请求来拿第一页数据一般来说是在created里面来调函数发起请求。
但是我们先不要写created先封装一个methods来调接口拿数据 // 导入 request.js
import request from /utils/request.js
export default {name: Home,data () {return {// 页码值page: 1,// 每页显示多少条数据limit: 10}},methods: {// 封装获取文章列表数据的方法async initArticleList () {// 发起 GET请求获取文章的列表数据const { data: res } await request.get(/articles, {// 请求参数params: {_page: this.page,_limit: this.limit}})console.log(res)}},created () {this.initArticleList()}
}获取到了数据
9. 封装 articleAPI 模块 现有这样一个需求我希望一进入User组件时也会发起axios请求来获取图书列表但我希望一次只请求5条数据即把limit改成5即可 一般方法的话就是在User.vue中写和之前Home.vue大体一样的代码。那如果还有一个页面也要调这个接口呢可以会发现代码冗余因此要把代码复用起来
思路 开始封装
创建src/api 文件夹里面存着所有的api接口有一个文件是articleAPI.js文章相关的API都封装到这个模块中
// 文章相关的 API 接口都封装到这个模块中
import request from /utils/request.js
// 向外按需导出一个 API 函数
export const getArticleListAPI function (_page, _limit) {return request.get(/articles, {// 请求参数params: {_page,_limit}})
}在Home组件中调用这个api接口User组件同理
// 按需导入 API 接口
import { getArticleListAPI } from /api/articleAPI.jsexport default {name: Home,data () {return {// 页码值page: 1,// 每页显示多少条数据limit: 10}},methods: {async initArticleList () {const { data: res } await getArticleListAPI(this.page, this.limit)console.log(res)}},created () {this.initArticleList()}
}总结 今后如果需要调接口来获取用户相关的信息则在src/api文件夹下新建一个模块专门来定义用户的api如userAPI.js 10. 封装 ArticleInfo 组件
ArticleInfo组件是可复用的组件放在components文件夹中
把请求回来的数据转存到了data里面供我们渲染页面时去使用
渲染页面
!-- 导入注册并使用 ArticleInfo 组件 --ArticleInfo v-foritem in artlist :keyitem.id/ArticleInfo为ArticleInfo 组件封装 props 属性
使用 ArticleInfo 组件
!-- 导入注册并使用 ArticleInfo 组件 --!-- 在使用自组件的时候如果某个属性名是“小驼峰”形式则绑定属性的时候建议改写成连字符格式 --!-- 如 cmtCount 建议写成 cmt-count --ArticleInfo v-foritem in artlist :keyitem.id :titleitem.title :authoritem.aut_name:cmt-countitem.comm_count :timeitem.pubdate/ArticleInfoArticleInfo.vue 中
export default {name: ArticleInfo,// 自定义属性props: {// 标题title: {type: String,default: null},// 作者名字author: {type: String,default: null},// 评论数cmtCount: {// 通过数组形式 为当前属性定义多个可能的类型type: [Number, String],default: 0},time: {type: String,default: null}}
}为ArticleInfo 组件封装 cover 属性 !-- 单张图片 --img :srccover.images[0] alt classthumb v-ifcover.type 1/div!-- 三张图片 --div classthumb-box v-ifcover.type 3 img :srcitem alt classthumbv-for(item,i) in cover.images :keyi/div// 封面的信息对象cover: {type: Object,// 通过default函数返回cover属性的默认值default: function () {return { type: 0 }}}11. 实现上拉加载更多 需要用到 Vant 提供的组件 — List List 组件通过 loading 和 finished 两个变量控制加载状态当组件滚动到底部时会触发 load 事件并将 loading 设置成 true。此时可以发起异步操作并更新数据数据更新完毕后将 loading 设置成 false 即可。若数据已全部加载完毕则直接将 finished 设置成 true 即可。
export default {name: Home,components: {ArticleInfo},data () {return {// 页码值page: 1,// 每页显示多少条数据limit: 10,// 文章列表数组artlist: [],// 是否正在下一页数据,如果loading为true则不会反复触发onload事件// 每当下一页数据请求回来之后千万要记得 把loading 从 true 改为 falseloading: true,// 所有数据是否加载完毕,如果没有更多数据了要把finished改成truefinished: false}},methods: {async initArticleList () {// 返回值 res 就是一个数组const { data: res } await getArticleListAPI(this.page, this.limit)// 如果是上拉加载更多那么应该是// this.artlist[旧数据在前新数据在后]this.artlist [...this.artlist, ...res]// 当第一页数据请求回来之后把 loading 改为 falsethis.loading falseif (res.length 0) {// 证明没有下一页数据了直接把 finished 改为true表示数据加载完了this.finished true}},// 只要onload 被调用就应该请求下一页数据onLoad () {// 1.让页码值 1this.page// 2. 重新请求接口获取数据this.initArticleList()}},created () {this.initArticleList()}
}12. 实现下拉刷新功能
下拉刷新时会触发 refresh 事件在事件的回调函数中可以进行同步或异步操作操作完成后将 v-model 设置为 false表示加载完成。
export default {name: Home,components: {ArticleInfo},data () {return {// 页码值page: 1,// 每页显示多少条数据limit: 10,// 文章列表数组artlist: [],// 是否正在下一页数据,如果loading为true则不会反复触发load事件// 每当下一页数据请求回来之后千万要记得 把loading 从 true 改为 falseloading: true,// 所有数据是否加载完毕,如果没有更多数据了要把finished改成truefinished: false,// 是否正在下拉刷新isLoading: false}},created () {this.initArticleList()},methods: {async initArticleList (isRefresh) {// 返回值 res 就是一个数组const { data: res } await getArticleListAPI(this.page, this.limit)if (isRefresh) {// 下拉刷新: 新数据在前新数据在后this.artlist [...res, ...this.artlist]this.isLoading false// 当} else {// 上拉加载更多旧数据在前新数据在后this.artlist [...this.artlist, ...res]// 当第一页数据请求回来之后把 loading 改为 falsethis.loading false}if (res.length 0) {// 证明没有下一页数据了直接把 finished 改为true表示数据加载完了this.finished true}},// 只要onload 被调用就应该请求下一页数据onLoad () {// 1.让页码值 1this.page// 2. 重新请求接口获取数据this.initArticleList()},// 下拉刷新的处理函数onRefresh () {// 1. 要页码值 1this.page// 2. 重新请求接口获取数据this.initArticleList(true)}}
}13. 定制主题
Vant定制主题的核心原理
该项目的标题“黑马头条 默认是白色背景我们是通过 /deep/ 深度选择器再结合审查元素找到了类名进行覆盖
这个方法有一个缺点如果另一个页面如用户页面也有这个标题那么需要重复这种方法不然样式仍然是默认的。 因此我们使用 定制主题 这个方法 引入样式源文件在main.js 中进行如下修改 如果 vue-cli 搭建的项目可以在 vue.config.js 中进行配置:
// 这个文件是 vue-cli 创建出来的 项目的 配置文件
// 在 vue.config.js 这个配置文件中可以对整个项目的打包、构建进行全局性的配置
// webpack 在进行打包的时候底层用到的是 node.js
// 因此在 vue.config.js 配置文件中可以导入并使用 node.js 中的核心模块
const path require(path)
const themePath path.join(__dirname, ./src/theme.less)
module.exports {css: {loaderOptions: {less: {// 若 less-loader 版本小于 6.0请移除 lessOptions 这一级直接配置选项。modifyVars: {// 可以通过 less 文件覆盖文件路径为绝对路径// 从 盘符 开始的路径叫做绝对路径hack: true; import ${themePath};}}}}
}4.上面的配置文件中的less变量在Vant 官网看 14. 打包
下面介绍打包完成后能双击 dist/index.html 来打开项目需要配置 vue.config.js
然后在终端运行
npm run build
