RuoYi-Vue3-FastAPI 项目教程

RuoYi-Vue3-FastAPI 项目教程

项目地址:https://gitcode.com/gh_mirrors/ru/RuoYi-Vue3-FastAPI

1. 项目的目录结构及介绍

RuoYi-Vue3-FastAPI/
├── doc/
│   ├── README.md
│   └── ...
├── ruoyi-ui/
│   ├── public/
│   ├── src/
│   └── ...
├── ruoyi-api/
│   ├── src/
│   │   ├── main/
│   │   │   ├── java/
│   │   │   │   ├── com/
│   │   │   │   │   ├── insistence/
│   │   │   │   │   │   ├── controller/
│   │   │   │   │   │   ├── service/
│   │   │   │   │   │   └── ...
│   │   │   └── resources/
│   │   │       ├── application.yml
│   │   │       └── ...
│   │   └── test/
│   └── ...
├── .gitignore
├── LICENSE
└── README.md
  • doc/: 存放项目文档。
  • ruoyi-ui/: 前端项目目录,包含 Vue 3 项目文件。
  • ruoyi-api/: 后端项目目录,包含 FastAPI 项目文件。
  • .gitignore: Git 忽略文件配置。
  • LICENSE: 项目许可证。
  • README.md: 项目说明文档。

2. 项目的启动文件介绍

后端启动文件

ruoyi-api/src/main/java/com/insistence/RuoYiApplication.java 中,找到主启动类:

package com.insistence;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class RuoYiApplication {
    public static void main(String[] args) {
        SpringApplication.run(RuoYiApplication.class, args);
    }
}

前端启动文件

ruoyi-ui/src/main.js 中,找到 Vue 3 项目的入口文件:

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

createApp(App).use(store).use(router).mount('#app')

3. 项目的配置文件介绍

后端配置文件

ruoyi-api/src/main/resources/application.yml 中,找到主要的配置文件:

server:
  port: 8080
spring:
  datasource:
    url: jdbc:mysql://localhost:3306/ruoyi?useUnicode=true&characterEncoding=utf8&zeroDateTimeBehavior=convertToNull&useSSL=true&serverTimezone=GMT%2B8
    username: root
    password: 123456
    driver-class-name: com.mysql.cj.jdbc.Driver
  # 其他配置...

前端配置文件

ruoyi-ui/vue.config.js 中,找到 Vue 3 项目的配置文件:

module.exports = {
  devServer: {
    port: 8081,
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

以上是 RuoYi-Vue3-FastAPI 项目的基本教程,涵盖了项目的目录结构、启动文件和配置文件的介绍。希望对您有所帮助!

RuoYi-Vue3-FastAPI 基于Vue3+Element Plus+FastAPI开发的一个通用中后台管理框架(若依的FastAPI版本) RuoYi-Vue3-FastAPI 项目地址: https://gitcode.com/gh_mirrors/ru/RuoYi-Vue3-FastAPI

RuoYi-Vue3是一个基于Vue3和Element Plus的前端管理系统框架,是RuoYi项目的升级版。该项目提供了一些通用的后台管理界面的组件和页面,可以快速开发出美观、响应式的管理系统。 RuoYi-Vue3的特点包括: 1. 基于Vue3和Element Plus,使用Vue3的最新特性和Element Plus的组件。 2. 支持响应式布局,可以适配各种设备。 3. 提供了丰富的组件和页面,可以快速开发出功能完善的管理系统。 4. 代码结构清晰,易于理解和维护。 5. 支持国际化和权限控制。 在RuoYi-Vue3中,可以使用Vue3的Composition API来编写组件。例如: ``` <template> <div> <h1>{{ message }}</h1> <button @click="increment">增加计数器</button> </div> </template> <script> import { reactive } from 'vue' export default { setup() { const state = reactive({ message: '欢迎使用RuoYi-Vue3', counter: 0 }) const increment = () => { state.counter += 1 } return { message: state.message, increment } } } </script> ``` 在RuoYi-Vue3中,还可以使用Element Plus的组件来构建页面。例如: ``` <template> <el-table :data="users" style="width: 100%"> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> <el-table-column prop="gender" label="性别"></el-table-column> </el-table> </template> <script> import { reactive } from 'vue' export default { setup() { const state = reactive({ users: [ { name: '张三', age: 20, gender: '男' }, { name: '李四', age: 25, gender: '女' }, { name: '王五', age: 30, gender: '男' } ] }) return { users: state.users } } } </script> ``` 总之,RuoYi-Vue3是一个功能强大、易于开发和维护的Vue3前端管理系统框架,具有广泛的应用前景。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

邢璋顺Blair

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值