美文网首页
create-react-app相关配置

create-react-app相关配置

作者: 账号未想好 | 来源:发表于2017-10-28 21:24 被阅读0次

    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('<h1>hello world</h1>')
    })
    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('<h1>hello world</h1>')
    })
    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('<h1>hello world</h1>')
    })
    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相关配置

          本文链接:https://www.haomeiwen.com/subject/dnelpxtx.html