【前端】Angular框架详解：企业级前端开发平台
Angular是由Google开发和维护的开源前端框架，专为构建大型、复杂的单页应用程序而设计。它采用TypeScript作为主要开发语言，提供了完整的开发生态系统和企业级特性。 目录 Angular基础概念 项目结构与CLI 组件系统 模板语法 依赖注入 服务与HTTP客户端 路由系统 表单处理 状态管理 测试 最佳实践 总结 一、Angular基础概念（一）核心特性1. TypeScript优先Angular从设计之初就采用TypeScript，提供强类型支持和现代JavaScript特性。 1234567891011121314// 接口定义interface User { id: number; name: string; email: string; isActive: boolean;}// 类型安全的组件@Component({ selector: 'app-user', template: ` <div class="user-card"> <h...
【前端】前端框架全景图：现代Web开发技术栈详解
引言现代前端开发已经从简单的HTML、CSS、JavaScript组合发展成为一个复杂而丰富的生态系统。各种框架、库和工具层出不穷，为开发者提供了强大的能力来构建复杂的用户界面和交互体验。本文将全面介绍当前主流的前端框架，帮助开发者了解各个框架的特点、优势和适用场景。 一、前端框架发展历程（一）发展阶段1. 原生时代（2000-2010） 特点：直接使用HTML、CSS、JavaScript 代表技术：DOM操作、jQuery 优势：简单直接，学习成本低 劣势：代码复用性差，维护困难 2. 库时代（2006-2013） 特点：引入工具库简化开发 代表技术：jQuery、Prototype、MooTools 优势：简化DOM操作，提高开发效率 劣势：缺乏架构指导，项目结构混乱 3. MV*框架时代（2010-2016） 特点：引入架构模式，分离关注点 代表技术：Backbone.js、AngularJS、Ember.js 优势：代码组织更好，可维护性提升 劣势：学习曲线陡峭，性能问题 4. 组件化时代（2013-至今） 特点：组件化开发，虚拟DOM，响应式更新 代表技术：Re...
【LINUX】在一台空服务器上部署网页系统
一、准备环境 首先要看服务器是什么系统，笔者所用的是Centos7系统，所以以下也是在Centos7下的操作。 如果是Ubantu可以参考最后的链接 查看服务器信息 1234uname -a # 查看系统内核信息lsb_release -a # 如果是 Linux 系统，查看发行版本df -h # 查看磁盘空间free -m # 查看内存使用情况 虽然说是空环境，但是在服务器上面可能还有很多东西需要配置、安装，比如yum配置源等。 检查软件安装状态： 123mysql --version # 检查 MySQL 是否已安装nginx -v # 检查 Nginx 是否已安装java -version # 检查 Java 是否已安装 二、安装部署所需的软件 本次部署的服务器可以连接互联网，所以本次部署采用的安装也是在线安装。 如果发现yum安装依赖时连接失败或安装错误，可以查询一下看看是不是yum源没有配置。 （一）MySQL MySQL是一个关系型数据库管理系统，是网站...
【BUG】Node打包失败
【BUG】Node打包失败[Error: error:0308010C:digital envelope routines::unsupported]一、出现问题 更换新电脑后，安装了新版本node（20.15.0），发现使用打包命令vue-cli-service build --mode production 时会报错，报错信息如下 1[Error: error:0308010C:digital envelope routines::unsupported] 在搜索后，发现原因可能是node版本的问题，node17之前该命令可以正常运行，但是在17之后，由于OpenSSL3.0的发布，对允许算法和秘钥大小进行了严格限制，导致运行会报错。 二、解决措施 方法一：降低node版本，可以卸载新版的node，安装node16版本； 方法二：在运行项目命令前，先运行一下语句： Windows： 1set NODE_OPTIONS=--openssl-legacy-provider Linux && Mac 1export NODE_OPTIONS=--op...
【MySQL】存储过程：新增或更新数据
存储过程：新增或更新数据1234567891011121314151617181920212223242526272829303132333435CREATE DEFINER=`root`@`%` PROCEDURE `database`.`UpdateOrInsertReviseHistory`( IN p_file_number VARCHAR(255), IN p_version_id VARCHAR(255), IN p_effect_date DATETIME, IN p_revise_content TEXT)BEGIN -- 检查记录是否存在 IF EXISTS (SELECT 1 FROM revise_history WHERE file_number = p_file_number AND version_id = p_version_id) THEN -- 如果存在则更新 IF p_revise_content IS NOT NULL AND p_revise_content != '...
【前端】去除输入框el-input的前后空格
一、前言在VUE项目中，我们经常需要去除输入框el-input的前后空格，但是el-input组件并没有提供这个功能，所以需要我们自己实现。 二、实现方法（一）安装全局指令 可以在src/directives中创建一个JS文件，我创建的文件名叫input_trim.js，用于写自定义指令的代码。 然后在文件中写入以下代码： 123456789101112131415161718192021222324252627282930export default { install (Vue) { Vue.directive('trim', { inserted (el, binding, vnode) { // 获取el-input的input元素 const input = el.querySelector('input') || el.querySelector('textarea'); // 定义一个失焦事件处理函数 ...
【前端】网页悬浮窗口
网页悬浮窗口需求场景 项目中集成了设备取数的功能，而在和设备取数现场人员对接的时候，发现设备无法绑定样品，也无法实时取数，所以设备获取到的数据就会不定时的通过接口保存到项目的数据库中。而在软件系统中，需要能获取到设备取数的数值，然后填写到对应的输入框。 之前我的做法是通过实时数据来获取设备取到的数据，这种方法并不够严谨。之后遇到这个不定时取数的问题，就可以连同之前的问题也进行优化。 在代码层面的需求应该是： 可以展示设备取数数据 可以选择数据，并填写到输入框内 不影响其他地方的操作，即设备取数和其他功能应该是相互独立，互不影响的 符合操作习惯，易于操作 解决构想 首先，弹出层el-dialog 应该是无法满足这个需求的，因为弹出层组件会在弹出层弹出后，其他地方都会无法操作，只能操作弹出层之内的内容。所以我就寻思自己写一个组件，来实现既展示了设备取数数据，又可以操作其他地方。 我在别的系统中曾看到过类似的功能，是通过一个悬浮按钮【设备取数】，点击后会弹出一个悬浮窗口，里面展示的是设备取数的列表数据，可以获取到该功能开启后取到的所有数据，可以自行选择，然后选中的数据会自动填写...
【博客】Hello Hexo - 基础命令指南
Hexo博客常用命令指南Hexo是一个快速、简洁且高效的博客框架，使用Markdown解析文章，可以在几秒内生成静态网页。本文将介绍Hexo的常用命令。 文章管理创建一篇新文章123$ hexo new "文章标题"# 或简写为$ hexo n "文章标题" 这将在source/_posts/目录下创建一个新的Markdown文件。 更多信息: Writing 创建一篇新草稿1$ hexo new draft "草稿标题" 草稿会被保存在source/_drafts/目录下，默认情况下不会显示在网站上。 将草稿发布为正式文章123$ hexo publish "草稿标题"# 或简写为$ hexo p "草稿标题" 这将把草稿从_drafts目录移动到_posts目录，使其成为正式发布的文章。 站点管理启动本地服务器预览123$ hexo server# 或简写为$ hexo s 启动后可通过浏览器访问http://localhost:4000预览网站效果。 常用选项： ...
【前端】Ajax详解：从基础到实践的完整指南
Ajax详解：从基础到实践的完整指南引言Ajax（Asynchronous JavaScript and XML，异步JavaScript和XML）是现代Web开发中不可或缺的技术。它允许网页在不重新加载整个页面的情况下与服务器进行数据交换，极大地提升了用户体验和应用性能。本文将从基础概念开始，深入探讨Ajax的工作原理、实现方式和最佳实践。 一、Ajax基础概念1.1 什么是Ajax1Ajax是一种Web应用程序开发技术的组合，可使Web应用程序对用户交互的响应速度更快。每当用户与Web应用程序进行交互时，例如当他们点击按钮或复选框时，浏览器都会与远程服务器交换数据。 Ajax的核心特点： 异步性：请求在后台执行，不阻塞用户界面 局部更新：只更新页面的特定部分，而非整个页面 用户体验：提供流畅、响应迅速的交互体验 数据格式：虽然名称包含XML，但可以处理任何类型的数据 1.2 Ajax的组成技术1Ajax由几种Web和编程技术组成： XHTML、HTML和CSS：用于网页内容的设计和样式 XML：用于数据交换的格式（现在更多使用JSON） XMLHttpRequest：用...