web前端开发

《后端也要懂一点前端系列》使用webpack搭建项目

自古美人都是妖i 提交于 2019-12-06 15:07:57
今天突然有兴致想要学习一下前端的技术,所以特此记录学习前端之路。由于之前在公司做的项目大部分都是关于 JSP 页面的增删改查,所以前端后端都是一个人来写的,对于前端还只是停留在 js、html、css 阶段,对于一些前端框架是一点也不了解,正好学习后端的时候遇到了 cookie、session、token 的问题,特此也简单的了解一下前端知识。 概念介绍 大概在网上找了一些的教程,由于是想速成,所以先从搭建项目开始学起了。搭建项目使用的 webpack ,我觉得前端的 webpack 和后端的 gradle、maven 比较类似都是简化我们开发的一套工具(这里不知道类比的准不准确,如有误的话希望能够指出来)。前端的 Node 我觉得就像是后端的 Java ,也是一开始上来就让我安装环境配置环境变量。概念介绍完以后废话不多说直接开搭一个简单的项目。 环境准备 工欲善其事,必先利其器。搭建项目之前要准备一下环境。 首先当然是安装 Node 环境了,node下载地址这里直接选择相应版本的 Node 直接下载安装,一直下一步即可。如果安装成功的话 node -v 即可显示出版本号。 安装 Visual Studio Code 软件。Visual下载地址,也是选择自己相对应的机器版本下载安装即可。 搭建项目 环境准备好以后,接下来就是搭建项目了 随便建立一个文件夹,然后使用 Visual

前端知识之css

