项目-vue-移动端
关注
分享
扫一扫
viceen
这个作者很懒，什么都没留下…
展开
-
个人中心 (三) 04-小智同学-实现聊天-vuex包中的方法需要导包 & 即时通讯操作在create里 & 定义为方法，使用处直接拿方法 & 等DOM渲染好，页面稳定了再操作滚动底部
个人中心-小智同学-实现聊天-vuex包中的方法需要导包 & 即时通讯操作在create里 & 定义为方法，使用处直接拿方法 & 等DOM渲染好，页面稳定了再操作滚动底部命令行安装包npm i socket.io-clientsrc/views/user/chat.vue小智的头像 src/assets/images/xz.png script里i...原创 2020-03-13 01:39:10 · 346 阅读 · 0 评论 -
个人中心 (三) 03-小智同学-认识和体验socket.io——基于WebSocket封装好的关于即时通讯的js等后端语言的插件
个人中心-小智同学-认识socket.io原生的 WebSocket 使用比较麻烦，所以推荐使用一个基于WebSocket封装好的解决方案（关于即时通讯的js等后端语言的插件）：socket.io 。socket.io 提供了服务端 + 客户端的实现客户端：浏览器服务端：Java、Python、PHP、。。。。Node.js官网：https://socket.io/仓库：htt...原创 2020-03-13 00:40:09 · 259 阅读 · 0 评论 -
个人中心 (三) 02-小智同学-认识和使用websocket数据通信协议-人机交互-即时通讯功能
个人中心-小智同学-认识websocketWebSocket 是一种数据通信协议，类似于我们常见的 http 协议。初次接触 WebSocket 的人，都会问同样的问题：我们已经有了 HTTP 协议，为什么还需要另一个协议？它能带来什么好处？答案很简单，因为 HTTP 协议有一个缺陷：通信只能由客户端发起。这种单向请求的特点，注定了如果服务器有连续的状态变化，客户端要获知就非常麻烦。我们...原创 2020-03-12 21:45:04 · 276 阅读 · 0 评论 -
个人中心 (三) 01-小智同学-基础布局-人机聊天界面的渲染
个人中心-小智同学-基础布局-人机聊天界面的渲染结构： src/views/user/chat.vue <div class="container"> <van-nav-bar fixed left-arrow @click-left="$router.back()" title="小智同学"></van-nav-bar> //对话框...原创 2020-03-12 18:19:25 · 276 阅读 · 0 评论 -
个人中心 (二) 03-编辑资料-修改信息-F12打开控制台查看数据-API使用步骤
个人中心-编辑资料-修改信息-F12打开控制台查看数据-API使用步骤绑定事件 src/views/user/profile.vue <van-nav-bar left-arrow @click-left="$router.back()" title="编辑资料" right-text="保存" @click-right="save()"></van-nav-ba...原创 2020-03-12 18:10:00 · 1387 阅读 · 0 评论 -
个人中心 (二) 02-编辑资料-修改头像-逻辑：获取文件-准备formData-提文件-关对话框-成功提示-显头像& $toast.success('提示')& $refs.file获取上传DOM
个人中心-编辑资料-修改头像-逻辑：获取文件-准备formData-提交文件-关闭对话框-成功提示-显示头像 & this.$toast.success(‘提示语’) & $refs.file获取上传DOMUploader 文件上传-基础用法：https://youzan.github.io/vant/#/zh-CN/uploader#ji-chu-yong-fa准备上传文...原创 2020-03-12 10:32:17 · 732 阅读 · 0 评论 -
个人中心 (二) 01-编辑资料-基础布局-Popup弹出层-底部弹出-头像男女时间 & DatetimePicker时间选择转换-dayjs(value).format('YYYY-MM-DD')
个人中心-编辑资料-基础布局-Popup 弹出层-底部弹出模式-头像-男女-时间 & DatetimePicker 时间选择-年月日模式 & dayjs(value) 转换成日期对象，format(‘YYYY-MM-DD’)静态结构： src/views/user/profile.vue <div class="container"> <van-na...原创 2020-03-12 09:43:33 · 591 阅读 · 0 评论 -
个人中心 (一) 03-首页-退出登录-清除用户信息-Dialog 弹出框-确认弹框模式 & this.$router.replace()-产生新的替换当前的历史记录& push 追加一条新的记录
个人中心-首页-退出登录-清除用户信息-Dialog 弹出框-确认弹框模式 & this.$router.replace()-替换当前的历史记录,产生新的记录,不会追加&push 往浏览历史记录追加一条新的记录Dialog 弹出框-确认弹框模式：https://youzan.github.io/vant/#/zh-CN/dialog#xiao-xi-que-ren绑定事件 ...原创 2020-03-12 08:41:47 · 720 阅读 · 0 评论 -
个人中心 (一) 02-首页-渲染-定义和导入api数据 & 模拟数据换为接口数据
个人中心-首页-渲染-定义和导入api数据 & 模拟数据换为接口数据定义API src/api/user.js/** * 获取个人中心首页用户信息 */export const getUserInfo = () => { return request(`/app/v1_0/user`, 'get')}获取个人信息 src/views/user/index....原创 2020-03-11 13:46:09 · 484 阅读 · 0 评论 -
个人中心 (一) 01-首页-基础布局
个人中心-首页-基础布局结构：src/views/user/index.vue <div class="user-profile"> <div class="info"> <van-image round src="https://img.yzcdn.cn/vant/cat.jpeg" /> <h3 c...原创 2020-03-11 11:51:49 · 2503 阅读 · 1 评论 -
文章详情 (五) 05-评论组件-评论与回复-逻辑：请求-成功显示-清空内容-更新数量-关闭加载-key绑定列表ID加上toString手动转换字符串
文章详情-评论组件-评论与回复-逻辑：请求-成功显示-清空内容-更新数量-关闭加载-:key绑定列表ID加上toString手动转换字符串封装API src/api/article.js/** * 评论或者回复 * @param target - 文章的ID 或者 评论ID * @param {*} content - 内容 * @param {*} articleId -...原创 2020-03-11 11:16:17 · 207 阅读 · 0 评论 -
文章详情 (五) 04-评论组件-回复列表渲染-判断是否全部加载完毕，进行时间戳对比 & ID自己来转换字符串 toString()，否则接口调用会报错，显示%
文章详情-评论组件-回复列表渲染-判断是否全部加载完毕，进行时间戳对比 & ID自己来转换字符串 toString()，否则接口调用会报错，显示%src/views/home/components/comment.vue使用获取评论的API，参数改成 c 即可。点击的时候，获取当前点击的评论ID绑定点击事件获取评论ID： commentId: null, <v...原创 2020-03-11 10:49:42 · 242 阅读 · 0 评论 -
文章详情 (五) 03-评论组件-回复列表布局
文章详情-评论组件-回复列表布局回复列表基础布局结构：src/views/home/components/comment.vue<!-- 回复 --><van-action-sheet v-model="showReply" class="reply_dailog" title="回复评论"> <van-list v-model="reply.upLo...原创 2020-03-11 10:29:38 · 615 阅读 · 0 评论 -
文章详情 (五) 02-评论组件-评论列表渲染-定义和使用API-子组件comment.vue接收父组件article.vue数据& 判断是否全部加载完毕用时间非ID &：key唯一标识绑定列表ID
文章详情-评论组件-评论列表渲染-定义和使用API-子组件comment.vue接收父组件article.vue数据 & 判断是否全部加载完毕，用的是时间非ID &：key 唯一标识 绑定列表ID组件初始化时候，默认触发上拉加载。组件激活的时候，需要主动触发上拉加载。测试文章：http://localhost:8080/#/article/141314定义API src...原创 2020-03-11 10:06:38 · 374 阅读 · 0 评论 -
文章详情 (五) 01-评论组件-评论列表布局-新建一个vue组件内页面，防止单组件页面内容代码过长 & 上拉加载
文章详情-评论组件-评论列表布局-新建一个vue组件内页面，防止单组件页面内容代码过长 & 上拉加载为防止单组件页面内容代码过长，重新新建一个vue组件页面第一步：在src/views/home/components下新建comment.vue文件并结构初始化<template> <div class='container'>comment<...原创 2020-03-11 09:10:54 · 402 阅读 · 0 评论 -
文章详情 (四) -点赞与不喜欢
文章详情-点赞与不喜欢封装API src/api/article.js/** * 不喜欢 * @param {Object} articleId - 文章ID */export const disLikes = (articleId) => { return request('/app/v1_0/article/dislikes', 'post', { target:...原创 2020-03-11 08:40:29 · 191 阅读 · 0 评论 -
文章详情 (三) -关注与取消关注-return Promise.reject(err)抛出错误，阻止程序运行
文章详情-关注与取消关注-return Promise.reject(err)抛出错误，阻止程序运行绑定事件<van-button @click="toggleFollowing()" round size="small" type="info"> {{article.is_followed?'已关注':'+ 关注'}}</van-button>封装Ap...原创 2020-03-10 23:32:25 · 7089 阅读 · 0 评论 -
文章详情 (二) -内容渲染-阅读记忆-@scroll=remember($event) 记住阅读位置 & v-html渲染文章详情内容 & toString() 方法可把一个逻辑值转换为字符串
文章详情-内容渲染-@scroll=“remember($event)” 记住阅读位置 & v-html渲染文章详情内容 & toString() 方法可把一个逻辑值转换为字符串src/api/article.js api代码export const getArticlepetail=(articleId)=>{return request('/app/v1_e/...原创 2020-03-09 12:51:56 · 216 阅读 · 0 评论 -
文章详情 (一) -基础布局
文章详情-基础布局src/views/home/article.vue <div class='container'> <van-nav-bar fixed title="文章详情" left-arrow @click-left="$router.back()" /> <div class="detail"> <h3 cl...原创 2020-03-09 12:49:04 · 881 阅读 · 0 评论 -
搜索中心 (四) 02-搜索结果-上拉加载
搜索结果-上拉加载封装API src/api/article.js/** * 根据搜索关键字查询文章列表 * @param {Integer} param.page - 页码 * @param {Integer} param.page - 每页多少条 * @param {String} param.page - 搜索关键字 */export const searchArticl...原创 2020-03-09 00:37:26 · 189 阅读 · 0 评论 -
搜索中心 (四) 01-搜索结果-基础布局
搜索结果-基础布局src/views/search/result.vue <van-nav-bar fixed title="搜索结果" left-arrow @click-left="$router.back()" /> <van-pull-refresh> <van-list> <van-cell-group>...原创 2020-03-09 00:36:53 · 180 阅读 · 0 评论 -
搜索中心 (三) -联想搜索-watch来监听关键字数据的变化 & 联想搜索-lodash提供 debounce函数防抖 & toLowerCase() 将字符串转换为小写
搜索中心-联想搜索-watch来监听关键字数据的变化 & 联想搜索-lodash提供 debounce函数防抖 & 做动画- lodash提供 throttle函数节流 & toLowerCase() 将字符串转换为小写封装API src/api/article.js/** * 获取建议词条 * @param {String} text - 搜索关键字...原创 2020-03-09 00:08:34 · 405 阅读 · 0 评论 -
搜索中心 (二) -历史记录——追加删除、清空、跳转 & $router.push路由跳转& ...拓展运算符和ES6语法之set用来数组去重& window.localStorage 本地存储
搜索中心-历史记录——追加、删除、清空、跳转 & $router.push路由跳转 & …拓展运算符和ES6语法之set用来数组去重 & window.localStorage 记录本地存储src/views/search/index.vue的script里//本地存储搜索历史记录//约定key=‘hm-toutiao-m-79-history'//约定val...原创 2020-03-08 22:24:51 · 950 阅读 · 0 评论 -
搜索中心 (一) -基础布局-search搜索框组件-自定义按钮 & 历史记录与联想搜索切换-v-if-v-else
搜索中心-基础布局-search搜索框组件-自定义按钮 & 历史记录与联想搜索切换-v-if-v-elsesearch搜索框组件-自定义按钮：https://youzan.github.io/vant/#/zh-CN/search#zi-ding-yi-an-niu搜索框：src/views/search/index.vue<van-search v-model.trim="...原创 2020-03-08 21:48:04 · 1536 阅读 · 0 评论 -
频道列表模块 (四) 03-添加我的频道功能-推荐频道是不需要排序的，默认是第一位置。不需要给后台
添加我的频道功能-推荐频道是不需要排序的，默认是第一位置。不需要给后台src/views/home/components/channel-edit.vue中：// 添加频道 async addChannel ({ id, name }) { // item 传过来的意义是：本地存储和接口调用 都需要 // 接口调用：[{id:'频道ID',seq:'序号'}]...原创 2020-03-08 00:46:45 · 274 阅读 · 0 评论 -
频道列表模块 (四) 02-添加我的频道API-JSON.parse（）json对象转数组 & push-追加数据
添加我的频道API-JSON.parse（）json对象转数组 & push-追加数据获取频道API src/api/channel.js/** * 添加频道 * @param {Array} orderChannels - 排序好的频道数据 [{id:'频道ID',seq:'序号',name:'频道名称'}] */export const addChannel = (orde...原创 2020-03-07 11:47:07 · 281 阅读 · 0 评论 -
频道列表模块 (四) 01-添加我的频道API参数设置-根据id,name,序号索引操作频道 & splice() 方法-删除从 index 处开始的零个或多个元素
添加我的频道API参数设置-根据id,name,序号索引操作频道 & splice() 方法-删除从 index 处开始的零个或多个元素src/views/home/components/channel-edit.vue中：绑定事件，提供（添加频道）数据。<van-icon name="plus" @click="addChannel(item)" class="btn"&...原创 2020-03-07 11:24:46 · 320 阅读 · 0 评论 -
频道列表模块 (三) 03-删除我的频道功能-const定义的简单数据类型 是不能赋值修改 & 复杂数据类型，在不改变指向情况下，修改数据-arr.push(3)-[1 2 3]可实现
删除我的频道功能-const定义的简单数据类型 是不能赋值修改 & 复杂数据类型，在不改变指向情况下，修改数据-arr.push(3)-[1 2 3]可实现src/views/home/components/channel-edit.vue中：绑定事件，进行删除<van-icon @click="delChannel(i,item.id)"></van-icon...原创 2020-03-07 10:41:26 · 173 阅读 · 1 评论 -
频道列表模块 (三) 02-删除我的频道API-支持 接口的删除 与 本地删除 频道 & try和catch的应用，参数e代表错误对象
删除我的频道API-支持 接口的删除 与 本地删除 频道 & try和catch的应用，参数e代表错误对象支持两种方式（登录，未登录）目的：让编辑频道的逻辑更加简化。src/api/channel.js/** * 支持 接口的删除 与 本地删除 频道 * @param {Integer} channelId - 频道ID */export cons...原创 2020-03-07 10:13:15 · 161 阅读 · 0 评论 -
频道列表模块 (三) 01-重构我的频道API-获取我的频道列表（未登录，默认频道列表，已登录，我的频道列表）-JSON.parse()
重构我的频道API-获取我的频道列表（未登录，默认频道列表，已登录，我的频道列表）-JSON.parse()在请求拦截器加上了token 头部是否有token兼容本地存储src/api/channel.jsimport store from '@/store'// 约定 本地存储 频道的数据KEY// 约定 本地存储 频道的数据VALUE [{id:'频道ID...原创 2020-03-03 23:39:24 · 176 阅读 · 0 评论 -
频道列表模块 (二) 03-点击进入频道-sync修饰符 语法糖 ——子父组件同步数据，补充v-model使用
点击进入频道-sync修饰符 语法糖 ——子父组件同步数据，补充v-model使用src/views/home/components/channel-edit.vue中：<span class="f12" @click="enterChannel(i)" // 进入频道 index 是你需要进入频道索引 enterChannel (index) { /...原创 2020-03-03 22:55:56 · 168 阅读 · 0 评论 -
频道列表模块 (二) 02-渲染可选频道-可选频道 = 全部频道 - 我的频道 & Array.filter() 会遍历 返回符合条件的选项 组成一个新数组 & -1表示false，进入新数组
渲染可选频道-可选频道 = 全部频道 - 我的频道 & Array.filter() 会遍历 返回符合条件的选项 组成一个新数组 & -1表示false，进入新数组获取所有频道API src/api/channel.js/** * 获取全部频道 */export const getAllChannels = () => { return request(...原创 2020-03-03 18:31:40 · 159 阅读 · 0 评论 -
频道列表模块 (二) 01-渲染我的频道-模拟数据转换成真实数据-props接收对象时，如果是复杂数据类型使用函数的返回值
渲染我的频道-模拟数据转换成真实数据-props接收对象时，如果是复杂数据类型使用函数的返回值使用父组件数据 src/views/home/index.vue我的频道列表当前激活频道<channel-edit :channels="channels" :activeIndex="activeIndex"></channel-edit>data () ...原创 2020-03-03 18:09:10 · 258 阅读 · 0 评论 -
频道列表模块 (一) -准备组件-ActionSheet 上拉菜单组件-自定义面板模式 & 我的频道和可选频道的展示- 删除图标的切换
准备组件-ActionSheet 上拉菜单组件-自定义面板模式 & 我的频道和可选频道的展示- 删除图标的切换使用组件：src/views/home/index.vue//控制频道编辑显示与隐藏showEditChannel: false//频道编辑<channel-edit v-model="showEditChannel"></channel-edit&g...原创 2020-03-03 17:45:46 · 1376 阅读 · 0 评论 -
更多操作 (三) -举报文章——新建定义举报类型常量数据-导入使用数据-绑定事件进行提示
更多操作-举报文章——新建定义举报类型常量数据-导入使用数据-绑定事件进行提示根据接口提供的传参，新建定义常量数据 src/api/constants.js// 举报类型export const reportType = [ { value: 0, label: '其他问题' }, { value: 1, label: '标题夸张' }, { value: 2, label:...原创 2020-03-03 01:02:53 · 255 阅读 · 0 评论 -
更多操作 (二) -不感兴趣-子组件发请求，父组件删文章——添加事件 获取文章ID-绑定文章ID调用接口-根据ID删除文章
更多操作-不感兴趣-子组件发请求，父组件删文章——添加事件 获取文章ID-绑定文章ID调用接口-根据ID删除文章打开时候传入当前点击文章IDarticleId: ''//添加事件 获取文章ID<span v-if="auth.token" class="close" @click.stop="openMoreAction(article.ar...原创 2020-03-02 23:29:48 · 255 阅读 · 0 评论 -
更多操作-列表文章 (一) -组件准备-popup 弹出层组件 & 父子传值-props 把数据传给子组件-$emit 触发父组件的自定义事件
更多操作-组件准备使用 popup 弹出层组件 https://youzan.github.io/vant/#/zh-CN/popup1 点击遮罩层周围 popup组件实现会关闭2 关闭时会触发自身布尔值的改变，从而触发input事件3 input事件改变的值 又会触发绑定的v-model="showMoreAction"的值改变4 达到修改弹出框的效果封装在 src/...原创 2020-03-01 22:39:23 · 1033 阅读 · 0 评论 -
渲染列表 (九) -登录后更新频道与文章-监听vuex的用户数据
登录后更新频道与文章监听登录与退出不管登录与退出，都需要操作 vuex 中用户数据监听用户数据改变即可导入vuex的用户数据src/vies/home/index.vue中的script里import { mapState } from 'vuex'src/vies/home/index.vue中的export defort里 computed: { activeC...原创 2020-03-01 21:50:36 · 133 阅读 · 0 评论 -
渲染列表 (八) -优化-阅读记忆-lazy-render属性-开启延迟渲染 & scrollTop-记录阅读位置 & ref-给子组件注册引用信息 & $nextTick() 下一帧 时间延时
优化-阅读记忆-lazy-render属性-开启延迟渲染 & 使用scrollTop-绑定滚动事件，记录阅读位置 & ref-给元素或子组件注册引用信息 & $nextTick() 下一帧 时间延时tab组件，默认是懒加载，会导致操作dom问题，需要关闭，自己主动来加载。onload tab被激活的时候，根据页面高度，去主动加载数据。lazy-rend...原创 2020-03-01 00:09:00 · 1480 阅读 · 0 评论 -
渲染列表 (七) -优化-缓存组件—返回网页原位置-keep-alive缓存组件-包裹动态组件-按需缓存单独配置-meta { keepAlive true } & activated 激活组件触发
优化-缓存组件—返回网页原位置-keep-alive 缓存组件-将其动态组件包裹起来-按需缓存，单独配置——meta: { keepAlive: true } & activated 激活组件触发keep-alive 缓存组件：https://cn.vuejs.org/v2/guide/components-dynamic-async.html#在动态组件上使用-keep-alive...原创 2020-02-29 21:23:17 · 1278 阅读 · 0 评论