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实现页面模板
