ons

バックエンドとフロントエンドを同時開発していくストロングスタイル バックエンドはExpress, フロントエンドはVueで作成。 VueCLIのテンプレが良い感じなのでそのまま採用してちょい足しする。 ディレクトリ構成 root |- /frontend |- /backend frontendはvue init webpackでサクッと作り、backendは自前で。 フロント側 $ vue init webpack frontend $ cd frontend $ yarn $ yarn dev localhost:8080にサーバーが立ち上がります。(webpack-dev-server) バック側 ここの諸々をまずやります。 https://onsen3.blogspot.jp/2017/11/node.html ルートから、 $ mkdir backend $ cd backend $ yarn init $ yarn add -D babel-cli babel-watch babel-preset-env rimraf standard $ yarn add express 次いで.babelrcやら.eslintrcやらの設定をします。 そして適当にExpressサーバーをたてます。 今回はポート3000でたてます。 サーバーが建ったら次の段階へ。 フロントとバックの連携 Vue側でプロキシを設定します。 つまり、localhost:8080にアクセスが来た時にlocalhost:3000に受け流します。 /frontend/config/index.jsを下記のようにいじる。 デフォルトだとproxyTableが空のオブジェクトになっているはず。 /frontend/config/index.js dev : { proxyTable : { '/api' : { target : 'http://localhost:3000' , changeOrigin : true } } } これでフロントのlo...

この記事の続き https://onsen3.blogspot.jp/2017/11/node.html ※Production環境でこのまま運用してはいけない。 導入 セッションを使ってサーバーにデータを一時保存するには express-session を使う。 $ yarn add express-session ドキュメントに書いてあるが、v1.5.0以前はcookie-parserも必要だったようだが、現在では不要である。 Note Since version 1.5.0, the cookie-parser middleware no longer needs to be used for this module to work. index.js import express from 'express' import expressSession from 'express-session' const app = express () const session = expressSession( { secret : 'keyboard cat' , //何か入れる resave : false , saveUninitialized : false , cookie : {} }) app . use ( session ) saveUninitializedはtrueだと未初期化状態のセッションも保存するようになるが、未初期化状態のセッションを保存したい状況が分からないのでfalse。必要になったらtrueで。 cookieの設定はdevelopment段階なら空でも動く。 ただし、resaveをtrueにするならばsaveUninitializedもtrueにしなければならない。 使い方 express-sessionが導入できるとセッション情報をreq.sessionから扱えるようになる。 これは最初は空のオブジェクト{}。 したがって、下記のようにreq.sessionに値を格納するだけ。 app . get ( '/' , ( req ,...