fastapi学习记录【三】

网络老男孩了

已于 2022-02-18 16:27:08 修改

阅读量396

点赞数

分类专栏： fastapi 文章标签：前端 vue.js javascript python

于 2022-02-16 11:54:07 首次发布

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

版权

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

昨天学习了使用pycharm，

新建工程

加载pip install fastapi[all]库【包括fastapi+uvicorn以及其它插件库】，

然后添加代码main.py

最后uvicorn main:app --reload启动工程

就OK了，包括一个服务器【本机】，一个接口【127.0.0.1:8000】，接口返回JSON【hello world】

今天继续学习，使用前端访问接口，显示【hello world】。

首先是下载安装webstorm【个人习惯用这个】，

因为之前我已经安装好了，就不介绍怎么下载安装了，不会的自行百度

前端准备采用Vue【基于nodejs】，如何下载安装配置，请自行百度

首先，新建一个工程，如下图：

点击Create，webstorm会自动新建工程，等待它新建好就行，新建好的工程，如下图：

新建好工程以后，在Terminal输入npm run serve启动它，vue就会自动启动，并创建前端服务，然后你在浏览器输入地址，就可以访问VUE前端了。如下图：

接下来VUE写代码，访问本地接口127.0.0.1:8000，获取返回字符串，并展示在VUE首页，

大体流程如下：

一、VUE项目安装axios，Terminal输入npm install axios，回车安装

二、新建api.js文件，这个文件将使用axios添加方法，访问接口

三、VUE项目首页，调用api.js的接口方法，获得返回数据，并显示在首页

代码如下：

api.js【在此写接口，调用http.js实现接口访问】

import http from './http.js'

export default {
    //首页
    index(params) {
        return http.get('/', params)
    }
}

http.js

// eslint-disable-next-line no-unused-vars
import Axios from 'axios'
//import VueAxios from 'vue-axios'

const BaseURL = 'http://127.0.0.1:8000'
//创建http对象
let http = Axios.create({
    baseURL: BaseURL,
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
    },
    transformRequest: [function(data) {
        let ret = ''
        for (let it in data) {//解析data并拼接
            ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
        }
        return ret
    }],
})

///请求拦截
http.interceptors.request.use(config => {
    //拦截请求，并在请求前加上一些总是要传递的值，避免每个地方都加这个值
    //let idvalue = localStorage.getItem("idvalue")
    //config.url = config.url + '&idvalue=' +idvalue
    return config
}, err => {
    return Promise.reject(err)
})
//响应拦截
http.interceptors.response.use(response => {
    if (response.status == 200) {
        //判断是否成功响应，成功响应值=1，这个响应变量，需要前后端约定好，例如code=1：代表成功，或者code=200代表成功，
        /*if(response.data.code == 200){

        }*/
        return response.data
    } else {
        return Promise.reject(response)
    }
}, err => {
    return Promise.reject(err)
})

export default {//可供调用的方法：get，post，其它自行添加
    get(url, params) {
        let config = {
            method: 'get',
            url: url
        }
        //console.log(config)
        if (params) config.params = params
        return http(config)
    },
    post(url, params) {
        let config = {
            method: 'post',
            url: url
        }
        if (params) config.data = params
        return http(config)
    }
}

App.vue挂载api.js并调用

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    {{FirstSting}}<!--显示接口返回值-->
    <HelloWorld msg="Welcome to Your Vue.js App"/>

  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
//挂载api.js组件
import Api from './api.js'

export default {
    data() {
        return {
            FirstSting: "ABC"   //定义一个变量
        };
    },
    name: 'App',
    components: {
        HelloWorld
    },
    mounted()
    {
        Api.index().then((res) => {//访问接口，并把获取的数据复制给FirstSting变量
            //console.log(res)
            this.FirstSting = res.message;
        }).catch(err=>{
            console.log(err)
        });
    },
    methods: {
    }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

如图：

fastapi后台出现CORS跨域问题，参考如下博文解决：

FastAPI（39）- 使用 CORS 解决跨域问题_小菠萝测试笔记的博客-CSDN博客同源策略https://www.cnblogs.com/poloyy/p/15345184.htmlCORShttps://www.cnblogs.com/poloyy/p/15345871.htmlFastAPI 模拟跨域问题https://www.cnblogs.com/poloyy/p/15345763.html需要先了解什么是同源策略、CORS、跨域报错栗子才能更好看懂这篇文...https://blog.csdn.net/qq_33801641/article/details/120540963修改后的fastapi首页接口代码：

from fastapi import FastAPI                 #步骤 1：导入 FastAPI
# A、导入对应的包
from fastapi.middleware.cors import CORSMiddleware

app = FastAPI()                             #步骤 2：创建一个 FastAPI「实例」，使用【uvicorn main:app --reload】启动，其中的【app】就是这里指定的实例

# B、声明一个 源 列表；重点：要包含跨域的客户端 源
origins = [
    "http://localhost",
    "http://localhost:8080",
    # 客户端的源
    "http://192.168.3.188:8080"
]

# C、配置 CORSMiddleware
app.add_middleware(
    CORSMiddleware,
    allow_origins=origins,  # 允许访问的源
    allow_credentials=True,  # 支持 cookie
    allow_methods=["*"],  # 允许使用的请求方法
    allow_headers=["*"]  # 允许携带的 Headers
)

# 步骤 3：创建一个路径操作，操作：指http方法：包括【POST,GET,PUT,DELETE,OPTIONS,HEAD,PATCH,TRACE】
# 定义一个路径操作装饰器：
# @app.get("/") 告诉 FastAPI 在它下方的函数负责处理如下访问请求：
# 请求路径为 /
# 使用 get 操作

# 步骤 4：定义路径操作函数
# 这是我们的「路径操作函数」：
# 路径：是 /。
# 操作：是 get。
# 函数：是位于「装饰器」下方的函数（位于 @app.get("/") 下方）。
# async 指的是异步模式，当然也可以使用常规模式【去掉async就可以了】，

# 步骤 5：返回内容
# return 你可以返回一个 dict、list，像 str、int 一样的单个值，等等。
@app.get("/")
async def root():
    return {"message": "Hello World"}

至此，前端访问搞定。