摘要:一步一步搭建應用項目初始化一步一步構建一個應用開篇地址前端初始化目錄結構。。。。。。
一步一步搭建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應用到服務器
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/88473.html
摘要:一步一步搭建應用項目初始化一步一步構建一個應用開篇地址前端初始化目錄結構。。。。。。 一步一步搭建react應用-項目初始化 [一步一步構建一個react應用-開篇](https://segmentfault.com/a/11... git地址 前端初始化 # 目錄結構 +----/build + +----/config + +----+/pu...
摘要:線上地址主要從下面幾點入手一步一步搭建應用前后端初始化爬取豆瓣電影的電影信息開啟身份認證使用來做基于的用戶身份認證中使用來寫單元測試部署技術棧沒用之后改運行代碼到本地項目地址喜歡就一下吧前端后端需要安裝本項目端口并開啟權限認證。 介紹 斷斷續續利用周末時間做了兩個月,基于react和express的一個小項目差不多做完了。所以想寫一系列文章來總結一下前后端用到技術及遇到的問題和解決方法...
摘要:線上地址主要從下面幾點入手一步一步搭建應用前后端初始化爬取豆瓣電影的電影信息開啟身份認證使用來做基于的用戶身份認證中使用來寫單元測試部署技術棧沒用之后改運行代碼到本地項目地址喜歡就一下吧前端后端需要安裝本項目端口并開啟權限認證。 介紹 斷斷續續利用周末時間做了兩個月,基于react和express的一個小項目差不多做完了。所以想寫一系列文章來總結一下前后端用到技術及遇到的問題和解決方法...
摘要:前端前端構建后的目錄下的文件可以寫個腳本到服務器,但這里借用一下的部署功能來部署前端代碼。 線上地址 git地址 一步一步構建一個react應用-開篇 推薦瀏覽器開發者工具開啟手機設備模式 裝環境 前提:買個ESC、彈性公網ip、域名 設置服務器免密登錄 本地應該都有.ssh目錄,并且生成了公私鑰,將本地id_rsa,id_rsa.pub scp到服務器 /.ssh目錄 之所以把私鑰也...
摘要:前端前端構建后的目錄下的文件可以寫個腳本到服務器,但這里借用一下的部署功能來部署前端代碼。 線上地址 git地址 一步一步構建一個react應用-開篇 推薦瀏覽器開發者工具開啟手機設備模式 裝環境 前提:買個ESC、彈性公網ip、域名 設置服務器免密登錄 本地應該都有.ssh目錄,并且生成了公私鑰,將本地id_rsa,id_rsa.pub scp到服務器 /.ssh目錄 之所以把私鑰也...
閱讀 765·2019-08-29 16:32
閱讀 836·2019-08-29 12:31
閱讀 3208·2019-08-26 18:26
閱讀 3152·2019-08-26 12:20
閱讀 1728·2019-08-26 12:00
閱讀 3006·2019-08-26 10:58
閱讀 2811·2019-08-23 17:08
閱讀 2309·2019-08-23 16:32