前言

前两天复习了一下vuex,想着做一个todolist实践下知识点,于是结合饿了么的热门ui框架element写了这个demo。文章内容较长,如果对vuex和elementui比较熟悉,可以直接看源码,交互步骤并不复杂,算是一个入门级的vuex和element-ui项目,适合练手。

源码下载地址:vuex-todolist


在这里插入图片描述


技术栈

vue2 + vuex + axios + element-ui

实现步骤

step01:基础页面配置

使用vue-cli脚手架创建一个项目,选择手动配置:

vue create vuex-totolist

配置内容如下:
在这里插入图片描述
安装element-ui

npm i element-ui -S

在 main.js 中写入以下内容:

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App.vue'Vue.config.productionTip = false
Vue.use(ElementUI)new Vue({render: h => h(App)
}).$mount('#app')

在App.vue中写入如下内容

<template><div id="app"><el-input placeholder="请输入待办事项" class="td-input" ></el-input><el-button type="primary">添加事项</el-button><el-main class="td-main" ><el-tableref="multipleTable":data="list"style="width: 100%"><el-table-columntype="selection"width="55"></el-table-column><el-table-columnlabel="待办事项"width="350"><template slot-scope="item">{{ item.row.info }}</template></el-checkbox> --></el-table-column><el-table-columnprop="name"label="删除"width="50"><el-button size="mini" class="btn-close" type="primary" icon="el-icon-close" circle></el-button></el-table-column></el-table><div class="footer"><span>0条剩余</span><el-radio-group size="small" v-model="radio1"><el-radio-button class="btn-radio" label="全部"></el-radio-button><el-radio-button class="btn-radio" label="未完成"></el-radio-button><el-radio-button class="btn-radio" label="已完成"></el-radio-button></el-radio-group><el-button>清除已完成</el-button></div></el-main></div>
</template><script>export default {name: 'app',data () {return {list: [],radio1: '全部'}}
}
</script><style>
#app {width: 610px;margin: 0 auto;
}
.td-input {width: 500px;margin-right: 10px;
}
.td-main {width: 500px;margin-top: 10px;border-radius: 4px;border: 1px solid #DCDFE6;
}
.btn-close {float: right;
}
.el-button--mini.is-circle {padding: 3px;
}
.footer {display: flex;justify-content: space-between;align-items: center;margin-top: 15px;
}
</style>

创建一个list.json文件,放入到public目录中

[{"id": 0,"info": "学习MVC设计模式","done": false},{ "id": 1, "info": "学习Node.js", "done": false },{"id": 2,"info": "下班去健身房","done": false},{ "id": 3, "info": "晚上十一点淘宝秒杀", "done": false },{ "id": 4, "info": "周末自制照烧鸡腿", "done": false }
]

在这里插入图片描述

step02:实现列表数据的动态加载

先在main.js中加载store

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App.vue'
import store from './store'	//引入storeVue.config.productionTip = false
Vue.use(ElementUI)new Vue({store,	//挂载storerender: h => h(App)
}).$mount('#app')

安装axios,通过axios请求列表数据

npm i axios -S

在store.js中引入axios

import axios from 'axios'

接着在actions中定义一个函数getList,接收一个参数context,然后在函数中直接发起get请求,请求的是当前项目里的list.json,请求成功后就可以指定一个回调函数,然后写一个解构赋值data。

getList (context) {axios.get('/list.json').then(({ data }) => {})
}

因为该函数尚未被调用,接下来回到App.vue中定义一个生命周期函数created,在里面发起异步请求this.$store.dispatch(‘getList’),来触发actions。App.vue组件被渲染的时候,就会调用该函数。

created () {this.$store.dispatch('getList')
},

之后在store中,将actions内请求的数据挂载到state中。先定义一个数组list来存放所有的任务列表。

state: {list: []
}

如果要在actions中为list重新赋值,只能调用mutations为对应的state赋值。在mutations中定义一个方法initList,传入两个参数:第一个是固定state,第二个是自定义list(之后谁调用了该函数,就必须传入一个list)。拿到list后,进行赋值操作,就可以赋值到state上面改变list的值。

mutations: {initList (state, list) {state.list = list}
},

回到actions中,通过context调用commit触发mutation中的initList。因为data获取了数据,所以作为参数传递到mutations里面去。

actions: {//调用getListgetList (context) {//发起请求,拿到返回的数据axios.get('/list.json').then(({ data }) => {//调用mutations,传入initList参数,成功给state中的list赋值context.commit('initList', data)})}
}

进入App.vue中,引入mapState。

import { mapState } from 'vuex'

添加计算属性,里面调用mapState,传入一个数组,将数据映射过来。全局的list数据就会变成App.vue里的计算属性了

computed: {...mapState(['list'])
}

此时list.json上的数据成功加载到列表上。


step03:实现文本框内容的双向数据绑定

在store的state中定义一个数据节点inputValue。

state: {list: [],//定义数据节点inputValue: 'test'
}

在App.vue中,将全局的inputValue映射为当前的一个计算属性。然后绑定到输入框中。

computed: {//inputValue映射为计算属性...mapState(['list', 'inputValue'])
}
<el-input placeholder="请输入待办事项" class="td-input" :value="inputValue">
</el-input>