六眼飞鱼酱① 提交于 2019-12-06 12:42:10
前端知识之css CSS 层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现 HTML ( 标准通用标记语言 的一个应用)或 XML (标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。 CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。 1990年,Tim Berners-Lee和Robert Cailliau共同发明了Web。1994年,Web真正走出实验室。 web项目开发中css的位置 css主要一般都是由前端开发工程师,或者UI设计师完成的. w3c标准 万维网联盟, 结构标准: html 外观标准: css 动作标准: javascript css的基本使用 css在使用过程中,主要就是嵌套进网页中进行使用的.使用过程中,一般有三种引入方式: 行内样式 主要在开始标签中, 通过style属性来编写样式.在工作中,行内样式是使用频率最少的. 一般都是将来通过来javascript来控制的样式才会使用行内样式. <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head>

转前端工作总结二

孤者浪人 提交于 2019-12-06 12:12:16
前四个月花的时间比较多,也是进步比较快的时候。对于各种概念也都慢慢熟悉了,后面四个月自己解决问题的能力提升了,但对技术的热情满满没有系统去学习的冲劲。所以对自己有些总结看看,有什么可以进步的。确定自己继续努力的方向 目前掌握的框架: 小程序的wpy框架,vue框架 看过的技术书: 图解http协议,算法,js高级,es6,js设计模式 了解过: mvvm框架,mvc框架,vue的源码,浏览器的渲染,浏览器的多线程和js的单线程,同步异步的解决方案,命名的方式,常用的算法,观察者模式,代码的模块化,虚拟dom,nignx,webpack,css动画,canvas,flex布局,less 框架的使用:前端时间独立去开发h5的项目,自己去选框架,选择依赖,觉得是个蛮好的经历。 需要提升的: 1.现在写代码会有更有全局意识,但是解决问题时总是像是在打补丁,没有全局意识。 2.需要把了解过熟悉的东西,重新再复习和巩固一遍特别是:常用的算法,观察者模式,vue源码,图解http 目前去学习的有: react.js,vue-ssr,egg.js react.js可以帮助我如何去写更加组件化的代码 vue-ssr则是服务端渲染的大门 egg.js就更深一步了 每天至少要花一个小时有计划的学习,周末要有半天的学习时间。 来源: CSDN 作者: ZhengKehang 链接: https:/

前端学习一阶段总结

久未见 提交于 2019-12-06 12:10:20
从6月25日开始报名学习前端,到现在差不多一个月了,我已经学习完了一阶段,课程内容主要是Html标签、CSS还有布局。 现在回忆一下这几个月的学习经历以及思想历程。 一:为什么选择前端? 我之前会一点SQL和Delphi的,主要的工作也是对自来水IMS进行二次开发。当我辞职之后,朋友都劝我学习java,但是我却有不一样的想法,我选择了前端。 首先,我的Delphi水平并不高,在后端的经验并不丰富,我的工作性质决定了,我只是Delphi的入门水平。我没办法独立完成一个三层架构的系统。而且sql也不是后台语言,只是单纯用来查询数据的,并不能直接对接前端,它仍需要一个中间层,也就是java等等。 其次,我其实对前端蛮喜欢的,从初中开始我就捣鼓过网站,但是从来没有系统的学习过。最近一次应该是买了一套淘宝客的源码,最后因为空间速度太慢了就放弃了。前端很大一部分是来做用户体验的,也就是UI/UE,还是蛮感兴趣的。 最主要的,入门简单,而且我学好了以后,完全可以以Delphi,或者GO语言作为后端服务器程序来对接,这不也是全栈吗。谁规定后端只能用java。 二、一阶段的学习方法 其实说白了就是多练习,我的练习并不多,但是我有一个好处就是开发经验。每次布局之前我都会先思考一下如何布局,怎么样用更少的盒子,更少的css代码实现,我的思想就是精简,减少不必要的class名、盒子,多用伪类选择器

WEB前端开发职业学习路线初级完整版

别说谁变了你拦得住时间么 提交于 2019-12-06 10:08:19
作者 | Jeskson 来源 | 达达前端小酒馆 下面小编专门为广大web前端开发职业者汇总了学习路线初级完整版,其实web前端开发工程师可算是高福利,高薪水的职业了,所以现在学习web前端开发的技术人员也是越来越多了,但是在学习web前端开发中去学习是应该要有一个完整的学习路线。 web页面制作基础 web简介,HTML语法基础,HTML基本结构,单双标签,标签属性,标签嵌套规则,注解,HTML文本图像元素,标题,段落,图像,HTML超链接元素,HTML列表元素,HTML表单表格元素,表单属性,表格结构。 css基础,基础语法和选择器,css引用方式,css属性,css背景色,背景图,字体,文字,列表,表格,内容,css盒子模型,盒子模型简介,块级元素和行内元素,盒子模型属性,css布局,布局基本概念思想,float属性使用,clear属性,overflow属性,定位(相对,绝对,固定),css兼容性处理。 HTML5和CSS3开发基础与应用 HTML5简介,HTML5新增元素,文档结构元素、文本格式化元素、页面增强元素、多媒体元素,表单控件新增属性 placeholder和required、 multiple、form、formaction、 formmethod、formenctype、 formtarget、autocomplete、 autofocus、pattern

前端面试题-HTML结构语义化

点点圈 提交于 2019-12-06 06:40:46
一、HTML语义化的背景 HTML结构语义化,是近几年才提出来的,对比之前的 HTML 结构,大多是一堆 没有语义的标签 。用的最多的就是 DIV+CSS,为了改变这种现状,开发者们和官方提出了 HTML结构语义化的概念,并且在 HTML5 添加了很多语义化标签。 二、HTML语义化的概念 语义化是指 根据内容的结构,选择合适的标签 ,便于开发者阅读和写出更优雅的代码的同时,让浏览器的爬虫和机器很好的解析。 三、HTML语义化的必要 随着互联网的发展,WEB承载越来越多的信息(图片,音频,视频等),人们开始用机器来处理网络信息,就此诞生了 搜索引擎 。如次庞大及复杂的信息如何让搜索引擎处理和挖掘,所以让机器能够更好地读懂WEB上内容就变得越来越重要。 传统的Web由文档组成,W3C希望通过一组技术支撑 “数据的Web”,即 Web of Data,将Web看作一个存储和管理数据的大型分布式数据库。语义Web是构造这样的数据Web的重要一环,帮助人们创建数据并存储在Web上,创建相关的词汇表及数据的处理规则。 四、HTML语义化的作用 4.1 页面结构清晰 去掉或 CSS 样式丢失的时候,也能让页面呈现清晰的结构,增强页面的可读性。 4.2 支持更多设备 方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以有意义的方式来渲染网页。 4.3 利于SEO优化 和搜索引擎建立良好沟通

web开发中前端页面是如何跟后端服务器数据交互的

廉价感情. 提交于 2019-12-06 06:35:12
本文链接:https://blog.csdn.net/kangkanglhb88008/article/details/84446173后端服务器一般是指servlet容器,用于执行java源程序 常见的网页有html,htm,shtml,asp,aspx,php,jsp等格式前两个常用于静态网页,后面几个常用于动态网页。 这里前端网页以比较常见的 xx.html 和 xx.jsp 网页作为介绍,其它类似 一、静态页面xx.html如何跟后台交互:先来看一个最简单的登陆界面源代码 <body> <form action="loginServlet" method="post"> user:<input type="text" name="username"/> password:<input type="password" name="password"/> <input type="submit" value="Submit"/> </form> </body> 这是一个表单,我们看到里面都是纯html内容,这是一个静态页面,当我们点击submit按钮时候,浏览器会提交表单内的数据到服务器的loginServlet这个相对地址,我们看看浏览器的地址变成啥了: 这不就是我们的后台servlet的地址嘛,然后这个地址指向的是loginServlet这个servlet,然后在web

《基于Vue.js的Web前端应用研究》文献阅读(十五)

∥☆過路亽.° 提交于 2019-12-06 05:57:26
一、基本信息 标题:基于Vue.js的Web前端应用研究 时间:2017 来源:科技与创新 关键词:Web前端;Vue.js;JavaScript组件;Vue框架 二、研究内容 1.主要内容: 随着互联网的迅猛发展,用户对Web前端的使用体验、交互操作流程、外观有了更高的要求。特别是Web系统中越来越多的数据处理和业务逻辑开始偏向前端,导致Web前端工作量扩大,代码量增加。如果 仍然采用传统的方式开发设计Web前端,会导致前期开发度和后期维护难度增大,可扩展性变差。为了提高开发效率和代码复用率,越来越多的网页开发框架开始流行。于是先后提出了MVC、MVVM模式,方便 了构建基于事件的Web前端开发平台。本文主要介绍了基于MVVM模式的轻量级响应式框架Vue js的应用和研究,利用Vue框架实现了简化Web前端开发流程。 1应用需求 我校教师工作处为了更好地服务和管理全校教师借鉴全国教师管理系统,结合我校实际工作需求,开发-套Web教师管 理系统。该系统的主要要求有以下3个:(1)界面友好,美观大方。(2) 系统能实现对教 师的基本信息、教学、科研、学习经历、工作经历、培训、访学、获奖等信息的统计和管理。(3) 系统运行安全、稳定、速度快、便于管理。因为系统处于急用状态,开发、实施时间短,所以,决定采用前、后 端同时开发和调试,利用JSON API的方式,实现Web的前后分离

让小白不走弯路:学习web前端流程,以及学习误区

六月ゝ 毕业季﹏ 提交于 2019-12-06 05:02:25
学习web前端编程技术肯定是以就业拿到高薪工作为主要目的的,可是高薪不会那么轻易拿到,这是一个最简单的道理。没有付出就没有回报,在整个学习web前端编程技术的过程中,你需要付出时间、精力、金钱。废话不多说直接上干货。 在开始学习之前你需要做到以下5点: 第一:需要达到什么样的技术水平才能就业? 既然是为了就业,你就要知道学习web前端编程技术需要达到什么样的技术水平,才能获得一份web前端开发的工作。就好比高考的一个分数线,你是否能被大学录取,要看你能不能过分数线。软件公司录用你,也是有一个标准,所以首先你要知道学习web前端编程技术应该能达到什么样的水平才能就业。 目前行业就业标准:需要有项目开发的经验,一年经验web前端开发项目经验以上,进公司一周后可以参加项目模块的开发。 有句话叫做“方法不对,努力白费”所有的前端大神都有自己的学习方法,而学web前端的学习也基本一致,而对于一个什么都不懂的初学者,根本不会知道该怎么学,这也是造成失败的最直接原因。所以学web前端一定要有人指点。如果你处在迷茫期,找不到方向。可以加入我们的前端学习秋秋qun 767 web前端中间的数字是273,web前端最后是102有任何不明白的东西随时来问我 第二:明确web前端都应该学习什么企业需求的技术 IT行业技术更新的比较快,所以我们肯定是学现在企业需要的技术,而不是一些已经淘汰的技术

FCC成都社区·前端周刊 第 2 期

我们两清 提交于 2019-12-06 04:21:21
01. Propel:JS的科学计算框架 Propel 是一种 JavaScript 科学计算框架,类似于 Python 中的科学计算库 NumPy,也就是说利用 JS 也可以进行机器学习啦。Propel可以依靠 TensorFlow 来提高性能,适用于Node 和浏览器环境。 详情: http://propelml.org/ 02. 事件循环详解 详情链接是一段在 2018 JSConf.Asia 大会上详解浏览器中事件循环和渲染机制的视频,总长35分钟。 详情: https://www.youtube.com/watch?v=cCOL7MC4Pl0 03. webpack 4 正式发布 webpack 4 于2.25号正式发布,版本代号为legato。该版本构建速度最快可提升98%,新增 mode 配置项,提供零配置平台来扩展,废除了 CommonsChunkPlugin 插件,默认支持 WebAssembly,更多更新请戳详情。 详情: https://medium.com/webpack/webpack-4-released-today-6cdb994702d4 04. V8 中的 DOM 对象 Chrome 66的 DevTools 可以跟踪C++ DOM对象,并显示 JavaScript 引用的所有可访问的 DOM 对象,因此在 Chrome 中调试内存泄漏变得更加容易