react + react-router4 + redux + antd-mobile + sass + node + mongodb

前言：

  作为一个前端开发，最主要的就是运用于各种框架，在学习框架的路上因为没有json数据导致很麻烦

  mock:  https://github.com/nuysoft/Mock/wiki/Getting-Started  是一个可以模拟数据的js插件

  node:  通过 express+mongodb 实现数据增删改查

 node安装地址： https://nodejs.org/zh-cn/  推荐大家下载稳定版本

 

因为我使用的是react 

所以分享一下我的一些配置：

    全局安装react:    npm i -g  create-react-app

    创建一个项目:      create-react-app  项目名（myapp）

           进入项目:      cd  myapp

    react项目目录结构：
   myapp/

1. README.md
2. node_modules/
3. package.json
4. .gitignore
5. public/
6. favicon.ico
7. index.html
8. src/
9. App.css
10. App.js
11. App.test.js
12. index.css
13. index.js
14. logo.svg

       到这里运行 npm start    在浏览器就能打开react项目 localhost:3000

   * 想在react中配置sass怎么办 有很多朋友会有疑问  在这里默认隐藏了webpack配置文件

     

1.打开webpack 隐藏的配置文件   npm run eject
2.配置sass sass-loader node-sass -S-D
  找到config文件
    webpack.config.dev.js  在module 添加scss依赖
    1>  {
        test: /\.scss$/,
        loader: ['style-loader', 'css-loader', 'sass-loader']
      },

    2> 找到这句话添加 .scss配置       
       exclude: [/\.(js|jsx|mjs)$/,/\.html$/, /\.json$/, /\.scss$/],
3.webpack.config.prod.js 配置与2一样配置 配置完 页面就可以使用scss 

react的ui框架：  https://mobile.ant.design/index-cn

react-router:  现在我的版本是4.x  之前直接打开react-router文档结果是3.x的版本 让我踩了一写坑   4.x版本：http://reacttraining.cn/web/guides/quick-start

redux: 暂时还没使用后续加在该文档

正题：

这里我们先安装mongodb:    https://www.mongodb.com/download-center?jmp=nav#community 

 mongodb安装教程：https://docs.mongodb.com/manual/installation/?_ga=2.267416328.701406409.1530968946-1771906249.1530099727

我们使用一个可视化工具来查看数据studio3T:   https://studio3t.com/download

图标： 

1. 启动MongoDB服务器

2.连接MongoDB服务器（图片借鉴）

 

 

3.使用数据库

经过以上配置： mongodb已经连接上可视化工具了（mongodb安装不懂请看上面链接地址）

下面才是重点：

            node 项目搭建： 

                   1. express 框架运行环境

        

                    全局安装cnpm i -g express-generator

                    本地安装 cnpm i express

                            

                            express --version  查看版本

                            

                            

      2. 生成express 项目  命令：express  -e   项目名我用的server（server）

                               

                                文件目录：

                               

                        在（server目录下）安装一下第三方依赖

                        

                        运行项目： 在浏览器打开localhost:3000 证明已经可以使用了

                        

                        

                    这里我把ejs改成了html  

                        不喜欢ejs语法的可以在app.js 中修改 

                                

到这里： 说明你react项目都搭建好了 node也以及好了 

 我的代码 把node项目和react公用的一个package.json

 我的代码链接：（会一直更新）https://gitee.com/ai1314/react_node_mongodb.git

 这了为了展示方便： 我把react项目端口改为 3001了

 node项目是3000   这里我写了一个上传图片的简单页面

上传后数据展示在react项目中 （页面效果不重要 大家看交互）

### 功能： 1. 实现上传图片 页面展示

                2. 根据单个id查询详细信息

                3. 实现分页功能

下面我给大家展示我的数据库表 你们可以建我标为红色的

我的项目结构:  大家指出我的不足点 （qq:   1789410124）

public-comment

    config       webpack配置文件

    node_modules  第三方包

    public  react项目主页

    scripts  一些配置文件

    server node 项目

    src react中项目文件

         api  存放所有的url请求

         assets  静态资源文件

         axios 对数据请求的封装 全局处理错误信息

         components 通用组件

         config  判读当前环境使用域名

         module 存放路由页面

         router  路由配置

react打包项目还会遇到一个问题  那就是路径不对package.json  添加红色标记就能解决   谢谢