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 (
            
) } } 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 (
            
) } } function mapStateToProps(state) { return { username: state.username.username } } function mapDispatchToProps(dispatch) { return bindActionCreators(actionTotals,dispatch) } // export default UserName export default connect(mapStateToProps, mapDispatchToProps)(UserName)

你可能感兴趣的:(React.js学习笔记(18) mongodb + (mongoose) + (用装饰器优化connect react-redux))