Element UI: 用户登录之前后端通信

前端代码

<template>
	<div>

		<el-row style="display: flex;justify-content: center;">
			<el-col :span="12">
				<h2 style="text-align:center;">用户登录</h2>
				<el-divider></el-divider>
				<el-form ref="form" :model="form" label-width="80px">
					<el-form-item label="用户名">
						<el-input v-model="form.name" placeholder="请输入用户名"></el-input>
					</el-form-item>
				 <el-form-item label="密码">
						<el-input v-model="form.pwd" show-password placeholder="请输入密码"></el-input>
					</el-form-item>


					<el-form-item style="text-align:center;">
				  <el-button type="primary" @click="onSubmit">登录</el-button>
						<el-button>重置</el-button>
					</el-form-item>
				</el-form>

			</el-col>
		</el-row>
		<el-row>{{info}}</el-row>
	</div>
</template>
<script>
	const axios = require('axios');
	export default {

		name: 'Login2',
		data() {
			return {
				form: {
					name: '',
					pwd: "",

				},
				info: ""
			}
		},
		methods: {
			onSubmit() {
				console.log('submit!');
				console.log("用户名", this.form.name)
				console.log("密码", this.form.pwd)

				//1.参数 axios.post()(Rul地址,传递的数据)
				//2.注意事项:axios.get(url,{params:对象})请求写法
				let url = "http://119.3.212.161:5003/login"
				let message = {
					name: "maxin",
					pwd: "123456"
				}
				axios.post(url, message)
					.then(function(response) {
						console.log(response.data)
						this.info = response.data
					})
					.catch(function(error) { // 请求失败处理
						console.log(error);
					});


			}
		}
	}
</script>

后端代码

Python Flask:

Element UI: 用户登录之后端接口（无数据库）

测试连通