add router & gql-client for FE, adapt BE routing
This commit is contained in:
parent
57886016ab
commit
a790bc9dd9
@ -55,3 +55,10 @@ Commands were run in the order listed below on a debian based system.
|
||||
cd frontend
|
||||
pnpm install
|
||||
```
|
||||
|
||||
- Add Vue-router & Villus
|
||||
```bash
|
||||
cd frontend
|
||||
pnpm install villus graphql
|
||||
pnpm install graphql-tag
|
||||
```
|
||||
|
||||
@ -2,9 +2,9 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vite + Vue</title>
|
||||
<title>YetAnotherTodoList</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
||||
@ -9,7 +9,11 @@
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"vue": "^3.3.4"
|
||||
"graphql": "^16.8.1",
|
||||
"graphql-tag": "^2.12.6",
|
||||
"villus": "^3.2.0",
|
||||
"vue": "^3.3.4",
|
||||
"vue-router": "^4.2.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^4.2.3",
|
||||
|
||||
54
frontend/pnpm-lock.yaml
generated
54
frontend/pnpm-lock.yaml
generated
@ -5,9 +5,21 @@ settings:
|
||||
excludeLinksFromLockfile: false
|
||||
|
||||
dependencies:
|
||||
graphql:
|
||||
specifier: ^16.8.1
|
||||
version: 16.8.1
|
||||
graphql-tag:
|
||||
specifier: ^2.12.6
|
||||
version: 2.12.6(graphql@16.8.1)
|
||||
villus:
|
||||
specifier: ^3.2.0
|
||||
version: 3.2.0(graphql@16.8.1)(vue@3.3.6)
|
||||
vue:
|
||||
specifier: ^3.3.4
|
||||
version: 3.3.6
|
||||
vue-router:
|
||||
specifier: ^4.2.5
|
||||
version: 4.2.5(vue@3.3.6)
|
||||
|
||||
devDependencies:
|
||||
'@vitejs/plugin-vue':
|
||||
@ -288,6 +300,10 @@ packages:
|
||||
'@vue/compiler-dom': 3.3.6
|
||||
'@vue/shared': 3.3.6
|
||||
|
||||
/@vue/devtools-api@6.5.1:
|
||||
resolution: {integrity: sha512-+KpckaAQyfbvshdDW5xQylLni1asvNSGme1JFs8I1+/H5pHEhqUKMEQD/qn3Nx5+/nycBq11qAEi8lk+LXI2dA==}
|
||||
dev: false
|
||||
|
||||
/@vue/reactivity-transform@3.3.6:
|
||||
resolution: {integrity: sha512-RlJl4dHfeO7EuzU1iJOsrlqWyJfHTkJbvYz/IOJWqu8dlCNWtxWX377WI0VsbAgBizjwD+3ZjdnvSyyFW1YVng==}
|
||||
dependencies:
|
||||
@ -371,6 +387,21 @@ packages:
|
||||
dev: true
|
||||
optional: true
|
||||
|
||||
/graphql-tag@2.12.6(graphql@16.8.1):
|
||||
resolution: {integrity: sha512-FdSNcu2QQcWnM2VNvSCCDCVS5PpPqpzgFT8+GXzqJuoDd0CBncxCY278u4mhRO7tMgo2JjgJA5aZ+nWSQ/Z+xg==}
|
||||
engines: {node: '>=10'}
|
||||
peerDependencies:
|
||||
graphql: ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0
|
||||
dependencies:
|
||||
graphql: 16.8.1
|
||||
tslib: 2.6.2
|
||||
dev: false
|
||||
|
||||
/graphql@16.8.1:
|
||||
resolution: {integrity: sha512-59LZHPdGZVh695Ud9lRzPBVTtlX9ZCV150Er2W43ro37wVof0ctenSaskPPjN7lVTIN8mSZt8PHUNKZuNQUuxw==}
|
||||
engines: {node: ^12.22.0 || ^14.16.0 || ^16.0.0 || >=17.0.0}
|
||||
dev: false
|
||||
|
||||
/magic-string@0.30.5:
|
||||
resolution: {integrity: sha512-7xlpfBaQaP/T6Vh8MO/EqXSW5En6INHEvEXQiuff7Gku0PWjU3uf6w/j9o7O+SpB5fOAkrI5HeoNgwjEO0pFsA==}
|
||||
engines: {node: '>=12'}
|
||||
@ -409,6 +440,20 @@ packages:
|
||||
resolution: {integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==}
|
||||
engines: {node: '>=4'}
|
||||
|
||||
/tslib@2.6.2:
|
||||
resolution: {integrity: sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==}
|
||||
dev: false
|
||||
|
||||
/villus@3.2.0(graphql@16.8.1)(vue@3.3.6):
|
||||
resolution: {integrity: sha512-kb4Dv6Uvu7FSqfVnXTFb7I+VDv9fzFG2Emqu1eu9acY/Y3xM8xqy/I8w/HexNYDkofx5fGIgWk9nvfEWROtlGw==}
|
||||
peerDependencies:
|
||||
graphql: ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0
|
||||
vue: ^3.0.0 || ^2.7.0
|
||||
dependencies:
|
||||
graphql: 16.8.1
|
||||
vue: 3.3.6
|
||||
dev: false
|
||||
|
||||
/vite@4.5.0:
|
||||
resolution: {integrity: sha512-ulr8rNLA6rkyFAlVWw2q5YJ91v098AFQ2R0PRFwPzREXOUJQPtFUG0t+/ZikhaOCDqFoDhN6/v8Sq0o4araFAw==}
|
||||
engines: {node: ^14.18.0 || >=16.0.0}
|
||||
@ -444,6 +489,15 @@ packages:
|
||||
fsevents: 2.3.3
|
||||
dev: true
|
||||
|
||||
/vue-router@4.2.5(vue@3.3.6):
|
||||
resolution: {integrity: sha512-DIUpKcyg4+PTQKfFPX88UWhlagBEBEfJ5A8XDXRJLUnZOvcpMF8o/dnL90vpVkGaPbjvXazV/rC1qBKrZlFugw==}
|
||||
peerDependencies:
|
||||
vue: ^3.2.0
|
||||
dependencies:
|
||||
'@vue/devtools-api': 6.5.1
|
||||
vue: 3.3.6
|
||||
dev: false
|
||||
|
||||
/vue@3.3.6:
|
||||
resolution: {integrity: sha512-jJIDETeWJnoY+gfn4ZtMPMS5KtbP4ax+CT4dcQFhTnWEk8xMupFyQ0JxL28nvT/M4+p4a0ptxaV2WY0LiIxvRg==}
|
||||
peerDependencies:
|
||||
|
||||
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.5 KiB |
1
frontend/src/.d.ts
vendored
Normal file
1
frontend/src/.d.ts
vendored
Normal file
@ -0,0 +1 @@
|
||||
declare module 'vue/dist/vue.esm-bundler.js';
|
||||
@ -1,30 +1,21 @@
|
||||
<script setup>
|
||||
import HelloWorld from './components/HelloWorld.vue'
|
||||
</script>
|
||||
|
||||
<script setup></script>
|
||||
<template>
|
||||
<div>
|
||||
<a href="https://vitejs.dev" target="_blank">
|
||||
<img src="/vite.svg" class="logo" alt="Vite logo" />
|
||||
</a>
|
||||
<a href="https://vuejs.org/" target="_blank">
|
||||
<img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
|
||||
</a>
|
||||
</div>
|
||||
<HelloWorld msg="Vite + Vue" />
|
||||
<router-link to="/">Home</router-link> |
|
||||
<router-link to="/about">About</router-link>
|
||||
<router-view></router-view>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.logo {
|
||||
height: 6em;
|
||||
padding: 1.5em;
|
||||
will-change: filter;
|
||||
transition: filter 300ms;
|
||||
}
|
||||
.logo:hover {
|
||||
filter: drop-shadow(0 0 2em #646cffaa);
|
||||
}
|
||||
.logo.vue:hover {
|
||||
filter: drop-shadow(0 0 2em #42b883aa);
|
||||
}
|
||||
.logo {
|
||||
height: 6em;
|
||||
padding: 1.5em;
|
||||
will-change: filter;
|
||||
transition: filter 300ms;
|
||||
}
|
||||
.logo:hover {
|
||||
filter: drop-shadow(0 0 2em #646cffaa);
|
||||
}
|
||||
.logo.vue:hover {
|
||||
filter: drop-shadow(0 0 2em #42b883aa);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,40 +1,43 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { ref } from 'vue'
|
||||
|
||||
defineProps({
|
||||
msg: String,
|
||||
})
|
||||
defineProps({
|
||||
msg: String
|
||||
})
|
||||
|
||||
const count = ref(0)
|
||||
const count = ref(0)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<h1>{{ msg }}</h1>
|
||||
<h1>{{ msg }}</h1>
|
||||
|
||||
<div class="card">
|
||||
<button type="button" @click="count++">count is {{ count }}</button>
|
||||
<p>
|
||||
Edit
|
||||
<code>components/HelloWorld.vue</code> to test HMR
|
||||
</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<button type="button" @click="count++">count is {{ count }}</button>
|
||||
<p>
|
||||
Edit
|
||||
<code>components/HelloWorld.vue</code> to test HMR
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
Check out
|
||||
<a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
|
||||
>create-vue</a
|
||||
>, the official Vue + Vite starter
|
||||
</p>
|
||||
<p>
|
||||
Install
|
||||
<a href="https://github.com/vuejs/language-tools" target="_blank">Volar</a>
|
||||
in your IDE for a better DX
|
||||
</p>
|
||||
<p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
|
||||
<p>
|
||||
Check out
|
||||
<a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
|
||||
>create-vue</a
|
||||
>, the official Vue + Vite starter
|
||||
</p>
|
||||
<p>
|
||||
Install
|
||||
<a href="https://github.com/vuejs/language-tools" target="_blank">Volar</a>
|
||||
in your IDE for a better DX
|
||||
</p>
|
||||
<p class="read-the-docs"
|
||||
>Go to <a href="https://vitejs.dev">vitejs.dev</a> or
|
||||
<a href="https://vuejs.org/">vuejs.org</a> to learn more</p
|
||||
>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.read-the-docs {
|
||||
color: #888;
|
||||
}
|
||||
.read-the-docs {
|
||||
color: #888;
|
||||
}
|
||||
</style>
|
||||
|
||||
38
frontend/src/components/Users.vue
Normal file
38
frontend/src/components/Users.vue
Normal file
@ -0,0 +1,38 @@
|
||||
<template>
|
||||
<div class="gql_showcase">
|
||||
<p>See GraphQl in action:</p>
|
||||
<ul v-if="data">
|
||||
<li v-for="user in data.users"
|
||||
>{{ user.userName }}
|
||||
<ul v-if="user.todos">
|
||||
<li v-for="todo in user.todos">{{ todo.text }}</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useQuery } from 'villus'
|
||||
import { gql } from 'graphql-tag'
|
||||
|
||||
const getUsers = gql`
|
||||
query getUsers {
|
||||
users {
|
||||
userName
|
||||
todos {
|
||||
text
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
const { data } = useQuery({
|
||||
query: getUsers
|
||||
})
|
||||
</script>
|
||||
<style scoped>
|
||||
.gql_showcase {
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
@ -1,5 +1,26 @@
|
||||
import { createApp } from 'vue'
|
||||
import { createApp } from 'vue/dist/vue.esm-bundler.js'
|
||||
import { createClient } from 'villus'
|
||||
import { createRouter, createWebHistory } from 'vue-router'
|
||||
import './style.css'
|
||||
import App from './App.vue'
|
||||
import Home from './views/Home.vue'
|
||||
import About from './views/About.vue'
|
||||
|
||||
createApp(App).mount('#app')
|
||||
const NotFound = { template: '<div>Sorry, page not found (404)</div>' }
|
||||
|
||||
const routes = [
|
||||
{ path: '/', name: 'Home', component: Home },
|
||||
{ path: '/about', name: 'About', component: About },
|
||||
{ path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound }
|
||||
]
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(),
|
||||
routes
|
||||
})
|
||||
|
||||
const villusClient = createClient({
|
||||
url: '/api'
|
||||
})
|
||||
|
||||
createApp(App).use(router).use(villusClient).mount('#app')
|
||||
|
||||
@ -1,89 +1,95 @@
|
||||
:root {
|
||||
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
font-weight: 400;
|
||||
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
font-weight: 400;
|
||||
|
||||
color-scheme: light dark;
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
background-color: #242424;
|
||||
color-scheme: light dark;
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
background-color: #242424;
|
||||
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: 500;
|
||||
color: #646cff;
|
||||
text-decoration: inherit;
|
||||
font-weight: 500;
|
||||
color: #646cff;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #535bf2;
|
||||
color: #535bf2;
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: 500;
|
||||
color: #646cff;
|
||||
text-decoration: inherit;
|
||||
font-weight: 500;
|
||||
color: #646cff;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #535bf2;
|
||||
color: #535bf2;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
place-items: center;
|
||||
min-width: 320px;
|
||||
min-height: 100vh;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
place-items: center;
|
||||
min-width: 320px;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3.2em;
|
||||
line-height: 1.1;
|
||||
font-size: 3.2em;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
button {
|
||||
border-radius: 8px;
|
||||
border: 1px solid transparent;
|
||||
padding: 0.6em 1.2em;
|
||||
font-size: 1em;
|
||||
font-weight: 500;
|
||||
font-family: inherit;
|
||||
background-color: #1a1a1a;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.25s;
|
||||
border-radius: 8px;
|
||||
border: 1px solid transparent;
|
||||
padding: 0.6em 1.2em;
|
||||
font-size: 1em;
|
||||
font-weight: 500;
|
||||
font-family: inherit;
|
||||
background-color: #1a1a1a;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.25s;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
border-color: #646cff;
|
||||
border-color: #646cff;
|
||||
}
|
||||
|
||||
button:focus,
|
||||
button:focus-visible {
|
||||
outline: 4px auto -webkit-focus-ring-color;
|
||||
outline: 4px auto -webkit-focus-ring-color;
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 2em;
|
||||
padding: 2em;
|
||||
}
|
||||
|
||||
#app {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
color: #213547;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
a:hover {
|
||||
color: #747bff;
|
||||
}
|
||||
button {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
:root {
|
||||
color: #213547;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #747bff;
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
}
|
||||
|
||||
7
frontend/src/views/About.vue
Normal file
7
frontend/src/views/About.vue
Normal file
@ -0,0 +1,7 @@
|
||||
<script setup>
|
||||
import HelloWorld from '../components/HelloWorld.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<HelloWorld msg="Vite + Vue"></HelloWorld>
|
||||
</template>
|
||||
8
frontend/src/views/Home.vue
Normal file
8
frontend/src/views/Home.vue
Normal file
@ -0,0 +1,8 @@
|
||||
<script setup>
|
||||
import Users from '../components/Users.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<h1>Welcome, this is YetAnotherTodoList</h1>
|
||||
<Users />
|
||||
</template>
|
||||
@ -20,11 +20,11 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
package server
|
||||
|
||||
import (
|
||||
"net/http"
|
||||
|
||||
"github.com/99designs/gqlgen/graphql/playground"
|
||||
"somepi.ddns.net/gitea/gilex-dev/YetAnotherToDoList/globals"
|
||||
)
|
||||
|
||||
func handleDevTools() {
|
||||
http.Handle("/playground", playground.Handler("GraphQL playground", "/api"))
|
||||
func handleDevTools(port int) {
|
||||
mux.Handle("/playground", playground.Handler("GraphQL playground", "/api"))
|
||||
globals.Logger.Printf("connect to http://localhost:%v/ for GraphQL playground", port)
|
||||
}
|
||||
|
||||
@ -19,5 +19,5 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
package server
|
||||
|
||||
func handleDevTools() {
|
||||
func handleDevTools(_ int) {
|
||||
}
|
||||
|
||||
@ -34,7 +34,21 @@ func handleFrontend() {
|
||||
if err != nil {
|
||||
log.Fatalln(err)
|
||||
}
|
||||
|
||||
frontendFS := http.FileServer(http.FS(stripped))
|
||||
http.Handle("/", frontendFS)
|
||||
mux.Handle("/assets/", frontendFS)
|
||||
mux.HandleFunc("/", indexHandler)
|
||||
// TODO: redirect from vue to 404 page (on go/proxy server)
|
||||
}
|
||||
|
||||
// Following Nathan Tsao's implementation on https://betterprogramming.pub/how-to-serve-a-single-page-application-using-go-4b9a38d92987
|
||||
func indexHandler(w http.ResponseWriter, r *http.Request) {
|
||||
// TODO: add map with path:type
|
||||
if r.URL.Path == "/vite.svg" {
|
||||
rawFile, _ := frontend.ReadFile("dist/vite.svg")
|
||||
w.Header().Add("Content-Type", "image/svg+xml")
|
||||
w.Write(rawFile)
|
||||
return
|
||||
}
|
||||
rawFile, _ := frontend.ReadFile("dist/index.html")
|
||||
w.Write(rawFile)
|
||||
}
|
||||
|
||||
@ -26,16 +26,20 @@ import (
|
||||
"somepi.ddns.net/gitea/gilex-dev/YetAnotherToDoList/graph"
|
||||
)
|
||||
|
||||
func StartServer(port int) {
|
||||
handleDevTools() // controlled by 'dev' tag
|
||||
handleFrontend() // controlled by 'headless' tag
|
||||
var mux *http.ServeMux
|
||||
|
||||
http.HandleFunc("/version", func(w http.ResponseWriter, r *http.Request) {
|
||||
func StartServer(port int) {
|
||||
mux = http.NewServeMux()
|
||||
|
||||
handleDevTools(port) // controlled by 'dev' tag
|
||||
handleFrontend() // controlled by 'headless' tag
|
||||
|
||||
mux.HandleFunc("/version", func(w http.ResponseWriter, r *http.Request) {
|
||||
fmt.Fprintf(w, "%s %s", globals.Version, globals.CommitHash)
|
||||
})
|
||||
|
||||
srv := handler.NewDefaultServer(graph.NewExecutableSchema(graph.Config{Resolvers: &graph.Resolver{}}))
|
||||
http.Handle("/api", srv)
|
||||
globals.Logger.Printf("connect to http://localhost:%v/ for GraphQL playground", port)
|
||||
globals.Logger.Fatal(http.ListenAndServe(":"+strconv.FormatInt(int64(port), 10), nil))
|
||||
mux.Handle("/api", srv)
|
||||
|
||||
globals.Logger.Fatal(http.ListenAndServe(":"+strconv.FormatInt(int64(port), 10), mux))
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user