前端
文章平均质量分 82
疯子的梦想@
致力于分享真正能够实现的源码、用最通俗的语言阐述一些基本原理。
展开
-
TypeScript与Vue组合开发记录点(九)
Lodash第三方库深度克隆,toFixed(),JavaScript Array some() 方法,JavaScript find() 方法,promise对象的finally方法原创 2022-06-15 11:58:43 · 217 阅读 · 1 评论 -
TypeScript与Vue组合开发记录点(八)
TypeScript与Vue组合开发记录点(八)TypeScript中的!特殊用法TypeScript中的?.特殊用法TypeScript中的??特殊用法@watch()监视属性监视属性中的immediate函数handler函数与(newValue,oldValue)TypeScript中的!特殊用法!表示非空断言符号,即忽略数据的null和undefined类型,例如:// 在调用A中的B变量时,避免因为A是null或者undefined而出现报错// 另外,调用变量时,一定要注意变量名是否定义原创 2022-05-30 13:55:41 · 219 阅读 · 0 评论 -
TypeScript与Vue组合开发记录点(七)
TypeScript与Vue组合开发记录点(七)模板字符串``行内标签,块级标签array.sort()函数模板字符串``模板字符串符号``,该符号为反引号,将输入法调至英文状态下,然后找到~键输入即可。通过使用该符号,可以在模板字符串内使用单引号和双引号。let text = `He's often called "Johnny"`;模板字符串提供了一种将变量和表达式插入字符串的简单方法。该方法称为字符串插值。通过使用${...}。let firstName = "Bill";let las原创 2022-05-26 17:41:05 · 181 阅读 · 0 评论 -
TypeScript与Vue组合开发记录点(六)
TypeScript与Vue组合开发记录点(六)集合set.entries()的方法string.substring(from,to)方法Array.concat方法slice()方法,数组和字符串的使用区别集合set.entries()的方法对存入集合set内的value,使用set.entries()会形成【value,value】的形式const setIter=new Set();const entries = setIter.entries();console.log(entries.n原创 2022-05-20 13:21:58 · 167 阅读 · 0 评论 -
TypeScript与Vue组合开发记录点(五)
TypeScript与Vue组合开发记录点(五)ElementUI之this.$alert()HTML的i 标签v-html锚点Array.shift()Array.unshift()ElementUI之this.$alert()ElementUI的this.$alert()弹窗,在MessageBox 弹框中使用,修改该弹窗的默认样式。当用户进行操作时会被触发,该对话框中断用户操作,直到用户确认知晓后才可关闭。调用$alert方法即可打开消息提示,它模拟了系统的alert ,无法通过按下 ESC 或点原创 2022-05-16 13:27:19 · 369 阅读 · 0 评论 -
TypeScript与Vue组合开发记录点(四)
TypeScript与Vue组合开发记录点(四)startsWith() 方法onselect事件深拷贝array.fill()vconsolestartsWith() 方法startsWith() 方法用于检测字符串是否以指定的子字符串开始。如果是以指定的子字符串开头返回 true,否则 false。对大小写敏感。检测字符串中是否含有hello字符var str = "Hello world, welcome to the Runoob.";var n = str.startsWith("Hell原创 2022-05-11 10:20:39 · 292 阅读 · 0 评论 -
TypeScript与Vue组合开发记录点(三)
TypeScript与Vue组合开发记录点(三)pinia安装脚手架vite安装状态管理库pinia配置pinia定义状态仓库使用pinia状态变化数据持久化SCSS样式Props传递组件数据方法样式的Scoped属性样式深度选择器超出内容滚动条空数据显示内容路由守卫中的next()js中的next()全局前置守卫calc()函数作用域插槽nextTick()``标签Popup组件This.$emit()CSS样式注意点v-bind和v-onv-bindv-onpiniapinia与vuex相似,是Vu原创 2022-05-05 17:02:40 · 650 阅读 · 0 评论 -
TypeScript与Vue组合开发记录点(二)
TypeScript与Vue组合开发记录点Vue-bus中央事件总线Vue-meta用法StoragesessionStorage.setItem()sessionStorage.getItem()sessionStorage.key()TypeScript定义函数中参数带?号Element UI的Table表格HTML代码转义字符 前端Proxy配置代理服务器,解决跨域问题Vue-bus中央事件总线非父子组件(例如兄弟组件)之间传值的方式,可以用vuex,也可以用Vue-bus中央事件总线。原创 2022-04-29 17:14:23 · 412 阅读 · 0 评论 -
TypeScript与Vue组合开发记录点(一)
TypeScript与Vue组合开发记录点TypeScript使用Vue-property-decorator属性装饰器@Component(options:ComponentOptions = {})用法@Prop(options: (PropOptions | Constructor[] | Constructor) = {})用法@PropSync(propName: string, options: (PropOptions | Constructor[] | Constructor) = {})用原创 2022-04-28 16:26:42 · 698 阅读 · 0 评论 -
TypeScript快速上手,class,public,private,extends
TypeScript快速上手,class,public,private,extends运行快速上手类型批注class说明publicprivateextends继承完整代码运行效果运行快速上手在windows终端cmd命令行以管理员身份运行,输入cnpm install -g typescript进行安装,记得将cnpm下载源切换到淘宝镜像源。然后继续输入tsc -v查看是否安装成功。出现版本号即表示安装成功。类型批注TypeScript 通过类型批注提供静态类型以在编译时启动类型检查。这是可选的原创 2022-04-08 12:13:55 · 475 阅读 · 0 评论 -
cnpm|npm设置镜像地址操作
cnpm|npm设置镜像地址操作npmcnpm使用npm|cnpm安装包npm1.查看当前的镜像源npm config get registry2.修改当前的镜像源为淘宝镜像源npm config set registry https://registry.npm.taobao.org3.查看当前npm信息npm -vcnpm1.查看当前的镜像源cnpm config get registry2.修改当前的镜像源为淘宝镜像源cnpm config set registry h原创 2022-04-07 09:57:55 · 5354 阅读 · 0 评论 -
node.js入门,day7
node.jsJWT认证机制(token值)在express中使用JWT(token值)案例演示项目初始化登录注册JWT认证机制(token值)在express中使用JWT(token值)注意:新版本的jwt需要配置一下algorithms:['HS256']新建以下工程文件夹打开终端,输入以下命令进行安装包。npm i jsonwebtoken express-jwt。app.js代码如下// 导入 express 模块const express = requ原创 2022-01-09 19:45:58 · 756 阅读 · 1 评论 -
node.js入门,day6
安装并配置MySQL素材下载地址:https://pan.baidu.com/s/1HfNYzCdfrVUR-StdSUChoA 密码:1234。下载完成后找到day5的资料。在vs code中打开预览原创 2022-01-08 22:39:41 · 1011 阅读 · 0 评论 -
MySQL安装配置
MySQL安装和配置下载相关资料查看安装教程下载相关资料下载地址:https://pan.baidu.com/s/1HfNYzCdfrVUR-StdSUChoA 密码:1234。如果网盘下载速度慢,也可以只选择下载day5这一文件夹。下载完成后,找到如下文件夹,打开安装教程里的README.md文件。查看安装教程在vs code中打开预览,跟教程一步步安装。...原创 2022-01-08 15:01:06 · 282 阅读 · 0 评论 -
node.js入门,day5
node.jsexpress监听get和postexpress获取url中携带的参数静态参数动态参数express托管静态资源nodemon使用express路由express路由的使用模块化路由express中间件express中间件初体验中间件的分类自定义中间件使用express与接口CORS跨域资源共享CORS响应头部Access-control-AllowCORS请求的分类编写JSONP接口express监听get和post新建25.js文件,代码如下// 1.导入expresscon原创 2022-01-07 22:01:38 · 639 阅读 · 0 评论 -
node.js入门,day4
node.jsnpm包的分类规范包的结构开发属于自己的包发布包模块的加载机制expressnpm包的分类注意:工具性质的包,才有全局安装的必要性。如何使用这个i5ting_toc包,见下图所示。在下载的资料中找到这个md文件,然后注意命令运行时的目录,输入运行命令后,按回车即可弹出网页。规范包的结构开发属于自己的包我们新建了如下工程文件其中package.json代码{ "name": "my-package", "version": "1原创 2022-01-06 21:52:58 · 725 阅读 · 2 评论 -
node.js入门,day3
node.js时钟web服务器案例模块化node.js中的模块化模块作用域向外共享模块作用域中的成员模块化规范npm与包npm初体验格式化时间案例npm其他注意点包管理配置文件package.json中的dvDependenices与dependenices解决下包慢问题![在这里插入图片描述](https://img-blog.csdnimg.cn/f1c2e30fd6fe4868bac02923a6a074d5.png?x-oss-process=image/watermark,type_d3F5LXp原创 2022-01-05 22:31:29 · 929 阅读 · 4 评论 -
node.js入门,day2
node.jsfs文件系统模块fs.readFile()fs.writeFile()练习考试成绩整理动态路径拼接问题解决方案1️⃣:解决方案2️⃣解决方案3️⃣path路径模块path.join()path.basename()path.extname()时钟案例HTTP模块创建最基本的web服务器了解req请求对象了解res响应对象防止中文乱码根据不同的url响应不同内容fs文件系统模块const fs=require('fs')在安装node.js时,就已经安装fs模块了。fs.readFi原创 2022-01-04 22:32:40 · 754 阅读 · 0 评论 -
node.js入门,day1
nodejs入门浏览器中的javascript运行环境什么是node.jsnode.js环境的安装浏览器中的javascript运行环境不同的浏览器使用了不同的javascript解析引擎。以chrome浏览器的v8解析引擎性能最好。javascript也可做后端开发,借助一个运行环境,node.js。什么是node.js点此处进入官网地址。node.js环境的安装node.js官网会有两个版本。LTS和Current版本。建议选择LTS版本,在安装过程中选择默认选项,无脑原创 2022-01-03 22:28:45 · 537 阅读 · 1 评论 -
webpack5.第八篇
webpack5webpack详细配置之outputwebpack详细配置之modulewebpack详细配置之resolvewebpack详细配置之devserverwebpack详细配置之optimizationwebpack5总结webpack详细配置之output复制webpack5第七篇的entry工程文件。并重命名。修改config.js代码,增添一些对打包输出文件的相关配置。const { resolve } = require('path');const HtmlwebpackPlu原创 2022-01-03 20:32:41 · 513 阅读 · 0 评论 -
webpack5.第七篇
webpack5懒加载和预加载懒加载预加载总结PWA多进程打包externalsDLL(动态链接库)总结性能优化总结webpack详细配置之entry懒加载和预加载懒加载懒加载就是,在实际项目中,某个.js文件,还没有用到,此时不进行加载,当网页中进行某个功能,有需要时在加载。复制webpack第六篇的代码分割工程文件,修改其中的config.js,进行精简。const { resolve } = require('path');const Htmlwebpackplugin = require(原创 2022-01-02 21:55:42 · 579 阅读 · 0 评论 -
webpack.第六篇
webpacktree shakingcode split(代码分割)第一种方法第二种方法第三种方法tree shaking复制webpack第五篇的生产环境缓存工程文件。然后重命名。该tree shaking(树摇),去除无用的代码。并在src文件夹下新建test.js,测试使用该功能,是否会把没有引用的js代码也打包。test.js代码如下,两个函数都使用export暴露出去。export function mul(x, y) { return x * y;}export funct原创 2022-01-01 22:58:53 · 434 阅读 · 0 评论 -
webpack5.第五篇
webpack5webpack性能优化开发环境性能优化(HMR)source_maponeOF生产环境的缓存配置webpack性能优化主要包括以下几点# WEBPACK性能优化* 开发环境性能优化* 生产环境性能优化## 开发环境性能优化* 优化打包构建速度* 优化代码调试## 生产环境性能优化* 优化打包构建速度* 优化代码运行的性能开发环境性能优化(HMR)将webpack第二篇文章中构建好的开发环境配置工程完整复制一份,并重命名。在终端输入npx webpack se原创 2021-12-31 22:31:51 · 496 阅读 · 0 评论 -
webpack5.第四篇
webpack5js兼容性处理eslint压缩html和js生产环境配置汇总js兼容性处理eslint把上一篇的js语法检查工程文件复制一份,并重命名为js兼容性处理。当我们js文件使用了ES6以及更高版本的语法时,某些浏览器会不识别其内容,出现运行错误。修改index.js文件内容以es6标准如下const add = (x, y) => { return x + y;}console.log(add(2, 5));修改其中的config.js配置文件,进行兼容性处理。con原创 2021-12-30 22:16:52 · 409 阅读 · 0 评论 -
webpack5.第三篇
webpack提取css成单独文件css的兼容性处理压缩cssjs语法检测提取css成单独文件先用以往的开发模式来打包。创建以下文件夹,build里的内容是打包后生成的。index.html代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">原创 2021-12-26 21:25:26 · 599 阅读 · 3 评论 -
Webpack5.第二篇
Webpack5打包其他资源devServer开发环境配置打包其他资源字体图标等属于其他资源,即不需要做优化做压缩的资源。首先去阿里矢量图标库下载一些图标。下载后解压,里边有这些东西。demo_index是使用说明。然后我们将iconfont.css等文件放到工程文件夹下。我们需要对css文件、html文件、js文件、ttf文件进行打包。那么在webpack配置文件中写代码。const { resolve } = require('path');const HtmlwebpackP原创 2021-12-25 22:52:03 · 547 阅读 · 0 评论 -
Webpack5.第一篇
webpackwebpack简介webpack核心概念webpack初体验增加webpack打包样式资源功能增加打包html资源功能新增打包图片资源webpack简介先下载插件esay-less,自动把写的less样式转换为css样式。新建如下文件然后在终端打开,输入npm init然后输入webpack_test进行打包,会运行产生一些默认值,直接回车就可以。然后输入npm i jquery下载相关包。下载完成后,整个文件夹内容如下<!DOCTYPE html>原创 2021-12-24 22:24:35 · 742 阅读 · 0 评论 -
ES6,DAY6
ES10新特性数组方法扩展ES10的Symbol.prototype.description属性ES11的私有属性ES11的promise.allSettleES11可选链操作符动态import加载ES11新数据类型BigIntES11的globalThis数组方法扩展flat降维数组。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http原创 2021-12-23 22:00:19 · 312 阅读 · 0 评论 -
ES6,DAY5
ES6babel对ES6模块化代码转换ES6模块化引入NPM包ES7新特性ES8新特性async与await结合实践async与await封装ajax请求es8中的Object属性ES9扩展运算符与rest参数ES9正则扩展babel对ES6模块化代码转换安装相关工具,在vs code中打开终端命令行。输入npm init --yes(使用npm命令需要安装node.js)。然后输入npm i babel-cli babel-preset-env browserify -D进行安装工具。安装完成后原创 2021-12-23 20:23:23 · 386 阅读 · 0 评论 -
ES6,DAY4
ES6的一些方法Promise的catch方法集合介绍与APIset(集合)set集合实践Map数据结构class类class类静态成员类继承子类对父类方法的重写class里的get和set数值扩展对象方法扩展模块化es6模块暴露数据语法汇总es6引入模块的语法汇总Promise的catch方法<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta h原创 2021-12-20 16:53:44 · 349 阅读 · 0 评论 -
ES6,DAY3
PromisePromise简介promise基本语法promise读取一个文件内容promise封装ajax请求Promise.prototype.then方法Promise简介解决回调地狱的问题。promise基本语法<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" conten原创 2021-12-09 22:42:59 · 311 阅读 · 0 评论 -
ES6,DAY2
ES6,DAY2rest参数扩展运算符扩展运算符的应用Symbol基本使用Symbol使用symbol创建对象属性Symbol内置值迭代器迭代器应用生成器生成器函数参数生成器函数实例rest参数先看ES5中的Arguments,获取实参的方式。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible原创 2021-12-08 20:32:56 · 467 阅读 · 0 评论 -
ES6,DAY1
ES6,DAY1ES简介let变量声明let经典案例实践const声明常量解构赋值数组的解构赋值对象的解构赋值模板字符串使用简化对象写法ES6声明函数ES6箭头函数特性箭头函数实践函数参数默认值ES简介ES全称EcmaScript,是脚本语言的规范,JavaScript是EcmaScript的一种实现,ES新特性指的就是JavaScript的新特性。ECMA中文名称为欧洲计算机制造商协会,组织目的是评估、开发和认可电信和计算机标准。let变量声明<!DOCTYPE html><原创 2021-12-07 19:54:05 · 543 阅读 · 0 评论 -
flask+HTML实现电影观看清单web应用
电影观看清单web应用引言功能简要说明后端完整代码完整源码链接引言1.工程运行的依赖见requirements.txt,data.db是数据库文件。2.工程运行方法,打开pycharm,选择该工程,选择pycharm底部的终端。3.cd进入到工程文件夹MyTest,输入flask run,即可生成一个本地网址,进入该网址即可。4.其中Full_version.py是所有后端flask代码集合的一个文件。实际运行中,我们把该文件内的代码分类保存在了watchlist文件夹中的五个.py文件中。5.原创 2021-11-10 11:48:17 · 2102 阅读 · 0 评论 -
小程序购物城项目实战(下篇)
购物城项目实战(下篇)提示支付页面创建订单提示(下篇)承接(中篇内容),接口文档和阿里图标库已在(上篇)给出,本文所粘贴代码或许存在不完整之处,完整代码请见本文末尾。支付页面创建订单(中篇)里边,我们有了token值,紧接着这里就需要创建订单了,获取订单编号。现在回到pay文件夹下的index.js中进行修改代码,编写如果有token值时的下一步逻辑。这里用到了接口文档如下图所示。接口文档(地址)。...原创 2021-10-25 21:39:58 · 711 阅读 · 0 评论 -
小程序购物城项目实战(中篇)
购物城项目实战(中篇)提示商品详情轮播图动态渲染完善商品详情页面的商品简介商品详情页面-优化动态渲染点击轮播图进行大图预览商品详情页的底部工具栏商品详情页的加入购物车购物车内容页面提示(中篇)承接(上篇内容),接口文档和阿里图标库已在(上篇)给出,本文所粘贴代码或许存在不完整之处,完整代码请见(下篇)。商品详情轮播图动态渲染先书写轮播图结构,在goods_detail文件夹下的index.wxml内修改代码。然后index.wxss修改样式<!--pages/goods_detail/ind原创 2021-10-22 22:07:14 · 747 阅读 · 0 评论 -
小程序购物城项目实战(上篇)
项目实战小程序的第三方框架资料和文件准备开始搭建首页-搜索框首页-轮播图首页-轮播图渲染优化数据请求方式首页-分类导航首页-楼层分类页面小程序的第三方框架腾讯的 wepy 类似vue框架美团的 mpvue 类似vue框架京东的 taro 类似react框架滴滴的 chameleonuni-app 类似vue框架资料和文件准备接口文档地址。(地址)小程序开发文档。地址阿里巴巴字体图标库。地址mdn。添加链接描述开始搭建新建一个工程。并填入自己的Appid目录下新增以下文件夹。原创 2021-10-20 21:25:50 · 1753 阅读 · 3 评论 -
axios,Day2,axios取消请求
axios工作原理axios取消请求axios取消请求准备一个案例,html代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-widt原创 2021-10-17 14:21:27 · 97 阅读 · 0 评论 -
axios,Day1,axios入门
axios入门axios简介json-serveraxios的介绍与页面配置axios基本使用axios的其他请求方法axios配置对象详细说明axios的默认配置axios创建实例对象发送请求axios拦截器axios简介是前端最流行的ajax请求库。json-server通过json-server这个包可以快速帮我们搭建一个http服务。后续可以使用axios向其发送或请求数据,安装时,在vs code 的集成终端中,输入npm install -g json-server接着创建一个d原创 2021-10-15 16:57:02 · 133 阅读 · 0 评论 -
Ajax.Day3.Ajax与Jquery
Ajax与jqueryJquery中的AJAXJquery通用方法发送AJAX请求axios发送AJAX请求使用fetch函数发送AJAX请求同源策略解决跨域,JSONP跨域请求CORS响应Jquery中的AJAX首先新建一个案例client.html,使用了bootstrap进行样式美化。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta ht原创 2021-10-14 19:10:28 · 100 阅读 · 0 评论