Create front with Nuxt.js and API with Rails Post with Postman for the created API
** Development environment ** ruby 2.6.5 Rails 6.0.3.4 node v14.7.0 yarn 1.22.4
--Create a front application with the name ʻapp` in the directory post-app --Axios is selected to be installed when creating a project
// post-Create a directory called app
$ mkdir post-app
$ cd post-app
//Create an application with nuxt
$ npx create-nuxt-app app
//Select various settings
? Project name: (app)
└ Press Enter button as it is
? Programming language: (Use arrow keys)
❯ JavaScript
TypeScript
└ Select JavaScript
? Package manager:
❯ Yarn
Npm
└ Select Yarn
? UI framework: (Use arrow keys)
❯ None
Ant Design Vue
Bootstrap Vue
Buefy
Bulma
Chakra UI
Element
Framevuerk
iView
Tachyons
Tailwind CSS
Vuesax
Vuetify.js
└ Select None
? Nuxt.js modules:
❯◉ Axios
◯ Progressive Web App (PWA)
◯ Content
└ Select Axios (press the spacebar)
? Linting tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◯ ESLint
◯ Prettier
◯ Lint staged files
◯ StyleLint
└ Press Enter button as it is
? Testing framework: (Use arrow keys)
❯ None
Jest
AVA
WebdriverIO
└ Press Enter button as it is
? Rendering mode:
Universal (SSR / SSG)
❯ Single Page App
└ Select Single Page App
? Deployment target: (Use arrow keys)
❯ Server (Node.js hosting)
Static (Static/JAMStack hosting)
└ Select Server
? Development tools:
❯◉ jsconfig.json (Recommended for VS Code if you're not using typescript)
◯ Semantic Pull Requests
└ jsconfig.Select json (press spacebar)
Quoted from the official ▼
js:app/nuxt.config.js
export default {
server: {
port: 8000, //Default: 3000
host: '0.0.0.0' //Default: localhost
}
//Other settings
}
** Actual description ▼ **
js:app/nuxt.config.js
server: {
port: 8000,
},
$ cd app
$ yarn dev
//When the following is displayed, http://localhost:8000/Accessable at
│ Nuxt.js @ v2.14.7 │
│ │
│ ▸ Environment: development │
│ ▸ Rendering: client-side │
│ ▸ Target: server │
│ │
│ Listening: http://localhost:8000/
//API mode, DB makes rails application with MySQL
$ rails new api --api -d mysql
//Make a DB
$ rails db:create
Created database 'api_development'
Created database 'api_test'
//Create a Post Model
$ rails g model Post title:string body:text
//migrate
$ rails db:migrate
//Create a posts controller in the v1 directory inside the api directory
//Skip the automatic generation of the test directory
$ rails g controller api::v1::posts --skip-test-framework
--Create a routing called / api / v1 / posts
api/config/routes.rb
Rails.application.routes.draw do
namespace :api do
namespace :v1 do
resources :posts
end
end
end
api/app/controllers/api/v1/posts_controller.rb
class Api::V1::PostsController < ApplicationController
before_action :set_post, only: [:show, :update, :destroy]
def index
posts = Post.order(created_at: :desc)
render json: { status: 'SUCCESS', message: 'Loaded posts', data: posts }
end
def show
render json: { status: 'SUCCESS', message: 'Loaded the post', data: @post }
end
def create
post = Post.new(post_params)
if post.save
render json: { status: 'SUCCESS', data: post }
else
render json: { status: 'ERROR', data: post.errors }
end
end
def destroy
@post.destroy
render json: { status: 'SUCCESS', message: 'Deleted the post', data: @post }
end
def update
if @post.update(post_params)
render json: { status: 'SUCCESS', message: 'Updated the post', data: @post }
else
render json: { status: 'SUCCESS', message: 'Not updated', data: @post.errors }
end
end
private
def set_post
@post = Post.find(params[:id])
end
def post_params
params.permit(:title, :body)
end
end
Postman Reference article on how to use --OK if it looks like the following
//Launch the console
$ rails c
//Check the post
irb(main):001:0> Post.first
It is OK if the same content as Postman is displayed above
Recommended Posts