React.js学习笔记(18) mongodb + (mongoose) + (用装饰器优化connect react-redux)

(一) mongodb数据库

中文官网http://www.mongoing.com/docs/

(1) 配置环境变量

控制面板-高级系统设置-高级-环境变量(系统变量)-path-编辑-编辑文本 - ( 分号+路径 )
路径指的是bin文件夹路径 C:\Program Files\MongoDB\Server\3.6\bin

(2) 相关命令

mongo 使用数据库
mongod 开机
mongoimport 导入数据

(3) 开机命令
mongod --dbpath + 文件夹路径


// 例如: mongod --dbpath c:\mongo

// --dbpath就是选择数据库文档所在文件夹
(4) 使用数据库

1)再开一个cmd编辑器,保持开机的cmd不要改动
2)执行mongo命令

(5) mongo数据库语法
  • show dbs: 列出所有数据库
  • use: 使用某个数据库
  • use: 新建数据库
  • db.dropDatabase() : 删除当前所在的数据库
  • db.集合.drop():删除集合
  • db: 查看当前在哪个数据库里
  • show collections 查看所有集合----------注意不能创建集合,只能给集合添加数据,那么,给未知的集合添加数据,就是新建集合
  • db.未知的集合名字------------那么这个集合将自动创建
  • db.集合名字.insert({...}) : 向集合中插入数据
  • db.集合名字.find() : 查找集合中的语句
  • cls清屏------------cmd命令

(1)向集合中插入数据 (未知的集合就是新建)
db.student.insert({"name":"wu", "age":20, "sax":"man"})
// student 是集合
// 集合中存储着很多json
// db.未知的集合名字------------那么这个集合将自动创建



(2)查看集合中的语句
db.student.find()


(6) mongoimport --db test --collection restaurants --drop --file primer-dataset.json

注意:使用mongoimport时,不能mogo链接数据库,不能先进入一个数据库,一般都在刚打开cmd时使用

mongoimport --db test --collection restaurants --drop --file primer-dataset.json


// mongoimport 导入数据
// --db test --collection restaurants    导入到test数据库的restaurants集合中
// --drop把已经存在的数据清除掉
// --file 被导入进来的文件

(7)增删改查数据

  • db.集合.find() 查看数据
  • db.集合.insert() 插入数据
  • db.集合.remove() 删除数据
  • db.集合.updata() 更新操作修改 集合 collection 中已经存在的 文档 documents。
数据:
{ 
"_id" : ObjectId("5a73e707a2af50f805fbb8bd"), 
"name" : "wang" 
}
{ 
"_id" : ObjectId("5a73e7dfa2af50f805fbb8be"), 
"name" : "xiaowang", 
"score" : { "shuxue" : "80" }
 }
{ "_id" : ObjectId("5a73e9a7a2af50f805fbb8bf"), 
"name" : "zhanghai",
 "score" : { "shuxue" : 60 }
 }





精确匹配:db.student2.find({"score.shuxue":"80"})
多个条件:db.student2.find({"score.shuxue":"80","name":"xiaowang"})



 查找数学成绩大于60的数据: db.student2.find({"score.shuxue": {$gt: 60}})
// gt 是 greater than 的缩写 (大于)



查找数学成绩是60或90的数据: 
db.student2.find({$or:[{"score.shuxue":90},{"score.shuxue":60}]})



查找所有数学成绩正序排: 
db.student2.find().sort({"score.shuxue":-1})
-1表示降序
1 表示升序



------------------------------------------------------
修改数据

找到name是xiaowang的数据,把数学成绩修改为40
db.student2.update({"name":"xiaowang"},{$set:{"score.shuxue": 40}})



!!!!!!!
找到shuxue成绩是60的数据,添加age为27
db.student2.update({"score.shuxue":60},{$set: {"age": 27}})



!!!!!!修改多条数据
!!!!!!将所有年龄是27的数据,中的shuxue成绩改为800
db.student2.update({"age":27},{$set: {"score.shuxue": 800}},{multi:true})
// multiply相乘,增加的意思
// modified修正



