- 博客(39)
- 资源 (3)
- 收藏
- 关注
RSS订阅原创 修改element表格el-table展开expand的图标
1.element官方示例：2.实现的效果：未展开是加号边框，展开是减号边框3.实现的CSS代码：<style lang="scss" scoped>/* /deeep/样式穿透*/ /*1.取消原本展开的旋转动效*//deep/.el-table__expand-icon{ -webkit-transform: rotate(0deg); transform: rotate(0deg);} /*2.展开按钮未点击的样式是加号带边框*/ /deep/.el-tabl
2021-03-26 14:36:30
5052
1
原创 Postman测试json格式的post请求
Postman测试json格式的post请求1.请求方式选择post，输入接口地址2.请求头headers输入类型 Content-Type application/json3.请求体body中选择raw—>JSON输入请求内容4.点击send测试，返回结果
2021-01-13 10:52:55
1581
原创 vue-router实现原理以及相关API
vue-router 实现原理查看vue-router源码github链接vue-router 实例化时会初始化 this.history，不同 mode 对应不同的 historyconstructor (options: RouterOptions = {}) { this.mode = mode switch (mode) { case 'history': this.history = new HTML5History(this, opt
2020-11-05 10:59:50
376
原创 Vuex原理解析（简易版）
查看vuex源码github上vuex源码Vuex 的原理关键：使用 Vue 实例管理状态（放在vue响应式系统），dep通知watcher更新简化版代码解析<html> <head> <title>vuex 原理解析</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head>
2020-11-05 10:14:52
158
原创 小程序项目--电商优购day05
小程序项目--电商优购day05购物车页面效果业务逻辑购物车页面效果业务逻辑1.渲染购物⻋数据2.添加收货地址3.修改商品数量4.单选和全选功能接口1.获取购物车数据,本地存储实现2.调⽤微信的收货地址关键技术⼩程序 选择收货地址api⼩程序复选框组件1. wxml文件<!-- 收货地址 --><view class="revice_address_row"> <!-- 当收货地址不存在按钮显示 --> <view
2020-07-21 12:15:56
321
原创 js中Array数组常用的方法总结
js中Array数组常用的方法总结1.pushpush()方法，向数组末尾添加一个或或多个元素，返回新数组长度，改变原数组var ary = ['a','b','c'];var res = ary.push('d','e'); console.log(ary); // ["a", "b", "c", "d", "e"]console.log(res); // 52.poppop()方法，删除数组最后一个元素，并将被删除的元素作为返回值返回，改变原数组var ary = ['1','2
2020-07-20 12:35:05
312
原创 vue.js电商项目--美丽购物街day01首页制作
vue.js电商项目--美丽购物街day01首页效果如图划分目录结构vue.config.js配置文件别名App.vue文件router文件下的index.js首页效果如图下拉首页划分目录结构使用vue-cli3搭建脚手架vue.config.js配置文件别名vue-cli3没有vue.config.js,要自行新建此文件module.exports={ configureWebpack: { resolve: { alias: {
2020-07-18 20:47:46
864
1
原创 小程序项目--电商优购day04
小程序项目--电商优购day04商品详情⻚⾯业务逻辑接口商品详情⻚⾯效果业务逻辑1.渲染商品详情数据2.点击图⽚，调出图⽚画廊，进⾏预览3.点击收藏4.联系客服5.分享功能6.加⼊购物⻋接口获取详情数据接口...
2020-07-13 21:54:33
760
原创 小程序项目--电商优购day03
小程序项目--电商优购商品列表⻚⾯业务逻辑接口商品列表⻚⾯效果业务逻辑1.加载商品列表数据2.启⽤下拉⻚⾯功能1.⻚⾯的json⽂件中开启设置 enablePullDownRefresh:true enablePullDownRefresh:true2.⻚⾯的js中，绑定事件 onPullDownRefresh3.启⽤上拉⻚⾯功能 onReachBottom onReachBottom ⻚⾯触底事件4.加载下⼀⻚功能接口商品列表搜索...
2020-07-12 16:40:25
357
原创 小程序项目--电商优购day02
小程序项目--电商优购分类页面业务逻辑接口关键技术代码分类页面效果业务逻辑1.加载分类⻚⾯数据2.点击左侧菜单，右侧数据动态渲染接口https://api-hmugo-web.itheima.net/api/public/v1/categories返回示例{ "message": [ { "cat_id": 1, "cat_name": "大家电", "cat_pid": 0, "cat_level": 0, "c
2020-07-05 20:10:47
322
1
原创 小程序项目--电商优购day01
小程序项目–电商优购效果如图搭建目录结构搭建项目页面目录引⼊字体图标1.打开阿⾥巴巴字体图标⽹站2.选择的图标3.添加⾄项⽬4.下载到本地5.将样式⽂件由.css修改为.wxss6.⼩程序中引⼊首页效果业务逻辑1.使⽤tabbar实现底部导航功能2.使⽤⾃定义组件的⽅式实现头部搜索框3.加载轮播图数据4.加载导航数据5.加载楼层数据接口1.获取⾸⻚轮播图数据https://api.zbztb.cn/api/public/v1/home/swip
2020-07-04 17:24:09
1312
4
原创 Vue实战项目day07--电商后台管理系统(Element-ui)
Vue实战项目day07--电商后台管理系统项目优化添加进度条根据报错修改代码执行build生成打包报告修改webpack的默认配置加载外部CDN定制首页内容路由懒加载项目上线开启gzip压缩配置https服务今日目标1.完成项目优化2.完成项目上线项目优化实现步骤：A.生成打包报告，根据报告优化项目B.第三方库启用CDNC.Element-UI组件按需加载D.路由懒加载E.首页内容定制添加进度条给项目添加进度条效果，先打开项目控制台，打开依赖，安装nprogress打开main.
2020-07-03 12:42:07
421
2
原创 Vue实战项目day06--电商后台管理系统(Element-ui)
Vue实战项目day06--电商后台管理系统添加商品完成图片上传使用富文本插件订单列表制作省市区县联动制作物流进度对话框数据统计今日目标1.完成商品添加2.完成订单列表3.完成数据统计展示添加商品完成图片上传使用upload组件完成图片上传在element.js中引入upload组件，并注册因为upload组件进行图片上传的时候并不是使用axios发送请求所以，我们需要手动为上传图片的请求添加token，即为upload组件添加headers属性//在页面中添加upload组件，并设置
2020-07-01 15:56:12
399
原创 Vue实战项目day05--电商后台管理系统(Element-ui)
Vue实战项目day05--电商后台管理系统添加商品列表添加商品今日目标1.制作商品列表页面2.制作商品添加页面创建子分支git checkout -b goods_list推送至码云 git push -u origin goods_list添加商品列表A.制作商品列表基本结构添加子级路由组件以及对应的规则,并设置组件的基本机构打开router.js,添加下面的代码import GoodList from './components/goods/List.vue'path: '
2020-06-30 18:20:51
419
原创 Vue实战项目day04--电商后台管理系统(Element-ui)
Vue实战项目day04--电商后台管理系统商品分类创建子级路由添加组件基本布局请求分类数据使用插件展示数据完成分页功能完成添加分类参数管理模块添加子级组件完成组件基本布局完成级联选择框展示参数添加参数编辑参数删除参数今日目标1.完成商品分类2.完成参数管理商品分类A.新建分支goods_cate新建分支goods_cate并推送到码云git checkout -b goods_categit push -u origin goods_cateB.创建子级路由创建categories
2020-06-29 20:25:57
208
原创 Vue实战项目day03--电商后台管理系统(Element-ui)
Vue实战项目day03--电商后台管理系统今日目标修改用户信息删除用户推送代码权限列表角色列表分配角色将代码推送到码云今日目标1.修改用户,删除用户2.推送代码到码云3.权限列表4.角色列表5.分配角色修改用户信息A.为用户列表中的修改按钮绑定点击事件B.在页面中添加修改用户对话框，并修改对话框的属性C.根据id查询需要修改的用户数据//展示编辑用户的对话框async showEditDialog(id) { //发送请求根据id获取用户信息 const { d
2020-06-24 16:42:54
510
原创 Vue实战项目day02--电商后台管理系统(Element-ui)
Vue实战项目day02--电商后台管理系统Element-ui今日目标后台首页基本布局axios请求拦截器设置激活子菜单样式在后台首页添加子级路由完成用户列表主体区域绘制用户列表基本结构请求用户列表数据将用户列表数据展示实现用户列表分页实现更新用户状态实现搜索功能实现添加用户今日目标1.实现后台首页的基本布局2.实现左侧菜单栏3.实现用户列表展示4.实现添加用户效果如图后台首页基本布局打开Home.vue组件，进行布局：<el-container class="home-cont
2020-06-20 21:59:29
604
原创 移动web开发——flex布局
1.0传统布局和flex布局对比1.1传统布局兼容性好布局繁琐局限性，不能再移动端很好的布局1.2 flex布局操作方便，布局极其简单，移动端使用比较广泛pc端浏览器支持情况比较差IE11或更低版本不支持flex或仅支持部分1.3 建议如果是pc端页面布局，还是采用传统方式如果是移动端或者是不考虑兼容的pc则采用flex2.0 flex布局原理flex 是 flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 f
2020-06-16 19:49:30
215
原创 Vue实战项目day01--电商后台管理系统(Element-ui)
Vue实战项目day01--电商后台管理系统电商业务概述项目初始化码云相关操作电商业务概述客户使用的业务服务：PC端，小程序，移动web，移动app管理员使用的业务服务：PC后台管理端。PC后台管理端的功能：管理用户账号（登录，退出，用户管理，权限管理），商品管理（商品分类，分类参数，商品信息，订单），数据统计电商后台管理系统采用前后端分离的开发模式此前端项目是基于Vue的SPA（单页应用程序）项目前端技术栈:Vue,Vue-Router,Element-UI,Axios,Echarts后端
2020-06-15 17:12:20
1820
1
原创 项目上线去除所有的console.log
项目上线去除所有的console.log步骤很简单1.下载依赖npm install babel-plugin-transform-remove-console --save-dev或者在Vue GUI中搜索下载开发依赖2.在babel.config.js中plugins添加这句话 'transform-remove-console' ...
2020-06-12 21:50:50
2293
原创 element-ui电商管理系统--添加商品内容(使用富文本编辑器)
添加商品内容(使用富文本编辑器)实现效果如图使用步骤:1.安装依赖 GUI中查找 vue-quill-editor或者使用npm下载npm install vue-quill-editor --save# oryarn add vue-quill-editorgithub上面详细使用方法2.在main.js入口文件导入import Vue from 'vue'// 导入富文本编辑器import VueQuillEditor from 'vue-quill-editor'//
2020-06-12 12:00:00
1127
原创 新版element-ui级联选择器高度溢出问题
做项目遇到的坑解决办法:在全局css样式里面加以下代码.el-cascader-menu { height: 300px; }重新设置一下高度OK解决
2020-06-09 19:10:25
1008
2
原创 Vue--ES6模块化和webpack打包
ES6模块化和webpack打包模块化的分类在NodeJS中安装babel设置默认导入/导出设置按需导入/导出webpack的概念webpack的基本使用安装webpack设置webpack的打包入口/出口设置webpack的自动打包配置html-webpack-pluginwebpack中的加载器Vue单文件组件在webpack中使用vue使用webpack打包发布项目Vue脚手架模块化的分类A.浏览器端的模块化1).AMD(Asynchronous Module Definition,异步模块定义
2020-06-05 22:56:47
658
原创 Vue基础day05--路由
day05--路由路由的概念Vue Router路由的基本使用路由重定向嵌套路由路由规则传参方式命名路由编程式导航路由的概念路由的本质就是一种对应关系，比如说我们在url地址中输入我们要访问的url地址之后，浏览器要去请求这个url地址对应的资源。那么url地址和真实的资源之间就有一种对应的关系，就是路由。路由分为前端路由和后端路由1).后端路由是由服务器端进行实现，并完成资源的分发2).前端路由是依靠hash值(锚链接)的变化进行实现后端路由性能相对前端路由来说较低，所以，我们接下来主要学习
2020-06-04 17:41:40
201
原创 Vue基础day04--接口调用方式
day04--接口调用方式接口调用方式异步promisePromise 基本API实例方法.then().catch().finally().all().race()fetchaxiosasync 和 await接口调用方式原生ajax基于jQuery的ajaxfetchaxios异步JavaScript的执行环境是「单线程」所谓单线程，是指JS引擎中负责解释和执行JavaScript代码的线程只有一个，也就是一次只能完成一项任务，这个任务执行完后才能执行下一个，它会「阻塞」其他任务。
2020-06-03 18:34:46
235
原创 Vue基础day02--常用特性
Vue-day02表单基本操作表单修饰符自定义指令计算属性 computed侦听器 watch过滤器生命周期数组变异方法图书管理案例常用特性应用场景表单基本操作获取单选框中的值通过v-model<!-- 1、 两个单选框需要同时通过v-model 双向绑定 一个值 2、 每一个单选框必须要有value属性 且value 值不能一样 3、 当某一个单选框选中的时候 v-model 会将当前的 value值 改变 data 中的 数据 gender 的
2020-05-30 19:59:25
248
原创 Vue基础day01--模板语法
一.什么是Vue?Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合vue.js是前端的主流框架之一,和Angular,React一起,成为前端三大主流框架!MVVM是什么?MVC 是后端的分层开发概念； MVVM是前端视图层的概念，主要关注于 视图层分离，也就是说：MVVM把前端的视图层，分为了 三部分 Model, View , VM ViewModelm model数据
2020-05-29 15:21:56
276
原创 jquery之电梯导航栏案例
$(function() { // 当我们点击了小li 此时不需要执行 页面滚动事件里面的 li 的背景选择 添加 current // 节流阀 互斥锁 var flag = true; // 1.显示隐藏电梯导航 var toolTop = $(".recommend").offset().top; toggleTool(); function toggleTool() { if ($(document).scrollTop()
2020-05-26 20:20:21
908
原创 模板引擎语法(art-template)
一.模板语法art-template同时支持两种模板语法：标准语法和原始语法。标准语法可以让模板更容易读写，原始语法具有强大的逻辑处理能力。1.输出标准语法： {{ 数据 }}原始语法：<%=数据 %><!-- 标准语法 --> <h2>{{value}}</h2> <h2>{{a ? b : c}}</h2> <h2>{{a + b}}</h2> <!-- 原始语法 -->
2020-05-25 19:53:55
320
原创 AJAX基础之$.ajax()
一. $.ajax()方法概述 作用：发送Ajax请求$.ajax({ type: 'get', //请求方式 url: 'http://www.example.com',//请求地址 data: { name: 'zhangsan', age: '20' },//或{data:'name=zhangsan&age=20'} //请求参数 contentType: 'application/x-www-form-urlencoded',//参数格式 也可
2020-05-25 17:39:05
749
原创 案例:使用jsonp获取腾讯天气信息
案例:使用jsonp获取腾讯天气信息<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>使用jsonp获取腾讯天气信息</title> <link rel="stylesheet" href="/assets/bootstrap/dist/css/bootstrap.min.css"> <style
2020-05-24 18:37:17
381
原创 AJAX基础之FormDate对象
一.FormData 对象的作用1.模拟HTML表单，相当于将HTML表单映射成表单对象，自动将表单对象中的数据拼接成请求参数的格式。2.异步上传二进制文件<!-- 创建普通的html表单 --> <form id="form"> <input type="text" name="username"> <input type="password" name="password"> <input
2020-05-24 18:36:00
502
原创 案例:搜索框内容自动提示(ajax)
案例:搜索框内容自动提示(ajax)步骤:获取搜索框并为其添加用户输入事件获取用户输入的关键字向服务器端发送请求并携带关键字作为请求参数将响应数据显示在搜索框底部<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>搜索框输入文字自动提示</title> <link rel="stylesheet" hre
2020-05-24 18:18:11
897
1
原创 案例:省市区三级联动(ajax)
案例:省市区三级联动(ajax)步骤通过接口获取省份信息使用JavaScript获取到省市区下拉框元素将服务器端返回的省份信息显示在下拉框中为下拉框元素添加表单值改变事件（onchange）当用户选择省份时，根据省份id获取城市信息当用户选择城市时，根据城市id获取县城信息<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>搜
2020-05-24 18:16:15
345
原创 案例:验证邮箱地址唯一性(ajax)
案例:验证邮箱地址唯一性(ajax)一.步骤获取文本框并为其添加离开焦点事件离开焦点时，检测用户输入的邮箱地址是否符合规则如果不符合规则，阻止程序向下执行并给出提示信息向服务器端发送请求，检测邮箱地址是否被别人注册根据服务器端返回值决定客户端显示何种提示信息<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>验证邮箱地址是否已经
2020-05-24 18:13:53
645
原创 模板引擎使用
模板引擎概述作用:使用模板引擎提供的模板语法,可以将数据和HTML拼接起来官方地址： https://aui.github.io/art-template/zh-cn/index.html使用步骤<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>使用jsonp获取腾讯天气信息</title> <link rel
2020-05-24 18:11:12
132
原创 原生JS简单封装AJAX
1.## 原生js封装简单的Ajax函数function ajax (options) { // 默认值 var defaults = { type: 'get', url: '', async: true, data: {}, header: { 'Content-Type': 'application/x-www-form-urlencoded' }, success: function () {}, error: function () {} } //
2020-05-24 17:59:24
359
原创 JavaScript之E6语法
一.ES6相关概念1.什么是ES6ES6， 全称 ECMAScript 6.0 ，是 JavaScript 的下一个版本标准，2015.06 发版。ES6 主要是为了解决 ES5 的先天不足，比如 JavaScript 里并没有类的概念，ECMAScript 6 目前基本成为业界标准，它的普及速度比 ES5 要快很多，主要原因是现代浏览器对 ES6 的支持相当迅速，尤其是 Chrome 和 Firefox 浏览器，已经支持 ES6 中绝大多数的特性。二.ES6新增语法1.let(ES6中新增了用
2020-05-24 17:54:02
1527
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人