fastapi学习记录【六】

网络老男孩了

已于 2022-02-18 16:40:17 修改

阅读量663

点赞数

分类专栏： fastapi 文章标签： python

于 2022-02-18 10:41:26 首次发布

本文链接：https://blog.csdn.net/wangluonanhai/article/details/122962489

版权

fastapi 专栏收录该内容

14 篇文章 9 订阅

订阅专栏

代码地址：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前端登录页相关代码如下：

<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 />
            密&nbsp;&nbsp;&nbsp;&nbsp;码：<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)
    }
}

最终结果,如下图：