create-react-app関連構成
3218 ワード
1.コマンドラインインストールcreate-react-app
グローバルインストール:
3.プロジェクトに入ると、プロジェクトファイルが少ないことがわかります.なぜでしょうか.デフォルトでは細かいディレクトリファイルが表示されないので、以下のコマンドを実行すると隠した部分を開くことができ、プロジェクトをコントロールしやすいからです.
4.インストールexpress依存、
新しいserver.js,expressを利用してhtttpサービスを作成し,簡単なルーティング制御を実現する
ここでexpressはimportの書き方をしばらくサポートしていないので、es 5の書き方を使って127.0.0.1:9999/にアクセスすると、hello world、httpサービスがオープンに成功したことがわかります.
5.mongodbデータベースをリンクし、データの削除・変更を実現する
ここでは、nodejsとmongodbのリンクを実現するためにmongoseに依存するリンクをインストールする必要があり、
コンソールの出力が正しく、接続が正常です
6.1つの集合(データベースの概念)をリンクし、文書モデル(表の概念)
7.データベースに対して操作を行って、添削して調べて、ここは余計な説明を加えないで、ここをクリックすることができて、使い方はとても柔軟で、多様化します
グローバルインストール:
yarn global add create-react-app
2.空のプロジェクトの作成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.データベースに対して操作を行って、添削して調べて、ここは余計な説明を加えないで、ここをクリックすることができて、使い方はとても柔軟で、多様化します