[TOC]

开发Web页面过程的学习记录。

HTML

只有区域才会在浏览器中显示。

表示HTML文档的根元素，用于指定文档的语言为英语。

CSS

<style>
	[v-cloak] {
		display: none;
	}
</style>

使用属性选择器[v-cloak]，设置其display属性为none。这通常用于在页面加载时隐藏具有 v-cloak 属性的元素，直到Vue.js实例加载并准备好显示这些元素。

XML

XML指可扩展标记语言（Extensible Markup Language）。XML用来传输和存储数据，HTML则用来表现数据。

命名空间

提供避免元素命名冲突的方法。

在XML中，元素名称是由开发者定义的，当两个文档使用相同的元素名时，就会发生命名冲突。

在XML中的命名冲突可以通过使用名称前缀来避免。例如<h:table>和<f:table>。

xmlns属性

当在XML中使用前缀时，一个所谓的用于前缀的命名空间必须被定义。命名空间是在元素的开始标签的xmlns属性中定义的。例如<h:table xmlns:h=”http://www.w3.org/TR/html4/">

JavaScript

获取日期

// 创建一个 Date 对象，表示当前日期和时间
var date = new Date();

// 获取当前日期的四位数年份
var year = date.getFullYear();

// 输出年份
console.log(year); // 例如：2024

项目解读

project_config.js

从本地存储获取project_pid(项目ID), project_uid(用户ID)，project_data

构建项目令牌

定义服务器URL

定义登录URL

定义配置传感器动态监控的URL，用于与服务器通信

还有一些模块的URL定义

Json数据转Excel

通过解析JSON字符串，赋值给arrData

创建包含HTML表格起始标签’
‘的字符串变量excel

将JSONData数组的第一个对象的键生成一个表格行（表头设置）

遍历arrData数组中的每一个对象，将每个对象的属性值作为表格行内容添加到excel变量中

创建包含HTML文档开头的字符串变量excelFile，HTML文档包含特定的命名空间声明

为生成的 HTML 文件添加 Excel 特定的 XML 标记，以确保文件在 Excel 中打开时能正确显示工作表名称、网格线等设置

将生成的 excelFile 字符串转换为一个数据 URI，以便在浏览器中作为下载链接使用。这种方式允许用户点击链接并下载生成的 Excel 文件

<以上操作是为了生成Excel数据并提供下载链接>

定义一个函数，用于检测当前环境是否为移动设备

定义一个函数，实现深拷贝一个JSON对象

定义一个函数，实现将日期转换为字符串格式

定义一个函数，根据传入的参数动态配置用户界面，设置特定页面的背景图像、背景颜色以及加载特效脚本。

localStorage.getItem()：从本地存储中获取之前存储的值，可以用于在页面加载时初始化应用程序的状态，或者在用户进行操作时检索和使用这些值。

console.log(): 在控制台输出信息，接受一个参数，该参数可以是数组，对象或任何消息

**PHP(Hypertext Preprocessor)**文件是一种服务器端脚本文件，用于在Web服务器上执行服务器端代码。可以与服务器进行交互、执行各种任务，如处理表单数据、访问数据库、生成动态网页内容。

URL地址提供了与服务器进行通信的接口，通过发送HTTP请求到这些URL，可以实现相应模块的功能操作。

JSON.parse(): JavaScript中的一个内置函数，用于将JSON字符串解析为对应的JavaScript对象。当从服务器或其他来源获取到 JSON 格式的数据时，它通常是一个字符串。为了在 JavaScript 中使用这些数据，需要将它们转换为 JavaScript 对象。

Object.keys() 获取对象所有属性名

xmlns:o='urn:schemas-microsoft-com:office:office': 为 o 前缀声明一个 XML 命名空间，通常与 Microsoft Office 相关

xmlns:x='urn:schemas-microsoft-com:office:excel': 为 x 前缀声明一个 XML 命名空间，通常与 Microsoft Excel 相关

xmlns='http://www.w3.org/TR/REC-html40': 为默认命名空间声明一个 XML 命名空间，指定 HTML 4.0 规范的 URI

嵌入的 XML 标签和条件注释使得生成的 HTML 文件在 Microsoft Excel 中打开时，可以正确识别和应用这些设置，从而使数据按照预期显示和格式化

var uri = 'data:application/vnd.ms-excel;charset=utf-8,' + encodeURIComponent(excelFile);

    var link = document.createElement("a");
    link.href = uri;

    link.style = "visibility:hidden";
    link.download = FileName + ".xls";

    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);

将生成的’excelFile’字符串编码为数据URL，并创建一个下载链接，使用户可以点击下载生成的Excel文件，通过添加隐藏的链接并触发点击事件，自动完成文件下载。

function config_UI(name)

首先解析JSON数据，将JSON字符串解析为JavaScript对象，检查是否为空。

处理sensor_monitor页面: 加载特效脚本、设置背景图像、设置背景颜色

处理user_manage页面：加载特效脚本、设置背景图像、设置背景颜色

处理default页面：加载特效脚本、设置背景图像、设置背景颜色

处理main页面：设置背景图像、设置背景颜色

index.html

配置和实现一个根据设备类型（移动设备或桌面设备）自动跳转到相应登录页面的功能。它使用了 jQuery 来发送 AJAX 请求，并根据服务器返回的数据决定跳转逻辑。这种机制在需要根据不同设备提供不同登录页面的场景下非常有用。

DOCTYPE声明，声明文档类型为HTML5

定义html元素； ‘lang’属性指定文档的语言为英语

为了配合Vue.js的使用，添加一个简单的CSS样式，可以隐藏带有’v-cloak’属性的元素

定义基本的meta标签，包括字符编码和视口设置。字符编码指定为UTF-8、设置视口元数据，确保网页在移动设备上能以合理的比例显示，而不会自动缩放。

引入project_config.js文件，引入jquery-3.4.1.min.js文件，这是jQuery库的一个压缩版本。（jQuery是一个快速、简洁的JavaScript库，简化了HTML文档遍历、事件处理、动画和Ajax交互)

编写内联javascript代码：

创建db_request_option函数，用于发送AJAX请求，根据请求类型（POST或GET）向服务器发送数据并处理服务器的响应。

将project_data字符串解析成JavaScript对象config_data，检查是否有效（不为null且不为空字符串）

检查路由配置，即检查config_data中的sys_cfg_router_enable是否存在且不为空

发送AJAX请求：调用db_request_option函数发送一个GET请求，从router表中选择数据

遍历返回的数据，根据type和enable字段设置pc_login_url和app_login_url

判断设备类型，根据设备类型和对应的URL进行页面跳转，如果对应的URL不存在，跳转到默认的login.html

如果路由配置未启用或sys_cfg_router_enable不存在，直接跳转到login.html

<style>
	[v-cloak] {
		display: none;
	}
</style>

在Vue.js完全编译和渲染之前，带有’v-cloak’属性的元素会被隐藏。一旦Vue.js完全加载并挂载到’#app’元素，’v-cloak’属性会被移除，模板内容会显示出来。这种方法可以避免在Vue.js加载时出现的闪烁问题，确保用户在看到页面内容之前已经完全加载和渲染。

部分的主要功能是提供文档的元数据和链接资源，这些内容对网页的呈现和行为有重要影响。通过适当地使用这些标签，可以确保网页在不同的设备上正确显示，并优化搜索引擎的表现。

在HTML文档的’‘部分或’‘部分中添加’

Miraisen

Web开发实践