当前位置:首页 » 网页前端 » 前端项目中遇到的难点
扩展阅读
webinf下怎么引入js 2023-08-31 21:54:13
堡垒机怎么打开web 2023-08-31 21:54:11

前端项目中遇到的难点

发布时间: 2023-06-01 06:22:21

① WEB前端与后端的难点想学不太懂呃。。

在我们实际的开发过程中,我们当前这样定位前端、后端开发人员。
1)前端开发人员:精通JS,能熟练应用JQuery,懂CSS,能熟练运用这些知识,进行交互效果的开发。
2)后端开发人员:会写Java代码,会写sql语句,能做简单的数据库设计,会Spring和iBatis,懂一些设计模式等。
现在来看,我们对前后端的要求还是蛮低的,尤其是后端,新员工经过培训之后都是可以参与到后端开发的,没有太高的技术门槛,唯一需要做的就是先变成熟练工种,这个阶段没有涉及到设计模式、架构、效率等一些列问题。
还是先google一下,看看网上对Web前端开发、Web后端开发分别是什么?
Web前端: 顾名思义是来做Web的前端的。我们这里所说的前端泛指Web前端,也就是在Web应用中用户可以看得见碰得着的东西。包括Web页面的结构、Web的外观视觉表现以及Web层面的交互实现。
Web后端:后端更多的是与数据库进行交互以处理相应的业务逻辑。需要考虑的是如何实现功能、数据的存取、平台的稳定性与性能等。
我们再来看看大公司对前后端人员招聘的要求,通过这个角度看看前端、后端的技术要求:
Web前端:
1)精通HTML,能够书写语义合理,结构清晰,易维护的HTML结构。
2)精通CSS,能够还原视觉设计,并兼容业界承认的主流浏览器。
3)熟悉JavaScript,了解ECMAScript基础内容,掌握1~2种js框架,如JQuery
4)对常见的浏览器兼容问题有清晰的理解,并有可靠的解决方案。
5)对性能有一定的要求,了解yahoo的性能优化建议,并可以在项目中有效实施。
6)......
Web后端:
1)精通jsp,servlet,java bean,JMS,EJB,Jdbc,Flex开发,或者对相关的工具、类库以及框架非常熟悉,如Velocity,Spring,Hibernate,iBatis,OSGI等,对Web开发的模式有较深的理解
2)练使用oracle、sqlserver、mysql等常用的数据库系统,对数据库有较强的设计能力
3)熟悉maven项目配置管理工具,熟悉tomcat、jboss等应用服务器,同时对在高并发处理情况下的负载调优有相关经验者优先考虑
4)精通面向对象分析和设计技术,包括设计模式、UML建模等
5)熟悉网络编程,具有设计和开发对外API接口经验和能力,同时具备跨平台的API规范设计以及API高效调用设计能力
6)......

② Vue 项目初步总结(在项目中遇到的问题以及解决办法)

注意点:建议不要使用ESLint 后面选No 就ok  大神跳过此处,否则在项目中只要编码格式有问题就会一直拨错!

  1、推荐使用Visual Studio Code工具打开testproject文件夹即可进行开发。

(1)(打开终端快捷键 control+~)在终端里面输入npm install命令安装依赖包, npm install 执行可以进行vue已经vue的插件安装,在第三步的时 候,已经初始化了项目,并且在 package.json 里面已经有相关配置,所以在这里可以直接安装;

(2)终端执行命令npm run dev 运行,然后览器输入localhost://8080即可看到vue初始界面

补充:使用vue 框架时尽可能的不要使用jq,但是有些地方确实需要使用jq的话下面是在vue中引入jq的方卜饥法

1:首先安装jquery

npm install jquery --save

2:在webpack.base.conf.js里加入

var webpack = require("webpack")

3:在mole.exports的最后加入

plugins: [

new webpack.optimize.CommonsChunkPlugin('common.js'),

new webpack.ProvidePlugin({

    jQuery: "jquery",

    $: "jquery"

})

]

4:在main.js中引入

import $ from 'jquery'

5.最后 npm run dev就可以了

首先给图片地址绑定变量

在script中设置变量

//方法1.直接将图片引入为模块

require imgUrl from "../assets/test.png"

//方法2.将imgUrl放在数据里

    data(){

        return {

            imgUrl:require("../assets/test.png")

        }

}

    //方法3.在生命周期函数中设置

    data(){

        return {

imgUrl:""

        }

    }

    created(){

this.imgUrl = require("@/"+urlTemp)

}

传送门:https://www.cnblogs.com/aimiss/p/7396986.html

