资讯专栏INFORMATION COLUMN

一步一步搭建react应用-前后端初始化

MartinHan / 3400人阅读

摘要:一步一步搭建应用项目初始化一步一步构建一个应用开篇地址前端初始化目录结构。。。。。。

一步一步搭建react应用-项目初始化

[一步一步构建一个react应用-开篇](https://segmentfault.com/a/11...

git地址

前端初始化 # 目录结构
    +----/build
    +
    +----/config
    +
    +----+/public
fe- +                            +--+/less
    +----/scripts   +----/common-+--+/svg
    +               |            +--index.less         
    +----+/src+-----+    
                    |
                    |               +--+nav.jsx
                    +----/component-+--+route.jsx
                    |               +--+header.jsx
                    |               +--+user.jsx
                    |               +。。。。。。
                    |
                    +----+/util---Utils.js
                    |
                    +-----+app.js
                    |
                    +-----+index.js

脚手架

create-react-app fe

npm run eject 配置文件导出到项目目录下

配置后端代理地址

package.json中加入 "proxy": "http://XXXXXXX"

引入antd-mobile

具体webpack中的修改和如何自定义主题来覆盖默认样式参见:

antd 在在 create-react-app 中使用

路由规划

src/component/route.jsx

项目主要有 头部、底部导航、首页、详情页、我的几个部分

+-----------------------+
  | +------------------+  |
  | |     Header       |  |
  | +------------------+  |
  |                       |
  | +-----------------+   |
  | |                 |   |
  | |                 |   |
  | |     Content     |   |
  | |                 |   |
  | |                 |   |
  | |                 |   |
  | +-----------------+   |
  | +------------------+  |
  | |      Nav         |  |
  | +------------------+  |
  +-----------------------+

主要代码

import React from "react";
import {
    BrowserRouter as Router,
    Route,
    Redirect
} from "react-router-dom"
import Header from "./header"
import Nav from "./nav"
import Home from "./home/homePage"
import Detail from "./detail"
import User from "./user"
import Reptile from "./reptile"
import Collect from "./collectList"
import Util from "../util/Util"

export default class Rout extends React.Component {

    constructor(props) {
        super(props)
        this.state = {
            login: false
        }
    }

    componentDidMount() {
        
        Util.fetch("/api/user/checkLogin").then(res => {
            this.setState({
                login: !res.code
            })
        })
    }
    render() {
        return (
            
                
}> { return }}> { return }}> { return })}>
) } }

如何实现全局的ajax请求时loading状态

每次有ajax请求时我们要显示正在请求的loading状态,这里我们封装一下fetch

主要代码:src/util/Util.js

import "whatwg-fetch"
const Loading = {
    pendingRequest: 0
}

const Util = {
    open(fn) {
        Loading.open = fn
    },
    close(fn) {
        Loading.close = fn
    },
    fetch(url, options) {
        Loading.open()
        Loading.pendingRequest++
        options = fillTokenToHeader(options)
        return fetch(url, options).then(res => {
            Loading.pendingRequest--
            if (Loading.pendingRequest <= 0) {
                Loading.close()
            }
            return res.json()
        }).then(data => {
            if (url !== "/api/user/checkLogin") {
                if (data.code) {
                    Toast.info(data.name || data.message, 1)
                }
            }
            return data
        })
    }
}
export default Util

在最外层的App组件中,定义一个isLoading状态,控制loading活动指示器的显示隐藏。
并将控制isLoading的两个方法传递到Util中,在具体的请求发生时调用
具体代码如下: src/app.js

import React, { Component } from "react"
import Router from "./component/route.jsx"
import {
    ActivityIndicator
} from "antd-mobile"
import Util from "./util/Util"
import initReactFastclick from "react-fastclick";

initReactFastclick();

export default class App extends Component {

    constructor(props) {
        super(props)
        this.state = {
            isLoading: false
        }
        Util.open(() => {
            if(this.state.isLoading){
                return
            }
            this.setState({
                    isLoading: true
                })
        })
        Util.close(() => {
            this.setState({
                isLoading: false
            })
        })
    }
    render() {
        return 
} }
后端初始化

