遍历一个类似这样的元素 form_ :{"a":"1","b":"2","c":"4"}的属性
用 for遍历
for (const paramName in form_) {
const paramValue = form_[paramName];
if (paramValue === null || paramValue === undefined || paramValue === '') {
this.$message.info("您还有某些参数值未输入")
}else{
this.$message.info("进行其他逻辑操作")
}
}
遍历一个集合 用foreach 比如像
modelListData:
[
{
"_id": "64e610edd9495d70119d1047",
"model_ParaIntro": [
{
"param_defaultValue": "1",
"param_name": "a",
},
{
"param_defaultValue": "2",
"param_name": "b",
},
{
"param_defaultValue": "4",
"param_name": "c",
}
],
},
{
...........省略
}
],
这样的集合
this.modelListData.forEach(model => {
let temp = {};
model.model_ParaIntro.forEach(param => {
temp[param.param_name] = param.param_defaultValue;
});
this.paramValues.push(temp);
});
用封装的request请求
this.request.post("/model/getModelList",{
params:{
pageNum:this.pageNum,
pageSize:this.pageSize,
}
}).then(res=>{
if(res.code===200){
console.log("成功进行的操作");
}else{
console.log(res.msg);
}
})
在排序的时候
需要用这种形式进行浅复制 比如const dataCopy = [...this.modelData];
的作用是创建一个 dataCopy
数组,这个数组包含了与 this.modelData
相同的元素,但是它是一个独立的、不影响原始数组的新数组。其中的三个点 ...
是 JavaScript 中的展开语法(Spread Syntax)。其中的三个点 ...
是 JavaScript 中的展开语法(Spread Syntax)。
如果直接赋值const dataCopy = this.modelData;再对dataCopy进行排序
即使换了变量名 还是会影响原来的modelData
数组 因为赋值是深复制
使用了 Axios 来发送 POST 请求,而 Axios 默认会将请求的数据格式设置为 JSON,因此在发送文件上传请求时可能会出现问题。
这个时候就可以换成fectch
const formData = new FormData();
formData.append('model_type', this.form.model_type);
formData.append('model_name', this.form.model_name);
formData.append('model_intro', this.form.model_intro);
formData.append('save_time', this.form.save_time);
formData.append('model_ParaIntro', this.form.model_ParaIntro);
formData.append('model_file', this.selectedFilescode[0].raw);
try {
const response = await fetch('http://127.0.0.1:5000/model/addModel', {
method: 'POST',
body: formData,
});
if (response.ok) {
const result = await response.json();
if (result.code === 200) {
this.$message.success(result.msg);
} else {
this.$message.error(result.msg);
}
} else {
this.$message.error('上传失败');
}
} catch (error) {
console.error('上传失败', error);
this.$message.error('上传失败');
}
用axios上传文件要加请求头 'multipart/form-data'
// 导入 axios 库
import axios from 'axios';
// 创建一个 FormData 对象
const formData = new FormData();
formData.append('model_type', '回转分区');
formData.append('model_name', 'hhh11');
formData.append('model_intro', 'hahhaha');
formData.append('save_time', 'hwudhuwhd');
formData.append('model_ParaIntro', '[]');
formData.append('model_file', params.file);
// 发送 POST 请求
axios.post('/model/addModel', formData, {
headers: {
'Content-Type': 'multipart/form-data', // 设置请求头为文件上传类型
},
})
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error(error);
});
正常的传参产生数据的页面刷新一般是怎么样的 因为传的参 一般刷新后就没了 比如我做一个模糊搜索 那么搜索的关键字传到组件里 在刷新后会没 那么就无法将原来的搜索得到的页面刷新出来 我之前都是存到浏览器缓存里 但是我觉得这样不正规
在 Web 开发中,确实存在这样的情况:当你传递参数用于生成页面内容(比如模糊搜索关键字),在刷新后这些参数会丢失,导致无法还原之前的页面状态。你提到的浏览器缓存是一种解决方法,但你认为这可能不够正规。
以下是一些处理这种情况的方法:
URL 参数:将参数添加到 URL 中,这样在刷新页面时参数仍然会保留在 URL 中,从而可以还原页面状态。这也允许用户通过收藏链接或复制 URL 来分享特定状态的页面。你可以使用 JavaScript 操作浏览器的地址栏来实现这一点。
会话存储(Session Storage):使用 Web Storage API 中的会话存储功能,将关键信息存储在会话存储中。这样在同一个浏览器标签或窗口中,刷新页面时数据仍然会被保留。然而,关闭浏览器标签或窗口会导致数据丢失。
本地存储(Local Storage):类似于会话存储,但数据会持久保存,即使关闭浏览器标签或窗口,数据也不会丢失。但是,过度使用本地存储可能会导致存储空间问题,而且不太适合存储敏感信息。
Cookies:通过设置 Cookie 将数据存储在用户浏览器中。这是一种传统的方法,但由于存储容量有限,可能不适合大量数据。
状态管理工具:在前端框架(如React、Vue等)中,你可以使用状态管理工具(如Redux、Vuex)来管理应用的状态。这可以帮助你在页面刷新时保留状态。
服务器端保存状态:如果你的应用程序有后端,你可以将搜索关键字等状态保存在服务器上,然后通过用户身份验证来还原页面状态。这样即使用户刷新页面,数据也可以从服务器获取。