nebel/hasura-rest-hands-on
1
0
Fork 0
mirror of https://github.com/kou029w/hasura-rest-hands-on.git synced 2025-01-18 08:05:12 +00:00
Code Issues Projects Releases Wiki Activity

create frontend files

Browse source
This commit is contained in:
Nebel 2021-07-22 21:10:05 +09:00
parent f0d9beef01
commit 46ad73003a
10 changed files with 8261 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
docs/README.md
View file

@ -4,9 +4,8 @@ Hasuraを使用してPostgresデータベースに接続したREST APIを構築
これからこのハンズオンで作成するのは次のようなWebアプリです。
<!-- TODO: 自由に編集できてしまうので削除するか修正して -->
<iframe
src="https://codesandbox.io/embed/vue3-hasura-rest-qfmmc?fontsize=14&hidenavigation=1&view=preview"
src="https://codesandbox.io/embed/github/kou029w/hasura-rest-hands-on/tree/main/frontend?codemirror=1&hidenavigation=1&view=preview"
style="
width: 100%;
height: 500px;

9
docs/create-vue-app.md
View file

@ -1,16 +1,9 @@
# Vueアプリケーションの作成
[![Edit in CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/vue3-hasura-rest-qfmmc?file=/src/App.vue)
[![Edit in CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/kou029w/hasura-rest-hands-on/tree/main/frontend?file=/src/App.vue)
このリンクからCodeSandboxにアクセスし、Vueアプリケーションを作成します。
<!-- TODO:
編集用に配置して
[![Edit in CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/kou029w/hasura-rest-hands-on/tree/master/frontend)
-->
<!-- TODO: /frontend にあるコードを埋め込んで -->
なお、URLに含まれる `memo-demo` は、Hasura Cloudプロジェクト名によって異なるので、適宜自分の作成したプロジェクトに合わせて読み替えてください。
```vue

2
frontend/.gitignore vendored Normal file
View file

@ -0,0 +1,2 @@
/node_modules/
/dist/

3
frontend/babel.config.js Normal file
View file

@ -0,0 +1,3 @@
module.exports = {
presets: ["@vue/cli-plugin-babel/preset"],
};

1
frontend/codesandbox.json Normal file
View file

@ -0,0 +1 @@
{ "template": "vue-cli" }

20
frontend/package.json Normal file
View file

@ -0,0 +1,20 @@
{
"name": "vue3-hasura-rest",
"version": "1.0.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
},
"dependencies": {
"@vueup/vue-quill": "^1.0.0-beta.7",
"axios": "^0.21.1",
"lodash.debounce": "^4.0.8",
"vue": "^3.1.5"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^4.5.13",
"@vue/cli-service": "^4.5.13",
"@vue/compiler-sfc": "^3.1.5"
}
}

11
frontend/public/index.html Normal file
View file

@ -0,0 +1,11 @@
<!DOCTYPE html>
<html lang="ja" dir="lrr">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>vue3-hasura-rest</title>
</head>
<body>
<div id="app"></div>
</body>
</html>

35
frontend/src/App.vue Normal file
View file

@ -0,0 +1,35 @@
<template>
<QuillEditor
ref="editor"
:content="{ ops: [{ insert: '読み込み中…' }] }"
@update:content="update"
toolbar="full"
/>
</template>
<script>
import { QuillEditor } from "@vueup/vue-quill";
import "@vueup/vue-quill/dist/vue-quill.snow.css";
import axios from "axios";
import debounce from "lodash.debounce";
/* ここに作成したREST APIエンドポイントを指定します。 `memo-demo` の部分はHasura Cloudプロジェクト名です。 */
const endpoint = "https://memo-demo.hasura.app/api/rest/page/1";
export default {
name: "App",
components: { QuillEditor },
beforeMount() {
this.update = debounce(async (content) => {
await axios.put(endpoint, { content });
console.log("updated", content);
}, 1000);
},
async mounted() {
const res = await axios.get(endpoint);
const content = res.data.page?.content;
this.$refs.editor.setContents(content);
console.log("content", content);
},
};
</script>

4
frontend/src/main.js Normal file
View file

@ -0,0 +1,4 @@
import { createApp } from "vue";
import App from "./App.vue";
createApp(App).mount("#app");

8183
frontend/yarn.lock Normal file
View file

File diff suppressed because it is too large Load diff