- 博客(97)
- 收藏
- 关注
RSS订阅原创 options has an unknown property ‘before‘
ValidationError: Invalid options object. Dev Server has been initialized using an options object that does not match the API schema. - options has an unknown property 'before'. These properties are valid: object { allowedHosts?, bonjour
2022-07-15 22:22:48
2987
原创 关于JS中微任务与宏任务这件事
文章目录 简单总结一下在JS事件循环机制中微任务与宏任务。 宏任务：在调用栈中执行的代码（包括整体代码script, setTimeout, setInterval、 setlmmediate） 微任务：当前宏任务执行完毕，下个宏任务执行开始之前的任务称之为微任务（最常见的是promise.then, await） 接下来以一个实例详细分析微任务与宏任务的执行过程 首先看下面一段代码 <script> async function async1() {
2022-05-30 12:03:06
412
原创 nodejs笔记7
文章目录使用 Express 写接口创建基本的服务器创建 API 路由模块编写 GET 接口编写 POST 接口CORS 跨域资源共享接口的跨域问题使用 cors 中间件解决跨域问题什么是 CORSCORS 的注意事项CORS 响应头部 - Access-Control-Allow-OriginCORS 响应头部 - Access-Control-Allow-HeadersCORS 响应头部 - Access-Control-Allow-MethodsCORS请求的分类简单请求预检请求简单请求和预检请求的区
2022-04-23 19:15:00
244
原创 nodejs笔记6
文章目录Express 路由Express 中的路由Express 中的路由的例子路由的匹配过程路由的使用最简单的用法模块化路由创建路由模块注册路由模块为路由模块添加前缀中间件什么是中间件现实生活中的例子Express 中间件的调用流程Express 中间件的格式next 函数的作用Express 中间件的使用定义中间件函数全局生效的中间件定义全局中间件的简化形式中间件的作用定义多个全局中间件局部生效的中间件定义多个局部中间件了解中间件的5个使用注意事项中间件的分类应用级别的中间件路由级别的中间件错误级别的
2022-04-23 14:55:09
224
原创 nodejs笔记5
文章目录模块的加载机制优先从缓存中加载内置模块的加载机制自定义模块的加载机制第三方模块的加载机制目录作为模块ExpressExpress简介进一步理解 ExpressExpress 能做什么Express 的基本使用安装创建基本的 Web 服务器监听 GET 请求监听 POST请求把内容响应给客户端获取 URL 中携带的查询参数获取 URL 中的动态参数托管静态资源express.static()托管多个静态资源目录挂载路径前缀nodemon什么是nodemon安装nodemon使用nodemon 模块的加
2022-04-22 19:26:56
248
原创 nodejs笔记4
文章目录包管理配置文件如何记录项目中安装了哪些包快速创建 package.jsondependencies 节点一次性安装所有的包卸载包devDependencies 节点解决下载包速度慢的问题包的分类项目包全局包md 文档转为 html 页面的小工具（ i5ting_toc）包的结构 包管理配置文件 npm 规定，在项目根目录中，必须提供一个叫做 package.json 的包管理配置文件。用来记录与项目有关的一些配置 信息。例如： ⚫ 项目的名称、版本号、描述等 ⚫ 项目中都用到了哪些包 ⚫ 哪些包只在
2022-04-22 17:25:41
181
原创 nodejs笔记3
文章目录模块化Node.js 中模块的分类加载模块Node.js 中的模块作用域什么是模块作用域模块作用域的好处 模块化 模块化是指解决一个复杂问题时，自顶向下逐层把系统划分成若干模块的过程。对于整个系统来说，模块是可组合、分解和更换的单元。 编程领域中的模块化，就是遵守固定的规则，把一个大文件拆成独立并互相依赖的多个小模块。 把代码进行模块化拆分的好处： ① 提高了代码的复用性 ② 提高了代码的可维护性 ③ 可以实现按需加载 Node.js 中模块的分类 Node.js 中根据模块来源的不同，将模块分为了
2022-04-22 16:31:45
1526
原创 nodejs笔记2
文章目录http模块什么是 http 模块http 模块的作用服务器相关的概念IP 地址域名和域名服务器端口号创建最基本的 web 服务器创建服务器req 请求对象res 响应对象解决中文乱码问题根据不同的 url 响应不同的 html 内容 http模块 什么是 http 模块 在网络节点中，负责消费资源的电脑，叫做客户端；负责对外提供网络资源的电脑，叫做服务器。 http 模块是 Node.js 官方提供的、用来创建 web 服务器的模块。通过 http 模块提供的 http.createServer(
2022-04-21 20:20:50
207
原创 nodejs笔记1
文章目录fs 文件系统模块readFile()方法writeFile()方法小案例路径动态拼接的问题path 路径模块path.join() 方法. path.basename()方法（获取路径最后一部分）path.extname() 方法（获取路径扩展名部分） fs 文件系统模块 fs 模块是 Node.js 官方提供的、用来操作文件的模块。它提供了一系列的方法和属性，用来满足用户对文件的操作需求。 例如： ⚫ fs.readFile() 方法，用来读取指定文件中的内容 ⚫ fs.writeFile()
2022-04-21 16:34:14
490
原创 git学习
文章目录安装git设置用户名与邮箱为常用指令设置别名解决GitBash乱码问题获取本地仓库常用指令查看修改的状态（status）添加工作区到暂存区（add）提交暂存区到本地仓库（commit）查看提交日志（log）版本回退添加文件至忽略列表实例演示 安装git 首先安装git2.23.0版本 链接如下 链接：https://pan.baidu.com/s/1SOxzgv5VJqpd8n_zE6d3wA 提取码：3bk4 设置用户名与邮箱 回到窗口，右键鼠标点击Git Bash Here。然后配置用户名与邮箱
2022-04-11 20:44:46
400
原创 后台管理系统17（完结）
文章目录权限管理模块静态页面以及展示数据收集数据菜单&按钮权限菜单权限按钮权限 权限管理模块 静态页面以及展示数据收集数据 首先书写静态页面。 接下来配置路由 配置完成后书写接口请求数据 在index中导入 然后动态渲染页面，此时页面效果如下所示 菜单&按钮权限 菜单权限 首先如何实现不同的用户所能操作|查看菜单不一样的？ 解决方案如下 起始不同的用户（角色），登录的时候会向服务器发请求，服务器会把用户相应的菜单的权限的信息，返回给我们 我们可以根据服务器返回的数据（信息），可
2022-04-08 19:45:36
1200
原创 后台管理系统16
文章目录sale模块sale静态组件sale动态展示observe组件observe静态组件动态展示mock数据 sale模块 sale静态组件 首先搭建出框架。 <template> <el-card class="box-card" style="margin: 10px 0px"> <div slot="header" class="clearfix"> <!-- 头部左侧内容 --> <el-tabs clas
2022-04-07 21:10:27
443
原创 后台管理系统15
文章目录Home首页（一）card静态组件组件结构小图表静态组件折线图的书写柱状图的书写进度条的书写 Home首页（一） 接下来对首页进行书写 card静态组件 组件结构 首先观察完成的项目，发现首页基本由三部分组成，将首页拆分为三个组件，最上面有四个小图表，图表之间留有缝隙以及阴影效果，四个小图表基本类似，因此拆分组件card来布局。 简单修改一下 此时页面效果如下 小图表静态组件 接下来对小图表进行静态布局。布局如下所示 <template> <div> &
2022-04-07 16:51:14
1353
1
原创 后台管理系统14
文章目录e-charts基本使用echarts展示多个图表多个容器展示多个图表一个容器展示多个图表数据集dataset使用echarts内置组件的使用echarts坐标体系一个坐标体系多个坐标体系 e-charts基本使用 使用的时候先引入e-charts依赖包 然后给e-charts准备一个容器，这个容器就是显示图表的区域。 接下来利用echarts.init创建e-charts实例。 最后指定图表的配置项与数据。 接下来绘制一个柱形图，具体代码如下所示 <!DOCTYPE html> <
2022-04-07 14:56:19
1113
原创 后台管理系统13
文章目录深度选择器数据可视化canvas绘制线段canvas绘制矩形canvas绘制圆形canvas画布清除与绘制文字canvas绘制柱状图svg的基本使用 深度选择器 深度选择器 数据可视化 canvas绘制线段 首先介绍以下canvas canvas是HTML5新增的特性，是一个双闭合标签 canvas标签默认的宽高为300px*150px 浏览器认为canvas画布是一个图片 给canvas画布添加文本没有效果，没有意义 给canvas标签添加子节点同样没效果，没意义 如果想操作canvas：绘制图
2022-04-06 16:06:36
708
原创 后台管理项目12
文章目录完善SkuForm添加sku保存与取消的操作保存的操作取消的操作sku列表的展示sku模块的展示静态页面展示数据上架与下架操作SKU详情查看 完善SkuForm 添加sku保存与取消的操作 保存的操作 当用户点击保存的时候，应该将之前收集的数据进行整理，把spuInfo的信息整理好，然后书写接口，将整理好的数据发送给服务器进行存储。 首先先书写存储的接口。 接下来给保存按钮绑定点击事件，当用户点击的时候，将数据整理到spuInfo中，并且发请求。发完请求存储完成之后，需要将页面跳转到第一页。因此需
2022-04-06 14:06:22
788
原创 后台管理系统11
文章目录SkuForm的操作SkuForm静态组件获取SkuForm数据展示SKU与收集SKU数据图片的展示与收集 SkuForm的操作 SkuForm静态组件 首先书写一下SkuForm的静态组件，当用户在SPU模块中点击添加Sku的时候，页面应该跳转到SkuForm页面。 首先给这个绿色按钮绑定一个点击事件，当点击时，进行跳转，接下来书写页面。 静态布局代码如下所示，其中有个新的知识点el-table-column type="selection"这个type会变成勾选框，之前通常用的是Index
2022-04-05 21:25:57
761
原创 后台管理系统10
文章目录SPU模块（四）SpuForm组件保存的操作添加SPU的操作数据回显问题删除SPU的操作 SPU模块（四） SpuForm组件保存的操作 首先书写修改或者添加SPU的接口 接下来给保存按钮绑定点击事件，当点击保存按钮时，应发送请求添加或者修改SPU并且页面跳转为初始页面。 添加SPU的操作 当用户选择添加SPU的时候，需要发起两次请求，一次请求品牌数据，一次请求全部的销售属性。所以需要完善添加SPU按钮的回调函数。 由于保存之前写好了，此时添加的内容书写完成后，即可直接保存。 数据回
2022-04-04 21:28:29
443
原创 后台管理系统9
文章目录SPU模块（三）SpuForm销售属性的数据展示SpuForm照片墙图片的收集销售属性添加的操作销售属性值展示与收集删除销售属性与属性值操作 SPU模块（三） SpuForm销售属性的数据展示 当发送Spu请求数据的时候，会请求到自身所含的销售属性。如下所示 将这些数据渲染到el-table中，首先设置data与属性名的展示。 接下来展示属性值名称列表，在这里用到elementui的Tag标签的动态编辑标签。 将组件复制到项目中，并进行修改，先整理好静态组件，关于动态事件随后添加。 接下来处
2022-04-04 17:37:31
1876
原创 后台管理系统8
文章目录SPU模块（二）获取SpuForm数据SpuForm组件数据展示与收集数据 SPU模块（二） 获取SpuForm数据 完成上一步的工作后，接下来该书写接口。接口如下所示 接口书写完成后，当父组件点击修改SPU的时候，子组件请求数据并且存储数据。 SpuForm组件数据展示与收集数据 在上一步已经对请求到的数据进行存储，接下来将存储的数据渲染到页面上。 将界面中SPU名称与品牌的tmid以及SPU描述进行收集，同时将SPU名称与品牌的tmid以及SPU描述，以及SPU图片进行动态展示。
2022-04-03 23:17:50
415
原创 后台管理系统7
文章目录SPU模块静态页面SPU列表展示SPU管理内容切换SpuForm静态界面SpuForm请求业务 SPU模块 静态页面 首先将spu模块分为两部分，利用两个el-card进行分割 接下来在第一个el-card中添加之前声明的全局组件三级联动组件。由于在Spu中也会利用到三级联动组件收集categoryid的功能以及可操作性的变化，因此顺便把三级联动组件收集数据的逻辑以及可操作性的变化也写好。 接下来搭建第二个el-card 首先在最上面添加一个el-button随后展示el-table，在表格
2022-04-03 21:20:05
1836
原创 后台管理系统6
文章目录平台属性界面（三）查看模式与修改模式切换查看模式与修改模式注意事项修改属性的查看与编辑模式切换表单元素自动聚焦删除属性值的操作保存操作三级联动可操作性 平台属性界面（三） 查看模式与修改模式切换 接下来设置当用户进入修改时，当用户点击属性值名称时，该单元格变为input框，而移开焦点时，变为span展示数据。 具体效果如下所示 首先，当用户点击添加添加属性值的时候，为每一个属性值列表的内容添加一个flag标记，用来区分展示的模块是input还是span 接下来通过flag展示不同元素，并根据点
2022-04-02 21:32:10
1116
原创 后台管理系统5
文章目录平台属性界面（二）添加属性与修改属性静态页面收集属性名与属性值解决返回按钮数据回显问题修改属性 平台属性界面（二） 添加属性与修改属性静态页面 静态页面的书写如下所示，主要功能为点击添加属性或者修改按钮时，弹出另一个页面，针对这个可以利用v-show解决。具体代码如下所示 收集属性名与属性值 首先书写添加属性与属性值的接口 接口需要携带数据，回到attr组件，在data中设定收集的数据 利用双向绑定收集属性名 收集属性值 ，此时修改一个小地方，就是当写好属性名的时候，添加属性值按钮才可以被
2022-04-02 15:56:32
619
原创 后台管理系统4
文章目录三级联动组件注册全局组件静态页面数据动态展示平台属性界面（一）静态页面动态展示属性 三级联动组件 注册全局组件 三级联动组件并不是只在一个地方出现，因此，把三级联动组件设置为全局组件更方便，首先在components文件夹下新建CategorySelect文件夹，然后新建index.vue。 接下来在main.js中注册全局组件。 静态页面 找到elementUI的Form表单的行内表单，进行修改，具体修改如下所示。 数据动态展示 接下来将死数据换为真实数据，首先书写接口。 接下来在三级联动
2022-04-01 18:02:41
802
1
原创 后台管理系统3
文章目录品牌的表单验证删除品牌操作 品牌的表单验证 首先找到elementUI的Form表单的表单验证. Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可。 首先给el-form添加rules属性（必须有model属性） 接下来添加规则 接下来设置prop属性 接下来设置当验证全部通过，才能进行接下来的操作 首先给form打上ref 接下来书写逻辑 删除品牌操作 首先书写接口 接下来找到删除
2022-03-31 20:50:02
463
原创 后台管理系统2
文章目录路由搭建品牌管理静态组件列表展示添加品牌与修改品牌静态页面添加品牌动态 路由搭建 首先把多余的路由组件删除 接下来修改router文件夹中的路由配置。 删除多余的路由配置，添加新的路由配置，如下所示。 品牌管理 静态组件 页面布局利用elementUI进行布局 具体代码如下所示 布局结果如下 列表展示 首先给四个组件新建四个接口文件，如下所示 接下来书写获取数据的接口 为了更好的调用接口，将四个模块的接口进行暴露 此时在任何组件都可以调用接口 接口书写完成后，开始发送请求。并渲
2022-03-31 20:04:06
2659
1
原创 后台管理系统1
文章目录下载模板登录业务 下载模板 首先下载一个模板，在模板的基础上完成后续操作。 下载地址为 https://github.com/PanJiaChen/vue-admin-template 下载完成后，进行解压，之后在文件夹中打开命令行输入npm install 此时文件夹会出现node_modules这个文件夹。 接下来可以打开项目看一下，在文件夹中打开命令行，输入npm run dev，此时项目效果如下所示 登录业务 由于模板中使用的都是mock数据，为了完善登录业务，需要将数据都转换成真实数
2022-03-30 18:28:52
555
原创 项目笔记33（尚品汇）完结
文章目录图片懒加载安装插件使用方法引入插件以及注册插件表单验证安装插件引入插件以及使用插件路由懒加载打包上线 图片懒加载 安装插件 安装vue-lazyload npm install vue-lazyload 安装完成后查看package.json文件 成功安装。 使用方法 引入插件以及注册插件 引入以及注册的方法通过查阅文档可知，首先找到main.js文件，然后利用如下代码引入以及注册 实际使用如下所示 表单验证 安装插件 npm install vee-validate@2 引入插件以及
2022-03-27 21:02:38
1789
原创 项目笔记32（尚品汇）
文章目录未登录的守卫判断路由独享与组件内守卫路由独享组件内守卫 未登录的守卫判断 之前的全局前置路由守卫没有书写未登录时的守卫判断，再此补充一下。 路由独享与组件内守卫 路由独享 当用户登陆后，用户也不能直接进入trade界面，为了避免用户直接进入trade界面，需要给trade设置一个路由独享守卫,此时trade只允许从购物车页面跳转过来。具体代码如下所示。 同样，按照逻辑如果想进入支付页面，必须先进入trade界面，因此需要给pay设置路由独享守卫 组件内守卫 按照逻辑如果想进入支付成功界面，只能
2022-03-27 16:54:41
769
原创 项目笔记31（尚品汇）
文章目录个人中心个人中心静态组件拆分组件我的订单组件修改 个人中心 个人中心静态组件 首先将之前准备好的个人中心组件放到项目中。 接下来注册路由如下所示 页面效果如下所示 拆分组件 当用户点击我的订单与团购订单，右侧应该显示不同的内容，这就涉及到了二级路由。首先拆分组件。 拆分出我的订单内容，与团购订单内容。 拆分完成后注册二级路由信息 接下来绑定路由跳转 展示二级路由组件 此时用户点击我的订单与团购订单时，会展示不同界面。 我的订单组件修改 当前我的订单组件展示的数据都是死数据，我们应该动态
2022-03-27 16:02:51
564
原创 项目笔记30（尚品汇）
文章目录支付界面静态组件提交订单的数据书写提交订单的接口数据存储（不用vuex的写法）展示支付信息使用ElementUI安装element UI安装 babel-plugin-component修改babel.config文件修改弹窗为二维码安装qrcode组件中引入qrcode使用qrcode支付逻辑 支付界面 静态组件 首先和之前的静态组件一样，首先将之前写好的静态组件导入到项目中。 存好之后配置pay的路由。 由于配置的太多次，在此直接展示代码。 页面成功导入，效果如下所示 由于静态页面已经搭建完
2022-03-26 19:54:31
3601
原创 项目笔记29（尚品汇）
文章目录trade界面trade静态组件获取交易页数据获取用户地址信息获取订单交易页信息动态展示数据地址动态展示订单动态展示其他内容动态展示 trade界面 trade静态组件 首先和之前的静态组件一样，首先将之前写好的静态组件导入到项目中。 存好之后配置trade的路由。 由于配置的太多次，在此直接展示代码。 此时手动切换到/trade页面效果如下 由于静态页面已经搭建完成，接下来设置路由跳转。根据尝试可知，当用户在购物车界面点击“结算”按钮时，页面应该跳转到trade。 所以找到购物车的结算按钮，给
2022-03-26 16:10:36
742
原创 项目笔记28（尚品汇）
文章目录退出登录的制作导航守卫解决其他模块不加载用户信息的问题解决方法（二） 退出登录的制作 退出登录需要清除token以及本地存储的内容。 首先找到退出登录，绑定一个点击事件，名为logout 在logout中需要完成两件事 1.发请求，通知服务器退出登录 2.清除项目中的数据 首先还是书写接口 接下来三连环 退出登录写完之后，回到Header组件发送action，同时注意，一旦退出登录成功，则系统应该返回首页。 导航守卫 当用户登录了，按理说用户不可以回到登录页面 为了解决这个问题，首先设置全局
2022-03-25 17:47:58
405
原创 项目笔记27（尚品汇）
文章目录登录注册（二）用户登录携带token获取用户信息解决上述刷新的问题解决其他模块不加载用户信息的问题解决方法一(不完美) 登录注册（二） 用户登录携带token获取用户信息 书写获取用户信息的接口 接下来书写vuex 考虑应该在什么时候发送请求，按照正常的逻辑，用户输入完账号密码点击登录后，页面应该跳转到home中，此时header不应该是“请登录|免费注册”而是应该展示用户的信息。因此这个请求应该在home挂载完成的时候发起。 此时当用户输入完信息登录之后，页面效果如下。出现这个问题的原因是，
2022-03-25 14:44:22
1074
原创 项目笔记26（尚品汇）
文章目录登录注册(一)登录注册静态组件注册业务获取验证码用户注册登录业务 登录注册(一) 登录注册静态组件 首先引入登录注册静态组件。 效果如下所示 注册业务 获取验证码 表单验证先不处理 首先完成验证码的功能，先收集数据，然后利用接口获取验证码 书写接口 接下来给登录注册新建一个仓库user，并注册 接下来书写vuex三连环以及在注册页面发送action 此时可以获取验证码 用户注册 当点击完成注册后，页面应该跳转到登录页面，并且还需要将注册内容存到后台中。为了完成这个功能首先还是先书
2022-03-24 19:22:01
683
原创 项目笔记25（尚品汇）
文章目录删除全部选中商品全部商品的勾选状态修改 删除全部选中商品 首先给‘删除选择的商品’绑定一个点击事件 接下来书写点击事件的逻辑 这个功能没有后台接口，因此我们可以换一种思路，就是遍历检查商品有没有被选中，如果被选中，我们就调用之前写好的删除自身产品的接口。具体代码如下所示 此时删除选中的商品功能完成。 全部商品的勾选状态修改 首先给全选按钮绑定一个点击事件或者change事件 接下来和上一个删除选择的商品一样。首先对仓库发起一个action,发起action的同时，记得传输按钮状态。 在仓
2022-03-24 17:40:57
468
原创 项目笔记24（尚品汇）
文章目录完善购物车修改数量购物车删除产品改变产品状态 完善购物车修改数量 根据之前的思想，通过不同的type来判断用户进行了什么操作。 具体代码如下所示 此时功能基本完成，但是存在一个BUG，就是当用户点击‘-’过快的时候，会导致购买件数出现负数，如下所示。 针对这个问题，可以用节流解决 具体步骤如下所示 引入lodash 接下来限制handler一秒钟只可以发起一次。具体代码如下所示 此时该功能完善成功。接下来开始制作购物车删除产品的操作。 购物车删除产品 首先查阅文档找到删除产品的请求 查阅完
2022-03-24 15:45:37
546
原创 项目笔记23（尚品汇）
文章目录购物车操作发送请求根据请求成功与否决定是否进行路由跳转注册添加到购物车页面的路由判断是否跳转将详情页的信息带给添加到购物车路由并替换数据购物车静态组件与添加到购物车组件修改uuid游客身份获取购物车数据购物车动态展示数据动态展示数据
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人