Nuxt.js × Erstellen Sie eine Anwendung im Rails-API-Modus

Was du machen willst

Erstellen Sie Front mit Nuxt.js und API mit Rails Post mit Postman für die erstellte API

• In Nächster Artikel werde ich veröffentlichen, wie Daten in der Datenbank gespeichert werden, indem die Rails-API von der Seite Nuxt.js aus aufgerufen wird.

** Entwicklungsumgebung ** ruby 2.6.5 Rails 6.0.3.4 node v14.7.0 yarn 1.22.4

Machen Sie die Front mit Nuxt.js

--Erstellen Sie eine Front-Anwendung mit dem Namen "App" im Verzeichnis nach der App --Axios wird ausgewählt, um beim Erstellen eines Projekts installiert zu werden

// post-Erstellen Sie ein Verzeichnis namens App
$ mkdir post-app
$ cd post-app

//Erstellen Sie eine Anwendung mit nuxt
$ npx create-nuxt-app app

//Wählen Sie verschiedene Einstellungen
? Project name: (app)
└ Drücken Sie die Eingabetaste

? Programming language: (Use arrow keys)
❯ JavaScript
  TypeScript
└ Wählen Sie JavaScript

? Package manager:
❯ Yarn
  Npm
└ Wählen Sie Garn

? UI framework: (Use arrow keys)
❯ None
  Ant Design Vue
  Bootstrap Vue
  Buefy
  Bulma
  Chakra UI
  Element
  Framevuerk
  iView
  Tachyons
  Tailwind CSS
  Vuesax
  Vuetify.js
└ Wählen Sie Keine

? Nuxt.js modules:
❯◉ Axios
 ◯ Progressive Web App (PWA)
 ◯ Content
└ Wählen Sie Axios (drücken Sie die Leertaste).

? Linting tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◯ ESLint
 ◯ Prettier
 ◯ Lint staged files
 ◯ StyleLint
└ Drücken Sie die Eingabetaste

? Testing framework: (Use arrow keys)
❯ None
  Jest
  AVA
  WebdriverIO
└ Drücken Sie die Eingabetaste

? Rendering mode:
  Universal (SSR / SSG)
❯ Single Page App
└ Wählen Sie Single Page App

? Deployment target: (Use arrow keys)
❯ Server (Node.js hosting)
  Static (Static/JAMStack hosting)
└ Wählen Sie Server

? Development tools:
❯◉ jsconfig.json (Recommended for VS Code if you're not using typescript)
 ◯ Semantic Pull Requests
└ jsconfig.Wählen Sie json (drücken Sie die Leertaste).

Ändern Sie die Nuxt-Portnummer in 8000

Offizielle Seite

Zitiert aus dem offiziellen ▼

js:app/nuxt.config.js

export default {
  server: {
    port: 8000, //Standard: 3000
    host: '0.0.0.0' //Standard: localhost
  }
  //Andere Einstellungen
}

** Aktuelle Beschreibung ▼ **

js:app/nuxt.config.js

server: {
  port: 8000,
},

Starten Sie einen lokalen Host

$ cd app
$ yarn dev

//Wenn Folgendes angezeigt wird, wird http://localhost:8000/Zugänglich bei

   │   Nuxt.js @ v2.14.7                   │
   │                                       │
   │   ▸ Environment: development          │
   │   ▸ Rendering:   client-side          │
   │   ▸ Target:      server               │
   │                                       │
   │   Listening: http://localhost:8000/

Erstellen Sie einen API-Server mit Rails

//Im API-Modus erstellt DB Rails-Anwendungen mit MySQL
$ rails new api --api -d mysql

//Erstelle eine DB
$ rails db:create
Created database 'api_development'
Created database 'api_test'

Modell und Controller erstellen

//Erstellen Sie ein Post-Modell
$ rails g model Post title:string body:text

//Wandern
$ rails db:migrate

//Erstellen Sie einen Posts-Controller im Verzeichnis v1 im API-Verzeichnis
//Überspringen Sie die automatische Generierung des Testverzeichnisses
$ rails g controller api::v1::posts --skip-test-framework

Routing-Einstellungen

--Erstellen Sie ein Routing mit dem Namen "/ api / v1 / posts"

api/config/routes.rb

Rails.application.routes.draw do
  namespace :api do
    namespace :v1 do
      resources :posts
    end
  end
end

Richten Sie PostsController ein

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

Versuchen Sie, mit Postman zu posten

Postman Referenzartikel zur Verwendung

• OK, wenn es wie folgt aussieht

Überprüfen Sie, ob Sie in der Rails-Konsole posten können

//Starten Sie die Konsole
$ rails c

//Überprüfen Sie den Beitrag
irb(main):001:0> Post.first

Es ist in Ordnung, wenn derselbe Inhalt wie bei Postman oben angezeigt wird

• • Implementiere den Prozess des Posten von Daten von der Seite Nuxt.js in einem anderen Artikel *