布局vue web
vue3父子组件通信小结
### 父子组件中的attrs props 理解/继承 首先，父组件可以给子组件传入属性、监听函数（类似onClick），class，style,id，总结起来就是大三类-**属性，监听函数，样式**！ 爷爷组件 -- 有两个监听函数 ```jsx import { computed, define ......
vue拖拽组件的使用（vuedraggable）
[vuedraggable官方文档链接](https://www.itxst.com/vue-draggable/tutorial.html)：https://www.itxst.com/vue-draggable/tutorial.html 按装 ``` npm i -S vuedraggable ......
vue-element-admin项目中tagView嵌入iframe不刷新重载
#vue-element-admin项目中tagView嵌入iframe不刷新重载 > 最近使用vue-element-admin来开发项目，因为以前老项目太大，暂不重构，如要通过iframe嵌套在新项目中，通过router来重写url加载，但是业务需要切换菜单或者tagView不能刷新重载ifra ......
vue实现‘换一批’功能
实现效果：假如有10条数据，分组展示，默认在当前页面展示4个，点击换一批，从第5个开始继续展示，到最后一组，再重新返回到第一组 <div class="flex-align" @click="change"> <span>换一批</span> </div> data() { return { qLi ......
WEB前端01-HTML基础
非淡泊无以明志，非宁静无以致远 说明: vscode插件安装 打开网络插件：安装 open in browser 打开浏览器插件 之后使用右击即有打开浏览器选项 汉化菜单插件： Chinese 缩放代码字号: Command -/+(mac中) 一、标签语法 1. 默认html页面格式 vscode ......
Web安全漏洞解决方案
1.已解密的登录请求 推理： AppScan 识别了不是通过 SSL 发送的登录请求。 测试请求和响应： 1.1.1 产生的原因 登录接口,前端传入的密码参数没有经过md5的加密就直接传给了后端 1.1.2 解决方法 前端代码传参的时候做md5加密处理 2.会话标识未更新 推理： 测试结果似乎指示存 ......
[CISCN 2019华北Day2]Web1
[CISCN 2019华北Day2]Web1 题目来源：nssctf 题目类型：web 涉及考点：SQL注入 1. 题目给了一个输入框，很明显是要注入 先尝试随便提交点东西： * 传入`1`： * 传入`1'`： * 传入`1"`： > 可以看出题目应该是过滤了一些字符 2. 下面我们抓包进行Fuz ......
静态Web服务器-多任务版
静态Web服务器的问题 目前的Web服务器，不能支持多用户同时访问，只能一个一个的处理客户端的请求，那么如何开发多任务版的web服务器同时处理多个客户端的请求?可以使用多线程，比进程更加节省内存资源。 多任务版web服务器程序的实现步骤 1. 当客户端和服务端建⽴连接成功，创建⼦线程，使⽤⼦线程专⻔ ......
静态web服务器-根据请求返回指定页面数据
实现步骤 1. 获取用户请求资源的路径 2. 根据请求资源的路径，读取指定文件的数据 3. 组装指定文件数据的响应报文，发送给浏览器 4. 判断请求的文件在服务端不存在，组装404状态的响应报文，发送给浏览器 示例 import socket # 获取用户请求资源的路径 # 根据请求资源的路径，读取 ......
自研静态Web服务器并返回固定⻚⾯数据
开发自己的静态Web服务器的步骤 1. 编写一个TCP服务端程序 2. 获取浏览器发送的http请求报文数据 3. 读取固定页面的数据，把页面数据组装成HTTP响应报文数据发送给浏览器。 4. HTTP响应报文数据发送完成以后，关闭服务与客户端的套接字 静态Web服务器-返回固定页面数据的示例代码 ......
搭建Python⾃带静态Web服务器
说明 Python自带的静态Web服务器可以通过使用http.server模块来实现。 步骤 打开命令行终端，进入要作为静态文件根目录的文件夹。 运行以下命令启动静态Web服务器： Python 2.x版本：python -m SimpleHTTPServer <port> Python 3.x版本 ......
VUE3单页面应用开发常用工具
Vite 一种新型的前端构建工具，它主要由两个部分做成 一个开发服务器，它基于 原生 ES 模块 提供了 丰富的内建功能，如速度快到惊人的 模块热更新（HMR）。 一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。 社区模板 create- ......
vue_中文输入法情况下, 输入框v-model绑定值中没有输入值但却触发input事件
- 今天写的一个搜索框, 要求输入字符时不作处理, 直到用户点击搜索按钮时才执行搜索逻辑; 当用户将搜索框文本删除至空字符串时, 执行一次无搜索值的搜索逻辑, 用于将表格数据恢复至无筛选; 在这个功能上我想当然地使用了input事件用于触发输入事件, 但是被测试出bug: 当输入法是中文时, 在选字 ......
VUE element-ui之table表格全局排序
### 一 调用后端接口排序功能 步骤： 标签中定义排序方法： ``` ``` 要排序的字段定义排序关键字sortable ： ``` //注意：调用接口排序时必须sortable="true"，表格自带排序则只需sortable sortable="true" ``` methods中实现全局排序 ......
vue实现简单表单收集
# vue实现简单表单收集 ## 实现 ```vue 表单 v-model收集的是value值 2、如果 v-model收集的是value值，但要自己配置value 3、如果 如果没有配置value,收集的是checked 如果value初始值是数组收集的是value，若非数组，收集是的checke ......
vue3 watch 监听响应式数据变化 改变img的src
目标：用一个图片来监视全局websocket对象的连接状态 全局websocket的写法详见：https://www.cnblogs.com/hailexuexi/p/17577818.html main.js 全局对象 websocket的连接状态 //全局对象 const globalData= ......
在Vue3后台管理系统中使用watch和watcheffect
1、watch 在 Vue3 中的组合式 API 中，watch 的作用和 Vue2 中的 watch 作用是一样的，他们都是用来监听响应式状态发生变化的，当响应式状态发生变化时，都会触发一个回调函数。 const message = ref("test"); watch(message, (n ......
Vue中key的作用
1.虚拟Dom中key的作用： key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】， 随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下： 2.对比规则： (1).就虚拟DOM中找到了与新虚拟DOM相同的key： ①.若虚拟DOM中内容 ......
vue——debounce防抖函数无效
参考： vue记录-vue中使用lodash _.debounce防抖不生效原因，解决方案 https://blog.csdn.net/Delete_89x/article/details/122000444 问题代码： <el-input v-model="slotProps.form.condi ......
Vue3 toRef响应式失效问题排查
### 父组件 ```html const stuRecordInfo = ref({ stuNum: 11111 }) // 接口请求返回 stuRecordInfo.value.stuNum = 22222 ``` ### 子组件 ```html const info = toRef(props ......
如何复制word的图文到Web编辑器中自动上传
由于工作需要必须将word文档内容粘贴到编辑器中使用 但发现word中的图片粘贴后变成了file:///xxxx.jpg这种内容，如果上传到服务器后其他人也访问不了，网上找了很多编辑器发现没有一个能直接解决这个问题 考虑到自己除了工作其他时间基本上不使用windows，因此打算使用nodejs来 ......
如何使用Docker部署 Go WEB应用
如何使用Docker部署 Go WEB应用 本文介绍了如何使用Docker以及Docker-compose部署我们的Go Web程序。 为什么需要使用Docker？ 使用docker的主要目标是容器化。也就是为你的应用程序提供一致的环境，而不依赖于它运行的主机。 想象一下你是否也会遇到下面这个场景， ......
vue中export default data()外面的数据如何通过$t获取动态值
如果将数据放到外面的`const`中，而不是在Vue组件的`data`选项中，那么无法直接通过`$t`方法来获取翻译文件的值。因为`$t`方法是Vue-i18n插件提供的实例方法，需要在Vue组件中使用。 如果你想在外部使用`$t`方法来获取翻译文件的值，可以将Vue-i18n的实例导出，并在外部文 ......
Asp.net Core Web API运行后返回的实体属性首字母全为小写（实际应该为大写）
1、Asp.net Core Web API项目运行后打开swagger，通过点击控制器下的方法，以此点击Try it out-Execute，然后观察Response body中内容，发现所有的实体属性均为小写，如下图，但其实实际的实体属性值首字母为大写，如图二，出现这种情况的解决办法如下： 2、 ......
在springboot项目中部署vue打包的dist以及刷新遇到404的解决方法
一、在springboot项目中部署dist 新建一个springboot项目，并将dist复制到resources目录下面，同时在application.yml添加配置即可，操作结果如下图所示： 添加的配置代码如下： spring: web: resources: static-locations ......
Asp.net Core Web API 启动时出现报错Failed to load API definition
1、新建的Asp.net Core Web API 项目启动时一般是没有问题的，如果在controller下增加多个操作后再启动会出现swagger的报错-Failed to load API definition，基本是由于以下两种原因，分别排查即可： （1）如上图1位置：默认webapi模板创建 ......
Vue 中请求同步执行解决方案
有很多小伙伴在使用Vue的时候都会遇到一种情况，form表单修改回显时，某个下拉框里的内容回显乱码，这是因为Vue是的请求方法是异步请求：简单来说，form表单内容先获取了出来，而项目阶段的下拉框随后才获取出来 // 表单<el-col :span="12"> <el-form-item :labe ......
ElementUI中使用＜el-row＞自适应布局导致显示错乱
错乱代码（部分）： <el-row :gutter="5"> <el-col :xs="24" :sm="12" :md="8" :lg="6" v-for="(item, index) in caseList" :key="index"> <img :src="baseUrl + item.bus ......
Vue的组件data为什么必须是一个函数?
vue中的data必须是函数是为了保证组件的独立性和可复用性。 实例是通过构造函数来创建的，每个构造函数可以new多个实例，每个实例都会继承原型上的方法和属性， 在vue中，一个vue组件就是一个vue实例，当一个组件被复用多次，就会创建多个实例。如果data是对象， 那么被多次复用的这个组件，在某 ......