当前位置：首页 > news >正文

【JavaWeb学习Day24】

news 来源：原创 2025/8/21 23:31:11

Web前端实战

Vue工程化

Vue是一款用于构建用户界面的渐进式的JavaScript框架。（官方：https://cn.vuejs.org）

Vue项目工程化：在企业级的前端项目开发中，把前端开发所需求的工具、技术、流程、经验等进行规范、标准化。

模块化：项目划分若干模块，单独开发、维护、提高效率。

组件化：将页面的各个组成部分封装为一个一个的组件，提高复用。

规范化：提供标准统一的目录结构，编码规范、开发流程。

自动化：项目的构建、开发、测试、打包、部署

环境准备：

介绍：create-vue是Vue官方提供的最新的脚手架工具，用于快速生成一个工程化的Vue项目。

create-vue提供的功能：统一的目录结构、本地调试、热部署、单元测试、集成打包上线

依赖环境：NodeJS

npm：Node Package Manager，是NodeJS的软件包管理器

Vue项目简介

创建：

创建一个工程化的Vue项目，执行命令：npm create vue@3.3.4

（提示：执行上述指令，将会安装并执行create-vue，他是Vue官方的项目脚手架工具）

进入项目目录，执行命令安装当前项目的依赖：npm install

（注意：创建项目以及安装依赖的过程，都是需要联网的。）

项目结构：

启动：执行命令：npm run dev ，就可以启动了

Vue项目开发流程

*.vue是Vue项目中的组件文件，在Vue项目中也称为单文件组件（SFC，Single-File Components）。Vue的单文件组件会将一个组件的逻辑（JS），模板（HTML）和样式（CSS）封装在同一个文件里.vue

API分格

选项式API：可以包含多个选项的对象来描述组件的逻辑，如：data、method、mounted等，选项定义的属性都会暴露在函数内部的this上，他会指向当前的组件实例。

组合式API：是Vue3提供的一种基于函数的组件编写方式，通过使用函数来组织和复用组件的逻辑，他提供了一种更灵活更可组合的方式来编写组件

<script setup>
//引入ref函数和onMounted函数
import { ref, onMounted } from 'vue'
//声明相应式数据
const count = ref(0);

//声明函数 - 在组合是Api中没有this
function add() {count.value++;
}
//钩子函数
onMounted(() => {console.log('vue mounted...')
})
</script>
<template><button @click="add">count is {{count}}</button>
</template>
<style scoped>
</style>

setup：是一个标识，告诉vue需要进行一些处理，让我们可以更简洁的使用组合式API

ref()：接收一个内部值，返回一个响应式的ref对象，此对象只有指向内部值的属性value。

onMounted()：在组合式API中的钩子方法，注册一个回调函数，在组件挂载完成后执行。

（在Vue中的组合式API使用时，是没有this对象的，this对象是undefined。）

案例

要求在页面加载完毕后，发送异步请求，加载数据，渲染表格

项目中用到axios，就需要安装axios的依赖：npm install axios

<script setup>
//引入ref函数
import { ref,onMounted } from 'vue';
import axios from 'axios';
//声明相应式数据
const name = ref('');
const gender = ref('');
const job = ref(1);
const userList = ref([]);

//声明函数
async function search() {const result = await axios.get('https://web-server.itheima.net/emps/list?name=${name.value}&gender=${gender.value}&job=${job.value}').then(result =>{userList.value = result.data.data;})
}

