- 博客(15)
- 收藏
- 关注
RSS订阅转载 django channels
django channels 是django支持websocket的一个模块。12.1 在settings中添加配置INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.
2022-06-16 17:50:43
1421
1
原创 日期组件使用Calendar
Calendar.js文件如下function Calendar(beginYear, endYear, language, patternDelimiter, date2StringPattern, string2DatePattern) { this.beginYear = beginYear || 1990; this.endYear = endYear || 2020; this.language = language || 0; this.patternDe.
2022-05-31 15:24:56
433
原创 vue项目菜单激活
目的：动态激活左侧菜单大致步骤：添加个人中心路由地址，设置精准匹配类名 添加我的订单路由与组件router-link-active 当你的路由路径包含 router-link组件的to属性值，当前组件会加上它router-link-exact-active 当你的路由路径完全和你的router-link组件的to属性值一致，当前组件会加上它注意：vue3.0 router-link-active 加不上，路由路径包含 且 需要又路由嵌套关系。例如：/member/...
2022-05-31 15:10:52
554
原创 规格组件-SKU&SPU
官方话术：SPU（Standard Product Unit）：标准化产品单元。是商品信息聚合的最小单位，是一组可复用、易检索的标准化信息的集合，该集合描述了一个产品的特性。通俗点讲，属性值、特性相同的商品就可以称为一个SPU。 SKU（Stock Keeping Unit）库存量单位，即库存进出计量的单位， 可以是以件、盒、托盘等为单位。SKU是物理上不可分割的最小存货单元。在使用时要根据不同业态，不同管理模式来处理。画图理解：总结一下：spu代表一个商品，拥有很多相同的属性。 sk
2022-05-31 15:04:54
910
1
原创 数据无限加载
目的：实现结果区域商品展示。大致步骤：完成结果区域商品布局 完成 shop-infinite-loading组件封装 使用 shop-infinite-loading完成数据加载和渲染落地代码：src/views/category/sub.vue基础布局<template> <div class='sub-category'> <div class="container"> <!-- 面包屑 --> ...
2022-05-31 15:00:39
118
原创 封装面包屑组件
参考element-ui的面包屑组件：大致步骤：使用插槽和封装选项组件完成面包屑组件基本功能，但是最后一项多一个图标。 学习 render 选项，h 函数 的基本使用。 通过 render 渲染，h 函数封装面包屑功能。落的代码：我们需要两个组件，xtx-bread和xtx-bread-item才能完成动态展示。定义单项面包屑组件src/components/library/shop-bread-item.vue<template> <div cl...
2022-05-31 14:56:33
792
原创 图片懒加载
目的：当图片进入可视区域内去加载图片，且处理加载失败，封装成指令。介绍一个webAPI：IntersectionObserver(opens new window)// 创建观察对象实例const observer = new IntersectionObserver(callback[, options])// callback 被观察dom进入可视区离开可视区都会触发// - 两个回调参数 entries , observer// - entries 被观察的元素信息对象的数组 ..
2022-05-31 14:49:46
48
原创 组件数据懒加载
目的：实现当组件进入可视区域在加载数据。我们可以使用@vueuse/core中的useIntersectionObserver来实现监听进入可视区域行为，但是必须配合vue3.0的组合API的方式才能实现。大致步骤：理解useIntersectionObserver的使用，各个参数的含义 改造 home-new 组件成为数据懒加载，掌握useIntersectionObserver函数的用法 封装useLazyData函数，作为数据懒加载公用函数 把home-n...
2022-05-31 14:47:07
214
原创 首页主体-左侧分类-骨架效果
目的：为了在加载的过程中等待效果更好，封装一个骨架屏组件。大致步骤：需要一个组件，做占位使用。这个占位组件有个专业术语：骨架屏组件。 暴露一些属性：高，宽，背景，是否有闪动画。 这是一个公用组件，需要全局注册，将来这样的组件建议再vue插件中定义。 使用组件完成左侧分类骨架效果。落的代码：封装组件：src/components/library/shop-skeleton.vue<template> <div class="shop-skeleton" .
2022-05-31 14:42:45
92
原创 样式重置与公用
目的：准备网站所需的重置样式代码，以及一些公用样式代码。重置样式执行npm i normalize.css安装重置样式的包，然后在main.js导入normalize.css即可。import { createApp } from 'vue'import App from './App.vue'import router from './router'import store from './store'+import 'normalize.css'createA...
2022-05-31 14:39:58
186
原创 less的自动化导入
1）准备要用的变量和混入代码变量src/assets/styles/variables.less// 主题@xtxColor:#27BA9B;// 辅助@helpColor:#E26237;// 成功@sucColor:#1DC779;// 警告@warnColor:#FFB302;// 价格@priceColor:#CF4444;混入src/assets/styles/mixins.less// 鼠标经过上移阴影动画.hoverShadow () ...
2022-05-31 14:33:13
162
原创 CSS布局圣杯布局和双飞翼布局以及使用Flex实现圣杯布局
圣杯布局&双飞翼布局所谓圣杯布局和双飞翼布局其实解决的问题是相同的，都是解决左右两栏固定宽度，中间部分自适应，其中某部分内容比其他内容高的时候，保证三者元素等高。他俩的区别就是：圣杯用padding。双飞翼用在main外层多加了一个div然后改用margin。圣杯布局以下面html为例：<body> <div class="content"> <div class="main">main</div>
2022-05-30 18:08:39
241
原创 组合API-reactive函数
定义响应式数据：reactive是一个函数，它可以定义一个复杂数据类型，成为响应式数据。 演示代码： <template> <div class="container"> <div>{{obj.name}}</div> <div>{{obj.age}}</div> <button @click="updateName">修改数据</button> </
2022-05-29 22:09:20
348
原创 组合API-生命周期
回顾vue2.x生命周期钩子函数：beforeCreate created beforeMount mounted beforeUpdate updated beforeDestroy destroyed 认识vue3.0生命周期钩子函数 setup创建实例前 onBeforeMount挂载DOM前 onMounted挂载DOM后 onBeforeUpdate更新组件前 onUpdated更新组件后 onBeforeUnmount卸载销毁前...
2022-05-29 22:04:03
40
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人