项目-vue-PC端
关注
分享
扫一扫
vue项目 pc端
viceen
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
图形化开发（二）01——Three.js之Hello World
图形化开发（二）01——Three.js之Hello World前面说了这么多，准备了这么多，最后，放上我们的第一个案例吧。由此来打开学习Three.js 的大门：<!DOCTYPE html><html><head> <meta charset=utf-8> <title>我的第一个Three.js案例</title> <style> body { m原创 2021-09-06 23:57:48 · 280 阅读 · 0 评论 -
头条项目-api
黑马头条-自媒体 门户查询所有已实现接口 基本信息Path： /mp/Method： GET接口描述：线上接口地址 http://ttapi.research.itcast.cn/mp/返回已上线接口地址，形如：{ "user.Authorization": "/v1_0/authorizations", "user.Captcha": "/v1_0/captchas/<mobile:mob..原创 2020-05-12 17:00:36 · 6874 阅读 · 9 评论 -
webpack基础知识详解
webpack基础01-模块化历程起初，js没有模块化概念，导致出现一些问题：容易造成变量污染文件之间的依赖关系模糊浏览器端模块化：异步模块化规范require.js 是AMD规范 （异步模块化规范） 依赖前置sea.js 说CMD规范（通过模块化规范 异步） 依赖就近Nodejs模块化：同步模块化规范CommonJS规范导出：module.exports导入...原创 2020-02-23 02:00:25 · 822 阅读 · 0 评论 -
webpack (十二) -打包部署——路由懒加载 解决 首屏加载慢 的问题 & 打包优化——体积较大的第三方包，使用cdn的安装方式进行加载
21-webpack-打包部署——路由懒加载 解决 首屏加载慢 的问题路由懒加载 解决 登录页首屏加载慢 的问题路由懒加载：https://router.vuejs.org/zh/guide/advanced/lazy-loading.html原因：所有第三包打包在一起，资源体积比较大，会导致资源运行时比较慢echarts包体积比较就比较大，且是局部使用，可以单独进行引入...原创 2020-02-23 01:09:14 · 962 阅读 · 0 评论 -
粉丝管理 (三) -粉丝画像（echarts使用）
03-粉丝管理-粉丝画像（echarts使用）数据可视化图表（柱状图，饼状图，线形图，k线图，雷达图）底层实现：canvas h5提供绘图的技术 但是API使用非常繁琐。数据可视化插件：echarts 是百度开发一款插件。 highCharts 国外。echarts官网 :https://www.echartsjs.com使用步骤：第一步：npm insta...原创 2020-02-20 22:10:51 · 1398 阅读 · 0 评论 -
粉丝管理 (二)-粉丝列表-pagination分页组件-带有背景色的分页模式 & 粉丝图片id超出js最大安全数值-需要使用json-bigint处理 & async调用接口数据，拿到并解构数据
02-粉丝管理-粉丝列表pagination分页组件-带有背景色的分页模式：https://element.eleme.cn/#/zh-CN/component/pagination结构：src/views/fans/index.vue中的div盒子里<el-tab-pane label="粉丝列表" name="list"> <div class="...原创 2020-02-20 14:19:26 · 485 阅读 · 0 评论 -
粉丝管理 (一)-基础布局-avatar头像组件-基本用法模式 & 路由组件模块使用方法
01-粉丝管理-基础布局第一步：创建组件 src/views/fans/index.vue第二步：路由内导入组件 src/router/index.jsimport Fans from '@/views/fans'...//指定路由规则，实现功能children:[ {path:'/fans',name:'fans',components:fans}]tabs标签页组...原创 2020-02-20 13:31:40 · 2118 阅读 · 0 评论 -
个人设置 (四)-修改头像-上传图片 方案：axios+formdata & 用 http-request 属性来覆盖默认上传 & 兄弟组件传值应用
04-个人设置-修改头像修改头像提交的图片 请求方式patch而el-upload组件默认的提交方式是post不能使用默认的上传方式，自定义上传。上传图片的请求需要自己来发送。大事件 上传图片 方案：xhr+formdata黑马头条 上传图片 方案：axios+formdata使用 http-request 属性来覆盖默认上传指定是function ，当你选择了图...原创 2020-02-20 00:59:20 · 474 阅读 · 0 评论 -
个人设置 (三)-修改基本信息-create获取数据-async异步获取后台数据 & 兄弟组件传值的具体应用
03-个人设置-修改基本信息获取个人信息填充表单src/views/setting/index.vue 中的export default里 created () { // 获取个人信息 this.getUserInfo() }, methods: { //异步获取后台数据 async getUserInfo () { const { d...原创 2020-02-19 23:48:13 · 408 阅读 · 0 评论 -
个人设置 (二)-基础布局——layout布局组件-12栅格布局模式 & input输入框组件-文本域模式 & upload上传组件-用户上传模式
02-个人设置-基础布局layout布局组件-基础栅格布局模式：https://element.eleme.cn/#/zh-CN/component/layoutinput输入框组件-文本域模式：https://element.eleme.cn/#/zh-CN/component/inputbutton按钮组件-主要按钮模式：https://element.eleme.cn/#/zh-...原创 2020-02-19 23:44:04 · 455 阅读 · 0 评论 -
个人设置（一）-VUE基础-组件传值(非父子) —eventbus-只提供vue实例 & 谁需要数据 谁用eventBus绑定事件 & 谁传递数据 谁用eventBus触发事件
01-VUE基础-组件传值(非父子) 理论分析——>代码实现父传子子传父非父子在A组件内绑定一个事件（C.$on(‘事件名称’，函数（参数）｛｝)），当事件被触发，接收传参。在B组件内触发这个事件（C.$emit(‘事件名称’，‘数据’)），触发这个事件，传参即可。这个事件，由C绑定，由C触发。（术语：事件总线eventBus-控制了组件传值需要使用的所有事件绑定和触发）...原创 2020-02-19 16:21:30 · 176 阅读 · 0 评论 -
评论管理-基础布局-v-if和v-else & 列表与分页-created获取数据-async异步获取数据-pagination分页组件 & 打开与关闭-成功后更新状态
01-评论管理-基础布局src/views/comment/index.vue 中的div盒子里<template> <div class='container'> <el-card> <div slot="header"> <my-bread>评论管理</my-bread> ...原创 2020-02-19 15:08:29 · 282 阅读 · 0 评论 -
发布文章 （八）-解决当你在修改文章时候，点击发布文章，组件不更新 区别：computed-计算属性：依赖其他数据 & watch-侦听器：监听数据变化，进行其他操作
什么程度叫学会了？——独立的完成当天的代码。先看笔记（视频），对照笔记，敲出代码，认为吸收一半。自己独立的再来次。13-回顾发布文章使用富文本封装封面图组件发布业务合并修改业务作业：解决当你在修改文章时候，点击发布文章，组件不更新。**原因：**路由对应的组件，路由规则发生改变，组件就会更新。**思路：**监听地址栏传参的改变，手动更新组件（更新数据...原创 2020-02-19 03:18:05 · 382 阅读 · 0 评论 -
发布文章 (七)-发表-存入草稿-Message 消息成功提示组件-$router.push跳转页面 & 合并修改文章业务-&&短路与的运算和if判断 async用法 post和put上传写法
11-发布文章-发表&存入草稿点击发表，点击存入草稿把文章数据提交给后台成功：提示+跳转内容管理Message 消息提示组件-基础用法模式：https://element.eleme.cn/#/zh-CN/component/messagepublish/index.vue//API文档规定—— false-发表 true-存入草稿 绑定事件<el-b...原创 2020-02-18 15:45:47 · 349 阅读 · 0 评论 -
发布文章（六）-封面组件-双向绑定应用 & 使用组件-图片按钮上传-按钮切换并清零操作
09-发布文章-封面组件-双向绑定双向绑定的数据-图片地址：v-model=“articleForm.cover.images[0]”src/components/my-image.vue中作为子组件操作publish/index.vue作为父组件操作父给子export default里声明： props: ['value'], //子组件接受数据div盒子里面图片按钮...原创 2020-02-18 14:15:41 · 284 阅读 · 0 评论 -
发布文章（五）-封面组件-上传图片功能-upload组件-用户头像上传模式-上传图片请求头 & 确认图片-逻辑--message消息提示组件-基本用法样式和默认图片丢失处理
07-发布文章-封面组件-上传图片功能upload组件-用户头像上传模式：https://element.eleme.cn/#/zh-CN/component/uploadsrc/components/my-image.vue中的div里-上传图片占位<!-- 上传组件 --> <el-upload class="avatar-...原创 2020-02-17 23:45:23 · 841 阅读 · 0 评论 -
发布文章（四）-封面组件-选中素材效果-覆盖图片元素的处理-伪元素选择器实现容器元素效果-图片no-repeat效果
06-发布文章-封面组件-选中素材效果点击图片选中当前图片其他图片不选中怎么选中：需要容器（遮罩，打钩图片，居中显示）思考1：怎么才代表选中？需要一个数据，标识当前图片是否选中，值布尔类型。怎么得到数据的值，记录当前点击的图片唯一标识，和当前所有图片的ID进行比对，如果一致代表选中，反之不选中。加上了 selected 类选中了。src/components...原创 2020-02-17 22:32:51 · 253 阅读 · 0 评论 -
发布文章（三）02-封面组件-图片按钮-素材列表-radio单选按钮 & 分页-Pagination分页组件使用和async异步获取后台数据
05-发布文章-封面组件-素材列表与分页结构：src/components/my-image.vue<el-tab-pane label="素材库" name="image"> <!-- 单选按钮 --> <el-radio-group @change="changeCollect" v-model="reqParams.c...原创 2020-02-17 21:37:53 · 245 阅读 · 0 评论 -
发布文章（三）01-封面组件-分析功能 & 基础布局-radio单选框组件-图片按钮：dialog对话框组件-tabs标签页组件
03-发布文章-封面组件-分析功能组件的结构：图片按钮对话框素材库素材列表分页全部收藏切换选中图片功能上传图片上传组件上传成功后，预览。确认图片如果选的是素材库，使用选中的图如果选的是上传图片，使用上传的图片做为封面图，在图片按钮显示。支持v-model04-发布文章-封面组件-基础布局radio单选框组件-单选框组模式：ht...原创 2020-02-17 21:05:09 · 267 阅读 · 0 评论 -
发布文章（二）-基础布局-editor富文本配置功能与样式-quill.js插件使用
02使用富文本：https://github.com/vuejs/awesome-vue 记录vue技术栈相关的 框架 组件库 插件 文章 博客 教学视频找到：https://github.com/surmon-china/vue-quill-editor 富文本。安装：npm install vue-quill-editor局部挂载：src/views/publi...原创 2020-02-17 18:59:01 · 1185 阅读 · 0 评论 -
发布文章（一）-基础布局-button按钮组件-radio单选框组件-display转块元素使用-使用封装好的频道组件
01-发布文章-基础布局button按钮组件-默认和主要模式——网址：button按钮组件-默认和主要模式https://element.eleme.cn/#/zh-CN/component/buttonradio单选框组件-单选框组模式——网址：radio单选框组件-单选框组模式https://element.eleme.cn/#/zh-CN/component/radio基础布局：v...原创 2020-02-17 14:58:11 · 471 阅读 · 0 评论 -
素材管理（五）-添加素材-准备dialog对话框-打开嵌套表单模式 & 准备upload上传组件-用户头像模式 & 成功处理的业务-setTimeout() 方法
07-素材管理-添加素材点击添加素材时候显示对话框组件（上传图片组件）点击上传图片选择图片，确认选择之后，上传图片给后台响应图片的地址给前端，进行预览（提示上传成功）2s之后，自动关闭对话框，回到第一页更新列表。对话框组件网址：dialog对话框-打开嵌套表单模式https://element.eleme.cn/#/zh-CN/component/dialog1....原创 2020-02-17 00:39:26 · 432 阅读 · 0 评论 -
素材管理（四）-删除素材-messagebox消息提示弹框组件-确认消息模式
06-素材管理-删除素材点击删除图标获取当前图片的ID发送删除请求成功：提示+更新列表div盒子中绑定事件：<span @click="delImage(item.id)" class="el-icon-delete"></span>messagebox消息提示弹框组件-确认消息模式：https://element.eleme.cn/#/zh...原创 2020-02-16 23:01:49 · 529 阅读 · 0 评论 -
素材管理（三）-全部与收藏切换-radio单选框按钮样式组件切换显示和隐藏-隐藏pagination分页组件 & 收藏素材-状态切换-async异步方法提交后台数据
04-素材管理-全部与收藏切换监听用户的切换行为（radio单选框组件中的按钮样式的值改变事件）组件网址：radio单选框组件中的按钮样式https://element.eleme.cn/#/zh-CN/component/radio看事件的名称：change传参：选中的label的值 （v-model反馈 reqParams.collect）当筛选条件改变后：页码设置第一页...原创 2020-02-16 18:22:39 · 610 阅读 · 0 评论 -
素材管理（二）-图片列表渲染-ES6提供解构赋值语法：{data：{data}} & 分页功能实现-el-pagination 组件属性或事件
02-素材管理-图片列表渲染当组件初始化完毕发获取素材列表请求得到数据后赋值 images渲染列表<!-- 图片列表 --> <div class="img_list"> <div class="img_item" v-for="item in images" :key="item.id"> &...原创 2020-02-16 16:45:12 · 753 阅读 · 0 评论 -
素材管理（一）-基础布局-面包屑导航、图片水平布局和v-for+：key遍历
01-素材管理-基础布局新建并引入素材模块路由：router/index.jsimport Image from '@/views/image' { path: '/image', name: 'image', component: Image }组件：views/image/index.vue<template> <div class="container"&...原创 2020-02-16 16:12:46 · 296 阅读 · 0 评论 -
内容管理（九）02-频道（下拉列表选项）组件封装-实现-父子组件传值 和 v-model的使用
14-频道组件封装-实现频道组件封装-实现01-内部功能内部功能的实现components/my-channel.vue 组件<template> <el-select v-model="value" placeholder="请选择" clearable> <el-option v-for="item in channelOptions"...原创 2020-02-16 00:50:59 · 223 阅读 · 0 评论 -
频道组件封装-准备知识-父子传值——父向子传值：在子组件使用 props 选项接收父组件的数据 & 子向父传值：子组件可以使用 $emit 触发父组件的自定义事件
频道组件封装-准备知识-父子间传值父传子在子组件使用 props 选项接收父组件的数据。<!-- 父组件 --><template> <div><com-child :value="父组件数据"></com-child></div></template><!-- 子组件 -->...原创 2020-02-15 18:50:40 · 236 阅读 · 0 评论 -
内容管理（九）01-编辑-地址栏传参跳转 & 频道（下拉列表选项）组件封装-准备 - 父子传值——vue子组件向父组件，使用$emit方法
09-内容管理-编辑-地址栏传参跳转http://localhost:8080/#/publish 发布文章 path:’/publish’http://localhost:8080/#/publish?id=100 编辑文章 path:’/publish’确认传参使用query，因为想两个地址来到同一个组件，路由的规则是一样的。 <el-button @click="$r...原创 2020-02-15 17:44:11 · 285 阅读 · 0 评论 -
内容管理（八）02-删除-响应无内容处理- JSONBIG.parse(null) 报错-代码最好使用try{}catch(){}，弹出框确认消息组件使用
11-内容管理-删除-响应无内容处理点击删除按钮获取文章的ID （测试帐号删除无效）请求删除接口成功后提示 删除成功更新 列表处理没有响应内容：api/index.js// 默认配置 转换响应数据axios.defaults.transformResponse = [data => { // 对data（后台的原始数据）进行转换 // 但是 有一...原创 2020-02-15 14:30:13 · 28407 阅读 · 0 评论 -
内容管理（八）01-删除-数字最大安全值 -axios默认转换格式JSON.parse() 改为 json-bigint格式JSONbig.parse(json) 处理json对象中的id值
10-内容管理-删除-数字最大安全值现象：后端给的值太大了，前端处理不了；获取到的数据值是不安全的按F12检查——>点击Network 并刷新且看后端传给的数据， 点击左侧数据，①看右侧Response,显示数据格式为 json文本 不能直接用，需要转化为json对象； ②看右侧Preview中 json...原创 2020-02-15 13:43:59 · 4549 阅读 · 0 评论 -
内容管理（七） -搜索功能-筛选的时间格式处理、下拉选项的内容选定、下拉框的清除
09-内容管理-搜索功能获取需要提交给后台的参数状态，频道，参数是双向绑定的时间 和 dateArr 绑定，选择过时间后，去修改reqParams的两个时间。监听选择日期事件 change获取选择的时间 [开始，结束] === 回传参数转换格式给reqParams的两个时间赋值绑定筛选事件发请求即可问题：频道清空后，查询全部频道，值为 “” ，是会发送给后...原创 2020-02-15 01:36:01 · 300 阅读 · 0 评论 -
内容管理（六）-分页功能-筛选头部、总页数、总条数、单页总条数、默认和选定的当前页显示
08-内容管理-分页功能渲染分页组件获取总条数 data.total_count// 总条数total: 0筛选头部结果: <div slot="header">根据筛选条件共查询到 {{total}} 条结果：</div>动态绑定分页的各个属性值:<!-- 分页 --> <el-pagination ...原创 2020-02-15 00:48:22 · 1040 阅读 · 0 评论 -
内容管理（五） 03-列表渲染-async数据获取-表格列、封面图、删除当前行的按钮
07-内容管理-列表渲染当组件初始化完毕根据默认的筛选条件进行查询获取查询的结果数据，给articles赋值。添加表格的列，进行渲染 // 文章列表数据 articles: []created () { // 获取频道选项数据 this.getChannelOptions() // 获取文章列表数据 this.getArticles() ...原创 2020-02-15 00:27:54 · 256 阅读 · 0 评论 -
内容管理（五） 02-频道选项-下拉列表数据 await拿取渲染
06-内容管理-频道选项渲染组件初始化完毕获取后台的数据给channelOptions赋值// 频道选项数据channelOptions: [], created () { // 获取频道选项数据 this.getChannelOptions() },methods: { //拿数据和赋值 async getChannelOptio...原创 2020-02-14 23:31:32 · 150 阅读 · 0 评论 -
内容管理（五） 01-查询结果布局 表格和分页组件的使用
05-内容管理-查询结果布局分析：表格<!-- 表格容器 :data="tableData" [{date:'2018-10-10',name:'',address:''},...] 表格数据 --><el-table :data="tableData"> <!-- el-table-column 列组件--> ...原创 2020-02-14 23:20:54 · 204 阅读 · 0 评论 -
内容管理模块 (四) -vue插件封装 - 面包屑导航插件 并 注册成全局组件
04-内容管理-vue插件封装目的：封装一个插件，内部把components下所有组件，注册成全局组件。插件注册全局组件componnets/index.js 封装插件// 定义成一个插件// 规则：模块向外暴露一个对象，对象中选项install（安装），指向的是函数，函数传参Vue 。// 功能：函数内去实现 插件逻辑业务。import MyBread from '@/...原创 2020-02-13 02:35:55 · 490 阅读 · 0 评论 -
内容管理模块（三） -面包屑导航的组件封装 和 更换路由页面内容时， 默认插槽的具体应用
03-内容管理-面包屑组件封装目的：面包屑导航的主干部分进行组件封装，只在路由文件中进行更换插槽插入的内容封装组件：components/my-bread.vue<template> <el-breadcrumb separator-class="el-icon-arrow-right"> <el-breadcrumb-item :to="{ pa...原创 2020-02-13 01:59:56 · 462 阅读 · 0 评论 -
内容管理-vue插槽——默认插槽 & 备用内容 & 具名插槽 & 作用域插槽
内容管理-vue插槽https://cn.vuejs.org/v2/guide/components-slots.html#ad当你使用一个组件的时候，想额外插入不同的内容，使用插槽。默认插槽<!-- 当使用组件的时候 内容默认会插入slot标签内 --><slot></slot>备用内容<!-- 默认在插槽显示的...原创 2020-02-13 01:29:09 · 836 阅读 · 0 评论 -
内容管理模块（二） -激活导航菜单-回到首页 和 筛选条件布局-下拉菜单、单选框组、日期范围
01-内容管理-激活导航菜单路径：src/views/home/index.vue <!-- 导航菜单 --> <!-- default-active="/" 根据当路径来设置 this.$route.path --> <!-- this.$route 获取路由数据 this.$router 调用路由函数 --> <...原创 2020-02-13 00:10:02 · 259 阅读 · 0 评论