输入框是动态v-model我输入值后点击查询,控制台可以看见有值,但是发送post请求的时候,在data数据栏里 这个text是个空数组
时间: 2023-05-20 18:03:35 浏览: 35
可能是因为发送post请求的时候,没有正确地将输入框的值传递给后端。你可以检查一下发送post请求的代码,确保正确地获取输入框的值并将其传递给后端。另外,也可以检查一下后端是否正确地接收了传递过来的值。
相关问题
</head> <body> <el-form id="login" class="demo-ruleForm" :rules="rules" :model="ruleForm"> <el-form-item label="用户名" prop="username"> <el-input v-model="ruleForm.username"></el-input> </el-form-item> <el-form-item label="密码" prop="password"> <el-input v-model="ruleForm.password" type="password"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="loginHandler()">登录</el-button> </el-form-item> </el-form> </body> <script> new Vue({ el: "#login", data() { return { ruleForm:{ username: "", password: "", }, rules: { username: [{ required: true, message: '请输入用户名', trigger: 'blur' }, { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' } ], password: [{ required: true, message: '请输入密码', trigger: 'blur' }, { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' } ] } } }, methods: { loginHandler() { axios.post("http://localhost:9000/mvc_web/login?username="+this.ruleForm.username + "&password=" + this.ruleForm.password).then(function(response) { if(response.status==200){ if(response.data.id!=0){ //将数据保存在本地缓存中 /* window.localStorage.setItem("user",JSON.stringify(response.data)) */ //将数据保存到服务器中 sessionStorage.setItem("user",JSON.stringify(response.data)) window.location.href="home.html"} else{ console.log("账户或密码错误,请重新输入") } } }) .catch(function(error) { console.log(error) }) } } }) </script> </html> //Home.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/vue.js"></script> </head> <body> <div id="home"> 欢迎{{user.username}}登录 </div> </body> <script> new Vue({ el:"#home", data:{ user:JSON.parse(sessionStorage.getItem("user")) } }) </script> </html>解释每行代码
这段代码是一个基于Vue.js的前端页面,主要包含两个部分:一个是登录页面,另一个是主页。
在登录页面部分,代码中的el-form组件是一个表单组件,包含用户名和密码两个输入框以及登录按钮。其中,v-model指令用于实现数据的双向绑定,rules属性用于设置表单验证规则。loginHandler方法是登录按钮的点击事件处理函数,通过Axios库向服务器发送POST请求,将用户名和密码作为参数传递给后台,如果登录成功则将用户信息保存在sessionStorage中,跳转到主页;否则在控制台输出错误信息。
在主页部分,代码中的div元素用于展示欢迎信息,通过Vue.js实现数据的双向绑定,显示当前登录用户的用户名。其中,JSON.parse方法用于将sessionStorage中保存的JSON字符串转换为JavaScript对象,从而实现数据的获取和展示。
当用户点击按钮时,vue页面上传图片和一个数字数组到python后端,python后端接收图片并下载到本地,python后端使用fastapi,前端使用elementui,前后端的代码怎么写
好的,这个问题和之前的问题类似,只是传递的数据类型有所不同,因此我们需要在前端和后端的代码中都作出一些修改。
首先,从前端的角度来看,我们需要将数组中的数字数据转换为字符串类型,并将上传的图片文件和字符串数据一起作为请求体发送到后端。下面是修改后的前端代码示例:
```html
<template>
<div>
<el-upload
action="/api/upload"
:on-success="handleSuccess"
:before-upload="beforeUpload"
>
<el-button type="primary">点击上传图片</el-button>
</el-upload>
<el-input v-model="numberList" placeholder="请输入数字数组,以逗号分隔"></el-input>
<el-button type="primary" @click="submit">提交</el-button>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
fileList: [],
imageInfo: [],
numberList: '',
};
},
methods: {
beforeUpload(file) {
this.fileList.push(file);
return false;
},
handleSuccess(response) {
this.imageInfo.push({
url: response.url,
name: response.name,
});
},
submit() {
const numbers = this.numberList.split(',').map(x => x.trim());
axios.post('/api/submit', { images: this.imageInfo, numbers })
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error(error);
});
},
},
};
</script>
```
在这个示例中,我们添加了一个输入框来接收数字数组,并在提交按钮的`click`事件中将其转换为字符串类型,并将其作为请求体中的`numbers`参数一起发送。
然后,从后端的角度来看,我们需要修改接口的参数类型,并在接口中解析数字数组字符串,并将其转换为Python列表。下面是修改后的后端代码示例:
```python
from fastapi import FastAPI, File, UploadFile
app = FastAPI()
@app.post('/api/upload')
async def upload_image(file: UploadFile = File(...)):
file_path = f'./images/{file.filename}'
with open(file_path, 'wb') as f:
f.write(await file.read())
return {'url': f'http://localhost:8000/static/images/{file.filename}', 'name': file.filename}
@app.post('/api/submit')
async def submit_images(images: List[dict], numbers: str):
number_list = numbers.split(',')
number_list = [int(x.strip()) for x in number_list]
for image in images:
print(image['url'], image['name'])
print(number_list)
return {'success': True}
```
在这个示例中,我们修改了接口的参数类型,将数字数组的类型改为了字符串类型。然后,在接口中,我们解析了数字数组字符串,并将其转换为Python列表。最后,我们在控制台中打印出了数字数组和上传的图片信息。
在后端代码中,我们也需要定义一个静态目录用于存放上传的图片文件,和之前的示例中一样,可以在`app`对象的`startup`事件中调用`app.mount`方法来挂载静态目录。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)