Nuxt.jsプロジェクトでRestAPIも実装する
Nuxt.jsプロジェクト作成
ここではexpressをインストールしない
> npx create-nuxt-app nuxt-sample
> Generating Nuxt.js project in C:\nuxt-sample
Express をプロジェクトへ追加
npm install --save express
npm install --save body-parser
nuxt.config.jsの変更
//add for API
const bodyParser = require('body-parser')
module.exports = {
mode: 'universal',
/**
* add for API
*/
serverMiddleware:[
bodyParser.json(),
'~/api'
],
APIの作成
/api/index.js
node.js
const express = require("express");
const router = express.Router();
const app = express()
router.use((req, res, next) => {
Object.setPrototypeOf(req, app.request)
Object.setPrototypeOf(res, app.response)
req.res = res
res.req = req
next()
})
router.get("/test/:id", (req, res) => {
console.log("--test get");
console.log("--id " ,req.params.id)
res.status(200).json({message:`test_id = ${req.params.id}`});
});
module.exports = {
path: '/api',
handler: router
}
動作確認
>npm run dev
テスト・開発用Expressを用意する
/api/apptest.js
> npm install cors --save
node.js
const {path,handler} = require('./index')
const bodyParser = require("body-parser");
const express = require("express");
const cors = require("cors")
const app = express()
var corsOptions = {exposedHeaders: 'x-auth'}
app.use(cors(corsOptions));
app.use(bodyParser.json());
app.use(path,handler);
port="3000"
app.listen(port,()=>{
console.log(`Started up apptest port:${port}`);
});
//for test {path,app}
module.exports = { path,app };
動作確認
> node api/apptest
