fastapi学习记录【六】

代码地址：GitHub - wendingming/fastapi-vue-postgresql: fastapi+vue+postgresql搭建项目fastapi+vue+postgresql搭建项目. Contribute to wendingming/fastapi-vue-postgresql development by creating an account on GitHub.https://github.com/wendingming/fastapi-vue-postgresql

今天继续学习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前端登录页相关代码如下：

调用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接口返回的数据。

在github地址：GitHub - wendingming/fastapi-vue-postgresql: fastapi+vue+postgresql搭建项目fastapi+vue+postgresql搭建项目. Contribute to wendingming/fastapi-vue-postgresql development by creating an account on GitHub.https://github.com/wendingming/fastapi-vue-postgresql