今天继续学习fastapi,
昨天搞前端VUE,弄到一半,还没搞好,今天继续
昨天cmd新建了VUE项目,
然后新建了登录页面,
并绑定路由,
启动项目,
可以访问登录页了
新增登录接口
新增的api.js组件通过使用axios的http.js组件访问后台接口,api.js如下:
import http from "../api/http.js";
export default {
//首页
index(params) {
return http.get("/", params);
},
//登录
login(params) {
return http.get("/login", params);
},
};
现在开始测试
经过两个小时的研究,更改了很多代码:
其中fastapi后台接口login有更改如下:
#新增接口login
@app.post("/login")
async def login_back_token(*, username: str = Form(...), password: str = Form(...)):#因为要接收前端传递的表单,所以把接收form_data:FormData类改成接收Form表单对象,
form_data = FormData(uname=username,passwd=password)
# 调用login.py的login_for_access_token方法
token = login_for_access_token(form_data)
return token
login_for_access_token方法【见我的上一篇文章】不变,
VUE前端登录页相关代码如下:
<template>
<div class="loginContainer">
<h1>登录</h1>
<div>
<el-form :model="loginForm" label-width="0px" class="login_form" :ref="loginForm">
用户名:<el-input id="username" class="inputStyle" size="large" v-model="loginForm.username"></el-input>
<br />
密 码:<el-input
id="password"
class="inputStyle"
size="large"
type="password"
v-model="loginForm.password"
autocomplete="off">
</el-input>
<br />
<el-button type="primary" @click="submitForm('loginForm')">登录</el-button>
<el-button @click="resetForm('loginForm')">重置</el-button>
</el-form>
</div>
</div>
</template>
<script>
//挂载api.js组件
import Api from '@/api/api.js'
export default {/* eslint-disable */
data() {
return {
loginForm: {
username: '',
password: ''
}
};
},
mounted()
{
//const login_Form = ref(null);
},
methods: {
submitForm() {
//console.log(this.loginForm),,,为什么,VUE会给数组套一层proxy壳,草,怎么想的?,没办法,用JSON.parse转换成可以正常用的数组
let params = JSON.parse(JSON.stringify(this.loginForm));
//console.log(params)
Api.login(params).then((res) => {//访问接口,并传递表单数据
console.log(res)
}).catch(err=>{
console.log(err)
});
},
resetForm(formName) {
this.loginForm.username = "";
this.loginForm.password = "";
},
},
};
</script>
<style scoped>
.loginContainer {
margin: 0 auto;
width: 600px;
text-align: center;
padding-top: 20px;
padding-bottom: 50px;
border: 1px solid;
}
.loginContainer input {
margin-bottom: 20px;
}
.loginStyle {
width: 160px;
height: 40px;
background: rgb(50, 203, 77);
color: white;
font-size: 17px;
}
.inputStyle {
width: 200px;
height: 60px;
padding: 5px;
outline: none;
}
.inputStyle:focus {
border: 1px solid rgb(50, 203, 77);
}
form {
position: relative;
}
.exchange {
position: absolute;
top: 8px;
right: 65px;
color: red;
}
</style>
调用axios实现http访问的http.js更改如下:
// eslint-disable-next-line no-unused-vars
import Axios from 'axios'
import { getToken } from "@/common/token";
//import errorCode from '@/common/errorCode'
//import {ElMessage} from 'element-plus'
//import VueAxios from 'vue-axios'
const BaseURL = 'http://127.0.0.1:9000'
//创建http对象
let http = Axios.create({
baseURL: BaseURL,
headers: {
//增加了表单application/x-www-form-urlencoded格式<<<<<<<<<<<<<注意这里
'Content-Type': 'application/x-www-form-urlencoded;application/json;charset=utf-8'
},
transformRequest: [function(data) {
let ret = ''
for (let it in data) {//解析data并拼接
ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
}
return ret
}],
})
///请求拦截
http.interceptors.request.use(config => {
const isToken = (config.headers || {}).isToken === false
if (getToken() && !isToken) {
config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
}
return config
}, err => {
return Promise.reject(err)
})
//响应拦截
http.interceptors.response.use(res => {
if (res.status == 200) {
//判断是否成功响应,成功响应值=1,这个响应变量,需要前后端约定好,例如code=1:代表成功,或者code=200代表成功,
/*if(response.data.code == 200){
}*/
//const code = res.data.code || 200;
//const msg = errorCode[code] || res.data.msg || errorCode['default'];
//ElMessage.error(msg)
return res.data;
} else {
return Promise.reject(res)
}
}, err => {
return Promise.reject(err)
})
export default {//可供调用的方法:get,post,其它自行添加
get(url, params) {
let config = {
method: 'get',
url: url
}
if (params) config.params = params
return http(config)
},
post(url, params) {
let config = {
method: 'post',
url: url,
}
if (params) config.data = params
//console.log(config)
return http(config)
}
}
最终结果,如下图:
成功获得fastapi后台login接口返回的数据。