- 博客(24)
- 收藏
- 关注
原创 react项目axios网络请求封装(包含取消请求不报错)
api文件夹,包含path文件夹:请求接口地址,index.ts:统一导出接口调用点,server.ts:api请求通用操作,tool.ts:处理server.ts的函数。
2023-09-04 17:51:18
657
原创 搭建React项目文档、React中文文档、ReactRouter文档、Redux中文文档
搭建React项目文档:React中文文档:ReactRouter文档:Redux中文文档:
2023-08-04 11:49:58
271
原创 vite+react搭建人力管理系统项目(2)
登陆页面用户名、密码、图形验证码,点击登录手机发送短信填写验证码这个地方用测试环境虚拟的为1234,点击确定之后去获取用户信息,主要说的是点击‘确定’之后api获取到用户信息的逻辑。菜单则由接口返回来进行菜单权限控制,也就是之前存在的store里面的menus,主页每个用户都有,接口不会返回主页home的权限,所以根据接口的字段在store里手动加上。先判断路由是否为:‘/',’/login‘,如果是,直接跳转到’/home‘-------未登录:路由是否处于登录页面。
2023-08-03 09:47:59
315
原创 前端项目git、ESLint、prettier基本配置(前端工程化)
在 Git 中分为客户端钩子和服务端钩子,客户端钩子被用户操作触发,例如 commit,服务端钩子被网络动作触发,例如 pushed。
2023-08-01 15:39:52
645
原创 antd中编辑表格的单元格EditableCell
2.编辑组件一定要放在应用组件APP的外面,保证调用的时候每个单元格和行不会互相影响,这个地方如果放在里面目前遇到的问题:编辑单元格的时候form表单必填的提示会消失,比如第一个单元格修改的时候空着,下面会出现必填提示,第二个修改的时候有数据,失焦的时候第二个是保存成功的,但是同时第一个也默认变成最初的数据也保存成功了,当然正确的表现形式则是第二个失焦,第二个保存成功,第一个依旧是有必填提示的。1.一定按照antd提供的代码格式,编辑的方法这一块放在当前组件的外面。
2023-07-26 12:03:52
1554
原创 vite+react搭建人力管理系统项目(1)
react项目基本src目录需要添加的有:路由router,状态管理库redux,接口请求api,公共组件Components,全局常量constants(按照项目而定),钩子hooks,布局layout,页面pages,工具utils,插件声明plugins.d.ts(按照项目而定)生产环境和测试环境为/api(/为相对路径,所以请求的时候看到的是:服务器ip地址/api/接口地址,看不到真是的后端地址的)打包之后根据不同的环境配置nginx代理,代理地址就是/api了(具体配置自行百度哈)
2023-03-17 12:35:51
539
原创 前端超过一定宽度文字就用...代替显示(单行多行文本超出...)
前端超过一定宽度文字就用…代替显示(单行多行文本超出…)注意:不要用display:flex,如果本来的需要flex,则要进行js判断,超过一定要求显示…的时候把display:flex换掉没超过的时候居中显示,超过就要从右边开始显示了//css 超过出现...width:235px;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;```...
2022-04-13 10:51:19
1435
原创 前端项目发布完服务器后看是否更新为最新发布的代码(是否有缓存)
背景:webpack构建的时候文件名一样如果浏览器不强刷,则会保留上一次的构建代码内容,所以在webpack构建文件名称的时候加上当前的时间,这样文件名不会因为一样而加载上一次的内容 let time = new Date().getTime(); config.output.filename = `[name].${time}.js` config.output.chunkFilename = `[name].${time}.js`但是移动端小程序内嵌的H5网页在线上环境是没
2022-04-02 18:45:45
1777
原创 js当前时间之前的90天或者之后的N天,近90天
GetDateTime(dayNum) { var dateDay = new Date(); dateDay .setDate(dateDay .getDate() + dayNum) //获取dayNum天后的日期 console.log(dateDay ); var y = dateDay .getFullYear(); var m = (dateDay .getMonth() + 1) < 10 ? "0" + (dateDay .getMonth()
2022-03-22 10:36:46
2335
原创 uni-app中scroll-view不触发@scrolltolower事件(某些机型)
背景:uni-app中scroll-view中用@scrolltolower的时候需要设置lower-threshold的值,(a)当设置为10的时候,某些机型滑动太快时到了底部再也划不动同时也没触发这个事件,需要往下划一下再接着往上滑才会触发,比如红米10;(b)当设置为0的时候,红米10滑倒底部直接不会触发的,怎么滑都不会触发,但是ios系统的都没问题
2022-03-11 16:08:28
8563
1
原创 vue下载文件(excel)
vue中下载后端返回的文件流或者网址首先调用接口的方法我这个是把接口地址单独拿出来这是定义在公共方法中,在main.js就引入的js文件export function downLoad(url){//post的时候参数就是(url,data)第二个是请求体 return newPromise((resolve,reject)=>{ axios({ method:'get',//post(根据规定的方法get或者post) url:dom
2021-12-09 11:16:09
826
转载 25个正则表达式
作者:Sunshine_Lin链接:https://juejin.cn/post/7016871226899431431来源:稀土掘金著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。1、手机号码的校验const phoneReg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/const phoneStr1 = '18886233487'console.log(phoneReg.test(phoneStr1)) // trueconst phoneSt
2021-10-09 11:32:15
238
原创 ElementUI中table里header-row-style设置背景颜色不生效解决方法
ElementUI中table里header-row-style设置背景颜色不生效解决方法<el-table :data="ruleData" border :header-row-style="{background:'red'}" style="width: 50%">用:header-row-style="{background:‘red’}不生效,改用header-cell-style,官方解释:表头行的 style 的回调方法,也可以使用一个固定的
2021-08-25 15:42:45
13882
7
原创 解决Element中点开Dialog 对话框灰布在最上层的方法
解决Element中点开Dialog 对话框灰布在最上层的方法解决Element中点开Dialog 对话框灰布在最上层的方法append-to-body: Dialog 自身是否插入至 body 元素上。嵌套的 Dialog 必须指定该属性并赋值为 true设置属性 :append-to-body='true’即可让对话框在最上层,灰布在它的下面 <el-dialog title="付款信息" :visible.sync="centerDialogVisible"
2021-07-19 18:10:26
3502
1
原创 前端面试总结
1.原型与原型链理解:实例都是由构造函数创建的,构造函数都有一个原型对象,原型对象里有个指针指向了构造函数,同时实例里也有个指针指向了原型。那把原型对象作为另一个类型的实例,也就是原型对象里有一个指针指向了原型对象的原型,原型对象的原型有一个指针指向构造函数,所以这样层层递进,构成原型链,原型还有原型,最终指向的是object对象的原型,那object对象的原型指向的则为null。函数获取原型用prototype属性,实例获取原型用__proto__(浏览器赋予属性)好处:1.数据共享,节省资源
2021-05-08 16:34:13
91
原创 uchart修改样式
uni-app插入ucharts后,ucharts修改样式基本操作上一篇借用封装好的uni-modules文件后,完成了基本的图表插入,接着说一下怎么修改图表的样式<qiun-data-charts type="pie" :chartData="PieA" background="none" :animation="false" />chartData绑定的仅仅是配置里面的数据(当网络请求的时候把返回的数据直接赋值给它就可以),其中categories对应的是echarts中的xAxis
2021-04-30 16:19:01
4336
2
原创 uni-app插入ucharts(echarts)图表,支持H5,APP,小程序
uni-app插入ucharts(echarts)图表,支持H5,APP,小程序这是uni-app里通用的图表方法,从ucharts官网上整理的链接: https://pan.baidu.com/s/1vMkVr2A_ycZ95Slj6_-xCg 提取码: 2e61 复制这段内容后打开百度网盘手机App,操作更方便哦压缩包打开后这是个主要的文件夹放在根目录上然后直接在需要的vue文件里引入(下面代码是个样例,根据自己情况而定)<qiun-data-charts type="column"
2021-04-30 09:35:47
1841
原创 uni-app插入echarts图(分享)
uni-app插入echarts图(分享)资源我是从别的地方找的,不过是真的好用,也不用从uni-app中下载插件链接: https://pan.baidu.com/s/1w5wsmq3CFspcE2y8X-YNuQ提取码: 7q5t把压缩包里的文件夹components放到项目的根目录里需要在哪个页面用echart图就在哪个页面把里面的echarts.vue引入(别忘了components里面注册一下)echart.vue就是封装好的组件,所以直接用option就是echart图的配置
2021-04-26 15:17:14
1150
8
原创 Vue中输入空格
vue输入多个空格解决方法(uni-app也一样)先说一下,’\u00a0’是’nbsp’的16进制表示,其他空格也可以使用下表的值:在此之前,看了很多用法,都是说用空格占位符或者转义字符的,但是vue中直接放在文字里只能有一个空格我解决的方法就是把占位符或者转义字符放在标签的v-html中,这个用法才能实现多个空格ps:vue的v-html中要用转义字符的16进制表示同样,uni-app中text标签中有decode属性,但是我着实没用明白,空格也是用的v-html</text&
2021-04-26 14:36:23
17454
原创 ES6(1)(2)总结
以上两章讲解了类和对象,这一章总结一下类和对象三个注意点:1.ES6中类没有变量提升,所以先定义类,然后再能通过类进行实例化对象。 class School{ constructor(sname,special){ this.sname=sname this.special=special } ...
2020-04-04 22:16:06
216
原创 ES6(2)
**类的继承extends和super关键字**2.1继承现实中的继承:子承父业,比如儿子继承父亲的姓程序中的继承:子类可以继承父类的一些属性和方法,只需写上entends就可以子类继承父类语法:class Father{//父类}class Son entends Father {//子类继承父类}例: class Father { constru...
2020-04-03 17:36:59
1051
原创 ES6创建类以及添加共有方法
1.1创建类语法格式:class name { //class body}实例化:var xxx=new name()//注意:必须使用new实例化对象例://创建一个class,此处创作一个 学校 类class School {}//实例化这个类new School()1.2.类constructor构造函数定义:constructor()方法是类的构...
2020-04-02 19:20:45
1347
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人