传送门:https://www.json.cn/

    基于 Promise 的 HTTP 请型谨返求客户端,可同时在浏览器和 node.js 中使用

在浏览器中发送 XMLHttpRequests 请求

在 node.js 中发送 http 请求

支持 Promise API

拦截请求和响应

转换请求和响应数据

自动转换 JSON 数据

客户端支持保护安全免受 XSRF 攻击

使用 bower:

$ bowerinstallaxios

使用 npm:

$ npminstallaxios

例子

axios.post('/user',{

firstName:'Fred',

lastName:'Flintstone'

})

.then(function (response) {

console.log(response);

})

.catch(function (response) {

console.log(response);

});

传送门:https://www.jianshu.com/p/e36956dc78b8;

一、污染是如何产生的?

得益于 Vue-loader,在 Vue 中可以使用类似于 Web Component 的组件化写法,  ,在大多数情况下,我们希望组件间定义的样式是相互隔晌猛离的,在 Weex 当中的确如此,组件天生隔离,可是在 Vue 当中,运行的载体还是浏览器,所有的样式类还是会通过 style 标签插入头部,影响全局,交叉污染

二、增加 Scoped 标识

依然是 Vue-loader,通过为组件中的 style 标签增加一个 scoped 标识,Vue-loader 在编译的过程中会为组件每一个元素节点增加 scopeId 作为属性,同时为所有的样式类加上属性选择器 scopeId,从而达到隔离的效果。

传送门:https://www.jb51.net/article/122535.htm

假如,我们在A组建中声明了一个定时器进行倒计时此时 我们在定时器中一直打印时间戳,此时我们通过路由跳转到下一个组件页面,按照正常理论来说,A组件在跳转后整个组件就会被销毁,到达B组件时A组件已经没有了。

但是在我们有定时器的情况下 此时跳转过后 定时器依然会存在。所以我们要在页面销毁时候将当前页面的定时器clear掉。

格式转换

服务器给的格式是 2016-6-16 10:50:00  正则替换成 2016/6/16 10:50:00 即可;

var time = '2016-6-16 10:50:00'

var times = time.replace(/-/g,"/"); //2016/6/16 10:50:00

完美解决。

原因:因为当我们切出到任务管理器后台时,此时在客户端中的浏览器里面,浏览器就会终止定时器因为消耗性能,当我们返回的时候此时倒计时才会恢复正常。

解决:h5有一个监听浏览器页面是否隐藏的事件 visibilitychange 两种状态 hidden和visity hidden时候页面切出此时我们要将定时器销毁,visity时候再次恢复定时器。

解决 this.$router.push(0)

原因:因为低版本安卓不支持es6 

(1)安装依赖包 

> cnpm install --save-dev babel-polyfill 或者 > npm install --save-dev babel-polyfill

(2)webpack配置修改 

/* 添加 babel-polyfill */ 

entry: { 

app: ["babel-polyfill", "./src/main.js"] 

}, 

但是:我的项目上面的操作都进行了,也就是对es6进行了转化但是失败了。所以我就白有关es6的我写的东西都改掉了。结果就好了。

传送门:https://blog.csdn.net/qq_16559905/article/details/60755174

总结:初入前端,继续踩坑。

③ 前端开发过程中遇到过什么困难

前端开发过程中遇到的困难还是很多
1、面试中前端开发过程中遇到的困难这个问题主要是相看面试者是不是有独立解决问题的能力及解决问题的方案以及工作中的的一些两点
2、遇到这样的问题可以说出一个自己解决的比较完美的问题,如:vue不适合做cms,因为单页面应用对seo很不友好,解决的方法就是:我们使用nuxt技术,在保证使用vue语法开发的同时,也使用了服务端渲染技术保证了seo效果,这个过程突出了自己的学习nuxt等新技术的能力
3、另外也是有很多实际的开发问题不好解决,的但是那些自己解决不好的问题不适合 在面试的过程中说的

④ web前端开发面临的挑战主要是有哪些

平时工作,多数是开发Web项目,由于一般是开发内部使用的业务系统,所以对于安全性一般不是看的很重,基本上由于是内网系统,一般也很少会受到攻击,但有时候一些系统平台,需要外网也要使用,这种情况下,各方面的安全性就要求比较高了。

1、测试的步骤及内容

这些安全性测试,据了解一般是先收集数据,然后进行相关的渗透测试工作,获取到网站或者系统的一些敏感数据,从而可能达到控制或者破坏系统的目的。

2、SQL注入漏洞的出现和修复

SQL注入定义:

