Vuetify BootCamp

Appearance

api 製作 ​

安裝 ajax 工具 axios 。

bash
yarn add axios
yarn add axios
bash
npm install axios
npm install axios

製作 api 庫 ​

Swagger 參考頁面:

src/api/patient.js:

js
// patient.js
// todo 參考 swagger 頁面完成 CRUD
export const usePatientRepo = ( api ){
   api.AddPatient = async (item) => { }
   api.GetPatient = async (id) => { }
   api.GetPatientPagination = async () => { }
   api.UpdatetPatient = async (item) => { }
   api.DeletetPatient = async (id) => { }
}
// patient.js
// todo 參考 swagger 頁面完成 CRUD
export const usePatientRepo = ( api ){
   api.AddPatient = async (item) => { }
   api.GetPatient = async (id) => { }
   api.GetPatientPagination = async () => { }
   api.UpdatetPatient = async (item) => { }
   api.DeletetPatient = async (id) => { }
}

.env.development 設置開發環境網址

VITE_API_URL='/'
VITE_API_URL='/'

.env.production 設置正式環境網址

VITE_API_URL='https://正式上線的網址/'
VITE_API_URL='https://正式上線的網址/'

vite.config.js 設置 proxy

js
{
   // ...other config
  server: {
    port: 3000,
    // 加入 proxy
    proxy: {
      '/api': 'http://....../api'
    }
  },
}
{
   // ...other config
  server: {
    port: 3000,
    // 加入 proxy
    proxy: {
      '/api': 'http://....../api'
    }
  },
}

src/api/index.js 將 api lib 加到實例上

js
import { usePatientRepo } from './patient'

// 設置基礎網址
const baseURL = import.meta.env.VITE_API_URL
export const api = axios.create({ baseURL })

// ...
usePatientRepo(api)
import { usePatientRepo } from './patient'

// 設置基礎網址
const baseURL = import.meta.env.VITE_API_URL
export const api = axios.create({ baseURL })

// ...
usePatientRepo(api)

使用 api ​

vue
<script setup>
import api from '@/api'
// ...
async function SomeFunction(){
   const items = await api.GetPatient()
}
</script>
<script setup>
import api from '@/api'
// ...
async function SomeFunction(){
   const items = await api.GetPatient()
}
</script>

todo: 頁面透過 api lib 取得 patient