精华内容
下载资源
问答
  • web前端重点业务难点

    2018-10-17 21:13:37
    前端开发一些业务逻辑难点
  • 一、vue相关 Q:vue的底层原理? A:Vue是采用数据劫持配合发布者-订阅者模式,通过Object.defineProperty来()来劫持各个属性的getter和setter。 在数据发生变化的时候,发布消息给依赖收集器,去通知观察者,做出...
  • 前端面试题之项目中难点

    千次阅读 2021-04-25 15:39:00
    项目中遇到难点 1.发表动态 后端代码: async insert (data) { let {filename,url} = data; // console.log(filename,url,table) var base64 = url.replace(/^data:image\/\w+;base64,/, "");//去掉图片base...

    项目中遇到的难点

    1.发表动态

    后端代码:

     async insert (data) {
    
        let {filename,url} = data;
        // console.log(filename,url,table)
        var base64 = url.replace(/^data:image\/\w+;base64,/, "");//去掉图片base64码前面部分data:image/png;base64
        var dataBuffer = new Buffer.from(base64, 'base64'); //把base64码转成buffer对象,返回一个被 string 的值初始化的新的 Buffer 实例
        var des_file = './public/users/article/' + filename
        console.log(filename);
        //这个方法第一个是文件名,第二个是buffer对象
        fs.writeFile(des_file, dataBuffer, function (err) {//用fs写入文件
            if (err) {
                console.log(err);
            } else {
                console.log('写入成功!');
               return 'ok';
                
            }
        })
       
    
      }
    

    前端代码:

     update(e) {
        let that = this;
        that.setData({
          text: e.detail.value.text,
          name: e.detail.value.name,
          tel: e.detail.value.tel,
          location: e.detail.value.region + e.detail.value.location
        })
        that.img_upload()
      },
      //图片上传
      img_upload: function () {
        let that = this;
        let imgList = that.data.imgList;
        //由于图片只能一张一张地上传,所以用循环
        for (let i = 0; i < imgList.length; i++) {
          let openid = wx.getStorageSync('openid');
          wx.uploadFile({
            //路径填你上传图片方法的地址
            url: 'http://www.sevenhero.cn:1234/seller/addNewOrder',
            filePath: imgList[i],
            name: 'media',
            formData: ({
              text: that.data.text,
              openid: openid,
              name: that.data.name,
              tel: that.data.tel,
              location: that.data.location
            }),
            success: function (res) {
              wx.hideLoading()
              wx.showModal({
                title: '发布成功',
                showCancel: false,
                success: function (res) {
                  wx.switchTab({
                    url: '../sale/sale',
                  })
                }
              })
              //把上传成功的图片的地址放入数组中        
            },
            fail: function (res) {
              wx.showModal({
                title: '发布失败',
                showCancel: false,
    
              })
            }
          })
        }
      },
    

    2.登录功能

    前端代码

      wx.login({
            success: res => {
              let data = {
                code:res.code,
                username:this.data.userInfo.nickName,
                state:that.data.shenfen
              };
              wx.request({
                url: 'http://www.sevenhero.cn:1234/login',
                method:'POST',
                data:JSON.stringify(data),
                success(res){
                  if(res.data){
                    wx.setStorage({
                      key:"openid",
                      data:res.data  //这里获取到了openid
                    })
                  wx.switchTab({
                    url: '../sale/sale',
                  })
                }
              }
              })
            }
          })
    

    后端代码

    async post (c) {
            //发起请求调用小程序服务器api
    
            let status = JSON.parse(c.body).state,
                username = JSON.parse(c.body).username;
    
            let login_url = `https://api.weixin.qq.com/sns/jscode2session`
            +   `?appid=${wxkey.appid}`
            +   `&secret=${wxkey.secret}`
            +   `&js_code=${JSON.parse(c.body).code}`
            +   `&grant_type=authorization_code`
    
            let r;
    
            await fetch(login_url)
            .then(res=>res.json())
            .then(res=>{
                r = res
            })
    
            //如果获取openid失败则返回500错误码
            if(r.openid === undefined){
                c.statues = 500
                return
            }
    
            //检测数据库中是否有此用户
            let myuser = await c.service.model.db_login.findUser(r.openid,status)
    
            //if this user not exists
            if(myuser == false)
            {
                console.log('没有这个用户,加入此新用户~')
                await c.service.model.db_login.addUser(r.openid,status,username);
            }
    
            //返回openid
            c.res.body = r.openid;
        }
    

    3.登录和token

    首次登录时,后端服务器判断用户账号密码正确之后,根据用户id、用户名、定义好的秘钥、过期时间生成 token ,返回给前端;
    前端拿到后端返回的 token ,存储在 localStorage 和 Vuex 里;
    前端每次路由跳转,判断 localStorage 有无 token ,没有则跳转到登录页,有则请求获取用户信息,改变登录状态;
    每次请求接口,在 Axios 请求头里携带 token;
    后端接口判断请求头有无 token,没有或者 token 过期,返回401;
    前端得到 401 状态码,重定向到登录页面。
    
    展开全文
  • 前端博站项目中遇到的问题总结

    千次阅读 2018-08-29 20:41:13
    项目中实现的功能有很多,只记录稍微复杂点的  功能一:发布评论,如下图 功能描述:点击上面的发布按钮,可以发布评论,评论要有发布人的姓名,回复给谁,发布的内容,以及发布的时间 问题描述:每一条留言...

    说明:是针对我做的项目的总结,避免以后重复犯错,可能对于看到的您并没有太大作用哦!

    项目中实现的功能有很多,只记录稍微复杂点的 

    功能一:发布评论,如下图

    功能描述:点击上面的发布按钮,可以发布评论,评论中要有发布人的姓名,回复给谁,发布的内容,以及发布的时间

    问题描述:每一条留言下面都可以发布评论,因为发布一条评论需要记录很多信息(回复人,留言人,时间,内容,点赞...),想着信息多,为了方便管理,我把他们存放在一个对象中,并将这个对象,放在了data中,结果等我发布信息的时候,就会发现,如果我发布一条信息后,再去发另外一条信息,就会修改我上面一条发布的信息,并且我不能清空输入框中的信息

    解决思路:其实这个问题我一开始还挺困惑的,因为我每发布一条信息都会将其push到我的渲染列表中的,而且它也可以正常渲染,那为什么会出现上面的问题呢?主要原因就是出现在我把信息都存放到了对象中,所以我每次向渲染列表中push的其实是一个对象,这样因为对象引用的关系,自然一个改变其他的都会改变了

    解决办法:

    1、不要把需要记录的数据存放在对象中,将其拿出来,比如内容就content:" ",记录

    2、那么多信息都拿出来看着比较难受,因为有些是固定的,有写时点击发布按钮的时候才需要,所以我只把必须放在data中的属性放在data中,然后再data外面用一个属性去记录这些需要的值,在提交的时候,提交的也是外面的这个对象,那么我每次在重新发布留言的时候就不会出现上面的问题了

    主要知识点:如果两个对象的引用相同,那么一个对象的属性值改变,也会改变另一个对象的属性值

    功能二、点赞功能

    功能描述:

    1、同一个人可以给多条评论点赞,但是每条评论同一个人只能点赞一次,不可重复点赞

    2、该登录者点过赞的,点赞图标为红色,鼠标移入提示已点赞,没有点赞的,点赞图标为黑色,鼠标移入提示点赞

    3、点赞之后,后面的数字会+1

    这个不难实现,稍微需要动点脑子的地方是:怎样知道该登录者是否已经点赞,如果已经点赞,再次点击点赞图标,不让数据增加

    解决办法:

    1、每一条评论用一个数组记录点赞人的姓名,每次点赞的时候查找这个数组中是否有登录者的名字,如果已经存在,就不执行操作,不存在的时候再执行操作

    2、提示点赞或已点赞,这个我是用title属性实现的(不难,就不再详细说了)

    功能三、显示评论发表的时间

    功能描述:如果发布的时间在一个小时内,那么评论上显示的时间是:n分钟前,如果是超过一个小时,直接显示发布的日期(年月日)

    解决思路:

    1、后端记录每条评论发布的时间

    2、用当前时间减去发布的时间,并做一些处理

    3、开启一个定时器,每一秒调用一次时间处理函数

    关键代码如下:

    methods:{
       setInt(){
                clearInterval(this.timer)
                this.timer = setInterval(this.time,1000)
              },
              time(time){
                let nowTime = new Date()
                let lastTime = new Date(time)
                let t = Math.floor((nowTime - lastTime)/1000)
                let Day = Math.floor(t/86400)
                let Hour = Math.floor(t%86400/3600)
                let Min = Math.floor(t%86400%3600/60)
                let str = ''
                if(Day<1&&Hour<1){
                  str = String(Min)
                }else{
                  let year = lastTime.getFullYear()
                  let month = lastTime.getMonth()+1
                  let day = lastTime.getDate()
                   str = year+"年"+getTwo(month)+"月"+day+"日"
                }
                function getTwo(n){
                  return n<10?'0'+n:''+n
                }
                return str
              }
    }

     

    展开全文
  • 小白必看;前端一年工作经验,遇到的各种问题总结, 未完待续
  • 浅谈个人前端项目中遇到的问题

    千次阅读 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-topmargin-bottom不能正常显示
    父盒子中的子盒子使用margin-top不管用,需要在子盒子上加

    {
    height:0;
    overflow:hidden
    } 
    

    问题五:类名定义问题
    类名不能以数字开头或者以纯数字开头定义类名; 不推荐(不允许)使用汉字定义类名;
    不能以特殊符号或者以特殊符号开头定义类名(_除外); 不要使用标签名定义类名 。
    问题六:修改select默认的样式

    select{
    	background:none;
    	width:400px;
    	border:1pxsolid #d8d8d8;
    }
    option{
    	vertical-align: middle;
    }
    

    还有一些其他的小问题,比如标签的合理使用、一些样式书写规则混淆等等就不一一列举了。挑了几个个人常犯的(狗头保命)分享给大家,祝大家的代码一帆风顺,BUG为0!!!!

    展开全文
  • 写一些最近工作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的修仙资料。嘿嘿嘿你懂得。/手动狗头
    前端入坑全套教学视频
    那么问题来了,如果你也想入坑前端或者学习更多技术,广交天下朋友(基友),认识更多有趣的灵魂的话,欢迎加入前端交流群鸭~
    扫码加群哦
    扫二维码加为好友就完事了!安排~

    展开全文
  • 前端开发遇到的一些问题一、怎样才能让select里的内容居中显示?二、点击一个select里面的一个option,向另一个select添加一组option用js怎么实现?三、点击select里不同的option时如何显示不同的内容(文本、表格、...
  • 前端开发技术难点汇总(一)

    千次阅读 2019-12-01 21:18:10
    1.vue组件在main.js引用组件不起效果时,可直接在页面引用 import引用 2.在vue使用scroller组件,上拉加载时内容虽然会会弹,但底部会留有一段空白未完全会弹,在源文件修改,vue-scroller/src/module/...
  • 在面试的时候,往往在二面,三面的时面试官会结合你的简历问一些关于你简历上项目的问题,而以下这个问题在很多时候都会被问到 在这个项目中你有遇到什么技术难点,你是怎么解决的? 其实这个问题旨在了解你在遇到...
  • 前端开发的难点到底在什么地方?

    万次阅读 多人点赞 2019-05-05 14:16:52
    这两年由于单身时间很多,绝大部分时间都投入到学习,基本上Java跟前端双修,前一阵子由于部门前端实在是招不上人(现在前端这么缺?)我被拉过去就火了三个月。 标题现在我有几个疑问,前端的技术难点到底在什么地方? ...
  • 项目中遇到哪些难点,如何解决的

    千次阅读 2020-03-27 12:30:17
    亮点:在高并发情况下的秒杀优化,我们知道当并发数达到一定量的时候,会对数据库服务器带来很大的压力,那么如何缓解这些压力以及提高并发的QPS就是整个项目的重点。(不断的提高QPS)。 亮点3个: 1.利用缓存...
  • 最近忙碌,但是也要总结一下最近遇到的一些问题,查漏补缺 文章目录遇到的问题:watch的深度监听deep:true 导致了 Maximum call stack size exceeded记录遇到...遇到的问题:vue Webpack打包后的dist 文件夹新增除...
  • 在本篇文章里小编给大家分享的是关于vue开发中遇到的问题总结,有兴趣的朋友们可以学习参考下。
  • netty项目中的使用 netty的管道是什么 每条消息的传递原理 netty的bytebuf 双指针是什么 零拷贝 netty里面怎么解决黏包半包的 tcp滑动窗口是什么 nagle算法 netty 自己实现一个通信协议 尽可能想到完善 rpc和http...
  • 被问到项目亮点、难点遇到的问题、解决思路

    千次阅读 多人点赞 2021-05-23 20:36:38
    面试被问到你的项目亮点、难点遇到的问题、解决思路是不是很蒙,现在我拆分一下问题 什么是项目亮点: 你负责的业务是什么?(学会发现问题) 你真的想过业务是什么吗? 有为业务想过什么吗? 有了你,业务有什么...
  • 前端难点,坑点总结

    千次阅读 2019-11-08 16:04:20
    问题总结前言登录验证码...最近工作上遇见一些难点和坑,花费了不少时间去解决,所以想着先把这些难点和坑记录下来,方便下次查找。同时希望可以有需要的童鞋。 登录验证码图片显示 后台返回的登录验证码图片是以...
  • 3.表单新增了一些类型placehoder这些什么的 4.canvas画布这些都是差不多 5.svg svg和canvas区别: canvas是和javascript结合起来绘制2d图形、渲染能力弱(适合于游戏开发) svg是和xml结合起来绘制2d图形(不适合...
  • 前端工作中遇到的问题总结(一)

    千次阅读 2021-01-15 15:16:52
    6、v-model绑定的值和下拉框绑定的值不一样,需要在data重新赋值变量 7、get请求:function的data后台获取不到变量的值,那么用params当做变量的key 8、在数组循环添加对象; let historyMeet = []; this....
  • 小程序,子页面传值给父页面的方法 小程序,input高度设置 angular 当数据改变时,页面数据不改变的解决办法 小程序wx.base64ToArrayBuffer调用时,提示thirdScriptError “atob” failed;undefined Error: “a...
  • }) iOS下HTML元素绑定onclick无效 在ios如果需要给,原先不带有点击属性的HTML,例如:div p 等元素绑定onclick事件,解决方法: 1、给元素加上 cursor:pointer(css 属性); 2、将标签改为a元素。 不带点击属性的...
  • 前端项目中碰到的难题bug

    千次阅读 2020-06-24 14:52:59
    7: pm2: restart并不靠谱 bug起因: 现在服务端渲染的项目也不少, 前端工程师大部分都是使用node来做的, 线程保护方面大部分也是选用pm2, 毕竟pm2简洁明了还自带’负载均衡’ bug现象: 在本地与test环境都没问题, ...
  • 前端做登录注册时提交按钮问题 在用ajax传数据给后端时,通常给button按钮绑定js事件 &amp;amp;amp;lt;form class=&amp;amp;quot;form-horizontal&amp;amp;quot;&amp;amp;amp;gt; &amp;amp;...
  • 1.汉字排序 arr.sort(function compareFunction(a,b) { return a.localeCompare(b,'zh') }) // 多个汉字排序不太准 2.... touch 事件 touchcancel 系统停止跟踪触摸时候会触发,例如触摸过程弹出alert框会触发该事件
  • 近期一直在做一个xxx中心的项目,先来吐槽下内心的想法, 要开发的项目需求很不明确,需求两周两周的更改,感觉每天并没有特别多实际的产出,总是感觉有点儿浪费时间。 虽然这样,但是作为开发,我们只能服从上级...
  • 学习前端遇到的问题与难点

    千次阅读 2018-07-27 15:15:19
    -- 忽略页面的数字识别为电话,忽略email识别 -->   <!-- 启用360浏览器的极速模式(webkit) --> <!-- 避免IE使用兼容模式 --> <!-- 不让百度转码 --> <!-- 针对手持设备优化,主要是...
  • 前端开发中遇到的问题及解决方法

    千次阅读 2020-10-09 23:36:39
    开发中遇到的问题及解决方法 1,何为MVVM? view层: 视觉层;在前端开发,通常是DOM层;主要作用是给用户展示各种信息; Model层: 数据层;数据可能是我们固定的死数据,更多的是来自服务器,从网络上请求下来的...
  • 前端技术难点

    千次阅读 2020-04-09 10:39:07
    1、前端安全:CSRF、XSS、sql注入 2、前端性能优化:serviceworker、性能分析 3、服务端渲染:nextjs、express、静态资源缓存 4、node中间层的目的:服务端渲染、SEO、内网接口访问、多接口并发、跨域等 5、...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 8,418
精华内容 3,367
关键字:

前端项目中遇到的难点