2022-01-01から1年間の記事一覧
DSM上のApacheでPythonを動かすためにこれまでいろいろ試してきました。 freelancer.hatenablog.jp 仕事関連でPHPで作成されたCMS等の検証を行うことになったのでPHPも動かせるように設定してみました。 Web Stationの設定を確認 Web Stationの設定PHPは7.0…
5年ほど使用しているDS216jのDSMを7.1に更新したことをきっかけにDSM上でWebアプリを稼働させようと思って試したことの記録です。 必要なパッケージをパッケージセンターで検索してインストールしました。 pythonのライブラリについてはSSHサービスを有効に…
共通コンポーネントでデータを取得して表示したい 共通コンポーネントでデータを取得したいので下記のように実装 /pages/sample_page.vue <template> <Sample/> </template> /components/sample.vue <template> <div> <b>{{data.data1}}</b><br> <b>{{data.data2}}</b> </div> </template> <script> export default { async asyncData(context) { const…
ヘッダ部やフッタ部をコンポーネント化 前回レイアウトディレクトリにレイアウト用のファイルを追加しレイアウトを切り替えられるようにしました。freelancer.hatenablog.jpヘッダ部やフッタ部はcomponents直下に配置してコンポーネント化したほうがよさそう…
レイアウトディレクトリ ページコンポーネントに各ページで共通になる部分(ヘッダ部、フッタ部)を記述するのが面倒。 Nuxtにはレイアウト作成の機能があり各ページに共通のレイアウト適用することが可能。 layoutsディレクトリにdefault.vueを作成 layoutsデ…
動的ルーティング ある商品の詳細ページのようなページの構成は同じで商品毎に表示内容が変わるようなページを作りたい場合、Nuxt.jsではどうすればいいのか調べてみました。 url構成 /商品カテゴリー/商品コード カテゴリー1に属する商品コードAのURL /cate…
出力対象 出力対象 /pages/index.vue <template> <div> <ul> <li>{{ text }}</li> <li>{{ data.data1 }}</li> <li>{{ data.data2 }}</li> </ul> </div> </template> <script> export default { name: 'IndexPage', async asyncData(context) { const data = await context.$axios.$get('http://localhost:3000/nuxt_test.json') ret…
dataメソッドを追加する dataメソッドを追加してjson型のデータを返すようにする。 <template>内のデータを表示したい個所に{{key}}を追加する。 /pages/index.vue <template> <div>{{ text }}</div> </template> <script> export default { name: 'IndexPage', data() { return{ text: "テスト" } } } </script> http://</template>…
pagesディレクトリにファイルを追加 pagesディレクトリにファイルを追加画面のビューはpagesディレクトリに保存すればいいのでsample.vueをpages直下に追加。 /pages/sample.vue <b>サンプル</b> サーバーを起動サーバーを起動してhttp://localhost:3000/sampleにア…
初期画面のソース 初期画面のソースインストール後の初期画面の構成を確認してみました。 ヘッダ部 <html data-n-head-ssr lang="en" data-n-head="%7B%22lang%22:%7B%22ssr%22:%22jp%22%7D%7D"> <head > <title>sample</title> <meta data-n-head="ssr" charset="utf-8"> </meta></head></html>
Nuxt.jsを試す目的 SSRの動きがいまいち理解できないので動きをを確認したい。 個人的に開発中のシステムがあるので良さそうなら導入したい。 エディタ Visual Studio Code インストール npxコマンドを使うのでNode.jsのインストールが必要。 既にNode.jsは…
bottle + pythonでCSVファイルをアップロードした時にはまった時のメモです。index.pyを下記の用に実装しました。 CSVをアップロードしてサーバ上には保存せずバイトデータを文字列に変換して画面に表示。 最終的にCSVはexcelで保存したファイルをアップロー…
