create-react-app関連構成

3218 ワード

1.コマンドラインインストールcreate-react-app
グローバルインストール:yarn global add create-react-app2.空のプロジェクトの作成create-react-app appname、ここではアプリケーション名に大文字を含めることはできません.
3.プロジェクトに入ると、プロジェクトファイルが少ないことがわかります.なぜでしょうか.デフォルトでは細かいディレクトリファイルが表示されないので、以下のコマンドを実行すると隠した部分を開くことができ、プロジェクトをコントロールしやすいからです.yarn run eject、今すぐ开発することができて、今1つの需要はnodejsリンクmongodbデータベースを利用して、expressはバックグラウンドのフレームワークをして、前后の开発を行って、相応の环境を筑く必要があって、まずmongodbの公式サイトに行って、mongodbをダウンロードしてインストールします
4.インストールexpress依存、yarn add express、インストール完了待ち
新しいserver.js,expressを利用してhtttpサービスを作成し,簡単なルーティング制御を実現する
var express = require('express');
var app = express();
app.get('/',function(req,res){
    res.send('

hello world

') }) app.listen('9999',function(err){ if(!err){ console.log('server has been start at port 9999') }else{ console.log(err) } })

ここでexpressはimportの書き方をしばらくサポートしていないので、es 5の書き方を使って127.0.0.1:9999/にアクセスすると、hello world、httpサービスがオープンに成功したことがわかります.
5.mongodbデータベースをリンクし、データの削除・変更を実現する
ここでは、nodejsとmongodbのリンクを実現するためにmongoseに依存するリンクをインストールする必要があり、yarn add mongoose、依存インストールに成功した後、mongoseモジュールを導入し、nodejsとmongodbをリンクし、serverを変更する.jsコードは以下の通りです.
const express = require('express');
const mongoose = require('mongoose');
mongoose.connect('mongodb://127.0.0.1:27017/immoc');
mongoose.connection.on('connected',function(err){
    if(!err){
        console.log('mongodb connected')
    }else{
        console.log(err)
    }
})
const app = express();
app.get('/',function(req,res){
    res.send('

hello world

') }) app.listen('9999',function(err){ if(!err){ console.log('server has been start at port 9999') }else{ console.log(err) } })

コンソールの出力が正しく、接続が正常です
6.1つの集合(データベースの概念)をリンクし、文書モデル(表の概念)modelを定義し、次にデータ構造(フィールド)Schemaを定義する
const express = require('express');
const mongoose = require('mongoose');
mongoose.connect('mongodb://127.0.0.1:27017/immoc');
mongoose.connection.on('connected',function(err){
    if(!err){
        console.log('mongodb connected')
    }else{
        console.log(err)
    }
})

const User =  mongoose.model('user',new mongoose.Schema({
    name : {type:String,require:true},
    age : {type:Number,require:true}
}))
User.create({
    name:'coldbreath',
    age:18
},function(err,doc){
    if(!err){
        console.log(doc)
    }else{
        console.log(err)
    }
})

const app = express();
app.get('/',function(req,res){
    res.send('

hello world

') }) app.get('/data',function(req,res){ User.find({},function(err,doc){ if(!err){ res.json(doc) }else{ console.log(err) } }) }) app.listen('9999',function(err){ if(!err){ console.log('server has been start at port 9999') }else{ console.log(err) } })

7.データベースに対して操作を行って、添削して調べて、ここは余計な説明を加えないで、ここをクリックすることができて、使い方はとても柔軟で、多様化します