!!!!!!修改所有数据
!!!!!!查询条件为空
db.student2.update({},{$set: {"score.shuxue": 800}},{multi:true})



!!!!!直接替换
db.student2.update({"age":27},{"score.shuxue": 800})
会直接得到数据 {"score.shuxue": 800})




------------------------------------------------------
删除数据



!!!!!删除满足条件的所有数据
db.student2.remove({"score.shuxue": 40})

(8) 如何真的想把数据库创建成功,一定要插入至少一条数据。但数据库中不能直接插入数据,只能往集合中插入数据,所以新建数据库后还要新建集合并插入数据(db.集合.insert({...}))
(9) 以NS结尾的文件就是数据库,真是可见,可用u盘等考取

(10)MongoDB设置成Windows服务,这个操作就是为了方便,每次开机MongoDB就自动启动了。

http://blog.csdn.net/ztx114/article/details/78326573
https://jingyan.baidu.com/article/d5c4b52bef7268da560dc5f8.html

  • 新建文件夹db (用来存放数据库文件)
  • 新建文件夹log
  • 在log文件夹中新建mongodb.log (主要用来打印日志)
  • 新建mongo.config配置文件,在文件中写入 (配置文件)
 
#数据库路径  
dbpath=c:\mongo\db 
#日志输出文件路径  
logpath=c:\mongo\log\mongodb.log 
#错误日志采用追加模式  
logappend=true  
#启用日志文件,默认启用  
journal=true  
#这个选项可以过滤掉一些无用的日志信息,若需要调试使用请设置为false  
quiet=true  
#端口号 默认为27017  
port=27017  

  • 用管理员身份打开cmd命令行 (我这里已经配置成环境变量了)
mongod --config c:\mongo\mongo.config --install --serviceName "MongoDB"
  • 强制删除服务:
    sc delete 服务名(如果服务名中间有空格,就需要前后加引号)










(二) mongoose

Mongoose是在node.js环境下对mongodb进行便捷操作的对象模型工具,因此,要使用mongoose,则必须安装node.js环境以及mongodb数据库

安装: cnpm install mongoose -S
使用:


const express = require('express');
const mongoose = require('mongoose');  // 引入mongoose

// 链接数据库,并且使用student这个数据库
const DB_URL = 'mongodb://localhost:27017/student'
mongoose.connect(DB_URL);   // 链接数据库student

//可以不要下面的语句,该语句作用是打印链接成功
mongoose.connection.on('connected', function() {
    console.log('mongo connect success')
})


// 类似于mysql的表, mongo里有文档,字段的概念
const User = mongoose.model("user", new mongoose.Schema({
    name:{type:String, require:true},
    age:{type:Number, require:true}
}))


// 新建数据
User.create({
    name: 'xiaoming',
    age:18
}, function(err, doc) {
    if(!err) {
        console.log(doc)
    } else {
        console.log(err)
    }
})

//删除数据
User.remove({name: 18}, function(err,doc){
    console.log(doc)
})

// 更新数据
User.update({name:'xiaoming'},{$set: {'age':26}},function(err, doc){
    console.log(doc)
})

// 查找数据,得到一个数组
User.find({name:'xiaoming'}, function(err,doc){
    console.log(doc)
})

// 查找一条数据,得到一个对象
User.findOne({name:'xiaoming'}, function(err,doc){
    console.log(doc)
})



const app = express();

app.get('/', function(req,res) {
    User.find({}, function(err, doc){
        res.json(doc)
    })
})


app.listen(1234, function() {
    console.log('listen 1234 port')
})

mongoose提供的api

(1) mongoose.connect

connect 用于创建数据库连接

  • mongoose.connect(url(s), [options], [callback])
mongoose.connect(url(s), [options], [callback])
//url(s):数据库地址,可以是多个,以`,`隔开
//options:可选,配置参数
//callback:可选,回调
mongoose.connect('mongodb://数据库地址(包括端口号)/数据库名称')


