- 博客(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
2458
原创 关于JS中微任务与宏任务这件事
文章目录简单总结一下在JS事件循环机制中微任务与宏任务。宏任务：在调用栈中执行的代码（包括整体代码script, setTimeout, setInterval、 setlmmediate）微任务：当前宏任务执行完毕，下个宏任务执行开始之前的任务称之为微任务（最常见的是promise.then, await）接下来以一个实例详细分析微任务与宏任务的执行过程首先看下面一段代码 <script> async function async1() {
2022-05-30 12:03:06
261
原创 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
134
原创 nodejs笔记6
文章目录Express 路由Express 中的路由Express 中的路由的例子路由的匹配过程路由的使用最简单的用法模块化路由创建路由模块注册路由模块为路由模块添加前缀中间件什么是中间件现实生活中的例子Express 中间件的调用流程Express 中间件的格式next 函数的作用Express 中间件的使用定义中间件函数全局生效的中间件定义全局中间件的简化形式中间件的作用定义多个全局中间件局部生效的中间件定义多个局部中间件了解中间件的5个使用注意事项中间件的分类应用级别的中间件路由级别的中间件错误级别的
2022-04-23 14:55:09
106
原创 nodejs笔记5
文章目录模块的加载机制优先从缓存中加载内置模块的加载机制自定义模块的加载机制第三方模块的加载机制目录作为模块ExpressExpress简介进一步理解 ExpressExpress 能做什么Express 的基本使用安装创建基本的 Web 服务器监听 GET 请求监听 POST请求把内容响应给客户端获取 URL 中携带的查询参数获取 URL 中的动态参数托管静态资源express.static()托管多个静态资源目录挂载路径前缀nodemon什么是nodemon安装nodemon使用nodemon模块的加
2022-04-22 19:26:56
107
原创 nodejs笔记4
文章目录包管理配置文件如何记录项目中安装了哪些包快速创建 package.jsondependencies 节点一次性安装所有的包卸载包devDependencies 节点解决下载包速度慢的问题包的分类项目包全局包md 文档转为 html 页面的小工具（ i5ting_toc）包的结构包管理配置文件npm 规定，在项目根目录中，必须提供一个叫做 package.json 的包管理配置文件。用来记录与项目有关的一些配置信息。例如：⚫ 项目的名称、版本号、描述等⚫ 项目中都用到了哪些包⚫ 哪些包只在
2022-04-22 17:25:41
76
原创 nodejs笔记3
文章目录模块化Node.js 中模块的分类加载模块Node.js 中的模块作用域什么是模块作用域模块作用域的好处模块化模块化是指解决一个复杂问题时，自顶向下逐层把系统划分成若干模块的过程。对于整个系统来说，模块是可组合、分解和更换的单元。编程领域中的模块化，就是遵守固定的规则，把一个大文件拆成独立并互相依赖的多个小模块。把代码进行模块化拆分的好处：① 提高了代码的复用性② 提高了代码的可维护性③ 可以实现按需加载Node.js 中模块的分类Node.js 中根据模块来源的不同，将模块分为了
2022-04-22 16:31:45
1368
原创 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
98
原创 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
368
原创 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
292
原创 后台管理系统17（完结）
文章目录权限管理模块静态页面以及展示数据收集数据菜单&按钮权限菜单权限按钮权限权限管理模块静态页面以及展示数据收集数据首先书写静态页面。接下来配置路由配置完成后书写接口请求数据在index中导入然后动态渲染页面，此时页面效果如下所示菜单&按钮权限菜单权限首先如何实现不同的用户所能操作|查看菜单不一样的？解决方案如下起始不同的用户（角色），登录的时候会向服务器发请求，服务器会把用户相应的菜单的权限的信息，返回给我们我们可以根据服务器返回的数据（信息），可
2022-04-08 19:45:36
905
原创 后台管理系统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
262
原创 后台管理系统15
文章目录Home首页（一）card静态组件组件结构小图表静态组件折线图的书写柱状图的书写进度条的书写Home首页（一）接下来对首页进行书写card静态组件组件结构首先观察完成的项目，发现首页基本由三部分组成，将首页拆分为三个组件，最上面有四个小图表，图表之间留有缝隙以及阴影效果，四个小图表基本类似，因此拆分组件card来布局。简单修改一下此时页面效果如下小图表静态组件接下来对小图表进行静态布局。布局如下所示<template> <div> &
2022-04-07 16:51:14
1150
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
948
原创 后台管理系统13
文章目录深度选择器数据可视化canvas绘制线段canvas绘制矩形canvas绘制圆形canvas画布清除与绘制文字canvas绘制柱状图svg的基本使用深度选择器深度选择器数据可视化canvas绘制线段首先介绍以下canvascanvas是HTML5新增的特性，是一个双闭合标签canvas标签默认的宽高为300px*150px浏览器认为canvas画布是一个图片给canvas画布添加文本没有效果，没有意义给canvas标签添加子节点同样没效果，没意义如果想操作canvas：绘制图
2022-04-06 16:06:36
521
原创 后台管理项目12
文章目录完善SkuForm添加sku保存与取消的操作保存的操作取消的操作sku列表的展示sku模块的展示静态页面展示数据上架与下架操作SKU详情查看完善SkuForm添加sku保存与取消的操作保存的操作当用户点击保存的时候，应该将之前收集的数据进行整理，把spuInfo的信息整理好，然后书写接口，将整理好的数据发送给服务器进行存储。首先先书写存储的接口。接下来给保存按钮绑定点击事件，当用户点击的时候，将数据整理到spuInfo中，并且发请求。发完请求存储完成之后，需要将页面跳转到第一页。因此需
2022-04-06 14:06:22
564
原创 后台管理系统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
512
原创 后台管理系统10
文章目录SPU模块（四）SpuForm组件保存的操作添加SPU的操作数据回显问题删除SPU的操作SPU模块（四）SpuForm组件保存的操作首先书写修改或者添加SPU的接口接下来给保存按钮绑定点击事件，当点击保存按钮时，应发送请求添加或者修改SPU并且页面跳转为初始页面。添加SPU的操作当用户选择添加SPU的时候，需要发起两次请求，一次请求品牌数据，一次请求全部的销售属性。所以需要完善添加SPU按钮的回调函数。由于保存之前写好了，此时添加的内容书写完成后，即可直接保存。数据回
2022-04-04 21:28:29
290
原创 后台管理系统9
文章目录SPU模块（三）SpuForm销售属性的数据展示SpuForm照片墙图片的收集销售属性添加的操作销售属性值展示与收集删除销售属性与属性值操作SPU模块（三）SpuForm销售属性的数据展示当发送Spu请求数据的时候，会请求到自身所含的销售属性。如下所示将这些数据渲染到el-table中，首先设置data与属性名的展示。接下来展示属性值名称列表，在这里用到elementui的Tag标签的动态编辑标签。将组件复制到项目中，并进行修改，先整理好静态组件，关于动态事件随后添加。接下来处
2022-04-04 17:37:31
1353
原创 后台管理系统8
文章目录SPU模块（二）获取SpuForm数据SpuForm组件数据展示与收集数据SPU模块（二）获取SpuForm数据完成上一步的工作后，接下来该书写接口。接口如下所示接口书写完成后，当父组件点击修改SPU的时候，子组件请求数据并且存储数据。SpuForm组件数据展示与收集数据在上一步已经对请求到的数据进行存储，接下来将存储的数据渲染到页面上。将界面中SPU名称与品牌的tmid以及SPU描述进行收集，同时将SPU名称与品牌的tmid以及SPU描述，以及SPU图片进行动态展示。
2022-04-03 23:17:50
286
原创 后台管理系统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
1609
原创 后台管理系统6
文章目录平台属性界面（三）查看模式与修改模式切换查看模式与修改模式注意事项修改属性的查看与编辑模式切换表单元素自动聚焦删除属性值的操作保存操作三级联动可操作性平台属性界面（三）查看模式与修改模式切换接下来设置当用户进入修改时，当用户点击属性值名称时，该单元格变为input框，而移开焦点时，变为span展示数据。具体效果如下所示首先，当用户点击添加添加属性值的时候，为每一个属性值列表的内容添加一个flag标记，用来区分展示的模块是input还是span接下来通过flag展示不同元素，并根据点
2022-04-02 21:32:10
843
原创 后台管理系统5
文章目录平台属性界面（二）添加属性与修改属性静态页面收集属性名与属性值解决返回按钮数据回显问题修改属性平台属性界面（二）添加属性与修改属性静态页面静态页面的书写如下所示，主要功能为点击添加属性或者修改按钮时，弹出另一个页面，针对这个可以利用v-show解决。具体代码如下所示收集属性名与属性值首先书写添加属性与属性值的接口接口需要携带数据，回到attr组件，在data中设定收集的数据利用双向绑定收集属性名收集属性值 ，此时修改一个小地方，就是当写好属性名的时候，添加属性值按钮才可以被
2022-04-02 15:56:32
432
原创 后台管理系统4
文章目录三级联动组件注册全局组件静态页面数据动态展示平台属性界面（一）静态页面动态展示属性三级联动组件注册全局组件三级联动组件并不是只在一个地方出现，因此，把三级联动组件设置为全局组件更方便，首先在components文件夹下新建CategorySelect文件夹，然后新建index.vue。接下来在main.js中注册全局组件。静态页面找到elementUI的Form表单的行内表单，进行修改，具体修改如下所示。数据动态展示接下来将死数据换为真实数据，首先书写接口。接下来在三级联动
2022-04-01 18:02:41
698
1
原创 后台管理系统3
文章目录品牌的表单验证删除品牌操作品牌的表单验证首先找到elementUI的Form表单的表单验证.Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可。首先给el-form添加rules属性（必须有model属性）接下来添加规则接下来设置prop属性接下来设置当验证全部通过，才能进行接下来的操作首先给form打上ref接下来书写逻辑删除品牌操作首先书写接口接下来找到删除
2022-03-31 20:50:02
362
原创 后台管理系统2
文章目录路由搭建品牌管理静态组件列表展示添加品牌与修改品牌静态页面添加品牌动态路由搭建首先把多余的路由组件删除接下来修改router文件夹中的路由配置。删除多余的路由配置，添加新的路由配置，如下所示。品牌管理静态组件页面布局利用elementUI进行布局具体代码如下所示布局结果如下列表展示首先给四个组件新建四个接口文件，如下所示接下来书写获取数据的接口为了更好的调用接口，将四个模块的接口进行暴露此时在任何组件都可以调用接口接口书写完成后，开始发送请求。并渲
2022-03-31 20:04:06
2556
1
原创 后台管理系统1
文章目录下载模板登录业务下载模板首先下载一个模板，在模板的基础上完成后续操作。下载地址为https://github.com/PanJiaChen/vue-admin-template下载完成后，进行解压，之后在文件夹中打开命令行输入npm install 此时文件夹会出现node_modules这个文件夹。接下来可以打开项目看一下，在文件夹中打开命令行，输入npm run dev，此时项目效果如下所示登录业务由于模板中使用的都是mock数据，为了完善登录业务，需要将数据都转换成真实数
2022-03-30 18:28:52
467
原创 项目笔记33（尚品汇）完结
文章目录图片懒加载安装插件使用方法引入插件以及注册插件表单验证安装插件引入插件以及使用插件路由懒加载打包上线图片懒加载安装插件安装vue-lazyloadnpm install vue-lazyload安装完成后查看package.json文件成功安装。使用方法引入插件以及注册插件引入以及注册的方法通过查阅文档可知，首先找到main.js文件，然后利用如下代码引入以及注册实际使用如下所示表单验证安装插件npm install vee-validate@2引入插件以及
2022-03-27 21:02:38
1697
原创 项目笔记32（尚品汇）
文章目录未登录的守卫判断路由独享与组件内守卫路由独享组件内守卫未登录的守卫判断之前的全局前置路由守卫没有书写未登录时的守卫判断，再此补充一下。路由独享与组件内守卫路由独享当用户登陆后，用户也不能直接进入trade界面，为了避免用户直接进入trade界面，需要给trade设置一个路由独享守卫,此时trade只允许从购物车页面跳转过来。具体代码如下所示。同样，按照逻辑如果想进入支付页面，必须先进入trade界面，因此需要给pay设置路由独享守卫组件内守卫按照逻辑如果想进入支付成功界面，只能
2022-03-27 16:54:41
702
原创 项目笔记31（尚品汇）
文章目录个人中心个人中心静态组件拆分组件我的订单组件修改个人中心个人中心静态组件首先将之前准备好的个人中心组件放到项目中。接下来注册路由如下所示页面效果如下所示拆分组件当用户点击我的订单与团购订单，右侧应该显示不同的内容，这就涉及到了二级路由。首先拆分组件。拆分出我的订单内容，与团购订单内容。拆分完成后注册二级路由信息接下来绑定路由跳转展示二级路由组件此时用户点击我的订单与团购订单时，会展示不同界面。我的订单组件修改当前我的订单组件展示的数据都是死数据，我们应该动态
2022-03-27 16:02:51
493
原创 项目笔记30（尚品汇）
文章目录支付界面静态组件提交订单的数据书写提交订单的接口数据存储（不用vuex的写法）展示支付信息使用ElementUI安装element UI安装 babel-plugin-component修改babel.config文件修改弹窗为二维码安装qrcode组件中引入qrcode使用qrcode支付逻辑支付界面静态组件首先和之前的静态组件一样，首先将之前写好的静态组件导入到项目中。存好之后配置pay的路由。由于配置的太多次，在此直接展示代码。页面成功导入，效果如下所示由于静态页面已经搭建完
2022-03-26 19:54:31
3216
原创 项目笔记29（尚品汇）
文章目录trade界面trade静态组件获取交易页数据获取用户地址信息获取订单交易页信息动态展示数据地址动态展示订单动态展示其他内容动态展示trade界面trade静态组件首先和之前的静态组件一样，首先将之前写好的静态组件导入到项目中。存好之后配置trade的路由。由于配置的太多次，在此直接展示代码。此时手动切换到/trade页面效果如下由于静态页面已经搭建完成，接下来设置路由跳转。根据尝试可知，当用户在购物车界面点击“结算”按钮时，页面应该跳转到trade。所以找到购物车的结算按钮，给
2022-03-26 16:10:36
554
原创 项目笔记28（尚品汇）
文章目录退出登录的制作导航守卫解决其他模块不加载用户信息的问题解决方法（二）退出登录的制作退出登录需要清除token以及本地存储的内容。首先找到退出登录，绑定一个点击事件，名为logout在logout中需要完成两件事1.发请求，通知服务器退出登录2.清除项目中的数据首先还是书写接口接下来三连环退出登录写完之后，回到Header组件发送action，同时注意，一旦退出登录成功，则系统应该返回首页。导航守卫当用户登录了，按理说用户不可以回到登录页面为了解决这个问题，首先设置全局
2022-03-25 17:47:58
264
原创 项目笔记27（尚品汇）
文章目录登录注册（二）用户登录携带token获取用户信息解决上述刷新的问题解决其他模块不加载用户信息的问题解决方法一(不完美)登录注册（二）用户登录携带token获取用户信息书写获取用户信息的接口接下来书写vuex考虑应该在什么时候发送请求，按照正常的逻辑，用户输入完账号密码点击登录后，页面应该跳转到home中，此时header不应该是“请登录|免费注册”而是应该展示用户的信息。因此这个请求应该在home挂载完成的时候发起。此时当用户输入完信息登录之后，页面效果如下。出现这个问题的原因是，
2022-03-25 14:44:22
890
原创 项目笔记26（尚品汇）
文章目录登录注册(一)登录注册静态组件注册业务获取验证码用户注册登录业务登录注册(一)登录注册静态组件首先引入登录注册静态组件。效果如下所示注册业务获取验证码表单验证先不处理首先完成验证码的功能，先收集数据，然后利用接口获取验证码书写接口接下来给登录注册新建一个仓库user，并注册接下来书写vuex三连环以及在注册页面发送action此时可以获取验证码用户注册当点击完成注册后，页面应该跳转到登录页面，并且还需要将注册内容存到后台中。为了完成这个功能首先还是先书
2022-03-24 19:22:01
554
原创 项目笔记25（尚品汇）
文章目录删除全部选中商品全部商品的勾选状态修改删除全部选中商品首先给‘删除选择的商品’绑定一个点击事件接下来书写点击事件的逻辑这个功能没有后台接口，因此我们可以换一种思路，就是遍历检查商品有没有被选中，如果被选中，我们就调用之前写好的删除自身产品的接口。具体代码如下所示此时删除选中的商品功能完成。全部商品的勾选状态修改首先给全选按钮绑定一个点击事件或者change事件接下来和上一个删除选择的商品一样。首先对仓库发起一个action,发起action的同时，记得传输按钮状态。在仓
2022-03-24 17:40:57
383
原创 项目笔记24（尚品汇）
文章目录完善购物车修改数量购物车删除产品改变产品状态完善购物车修改数量根据之前的思想，通过不同的type来判断用户进行了什么操作。具体代码如下所示此时功能基本完成，但是存在一个BUG，就是当用户点击‘-’过快的时候，会导致购买件数出现负数，如下所示。针对这个问题，可以用节流解决具体步骤如下所示引入lodash接下来限制handler一秒钟只可以发起一次。具体代码如下所示此时该功能完善成功。接下来开始制作购物车删除产品的操作。购物车删除产品首先查阅文档找到删除产品的请求查阅完
2022-03-24 15:45:37
476
原创 项目笔记23（尚品汇）
文章目录购物车操作发送请求根据请求成功与否决定是否进行路由跳转注册添加到购物车页面的路由判断是否跳转将详情页的信息带给添加到购物车路由并替换数据购物车静态组件与添加到购物车组件修改uuid游客身份获取购物车数据购物车动态展示数据动态展示数据
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人