//钩子函数
onMounted(() => {search();
})</script><template><div id="center">姓名: <input type="text" name="name" v-model="name">性别:<select name="gender" v-model="gender"><option value="1">男</option><option value="2">女</option></select>职位:<select name="job" v-model="job"><option value="1">班主任</option><option value="2">讲师</option><option value="3">其他</option></select><input class="btn" type="button" value="查询" @click="search"></div><table><tr><th>序号</th><th>姓名</th><th>头像</th><th>性别</th><th>职位</th><th>入职时间</th><th>更新时间</th></tr><!-- v-for 用于列表循环渲染元素 --><tr v-for="(user, index) in userList" :key="user.id"><td>{{index + 1}}</td><td>{{user.name}}</td><td> <img :src="user.image"> </td><td><span v-if="user.gender == 1">男</span><span v-else-if="user.gender == 2">女</span><span v-else>其他</span></td><td><span v-if="user.job == 1">班主任</span><span v-else-if="user.job == 2">讲师</span><span v-else-if="user.job == 3">学工主管</span><span v-else-if="user.job == 4">教研主管</span><span v-else-if="user.job == 5">咨询师</span><span v-else>其他</span></td><td>{{user.entrydate}}</td><td>{{user.updatetime}}</td></tr></table>
</template><style scoped>table,th,td {border: 1px solid #000;border-collapse: collapse;line-height: 50px;text-align: center;}#center,table {width: 60%;margin: auto;}#center {margin-bottom: 20px;}img {width: 50px;}input,select {width: 17%;padding: 10px;margin-right: 30px;border: 1px solid #ccc;border-radius: 4px;}.btn {background-color: #ccc;}
</style>

【JavaWeb学习Day24】

Web前端实战 Vue工程化 Vue是一款用于构建用户界面的渐进式的JavaScript框架。（官方：https://cn.vuejs.org） Vue项目工程化：在企业级的前端项目开发中，把前端开发所需求的工具、技术、流程、经验等进行规范、标准化。…...

编程日记 2025/8/21 23:31:11

Scratch034豌豆发射（下）

知识回顾 1、克隆体点击角色的判断 2、使用克隆体时“停止该角色其他脚本”积木的作用范围。效果演示提示：这里可以添加本文要记录的大概内容每隔一段时间，舞台右侧就会出现多个除草机向左移动点击不同位置的豌豆射手，可以发射豌豆攻击对应位置的除草机除草机被豌豆击中…...

编程日记 2025/8/22 8:55:00

nacos下载及安装

下载官方最新稳定版 github下载较慢，推荐下面的下载链接 Nacos Server 下载 | Nacos 官网点击下载和试用下载最新稳定版 Nacos Server 下载 | Nacos 官网配置检查（可选） 默认情况下，Nacos 使用内置的 Derby 数据库&#x…...

编程日记 2025/8/22 8:57:14

javase集合框架Map篇

一、常见的Map的实现有HashMap、Hashtable、LinkedHashMap、TreeMap、ConcurrentHashMap。二、HashMap和Hashtable 的区别 HashMap：底层是基于数组链表，非线程安全的，默认容量是16、允许有空的健和值。 Hashtable：基于哈希表…...

编程日记 2025/8/21 2:19:11

【RAGFlow】windows本地pycharm运行

原因由于官方只提供了docker部署，基于开源代码需要实现自己内部得逻辑，所以需要本地pycharm能访问，且docker运行依赖得其余组件，均需要使用开发服务器得配置。修改过程安装python 项目依赖于Python 版本：>3.1…...

编程日记 2025/8/17 17:44:28

STM32初始安装

前言很多人刚买来STM32就迫不及待地想要用它来写程序，看见STM32开发版和ST-Link上有几个插口就直接连接，结果就像我一样一不小心就导致ST -Link烧坏了😂 所以本篇博客将做最基础的但是对于小白来说最重要的教学，STM32的线路连接…...

编程日记 2025/8/16 1:41:04

数据库系统概论（二）数据模型

数据库系统概论（二）数据模型数据库系统概论（二）数据模型前言一、数据建模二、概念模型三、数据模型的三要素四、层次模型五、网状模型六、关系模型总结（核心概念速记）： 数据库系统概论&#x…...

编程日记 2025/8/20 23:57:15

深入理解C语言链表：数据结构的基石

在C语言的编程宇宙中，链表就像是一座稳固的基石，支撑着众多复杂程序的构建。它以独特的魅力和强大的功能，在解决各类编程难题时发挥着至关重要的作用。今天，就让我们一同深入探索链表的奥秘。目录一、链表初相识二、链表的结…...

编程日记 2025/8/16 9:59:13

微信小程序文件存储和获取的详细方案

在微信小程序中，要根据索引（如自定义标识符）检查是否存在对应的文件，可以通过以下方案实现。这里假设你已通过某种方式将文件路径与索引关联存储（例如使用本地缓存 Storage），以下是完整流程&…...

编程日记 2025/8/19 4:18:48

java BCC异或校验例子

需求对一个十六进制的字符串进行BCC校验方法 private static String XORCheck(String rawMsg) {// 16进制字符串需要转成10进制数组进行校验，然后再返回16进制字符串用于与原来的字符匹配byte[] bytes HexDumpMsgFormat.hexStr2DesBytes(rawMsg);return BytesUt…...

编程日记 2025/8/18 22:16:50

[machine learning] DP(Data Parallel) vs DDP(Distributed Data Parallel)

DP和DDP是并行训练的两种方法，本文简单介绍它们两者的区别。一、DP (Data Parallel) DP是单进程，多线程的，每个线程负责一个GPU，它只适用于一台机器。DP训练的流程如下图所示(图片转载自：https://medium.com/mlshar…...

编程日记 2025/8/22 5:19:34

今日头条文章爬虫教程

今日头条文章爬虫教程随着互联网的发展，新闻资讯类平台如今日头条积累了海量的数据。对于数据分析师、研究人员等群体来说，获取这些数据进行分析和研究具有重要的价值。本文将介绍如何使用Python编写爬虫，爬取今日头条的文章数据。一、准…...

编程日记 2025/8/19 14:37:39

鸿蒙应用开发—数据持久化之SQLite

文章目录 SQLite简介创建数据库添加数据查询数据更新数据删除数据升级数据库使用事务参考 SQLite简介 SQLite是一个轻量级关系数据库，占用资源很少，只有几百KB的大小，无需服务器支撑，是一个零配置、事务性的SQL数据库引擎。相对…...

编程日记 2025/8/21 20:39:52

Docker Compose 部署 steamcmd 安装奈斯服务端

由于打算在云端服务器部署奈斯启示录服务端跟朋友们一起玩， 所以在云端搭建服务器， 顺便写下本文章记录搭建的过程。博主博客 https://blog.uso6.comhttps://blog.csdn.net/dxk539687357 要使用 Docker Compose 部署 steamcmd（Steam 命令行…...

编程日记 2025/8/19 3:05:18

K8s 1.27.1 实战系列（八）Service

一、Service介绍 1、Service 的作用与核心功能 Service 是 Kubernetes 中用于抽象一组 Pod 并提供稳定访问入口的资源。它解决了以下问题： Pod IP 不固定：Pod 可能因故障、扩缩容或更新导致 IP 变化，Service 通过 ClusterIP（虚拟 IP）提供固定访问地址。负载均衡：自动…...

编程日记 2025/8/21 23:36:17

Scala编程_实现Rational的基本操作

在Scala中实现一个简单的有理数（Rational）类，并对其进行加法、比较等基本操作. 有理数的定义有理数是可以表示为两个整数的比值的数，通常形式为 n / d，其中 n 是分子，d 是分母。为了确保我们的有理数始终…...

编程日记 2025/8/16 12:48:54

Android15 Camera框架中的StatusTracker

StatusTracker介绍 StatusTracker是Android15 Camera框架中用来协调Camera3各组件之间状态转换的类。 StatusTracker线程名：std::string("C3Dev-") mId "-Status" Camera3 StatusTracker工作原理 StatusTracker实现批处理（状态…...

编程日记 2025/8/19 11:53:34

Manus 演示案例：谷歌公司运营模拟器游戏体验

一、项目背景与愿景在科技行业蓬勃发展的当下，谷歌作为行业巨头，其成长历程充满了无数值得深入探究的决策智慧。这些决策不仅塑造了谷歌的辉煌，也为全球企业的发展提供了宝贵的借鉴。本项目旨在打造一款以谷歌公司发展为蓝本的运营模拟器游戏…...

编程日记 2025/8/19 22:35:05

【大模型基础_毛玉仁】2.1 大数据+大模型→新智能

【大模型基础_毛玉仁】2.1 大数据大模型→新智能 2.大语言模型架构2.1 大数据大模型→新智能2.1.1 大数据大模型→能力增强1）Kaplan-McCandlish 扩展法则2）Chinchilla 扩展法则 2.1.2 大数据大模型→能力扩展 2.大语言模型架构大语言模型（L…...

编程日记 2025/8/16 10:00:07

20天 - TCP 和 UDP 有什么区别？说说 TCP 的三次握手？TCP 是用来解决什么问题？

TCP 和 UDP 有什么区别？ TCP（传输控制协议）和 UDP（用户数据报协议）都是传输层的网络协议，它们的主要区别如下： 连接方式 TCP：面向连接的协议，类似于打电话&#xff0c…...

编程日记 2025/8/20 23:46:23

【设计模式】掌握建造者模式：如何优雅地解决复杂对象创建难题？

概述将一个复杂对象的构建与表示分离，使得同样的构建过程可以创建不同的表示。分离了部件的构造(由Builder来负责)和装配(由Director负责)。从而可以构造出复杂的对象。这个模式适用于：某个对象的构建过程复杂的情况。由于实现了构建和装配的解耦。…...

编程日记 2025/8/20 13:40:12

【网络安全工程】任务11：路由器配置与静态路由配置

目录一、概念二、路由器配置三、配置静态路由CSDN 原创主页：不羁https://blog.csdn.net/2303_76492156?typeblog 一、概念 1、路由器的作用：通过路由表进行数据的转发。 2、交换机的作用：通过学习和识别 MAC 地址，依据 M…...

编程日记 2025/8/22 7:08:13

10 【HarmonyOS NEXT】仿uv-ui组件开发之Avatar头像组件开发教程（一）

温馨提示：本篇博客的详细代码已发布到 git : https://gitcode.com/nutpi/HarmonyosNext 可以下载运行哦！ 目录第一篇：Avatar 组件基础概念与设计1. 组件概述2. 接口设计2.1 形状类型定义2.2 尺寸类型定义2.3 组件属性接口 3. 设计原则4. 使用…...

编程日记 2025/8/21 15:26:01

蓝桥杯备赛-差分-重新排序

问题描述给定一个数组 AA 和一些查询 Li,RiLi,Ri, 求数组中第 LiLi 至第 RiRi 个元素之和。小蓝觉得这个问题很无聊, 于是他想重新排列一下数组, 使得最终每个查询结果的和尽可能地大。小蓝想知道相比原数组, 所有查询结果的总和最多可以增加多少? 输入格式输…...

编程日记 2025/8/16 7:53:25

①Modbus TCP转Modbus RTU/ASCII网关同步采集无需编程高速轻松组网

Modbus TCP转Modbus RTU/ASCII网关同步采集无需编程高速轻松组网https://item.taobao.com/item.htm?ftt&id784749793551 MODBUS TCP 通信单元 MODBUS TCP 转 RS485 MS-A1-50X1 系列概述 MS-A1-50X1 系列概述 MS-A1-50X1系列作为MODBUS TCP通信的服务器进行动作。可通…...

编程日记 2025/8/18 17:09:34

2025年四川烟草工业计算机岗位备考详细内容

四川烟草工业计算机岗位备考详细内容（持续更新） 文章目录四川烟草工业计算机岗位备考详细内容（持续更新）一、计算机基础（一）计算机发展与组成计算机发展历程计算机系统组成软件系统 （二&#x…...

编程日记 2025/8/21 17:52:51

Git 设置全局代理

Git 设置全局代理或项目代理 git config： 全局配置，设置git代理服务器 # 设置 HTTP 代理 git config --global http.proxy http://127.0.0.1:7897# 设置 HTTPS 代理 git config --global https.proxy http://127.0.0.1:7897# 设置所有协议的代理&…...

编程日记 2025/8/22 2:09:27

【Java开发指南 | 第三十四篇】IDEA没有Java Enterprise——解决方法

读者可订阅专栏：Java开发指南 |【CSDN秋说】文章目录 1、新建Java项目2、单击项目名，并连续按两次shift键3、在搜索栏搜索"添加框架支持"4、勾选Web应用程序5、最终界面6、添加Tomcat 1、新建Java项目 2、单击项目名，并连续按两次…...

编程日记 2025/8/21 5:06:37

ROS实践（二）构建Gazebo机器人模型文件urdf

目录一、基础语法 1. urdf文件组成 2. robot根标签 3. link 和 joint标签 4. sensor标签二、实验：使用launch文件启动rviz查看机器人模型 1. 编写机器人模型的urdf文件。 2. 编写launch文件。 3. 运行launch，查看效果。 URDF（Unifi…...

编程日记 2025/8/21 21:25:40

论文阅读-秦汉时期北方边疆组织的空间互动模式与直道的定位（中国）

论文英文题目：A spatial interaction model of Qin-Han Dynasty organisation on the northern frontier and the location of the Zhidao highway (China) 发表于：journal of archaeological science，影响因子：3.030 论文主要是…...

编程日记 2025/8/18 23:37:57

【MySQL_04】数据库基本操作（用户管理--配置文件--远程连接--数据库信息查看、创建、删除）

文章目录一、MySQL 用户管理1.1 用户管理1.11 mysql.user表详解1.12 添加用户1.13 修改用户权限1.14 删除用户1.15 密码问题二、MySQL 配置文件2.1 配置文件位置2.2 配置文件结构2.3 常用配置参数三、MySQL远程连接四、数据库的查看、创建、删除4.1 查看数据库4.2 创建、删除…...

编程日记 2025/8/21 22:28:02

设计模式之建造者模式：原理、实现与应用

引言建造者模式（Builder Pattern）是一种创建型设计模式，它通过将复杂对象的构建过程分解为多个简单的步骤，使得对象的创建更加灵活和可维护。建造者模式特别适用于构建具有多个组成部分的复杂对象。本文将深入探讨建造者模式的原…...

编程日记 2025/8/18 14:20:23

2025最新群智能优化算法：山羊优化算法（Goat Optimization Algorithm, GOA）求解23个经典函数测试集，MATLAB

一、山羊优化算法山羊优化算法（Goat Optimization Algorithm, GOA）是2025年提出的一种新型生物启发式元启发式算法，灵感来源于山羊在恶劣和资源有限环境中的适应性行为。该算法旨在通过模拟山羊的觅食策略、移动模式和躲避寄生虫的能力&…...

编程日记 2025/8/17 1:45:58

Apache Log4j 2

目录 1. Apache Log4j 2 简介 1.1 什么是Log4j 2？ 1.2 Log4j 2 的主要特性 2. Log4j 2 的核心组件 2.1 Logger 2.2 Appender 2.3 Layout 2.4 Filter 2.5 Configuration 3. Log4j 2 的配置 4. Log4j 2 的使用示例 4.1 Maven 依赖 4.2 示例代码 4.3 输出…...

编程日记 2025/8/20 22:59:06

ArcGIS Pro字段编号相关代码

一、引言在地理信息系统（GIS）的数据管理与分析中，字段操作是不可或缺的一环。 SHP文件作为常见的地理数据存储格式，其字段的灵活运用对于数据的组织、展示和分析具有重要意义。在实际工作中，常常需要对字段进行编…...

编程日记 2025/8/18 6:06:05

ubuntu22.04机器人开发环境配置

1. ros2环境配置（humble） #配置源 # https://docs.ros.org/en/humble/Installation/Ubuntu-Install-Debs.html sudo apt install software-properties-common sudo add-apt-repository universe sudo apt update && sudo apt install curl -y# …...

编程日记 2025/8/20 8:56:31

万字深度剖析——JS数据结构（上）

数组本质是对象，键就是索引，值就是元素。 push /unshift 在数组最后/最前添加 pop /shift 把数组最后/最前的元素删除,返回的是被删除的元素 splice(0,2，5)从第0给位置开始删除2个元素，并添加一个元素数组自带的…...

编程日记 2025/8/19 15:51:17

golang dlv调试工具

golang dlv调试工具在goland2022.2版本中调试go程序报错 WARNING: undefined behavior - version of Delve is too old for Go version 1.20.7 (maximum supported version 1.19) 即使你go install了新的dlv也无济于事分析得出Goland实际使用的是 Goland安装目录下dlv 例…...

编程日记 2025/8/19 18:00:50

【算法 C/C++】二维前缀和

2025 - 03 - 08 - 第 70 篇 Author: 郑龙浩 / 仟濹【二维前缀和】文章目录前缀和与差分 - 我的博客前缀和(二维)1 基本介绍(1) **sum[i][j] 表示什么？？？**(2) **前缀和怎么求？？？计算 sum[i][j]&#xf…...

编程日记 2025/8/21 12:33:36

如何使用postman来测试接口

一、postman的介绍与下载可参考： https://blog.csdn.net/freeking101/article/details/80774271 二、api获取网站阿里云API应用市场地址：云市场_镜像市场_软件商店_建站软件_服务器软件_API接口_应用市场 - 阿里云三、具体测试过程可模拟浏览…...

编程日记 2025/8/16 11:57:55

olmOCR：高效精准的 PDF 文本提取工具

在日常的工作和学习中，是否经常被 PDF 文本提取问题困扰？例如： 想从学术论文 PDF 中提取关键信息，却发现传统 OCR 工具识别不准确或文本格式混乱？需要快速提取商务合同 PDF 中的条款内容，却因工具不给力而…...

编程日记 2025/8/16 10:01:33

Vue项目通过内嵌iframe访问另一个vue页面，获取token适配后端鉴权(以内嵌若依项目举例)

1. 改造子Vue项目进行适配(ruoyi举例) (1) 在路由文件添加需要被外链的vue页面配置 // 若依项目的话是 router/index.js文件 {path: /contrast,component: () > import(/views/contrast/index),hidden: true },(2) 开放白名单 // 若依项目的话是 permission.js 文件 cons…...

编程日记 2025/8/19 23:11:57

请谈谈 HTTP 中的重定向，如何处理 301 和 302 重定向？

HTTP重定向深度解析：301与302的正确使用姿势一、重定向本质解析重定向就像快递员送快递时发现地址变更，新地址会写在包裹单的"改派地址"栏。浏览器收到3xx状态码时，会自动前往Location头指定的新地址。常用状态码对比&…...

编程日记 2025/8/16 12:54:15

隧道定向号角喇叭为隧道安全保驾护航

隧道广播系统的搭建：科技赋能，打造安全高效的隧道环境。隧道作为现代交通网络的重要组成部分，其安全管理和信息传递的效率直接关系到整个交通系统的运行。然而，隧道环境的特殊性——封闭、狭窄、回声干扰多，使得传统的…...

编程日记 2025/8/19 2:30:22

RuleOS：区块链开发的“破局者”，开启Web3新纪元

RuleOS：区块链开发的“破冰船”，驶向Web3的星辰大海在区块链技术的浩瀚宇宙中，一群勇敢的探索者正驾驶着一艘名为RuleOS的“破冰船”，冲破传统开发的冰层，驶向Web3的星辰大海。这艘船，正以一种前所未有的姿…...

编程日记 2025/8/16 11:15:40

C#程序结构及基本组成说明

C# 程序的结构主要由以下几个部分组成，以下是对其结构的详细说明和示例： 1. 基本组成部分命名空间 (Namespace) 用于组织代码，避免命名冲突。通过 using 引入其他命名空间。 using System; // 引入 System 命名空间类 (Class) C# 是面向对象的语言，所有代码必须定义在类或…...

编程日记 2025/8/20 9:16:58