create-react-app相关配置

1.命令行安装create-react-app

全局安装:yarn global add create-react-app

2.创建创建一个空项目

create-react-app appname ,这里注意应用名字不能包含大写字母

3.进入项目,会发现项目文件很少,这是为什么呢,因为默认会不显示细致的目录文件,运行以下命令可以打开隐藏的部分,便于把控项目

yarn run eject,现在就可以进行开发了,现在有一个需求是利用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写法,所以就使用es5的写法,访问127.0.0.1:9999/,即可看到hello world,http服务开启成功,

5.链接mongodb数据库,实现数据的增删改查

这里需要安装一个依赖mongoose,来实现nodejs和mongodb的链接,yarn add mongoose,依赖安装成功之后,引入mongoose模块,链接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.链接一个集合(数据库的概念),并定义文档模型(表的概念)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.对数据库进行操作,增删改查,这里就不多加赘述,可以点击下这里,用法很灵活,多样化

你可能感兴趣的:(create-react-app相关配置)