mongoDB+express+React 框架搭建 一

第一章   後端express 搭建

正文

開發環境

本地安裝mongoDB、nodejs、react 腳手架

node.js 安裝及配置

mongoDb 安裝及配置

參考文檔：https://www.cnblogs.com/progor/p/8595661.html?utm_source=tuicool&utm_medium=referral

一、服務器搭建（前端小白搭建後端項目，勿噴）

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:[email protected]: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，成功了。

2，整理項目