refactor: rewrite the api part

xiaoluoboding · May 23, 2022 · 9195045 · 9195045
1 parent 6371908
commit 9195045
Show file tree

Hide file tree

Showing 12 changed files with 259 additions and 191 deletions.
diff --git a/README.md b/README.md
@@ -6,20 +6,36 @@
 
 <h1 align="center">Self Hosted App Starter</h1>
 
-<p align="center">A self hosted app starter for full-stack developer/creator.</p>
+<p align="center">A starter for the self-hosted app, help you to build your next full-stack project.</p>
 
 <p align="center">
   <img alt="GitHub stars" src="https://img.shields.io/github/stars/xiaoluoboding/self-hosted-app-starter" />
   <img alt="Docker pull" src="https://img.shields.io/docker/pulls/getsha/sha.svg" />
   <img alt="Go report" src="https://goreportcard.com/badge/github.com/xiaoluoboding/self-hosted-app-starter" />
 </p>
 
-## ⚓️ Deploy with Docker
+## Features
+
+> SHA is built on top of GSVT Stack, which stands for Go、SQLite、Vue 3、TailwindCSS
+
+- 🪄 Full-stack starter with GSVT Stack
+- ⚓️ Self-hosted with `Dockerfile` on the fly
+- 💾 Store your data using SQLite database
+- 🖖 Choose your familar Frontend Teck Stack, default is Vue 3
+- 🚄 Deploy you app easily on the Railway
+
+### Deploy Services
+
+### ⚓️ Deploy with Docker
 
 ```docker
 docker run --name sha --publish 3399:8080 --volume ~/.getsha/:/var/opt/sha -e mode=prod getsha/sha:dev
 ```
 
+### 🚄 Deploy on Railway
+
+[![Deploy on Railway](https://railway.app/button.svg)](https://railway.app/new/template/prX7No?referralCode=UEM9NF)
+
 ## Tech Stack
 
 ### Backend
@@ -48,34 +64,38 @@ Generate by [vue3-starter](https://github.com/xiaoluoboding/vue3-starter)
 
 2. Pull source.
 
-```bash
-npx degit xiaoluoboding/self-hosted-app-starter my-self-hosted-app
-```
+   ```bash
+   npx degit xiaoluoboding/self-hosted-app-starter my-self-hosted-app
+   ```
 
 3. Start backend using air (with live reload).
 
-```bash
-pnpm run dev:be
-or
-air -c scripts/.air.toml
-```
+   ```bash
+   pnpm run dev:be
+   or
+   air -c backend/scripts/.air.toml
+   ```
 
-Change the open file limit if you encounter "error: too many open files".
+   > Change the open file limit if you encounter "error: too many open files".
 
-```
-ulimit -n 10240
-```
+   ```bash
+   ulimit -n 10240
+   ```
 
 4. Start frontend (with live reload).
 
-```bash
-pnpm run dev:fe
-or
-cd frontend && pnpm i && pnpm dev
-```
+   ```bash
+   pnpm run dev:fe
+   or
+   cd frontend && pnpm i && pnpm dev
+   ```
 
 The app should now be running at https://localhost:3000 and change either frontend or backend code would trigger live reload.
 
+## Inspired by
+
+[Bytebase](https://github.com/bytebase/bytebase)
+
 ## License
 
 MIT [@xiaoluoboding](https://github.com/xiaoluoboding)
diff --git a/frontend/package.json b/frontend/package.json
@@ -11,7 +11,9 @@
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
   },
   "dependencies": {
+    "axios": "^0.27.2",
     "pinia": "^2.0.11",
+    "qs": "^6.10.3",
     "vue": "^3.2.31",
     "vue-i18n": "^9.2.0-beta.33",
     "vue-router": "^4.0.12"
@@ -22,6 +24,7 @@
     "@rushstack/eslint-patch": "^1.1.0",
     "@types/jsdom": "^16.2.14",
     "@types/node": "^16.11.25",
+    "@types/qs": "^6.9.7",
     "@vitejs/plugin-vue": "^2.2.2",
     "@vue/eslint-config-prettier": "^7.0.0",
     "@vue/eslint-config-typescript": "^10.0.0",

diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
@@ -1,5 +1,7 @@
 <template>
-  <header class="w-full flex flex-col">
+  <header
+    class="w-full flex flex-col justify-center items-center lg:items-start"
+  >
     <img
       alt="Vue logo"
       class="block my-8"
@@ -53,7 +55,7 @@ import { onMounted } from 'vue'
 
 import HelloWorld from '@/components/HelloWorld.vue'
 import { isDark, toggleDark } from '@/composables/useDark'
-import API from '@/utils/api'
+import Services from '@/services'
 import { useUserStore } from '@/stores/user'
 
 const { locale, availableLocales } = useI18n()
@@ -74,18 +76,18 @@ const toggleLocales = () => {
 }
 
 const loginAsGuest = async () => {
-  await API.login('guest@example.com', 'secret')
-  const user = await API.getUserInfo()
+  await Services.login('guest@example.com', 'secret')
+  const { data: user } = await Services.getUserInfo()
   if (user) {
     userStore.addUser(user)
     console.log('login success')
   }
 }
 
 onMounted(async () => {
-  const status = await API.getSystemStatus()
+  const status = await Services.getSystemStatus()
   await loginAsGuest()
-  const userList = await API.getUserList()
+  const userList = await Services.getUserList()
 
   console.log(status)
   console.log(userList)