- 博客(38)
- 收藏
- 关注
RSS订阅原创 vue后台管理系统实践方案总结(一)
项目概述基本业务概述根据不同的应用场景，电商系统一般都提供了PC端、移动APP、移动Web、微信小程序等多种终端访问方式管理系统功能电商后台管理系统用于管理账号、商品分类、商品信息、订单、数据统计等业务功能开发模式电商后台管理系统整体采用前后端分离的开发模式，其中前后端项目基于Vue技术栈的SPA项目技术选型前端技术栈vuevue-routerElement-UIAxiosEcharts后端技术栈Node.jsExpressJwtMysqlSequelize项目部分效
2022-02-18 07:49:06
2092
2
原创 ECharts介绍
前面做项目时用到ECharts，今天特此整理一下，作为笔记，同时希望帮助更多人。首先简单介绍一下，ECharts是一个纯JavaScript图表库，底层依赖于轻量级的Canvas类库ZRender，基于BSD开原协议，是一款非常优秀的可视化前端框架。官网地址：http://echarts.baidu.com/1.首先在官网 选择合适的下载版本 http://echarts.baidu.com/download.html2.引入Echarts <script src="js/echa
2022-02-17 08:13:32
1260
原创 mvvm和mvc
mvvm和mvc概念：MVVM是 Model-View-ViewModel的缩写，分别对应着：数据，视图，视图模型。Model是我们应用中的数据模型，View是我们的UI视图层，通过ViewModle，可以把我们Modle中的数据映射到View视图上，同时，在View层修改了一些数据，也会反应更新我们的Modle。简单理解就是双向数据绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。以vue为例：view 对应 template，vm 对应 new Vue({
2022-02-14 16:34:12
176
原创 vue中Computed、Methods、Watch区别
一、computed 和 methodscomputed是计算属性，methods是方法，都可以实现对 data 中的数据加工后再输出。不同的是 computed 计算属性是基于它们的依赖进行缓存的。计算属性 computed 只有在它的相关依赖发生改变时才会重新求值。这就意味着只要data 中的数据 message 还没有发生改变，多次访问 reversedMessage（对message 进行加工的处理函数） 计算属性会立即返回之前的计算结果，而不必再次执行函数。而对于method ，只要发生重新渲
2022-02-14 16:29:34
236
原创 vue组件通信----非父子传值(兄弟传值)
非父子传参 （事件总线）假设你有两个Vue组件需要通信： A 和 B ，A组件按钮上面绑定了点击事件，发送一则消息，B组件接收。1. 初始化，全局创建$bus直接在项目中的 main.js 初始化 $bus :// main.jswindow.$bus=new Vue();注意，这种方式初始化一个 全局的事件总线 。2. 发送事件$bus.$emit("aMsg", '来自A页面的消息');<!-- A.vue --><template> <butt
2022-02-14 16:21:05
86
原创 vue组件通信----子传父(超级详细)
Vue传值简单描述父组件通过绑定自定义事件，接受子组件传递过来的参数子组件通过$emit触发父组件上的自定义事件，发送参数子传父具体实现步骤1.父组件通过$on监听事件，事件处理函数的参数则为接收的数据2.子组件通过$emit可以触发事件，3.第一个参数为要触发的事件，第二个事件为要传递的数据4.sync修饰符：对一个 prop 进行双向绑定自定义事件子组件需要以某种方式，例如点击事件的方法来触发一个自定义事件将所需要传递的值作为$emit的第二个参数，该值将作为实参传给响应
2022-02-09 19:52:38
282
原创 vue组件通信----父传子(超详细)
Vue传值（3种常用传值方法）1.父传子简单描述父组件是通过props属性给子组件通信的数据是单向流动 父—>子 （子组件中修改props数据，是无效的，会有一个红色警告）实现步骤1.子组件在props中创建一个属性，用于接收父组件传过来的值；2.父组件 引入子组件–>注册子组件–>引用子组件；3.在子组件标签中添加子组件props中创建的属性；4.将所要传递的值赋值给该属性。props接收的几种写法1.直接使用 props 以一维数组的方式接收props:
2022-02-09 19:21:20
43151
12
原创 vue的watch深度监听
Vue提供了一个watch方法去监听某些data内的数据变动，从而触发相应的操作，当需要在数据变化时执行异步或开销较大的操作时，watch方法是最有用的watch深度监听的正确打开方式1.借助deep: true深度监听watch: {obj: {// 数据变化时执行的逻辑代码handler(newName, oldName) {console.log(‘obj.a changed’);},// 开启深度监听deep: true}}watch监听对象，同时用deep: tru
2022-02-08 20:44:08
21535
原创 vuex使用
什么是vuex？ vuex是什么？ Vuex 是一个专为 Vue.js 应用程序开发中管理的一个模式。 通过创建一个集中的数据存储，方便程序中的所有组件进行访问 总结：Vuex就是状态管理工具，数据管理工具 传统Vue使用场景 思考： 传统vue是单向数据流。如果是兄弟组...
2022-02-08 19:56:07
166
原创 null和undefind的区别
相同点:在JavaScript中，null 和 undefined 几乎相等 在 if 语句中 null 和 undefined 都会转为false两者用相等运算符比较也是相等console.log(null==undefined); //true 因为两者都默认转换成了falseconsole.log(typeof undefined); //"undefined"console.log(typeof null); //"object"console.log(null=...
2022-02-08 19:54:32
145
原创 for-in和for-of的区别
for…in和for…of的区别：首先for…in取key，for…of取value从遍历数组角度来说，for…ini便利出来的是key,for…of便利出来的是value（即数组的值）var arr = [99,88,66,77];for(let i in arr){ console.log(i); //0,1,2,3}for(let i of arr){ consoel.log(i); //99,88,66,77}从便利字符串来说同数组一样。从便利对象角
2022-02-08 19:54:09
58
原创 vue生命周期(简单理解)
1.简单理解总共分为8个阶段。创建前/后，载入前/后，更新前/后，销毁前/后。创建前/后： 在beforeCreated阶段，vue实例的挂载元素$el和数据对象 data 都为undefined，还未初始化。在 created阶段，vue实例的数据对象data有了，$el还没有。载入前/后： 在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成
2022-02-08 19:47:19
1524
原创 js中操作数组的方法
javascript数组方法push()可以接收一个或者多个参数将参数追加到数组的尾部，返回添加后的数组长度原数组会发生改变。pop()从数组尾部删除一个元素返回这个被删除的元素，原数组发生改变。unshift()可以接受一个或者多个参数将参数放到数组的头部，返回添加后的数组长度shift()从数组头部删除一个元素，返回这个被删除的元素，原数组发生改变。slice()截取类 如果不传参数，会返回原数组；如果一个参数，从该参数表示的索引开始截取，直至数组结束，返回这个截取数组，原数组不变；
2022-02-07 16:48:36
166
原创 检测数据类几种方法
检测数据类型有四种方法typeof、instanceof、constructor、Object.prototype.toString.call()、jquery.type()typeofconsole.log( typeof 100, //"number" typeof 'abc', //"string" typeof false, //"boolean" typeof undefined, //"undefined" typeof null, //"objec
2022-02-07 16:45:21
600
原创 宏任务与微任务
首先什么宏任务和微任务宏任务：setTimeout , setInterval , Ajax , Dom 事件微任务：Promise ， async / await执行顺序：微任务要比宏任务要早（优先执行微任务）js：最先执行同步操作，微任务，宏任务，异步和同步的区别异步不会阻塞程序的执行，同步会阻塞程序的执行，前端使用异步的场景定时任务：setTimeout，setInverval网络请求：ajax请求，动态《img》加载事件绑定：//ajax请求代码示例console.
2022-02-07 16:38:44
435
原创 垃圾回收机制和内存泄漏问题
垃圾回收机制 浏览器的javascript具有自动垃圾回收机制也就是说执行环境会负责管理代码执行过程中的使用内存其原理时垃圾收集器会定期找出哪些不在继续使用的变量，然后释放其内存。但是这个过程不是实时的因为其开销较大并且GC时停止响应其他操作，所以垃圾回收器会按照固定的时间间隔周期...
2022-02-07 16:26:47
226
原创 vue组件通讯方式
1. props和$emit父组件向子组件传递数据是通过prop传递的，子组件传递数据给父组件是通过$emit触发事件来做到的。Vue.component('child',{ data(){ return { mymessage:this.message } }, template:` <div> &...
2022-02-07 16:13:43
77
原创 vue中虚拟dom和diff算法
什么是虚拟dom所谓的Virtual dom，也就是我们常说的虚拟节点，它是通过JS的Object对象模拟DOM中的节点，然后再通过特定的render方法将其渲染成真实的DOM的节点。为什么使用虚拟DOM虚拟DOM的出现也是为了减弱频繁的大面积重绘引发的性能问题！既然知道了什么是虚拟DOM，那为什么在Vue或者React这样的框架中，会考虑采用这样的方式？其实在我们使用JQuery这样的库的时候，我们不禁会大量操作DOM，那么DOM元素的变化自然会引起页面的回流或者重绘，页面的DOM重.
2022-02-07 16:00:33
191
原创 vue双向数据绑定原理
什么是数据双向绑定数据双向绑定，就是数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。 vue实现双向数据绑定的原理，其实就是利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值get和设置属性值set的操作来实现的。代码演示defineProperty的用法：// 第一个参数：定义属性的对象var obj = {};// 第二个参数：要定义或修改的属性的名称var name;// 第三个参数：将被定义或修改的属性描述
2022-02-07 15:53:30
56
原创 v-if和v-show的区别
1.v-showv-show指令的作用是：根据真假值切换元素的显示状态,是响应式的 语法表达v-show = " 表达式 " 原理是修改元素的的CSS属性(display)来决定实现显示还是隐藏 指令后面的内容最终都会解析为布尔值，值为真(true)的时候元素显示，值为假(false)的时候元素隐藏 数据改变之后呢对应的元素的显示状态也是会同步更新的2.v-ifv-if指令的作用：根据表达式的真假切换元素的显示状态 v-if = "表达式" 本质是通过操纵dom元素来进行切换显..
2022-02-07 15:40:57
127
原创 vue的常用指令
1、v-model:数据的双向绑定2、v-for 格式：v-for="字段名 in(of) 数组 json" 循环数组或 json 需要注意从 vue2 开始取消了$inde;3、v-show 显示内容;4、v-hide 隐藏内容;5、v-if 显示与隐藏 ,v-else-if 必须和 v-if 连用 v-else 必须和 v-if 连用 不能单独使用 否则报错模板编译错误;6、v-bind 动态绑定及时对页面的数据进行更改;7、v-on:click 给标签绑定函数，可以缩写为@，例
2022-02-07 15:34:11
457
原创 为什么组件中的data是个函数
VUE组件中的data必须是函数类别引用数据类型Object是引用数据类型，如果不用function返回，每个组件的data都是内存的同一个地址，一个数据改变了其他也改变了； JavaScript只有函数构成作用域(注意理解作用域，只有函数{}构成作用域,对象的{}以及if(){}都不构成作用域),data是一个函数时，每个组件实例都有自己的作用域，每个实例相互独立，不会相互影响。例如：const MyComponent = function() {};MyComponent.protot
2022-02-07 15:26:19
67
原创 js原型和原型链，一学就会
一.什么是原型任何对象都有一个原型对象，这个原型对象由对象的内置属性_proto_指向它的构造函数的prototyoe指向的对象，即任何对象都是由一个构造函数创建的，被创建的对象都可以获得构造函数的prototype属性，注意：对象是没有prototype属性，只有方法才有prototype属性。任何对象都有一个constructor属性，指向创建此对象的构造函数，比如说{}对象，它的构造函数是function Object(){}。1.什么是构造函数呢？用function声明的都是函数，而如
2022-01-14 16:10:11
74
原创 常见的块级、行内、空元素
在Css里，每一个元素上都会有一个 display属性，可以进行相互的转换 块级转行内 / 行内块：display:inline、 display:inline-block、 行内转块级 / 行内块：display:block、 display:inline-block、 ...
2022-01-11 15:51:22
124
原创 vue项目中如何使用样式穿透
在平常开发项目中经常会遇到 父子组件嵌套，但是使用子组件时更多是为了复用，使用子组件时即不想修改子组件原来的样式，又想对它进行一些操作 这时候就用到了 样式穿透1.外层容器 >>> 组件名 在less中使用2.外层容器 /deep/ 组件名 在less中使用3.外层容器 ::v-deep 组件名 在scss中使用如果你发现第一个不能实现 就用其他的试一试...
2022-01-11 15:49:44
212
原创 flex弹性盒子重要知识点
Flex弹性盒子基本属性 flex官方文档 一、Flex是什么二、Flex的基础概念三、容器的属性1.0 flex-direction属性1.1 flex-wrap属性1.2 flex-flow1.3 justify-content属性1.4 align-items属性1...
2022-01-11 15:46:45
104
原创 position定位的属性
position的含义是指定位类型，取值类型可以有：static、relative、absolute、fixed、inherit和sticky，这里sticky是CSS3新发布的一个属性。 1、position: static static(没有定位)是position...
2022-01-10 07:35:51
245
1
原创 vuex的基础知识
一、什么是vuexVuex 是一个专为 Vue.js 应用程序开发的状态管理模式,它由五部分组成：分别是：state,actions,mutations,getters,modules二、vuex的五大核心state: 数据actions:可以包含异步操作mutations: 唯一可以修改state数据的场所getters: 类似于vue组件中的计算属性，对state数据进行计算（会被缓存）modules:模块化管理store（仓库），每个模块拥有自己的 state、mutation、
2022-01-06 20:24:53
631
原创 BFC详解
一、什么是BFC1.1BFC 定义BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。 BFC就是“块级格式化上下文”的意思，BFC是一块独立的布局环境，保护其中内部元素不收外部影响，也不影响外部。本身BFC是一种css的布局方式，只是我们可以利用它来解决外边距折叠的问题，BFC并不是专门用来解决这个问题而创的；1.2
2022-01-06 08:06:02
176
原创 css盒子模型
1.什么是盒子模型在我们HTML页面中，每一个元素都可以被看作一个盒子，而这个盒子由：内容区（content）、填充区（padding）、边框区（border）、外边界区（margin）四部分组成。在使用CSS进行网页布局时，我们一定离不开的一个东西————盒子模型。盒子模型，顾名思义，盒子就是用来装东西的，它装的东西就是HTML元素的内容。或者说，每一个可见的 HTML 元素都是一个盒子，下面所说的盒子都等同于 HTML 元素。这里盒子与 中的盒子又有点不同，这里的盒子是二维的。2.盒子的组成一个
2022-01-06 07:50:58
1554
原创 在vue中返回顶部封装完整代码
其实，返回顶部组件在大多数UI都有，为什么会在这里进行自己封装呢？因为我这里有一个需求，就是子组件内部自己的滚动条(不是window的)，要与外层返回顶部不重复，所以就有了以下封装。父组件上的使用<div class="main" ref="main"> <!--直接传入有滚动条的组件的ref,如果正常用则不用传参数--> <backTop parent="main" /></div>子组件封装<template.
2022-01-05 07:41:04
235
原创 axios请求封装
一般我们会在项目根目录的src文件夹下新建一个utils文件夹,在文件夹下放http.js文件,在http.js中首先导入axios，然后设置属性，比如baseURL（公共地址）和 timeOut (超时时间）还可以设置响应拦截和请求拦截，在请求拦截中可以设置loading动画的开启和配置请求头的token在响应拦截中可以关闭loading和根据后端返回的状态码检测token是否有效最后把server导出import axios from 'axios'let server = axio.
2022-01-04 07:55:17
1719
原创 axios的基础使用
一.什么是axios？是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端 简单的理解就是ajax的封装在使用Vue.js框架开发前端项目时 会经常发送ajax请求服务端接口 在开发过程中 需要对axios进一步封装 方便在项目中的使用1.1 axios的特性从浏览器中创建 XMLHttpRequest从 node.js 发出 http 请求支持 Promise API拦截请求和响应转换请求和响应数据取消请求自动转换JSON数据客户端支持防止 CSRF/XS
2021-12-31 15:46:04
362
原创 vue当中解决跨域问题
一.Vue中怎么解决跨域问题这就是需要用跨域来请求数据的报错二.解决步骤在vue项目中的跟目录下创建一个 vue.config.js ，文件名是固定的，不一样就会报错在vue.config.js里边直接复制下面这串代码即可devServer: { host:'0.0.0.0', //可以忽略不写 port: 8080,//它是用来修改你打开后的端口号的 open: true,//值为 true的话，项目启动时自动打开到浏览器里边， false不会
2021-12-30 20:34:18
161
原创 多环境变量配置解析
一.配置多个环境变量新建两个或多个文件，和package.json同级；package.json 里的 scripts 配置 serve test build，通过 --mode xxx 来执行不同环境例如：.env.production、.env.development通过 npm run serve 启动本地 , 执行 development通过 npm run stage 打包测试 , 执行 staging通过 npm run build 打包正式 , 执行 production"s
2021-12-30 20:06:09
127
原创 gitee(码云)和gitHub的区别
1.gitee与gitHub概念？Gitee（码云）是开源中国社区推出的代码托管协作开发平台，支持Git和SVN，提供免费的私有仓库托管。Gitee专为开发者提供稳定、高效、安全的云端软件开发协作平台，无论是个人、团队、或是企业，都能够实现代码托管、项目管理、协作开发。(国内)GitHub 是一个面向开源及私有软件项目的托管平台，因为只支持 Git 作为唯一的版本库格式进行托管，故名 GitHub。GitHub 于 2008 年 4 月 10 日正式上线，除了 Git 代码仓库托管及基本的 Web 管
2021-12-27 17:02:34
5590
原创 git的使用
创建自己的git本地仓库创建本地仓库的条件是需要一个空目录，然后在空目录中初始化你的项目git init 命令初始化一个本地仓库如果初始化之后看不到.git文件夹则可以通过ls-ah查看，也可以通过命令attrib -r -h .git将隐藏的.git文件给显示出来我们初始化出来的git仓库属于主分支 mastergit init：初始化当前目录为仓库，初始化后会自动将当前仓库设置为mastergit会发现仓库中的任意更改（增删改查）将新建文件提交到本地仓库git add <
2021-12-27 11:33:07
209
原创 Git基础
Git整理1.Git基础1.1版本管理 版本管理是一种记录变化的方式，以便将来查询特定的文件内容 理解：每一次对项目进行修改之后提交的都可以称为版本 每天对版本进行修改如何再一次去提交都叫版本 用于记录每天提交的修改代码，git还可以进行版本回退，退到你想要回到的版本时间点 1.1.2人为维护文档版本的问题 文档数量多且命名不清晰导致文档版本混乱 每次编辑文档需要复制，不方便 多人同时编辑同一个文档，容易覆盖 理解：人为维护几乎是不可能实.
2021-12-25 13:10:21
288
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人