- 投稿日:2021-02-25T22:31:30+09:00
vue-good-tableでfilter付きの表を作成する方法
検索とフィルタとソートが揃った表が必要になったのでメモ
index.html<html> <head> <title>hostlist</title> <script type="text/javascript" src="./vue.js"></script> <script type="text/javascript" src="./vue-good-table.min.js"></script> <link rel="stylesheet" type="text/css" href="./vue-good-table.min.css"> </head> <body> <div id="app"> <vue-good-table :columns="columns" :rows="rows" :fixed-header="true" :line-numbers="true" :group-options="{enabled: true}" :search-options="{enabled: true, trigger: 'enter', skipDiacritics: true}" :pagination-options="{enabled: true, mode: 'records', perPage: 20}" styleClass="vgt-table condensed" max-height="800px" /> <template slot="table-row" slot-scope="props"> <span v-if="props.column.field == 'host'"> <a :href="`${props.row.type}://${props.row.ip}`"> {{props.row.host}} </a> </span> <span v-else> {{props.formattedRow[props.column.field]}} </span> </template> </vue-good-table> </div> <script type="text/javascript" src="./table.js"></script> </body> </html>table.jsvar app = new Vue({ el: '#app', data:{ columns: [ { label: 'Hostname', field: 'host', filterOptions: {enabled: true} }, { label: 'Type', field: 'type', filterOptions: {enabled: true} }, { label: 'IP', field: 'ip', filterOptions: {enabled: true} }, { label: 'ID/PW', field: 'idpw', filterOptions: {enabled: true} }, { label: '備考', field: 'note', filterOptions: {enabled: true} }, ], rows: [ { mode: 'span', label: 'VOD service', html: false, children: [ { host:"vod000-sv01", type:"ssh", ip:"10.0.0.1", idpw:"hoge/hoge", note:"streeming server"}, { host:"vod000-sv02", type:"ssh", ip:"10.0.0.2", idpw:"hoge/hoge", note:"streeming server"}, { host:"vod000-sv03", type:"telnet", ip:"10.0.0.3", idpw:"hoge/hoge", note:"streeming server"}, { host:"vod000-sv04", type:"http", ip:"10.0.0.4", idpw:"hoge/hoge", note:"streeming server"}, ] }, { mode: 'span', label: 'Strage Service', html: false, children: [ { host:"str000-str05", type:"telnet", ip:"10.0.0.1", idpw:"hoge/hoge", note:"strage server"}, { host:"str000-str06", type:"http", ip:"10.0.0.2", idpw:"hoge/hoge", note:"strage server"}, { host:"db000-str07", type:"https", ip:"10.0.0.3", idpw:"hoge/hoge", note:"DB server"}, { host:"db000-str08", type:"ssh", ip:"10.0.0.4", idpw:"hoge/hoge", note:"DB server"}, ] }, ], searchOptions: { enabled: true, placeholder: '機器を検索します', } } });table.csstable.vgt-table { font-size: 10px; border-collapse: collapse; background-color: #fff; width: 100%; max-width: 100%; table-layout: auto; border: 1px solid #dcdfe6; } .vgt-wrap { width: 80%; margin: 0 auto; } .vgt-wrap__footer { font-size: 10px; padding-top: 8px; } .vgt-wrap__footer.footer__row-count__label { font-size: 10; } .vgt-wrap__footer .footer__row-count__select { width: auto; font-size: 10pt; margin-left: 8px; padding: 3px; -webkit-appearance: listbox; -moz-appearance: listbox; } form { display: block; margin-top: 0em; margin-block-end: 0em; }
- 投稿日:2021-02-25T21:11:22+09:00
【Vue.js】axiosを使ってrailsで作成したAPIを呼び出す
async mounted() { const res = await this.$axios.$get(`/api/v1/companies/${this.$route.params.id}`) this.form.admin_email = res.data.email this.form.admin_first_name = res.data.first_name this.form.admin_last_name = res.data.last_name this.form.admin_kind = res.data.role },一部抜粋ではあるが、axiosでapiのデータを表示させたい時の記述。
${this.$route.params.id}
これが、nuxt.jsに関係する記述。
これによって、idの値を受け取り、それに応じたapiを良いb出すことができる。
- 投稿日:2021-02-25T10:51:41+09:00
Vue.jsの基本的な使い方について 2021/1/27
今日やること
vue.jsを使うにあたり必要なプラグインを知り、基本的な文法を使ってフロントエンド側でログインボタンを作るvue.jsのプラグインをインストール
veturをインストールしよう!
vue cliで新しいプロジェクトを作っただけではvscode上でうまく
.vue
ファイルを扱うことができないので、拡張機能のVeturを導入します。コンポーネントの作成
先ほぼの工程でvscode上でvue.jsファイルを扱えるようになったので次は新しいコンポーネントを作ってその中にfacebookのログインボタン機能を作っていく。
FBButton.vue<template> <button>Login with Facebook</button> </template> <script> export default { name: 'FBButton' } </script> <style> </style>ここではfacebookのログインボタンを作ったので次に
App.vue
に反映させていく。基本的に他のファイルでコンポーネントを追加しても
App.vue
に反映を書かなければブラウザ上には表示されない。ここで、Vueアプリケーション雛形を確認しておこう。
FBButton.vue
があるのはApp.vue
の下の部分である。App.vue<template> <div> <FBButton /> </div> </template> <script> export default { name: 'App' components: { FBButton } } </script> <style> </style>するとこのようなページができる
シンプルだが悪くないだろうw
v-onディレクティブ
次にログインボタンをクリックすると実行される処理について書いていこう。
ここで躓きやすいポイントは
v-on
(ボタンをクリックして関数を実行する)について理解しているかどうか。イベント
Webアプリケーションにおいて(つまりDOM要素において)、ボタンをクリックしたり、マウスオーバーによる一連の挙動。そして、それら様々なイベントに対して発動させる処理のことを(つまり関数)を「イベントハンドラ」を呼ぶ
Vue.jsにおいて、イベントによってイベントハンドラを実行させるには、v-onディレクティブを利用します。
つまり今回の場合、ユーザーがfacebookボタンをクリックする→イベントが発生する→何らかの処理をするという流れになる。
FBButton.vue<template> //クリックのイベントを指定 <button @click="open">Login with Facebook</button> </template> <script> export default { name: 'FBButton', methods: { // openを定義 open () { document.location.href="URL" } } } </script> <style> </style>v-onディレクティブにクリック(click)のイベントを指定し、openという名前のイベントハンドラを設定しています。v-onは省略して下記のように記述することができます。
JavaScript
ボタンまた、methodsオプションにて、イベントハンドラであるopenを定義しています。ちなみに、
document.location.href
というのはJavaScriptでURLを遷移させる方法です。今日はここまで
- 投稿日:2021-02-25T08:26:53+09:00
Flask + Vue + MySQL 構成のDocker環境構築方法 メモ
- Vue.js(フロントエンド)、Flask(バックエンド)、MySQL(DB)構成のアプリをDockerで環境構築したので、構築方法を備忘録としてメモしておく。
全体フォルダ構成
your_app --- fe --- app # プロジェクトフォルダ | L_ Dockerfile | L_ be --- app # プロジェクトフォルダ | L_ Dockerfile | L_ requirements.txt # 依存パッケージリスト L_ db --- data # DBデータマウント用フォルダ | L_ my.cnf # 設定ファイル L_ docker-compose.ymldocker-compose.yml
- フロントエンド
- 8080ポートを使用する。
- プロジェクトフォルダ
app
をバインドマウントする。node_modules
をボリュームマウントすることで、ビルド速度低下を防ぐ。- バックエンド
- 5000ポートを使用する。
- プロジェクトフォルダ
app
をバインドマウントする。- データベース
- MySQL 5.7イメージを使用する。
- 3307ポートを使用する。
command
でポートを明示的に指定する必要あり。data
フォルダをバインドマウントする。version: "3" services: # フロントエンド fe: container_name: fe build: ./fe volumes: - ./fe/app:/app - node_modules_volume:/app/node_modules ports: - "8080:8080" links: - be # バックエンド be: container_name: be build: ./be volumes: - ./be/app:/app ports: - "5000:5000" command: flask run --host 0.0.0.0 --port 5000 links: - db # データベース db: image: mysql:5.7 container_name: db environment: MYSQL_ROOT_PASSWORD: rootpass MYSQL_DATABASE: sample_db MYSQL_USER: mysqluser MYSQL_PASSWORD: mysqlpass volumes: - ./db/data:/var/lib/mysql - ./db/my.cnf:/etc/mysql/conf.d/my.cnf ports: - 3307:3307 command: --port 3307 volumes: node_modules_volume:フロントエンド
node.jsのベースイメージからフロントエンドアプリ(Vue.js)用コンテナを作成する。
Dockerfile
# ベースイメージ FROM node:13.10.1-alpine3.11 WORKDIR /app # 依存関係のインストール COPY ./app/package*.json ./ RUN npm install # プロジェクトフォルダをカレントディレクトリ(appフォルダ)にコピー COPY ./app . EXPOSE 8080 CMD ["npm", "run", "serve"]
app
フォルダ
vue create app
コマンドで作成したプロジェクト一式を配置する。バックエンド
- python 3.7ベースイメージからバックエンドアプリ(Flask)用コンテナを作成する。
Dockerfile
FROM python:3.7 RUN mkdir /app ADD requirements.txt /app ENV PYTHONUNBUFFERED 1 EXPOSE 5000 WORKDIR /app RUN pip3 install -r requirements.txt
requirements.txt
- Flask/MySQL用パッケージを記述する。
SQLAlchemy Flask-SQLAlchemy Flask-Cors marshmallow marshmallow-sqlalchemy flask-marshmallow pymysql
app
フォルダ
- Flaskプロジェクトフォルダ一式を配置する。
データベース
コンテナ設定は、
docker-compose
のみに記述する。
data
フォルダ
- ホスト側マウント用フォルダ。
my.cnf
- 設定ファイル。
- 文字コードのみ指定する。
[mysqld] character-set-server=utf8mb4 collation-server=utf8mb4_unicode_ci [client] default-character-set=utf8mb4参考情報