此时在输入框中出现了文本,实现了单向数据绑定。在这里插入图片描述

接下来给文本框绑定一个input事件,用来监听文本框的变化

<el-input placeholder="请输入待办事项" class="td-input" :value="inputValue"@input="handleInputChange">
</el-input>

增加一个methods方法,在里面定义handleInputChange,传入一个参数val

methods: {handleInputChange (val) {}
}

在store的mutations中定义一个函数,传入state和val两个参数,为store中的inputValue赋值,将值同步保存到inputValue中

setInputValue (state, val) {state.inputValue = val
}

接着回到App.vue的methods方法中,使用this.$store.commit调用setInputValue,将文本框中的变化保存到state,实现双向绑定

handleInputChange (val) {this.$store.commit('setInputValue', val)
}

step04:实现点击添加事项

为按钮绑定一个单击事件

<el-button type="primary" @click="addItemToList">添加事项</el-button>

向列表中新增 item 项,在方法内判断用户输入的值是否为空,如果不为空,则向store中添加列表项

addItemToList () {if (this.inputValue.trim().length <= 0) {return this.$message.warning('添加事项不能为空!')}this.$store.commit('addItem')
}
// 回到store,在state中添加
nextId: 5,//新增一个mutations
addItem (state) {const obj = {id: state.nextId,info: state.inputValue.trim(),// 完成状态默认是falsedone: false}// 将对象追加到list中state.list.push(obj)// 添加成功后,id自动递增,保证不重复state.nextId++// 清空文本框state.inputValue = ''
}

step05:实现删除事项

在删除链接中绑定删除事件函数,在methods中添加对应方法

<el-button slot-scope="item" @click="removeItemById(item.row.id)" size="mini" class="btn-close" type="primary" icon="el-icon-close" circle></el-button>
// 很据Id删除对应的任务事项
removeItemById (id) {this.$store.commit('removeItem', id)
}

在store中新增一个mutations

// 根据Id删除对应的任务事项
removeItem(state, id) {// 根据Id查找对应项的索引const i = state.list.findIndex(x => x.id === id)// 根据索引,删除对应的元素if (i !== -1) {state.list.splice(i, 1)}
}

step06:实现复选框状态的绑定

element-ui提供了selection-change,当选择项发生变化时会触发该事件,需要配合ref使用

<el-tableref="multipleTable"@selection-change="handleSelectionChange">
</el-table>

在methods中定义

handleSelectionChange (val) {this.multipleSelection = val
}
checked () {this.$nextTick(() => {this.list.forEach(row => {this.$refs.multipleTable.toggleRowSelection(row, row.done)})})
}

在watch当中触发checked方法,这一步是为了确保在数据变化后调用toggleRowSelection

watch: {list: function (val) {this.checked()}
}

step07:修改任务完成状态

点击复选框时拿到最新的状态,以及当前点击这一行的id值,监听复选框状态改变的事件。
element-ui给table提供了事件select和select-all,分别为当用户手动勾选数据行和全选 Checkbox 时触发的事件。在el-table中通过事件绑定的方式监听select和select-all

<el-table@select="statusChanged"@select-all="statusChangedAll">
</el-table>

在methods中定义方法statusChanged,接收两个参数,通过第二个参数获取选中行的id和状态,赋值到参数对象中,然后触发mutations修改对应的选中状态

statusChanged (val, row) {const param = {id: row.id,// 点击后状态取反status: !row.done}this.$store.commit('changeStatus', param)
}

在mutations中新增changeStatus接收传递过来的参数,先查找索引,根据索引找到对象并修改

changeStatus (state, param) {const i = state.list.findIndex(x => x.id === param.id)if (i !== -1) {state.list[i].done = param.status}
}

定义方法statusChangedAll,传入一个参数val,val长度不为0,则全选、否则取消全选,以此触发对应的mutations,改变状态

statusChangedAll (val) {if (val.length !== 0) {this.$store.commit('changeStatusAll')} else {this.$store.commit('cleanStatusAll')}
}
// 修改全选后的状态
changeStatusAll (state) {// console.log(params)state.list.forEach(row => {row.done = true})
},
// 取消全选后的状态
cleanStatusAll (state) {state.list.forEach(row => {row.done = false})
}

step08:统计未完成任务数量

这里需要用到getters,getters是一个包装器,不会修改state中的原数据。在list数组中调用filter函数,过滤掉未完成的任务,形成新的数组,将这个数组的长度return

getters: {// 统计未完成的任务数量unDoneLength (state) {return state.list.filter(x => x.done === false).length}
}

在App.vue中引入,在computed计算属性中使用

import { mapState, mapGetters } from 'vuex'computed: {...mapGetters(['unDoneLength'])
}

剩余条数处修改为

<span>{{unDoneLength}}条剩余</span>

step09:清除未完成任务

绑定一个click事件

<el-button @click="clean">清除已完成</el-button>

在methods中添加方法,触发对应的mutations

// 清除已完成任务
clean () {this.$store.commit('cleanDone')
}

在mutations中,过滤未完成的任务,重新赋值给state中的list

cleanDone (state) {state.list = state.list.filter(x => x.done === false)
}

step10:实现列表状态的切换显示

根据官方文档,Radio 单选框的事件处理函数需要绑定在Radio-group或者Ridio中,这里我们绑定到el-radio-group上面,回调函数是选中的按钮 label 值

<el-radio-group size="small" v-model="radio1" @change="changeList">
</el-radio-group>

在methods中定义一个方法,触发对应mutations

changeList (key) {this.$store.commit('changeViewKey', key)
}

因为组件中的所有数据都存储在store中,需要先在state中定义一个视图的key值,默认为全部。当点击不同选项的时候,将最新的key赋值在上面

viewKey: '全部'
// 修改视图的关键字
changeViewKey(state, key) {state.viewKey = key
}

将全局的viewKey值映射为App.vue组件中的计算属性。因为列表所有数据都是store中的list原封不动传递过来的,要实现按需切换,需要使用getters对数据进行包装处理

...mapState(['list', 'inputValue', 'viewKey'])

在store中新增一个getters节点,通过label上的值判断展示的内容

infolist (state) {if (state.viewKey === '全部') {return state.list}if (state.viewKey === '未完成') {return state.list.filter(x => !x.done)}if (state.viewKey === '已完成') {return state.list.filter(x => x.done)}return state.list
}

在App.vue中新增一个mapGetters节点,将el-table中的数据源切换为getters事件,watch中也改为infolist

...mapGetters(['unDoneLength', 'infolist'])
<el-table :data="infolist"><el-table>
watch: {infolist: function (val) {this.checked()}
}

小结

我在做这个项目的过程中遇到element-ui的坑还是有一些的,有些百度上没有解决方案(也可能是我搜的方式不对),最后都是直接看官方文档、在思否上提问和看github上的issue上找到问题的解决方法。如果大家有幸踩到坑,不妨也如法炮制一下。

查看全文
如若内容造成侵权/违法违规/事实不符,请联系编程学习网邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!

相关文章

  1. Java高级工程师面试经验

    Java高级工程师面经JVM相关集合相关多线程相关锁相关反射相关Redis相关Mysql相关RabbitMqSpringSpringCloud设计模式其他JVM相关 ①类加载过程 ②类加载器&#xff0c;双亲委派机制&#xff0c;怎么打破双亲委派机制 ③JVM内存模型&#xff1b;栈&#xff0c;堆内部的内存结构…...

    2024/3/9 15:20:18
  2. app渗透测试中流量的抓取

    前段时间因为公事的原因接触了app的测试&#xff0c;踩了一堆坑&#xff0c; 浪费了太多时间&#xff0c;所以想po一篇文章出来&#xff0c;让后面做app测试的朋友少走点弯路。废话不多说&#xff0c;直接开始。 所需软件 安卓手机模拟器&#xff1a;夜神模拟器&#xff08;自…...

    2024/3/15 21:10:57
  3. XSS知识总结

    XSS基础 跨站脚本&#xff08;英语&#xff1a;Cross-site scripting&#xff0c;通常简称为&#xff1a;XSS&#xff09;是一种网站应用程序的安全漏洞攻击&#xff0c;是代码注入的一种。它允许恶意用户将代码注入到网页上&#xff0c;其他用户在观看网页时就会受到影响。这…...

    2024/3/28 1:52:37
  4. Scaling Hyperledger Fabric Using Pipelined Execution and Sparse Peers(翻译)

    本文章是记录我对hyperledger fabric pipelined ABSTRACT 许多使用Hyperledger Fabric(允许使用的区块链平台)构建的区块链应用程序的概念证明&#xff0c;最近已经转化为生产。但是&#xff0c;由于网络使用量的稳定增长&#xff0c;Hyperledger Fabric提供的性能对于企业来…...

    2024/3/19 13:28:06
  5. 【概率论】【笔记】【@汤家凤】【数一】【第二章 一维随机变量及分布】

    《概率论》 第二章 一维随机变量及分布...

    2024/3/5 9:50:20
  6. employee类在内存中的存储与变化

    对象与类 employee 新建了一个数组 调用构造方法 内存的变化过程 左边为栈 右边为堆 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BierNmbx-1603794803087)(C:\Users\KONG\AppData\Roaming\Typora\typora-user-images\image-20201026201845768.…...

    2024/3/9 19:34:00
  7. tensorflow安装GPU版本

    tensorflow安装GPU版本主要要点 1.先通过该网站查看tensorflow和cuda和cudnn版本以及visual studio(MSVC)的对应关系。&#xff08;可供参考&#xff09; https://www.tensorflow.org/install/source_windows#gpu 在英伟达控制面板&#xff0c;点击右下角的系统信息&#xf…...

    2024/3/9 12:19:33
  8. 从中缀向后缀转换表达式

    从中缀向后缀转换表达式题目信息输入输出测试样例解答题目信息 中缀表达式就是我们通常所书写的数学表达式&#xff0c;后缀表达式也称为逆波兰表达式&#xff0c;在编译程序对我们书写的程序中的表达式进行语法检查时&#xff0c;往往就可以通过逆波兰表达式进行。我们所要设…...

    2024/3/9 12:08:08
  9. 消息中间件的作用(一)

    系统解耦 异步调用 流量削峰...

    2024/3/9 12:01:10
  10. 串口编程1:基本概念介绍

    串口定义串口分类同步通信、异步通信串行通讯流控制终端串口定义&#xff1a; 串行接口简称串口&#xff0c;也称串行通信接口或串行通讯接口&#xff08;通常指COM接口&#xff09;&#xff0c;是采用串行通信方式的扩展接口。 串口分类&#xff1a; 按接口划分为一下三种&…...

    2024/3/10 20:41:00
  11. Python学习笔记之网络爬虫2

    Python学习笔记之网络爬虫2查阅Python官方文档里面已有说明&#xff1a; Note The urllib2 module has been split across several modules in Python 3.0 named urllib.request and urllib.error. The 2to3 tool will automatically adapt imports when converting your sourc…...

    2024/3/10 15:23:31
  12. Java并发关键字

    文章目录CountDownLatch&#xff08;线程计数器&#xff09;CyclicBarrier&#xff08;循环屏障&#xff09;Semaphore&#xff08;信号量&#xff09;volatile 关键字的作用CountDownLatch&#xff08;线程计数器&#xff09; CountDownLatch 类位于 java.util.concurrent 包下…...

    2024/3/10 21:04:56
  13. SpringBoot替换jar包中引用的jar包(Unable to open nested entry ‘BOOT-INF/lib/**.jar‘. It has been compressed)

    背景 spring boot项目&#xff0c;使用jar方式打包部署 需求 有时候我们需要替换项目中某个引用jar&#xff0c;又不想将整个项目重新打包。 问题 通过一般方式&#xff0c;用好压等压缩软件直接打开jar包&#xff0c;如果直接替换.class、.html、.yml格式的文件&#xff…...

    2024/3/20 2:41:27
  14. 10 张图打开 CPU 缓存一致性的大门

    前言 直接上&#xff0c;不多 BB 了。 正文 CPU Cache 的数据写入 随着时间的推移&#xff0c;CPU 和内存的访问性能相差越来越大&#xff0c;于是就在 CPU 内部嵌入了 CPU Cache&#xff08;高速缓存&#xff09;&#xff0c;CPU Cache 离 CPU 核心相当近&#xff0c;因此它…...

    2024/3/10 7:48:10
  15. js实现用户简易注册

    实现功能 当输入的数值不符合要求提示错误&#xff0c;正确显示验证通过&#xff0c;并跳转成功 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title</title> </head> <body> &l…...

    2024/3/11 12:49:05
  16. JavaScript 实现返回顶部效果

    实现效果&#xff1a; 代码实现&#xff1a; <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><meta http-equiv…...

    2024/3/13 23:10:02
  17. 由顺序方式存储的完全二叉树进行重建

    由顺序方式存储的完全二叉树进行重建 按顺序方式存储的一棵完全二叉树的结点记录&#xff0c;结点个数为n。根据所输入的顺序结构的结点记录建立二叉树&#xff0c;输出树的先序&#xff0c;中序和后序遍历结果。 注&#xff1a;数字“0”表示不存在此结点&#xff0c;没有孩子…...

    2024/3/11 22:31:14
  18. Python 3.9 安装及测试使用【手把手教你安装,亲测有用!】

    Python 3.9 安装及测试使用 本文首发于微信公众号《Python希望社》&#xff0c;欢迎关注&#xff0c;完整详细的原文链接请点击这里 10月5日Python 3.9 已成功问世。在新的版本中&#xff0c;一些新的特性被开发了出来&#xff0c;其中主要包括了字典合并与更新、新的解析器、新…...

    2024/3/11 3:29:41
  19. 爱上python系列------python性能(十二):pd.eval()加速实验证明无效

    pd.eval()号称是使用了Numexpr&#xff0c;能够使用DataFrame之间的运算提速 我亲自实验&#xff0c;说明现有的pandas版本的根本不支持&#xff0c;只适用于老版本的pandas pandas版本和Numexpr都是最新的 pd.eval()支持的运算比较多&#xff0c;如四则运算、比较运算、位运…...

    2024/3/11 14:12:07
  20. Shell 脚本启动jar包

    #!/bin/bash #这里可替换为你自己的执行程序&#xff0c;其他代码无需更改 APP_NAMEepas.jar#使用说明&#xff0c;用来提示输入参数 usage() {echo "Usage: sh demo.sh [start|stop|restart|status]"exit 1 }#检查程序是否在运行 is_exist() { pidps -ef | grep $AP…...

    2024/3/11 19:42:43

最新文章

  1. Java服务运行在Linux----维护常用命令

    想起来哪些再添加上去 查看Java程序进程 jps -l 查出进程后根据pid 查询程序所在目录 pwdx 31313 根据端口查找PID 根据pid杀死程序 kill -p 31313 查看目录下所有包含9527的文件 grep -rn 9527 查看磁盘空间 查找文件名"nginx"文件或模糊查找"*nginx*&quo…...

    2024/3/29 16:14:04
  2. 梯度消失和梯度爆炸的一些处理方法

    在这里是记录一下梯度消失或梯度爆炸的一些处理技巧。全当学习总结了如有错误还请留言&#xff0c;在此感激不尽。 权重和梯度的更新公式如下&#xff1a; w w − η ⋅ ∇ w w w - \eta \cdot \nabla w ww−η⋅∇w 个人通俗的理解梯度消失就是网络模型在反向求导的时候出…...

    2024/3/20 10:50:27
  3. 利用 Scapy 库编写 ARP 缓存中毒攻击脚本

    一、ARP 协议基础 参考下篇文章学习 二、ARP 缓存中毒原理 ARP&#xff08;Address Resolution Protocol&#xff09;缓存中毒是一种网络攻击&#xff0c;它利用了ARP协议中的漏洞&#xff0c;通过欺骗或篡改网络中的ARP缓存来实施攻击。ARP协议是用于将IP地址映射到物理MAC…...

    2024/3/29 13:55:20
  4. CSDN个人简介优化 html font属性

    CSDN个人简介优化 html font属性 个人简介个人简介优化字体21种样式选择字体大小设置4号字体 字体颜色设计渐变色&#xff08;可惜不能显示&#xff09; 字体加粗设置 <b>标签 个人简介 &#x1f308;你好呀&#xff01;我是 是Yu欸 &#x1f30c; 2024每日百字篆刻时光…...

    2024/3/27 22:37:53
  5. 解决electron打包vue-element-admin项目页面无法跳转的问题

    解决electron打包vue-element-admin项目页面无法跳转的问题 说明之前通过这个教程已经打包成功&#xff0c;但是发现进行账号密码登录后页面无法跳转的问题。现在已经解决&#xff0c;所以记录一下。 1、检查路由模式是否为hash模式&#xff0c;如果不是改成hash模式。 new Ro…...

    2024/3/28 7:37:09
  6. 416. 分割等和子集问题(动态规划)

    题目 题解 class Solution:def canPartition(self, nums: List[int]) -> bool:# badcaseif not nums:return True# 不能被2整除if sum(nums) % 2 ! 0:return False# 状态定义&#xff1a;dp[i][j]表示当背包容量为j&#xff0c;用前i个物品是否正好可以将背包填满&#xff…...

    2024/3/28 16:59:55
  7. 【Java】ExcelWriter自适应宽度工具类(支持中文)

    工具类 import org.apache.poi.ss.usermodel.Cell; import org.apache.poi.ss.usermodel.CellType; import org.apache.poi.ss.usermodel.Row; import org.apache.poi.ss.usermodel.Sheet;/*** Excel工具类** author xiaoming* date 2023/11/17 10:40*/ public class ExcelUti…...

    2024/3/28 4:39:34
  8. Spring cloud负载均衡@LoadBalanced LoadBalancerClient

    LoadBalance vs Ribbon 由于Spring cloud2020之后移除了Ribbon&#xff0c;直接使用Spring Cloud LoadBalancer作为客户端负载均衡组件&#xff0c;我们讨论Spring负载均衡以Spring Cloud2020之后版本为主&#xff0c;学习Spring Cloud LoadBalance&#xff0c;暂不讨论Ribbon…...

    2024/3/28 5:03:31
  9. TSINGSEE青犀AI智能分析+视频监控工业园区周界安全防范方案

    一、背景需求分析 在工业产业园、化工园或生产制造园区中&#xff0c;周界防范意义重大&#xff0c;对园区的安全起到重要的作用。常规的安防方式是采用人员巡查&#xff0c;人力投入成本大而且效率低。周界一旦被破坏或入侵&#xff0c;会影响园区人员和资产安全&#xff0c;…...

    2024/3/28 19:59:46
  10. VB.net WebBrowser网页元素抓取分析方法

    在用WebBrowser编程实现网页操作自动化时&#xff0c;常要分析网页Html&#xff0c;例如网页在加载数据时&#xff0c;常会显示“系统处理中&#xff0c;请稍候..”&#xff0c;我们需要在数据加载完成后才能继续下一步操作&#xff0c;如何抓取这个信息的网页html元素变化&…...

    2024/3/28 21:57:52
  11. 【Objective-C】Objective-C汇总

    方法定义 参考&#xff1a;https://www.yiibai.com/objective_c/objective_c_functions.html Objective-C编程语言中方法定义的一般形式如下 - (return_type) method_name:( argumentType1 )argumentName1 joiningArgument2:( argumentType2 )argumentName2 ... joiningArgu…...

    2024/3/28 9:07:44
  12. 【洛谷算法题】P5713-洛谷团队系统【入门2分支结构】

    &#x1f468;‍&#x1f4bb;博客主页&#xff1a;花无缺 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! 本文由 花无缺 原创 收录于专栏 【洛谷算法题】 文章目录 【洛谷算法题】P5713-洛谷团队系统【入门2分支结构】&#x1f30f;题目描述&#x1f30f;输入格…...

    2024/3/28 18:09:48
  13. 【ES6.0】- 扩展运算符(...)

    【ES6.0】- 扩展运算符... 文章目录 【ES6.0】- 扩展运算符...一、概述二、拷贝数组对象三、合并操作四、参数传递五、数组去重六、字符串转字符数组七、NodeList转数组八、解构变量九、打印日志十、总结 一、概述 **扩展运算符(...)**允许一个表达式在期望多个参数&#xff0…...

    2024/3/28 21:57:50
  14. 摩根看好的前智能硬件头部品牌双11交易数据极度异常!——是模式创新还是饮鸩止渴?

    文 | 螳螂观察 作者 | 李燃 双11狂欢已落下帷幕&#xff0c;各大品牌纷纷晒出优异的成绩单&#xff0c;摩根士丹利投资的智能硬件头部品牌凯迪仕也不例外。然而有爆料称&#xff0c;在自媒体平台发布霸榜各大榜单喜讯的凯迪仕智能锁&#xff0c;多个平台数据都表现出极度异常…...

    2024/3/29 10:46:22
  15. Go语言常用命令详解(二)

    文章目录 前言常用命令go bug示例参数说明 go doc示例参数说明 go env示例 go fix示例 go fmt示例 go generate示例 总结写在最后 前言 接着上一篇继续介绍Go语言的常用命令 常用命令 以下是一些常用的Go命令&#xff0c;这些命令可以帮助您在Go开发中进行编译、测试、运行和…...

    2024/3/28 10:24:59
  16. 用欧拉路径判断图同构推出reverse合法性:1116T4

    http://cplusoj.com/d/senior/p/SS231116D 假设我们要把 a a a 变成 b b b&#xff0c;我们在 a i a_i ai​ 和 a i 1 a_{i1} ai1​ 之间连边&#xff0c; b b b 同理&#xff0c;则 a a a 能变成 b b b 的充要条件是两图 A , B A,B A,B 同构。 必要性显然&#xff0…...

    2024/3/28 19:51:36
  17. 【NGINX--1】基础知识

    1、在 Debian/Ubuntu 上安装 NGINX 在 Debian 或 Ubuntu 机器上安装 NGINX 开源版。 更新已配置源的软件包信息&#xff0c;并安装一些有助于配置官方 NGINX 软件包仓库的软件包&#xff1a; apt-get update apt install -y curl gnupg2 ca-certificates lsb-release debian-…...

    2024/3/28 19:36:32
  18. Hive默认分割符、存储格式与数据压缩

    目录 1、Hive默认分割符2、Hive存储格式3、Hive数据压缩 1、Hive默认分割符 Hive创建表时指定的行受限&#xff08;ROW FORMAT&#xff09;配置标准HQL为&#xff1a; ... ROW FORMAT DELIMITED FIELDS TERMINATED BY \u0001 COLLECTION ITEMS TERMINATED BY , MAP KEYS TERMI…...

    2024/3/28 17:15:47
  19. 【论文阅读】MAG:一种用于航天器遥测数据中有效异常检测的新方法

    文章目录 摘要1 引言2 问题描述3 拟议框架4 所提出方法的细节A.数据预处理B.变量相关分析C.MAG模型D.异常分数 5 实验A.数据集和性能指标B.实验设置与平台C.结果和比较 6 结论 摘要 异常检测是保证航天器稳定性的关键。在航天器运行过程中&#xff0c;传感器和控制器产生大量周…...

    2024/3/29 9:27:12
  20. --max-old-space-size=8192报错

    vue项目运行时&#xff0c;如果经常运行慢&#xff0c;崩溃停止服务&#xff0c;报如下错误 FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory 因为在 Node 中&#xff0c;通过JavaScript使用内存时只能使用部分内存&#xff08;64位系统&…...

    2024/3/29 12:34:40
  21. 基于深度学习的恶意软件检测

    恶意软件是指恶意软件犯罪者用来感染个人计算机或整个组织的网络的软件。 它利用目标系统漏洞&#xff0c;例如可以被劫持的合法软件&#xff08;例如浏览器或 Web 应用程序插件&#xff09;中的错误。 恶意软件渗透可能会造成灾难性的后果&#xff0c;包括数据被盗、勒索或网…...

    2024/3/28 19:58:12
  22. JS原型对象prototype

    让我简单的为大家介绍一下原型对象prototype吧&#xff01; 使用原型实现方法共享 1.构造函数通过原型分配的函数是所有对象所 共享的。 2.JavaScript 规定&#xff0c;每一个构造函数都有一个 prototype 属性&#xff0c;指向另一个对象&#xff0c;所以我们也称为原型对象…...

    2024/3/28 21:57:45
  23. C++中只能有一个实例的单例类

    C中只能有一个实例的单例类 前面讨论的 President 类很不错&#xff0c;但存在一个缺陷&#xff1a;无法禁止通过实例化多个对象来创建多名总统&#xff1a; President One, Two, Three; 由于复制构造函数是私有的&#xff0c;其中每个对象都是不可复制的&#xff0c;但您的目…...

    2024/3/29 11:55:06
  24. python django 小程序图书借阅源码

    开发工具&#xff1a; PyCharm&#xff0c;mysql5.7&#xff0c;微信开发者工具 技术说明&#xff1a; python django html 小程序 功能介绍&#xff1a; 用户端&#xff1a; 登录注册&#xff08;含授权登录&#xff09; 首页显示搜索图书&#xff0c;轮播图&#xff0…...

    2024/3/29 8:23:18
  25. 电子学会C/C++编程等级考试2022年03月(一级)真题解析

    C/C++等级考试(1~8级)全部真题・点这里 第1题:双精度浮点数的输入输出 输入一个双精度浮点数,保留8位小数,输出这个浮点数。 时间限制:1000 内存限制:65536输入 只有一行,一个双精度浮点数。输出 一行,保留8位小数的浮点数。样例输入 3.1415926535798932样例输出 3.1…...

    2024/3/28 9:26:43
  26. 配置失败还原请勿关闭计算机,电脑开机屏幕上面显示,配置失败还原更改 请勿关闭计算机 开不了机 这个问题怎么办...

    解析如下&#xff1a;1、长按电脑电源键直至关机&#xff0c;然后再按一次电源健重启电脑&#xff0c;按F8健进入安全模式2、安全模式下进入Windows系统桌面后&#xff0c;按住“winR”打开运行窗口&#xff0c;输入“services.msc”打开服务设置3、在服务界面&#xff0c;选中…...

    2022/11/19 21:17:18
  27. 错误使用 reshape要执行 RESHAPE,请勿更改元素数目。

    %读入6幅图像&#xff08;每一幅图像的大小是564*564&#xff09; f1 imread(WashingtonDC_Band1_564.tif); subplot(3,2,1),imshow(f1); f2 imread(WashingtonDC_Band2_564.tif); subplot(3,2,2),imshow(f2); f3 imread(WashingtonDC_Band3_564.tif); subplot(3,2,3),imsho…...

    2022/11/19 21:17:16
  28. 配置 已完成 请勿关闭计算机,win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机...

    win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机”问题的解决方法在win7系统关机时如果有升级系统的或者其他需要会直接进入一个 等待界面&#xff0c;在等待界面中我们需要等待操作结束才能关机&#xff0c;虽然这比较麻烦&#xff0c;但是对系统进行配置和升级…...

    2022/11/19 21:17:15
  29. 台式电脑显示配置100%请勿关闭计算机,“准备配置windows 请勿关闭计算机”的解决方法...

    有不少用户在重装Win7系统或更新系统后会遇到“准备配置windows&#xff0c;请勿关闭计算机”的提示&#xff0c;要过很久才能进入系统&#xff0c;有的用户甚至几个小时也无法进入&#xff0c;下面就教大家这个问题的解决方法。第一种方法&#xff1a;我们首先在左下角的“开始…...

    2022/11/19 21:17:14
  30. win7 正在配置 请勿关闭计算机,怎么办Win7开机显示正在配置Windows Update请勿关机...

    置信有很多用户都跟小编一样遇到过这样的问题&#xff0c;电脑时发现开机屏幕显现“正在配置Windows Update&#xff0c;请勿关机”(如下图所示)&#xff0c;而且还需求等大约5分钟才干进入系统。这是怎样回事呢&#xff1f;一切都是正常操作的&#xff0c;为什么开时机呈现“正…...

    2022/11/19 21:17:13
  31. 准备配置windows 请勿关闭计算机 蓝屏,Win7开机总是出现提示“配置Windows请勿关机”...

    Win7系统开机启动时总是出现“配置Windows请勿关机”的提示&#xff0c;没过几秒后电脑自动重启&#xff0c;每次开机都这样无法进入系统&#xff0c;此时碰到这种现象的用户就可以使用以下5种方法解决问题。方法一&#xff1a;开机按下F8&#xff0c;在出现的Windows高级启动选…...

    2022/11/19 21:17:12
  32. 准备windows请勿关闭计算机要多久,windows10系统提示正在准备windows请勿关闭计算机怎么办...

    有不少windows10系统用户反映说碰到这样一个情况&#xff0c;就是电脑提示正在准备windows请勿关闭计算机&#xff0c;碰到这样的问题该怎么解决呢&#xff0c;现在小编就给大家分享一下windows10系统提示正在准备windows请勿关闭计算机的具体第一种方法&#xff1a;1、2、依次…...

    2022/11/19 21:17:11
  33. 配置 已完成 请勿关闭计算机,win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机”的解决方法...

    今天和大家分享一下win7系统重装了Win7旗舰版系统后&#xff0c;每次关机的时候桌面上都会显示一个“配置Windows Update的界面&#xff0c;提示请勿关闭计算机”&#xff0c;每次停留好几分钟才能正常关机&#xff0c;导致什么情况引起的呢&#xff1f;出现配置Windows Update…...

    2022/11/19 21:17:10
  34. 电脑桌面一直是清理请关闭计算机,windows7一直卡在清理 请勿关闭计算机-win7清理请勿关机,win7配置更新35%不动...

    只能是等着&#xff0c;别无他法。说是卡着如果你看硬盘灯应该在读写。如果从 Win 10 无法正常回滚&#xff0c;只能是考虑备份数据后重装系统了。解决来方案一&#xff1a;管理员运行cmd&#xff1a;net stop WuAuServcd %windir%ren SoftwareDistribution SDoldnet start WuA…...

    2022/11/19 21:17:09
  35. 计算机配置更新不起,电脑提示“配置Windows Update请勿关闭计算机”怎么办?

    原标题&#xff1a;电脑提示“配置Windows Update请勿关闭计算机”怎么办&#xff1f;win7系统中在开机与关闭的时候总是显示“配置windows update请勿关闭计算机”相信有不少朋友都曾遇到过一次两次还能忍但经常遇到就叫人感到心烦了遇到这种问题怎么办呢&#xff1f;一般的方…...

    2022/11/19 21:17:08
  36. 计算机正在配置无法关机,关机提示 windows7 正在配置windows 请勿关闭计算机 ,然后等了一晚上也没有关掉。现在电脑无法正常关机...

    关机提示 windows7 正在配置windows 请勿关闭计算机 &#xff0c;然后等了一晚上也没有关掉。现在电脑无法正常关机以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容&#xff0c;让我们赶快一起来看一下吧&#xff01;关机提示 windows7 正在配…...

    2022/11/19 21:17:05
  37. 钉钉提示请勿通过开发者调试模式_钉钉请勿通过开发者调试模式是真的吗好不好用...

    钉钉请勿通过开发者调试模式是真的吗好不好用 更新时间:2020-04-20 22:24:19 浏览次数:729次 区域: 南阳 > 卧龙 列举网提醒您:为保障您的权益,请不要提前支付任何费用! 虚拟位置外设器!!轨迹模拟&虚拟位置外设神器 专业用于:钉钉,外勤365,红圈通,企业微信和…...

    2022/11/19 21:17:05
  38. 配置失败还原请勿关闭计算机怎么办,win7系统出现“配置windows update失败 还原更改 请勿关闭计算机”,长时间没反应,无法进入系统的解决方案...

    前几天班里有位学生电脑(windows 7系统)出问题了&#xff0c;具体表现是开机时一直停留在“配置windows update失败 还原更改 请勿关闭计算机”这个界面&#xff0c;长时间没反应&#xff0c;无法进入系统。这个问题原来帮其他同学也解决过&#xff0c;网上搜了不少资料&#x…...

    2022/11/19 21:17:04
  39. 一个电脑无法关闭计算机你应该怎么办,电脑显示“清理请勿关闭计算机”怎么办?...

    本文为你提供了3个有效解决电脑显示“清理请勿关闭计算机”问题的方法&#xff0c;并在最后教给你1种保护系统安全的好方法&#xff0c;一起来看看&#xff01;电脑出现“清理请勿关闭计算机”在Windows 7(SP1)和Windows Server 2008 R2 SP1中&#xff0c;添加了1个新功能在“磁…...

    2022/11/19 21:17:03
  40. 请勿关闭计算机还原更改要多久,电脑显示:配置windows更新失败,正在还原更改,请勿关闭计算机怎么办...

    许多用户在长期不使用电脑的时候&#xff0c;开启电脑发现电脑显示&#xff1a;配置windows更新失败&#xff0c;正在还原更改&#xff0c;请勿关闭计算机。。.这要怎么办呢&#xff1f;下面小编就带着大家一起看看吧&#xff01;如果能够正常进入系统&#xff0c;建议您暂时移…...

    2022/11/19 21:17:02
  41. 还原更改请勿关闭计算机 要多久,配置windows update失败 还原更改 请勿关闭计算机,电脑开机后一直显示以...

    配置windows update失败 还原更改 请勿关闭计算机&#xff0c;电脑开机后一直显示以以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容&#xff0c;让我们赶快一起来看一下吧&#xff01;配置windows update失败 还原更改 请勿关闭计算机&#x…...

    2022/11/19 21:17:01
  42. 电脑配置中请勿关闭计算机怎么办,准备配置windows请勿关闭计算机一直显示怎么办【图解】...

    不知道大家有没有遇到过这样的一个问题&#xff0c;就是我们的win7系统在关机的时候&#xff0c;总是喜欢显示“准备配置windows&#xff0c;请勿关机”这样的一个页面&#xff0c;没有什么大碍&#xff0c;但是如果一直等着的话就要两个小时甚至更久都关不了机&#xff0c;非常…...

    2022/11/19 21:17:00
  43. 正在准备配置请勿关闭计算机,正在准备配置windows请勿关闭计算机时间长了解决教程...

    当电脑出现正在准备配置windows请勿关闭计算机时&#xff0c;一般是您正对windows进行升级&#xff0c;但是这个要是长时间没有反应&#xff0c;我们不能再傻等下去了。可能是电脑出了别的问题了&#xff0c;来看看教程的说法。正在准备配置windows请勿关闭计算机时间长了方法一…...

    2022/11/19 21:16:59
  44. 配置失败还原请勿关闭计算机,配置Windows Update失败,还原更改请勿关闭计算机...

    我们使用电脑的过程中有时会遇到这种情况&#xff0c;当我们打开电脑之后&#xff0c;发现一直停留在一个界面&#xff1a;“配置Windows Update失败&#xff0c;还原更改请勿关闭计算机”&#xff0c;等了许久还是无法进入系统。如果我们遇到此类问题应该如何解决呢&#xff0…...

    2022/11/19 21:16:58
  45. 如何在iPhone上关闭“请勿打扰”

    Apple’s “Do Not Disturb While Driving” is a potentially lifesaving iPhone feature, but it doesn’t always turn on automatically at the appropriate time. For example, you might be a passenger in a moving car, but your iPhone may think you’re the one dri…...

    2022/11/19 21:16:57