英语原文共 4 页，剩余内容已隐藏，支付完成后下载完整资料
文艺作品展示系统的前端设计与实现
摘要：随着影视作品的不断丰富，脚本管理系统应运而生。 与此同时，Web2.0时代的到来使人们对网站的可用性和互动体验变得更加严格。 精心设计和功能以及网站可以提升用户体验，保留更多用户，而不当的设计则会让用户感觉不好，并流失大量的用户。 因此，Web应用程序的前端设计和交互变得越来越重要。 第一章介绍了文艺作品展示系统发展的背景和意义，第二章介绍了三种基本的前端技术和框架，第三章介绍了系统的总体结构和具体设计与的前端实现，第四章为总结内容。
关键词：脚本管理；前端设计；应用；框架
一、引言
1958年6月，中国第一部电视剧《菜籽饼》于北京电视台通过直播方式播出，标志着中国电视产业的诞生。经过50多年的发展，我国电视产业已经进入了一个发展繁荣期，电视主题从单一的前期发展到目前的多种风格，已经变得更加丰富多彩，思想内容更加丰富，更加强调艺术与思想的统一，以及各种类型的电视。世界文化交流更加频繁。现阶段，我国电视剧产业无论在质量还是数量上都取得了很大的进步。为了帮助编剧和导演创作出更好的影视作品，提高创作和拍摄效率，展示系统应运而生。文艺作品展示系统是一个专业、高效、安全的中文剧本创作平台。它具有在线创建、管理工具、脚本编写、传记、人物和场景表演、脚本大纲、PDF导出等功能。拍摄时间表可以帮助导演和高效管理每个场景的选择和安排，以及每个角色演员的选择。它还可以帮助公司管理者有效地管理每个项目的投资。
随着互联网应用的日益普及和Web2.0技术的快速发展，自2005年以来，各种替代桌面应用的互联网应用得到了迅速发展。并且开始进入我们的生活。用户越来越关注网站的互动和体验。网络的内容和形式已经发生了很大的变化。网页不再局限于单一文本和图片，但更丰富的多媒体内容使网页内容更加生动。网络上的交互式软件形式也提供了更好的用户体验，这是基于前端技术的结果。总之，良好的前端设计和互动体验可以有效提升网站的竞争力。
二。前端相关技术
随着互联网的不断发展，各种各样的互联网应用层出不穷，正在改变人们的习惯和模式。这些应用程序之间的竞争也在加剧。由于用户直接接触是前端的界面和交互，因此，为了增强用户对产品的体验，前端技术也不断发展。本章主要介绍了Web2.0时代前端开发的三种基本技术和新技术。
a.基本前端技术
前端开发的三种基本技术是HTML、CSS和JavaScript。HTML是其结构化标准语言。CSS作为它的标准语言。JavaScript是行为的标准语言。为了满足Web标准，核心思想是将Web页面的结构、样式和行为分离开来，因此有三种基本语言[3]。
图1网页的三层结构。
HTML（超文本标记语言）-超文本标记语言是用于创建网页的标准通用标记语言，负责构建网页的结构层。HTML标记描述了Web内容的语义含义，例如表示这种语义的lt;pgt;标记：“这是一个文本段。”但这些标记不包含有关如何显示内容的任何信息。
2014年，万维网联盟（W3C）完成了标准并开发了HTML5。它是HTML的最新版本，是下一代HTML标准，它赋予网页更好的含义和结构，并得到了现代浏览器的支持。
CSS（层叠样式表）-层叠样式表负责构建网页的表示层，描述如何呈现网页内容，以及控制网页的样式和布局。CSS技术的最大优势在于它将Web文档的内容结构（标记）和布局设计（样式）分离开来。CSS3是最新版本的CSS，它有一个更强大的选择器，可以更容易地实现页面所需的样式以及一些动画效果。
JavaScript是一种解释性编程语言，只需要解释程序，不需要编译器，后者负责构建网页的行为层。在Internet环境中，需要由Web浏览器解释和执行JavaScript语言。浏览器中的JavaScript解释器直接读取源代码并执行。如果浏览器中没有解释器，则无法执行JavaScript代码。JavaScript由三个不同的部分组成：EcmaScript，提供核心语言功能；文档对象模型，访问和操作Web内容的方法和接口；浏览器对象模型，提供方法和接口以及浏览器交互。目前，浏览器支持更高程度的ES5。ES6于2015年6月正式发布，是ES6的最新版本。但是浏览器没有太多的支持，并且浏览器有不同的支持级别，您需要使用Webpack和类似的其他工具来将EcmaScript6转换为EcmaScript5。
B.前端常用技术和框架
Ajax（异步JavaScript和XML）是一种创建交互式Web应用程序的Web开发技术。它可以将请求异步发送到页面上的服务器。服务器不会使用整个页面来响应请求，而是在后台处理请求，而用户可以继续浏览页面并与页面交互。使用Ajax，您可以提高站点的可用性，用户可以快速得到响应，而无需刷新页面。但是这种缺乏状态记录技术的情况与浏览器的一些应用程序约定冲突，导致用户无法使用后退按钮。HTML5的新历史API可以解决这个问题。
d3（数据驱动文档）是一个可以通过数据操作文档的JavaScript库。d3可以使用html、css和svg生动地显示数据[6]。D3遵循Web标准，因此它可以很容易地与现代主流浏览器兼容，并避免依赖特定的框架。它还提供了强大的可视化组件，允许用户以数据驱动的方式操作DOM。Echarts是另一个具有令人眼花缭乱的视觉效果和丰富交互功能的JavaScript库，其底线依赖于轻量级画布类库zrender。与D3相比，Echart的学习成本较低，但D3可以让用户有更好的个性化定制。两种浏览器的图形绘制技术不同，前者是SVG，后者是画布。优势和SVG和Canvas的缺点如下表所示。
表1. SVG 和 Canvas 的优缺点
|
|
SVG |
Canvas |
|
取决于分辨率 |
否 |
是 |
|
支持事件处理程序 |
是 |
否 |
|
渲染能力 |
强 |
弱 |
|
保存结果图像 |
否 |
是 |
|
适合游戏 |
否 |
是 |
jQuery是一个快速、紧凑、功能强大的JavaScript库。它在IE6.0 、FF2.0 、Safari2.0 和Operat9.0 下运行良好，修复了浏览器之间的一些差异，而不必担心开发项目之前浏览器的兼容性。它使HTML文档的遍历和操作、事件处理、动画和Ajax易于使用，并且需要少量的代码来处理JavaScript本机代码。jquery是非常强大的选择方法、语法和简化的Ajax和事件方法，它将使代码更加简洁和易于理解。您可以使用许多开发良好的插件。jQuery还很好地保留了撤退、逐步和非侵入式编程思想。现在，jQuery已经成为世界上使用最广泛的JS库。
BootStrap是一个开源的前端框架，由Twitter于2011年8月发布。它是一个CSS样式模板和HTML模板代码的集合，为产品的快速开发提供了一个高可用性的解决方案，包括组件样式布局、网格、表格、表单、按钮、导航、提示等。BootStrap还提供了丰富的JavaScript插件库，浏览器兼容性好，资源使用量小，学习成本低。我们可以使用引导程序构建一个非常优雅的前端接口。它的另一个主要特点是响应式布局：随着移动互联网和各种终端的普及和发展，页面对多终端和多分辨率的适应性也得到了提高。帧的响应，可以无缝地适应各种终端屏幕的大小，无论你的网站用户是通过电脑、手机还是平板电脑访问的，都可以很好地适应不同平台之间的差异。
三、系统整体结构及前端实现
a.整个结构
文艺作品展示系统采用三层结构，呈现层采用HTML、CSS、javascript、jquery、bootstrap框架和jinja2模板引擎，并采用Ajax技术提高异步页面的响应速度；逻辑层采用python语言和flask框架实现服务器端总线。iness逻辑；数据层使用非常适合Flask的sqlAlchemy数据库工具，并提供访问和操作数据库的接口。
Flask是一个用Python编写的轻量级Web应用程序框架。其Web服务器网关接口子系统是由Werkzeug提供；模板系统由Jinjia2提供。Flask有一个强大的核心，包含基本的服务，其他功能可以通过扩展来实现，开发者可以选择扩展所需的包，无需额外的精益组合，从而完全满足他们的需求。本系统中使用的Flask和Flask扩展如下表所示。
表二：包的版本
|
包名 |
版本 |
|
Flask |
0.12.1 |
|
Jinja2 |
2.9.6 |
|
Flask-BootStrap |
3.3.7.1 |
|
Flask-SQLAlchemy |
2.2 |
|
Flask-Login |
0.4.0 |
|
Flask-Mail |
0.9.1 |
|
FlaskScript |
2.0.5 |
与大多数其他Web框架不同，Flask并不强制大型项目使用特定的组织样式，并且程序结构的组织完全由开发人员决定。虽然用单个脚本编写小型Web程序很方便，但是当程序变得复杂时，使用单个大型源文件会导致很多问题，因此系统是以打包和模块化的方式组织的。
在Python中，文件通常对应于模块，目录对应于包。以package目录为首的文件是init_uuy文件，后面是文件和子目录。如果子目录中有in it.py文件，那么它就是这个包的包。当文件夹用作包时，文件夹需要包含init.py文件，主要是为了避免将文件夹名用作普通字符串。py的内容可以为空，通常用于对包执行一些初始化。根据业务需求，系统分为9个部分：公司、用户、项目（基础信息、投资信息）、脚本概述、场景、计划、传记、人物关系。每个小部分对应于图中的一个文件夹，即一个包。下图显示了项目的目录结构。
|
|
图1系统的结构目录。
Flask程序通常存储在称为app的包中。程序的所有代码、模板和静态文件都保存在包中。requirements.txt用于记录所有
依赖包及其确切版本；manage.py用于启动程序；config.py用于程序配置。静态文件夹包含所有静态资源，如css、js、pictures等。模板文件夹包含系统前端的页面模板。
B.系统前端实现
文艺作品展示系统的HTML代码结构和渲染主要基于flask jinja模板。jinja2是基于django模板建模的python模板引擎。它具有强大的HTML转义系统，支持模板继承，能够及时编译python代码。它可以配置并且易于调试。jinja2是一个通用的模板引擎，不仅可以输出HTML或XML文件，还可以呈现消息、CSS、javascript文件等。
页面模板包含变量和表达式，这两个变量和表达式将分别替换为呈现引擎后计算的相应值，使用分隔符：%hellip;%}和{{hellip;}hellip;}}表示。前者用于执行相关语句，后者用于计算表达式。变量可以从应用程序传递到模板，如果变量是对象，还允许进一步访问变量的属性值。此外，jinja2还内置了一个过滤器，多个过滤器可以形成过滤效果链；内置测试仪可以帮助测试一些简单的数据；在转义时，还提供了一个单一的语句和整个实践的语句。模板还为语句和宏语句提供控制结构，例如if语句，这些语句和宏语句放在第一个分隔符中，以提供对程序流的控制。下图显示了使用页面模板的变量和表达式的特定示例。INFO是一个从后台传递到前端的变量，它是一个包含公司名称和联系人属性的对象。
图2 在页面和模板中插入变量和表达式
模板继承相对强大。您可以帮助组织首页代码的结构，重用一些共享代码，构建应用程序模板的框架，并通过定义子模板覆盖父模板的块来扩展特定的页面详细信息。通常，会定义一个基本的template base.html。在其中放置一些头元素
剩余内容已隐藏，支付完成后下载完整资料
资料编号：[19828]，资料为PDF文档或Word文档，PDF文档可免费转换为Word
以上是毕业论文外文翻译，课题毕业论文、任务书、文献综述、开题报告、程序设计、图纸设计等资料可联系客服协助查找。
