概要
pipenv が最新だと動作しない可能性があります
環境
- Gitlab-ee 15.2.4
- Python 3.10.2
- pipenv 2022.1.8
pipenv のバージョンを指定してインストール
-
pip install --user pipenv==2022.1.8
2022年10月19日水曜日
Gitlabのパッケージレジストリを使ってpipenv install する場合はバージョンに注意しなければならない
2022年10月18日火曜日
2022年10月17日月曜日
QuasarでAjaxリクエストを送信する方法
概要
axios を使って Quasar で外部のサイトにリクエストを送信する方法を紹介します
環境
- macOS 11.7
- node 18.9.0
- quasar 2.8.2
- axios 0.27.2
インストール
Quasarプロジェクト作成時にインストールしなかった場合は別途インストールします
- yarn add axios
(任意)通知の有効化
$q.notify を使うので設定ファイルを編集して通知を有効にします
quasar.config.js というファイルがありその中の framework という設定箇所があるのでそこの plugins と config を変更します
plugins には「Notify」を入力し config には「notify」を追加します
- vim quasar.config.js
return {
framework: {
plugins: [
'Notify'
],
config: {
notify: { /* look at QuasarConfOptions from the API card */ }
}
}
}
※上記は一部抜粋
サンプルコード
- vim src/pages/IndexPage.vue
<template>
<div>{{ data }}</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import axios from 'axios';
import { useQuasar } from 'quasar'
const data = ref('nodata')
const $q = useQuasar()
const api = axios.create({ baseURL: 'https://sample.allowed.cors.site' })
api.get('/')
.then((response) => {
data.value = response.data
})
.catch(() => {
$q.notify({
color: 'negative',
position: 'top',
message: 'Loading failed',
icon: 'report_problem'
})
})
</script>
ちょっと解説
リクエストは axios を使って行います
今回は GET ですが POST なども行えます
今回のサンプルだとページを読み込んだ段階で毎回コールしてしまうのでボタンを押した場合やコンテンツが更新されたタイミングでコールするようにします
アクセスするサイトは当然ですが CORS 対応されたサイトにアクセスしてください
面倒であれば localhost に CORS 対応した適当のアプリを立ち上げても OK です
アクセスに成功すればその結果を data.value に設定します
2022年10月14日金曜日
Quasarでcookiesを扱う方法
概要
q-carousel の使い方をサンプルコード付きで紹介します
今回は q-btn-toggle を組み合わせて使いQuasar で Cookies を扱う方法を紹介します
環境
- macOS 11.7
- node 18.9.0
- quasar 2.8.2
サンプルコード
- vim src/pages/IndexPage.vue
<template>
<q-btn label="Save" @click="saveCookie()" />
<q-btn label="Clear" @click="clearCookie()" />
<div>{{ userName }}</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { Cookies } from 'quasar'
const cookieName = 'my_cookie_name'
const userName = ref(Cookies.get(cookieName))
const saveCookie = () => {
const hasIt = Cookies.has(cookieName)
if (!hasIt) {
Cookies.set(cookieName, 'hawksnowlog')
}
userName.value = Cookies.get(cookieName)
}
const clearCookie = () => {
Cookies.remove(cookieName)
userName.value = Cookies.get(cookieName)
}
</script>
ちょっと解説
書き込む際は Cookies.set を使います
読み込む際は Cookies.get を使います
存在するかのチェックは Cookies.has を使います
なおオプションで期限やドメイン情報などを設定することができます
参考サイト
2022年10月13日木曜日
Quasarでfontawesomeを使う方法
概要
q-carousel の使い方をサンプルコード付きで紹介します
今回は q-btn-toggle を組み合わせて使います
環境
- macOS 11.7
- node 18.9.0
- quasar 2.8.2
quasar.conf.js の編集
extras という配列の項目があるのでそこの「fontawesome-v6」をコメントインします
- vim quasar.config.js
extras: [
// 'ionicons-v4',
// 'mdi-v5',
'fontawesome-v6',
// 'eva-icons',
// 'themify',
// 'line-awesome',
// 'roboto-font-latin-ext', // this or either 'roboto-font', NEVER both!
'roboto-font', // optional, you are not bound to it
'material-icons', // optional, you are not bound to it
],
q-icon で使う
あとは以下のように参照するだけです
<q-icon name="fa-brands fa-gitlab" />
サイズを指定する場合は size プロパティを使えば OK です
<q-icon name="fa-brands fa-gitlab" size="10em"/>
もしくは直接 vue ファイルで import しても OK
<template>
<q-icon :name="fabGitlab" size="10em"/>
</template>
<script setup lang="ts">
import { fabGitlab } from '@quasar/extras/fontawesome-v6';
</script>
最後に
vue 用に font-awesome-icon というタグが用意されているのでそれを使っても良さそうな気がします
参考サイト
2022年10月12日水曜日
QuasarでQTableのexpandを使う方法
概要
特定のカラムの情報だけexpandで表示したい場合などに使えます
expand 後に更にテーブルを使う方法も紹介します
環境
- macOS 11.7
- node 18.9.0
- quasar 2.8.2
サンプルコード
- vim src/pages/IndexPage.vue
<template>
<div class="q-pa-md">
<q-table
title="Treats"
:rows="rows"
:columns="columns"
row-key="name"
>
<template v-slot:header="props">
<q-tr :props="props">
<q-th auto-width />
<q-th
v-for="col in props.cols"
:key="col.name"
:props="props"
>
{{ col.label }}
</q-th>
</q-tr>
</template>
<template v-slot:body="props">
<q-tr :props="props">
<q-td auto-width>
<q-btn size="sm" color="accent" round dense @click="props.expand = !props.expand" :icon="props.expand ? 'remove' : 'add'" />
</q-td>
<q-td
v-for="col in props.cols"
:key="col.name"
:props="props"
>
{{ col.value }}
</q-td>
</q-tr>
<q-tr v-show="props.expand">
<q-td
colspan="100%"
v-for="favorite in props.row.favorites"
:key="favorite.id"
>
<q-chip color="primary" text-color="white" icon="edit">
{{ favorite.color }}
</q-chip>
<q-chip color="red" text-color="white" icon="sports">
{{ favorite.sports }}
</q-chip>
<q-chip color="green" text-color="white" icon="restaurant">
{{ favorite.food}}
</q-chip>
</q-td>
</q-tr>
</template>
</q-table>
</div>
</template>
<script setup lang="ts">
const columns = [
{ name: 'name', required: true, label: 'name', align: 'left', field: 'name', sortable: true },
{ name: 'age', label: 'age', field: 'age', sortable: true },
]
const rows = [
{
id: 1,
name: 'hawk',
age: 10,
favorites: [{'color': 'blue', 'sports': 'soccer', 'food': 'bread'}],
},
{
id: 2,
name: 'snowlog',
age: 20,
favorites: [{'color': 'red', 'sports': 'basketball', 'food': 'rice'}],
},
{
id:3,
name: 'taro',
age: 30,
favorites: [{'color': 'green', 'sports': 'tennis', 'food': 'meat'}],
},
]
</script>
expand 後の更にQTableを使う方法
<template>
<div class="q-pa-md">
<q-table
title="Treats"
:rows="rows"
:columns="columns"
row-key="name"
>
<template v-slot:header="props">
<q-tr :props="props">
<q-th auto-width />
<q-th
v-for="col in props.cols"
:key="col.name"
:props="props"
>
{{ col.label }}
</q-th>
</q-tr>
</template>
<template v-slot:body="props">
<q-tr :props="props">
<q-td auto-width>
<q-btn size="sm" color="accent" round dense @click="props.expand = !props.expand" :icon="props.expand ? 'remove' : 'add'" />
</q-td>
<q-td
v-for="col in props.cols"
:key="col.name"
:props="props"
>
{{ col.value }}
</q-td>
</q-tr>
<q-tr v-show="props.expand">
<q-td
colspan="100%"
>
<q-table
title="Favorites"
:rows="props.row.favorites"
:columns="nextedColumns"
row-key="id"
flat
>
</q-table>
</q-td>
</q-tr>
</template>
</q-table>
</div>
</template>
<script setup lang="ts">
const columns = [
{ name: 'name', required: true, label: 'name', align: 'left', field: 'name', sortable: true },
{ name: 'age', label: 'age', field: 'age', sortable: true },
]
const nextedColums = [
{ name: 'color', label: 'color', field: 'color' },
{ name: 'sports', label: 'sports', field: 'sports' },
{ name: 'food', label: 'food', field: 'food' },
]
const rows = [
{
id: 1,
name: 'hawk',
age: 10,
favorites: [{'color': 'blue', 'sports': 'soccer', 'food': 'bread'}],
},
{
id: 2,
name: 'snowlog',
age: 20,
favorites: [{'color': 'red', 'sports': 'basketball', 'food': 'rice'}],
},
{
id:3,
name: 'taro',
age: 30,
favorites: [{'color': 'green', 'sports': 'tennis', 'food': 'meat'}],
},
]
</script>
ちょっと解説
ポイントは入れ子にするオブジェクト専用のカラム情報を作成する点です
あとは値を渡すときに props.row.favarites という感じでexpandした際にだけ表示するカラムをループで渡してあげればOKです
また flat 属性を指定してあげるとテーブルが入れ子になってもキレイに表示されるのでおすすめです
2022年10月11日火曜日
VueのSFCを使ってコンポーネントを分割する方法
概要
SFC (Single File Components) を使ってコンポーネントを分割する方法を紹介します
また分割したコンポーネントに値を渡す方法も紹介します
環境
- macOS 11.7
- node 18.9.0
- quasar 2.8.2
サンプルコード
- vim src/pages/IndexPage.vue
<template>
<FormTest
:foo="name"
>
</FormTest>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const name = ref('default_value_from_IndexPage.vue');
import FormTest from './FormTest.vue';
</script>
- vim src/pages/FormTest.vue
<template>
<div>
<input type="text" v-model="value" />
<p>Value: {{ value }}</p>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const props = defineProps({
foo: String
})
const value = ref(props.foo)
</script>
ちょっと解説
FormTest.vue を IndexPage.vue で使うことを想定しています
FormTest では setup を使っておりその場合に値を受け取るには defineProps を使います
IndexPage から name というオブジェクトを使って値を渡しており値を渡す場合は :foo="name" という感じでコロンを使ってプロパティを参照し渡したい変数名を指定します
参考サイト
登録:
投稿 (Atom)