前端开发简历模板相关知识
-
前后端分离开发部署模式【转】转自:http://www.qttc.net/201506464.html0x01 传统开发模式相信很多做过Web开发童鞋应该都会经历这样一种开发模式,利用后端语言提供的模版引擎编写HTML/XML页面,比如:PHP 开发有 Smarty模板引擎Java web工程有jsp页面Python 各个Web框架都有各自的模板引擎NodeJS 的express你懂得都有一个共同的特点,服务器端后台语言生成解析后的HTML/XML格式返回给客户端,例如浏览器端访问直接返回解析好的HTML,浏览器直接就解释执行。0x02 Ajax过渡Ajax是把前后端分离部署的推进者,当时网页局部更新就是未来前后端分离的开端。那什么是前后端分离开发呢?简单来说就是前端开发不需要部署后台语言那堆垃圾环境,后端开发也不需要前端写好的任何程序,后台只管暴露各种API接口提供前端进行数据的增删改查,不负责生成HTML页面前端请求到数据后再动态声称dom节点。0x03 前端构建相对于后台来说,前端构建是重点,因为前后端分离开发后侧重点在于前端,
-
论技术选型的重要性,采用前端模板还是后端模板?在 “Spring Boot技术栈博客系统企业级前后端实战 ” 课程中(http://coding.imooc.com/class/125.html), 有学员问道 ,是可以完全返回JSON数据, 交由前端来渲染。这样,是否就不需要 Thymeleaf 模板了。 理论上,是可以完全返回JSON数据, 交由前端来渲染。但这样同样会引入另外一个问题,那就是必然也会需要在一个前端的模板,比如 AngularJS 等。也就是说,问题变成了是选择前端模板还是后端语言模板了。 鉴于本课程大多是面向Java开发工程师,在理解上,对于后端的Java模板
-
小记-我的前端开发工作经历大家好,我叫海瑞菌,从事web前端开发工作4年,期间在外包公司,签约咪咕数媒旗下开发咪咕项目,以咪咕阅读为主。一个手机阅读软件。 咪咕阅读APP界面,app采取webview开发模式(前端H5页面+app功能壳(B+C))。部分页面及功能采用原生开发,内容展示采用前端页面前2年项目使用的是freemarker+css+es5+zepto(jquery)的开发模式开发的。freemarker是一种jsp模板引擎,使用碎片化开发思维,用于输出服务器响应数据转化成html,本地写好的freemarker代码复制到UES编辑系统中运行,拖入碎片进行搭建页面。页面渲染采用css+es5+zepto开发模式。 编写碎片代码,采用freemarker模板引擎+html 管理线上页面、碎片、样式、脚本、风格,采用编辑管理系统 开发样式脚本采用本地开发完传入编辑系统,并预览 本地调试线上页面采用fiddler代理调试工具 直至开发调试完成,测试通过,运营通知上线。&
-
如何选择 Web 前端模板引擎?作者:喻恒春my.oschina.net/editorial-story/blog/1825266Web 模板就在那里模板引擎负责组装数据,以另外一种形式或外观展现数据。 浏览器中的页面是 Web 模板引擎最终的展现。无论你是否直接使用模板引擎,Web 模板一直都在,不在前端就在后端,它的出现甚至可以追溯到超文本标记语言 HTML 标准正式确立之前。服务器端的模板引擎我所知道最早的 Web 模板引擎是 PHP,它正式诞生于 1997 年,工作在服务器端。让我们看看 PHP 官方的 intro-whatis:PHP(“PHP: Hypertext Preprocessor”,超文本预处理器的缩写)是一种被广泛应用的开放源代码的多用途脚本语言,它可嵌入到 HTML中,尤其适合 web 开发。PHPer 普遍赞同 PHP 本身就是最天然、原生的 PHP 模板引擎,因为她本来就是。在 PHP 的世界里多次出现过再包装的模板引擎,著名的有 smarty。其它服务器端语言很多都有 HTML 模板引擎
前端开发简历模板相关课程
前端开发简历模板相关教程
- 2. 模板引擎使用场景 我们使用 Spring Boot 开发 Web 项目,大体上有两种方式。第一种方式,是后端服务化的方式,也是当前的主流方式。前端是静态的 HTML 页面,通过 Ajax 请求 Spring Boot 的后端接口。 Spring Boot 返回数据一般采用 JSON 格式,前端接收后将数据显示。第二种方式,是采取模板引擎的方式。前端的请求,到达 Spring Boot 的控制器后,控制器处理请求,然后将返回数据交给模板引擎。模板引擎负责根据数据生成 HTML 页面,最后将 HTML 返回给浏览器。我个人比较推荐第一种方式,说一下该方式的几个优点:便于分工协作:后端可以按自己的进度开发接口,前端可以开发页面,需要的时候直接调用后端 API ;便于项目拓展:比如前期是做的网站,后续要加一个 APP ,后端接口可以直接复用;降低服务端压力:后端只提供数据,一部分业务逻辑在前端处理了。服务端要做的事情少了,自然压力就小。本篇是讲模板引擎,也得说说模板引擎的优点,王婆卖瓜不能光夸草莓啊。模板引擎开发的页面,对搜索引擎 SEO 比较友好;还有就是简单的页面,如果用模板引擎开发速度比较快,毕竟模板化的方法,目的就是减少重复提高效率。
- 2. 前后端不分离模式 在前后端不分离的应用模式中,前端向 Web 服务器发送请求,Web 服务器根据请求内容,从数据库查询相应数据,将数据填充进模板渲染,渲染结果发回前端进行展示。在过去,人们访问互联网几乎都是通过 PC 浏览器,因而仅需开发适应 PC 显示的单终端页面(只在一种设备上使用,其他设备不使用或很少使用的页面)即可。如果仅开发单终端的网页应用,前后端不分离模式是较为普遍的开发模式,针对同一个页面,后端提供资源填充入前端模板相应的位置并渲染,展示给客户即可,无需考虑不同终端需要不同的数据类型、不同的展示效果。在这种场景下,前后端不分离模式不仅开发速度快,还便于开发人员直接调试页面。然而随着移动互联网的发展,Web 应用不再单单服务于 PC 端,同样的内容需要在不同的终端进行展示。而不同终端需要不同的渲染方式,如果仍然采用前后端不分离的应用模式,就需要后端为不同的前端渲染不同的页面进行适配,此时增加了许多冗余工作。前后端不分离模式示意图
- 4. 前端开发流程 前后端分离开发,实际上前端工作就简化了。我们直接新建项目文件夹 shop-front (商城前端项目文件夹),然后将前端页面放到该文件夹即可。注意该页面不需要放到 Spring Boot 项目目录下,随便找个目录放置即可。实际开发过程中,后端和前端的项目可能都不在一台计算机上。前端核心业务代码如下,由于前端技术不是本节介绍的重点,所以不再详细解释,感兴趣的同学可以从 Git仓库 查看完整代码 。实例: //初始化方法 $(function () { var row = ""; $.ajax({ type: "GET", url: "http://127.0.0.1:8080/goods", //后端接口地址 dataType: "json", contentType: "application/json; charset=utf-8", success: function (res) { $.each(res, function (i, v) { row = "<tr>"; row += "<td>" + v.id + "</td>"; row += "<td>" + v.name + "</td>"; row += "<td>" + v.price + "</td>"; row += "<td>" + v.pic + "</td>"; row += "</tr>"; $("#goodsTable").append(row); }); }, error: function (err) { console.log(err); } }); });开发完该页面后,直接使用浏览器双击打开,查看控制台发现有错误信息提示。浏览器控制台返回错误信息考验英文水平的时候到了!关键是 has been blocked by CORS policy ,意味着被 CORS 策略阻塞了。我们的前端页面请求被 CORS 阻塞了,所以没成功获取到后端接口返回的数据。
- 4.前后端分离模式开发规范 前后端分离模式逐渐成为主流,随之而来的问题也很突出。通常,后端服务开发完成,开发人员会写一份后端接口调用的说明文档。不同公司、不同项目甚至不同开发人员都有各自的喜好,因而开发好的后端服务,也是千奇百怪,前端开发人员为了使用使用后端服务,必须逐个对照说明文档才能知道调用方式。小型项目还好说,大型项目接口繁杂,如果仍然采用千奇百怪的接口调用方式,就会无形中增加开发难度。那么是否有一套接口开发规范,是否有一个见名知意的接口调用方式呢?答案是有的,这就是 RESTful 规范。后续内容,我们将正式开始学习 RESTful。
- 2. DTL 中的模板继承 在这里将介绍 DTL 中的模板继承语法,主要涉及到 block、extends 两个标签。Django 中的模板和 Python 中的类一样是可以被继承的,通过合理的模板继承可以减少前端的工作量,提高代码的复用性以及开发效率。例如下面的 w3school 的在线教程网站:w3school在线教程首页大致上,该网站有一个固定的头部,有一些侧边栏,以及内容主体部分。现在我们使用 Django 中的模板教程来完成一个这样的简单例子。首先在 template 目录下准备网站的框架模板文件 base.html,其内容如下:<html>{% load staticfiles %}<head></head><link rel="stylesheet" type="text/css" href="{% static 'css/main.css' %}"><body><!-- 大容器 --><div class="container"> <div class="header"><center>网站头部</center></div> <div class="sidebar"> {% block sidebar %} {% endblock %} </div> <div class="content"> {% block content %} {% endblock %} </div></div></body></html>由于模板文件中加载了静态资源文件,我们除了加上静态资源文件外,还需要加上在 Django 的全局配置文件中进行相关属性的设置:新建 static 目录,并在其下新建 css 目录,然后准备样式表 main.css:.container { border-style: dotted; border-color: red; border-width: 10px; width: 90%; height: 80%;}.container .header { border-bottom-style: solid; border-color: black; border-width: 5px; font-size: 24px; height: 100px; line-height: 100px;}.container .sidebar { border-right-style: solid; border-color: black; border-width: 5px; font-size: 24px; width: 20%; float: left; height: 80%;}.container .content { float: left; width: 60%;}.container .content .title { margin-top: 20px; margin-left: 40%; width: 100%; font-size: 24px; font-weight: bold;}在 Django 的 settings.py 文件中添加 STATICFILES_DIRS 属性:STATIC_URL = '/static/'# 新添加的配置,方便前面的模板文件中找到静态资源路径STATICFILES_DIRS = [ os.path.join(BASE_DIR, "static") ]可以看到,在前面的 base.html 文件中,我们定义了页面的基本框架,包括了网站头部、侧边栏数据以及内容主体。其中侧边栏和内容主体部分分别定义了两个 block 标签,并进行了命名。接下来我们新建模板文件 test_extends.html,该模板文件继承自 base.html,并给出两个 block 标签对应的数据:{# 继承base.html模板文件 #}{% extends "base.html" %}{# 侧边栏 #}{% block sidebar %}<ul> {% for lesson in lessons %} <li><a href="{{ lesson.addr }}">{{ lesson.name }}</a></li> {% endfor %}</ul>{% endblock %}{# 内容主体 #}{% block content %}<div class="title">{{ title }}</div>{% endblock %}准备好视图函数,这里我们会实现两个视图,使用的模板是一样的,但是填充的数据不一样而已:# hello_app/views.pyfrom django.shortcuts import renderdef test_django_view(request, *args, **kwargs): data = { 'title': 'Django教程手册', 'lessons': [ {'name': 'web框架', 'addr': '/web_framework'}, {'name': 'django发展历史', 'addr': '/django_history'}, {'name': 'django基础上', 'addr': '/base_one'}, {'name': 'django基础下', 'addr': '/base_two'}, ] } return render(request, 'test_extends.html', context=data)def test_nginx_view(request, *args, **kwargs): data = { 'title': 'Nginx教程手册', 'lessons': [ {'name': 'Nginx介绍', 'addr': '/web_server'}, {'name': 'Nginx发展历史', 'addr': '/nginx_history'}, {'name': 'Nginx优势', 'addr': '/nginx_advantages'}, ] } return render(request, 'test_extends.html', context=data)准备好 URLconf 配置:from django.urls import path, re_pathurlpatterns = [ path('test-django/', views.test_django_view), path('test-nginx/', views.test_nginx_view),]启动 Django 服务页面,然后分别请求/hello/test-django/ 和 /hello/test-nginx/ 两个地址,可以看到如下两个效果图,网页的整体布局不变,但是数据不同。几乎所有的大型网站都是靠这样继承模式实现的优化前端代码和统一页面的风格。test-django效果图test-nginx效果图通过上面的简单实验,我们能够理解并初步掌握 Django 中模板的继承用法。这种基于继承网页的做法能使得我们开发的网站具有统一的风格,也是后面经常会用到的一种模板编写手段。
- 2.1 模板 称其为动态页面模板可能更准确。模板中至少应该包括 2 部分内容:HTML、CSS 等 : 为模板中的数据提供版式和样式;强逻辑性语言: 提供数据逻辑能力,可以自动更新模板中的数据。Tips: 不同视图技术的模板可嵌入的强逻辑性语言不同。本文讲的 JAVA 程序,这里的强逻辑性语言指的是 JAVA 。每一种视图技术都会有自己的模板语法,开发者编写模板时必须遵循模板语法。
前端开发简历模板相关搜索
-
qingkong
qsort
quartz
quartz插件
quartz配置
queue
quit
quota
quotacheck
quote
quoted printable
quotename
quotes
七牛云存储
奇数偶数
气泡图
前端开发
钱币符号
求职面试技巧
区块链是什么