技术标签: foreach nodejs javascript
本文的原文连接是:
https://blog.csdn.net/freewebsys/article/details/81153733
博主地址是:http://blog.csdn.net/freewebsys
https://developer.mozilla.org/zh-CN/
还有这么一个开发者中心呢,上面搜索写JavaScript的东西也相当的全面。
开始是使用 firefox,现在使用了 chrome就再也不看 mozilla 的东西了。
但是人家有个号东西也去学习。
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Introduction
学习javascript
虽然写javascript好多年,但是一些高级的用法不会。
造成代码感觉上冗余的多,不优美。
比如昨天写的CURD 项目设置属性为空,就相当难看的代码:
filters: {
id: '',
userName: '',
password: '',
nickName: '',
role: '',
status: '',
type: '',
},
loading: false,
dataForm: {
//编辑界面数据
id: '',
userName: '',
password: '',
nickName: '',
role: '',
status: '',
type: '',
createTime: '',
updateTime: '',
},
感觉上肯定有啥高级的用法,能将属性的默认值设置空啥的。
或者使用啥foreach的函数。
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/keys
拼接字符串:
let tmpDataForm = this.dataForm //赋值变量
Object.keys(tmpDataForm).forEach(function(key){
data += "&"+key+"=" + tmpDataForm[key]
})
进行filter查询:
let query = ""
let tmpFilters = this.filters //赋值变量
Object.keys(tmpFilters).forEach(function(key){
query += "&"+key+"=" + tmpFilters[key]
})
昨天的curd优化:
https://blog.csdn.net/freewebsys/article/details/81112630
<template>
<section>
<!--工具条-->
<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
<el-form :inline="true" :model="filters">
<el-form-item><el-button type="primary" @click="editFunc">新建</el-button></el-form-item>
<el-form-item><el-input v-model="filters.id" placeholder="id"></el-input></el-form-item>
<el-form-item><el-input v-model="filters.userName" placeholder="用户名"></el-input></el-form-item>
<el-form-item><el-input v-model="filters.password" placeholder="密码"></el-input></el-form-item>
<el-form-item><el-input v-model="filters.nickName" placeholder="昵称"></el-input></el-form-item>
<el-form-item><el-input v-model="filters.role" placeholder="角色"></el-input></el-form-item>
<el-form-item><el-input v-model="filters.status" placeholder="状态"></el-input></el-form-item>
<el-form-item><el-input v-model="filters.type" placeholder="类型"></el-input></el-form-item>
<el-form-item>
<el-button type="primary" v-on:click="listFunc">查询</el-button>
</el-form-item>
</el-form>
</el-col>
<!--列表-->
<template>
<el-table :data="dataList" v-loading="loading" style="width: 100%;">
<el-table-column prop="id" label="id"/>
<el-table-column prop="userName" label="用户名"/>
<el-table-column prop="password" label="密码"/>
<el-table-column prop="nickName" label="昵称"/>
<el-table-column prop="role" label="角色"/>
<el-table-column prop="status" label="状态"/>
<el-table-column prop="type" label="类型"/>
<el-table-column prop="createTime" label="创建时间"/>
<el-table-column prop="updateTime" label="更新时间"/>
<el-table-column label="操作" width="150">
<template slot-scope="scope"><el-button-group>
<el-button type="primary" size="mini" @click="editFunc(scope.$index, scope.row)">编辑</el-button>
<el-button type="danger" size="mini" @click="deleteFunc(scope.$index, scope.row)">删除</el-button>
</el-button-group></template>
</el-table-column>
</el-table>
</template>
<el-col style="text-align:right;padding-top: 30px;">
<el-pagination @current-change="pageChangeFunc" background="" layout="prev, pager, next" :total="totalCount">
</el-pagination>
</el-col>
<!--编辑弹出页面-->
<el-dialog title="用户编辑" :visible.sync="dialogVisible">
<el-input v-model="dataForm.id" placeholder="id" type="hidden"/>
<el-form label-width="100px" :rules="dataFormRules" ref="dataForm">
<el-form-item label="用户名" prop="userName"><el-input/></el-form-item>
<el-form-item label="密码" prop="password"><el-input/></el-form-item>
<el-form-item label="昵称" prop="nickName"><el-input v-model="dataForm.nickName"/></el-form-item>
<el-form-item label="角色" prop="role"><el-input v-model="dataForm.role"/></el-form-item>
<el-form-item label="状态" prop="status"><el-input v-model="dataForm.status"/></el-form-item>
<el-form-item label="类型" prop="type"><el-input v-model="dataForm.type"/></el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="saveFunc">确 定</el-button>
</span>
</el-dialog>
</section>
</template>
<script>
export default {
data() {
return {
filters: {
id: '', userName: '', password: '', nickName: '', role: '', status: '', type: '',
},
loading: false,
dataForm: {
//编辑界面数据
id: '', userName: '', password: '', nickName: '', role: '', status: '', type: '', createTime: '', updateTime: '',
},
dataFormRules: {
//编辑界面校验规则
userName: [{required: true, message: '请输入用户名', trigger: 'blur' } ],
password: [{required: true, message: '请输入密码', trigger: 'blur' } ],
nickName: [{required: true, message: '请输入昵称', trigger: 'blur' } ],
role: [{required: true, message: '请输入角色', trigger: 'blur' } ],
status: [{required: true, message: '请输入状态', trigger: 'blur' } ],
type: [{required: true, message: '请输入类型', trigger: 'blur' } ],
},
dialogVisible: false,
dataList: [], //列表数据
totalCount: 0,
currentPage: 1
}
},
methods: {
editFunc: function(index, row) {
//新建&编辑
if (row == undefined) {
let tmpDataForm = this.dataForm //赋值变量,修改tmpDataForm即可
Object.keys(tmpDataForm).forEach(function(key){
tmpDataForm[key] = ''
})
this.dialogVisible = true
} else {
this.$axios.get('/userInfo/get?id=' + row.id)
.then(resp => {
//数据直接赋值
this.dataForm = resp.data.data
}).finally(() => {
this.loading = false
this.dialogVisible = true
})
}},
saveFunc: function() {
this.$refs['dataForm'].validate((valid) => {
if (!valid) { return false }
let data = ""
let tmpDataForm = this.dataForm //赋值变量
Object.keys(tmpDataForm).forEach(function(key){
data += "&"+key+"=" + tmpDataForm[key]
})
this.$axios.post('/userInfo/save?' + data)
.finally(() => {
this.dialogVisible = false
this.listFunc()
})
})
},
deleteFunc: function(index, row) {
this.$confirm('确认删除该记录吗?', '提示', {
type: 'warning'
}).then(() => {
this.$axios.delete('/userInfo/delete?id=' + row.id)
.finally(() => {
this.listFunc()
})
})
},
listFunc: function() {
this.loading = true
let query = ""
let tmpFilters = this.filters //赋值变量
Object.keys(tmpFilters).forEach(function(key){
query += "&"+key+"=" + tmpFilters[key]
})
this.$axios.get('/userInfo/list?page=' + this.currentPage + query)
.then(resp => {
this.dataList = resp.data.data
this.totalCount = resp.data.totalCount
}).finally(() => {
this.loading = false
})
},
pageChangeFunc: function(idx) {
this.currentPage = idx
this.listFunc()
}
},
created: function() {
this.listFunc()
}
};
</script>
js代码中出现大量的 set 代码其实是冗余的本来就是动态语言,不能像java那样去写:this.xxx = xxx 这样不优雅。
要用 forEach去写:
let tmpDataForm = this.dataForm //赋值变量,修改tmpDataForm即可
Object.keys(tmpDataForm).forEach(function(key){
tmpDataForm[key] = ''
})
这个要是大表单数据,十几个 也没有啥意义。
本文的原文连接是:
https://blog.csdn.net/freewebsys/article/details/81153733
文章浏览阅读8.9k次,点赞2次,收藏2次。先说以下我为何要删除docker的原因吧:因为我感觉Docker Hub有点慢,就配置了阿里云的镜像加速器,可是按阿里云的官方配置完后我怎么感觉它更慢了,对比昨天配置阿里的maven镜像仓库后快到起飞的速度,我认为是此次配置没有生效。多次确认新加入的/etc/docker/demon.json文件无误后又多次systemctl了未果,随即我怀疑阿里给出的以下方案中的“修改”的/etc/dock...
文章浏览阅读1.9k次,点赞3次,收藏4次。文章目录空间物理的研究对象太阳风能量向地球传输的三种方式和所需要的时间太阳内部结构、太阳活动太阳内部结构太阳活动太阳风速度从太阳表面到地球轨道附近变化参考空间物理的研究对象大气层:10KM以上,分成平流层、中层、低热层、热层、逃逸层电离层:60-90KM以上,一直到1000KM左右,部分电离气体,中性成风碰撞的影响不可忽略地球磁层:完全电离的气体,1000KM以上,可忽略碰撞,有太阳风和..._空间物理概论
文章浏览阅读2.9k次,点赞5次,收藏25次。BQ4050学习笔记(二)永久失效:如果发⽣严重故障,该设备可以永久禁⽤电池组。永久故障检查(IFC 和 DFW 除外)可以通过设置Settings:Enabled PFA、 Settings:Enabled PF B、 Settings:Enabled PF C 和Settings:Enabled PF D 中的相应位单独启⽤或禁⽤。所有永久在设置ManufacturingStatus()[PF]之前,故障检查(IFC 和 DFW 除外)被禁⽤。当任何PFStatus()位置位时,器件进⼊ PER_bq4050
文章浏览阅读152次。第二步:填写配置文件参数,这里定义了一个名字为application-user-dev.yaml的配置,使用的是YAML格式。DataID : 非常重要,可以看做是配置的文件的名字,在程序中拉取配置文件的时候需要指定Data ID。如果不使用默认的public命名空间,那么需要指定namespace配置为要使用的命名空间的Id值。第一步:打开Nacos监控面板,进入配置列表,新增一个user服务的配置文件。进入配置列表 ,切换到新建立的命名空间,创建配置文件。修改Nacos,添加命名空间。_spring-cloud-alibaba 使用nacos 2.1版本
文章浏览阅读293次。受害者打开python代码生成的RTF文件,RTF解析器解析恶意代码,触发堆溢出,Microsoft Word会闪退,用户其它Word中未保存的内容会丢失。_cve-2023-21716复现
文章浏览阅读451次。文件排版存档编号:[UYTR-OUPT28-KBNTL98-UYNN208]文件排版存档编号:[UYTR-OUPT28-KBNTL98-UYNN208]C语言程序设计A期末模拟试题C语言程序设计A期末模拟试题一一、单项选择题(每小题2分,共20分)由C++目标文件连接而成的可执行文件的缺省扩展名为( )。A. cpp B. exe C. obj D. li..._c语言如何将a转换成a
文章浏览阅读534次。笔记beef启动 beef 的方法msfbeef工具目录 /usr/share/beef-xss配置文件 config.yaml启动 beef 的方法1.beef-xss2./usr/share/beef-xss/beef(使用前需要修改默认的用户名称和密码)Web 管理界面 http://127.0.0.1:3000/ui/panelShellcode http://127.0.0.1:3000/hook.js测试页面 http://127.0.0.1:3000/demos/butch_msf如何切换一个session
文章浏览阅读503次。丑数问题及变种小结声明1 判断丑数因子只包含2,3,5的数称为丑数(Ugly Number),习惯上把1当作第一个丑数面试lintcode 517 ugly numbersegmentfault剑指offer 面试题34 丑数数组解法:参考剑指offer,将待判断目标依次连续整除2,3,5,若是最后获得1,证实该数为丑数;优化/*** 依次整除2,3,5判断(2,3,5顺序判断时间最优)* htt..._编写python来证明一个数是丑数
文章浏览阅读1.9k次,点赞30次,收藏11次。Selenium 简介: WebDriver是Selenium Tool套件中最重要的组件。Selenium 2.0之后已经将Selenium和WebDriver进行合并,作为一个更简单、简洁、有利于维护的API提供给测试人员使用。 它提供了一套标准的接口,可以用多种编程语言调用,并且和浏览器进行交互。 WebDriver可以对浏览器进行控制,包括输入URL,点击按钮,填写表单,滚动页面,甚至是执行JavaScript代码。同时,它也能够获取网页中的信息,如文本,标签,属_python webdriver api
文章浏览阅读1w次。1.什么是公钥加密私钥解密 简单一点来说一般加密解密都用的是同一个秘钥或者根本不用,而这里采用的是加密用一个秘钥,解密用另一个秘钥且能解密成功.这就属于不对称加密解密算法的一种了.2.公钥秘钥的生成 由于这种加密方案,公钥秘钥是成对的,所以需要一些工具生成 利用 openssl 生成公钥私钥 生成公钥: openssl genrsa -out rsa_private_key...._crypto.publicencrypt
文章浏览阅读1.7k次。[工欲善其事,必先利其器]上文中,我们简单介绍了依赖关系的基本理论与配置方式。但是由于这个知识点在我们日后的开发过程中会经常使用到,因此,我们在本篇中通过演示实例来说明依赖关系,请各位看官一定跟着步骤,亲自尝试一番。仔细观察通过这种方式对我们程序架构造成的影响。特别的,这里以一份已经调试完成的工程为例,因此,与前文说的工程命名不一致,敬请谅解。准备工作:a.操作系统:win7 x6_依赖关系怎么写
文章浏览阅读343次。Rikka with GraphTime Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)Total Submission(s): 592 Accepted Submission(s): 353Problem DescriptionAs we know,