-
浅谈个人前端项目中遇到的问题
2020-07-13 00:32:25该文章中我吧自己在做项目中的问题、如何解决方式以及一些经验分享给大家。 问题一:没有随手写上注释的习惯 一个项目中的代码是非常之多的,当你需要找到某些代码的时候没有注释的帮助会很麻烦,从而会影响心情导致...该文章中我吧自己在做项目中的问题、如何解决方式以及一些经验分享给大家。
问题一:没有随手写上注释的习惯
一个项目中的代码是非常之多的,当你需要找到某些代码的时候没有注释的帮助会很麻烦,从而会影响心情导致思路不流畅。所以给自己的每一段代码写上注释就会显得很方便,
问题二:没有边写边看的习惯。
前端工程师比较忌讳先写完整体html代码再写CSS及JS,因为那样会导致你在编程的时候CSS会与HTML造成混乱,对个人来说会比较麻烦。
问题三:书写不够格式化.link_warpper a { display: inline-block; font-size: 16px; color: #fff; padding-right: 50px; padding-left: 30px; float: left; }
开始没有看懂这个提示是什么意思,后来经过自己查阅后发现由于浮动而忽略inline-block
。如果float
的值不是none
,则该框是浮动的,而“display
被视为block
由于浮动后会变成块盒,自己在浮动前加上了变成行块盒,导致出现这个提示错误。
问题四:margin-top
和margin-bottom
不能正常显示
父盒子中的子盒子使用margin-top不管用,需要在子盒子上加{ height:0; overflow:hidden }
问题五:类名定义问题
类名不能以数字开头或者以纯数字开头定义类名; 不推荐(不允许)使用汉字定义类名;
不能以特殊符号或者以特殊符号开头定义类名(_除外); 不要使用标签名定义类名 。
问题六:修改select默认的样式select{ background:none; width:400px; border:1pxsolid #d8d8d8; } option{ vertical-align: middle; }
还有一些其他的小问题,比如标签的合理使用、一些样式书写规则混淆等等就不一一列举了。挑了几个个人常犯的(狗头保命)分享给大家,祝大家的代码一帆风顺,BUG为0!!!!
-
web前端项目中遇到的一些问题总结(08.23更新)
2018-08-23 19:14:54写一些最近工作中Vue项目中遇到的问题。 巴啦啦小魔仙,污卡拉,全身变,小本本,出来吧! 会不定期更新,所以建议收藏。 1.获取一个对象的键(key) 在某种特定需求下(未知的Object类型数据),我们想拿到这个...个人网站 https://iiter.cn 程序员导航站 开业啦,欢迎各位观众姥爷赏脸参观,如有意见或建议希望能够不吝赐教!
写一些最近工作中Vue项目中遇到的问题。
巴啦啦小魔仙,污卡拉,全身变,小本本,出来吧!
会不定期更新,所以建议收藏。
1.获取一个对象的键(key)
在某种特定需求下(未知的Object类型数据),我们想拿到这个未知对象中第一个元素的键(也就是newData)。代码如下
var obj = { newData: { name: "二狗", value: 250 } }
Object.keys()方法,接受一个object类型的参数,返回的是一个数组,数组内容是当前对象所有的键(key)
因此这个时候我们使用Object.keys(obj)[0]即可获取到上面代码中未知对象中的第一个元素的键(也就是newData),我们console打印一下,安排!
打印结果:
2.判断一个元素是否属于当前对象(是否在此对象中)
我们曾接触过如何判断一个元素是否属于当前数组,其中for循环、forEach、some、map等各种优秀的数组的方法都可轻松解决我们的需求。可当目标换成对象之后,我们该怎么判断这个元素是否属于当前对象呢?依旧用之前的代码,如下
这个时候,我们想判断已知newData是否属于obj
/*后台接收到的值 假装看不见*/ var obj = { newData: { name: "二狗", value: 250 } }; /*后台接收到的值 假装看不见*/ /*已知的元素*/ var newData = { name: "二狗", value: 250 };
key in Object用来判断一个元素是否属于当前对象。key为键值对的键,字符串类型,Object为对象类型。返回一个布尔值。例如"newData" in obj,返回true。
打印结果:
3.对一个数组对象中的某个属性进行排序,返回一个新的数组对象如下图,我们想对当前obj数组对象中的age属性进行从小到大的排序,返回一个新的数组对象。
var obj = [ { name: "四狗", age: 10 }, { name: "大狗", age: 30 }, { name: "三狗", age: 15 }, { name: "二狗", age: 18 } ];
sort() 方法用于对数组的元素进行排序。
我们都知道,利用sort方法可以用来对数组中的元素进行排序,引用的是当前数组,返回的是一个新数组。在这里,我们就可以使用一个sort排序函数来实现我们想要的功能。代码如下:
obj.sort(function(a,b){ return a.age - b.age })
打印结果:
扩展:数据如下,提出这样一个需求,obj数组对象按height属性从小到大排序,如果height相同,则按age从小到大排序。
var obj = [{ name: "四狗", age: 10, height: 80 }, { name: "大狗", age: 30, height: 160 }, { name: "三狗", age: 15, height: 80 }, { name: "二狗", age: 18, height: 100 } ]
依旧使用我们的sort函数扩展 ,代码如下:
obj.sort(function (a, b) { if (a.height !== b.height) { return a.height - b.height; } else { return a.age - b.age; } })
打印结果:
4.深拷贝和浅拷贝
浅拷贝只复制指向某个对象的指针,而不复制对象本身,新旧对象还是共享同一块内存。
深拷贝会另外创造一个一模一样的对象,新对象跟原对象不共享内存,修改新对象不会改到原对象。
浅拷贝:代码如下,我们定义了一个obj对象,和一个newObj对象,并让newObj的person等于指向obj对象(实则是将newObj的person属性指向obj对象的指针),所以改变newObj.person.name的值,实则是改变obj.name的值。
var obj = { id: 123, name: "二狗", address: "china" } var newObj = {} newObj.person = obj; //浅拷贝 newObj.person.name = "三狗" console.log(obj.name); //打印三狗
深拷贝 :代码如下,定义obj对象和newObj对象,在给newObje对象的person属性赋值的时候,我们用JSON.parse(JSON.stringify(obj))方法将obj深拷贝了一份,也就是说重新申请了一个空间,与原对象不共享内存,属于完全独立的存在,所以在改变newObj.person.name属性之后,obj.name是不会跟着发生改变的。
var obj = { id:123, name:"二狗", address:"china" } var newObj = {} newObj.person = JSON.parse(JSON.stringify(obj)); //深拷贝 newObj.person.name="三狗" console.log(obj.name);// 打印二狗
具体在业务中使用哪个,还得根据自己的业务需求。当然,深拷贝的方法也有很多个,这里只列出常用的一种方法,JSON.parse(JSON.stringify())
推荐一首不久前在网易云音乐里Get√的一首纯音乐《寂静之声》,超赞,很适合撸代码的时候静静地听。
人要是不给自己一点目标,真的是会越来越懒的啊。今天就这么多,下次再更吧23333。08.23
这里有324.57GB的修仙资料。嘿嘿嘿你懂得。/手动狗头
那么问题来了,如果你也想入坑前端或者学习更多技术,广交天下朋友(基友),认识更多有趣的灵魂的话,欢迎加入前端交流群鸭~
扫二维码加为好友就完事了!安排~ -
前端小白在项目中遇到的问题
2020-08-08 02:25:15解决:使用单独的组件,在该组件中通过antd的<col>来解决 <Col> <p></p> <Button></Button> </Col> 问题二:后端传来的字段是1,转化成对应的汉字 const Choice = { ...问题一.使用ra的field,一列只能展示一个字段,那如果在一列展示后端传来的两个字段呢?
解决:使用单独的组件,在该组件中通过antd的
<col>
来解决<Col> <p></p> <Button></Button> </Col>
问题二:后端传来的字段是1,转化成对应的汉字
const Choice = { 0: '作业', 1: '完成' , 2: '未完成' } // 取值 value = 1 就是对象取值的问题。。。。。 <p>>Choice[value]</p>
问题三:点击一个按钮去调接口访问,使用ant design的抽屉,显示列表,怎么做到 1 2 3 都在表里,如果结果只有3,只显示3,其他为空。然后实现,有记录为编辑,没记录是保存。编辑表使用antd的编辑行的实现。
解决:
1.建立一个空数组res=[],先遍历[top1,top2,top3],
2.如果reslut的length为0,那就创建一个对象,把它push进去res。
3.如果result的length不为0,建立一个空对象item,遍历result,item=reslut[i], 将有的记录保存起来。
3.1.如果item=null,那就push进去剩下的没有的
3.2.否则push进去现有的。
4.返回该数组,将table中的dataresource替换掉const tableData = (result) => { let resultData = []; let markName = ['1', '2', '3']; for ( let i = 0; i < markName.length; i++ ) { let name = markName[i]; if (result.length === 0) { resultData.push({ 'age': undefined 'name': [name], 'id': undefined, }); } else { let item = null; for( let j = 0; j < result.length; j++ ) { if (name === result[j].name) { item = result[j]; break; } } if (item === null) { resultData.push({ 'age': undefined 'name': [name], 'id': undefined, }); } else { resultData.push(item); item = null; } } } return resultData; }
问题四:怎么实现没有记录的时候点击保存调新增接口,有的时候点击保存调编辑接口
const save = ( record ) => { // 无id表示为保存 if ( record.id === undefined ) { add(record); //新增 } else { // 调编辑接口 } };
问题五:table的编辑行,没有+折叠input框的demo,那么怎么结合折叠的状态发生变化,点编辑出现input,取消出现文本的形式?
解决:设置一个可编辑的状态,(编辑行demo中有),setEditing,判断editable是不是true,为true就是可编辑的,否则不可编辑。
const [editingKey, setEditingKey] = useState(''); // 判断是否编辑状态 const isEditing = record => { return record.name === editingKey; }; // 点击编辑时 const edit = record => { setEditingKey(record.name); // record.name === editingKey(setEditing设置的) 为true }; // 展开事件 const expand = ( record ) => { const editable = isEditing(record); return editable ? ( <Input/> ) : <p></p> }
问题六 select的onchange事件既传id又传value(后端需要的字段)的情况,id怎么一层一层的传,在select1中点了某个option,结果要在select2中渲染。
//select 第二级 dataid先在reducer中存一一下,每次通过onchange传最新的reducer //finderrorbyid 传来的id为第一层中level1的 item.id const findErrorById = ( id ) => { let res = []; for(let i = 0; i< data.level2.length; i++) { if ( data.level2[i].id === id ) { res = data.level2[i].values; } } return res; // 第二层中要显示的数据 } // select第二层 对finderrorbyid的结果进行展示 <Select value={error_types.name} onChange={e => onChange("name")(e)} > {mapDataToOptions(findErrorById(Number(dataId)).map(item => ( { value: item.value, text: item.name, id: item.id } )) )} </Select> // 展示方法 function mapDataToOptions(data) { return data.map(item => ( <Select.Option title={item.text} value={item.value+'?'+Number(item.id)}> {item.text} </Select.Option> )); }; // onchange怎么传id和value id进行保存 value对应传给key所对应的字段 ```javascript //e = id?value const onChange = (key) => e => { // onchange(key)(e) let value = e.split('?')[0]; let id = e.split('?')[1]; dispatch({ type: SAVE_ID, payload: id, }) dispatch({ type: CHANGE_LIST, payload: [key]: value, // "name":value }); }; //但是这样有问题,传过去的字段可能是英文,但是你要展示中文,其中的原因就是<select value={error_types.name}> 中传的字段和select option中value字段不一致导致的,即使你传了[name]='zhangsan',也显示不了张三。 // 解决,value传item.text+id, 传text中文给后端 // 其他:未想到
问题七:table的分页
简单思路:在useeffect中发送dispatch调用getlist的接口,传需要的参数例如:id和num 每页的数量,和page当前页。
之后在table中的pagination中的onchange事件中也调用getlist接口传num、page、id等。问题八:
checkbox可选,每次选时调接口,然后如果选了就展示出来,问题是,可以根据后端传的0/1进行展示,但是此时的checkbox选不了。页面刷新后,显示已选。
解决:// 1.首先用创建一个state 其中table中的datasource指的就是datasource const [dataSource, setDataSource] = useState([]); // 建一个初始值 useEffect(() => { setDataSource(list); // 设为后端传来的data并监听它的变化 }, [list]); //2.点击checkbox时 checked是否选中后根据后端传来的is_check来判断 <Checkbox checked={record.is_check} onChange={e => handleChange(e)(record, index)}/> //3.change事件 const handleChange = (e) => (record, changeIndex) => { const tmpList = dataSource.map(({ is_check, ...item }, index) => { //遍历后端给的list return { check_flag: changeIndex === index ? e.target.checked : is_check, //如果点击的index不等于list的index,就是没点击的其他行,让其他行按照传来的is_check进行展示,其他的变成e.target.checked 可以为true,也可以为false ...item } }); setDataSource(tmpList); //变成修改后的datasource // 接口 checkApi({ id: record.id, is_check: e.target.checked === true ? 1 : 0 //给后端传0或者1 }).then(()=>{}) }
问题九(x)
: 点击一个一个button 弹出一个框,如果点了OK,实现页面跳转,自己是使用一个状态设为false,如果点了ok就让它变为true,如果取消就是false,不让它调,但是我会根据true和false来对a标签的href设置,如果为false,那就是空,如果为true就是url,这样的问题是你还得重新再点一下a标签。
解决:// 路由携带参数 history.push({ pathname: '/cs/transfer/evaluating', query: { 'id': 1, 'name': 2 } });
问题十
:后端给了一个导出xsl的接口,前端调了之后,需要做什么特殊的操作吗,还是只是调接口?
解决//问题1:导出不调接口:解决:因为一直从缓存中获取了。传参时加个时间戳 //问题2: 导出的字节流,如果能转换成json对象,那么它里面会包含msg或者status一些错误信息的提示 // 如果不能转换成json对象,那就是可以成功的转化成文件的形式 // 解决: if (status === 200) { // 导出 let blob = new Blob([response.data], {type: "application/vnd.ms-excel"}); //做一个副本 let blob1 = new Blob([response.data], {type: "application/vnd.ms-excel"}); //转成text var reader = new FileReader(); reader.readAsText(blob, 'utf-8'); reader.onload = function (e) { try { const data = JSON.parse(reader.result); // try捕获一下是否能转换成json对象,如果可以取出msg,弹出信息。 message.error(data.msg); } catch (e) { // 如果不可以,说明可以转换成文件直接导出文件就行 let objectUrl = URL.createObjectURL(blob1); // 文件名字 let fileName = response.headers['content-disposition'].split(';')[1].split('=')[1]; // 文件地址 const link = document.createElement('a'); link.download = fileName; link.href = objectUrl; link.click() message.success('导出成功'); } } }else { message.error('导出失败'); } // 导出 exportExcel() { return axios({ method: method, url: url, data: data, responseType: 'blob' }).then(response => { const { status, msg } = response; if (status === 200) { // 导出 let blob = new Blob([response.data], {type: "application/vnd.ms-excel"}); let objectUrl = URL.createObjectURL(blob); // 有名字的导出 //let fileName = response.headers['content-disposition'].split(';')[1].split('=')[1]; let fileName = "测试.xls" // 文件地址 const link = document.createElement('a') link.download = fileName link.href = objectUrl link.click() message.success('导出成功'); } else { message.error('导出失败'); } });.catch(data => { console.log('导出失败'); }) }
问题十一: antd的日期传值的问题,moment
// 在submit传参数时 // 参数: start_date: start_date.format("YYYY-MM-DD"), start_time:sampleParams.start_time.format("HH:mm:ss"), //给默认值 在reducer中通过 moment('00:00:00', 'HH:mm:ss')
问题十二:axios的get的params和post的data的区别
知识点:- produce
- axios
- moment
- treeselect
- cors
收获:
- 尽量不要用href,用路由跳转或者link
- 提交git时的规范: update:modify 信息 in 文件
- 编辑回填,点编辑把现在的record中的该字段通过,draft[字段]=record.字段 传过去,保存起来
-
web前端项目中遇到的难点
2021-04-07 18:50:21但是当这些方法都用了之后,发现打包后还是超过了2M,最后是跟后端配合,把图片静态资源放到服务器,前端只要用url或者src来访问http地址,中间遇到的require的问题,他被用来动态访问图片资源,可以全局配置require...1. 当小程序(天翼云盘>家庭健康小程序)资源打包之后操过了2M怎么办?
首先小程序总的资源包大小是不可以超过8M的,这就要求单个打包资源不得太大,所以小的包要求不可以超过2M,可以采用webpack打包,图片压缩,分包处理,删除不必要的代码等等;但是当这些方法都用了之后,发现打包后还是超过了2M,最后是跟后端配合,把图片静态资源放到服务器,前端只要用url或者src来访问http地址,中间遇到的require的问题,他被用来动态访问图片资源,可以全局配置require.config(),但是还是有点麻烦,只改了除了require的图片地址,之后本地图片资源不用删除,webpack打包直接把有线上资源的图片忽略掉了,包缩小到1.6m,解决
2. ios端手机和蓝牙手表因为距离过远自动断开连接,接近后没有重新连接
其实不用太麻烦绕一大圈,ios有一个api:setautoConnectLpwDevice(),直接执行这个函数就行了
3. 小程序端的token传递问题
请求到token之后:
if (!window.ok) localStorage.setItem('accessToken', this.accessToken); //window.ok代表小程序端
这样子就存进localstorage里面了,然后再该用的地方调用就行了:
const accessToken = localStorage.getItem("accessToken")
成功调用
-
前端博站项目中遇到的问题总结
2018-08-29 20:41:13项目中实现的功能有很多,只记录稍微复杂点的 功能一:发布评论,如下图 功能描述:点击上面的发布按钮,可以发布评论,评论中要有发布人的姓名,回复给谁,发布的内容,以及发布的时间 问题描述:每一条留言... -
前端知识点(一)项目中遇到的问题精度缺失的问题
2021-03-10 01:28:32在项目中你会遇到哪些问题呢1.前后端联动的问题 ** 1.前后端联动的问题 ** ①:id精确度丢失的问题 1. 产生原因:后端生成id的规则有很多种,但是有时后端生成的id是long类型的,那么传到前端的时候会转为Number类型... -
idea项目中遇到的问题,明明保存了项目却在前端不显示
2020-10-16 17:42:41遇到的问题一 注意 controller必须假如配置文件中,否则显示出错 遇到的问题二 idea项目引入时,前端只保持了最先开始的html格式,在后面即使保存项目也不能在前端显示 因为每次有缓存在浏览器,所以其他后来... -
前端开发中遇到的问题
2020-08-10 09:56:47接着在vue项目中的main.js中引入: import axios from ‘axios’ 然后需要在vue的原型上添加axios对象 vue.prototype.axios=axios这里是调用方法:this.axios=axios 这里是调用方法: this.axios=axios这里是 -
记录前端开发中遇到的问题
2020-11-07 11:41:19这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮...,丰富你的文章UML 图表FLowchart流程图导出与导入导出项目场景... -
在web前端开发中遇到的问题
2019-03-23 09:31:44借助符合场景的前端框架,eg.jQ ,MVVM 页面内容多而复杂,项目管理如何去维护 用模块化和组件化的思路来管理,即采用代码管理中分而治之的方法,将复杂的代码结构拆分成多个独立,简单,解耦合的结构或文件管理... -
近期移动前端项目中遇到的两个坑
2017-07-11 09:47:00但还别说,坑还真得常踩常有,不要以为手机端都是 Webkit 的天下就简单,不用处理浏览器之间的兼容问题,——事实上不一致性的问题还是挺大的。两个坑都是涉及 iframe 的——iframe 真是不好搞。事情是这种,一个... -
最近做Vue前端项目时遇到的一些问题总结以及解决方案
2019-09-17 00:16:56最近忙碌,但是也要总结一下最近遇到的一些问题,查漏补缺 文章目录遇到的问题:watch的深度监听deep:true 导致了 Maximum call stack size exceeded记录遇到...遇到的问题:vue Webpack打包后的dist 文件夹中新增除... -
静态页面导入springboot项目(该项目前端采用thymeleaf模板)中遇到的问题
2020-10-02 22:57:40最近练手一个springboot项目,前端使用thymeleaf框架,在页面导入project过程中遇到问题。我的开发步骤如下: 第一步,使用webStorm开发静态页面 第二步,使用idea开发后端Project 第三步,将静态页面导入Project ... -
最近移动前端项目中遇到的两个坑
2016-01-08 00:25:00尽管要多加避免,但还别说,坑还真得常踩常有,不要以为手机端都是 Webkit 的天下就简单,不用处理浏览器之间的兼容问题,——其实不一致性的问题还是挺大的。 两个坑都是涉及 iframe 的——iframe 真是不好搞! ... -
项目开发时前端及数据库遇到的问题
2020-08-12 11:37:44显示多行文本溢出省略号解决方案让前面的点显示出来,并让li并列显示li标签中含有a标签下li:hover无效c:foreach 迭代一行显示2条数据p标签两端文案对齐修改hr标签的颜色html中将底部的代码固定 解决Navicat导入Excel...