首页 > 其他分享 >基于fastapi+vue登记系统

基于fastapi+vue登记系统

时间:2024-06-20 13:42:38浏览次数:19  
标签:index 登记 fastapi app vue components import router

1.创建fastapi项目

2.创建vue项目

npm create vue@latest
cd web
npm install
npm install element-plus

修改main.js

注册elementui和router

import './assets/main.css'
import App from './App.vue'
import { createApp } from 'vue'
import router from './router'
import ElementUI from 'element-plus'
import 'element-plus/theme-chalk/index.css'


const app = createApp(App)

app.use(router)
app.use(ElementUI)
app.mount('#app')

在components文件夹中添加登录首页Login.vue

<script setup>
// 按钮点击事件,跳转到index.vue
import {RouterLink, RouterView, useRouter} from 'vue-router'
const router = useRouter()
function login() {
  router.push('/index');
}
</script>
<template>
  <div style="display: flex;justify-content: center;margin-top: 50px">
      <h1>核酸采集平台</h1>
  </div>
  <div style="display: flex;justify-content: center;margin-top: 150px">
  <el-button @click.prevent="login">登录</el-button>
  </div>
</template>
<style scoped>
</style>

修改router的index.js

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../components/home.vue'
import IndexView from '../components/Index.vue'
import Login from '../components/Login.vue'
import Home from '../components/home.vue'
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path:'/index',
      name:'index',
      component:IndexView
    },
    {
      path:'/',
      alias:'/login',
      component:Login
    },
    {
      path:'/home',
      name:'home',
      component:Home
    }
  ]
})

export default router

标签:index,登记,fastapi,app,vue,components,import,router
From: https://www.cnblogs.com/Gimm/p/18258494

相关文章

  • Vue 中 v-for 的全方位解读:含案例与 key 属性运用及常用数组方法
    目录v-for介绍v-forkey属性的使用Vue数组方法v-for介绍        v-for能够对数字、数组以及对象进行遍历。值得注意的是,当v-for与v-if一同运用时,v-for的优先级要高于v-if。正因如此,应尽量避免将v-if和v-for共同使用。特别是在嵌套使用的情况下,每一......
  • Vue生态工具组合
    文章目录1.Vue版本2.构建工具3.包管理器4.状态管理5.http库6.UI库7.站点生成器8.优质内容收录vue生态工具多种多样,我们要如何选择并组合起来才最好呢。接下来给大家推荐我认为比较好的工具组合方式,方便大家在搭建vue项目时可做一个参考。1.Vue版本新项目推荐优先选......
  • Java计算机毕业设计+Vue实习实训管理系统(开题报告+源码+论文)
    本系统(程序+源码)带文档lw万字以上 文末可获取一份本项目的java源码和数据库参考。系统程序文件列表开题报告内容研究背景在当今社会,实习实训已成为高等教育中不可或缺的一部分,对于学生实践能力和职业素养的提升具有重要意义。然而,传统的实习实训管理方式存在着诸多不便,如......
  • 防抖ref如何在vue中被定义
    本文由ChatMoney团队出品为什么ref要实现防抖在vue的开发过程中,我们通常会使用到ref,但在我们需要对一个频繁的赋值操作做防抖操作时,我们通常只能通过编写一个独立的防抖函数来实现,这样相对会多一些步骤(麻烦一些)。例如我们给一个即时搜索框的input实现防抖输入(即在输入文本n秒......
  • 在vue中定义一个防抖ref
    本文由ChatMoney团队出品为什么ref要实现防抖在vue的开发过程中,我们通常会使用到ref,但在我们需要对一个频繁的赋值操作做防抖操作时,我们通常只能通过编写一个独立的防抖函数来实现,这样相对会多一些步骤(麻烦一些)。例如我们给一个即时搜索框的input实现防抖输入(即在输入文本n秒......
  • 解决使用vue-awesome-swiper,loop设置为true点击失效问题
    <template><divclass="app-container":class="[pageMode==='pageMode2560'?'pageMode2560':'']"><divclass="tag—title">物联感知</div><......
  • Java项目-基于SpringCloud+springboot+vue的分布式架构网上商城系统(源码+数据库+文档
    源码获取:https://download.csdn.net/download/u011832806/89440647基于SpringCloud+SpringBoot+Vue的分布式架构网上商城系统   开发语言:Java   数据库:MySQL   技术:SpringCloud+SpringBoot+MyBatis+Vue.js+eureka   工具:IDEA/Ecilpse、Navicat、Maven经......
  • Java项目-基于ssm+vue的大学生兼职跟踪系统(源码+数据库+文档)​
    如需完整项目,请私信博主基于ssm+Vue的大学生兼职跟踪系统开发语言:Java数据库:MySQL技术:Spring+SpringMVC+MyBatis+Vue.js工具:IDEA/Ecilpse、Navicat、Maven本文以Java为开发技术,实现了一个大学生兼职跟踪系统。大学生兼职跟踪系统的主要实现功能包括:管理员:首页、个人中心、商......
  • Java项目-基于springboot+vue的学习平台(源码+数据库+文档)​
    源码获取:https://download.csdn.net/download/u011832806/89456223基于SpringBoot+Vue的学习平台开发语言:Java数据库:MySQL技术:SpringBoot+MyBatis+Vue.js工具:IDEA/Ecilpse、Navicat、Maven在Internet高速发展的今天,我们生活的各个领域都涉及到计算机的应用,其中包括学习平台......
  • vue(vue.js) 监视属性与深度监视
    原文链接:vue(vue.js)监视属性与深度监视–每天进步一点点(longkui.site) 1.监视属性监视属性:监视某个属性的变化小案例:<!DOCTYPEhtml><htmllang="en"><body> <divid="root"><h2>今天天气很{{hot?'热':'冷'}}</h2&g......