后端基于express框架,使用MongoDB数据库,用户身份认证基于token,并且使用mocha+supertest来对接口进行单元测试

express-generator初始化项目

    npm install express-generator -g
    express -e be

    node ./bin/www 

    浏览器访问localhost:3000 能看到东西就可以了

引入pm2

pm2 是一个强大的node进程管理工具

    npm install -g pm2

在项目根目录下新建文件ecosystem.config.js

module.exports = {
  apps: [ //数组,可以指定多个服务
    {
      name: "movies-be",
      script: "bin/www",
      watch: true,
      env: {
        PORT: 9000, //node服务端口
        NODE_ENV: "development"
      },
      env_production: {
        PORT:9000,
        NODE_ENV: "production"
      }
    }
  ]
};

package.json中

"scripts": {
    "start": "pm2 start ecosystem.config.js"
  }

启动

npm start 就可以启动我们的node服务

开发中常用的pm2 命令

pm2 list 可以查看node服务列表

pm2 logs 查看日志,console打印信息等

pm2 kill 关闭服务

之后文章中会介绍如何通过pm2来部署node应用到服务器

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/88473.html

相关文章

  • 步一搭建react应用-前后始化

    摘要:一步一步搭建应用项目初始化一步一步构建一个应用开篇地址前端初始化目录结构。。。。。。 一步一步搭建react应用-项目初始化 [一步一步构建一个react应用-开篇](https://segmentfault.com/a/11... git地址 前端初始化 # 目录结构 +----/build + +----/config + +----+/pu...

    fevin 评论0 收藏0
  • 步一步构建一个react应用-开篇

    摘要:线上地址主要从下面几点入手一步一步搭建应用前后端初始化爬取豆瓣电影的电影信息开启身份认证使用来做基于的用户身份认证中使用来写单元测试部署技术栈没用之后改运行代码到本地项目地址喜欢就一下吧前端后端需要安装本项目端口并开启权限认证。 介绍 断断续续利用周末时间做了两个月,基于react和express的一个小项目差不多做完了。所以想写一系列文章来总结一下前后端用到技术及遇到的问题和解决方法...

    BigTomato 评论0 收藏0
  • 步一步构建一个react应用-开篇

    摘要:线上地址主要从下面几点入手一步一步搭建应用前后端初始化爬取豆瓣电影的电影信息开启身份认证使用来做基于的用户身份认证中使用来写单元测试部署技术栈没用之后改运行代码到本地项目地址喜欢就一下吧前端后端需要安装本项目端口并开启权限认证。 介绍 断断续续利用周末时间做了两个月,基于react和express的一个小项目差不多做完了。所以想写一系列文章来总结一下前后端用到技术及遇到的问题和解决方法...

    lylwyy2016 评论0 收藏0
  • 步一搭建react应用-部署

    摘要:前端前端构建后的目录下的文件可以写个脚本到服务器,但这里借用一下的部署功能来部署前端代码。 线上地址 git地址 一步一步构建一个react应用-开篇 推荐浏览器开发者工具开启手机设备模式 装环境 前提:买个ESC、弹性公网ip、域名 设置服务器免密登录 本地应该都有.ssh目录,并且生成了公私钥,将本地id_rsa,id_rsa.pub scp到服务器 /.ssh目录 之所以把私钥也...

    roadtogeek 评论0 收藏0
  • 步一搭建react应用-部署

    摘要:前端前端构建后的目录下的文件可以写个脚本到服务器,但这里借用一下的部署功能来部署前端代码。 线上地址 git地址 一步一步构建一个react应用-开篇 推荐浏览器开发者工具开启手机设备模式 装环境 前提:买个ESC、弹性公网ip、域名 设置服务器免密登录 本地应该都有.ssh目录,并且生成了公私钥,将本地id_rsa,id_rsa.pub scp到服务器 /.ssh目录 之所以把私钥也...

    mikyou 评论0 收藏0

发表评论

0条评论

MartinHan

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<