SQL注入攻击是黑客对数据库进行攻击的常用手段之一。随着B/S模式应用开发的发展,使用这种模式编写应用程序的程序员也越来越多。但是由于程序员的水平及经验也参差不齐,相当大一部分程序员在编写代码的时候,没有对用户输入数据的合法性进行判断,使应用程序存在安全隐患。用户可以提交一段数据库查询代码,根据程序返回的结果,获得某些他想得知的数据,这就是所谓的SQL Injection,即SQL注入。

SQL注入有时候,在地址参数输入,或者控件输入都有可能进行。如在链接后加入’号,页面报错,并暴露出网站的物理路径在很多时候,很常见,当然如果关闭了Web.Config的CustomErrors的时候,可能就不会看到。

3、跨站脚本攻击漏洞出现和修复

跨站脚本攻击,又称XSS代码攻击,也是一种常见的脚本注入攻击。例如在界面上,很多输入框是可以随意输入内容的,特别是一些文本编辑框里面,可以输入例如这样的内容,如果在一些首页出现很多这样内容,而又不经过处理,那么页面就不断的弹框,更有甚者,在里面执行一个无限循环的脚本函数,直到页面耗尽资源为止,类似这样的攻击都是很常见的,所以我们如果是在外网或者很有危险的网络上发布程序,一般都需要对这些问题进行修复。

⑤ web前端开发是什么,所要面临的挑战有哪些

Web前端开发大致上是,创建出Web网页以供用户浏览使用等。主要通过HTML、CSS、JavaScript等技术来实现交互。

所面临的挑战主要有几点:

一、

Web的载体的多样性。

以浏览器为例,分别有IE,Chrome,火狐等。虽然有ECMA委员会进行标准化,但不同浏览器对HTML、CSS、JS等支持程度还是存在差异。所以需要进行兼容处理。

而且,这还会另测试的复杂度上升。

二、

Web前端开发的工程化问题。

在以前,Web前端开发是极度依赖于后端的,例如JSP、PHP等前后端代码混杂,这段时期,前端的工程化问题还不哗历薯算凸显。

而随着MVVM的普及,前后端的分离,本身的前端项目需要有一定的组织,协作,需要有前端的一套工程化解决方案。

包括组件化开发乱者,单元测试,增量更新,代码压缩混淆,项目的打包构建发布等。

三、

Web框架之间的不兼容。

Web开发中,躲不开的是三大框架React、Angular、Vue。而框架与框架之间存在明显的沟壑。

对于一个Web前端项目来说,其实使用哪种技术并不重要,重要的是能实现需求。但是在实际上,如果项目选定了某个框架,其他框架之间的某些组件或者解决方案并不能互通。

当然,现在的WebComponent有希望解决这个问题,但是,WebComponet的兼容性也存在明显问题。

结语:

Web前端开发所面临的问题远烂郑不止这些。当然,有问题就有解决方案,Web前端技术就是在攻克这些问题上不断演进。

⑥ 前端开发的难点到底在什么地方

一般意义上的前端项目:

-从0到1,治理晒哦为健全点的都能捣鼓出来;

-从1到60,后后端或者设计岗位勉强能兼任;

-从60到80,需要比较专业的前端;

-从80到100,这么好的前端可遇不可求。

从0到1就是从无到有的过程,很多人用WordPress,建站之星就差不多就能搞个demo了,可以拿去骗投资人的钱。

从1到60,就是勉强可用,基本上让后端工程师或者UI设计师找一套bootstrap的模板东拼西凑的也能勉强应付到第一版本上线。

从60到80,就是真正要做一款能完备、性能优良、架构合理的中小规模产品,没有专业的设计、前端、后端、产品、运营是走不到这步的,差不多到A轮了。

从80到100,那就是追求各方面的极致,与竞争对手一较高下,各个方面没有顶尖的人才都会影响整体的战斗力,木桶效应。

解释一下:

1. 核心竞争力的主体是工程经验。
其实这个结论可以推广到其他研发岗位,就是每个研发岗位的知识体系都是由基础学科知识+领域工程经验构成,彼此不可替代的就是工程经验部分。一个后端工程师一时间不能替代同等级前端工程师到不是基础或者智商的问题,主要是工程经验不足,你让一个前端一个后端分别实现对方领域中一个有明确输入输出的功能函数,二者通过简单学习新语言新语法,加上开发手册查询,一般都能比较正常的实现业务逻辑,但你让他们hold住对方领域的完整项目就很困难了,技术选型,系统设计,模块拆分,平台特性,宿主环境,性能优化,构建部署,系统测试等等都是领域工程经验问题。

