- 博客(40)
- 收藏
- 关注
RSS订阅原创 添加商品思路
对整体表单进行预检验对表单每项数据进行处理 例如：商品分类转换在字符串列表，商品参数attrs包括动态和表态参数处理对addForm对象进行深拷贝深拷贝与浅拷贝的区别？可以简单理解：1.javaScrip基本类型赋值都属于深拷贝，也就是说改变一个变量的值，不会影响另一个变量的值2. javaScript对象拷贝：拷贝的是地址而不是里面的值 1. 如何实现对象的深拷贝 第一种：JSON.parse(JSON.stringify(要转换的对象)) 第二种：用.
2021-05-06 20:48:10
151
原创 富文本编辑器
Vue-Quill-Editor地址：https://www.npmjs.com/package/vue-quill-editor使用步骤：1.安装npm install vue-quill-editor --save2.引入//引入富文本编辑器import VueQuillEditor from ‘vue-quill-editor’//引入vue-quill-editor相关样式import ‘quill/dist/quill.core.css’import ‘quill/dist/q
2021-05-06 20:45:01
109
原创 显示图片预览
项目上线后，才能得到真实的线上图片地址，本地不能演示核心思路：通过上传成功后，将url赋值给data中的一个变量，再将变量传给对话框中img src=“上传后返回的url”
2021-05-06 20:42:58
134
原创 配置文件上传两个注意事项
1.action属性必须是绝对路径2.手动配置请求头headers完整代码：<el-upload action="http://www.ysqorz.top:8888/api/private/v1/upload" :on-preview="handlePreview" :on-remove="handleRemove" :on-success="handleSuccess" :headers="headersObj" list-type="picture"<el-
2021-05-06 20:42:25
124
原创 添加商品分类功能
思路：1.如何获取三个参数：（1）cat_name:对el-input框双向绑定获取（2）cat_pid:通过查找级联框最后一个数组元素获取this.addForm.cat_pid=this.currentCateValue[this.currentCateValue.length-1]（3）cat_level：通过级联框数据length值获取this.addForm.cat_level=this.currentCateValue.length;2.点击确定按钮调用添加分类接口const r
2021-04-28 21:26:37
508
原创 解决点击某个级联项，不折叠问题（dropDownVisibl设置为false）
template: <el-cascader ref="cascaderRef"@change="handleChange"></el-cascader>JS://级联选择器选择完改变时触发 async handleChange() { this.$refs.cascaderRef.dropDownVisible=false },
2021-04-28 21:25:54
427
原创 隐藏cascader中的单选框
在带有scope的style标签外设置一个新的不带scope的style标签在不带scope的style中写下面代码.el-cascader-panel .el-radio { position: absolute; width:100%; height:100%; // border: 1px solid #f00; right:-10px;}.el-cascader-panel .el-radio .el-radio__input { visibility: hidde
2021-04-28 21:25:16
406
原创 vue-table-with-tree-grid使用及插件参数使用说明
1.安装vue-table-with-tree-gridnpm i vue-table-with-tree-grid -S2.在main.js中引入import ZkTable from 'vue-table-with-tree-grid'3.在main.js中引入注册全局组件Vue.component('tree-table', ZkTable) <!-- vue-table-with-tree-grid插件参数使用说明： 1.data:指定数据源
2021-04-27 21:46:37
282
原创 分配权限思路
1.打开权限对话框2.调权限接口展示到树形结构中3.在树形结构中沟选已分配的权限 【重点，也是难点】如何获取当前角色所拥有权限的id1.递归实现： getCheckedRightsIds(node,arr) { //当前node没有children,意味着node没有子级，则将当前node的id保存到数组中 if(!node.children) { return arr.push(node.id) } //如果
2021-04-26 20:10:46
354
原创 封装过滤器并在main.js中引用
第一步：单独创建一个filters/index.js，在里面写入下面代码：import moment from ‘moment’//创建时间处理过滤器export function dateTime(v) {return moment(v*1000).format(‘YYYY年MM月DD日 HH时mm分ss秒’)}//处理权限等级的过滤器export function ranks (v) {let result = ‘’;switch (v) {case ‘0’: result = ‘一
2021-04-25 21:44:06
324
原创 过滤器将数字或字符串转换为文字
Vue.filter(‘ranks’, function (v) {let result = ‘’;switch (v) {case ‘0’: result = ‘一级’;break;case ‘1’: result = ‘二级’;break;case ‘2’: result = ‘三级’; break;default: result = ‘没有要满足的级别’;}return result})...
2021-04-25 21:41:08
220
原创 时间戳过滤器
Vue过滤器主要用于将数据转换成能最终在页面上显示的形式（数据格式转换）全局过滤器创建格式：Vue.filter('过滤器名', function (v) { })应用过滤器:{{ create_time | dateTime }}moment时间使用第一步：安装moment npm i moment第二步：引入 import moment from 'moment'第三步：在vue过滤器中使用moment //创建时间处理过滤器 Vue.filter.
2021-04-25 21:40:07
191
原创 后台分配用户角色
实现思路第一步：触发分配角色按钮打开用户角色对话框 //点击按钮打开分配用户角色对话框 async setUserRoles(role) { //显示对话框 this.isSetRoleUser = true; }第二步：绘制对话框的布局并调取角色列表接口渲染下拉框中角色列表 //点击按钮打开分配用户角色对话框 async setUserRoles(role) { console.log(role); //当前角
2021-04-23 21:52:16
406
原创 后台更改用户状态
//触发改变状态的回调async changeStatus(row) {let {id,mg_state}=row// console.log(‘当前用户信息：’,row)//调用修改用户状态的接口const res=await modifyUserStatusAPI(id,mg_state)},
2021-04-23 21:51:36
241
原创 后台删除用户
//打开删除确认对话框async deleteUser(id) {console.log(id)const res= await this.$confirm(‘此操作将永久删除该用户, 是否继续?’, ‘提示’, {confirmButtonText: ‘确定’,cancelButtonText: ‘取消’,type: ‘warning’}).catch(error=>error) if(res!== 'confirm') { return this.$message({
2021-04-23 21:51:02
216
原创 编辑用户
编辑用户与添加用户的思路几乎一致，只是需要传递当前要编辑用户，绑定当前用户，代码如下：编辑用户对话框：html部分：JS部分：//确认修改用户EditUserConfirm() {//整体表单的验证this.$refs.EditUserDia.validate(async valid=>{if(!valid) return; //调后台接口，将新用户添加到向后台 const res=await EditUserAPI(this.currrentUserId,this.
2021-04-22 20:42:30
153
原创 添加用户
添加用户html代码： <!-- 添加用户对话框 --> <el-dialog title="添加用户" :visible.sync="isAddUser"> <el-form :model="addUserDiaData" :rules="addUserDiaRules" ref="addUserDia"> <el-form-item label="用户名" label-width="120px" prop="username">
2021-04-22 20:41:58
109
原创 搜索的方法
监听边输入边搜索：@input敲回车搜索 @keyup.enter.native=""点击按钮搜索 @click搜索性能优化：主要利用防抖和节流防抖和节流：主要目的是为了降低高频事件触发，减少dom操作或请求次数，提升性能通常高频事件：onscroll,onresize,keyup/keydown,mousemove 防抖：在固定时间内，如果有事件触发，则会再延长固定时间，直到固定时间内没有触发事件再做处理 例如：电梯和屏保 节流：指定一个固定时间，无论是事件触发与，只要到了固定时间，都会触发
2021-04-22 20:40:57
79
原创 页面鉴权
页面鉴权：1.通常需求鉴权页面通过路由设置meta2.路由守卫：拦截要跳转的路由有没有meta为auth标识思路：跳转到登录页时，将要访问的页面地址当作参数传给登录页，登录成功后，再跳回原页面代码如下：//路由守卫router.beforeEach((to,from,next) => { console.log('to:', to) //第一步：是否需要鉴权 let flag = to.matched.some(item => item.meta.auth) .
2021-04-21 18:57:21
688
原创 封装项目接口
import request from './request'//封装登录接口export function login(data) { return request({ url: '/login', method: 'POST', data })}
2021-04-21 18:56:06
65
原创 封装环境地址
const env = { //线上环境 prod: { baseURL:'https://www.liulongbin.top:8888' }, //开发环境 dev: { baseURL:'https://www.dev.top:8888/' }, //测试环境 test: { baseURL:'https://www.test.top:8888/' }}export defa
2021-04-21 18:54:37
103
原创 封装axios
//引入axiosimport axios from 'axios'//引入Elment UI 组件import { Message} from 'element-ui'//引入env.jsimport baseURL from './env'//封装axios请求//创建axios实例const service = axios.create({ //axios请求基地址 baseURL: `${baseURL.prod.baseURL}/api/private/v1`,
2021-04-21 18:54:04
92
原创 后台登录--重置按钮效果及登录后退出思路
1.1 表单重置第一步：给表单添加ref <el-form ref="loginForm"></el-form> 第二步：给重置按钮添加事件，调用重置方法 //重置表单 resetForm() { this.$refs.loginForm.resetFields() }
2021-04-21 18:53:23
293
原创 vue概括
1.Vue全家桶vue.js,vue-router,vuex,axios,ES6,Sass/less/Stylus,…vue.js:computed,过滤器，自定义指令，绑事件(@事件名)，绑属性(:属性名)，组件通讯（3种）…vue-router:路由传参，路由守卫，嵌套路由，动态路由，路由懒加载…vuex:集中管理组件状态,5个要素：state,mutation,action,modules,gettersaxios:数据请求官网文档：https://github.com
2021-04-20 21:52:16
109
原创 javaScript数据类型
基本类型：number,string,boolean,null,undefined,symbol引用类型：也称复杂数据类型 Object,function检测基本数据类型：typeof 变量名特殊：typeof null 返回 Objecttypeof 函数名 返回function如何检测是否是一个数组：1. Array.isArray(数组名) 2. Object.prototype.toString.call(要检测的目标) function isArray(target
2021-04-16 19:43:49
41
原创 javaScript异步
同步与异步同步：符合咱们人的认知习惯，一行一行往下按照代码顺序执行，如果前面代码没有执行完，不会执行缺点：容易导致代码阻塞异步：代码不会按照顺序执行，如果前面代码没有执行完，也会执行后面代码缺点：阅读代码有一定成本，包括调试异步的应用场景数据请求（ajax）DOM操作:例如：点击事件定时器操作：setTimeout,setInterval…管理异步回调函数例如：$.ajax({ .... success:function(res) { $..
2021-04-15 21:36:04
45
原创 new 函数，访问原型上方法
//定义一个Foo函数function Foo() { getName = function () { alert(1) }; return this;}Foo.getName = function () { alert(2) };Foo.prototype.getName = function () { alert(3) };//函数表达式var getName = function () { alert(4) }//函数声明function getName() { alert(
2021-04-15 21:34:06
127
原创 函数的定义方式
函数声明:function 函数名() { //...}特点：无论在函数定义前，还是函数定义后调用，都能执行为什么都能执行？？？因为函数声明方式：函数提升2.函数表达式var 变量名=function() { //....}变量名()特点：只能在函数定义后调用，才能执行...
2021-04-15 21:33:24
63
原创 小程序的登录授权
登录授权流程项目中的实现思路点击进入店铺--进入首页--获取到token,uid 如何获取token 第一步：通过wx.login得到code,调用接口获取登录凭证（code）。通过凭证进而换取用户登录态信息 第二步：通过调用公司后台接口（自动注册/登录接口）获取腾讯用户的匿名信息 //引入接口const {authorize}=require('../../http/api') //登录/注册 goLogin() { wx.login({ succ.
2021-04-14 21:43:15
235
1
原创 上拉加载
产品角度：提升用户体验技术角度：后台接口支持分页返台接口：{page:当前页码，pageSize:每页显示几条,start:起始偏移量}实现方式:1. 使用onReachBottom实现 //触底生命周期 onReachBottom() { console.log('onReachBottom'); if(!this.data.flag) { this.data.page++; this.getGoods() } } //加载商..
2021-04-13 20:05:23
51
原创 小程序模板复用
模板的适应场景适应页面的展示，没有太复杂的逻辑交互的页面，可以存成模板，方便其他页面复用通常模板页面：只有wxml,css，触发的逻辑要在父级页面来实现如何定义使用模板第一步：定义模板 定义步骤同创建普通页面一样 <template name="定义的模板名称"> 这里放普通的wxml标签 </template>第二步：使用模板 在需要的页面中引入： <import src="指定要引入的模板路径" .
2021-04-13 20:04:18
159
原创 小程序样式隔离
1.通过在组件的options中配置Component({ options: { styleIsolation: '隔离选项' }})其中【隔离选项】值包括：isolated 表示启用样式隔离，在自定义组件内外，使用 class 指定的样式将不会相互影响（默认值）；apply-shared 父级样式会穿透影响组件样式，但组件样式不会影响其他页面shared：互相影响2.外部样式类1.在app.wxss中定义一个class样式，例如： .box { backgr
2021-04-13 20:03:37
1186
原创 小程序组件slot
slot:用于在不破坏组件的情况下，给组件嵌入结构的一种方式例如：dialog组件：<view class="dialog_box" wx:if="{{ isShow }}"> <slot name="a"></slot> </view>cate页面：<Dialog-box> <view slot="b"> <text>安全</text>
2021-04-13 20:01:56
119
原创 小程序组件复用
组件是什么组件：具有完整功能（html-视图,css-样式,js-逻辑），并且独立运行的模块插件：通常是为了完成某项具体的业务功能而开发的js文件 例如：swiper.js,弹框.js，。。。。类库：library,是提供了为了完成项目的工具方法的集合，跟具体的业务无关！ 例如：jQuery,lodash.js框架:framework,分 是为了快速完成项目搭建的基础。框架分：UI 框架和javaScript框架 UI框架：boostStrap,Element UI,vant UI,ivi.
2021-04-12 19:58:05
165
原创 富文本解析方法
1.利用小程序内置的组件来解决使用rieh-text属性来解析富文本代码如下：<rich-text nodes="{{这里是富文本}}"> </rich-text>2.利用第三方的方法：使用wxparse来解决第一步：下载wxparse第二步：复制wxparse文件夹第三步：在需要渲染的wxml页面的js中引入wxpare模式第四步：在全局app。wxss中引入wxparse的样块第五步：数据绑定wxparse。wxparse(bindName,typ
2021-04-09 19:51:25
1277
原创 微信小程序数据请求
微信小程序的数据请求一、常用的数据请求方式JS原生实现第一种： let xhr=new XMLHttpRequest() xhr.open() xhr.send() 第二种：fetch() 支持promisefetch('接口地址') .then(function(response) { return response.json(); }) .then(function(myJson) { console.log(myJson); }) .cat
2021-04-08 20:40:38
761
原创 深入学习微信小程序语法
一、小程序布局与普通web开发差异小程序实现响应式单位：rpx小程序的设计稿通常是按照iphone6 宽度为750的尺寸设计的.logo {width:80rpx,height:80rpx}样式导入@import "要引入的外部样式文件"意义：大型项目开发中，为了方便样式复用例如：@import "/public/css/style.wxss";行内样式 <view style="color: {{index===1? 'red' : ''}}"</view
2021-04-07 19:02:06
295
原创 微信小程序初步学习
一、微信小程序是什么微信小程序是一种不需要下载安装即可使用的应用微信小是2017年1月9日，张小龙在2017微信公开课Pro上发布的微信小程序正式上线。二、微信小程序商业价值依托微信，有强大广泛的用户基础，推广方便不用安装，即点即用，不用关闭，不占手机内存空间三、微信小程序和普通H5的区别微信小程序没有DOM,BOM的API，只能使用EcmaScript核心 部分（数组，字符串方法，for,if…）微信小程序js逻辑和视图处理是分开独立运行的，性能比较好，而普通H5是单线程的，容易
2021-04-06 20:49:56
83
原创 JavaScript简单入门
一、javaScriptjavaScript:是一种单线程的可以运行在浏览器或服务端的弱类型脚本语言单线程：进程：完成一项任务所经历的过程线程：线程进进程范围要小，一个进程可以包括多个线程弱类型：变量的类型由赋值的类型决定脚本语言：不会提前编译，是在运行时边解释边执行的语言javaScript发展史javaScript是1995年诞生的javaScript于1997发布javaScript1.0标准版本(TC29委员会-ECMA262)javaScript于1998发布j
2021-04-04 09:42:00
67
原创 git
git的用法git是一个分布式的版本控制工具分布式：在网络互不影响，独立操作例如： git集中式：有一个中心服务器来连接这些设备例如：SVNgit的使用方法：安装git客服端（windows，mac…）https://gitforwindows.org/git常用命令初始化git：git init查看当前git文件状态添加文件到暂存区： git add 文件名1提交到本地仓库：git commit -m ‘版本说明’添加可忽略文件： .g
2021-04-01 20:26:40
62
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人