- 博客(271)
- 收藏
- 关注
RSS订阅原创 通过uni.chooseImage返回的临时路径转为base64
chooseimage的succes函数中的res.tempFilePaths，是图片的一个临时路径，没法直接传给后端接口使用，且接口需要的是base64格式的。uniapp官方API文档：https://uniapp.dcloud.net.cn/api/media/image.html#chooseimage。getImageInfo的src属性可以接受临时的文件路径，且会返回图片的本地路径path，用这个path通过一个函数转为base64格式即可。
2023-09-20 14:37:10
1110
原创 【vue】jeecgBoot没有后端接口时，前端如何将JeecgBoot项目跑起来
至于登陆的账户和密码，可以在链接：https://boot.jeecg.com/user/login中，获取演示账号密码进行登陆，就可以了。，这是JeecgBoot的官方在线接口，可以让我们在没有后端接口的情况下，在登录页可以拿到验证码，先把项目运行起来。
2023-04-10 10:10:06
828
原创 【vue】Ant Design Vue中使用Table组件实现设置某个单元格的样式
根据返回的某个标准值，让表格中的每个值跟这个标准值进行对比，大于了这个标准值，该单元格就标红显示。
2022-11-18 17:09:16
1814
原创 【uniapp】uniapp开发移动端项目使用highcharts（蜘蛛图示例）
*第二步：**在UI界面中准备一个盒子来放图表。**第一步：**安装highcharts到项目。**第三步：**在需要展示图表的。方法中初始化图表，然后在。
2022-08-20 17:50:49
1431
3
原创 【JS】前端处理后端返回的流（转为word文档或excel）
前提：后端返回的流是word格式的，是一堆乱码，前端需要对流处理并导出为word格式实现：主要是借助于和标签的和属性具体代码实现如下：按项目需求：要导出某个用户的空白试卷和已答试卷封装好的方法：...
2022-08-06 13:11:17
4105
原创 【vue】Ant Design Vue组件中的Select 选择器实现全选/全不选功能
因为 Ant Design Vue 组件中的 Select 是没有全选/全不选功能的，但是项目中有这个需求，而且确实方便，于是就自己简单的自定义了一下，最终实现效果如下：
2022-07-08 14:57:41
4233
原创 【vue】vue项目中实现pdf预览功能
我用的方法是，所以前提得有一个后端返回的pdf文件路径，放到地址栏可以直接预览，而不是直接下载下来的。实现方式如下：最后的效果如下：说明：pc端实现pdf预览方式蛮多的，也可以使用插件，也可以用，但需要用一个对话框组件去展示...
2022-07-07 21:56:44
1561
原创 【uniapp】uniapp开发app项目实现在线预览pdf文件
1.需要从网上下载一份的文件放到自己的项目中2.除了文件，其他文件可以新建一个文件夹，统一放到该目录下，然后将文件夹放到项目的目录下，也单独的放到目录下，最终如下图所示：3.要实现pdf预览，需要用到的api，新建一个文件，写上如下代码：4.点击某个pdf文件，跳转到刚刚新建的文件中，且需要携带url参数跳转，会根据url后的参数获取到的数据，生成pdf并渲染到页面中，如下所示：............
2022-07-04 15:58:58
7632
12
原创 【vue】在vue项目中按顺序动态24个英文字母选项：A B C D E F......
点击增加选项和答案后，会按顺序新增24位的英文字母：ABCDE......
2022-06-30 13:08:52
2260
原创 Echarts图表常用的配置项、自定义legend图例（自定义图例在文章最后~）
使用数据可视化，最终里面的数据肯定是从后端接口拿到的，需要在 methods 中再定义方法去调接口拿数据，然后在这个方法里面调用定义图表的方法，然后以函数传参的形式，把从接口拿到的数据传参到定义图表的方法中...
2022-06-03 21:47:22
3466
原创 React：在发表评论功能中加入表情emoji
简单效果示例：具体实现：emoji网站：https://www.emojiall.com/zh-hans/all-emojisimport React from 'react'// 1. 在类组件中定义好自己的emoji数据列表class Emoji extends React.Component { state = { txt:'', // 评论 isShow:true, // 控制弹层的展示和隐藏 emojiList: [ // emoji 数据列表 { i
2022-05-10 22:22:07
1530
原创 严格模式下和非严格模式下this的指向问题
严格模式严格模式下，如果没有明确指定函数的调用者，最后的结果为：undefined'use strict'function fn2 () { console.log('this=>',this)}// 函数调用时指定不明确，结果为undefinedfn2()非严格模式非严格模式下，如果没有明确指定函数的调用者，默认会以当前的环境作为this的指向function fn2 () { console.log('this=>',this)}// 函数调用时指定不明确，默认指
2022-05-05 17:29:49
463
原创 JS：一些常用的正则表达式验证规则
校验姓名：// 只能输入1-6位的中文或汉字/^[\u4E00-\u9FA5A-Za-z]{1,6}$/校验手机号：只能是11位数字，且必须以1开头第二位数字取值范围：3-9第三位及剩余的数字9位/^1[3-9]\d{9}$/用户名校验：必须是1-8位的字母或数字，支持_和-/^[a-zA-Z0-9_-]${1,8}/身份证号码校验：/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/...
2022-03-26 12:04:46
452
原创 Vue:在一个组件中使用另一个组件的三个步骤
比如：有一个App.vue组件 和一个 MyHeader.vue组件，想要在App组件中使用MyHeader组件，需要以下三步：<template> <div> # 3.在DOM结构中以标签的形式使用组件 <my-header></my-header> </div></template><script>// 1. 先导入MyHeader.vue组件import MyHeader from './comp
2022-03-08 13:19:33
1773
原创 Vue:侦听器watch
watch侦听器可以侦听到data中数据的变化，当值发生了改变，watch 侦听器就会被触发，所有的侦听器函数都要写到watch 节点中代码示范：<template> <div> <p>小宇今年 {{age}} 岁了</p> <button @click="age++">年龄+1</button> </div></template><script>export default{
2022-03-08 13:09:52
562
原创 Vue:vue中的指令（属性绑定指令、事件绑定指令、修饰符、双向绑定指令...）
内容指令v-text指令：v-text 和原生js中的 innerText 差不多，都无法解析标签，会把标签当做文本输出，在vue中使用 v-text指令会覆盖标签原来的内容代码示范：<template> <div> # 最后输出结果为Hello Vue~~会被覆盖掉 <p v-text="msg">Vue~~</p> </div></template><script> export defaul
2022-03-08 11:52:57
5509
原创 Vue：beforeDestroy和destroyed生命周期函数的特点
beforeDestroy生命周期函数表示即将销毁，此时仍然可以使用子组件的实例、methods、watch到了destroyed生命周期函数，此时已经被销毁，无法再使用子组件的实例，methods、watch
2022-03-08 10:09:50
4410
原创 Vue：beforeUpdate和updated生命周期函数的特点
当beforeUpdate生命周期函数被触发了，说明数据被修改了，此时将要把最新的数据渲染到DOM结构中，但还没有渲染，因此，该阶段看到的DOM元素的内容还是旧的内容。代码操作示例：<template> <div> <p ref="pRef">{{count}}<p> # 单击按钮后，数据就发生了修改，会触发beforeUpdate <button @click="count++">点击+1</button> &l.
2022-03-03 14:03:22
2009
原创 Vue：vue中的指令
内容渲染指令内容渲染指令就是渲染内容的，有三种内容渲染指令：v-textv-text和原生js中的innerText一样，不会解析标签，且会覆盖原来的内容<template> # 最后输出结果为Vue <div v-text="msg">hello</div></template><script> export default{ data(){ return { msg:'Vue' } } }&l
2022-03-02 21:48:49
692
原创 Vue：beforeMount和mounted生命周期函数特点
beforeMount生命周期函数，是将要渲染html结构，但还没有渲染，此时是无法获取到DOM元素的，不常用。mounted生命周期函数，已经将html结构渲染到了浏览器中，此时可以操作DOM元素。操作代码示范：<template> <div class="my_main" ref="mainRef">MyMain组件</div></template><script>export default { data() { .
2022-03-02 16:07:29
2145
原创 Vue：beforeCreate和created生命周期函数的特点
在写好一个组件时，并没有创建Vue的实例，在一个组件中通过标签去使用该组件时，才相当于创建了Vue实例，这个创建的过程是一瞬间的。在创建Vue实例的时候，第一件事要做的就是初始化事件和生命周期函数（第一个绿色的框），当事件和生命周期函数都被初始化好以后，就会立即执行函数：beforeCreate(){}而此阶段的data、methods、props还未被创建，无法使用，如果使用则报错代码演示（MyMain.vue组件）：<template> <div class="my_ma.
2022-03-02 15:01:58
1347
原创 小案例：javascript实现对json文件的增删改查
下面为books.json格文件的数据[{ "id": 1, "bookName": "完美世界", "author": "辰东", "hero": "石昊"}, { "id": 2, "bookName": "武庚纪", "author": "沈乐平", "hero": "武庚"}, { "id": 4, "bookName": "天行九歌", "author": "陈岚", "hero": "韩非"}
2022-02-18 21:29:06
5045
原创 Node:如何将自己写的包推送到npm主站上
1.首先要新建立一个空的文件夹2.在空文件夹内npm初始化在终端输入命令:npm init// 需要注意package name的名字不能带中文、特殊字符3.打开package.json文件，里面的"main"："index.js"就是我们在里面写代码的文件名（可以自己改名，一般都叫index），因此可以在文件夹下新建一个index.js的文件；“description”:“可以写上对这个包的一些注释”“author”:“可以写上自己的署名”4.在该文件夹下新建一个：readme.md的文件
2022-02-18 19:19:24
775
原创 Ajax：什么是节流？ --- 高频面试题
什么是节流？单位时间内，控制执行的次数，也就是减少一段时间的触发频率节流的好处同样是为了减轻服务器的压力代码示范：/* css代码 */<style> body { height: 2500px; }</style><!-- body中的代码 --><body> <script> // 不使用节流模式的情况下，频繁触发滚动条事件，会触发非常多的次数，而使用
2022-02-10 22:08:56
95
原创 Ajax：什么是防抖？ --- 面试高频题
什么是防抖？在一段时间内频繁触发某个事件，只会执行最后一次，也就是说将多次触发变成了一次触发防抖的好处避免频繁的调用服务器资源，给服务器带来压力代码示范：/* css样式 */<style> input { width: 200px; height: 25px; outline: none; border: 1px solid skyblue; }
2022-02-10 21:48:50
177
原创 Ajax：自己用原生JS封装ajax请求函数
分成两个页面，一个html页面，一个js页面html页面代码：<body> <button onclick="testGet()">测试get请求</button> <button onclick="testForm()">测试post请求之form-data格式</button> <button onclick="testStr()">测试post请求之/x-www字符串格式</button>
2022-02-10 09:31:06
574
原创 JS：判断对象中是否有数据
Object.keys(对象).length可以判断对象中是否有数据，length为0则表示没有数据，length为1则表示有1条数据，以此类推比如：let obj = {}console.log(Object.keys(obj).length) // 0let obj2 = { name:'Bob'}console.log(Object.keys(obj2).length) // 1...
2022-02-10 08:37:54
3726
原创 Ajax：接口测试工具postman使用方法
postman接口测试工具下载地址：https://www.postman.com/downloads/下载完并安装好后：不要点击中间的两个按钮如果是POST请求方式：
2022-01-24 16:45:10
6839
原创 DOM：DOM基础操作之表格的渲染，上移、下移和删除操作
<style> table { border-collapse: collapse; margin: 100px auto; } td, th { padding: 10px; border: 1px solid #ccc; } button { border: none;
2022-01-11 11:13:59
385
原创 BOM：navigator对象中的userAgent(验证是否为移动端，如果是则跳转至移动端站点)
<script> // 检测 userAgent（浏览器信息） !(function () { const userAgent = navigator.userAgent // 验证是否为Android或iPhone const android = userAgent.match(/(Android);?[\s\/]+([\d.]+)?/) const iphone =
2022-01-09 12:23:44
1714
1
原创 JS：获取html页面的宽，获取网页(html)滚动的距离
// 获取html页面的宽/视口宽let w = document.documentElement.clientWidth// 一说获取网页滚动的距离，那就是html标签(前提是要给window添加滚动scroll事件)let num = document.documentElement.scrollTop
2022-01-08 15:05:58
534
原创 DOM：全选/全不选案例
<table> <tr> <th class="allCheck"> <input type="checkbox" name="" id="checkAll"> <span class="all">全选</span> </th> <th>商品</th> <
2022-01-03 21:13:58
212
原创 JS：秒数转换为时分秒
转换为时分秒的公式：例如，用户输入的是2300秒，那么就创建一个变量接收用户输入的2300秒，然后用公式转换为所需的时分秒即可。// 用户输入任意秒数, 函数计算该毫秒数对应的时分秒, 并返回 let second = prompt('输入秒数：') function getTime(time) { // 转换为式分秒 let h = parseInt(time / 60 / 60 % 24) h
2021-12-29 17:35:34
27115
2
原创 JS：冒泡排序(会使用到交换变量和嵌套for循环的知识点)
冒泡排序就是将一组数据，按从大到小或从小到大的顺序排列。代码如下：<script> // 冒泡排序，按小到大排列 let arr = [10, 2, 6, 4, 3, 5, 1, 23, 19] for (let j = 0; j < arr.length; j++) { for (let i = 0; i < arr.length; i++) { // 拿前两个数进行比较
2021-12-28 16:48:17
338
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人