2. 工程经验的等级是能cover项目从0发展到80+。
这个很好解释,因为从0-60的非专业前端也能做到,60+的才是专业前端。

所以不用担心核心竞争力问题,60+的前端现在都很抢手啊。工程经验只有60-的话确实压力比较大。

⑦ 前端开发的难点到底在什么地方

不同级别的前端面临的难点各不相同,不可一概而论;

业务开发的前端难点在于对业务的理解和把控能力;

平台开发的前端难点在于产品化的把控和推进能力。

观点1:不同级别的前端面临的难点各不相同,不可一概而论。

其他回答有说 CSS 难,有说 CSS 不难的,每个人水平不同,这样争论毫无意义。我刚学前端时觉得 JS/CSS/浏览器兼容问题都很难,现在觉得也就那样,因为前端路子广,办法总比问题多。后来觉得要评估好需求,把控好项目质量比较难,很多时候我们是在干事,在解决问题,不是只埋头写代码,时间一长你会发现前端工作中,技术问题往往比较好解决,反而资源协作问题比较麻烦。现在对我来说比较难的是快速产品化的能力,如何从无到有去做出一些有价值的东西。

举一个简单粗暴的例子吧:阿里前端很多,P5/P6 一大把,但是 P8/P9 的非常少,为什么?进阶的难点在哪梁搭里?

前端开发的难点跟前端进阶的难点是非常相似的。阿里对每个前端层级都有一个标准,这也从侧面回答了这个问题,比如对 P5 来说,难点可能是写好业务代码,保证其灵活性和可维护性,能解决各种适配问题;对 P6 来说则需要独挡一面,能独立 owner 需求,而 P7 则需要在某方面技术有深入理解,等等。

能提出这个问题首先得恭喜题主,说明题主在当前阶段遇到瓶颈了,需要向下一个 level 出击了。

观点2:业务开发的前端难点在于对业务的理解和把控能力。

业务逻辑开发本身并不是难点,谁都可以写。但是对于你自己负责的这块业务,后续业务的发展方向和潜力,你有去了解过吗?当业务方提需求过来时你是只负责执行还是和业务方一起探讨更合理的方案?你有没有给自己负责的产品提过一些建议?做过一些基正改善措施?如果前端只是作为一个执行者,作为一种被调度的资源,那么即使最终项目取得了好的成绩,跟你有多大关系?你自己会有多大的成就感?

另外一个很重要的点:就是对业务的把控能力。业务方总是会催着上线,开发时间不断被压缩该怎么办?进度不如预期怎么办?开发遇到瓶颈怎么办?发布新功能翻车了怎么办?

我见过有默默加班保证进度的,也有跟需求方重新谈延期的,有发布出问题手足无措的,也有自己默默修复的,有遇到瓶颈一筹莫展的,也有及时跟老板沟通,跟业务方撕逼的 如何优雅的处理这些问题,有时候比写代码更难。为什么有的人业务代码逻辑混乱,写的一团糟?我不相信是智力问题,反倒更相信是对项目本身没有把控好,本来排了5天工作量的需求被业务方压到了3天,你还能保证写出健壮而不失风度的代码?

观点3:平台开发的前端难点在于产品化的把控和推进能力。

做业务时有人给你提需求,帮你出交互视觉稿,你只要负责写页面橡锋拿就行了。但是在支付宝前端,很多内部平台和技术产品都是技术自己主导,你需要自己发现问题,出方案,设计数据库,自己出页面,这是一个从无到有的创造的过程。并且要保证你做的东西是真正解决问题的,而不是做一些自己觉得很牛逼实际上并没有解决用户痛点的东西,用我老板的话说就是对产品的把控能力,不要跑偏了。前端是最容易做出产品化东西的工程师了,因为后端不会做 UI,UI 不会写代码,唯前端兼顾,这是最大优势。

再一个就是对产品的推进能力了,你做的东西可能需要各种资源?如何争取?可能牵扯到多方利益?如何权衡?东西做出来了如何推广?如何在用户的一片骂声中奋勇前进?

印象中很多平台型产品,刚开始投入使用时都是一片骂声,各种问题,说实话负责这些产品的程序员压力是相当大的,天天被骂还得彻夜帮别人解决问题,还得不断优化系统,你说难不难?

以上三点就是本文所展现的理念,希望能对大家有帮助。

⑧ 你觉得web前端项目的难点有哪些

项目开发难点:
1. Web架构的独特性
2. Web标准和相关技术的纷繁复杂和飞速发展
3. 浏览器兼容性
4. 交叉领域和多重目标
5. 组织架构和开发流程