FastApi (一)前端项目

来自《Python FastAPI Web开发从入门到项目实战》一书的前端项目

1.项目目录

2.主文件main.js

项目运行时执行的第一个文件，初始化运行环境，统一管理项目用到的模块

import Vue from 'vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue'
import moment from 'moment'
import router from './router'

const whiteList = ['/login'] 
//定义路由守卫，未登录时，跳转到登录页面
router.beforeEach(async(to, from, next) => { 
// 登录成功后会设置Authorization,此时hasToken的判断为true
    const hasToken = window.sessionStorage.getItem('Authorization') 
    // console.log(hasToken)
    if (hasToken) {
        if (to.path === '/login') {
          next({ path: '/' })
        } else {
            next()
        }
    } else {
        if (whiteList.indexOf(to.path) !== -1) {
            next()
          } else {
            next('/login')
          }
    }
})
//初始化Vue设置
Vue.config.productionTip = false  // productionTip设置为 false ，可以阻止 vue 在启动时生成生产提示
Vue.prototype.$moment = moment  // 全局引入moment模块
//启用ElemenuUI框架
Vue.use(ElementUI);
//创建Vue应用实例
new Vue({
    el: '#app',
    router: router,
    render: h => h(App),

})

3.网络请求文件

1.网络请求框架axios

//web/src/request.js
import axios from 'axios'

// 创建Axios实例
const request = axios.create({
  timeout: 5000, // 单次请求的超时设置
  baseURL: process.env.VUE_APP_BASE_API, // 设置服务器地址
})

// 请求拦截器
request.interceptors.request.use(
  config => {
    // 获取认证信息
    var token = window.sessionStorage.getItem('Authorization')
    if (token) {
      // 设置全局的请求头，用于接入OAuth2认证
      config.headers['Authorization'] = 'Bearer ' + token
    }
    return config
  },
  error => {
    // 报错时，在控制台打印错误信息
    console.log('req',error) 
    return Promise.reject(error)
  }
)

// 响应拦截器
request.interceptors.response.use(
  response => {
    const res = response.data
    // 此处可以添加全局响应数据的处理代码，比如对自定义响应状态码的处理
    return res
  },
  error => {
     // 报错时，在控制台打印错误信息
    console.log('err', error)
    return Promise.reject(error)
  }
)

export default request  // 导出Axios实例

baseURL:前端项目中的所有请求都会发送到这个服务器地址。
请求拦截器中设置请求头，添加token。
在一个模块中，可以同时使用export default 和export 向外暴露成员：
export default 向外暴露的成员，可以使用任意变量来接收。
使用export导出的成员，使用{ }按需接收。

2.网络请求函数定义

//web/src/api/index.js
import request from '@/request'
import qs from 'qs'  // 字符串解析模块，用于封装表单数据
// 登录函数
export function login(data) {
    return request({  //定义request函数生成请求对象
      url: '/auth/login',  // 对应后端API文档中的API地址
      method: 'post',   //请求方法，对应API文档中的请求方法
      headers: {'Content-Type': 'application/x-www-form-urlencoded'}, // 自定义请求头,这里会调用OAuth2登录方法，发送表单数据，需要修改请求头
      data: qs.stringify(data)  // 使用qs封装请求数据
    })
  }
// 获取预约信息列表函数
export function getPersonList(params) {
    return request({
        method: 'get',
        url: '/person/list',
        params   // 传入查询参数
    })
}
// 获取登记信息列表函数
export function getCheckInList(params) {
    return request({
        method: 'get',
        url: '/checkin/list',
        params
    })
}

4.路由表

路由的作用是将访问地址与被访问页面进行关联，前端项目中的所有页面都需要在路由表中定义。

//web/src/router.js
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

// 导入布局组件
import Layout from '@/views/layout'
//定义路由表
export const constantRoutes = [
    {
    path: '/', //定义路由访问地址，即浏览器地址栏URL片断符合#后面的部分
    component: Layout, //访问地址对应的试图组件，前端服务器将视图组件渲染成HTML,返回给浏览器显示
    redirect: '/person',  // 该路由的跳转路由
    children: [         // 定义子路由。点击按钮后，可以在父组件中切换子组件。显示页面的时候，会将下级路由对应的页面嵌入其上级路由对应的页面中
      {
        path: 'person',   // 预约查询页面
        component: () => import('@/views/person'),
        name: 'person',
        meta: { title: '预约', icon: 'dashboard'}
      },
      {
        path: 'checkin',  //登记查询页面
        component: () => import('@/views/checkin'),
        name: 'checkin',
        meta: { title: '登记', icon: 'dashboard'}
      },
      ]
    },
    {
      path: '/login',  //登录页面
      component: () => import('@/views/login')
    },
]

const createRouter = () => new VueRouter({
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes
})

// 创建路由实例
const router = createRouter()  

export function resetRouter() {
  const newRouter = createRouter()
  router.matcher = newRouter.matcher // reset router
}

export default router

5.视图组件文件

每个视图分为三部分：页面模板，页面脚本，页面样式
使用element-ui实现页面模板