mongoDB+express+React 框架搭建 一

第一章   后端express 搭建

正文

开发环境

本地安装mongoDB、nodejs、react 脚手架

node.js 安装及配置

mongoDb 安装及配置

参考文档：www.cnblogs.com/progor/p/85…

一、服务器搭建（前端小白搭建后端项目，勿喷）

express+mongoose 搭建后台项目

1，全局安装 express-generator

npm install express -sage -g
npm install express-generator --save -g

express 是nodejs 的一个web 框架，使用express 能够更便捷的使用nodejs.

express-generator 是express应用生成器，相当于express的骨架，进入一个web项目中后，使用 “express 项目名” 命令，能够快速构建应用的目录结构

2，创建项目

// express myAppName
express bolg-server

3, 进入项目，初始化依赖，启动项目

npm install
npm start

项目搭建成功！！

4， 项目文件结构

bin: 启动文件， 默认启动命令： npm start
public: 存放项目的静态文件，
routes: 项目路由信息，控制地址路由
views: 视图文件，模板文件.jade ，相当于 html
app.js 入口文件（主文件）
package.json 依赖的模块列表

5，mongoose 连接数据库，操作数据库

通过express 搭建完项目后，将 连接数据库 放在routes.js 文件中。

const mongoose = require('mongoose');
// mongodb://user:password@127.0.0.1:27017/dbname
// dbname-必选项 user/password 是可选的
const url = 'mongodb://127.0.0.1:27017/admin'; // 本地数据库地址

mongoose.connect(url);
// connection readyStateconst;
db = mongoose.connection;
db.on('connected', () => {
  console.log('MongoDB connected success '.green);
});

db.on('errror', () => {
  console.error('MongoDB connected fail');
});

db.on('disconnected', () => {
  console.log('MongoDB connected to disconnected');
});

运行的时候，提示

(node:2896) DeprecationWarning: current URL string parser is deprecated, and will be removed in a future version. To use the new parser, pass option { useNewUrlParser: true } to MongoClient.connect. 

在网上找到了解决方案，但是暂时不知道什么原因。

只需要添加 { useNewUrlParser:true }

mongoose.connect(url, { useNewUrlParser: true });

第二章 前端框架搭建

1, 搭建 react+Ant Design项目

新建一个空的文件夹作为项目目录，并在目录下执行： 

yarn create umi

or

npm create umi

选择 ant-design-pro：

Select the boilerplate type (Use arrow keys)
❯ ant-design-pro  - Create project with an layout-only ant-design-pro boilerplate, use together with umi block.
  app             - Create project with a simple boilerplate, support typescript.
  block           - Create a umi block.
  library         - Create a library with umi.
  plugin          - Create a umi plugin.

选择对应的语言，不过相对来说TypeScript 感觉有点乱

 Which language do you want to use? (Use arrow keys)
> TypeScript
  JavaScript

npm install
npm start

启动完成后会自动打开浏览器访问 http://localhost:8000，成功了。