react web app搭建过程总结

前端：react.js
后端：node.js
数据库：MongoDB

前端

1.npm install -g create-react-app 全局安装react脚手架

2.使用脚手架创建一个react app create-react-app myapp；

3.npm run eject 弹出配置文件目的是可以自定义修改webpack配置

后端：

1.npm install express --save安装express框架

2.在myapp目录下建立server目录存放后台文件

3.cd server 进入服务器目录，新建server.js，编写后台代码

4.全局安装nodemon，热加载后台代码 nodemon server.js启动后台服务

连接MongoDB数据库：

1.Windows下启动MongoDB：C:\mongodb\bin\mongod --dbpath c:\data\db（前提是MongoDB已安装）

2.安装mongoose库，用于node.js与MongoDB建立连接。 npm install mongoose --save

mongoose基础使用

1.connect链接数据库

2.定义文档模型，Schema何model新建模型

server.js里面的基础代码

const express = require('express') // 引入express模块
const mongoose = require('mongoose') // 引入mongoose库

//链接 mongo 并且使用imooc这个集合
const DB_URL = 'mongodb://localhost:27017/imooc'
mongoose.connect(DB_URL)
mongoose.connection.on('connected',function(){
	console.log('mongodb 链接成功')
})
//建立一个User表结构
const User = mongoose.model('user', new mongoose.Schema({
	user:{type: String, require:true},
	age:{type:Number, require:true}
}))
//新增数据
User.create({
	user:'imooc',
	age:18
},function(err, doc){
	if(!err){
		console.log(doc)
	}else{
		console.log(err)
	}
})
//删除数据
/*User.remove({
	age:18
},function(err,doc){
	if(!err){
		console.log(doc)
	}else{
		console.log(err)
	}
})*/
//更新数据
/*User.update({'user':'imooc'},{'$set':{age:26}},function(err,doc){
	if(!err){
		console.log(doc)
	}else{
		console.log(err)
	}
})*/
//查找
/*User.find({},function(err,doc){
	if(!err){
		console.log(doc)
	}else{
		console.log(err)
	}
})*/

// 新建app
const app = express()

//路由
app.get('/', function (req, res) {
	//返回HTML文档
	res.send('
Hello zzq! It\'s see you again!
')
})
app.get('/data', function (req, res) { 
	// 返回json数据
	res.json({name:'imooc',type:'IT'})
})

app.listen(9093,function(){
	console.log("node app start at port 9093!")
})