前端开发
关注
分享
扫一扫
文章平均质量分 51
记录零基础自学前端的点滴收获
全幼儿园最聪明
计算机专业硕士在读
展开
-
小程序地理位置权限申请+uniapp调用uni.getLocation
当前业务涉及员工签到功能，需校验签到位置是否在规定范围内，判断当前能否签到成功，完成在线办公业务场景闭环。即可点击想要申请权限的接口相应的开通按钮填写申请信息（图为我已经申请通过wx.getLocation）（在别的帖子看到要选好图片，不能一眼看出来是在测试环境，而是正常使用的生产环境）我在这里填写的就是图上这两项，根据实际需求填写。提交之后大概5分钟以内就审核通过了，没有提醒，需要自己刷新页面查看。点击左侧导航栏找到最后的“设置”——“基本设置”——“前往填写”此外，需要在uniapp项目的。原创 2024-04-12 16:56:14 · 2628 阅读 · 0 评论 -
前端商品多规格选择问题 SKU 算法实现优化2.0
在阅读本文之前，请先阅读笔者上一篇文章：前端商品多规格选择SKU算法实现找bug上一篇文章最后提到实现的算法存在bug，是哪个地方出现问题了呢？当数据源如下所示时：export const properties = [ { id: "1", name: "容量", attributes: [ { value: "1L", isActive: false, isDisabled: false }, { value: "4L", isActive: f原创 2022-01-06 16:48:31 · 5041 阅读 · 9 评论 -
前端商品多规格选择问题 SKU 算法实现
文章目录一、实现效果二、实现过程详解1.什么是sku2.什么是图3.什么是邻接矩阵4.初始化顶点集和空邻接矩阵5.邻接矩阵赋值6.判断 attribute 是否可选三、Vue源码四、优化修复bug五、总结一、实现效果以一个简单的示例说明：容量有1L、4L两种，颜色有红色、黑色两种，其中1L可选红色/黑色，而4L只有红色规格，不可选黑色，同时，选择了黑色，也不能选择4L。实现效果如下所示（仅做示例，样式粗糙不管啦）：二、实现过程详解1.什么是sku这是商品多规格选择问题，接口返回的数据较为复杂，是原创 2022-01-06 11:10:31 · 10125 阅读 · 5 评论 -
JavsScript 浮点数计算精度问题解决
问题描述在 JavaScript 中整数和浮点数都属于 Number 数据类型，均以 64 位浮点数形式储存。浮点数在进行四则运算时常常会发现出现精度问题，在浏览器控制台试验如下所示：> 0.1+0.2< 0.30000000000000004> 0.3-0.2< 0.09999999999999998> 19.9*100< 1989.9999999999998> 0.3/0.1< 2.9999999999999996解决方案封装原创 2021-12-23 18:09:57 · 686 阅读 · 5 评论 -
Antd｜更改默认样式的一个例子(ant-table)
问题描述有一个业务场景需要大表嵌套子表，大表需要固定最后一列，行展开后会遮挡住子表部分，入下图所示：解决方案在Elements中找到超出部分的对应元素在右侧的element.style中输入display:none发现问题可以解决接下来的问题在于如何修改antd的默认样式在大表定义className="pr-list-table"CSS部分如下所示：.pr-list-table .ant-table-fixed-right .ant-table-expanded-row.ant-tab原创 2021-11-16 16:46:41 · 1097 阅读 · 0 评论 -
Vue + Element UI｜可随商品单价和数量实时更新总价的表格
引入Element UI可参考文章如何在Vue项目引入Element UIElement UI官网效果编辑表格中的单价和采购数量，总金额、商品总价、合计金额可以同步变化。点击测试按钮在控制台打印表格数据源tableData也同步更新。源代码<template> <div> <el-table :data="tableData" border style="width: 100%"> <el-table-column prop="原创 2021-11-12 11:46:12 · 5393 阅读 · 0 评论 -
如何在 Vue 项目引入 Element UI
用脚手架初始化的vue项目目录如下图所示：要引入Element UI，在src/main.js添加以下几行代码就可以啦import ElementUI from 'element-ui'import 'element-ui/lib/theme-chalk/index.css'Vue.use(ElementUI);接下来的开发可以直接使用Element UI提供的组件，无需再次引入...原创 2021-11-12 11:34:51 · 972 阅读 · 0 评论 -
Antd Select 组件设定初始值 Option 选项匹配问题
一、问题描述最近在实现编辑表单的功能时，其中有一个下拉选择框，需要设定初始值，数据源为对象数组，其中包含id和name属性，将id设为Select.Option的key，将name设为下拉选择器展示的内容，结果发现选项匹配出现问题，即选择框中展示了设定的初始值，展开下拉列表，却未勾选。以下为关键部分源代码：<Card title="前端展示"> <FormItem {...formItemLayout} label="前端展示："> {getFieldDecorat原创 2021-09-12 16:14:29 · 4776 阅读 · 0 评论 -
Vue + Ant Design｜按需加载配置 less 出错解决方法
问题描述ERROR Failed to compile with 1 error error in./node_modules/ant-design-vue/es/button/style/index.less解决方法修改 babel.config.js 配置文件module.exports = { presets: ["@vue/app"], plugins: [ [ "import", { libraryName: "ant-design-vue"原创 2021-08-07 21:21:52 · 787 阅读 · 0 评论 -
JavaScript | 手写代码实现 Promise.all 方法
JavaScript 实现 Promise.all 方法function myPromiseAll(list) { let resArray = []; let count = 0; return new Promise((resolve, reject) => { list.forEach((item) => { item.then((res) => { resArray.push(res); count++;原创 2021-07-15 00:57:25 · 368 阅读 · 0 评论 -
JavaScript | 写一个加法函数(sum)，使他可以同时支持sum(x,y)和sum(x)(y)两种调用方式
function sum() { if(arguments.length == 1) { const x = arguments[0]; return function (y) { return x + y; } } else { let ans = 0; for(let i = 0; i < arguments.length; i++) { ans原创 2021-07-12 00:13:54 · 830 阅读 · 0 评论 -
JavaScript | script 标签的 async 和 defer 的作用和区别
async 和 defer 的作用async 和 defer 是为了解决脚本阻塞问题提出的两种解决方案。为什么要脚本阻塞呢？这里的脚本指的是 JS 脚本。HTML 元素是按其在页面中出现的次序调用的，如果用 JavaScript 来管理页面上的元素（更精确的说法是使用 文档对象模型 DOM），若 JavaScript 加载于欲操作的 HTML 元素之前，则代码将出错。async 和 defer 的区别浏览器遇到 async 脚本时不会阻塞页面渲染，而是直接下载然后运行。这样脚本的运行次序就无法控制，只原创 2021-07-11 15:46:58 · 686 阅读 · 0 评论 -
React { }里面可以用if语句吗？
问题通常我们在 React 中配合使用 JSX ，它是一个 JavaScript 的语法扩展。在 JSX 语法中，可以在大括号内放置任何有效的 JavaScript 表达式。那么大括号{ }中可以使用 if 语句吗？答案答案是否定的。在 JSX 语法中，你可以在大括号内放置任何有效的 JavaScript 表达式。而 if 条件判断是一个语句，它不能用于大括号中。那么表达式和语句有什么区别呢？简单地来说，**表达式是一个值，而语句是一个行为。**语句有可能会有值，比如 return true原创 2021-05-18 19:50:07 · 3031 阅读 · 0 评论 -
在浏览器环境使用 less 不生效？anywhere!
在浏览器环境使用 less参考链接—— less 快速入门在你的 html 文件的 <head> 中引入 less ，将 styles.less 替换为你自己的文件名即可。<link rel="stylesheet/less" href="styles.less" /><script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.11.1/less.min.js" ></script>之后你是不是双原创 2021-05-12 10:17:36 · 1057 阅读 · 1 评论 -
GitHub repository 重命名之后 git push
问题描述有时候我们在new repository 时可能还没有考虑清楚，随意定了一个名字，之后想要修改项目名称。本文主要讲述 GitHub 上如何 repository 重命名以及重命名之后，在本地 git push 之前需要执行哪些操作。GitHub repository 重命名1.进入 GitHub 项目地址页面2.点击 Settings3.选择 reset name 输入新的名字保存即可重命名之后的 git push远程仓库重命名之后，origin 已经发生变化，因此显然不能像之前一样直原创 2021-05-07 21:49:51 · 1151 阅读 · 0 评论 -
单页应用不利于SEO？Why
最近在查资料了解单页应用和多页应用的时候，发现它们的一个很重要的区别就是单页应用不利于SEO，而多页应用相较之有利于SEO。刚开始看不是很明白，找到一篇文章总结得很好，先记录在这里，有空再用自己的话来总结~单页应用(SPA)和多页应用(MPA)的区别为何单页面的seo不友好...原创 2021-05-05 14:57:45 · 580 阅读 · 0 评论 -
react 项目配置路由
这部分比较简单，直接使用以下命令npm install react-router-dom参考链接：React-Router quick-start 英文教程可以通过文档中的两个例子来学习理解 react-router1.基础路由import React from "react";import { BrowserRouter as Router, Switch, Route, Link} from "react-router-dom";export default fu原创 2021-05-05 11:15:56 · 505 阅读 · 2 评论 -
react 项目配置 less 使用 antd 组件库
前置条件：已创建 react 项目，已安装 node.js创建一个 react 项目参考链接（若使用 yarn 进行安装配置可以直接看这篇）：Ant Design——在 create-react-app 中使用注意：以下命令的执行需要管理员权限，如果使用VS Code进行开发，可以右键快捷方式，选择以管理员方式运行。一、初步配置1.引入 antdnpm install antd2.修改 react 项目中 src/App.js，引入 antd 的按钮组件（可以将原来模板里面的内容全部删除原创 2021-05-05 11:00:31 · 1057 阅读 · 2 评论 -
创建一个 react 项目
前置条件：已安装node.js还没有安装可以参考以下链接：菜鸟教程——Node.js 安装配置注意：以下命令的执行需要管理员权限，如果使用VS Code进行开发，可以右键快捷方式，选择以管理员方式运行。1.安装脚手架npm install -g create-react-app-g表示全局安装2.用脚手架工具初始化一个项目模板create-react-app 你的项目名称3.进入文件夹，启动页面查看效果cd 你的项目名称npm start看到此页面说明创建 react 项目成功原创 2021-05-05 10:09:01 · 174 阅读 · 0 评论 -
跨域资源共享（CORS）是怎么回事？+ Node Express 代码实现
先来看看MDN文档中关于CORS的介绍CORS （Cross-Origin Resource Sharing，跨域资源共享）是一个系统，它由一系列传输的HTTP头组成，这些HTTP头决定浏览器是否阻止前端 JavaScript 代码获取跨域请求的响应。同源安全策略默认阻止“跨域”获取资源。但是 CORS 给了web服务器这样的权限，即服务器可以选择，允许跨域请求访问到它们的资源。参考链接 ——CORS | MDN跨源资源共享 (CORS) （或通俗地译为跨域资源共享）是一种基于HTTP头的机制，该机原创 2021-05-04 10:10:01 · 323 阅读 · 0 评论 -
Web开发流及各岗位的工作职责
问题描述在找实习的过程中，面对众多不同的岗位名称，发现自己对各个岗位的工作职责以及一个完整的Web项目开发流程不是很了解，因此花了一些时间去查资料，将所得结论和自己的理解记录如下。可能有些说法不是非常准确，但这只是初步的认识。希望可以对您有帮助，如果存在问题欢迎评论告诉我~一、确定项目功能产品经理：把客户提出的项目需求整理成具体功能，画一个原型，画出功能框架UI设计师/工程师：把产品经理提出的功能弄成设计图，进一步明晰项目功能二、开发阶段前端开发：调用接口请求数据，在页面展示后端开发：设计数据原创 2021-05-04 00:10:20 · 456 阅读 · 3 评论 -
什么是前端、后端、数据库？
前端/客户端解释：在浏览器内运行，给用户看的网页语言：HTML、CSS、JavaScript后端/服务器端解释：在一台电脑/服务器电脑上运行，负责接收前端的请求以及处理发给前端的数据，处理业务逻辑以及数据。服务器相当于前端和数据库的中间人的角色语言：Java、Python、JavaScript、Go等数据库解释：负责存储数据，并根据服务器的请求查找并返回需要的数据语言：SQL、MySQL举一个具体的例子： 用户在前端/客户端输入用户名和密码，向后端/服务器发起HTTP/HTTPS请求原创 2021-05-01 10:41:00 · 14729 阅读 · 0 评论 -
html+js提交表单后网页刷新导致控制台打印记录清空 解决方案
问题描述今天使用html+css+js写前端界面代码时，其中涉及form表单的提交等其他操作。前置知识：阻止form表单的提交刷新页面的方法之一是在onsubmit方法的最后return false；我也的确这样做了，但代码中的其他部分出现错误，导致程序还没有执行到onsubmit对应函数的最后，也就没有执行return false;那么form表单提交默认会刷新页面，控制台的报错信息会闪现，这样更是增加了调试的难度。经过查阅资料和研究实践，可以采用如下的方法解决控制台打印记录被清空的问题。解决方原创 2021-04-07 22:18:28 · 1336 阅读 · 0 评论 -
CSS position属性static/relative/absolute/fixed/sticky用法总结
position属性共有5个值：static/ relative/absolute/fixed /sticky，可以分为3类1.staticposition属性的默认值。浏览器会按照源码的顺序，决定每个元素的位置。此时top、bottom、left、right这四个属性无效。2.relative/absolute/fixed相对定位，都是相对于某个基点的定位，每个属性值的基点不同。可以搭配top、bottom、left、right四个属性的一个或多个使用，用来指定偏移的方向和距离。如果一个都不用原创 2021-04-02 15:54:49 · 501 阅读 · 0 评论 -
javascript中==与===的区别
==测试条件更宽松，值相同， 数据类型可能不同===测试条件更严格，值和数据类型都必须相同举例：1=='1' //true1==='1' //false0=='' //true0==='' //false由上面的例子可以看到，你可能会觉得1与’1’被程序判断为相等也没什么，但0与空居然也被判断为相等，若不注意到这个细节，可能引发程序中的某处错误！总而言之，==宽松的测试条件可能导致某些意想不到的错误，应尽量使用严格版本的===...原创 2021-04-02 15:48:55 · 121 阅读 · 0 评论 -
javascript中var/let/const三者的区别总结
1.varvar的使用较let自由，先初始化再定义变量、多次声明相同名称的变量并不会引起错误。先初始化再定义变量的操作可行是因为var存在变量提升由于变量声明（以及其他声明）总是在任意代码执行之前处理的，所以在代码中的任意位置声明变量总是等效于在代码开头声明。这意味着变量可以在声明之前使用，这个行为叫做“hoisting”。“hoisting”就像是把所有的变量声明移动到函数或者全局代码的开头位置。举例：console.log(a); //undefined var a = 100;原创 2021-04-02 15:44:24 · 180 阅读 · 0 评论