指定用户连接
mongoose.connect('mongodb://用户名:密码@127.0.0.1:27017/数据库名称')


连接多个数据库
如果你的app中要连接多个数据库,只需要设置多个url以,隔开,同时设置mongos为true
mongoose.connect('urlA,urlB,...', {
   mongos : true 
})

(2) schema

Mongoose的一切都始于一个Schema。每个schema映射到MongoDB的集合(collection)和定义该集合(collection)中的文档的形式。

  • schema是图表的意思
  • Schema映射collection
  • Schema定义collection中的文档形式
  • Schemas不仅定义了文档和属性的结构,还定义了文档实例方法、静态模型方法、复合索引和文档被称为中间件的生命周期钩子。
var mongoose = require('mongoose');
var Schema = mongoose.Schema;

var blogSchema = new Schema({
  title:  String,
  author: String,
  body:   String,
  comments: [{ body: String, date: Date }],
  date: { type: Date, default: Date.now },
  hidden: Boolean,
  meta: {
    votes: Number,
    favs:  Number
  }
});

允许使用的SchemaTypes:
String
Number
Date
Buffer
Boolean
Mixed
ObjectId
Array

(3) model

使用我们的schema定义,我们需要将我们的new mogoose.Schema({...})转成我们可以用的模型。为此,我们通过mongoose.model(modelName, schema)实现转换

  • mongoose.model(modelName, schema)

(mongoose中文文档):https://mongoose.shujuwajue.com/guide/schemas.html
(详细):https://www.cnblogs.com/winyh/p/6682039.html

https://www.jianshu.com/p/9fa6621db735











(3) 用装饰器优化connect

插件:babel-plugin-transform-decorators-legacy (在moxb也使用到了)

connect是react-redux提供的api ( Prodider和connect )

  • 安装:
cnpm install babel-plugin-transform-decorators-legacy-D

// 等价于 cnpm install babel-plugin-transform-decorators-legacy --save-dev
  • 使用
    如何是用create-react-app脚手架的话需要cnpm run eject弹出配置
弹出后,在package.json文件中修改

  "babel": {
    "presets": [
      "react-app"
    ],
    "plugins":["transform-decorators-legacy"]
  },


--------------------------------------------------------------
注意对比:这里的写法和.babelrc中的写法

.babelrc文件

{
    "presets":[
        ["es2015", {"loose": true}],
        "stage-1",    //省事就安装"stage-0",因为它包含stage-1, stage-2以及stage-3的所有功能
        "react"
    ],
    "plugins": ["transform-decorators-legacy","react-hot-loader/babel"]
}

  • connect写法
container.js



import React,{Component} from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import * as actionTotals from './action.js';
import UserN from './username.js';

@connect(
    state => {
        return {
            username: state.username.username
        }
    },
    dispatch => { return bindActionCreators(actionTotals, dispatch)}
)

class UserName extends Component {
    render() {
        return (
            <div>
                <UserN {...this.props}></UserN>
            </div>
        )
    }
}

export default UserName

原写法:如下

import React,{Component} from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import * as actionTotals from './action.js';
import UserN from './username.js';

// @connect(
//     state => {
//         return {
//             username: state.username.username
//         }
//     },
//     dispatch => { return bindActionCreators(actionTotals, dispatch)}
// )

class UserName extends Component {
    render() {
        return (
            <div>
                <UserN {...this.props}></UserN>
            </div>
        )
    }
}

function mapStateToProps(state) {
    return {
         username: state.username.username
    }
}
function mapDispatchToProps(dispatch) {
    return bindActionCreators(actionTotals,dispatch)
}

// export default UserName
export default connect(mapStateToProps, mapDispatchToProps)(UserName)
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,440评论 5 467
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,814评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,427评论 0 330
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,710评论 1 270
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,625评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,014评论 1 275
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,511评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,162评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,311评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,262评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,278评论 1 328
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,989评论 3 316
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,583评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,664评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,904评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,274评论 2 345
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,856评论 2 339

推荐阅读更多精彩内容