前端開發快速入門

2020 年 10 月 22 日
筆記
前端

一、了解前端技術棧

1. react：前端開發語言（着重學習）

React是用於構建用戶界面的JavaScript框架，用於構建高效、快速的用戶界面。React 中一切都是組件。
虛擬dom

2. webpack：前端打包工具

一個開源的前端打包工具，將你的js、css、img、svg以更優的方式進行解析加載，配置靈活，功能強大

3. ant-design：商戶側前端使用的UI組件庫（着重使用）

是基於 Ant Design 設計體系的 React UI 組件庫，主要用於研發企業級中後台產品

4. dva：react異步請求以及redux全局數據流

dva 首先是一個基於 redux 和 redux-saga的數據流方案
易學易用，僅有 6 個 api，對 redux 用戶尤其友好

5. es6：JavaScript語言的下一代標準

es5語言的升級，提供更加強大的語法糖，開發更加便捷,不但能減少代碼量，還能解決原來沒有完善的問題
目前ES6也是使用最多的javaScript語言標準

6.axios:一個基於 promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中

從瀏覽器中創建 XMLHttpRequests
從 node.js 創建 http 請求
支持 Promise API
攔截請求和響應
轉換請求數據和響應數據
取消請求
自動轉換 JSON 數據
客戶端支持防禦 XSRF

二、項目結構理解

1. node_modules：前端組件庫管理包

安裝node後用來存放用包管理工具下載安裝的包的文件夾,例如react、webpack、輪播圖插件等各種庫，以便項目使用,類似後端的nuget

2. package.json：項目組件庫版本管理文件（如果我們用自己開發的組件庫，也是npm組件庫的讀取文件）

1.管理node_modules組件庫版本的配置文件（常用）
2.當你開發自己的組件庫，它也是作為組件庫的版本管理配置文件（組件庫開發）

3. .babellrc:es6語法解析

下一代Javascript的標準，瀏覽器因版本的不同對此會有兼容性問題
.babelrc是Babel的配置文件，放在項目根目錄下，結合webpack使用

4. webpack配置文件

開發環境和生產環境打包希望看到的效果肯定不一樣，比如生產環境需要壓縮代碼，去除注釋，開發環境需要熱更新，不壓縮代碼，所以需要存在一套開發環境版本和一套生產環境版本

webpack.config.common.js:webpack公用文件
webpack.config.dev.js:webpack開發環境文件
webpack.config.prod.js:webpack生產環境文件

node_modules和package.json

7. src：源碼目錄components、configs、models、services、utils、index.ejs、index.js、Router.js

三、src源碼目錄講解

開發一個頁面的流程：

components文件夾新建js組件、less樣式，進行前端靜態頁開發並連接dva
router.js路由文件引入頁面組件，並放置到路由上
models文件夾寫入models文件
services文件夾寫入services文件
index.js註冊對應的models文件或者在路由註冊
前後端接口開發聯調

3.1 component

功能：存放開發的業務組件
包含：

js
less
imgs

jsx頁面結構介紹

import React from 'react'; // 引用react組件
// import './less/test.less';
const param = 1; // 定義常量
// 名稱必須大寫
class Test extends React.Component {
   constructor(props) {
      super(props);
      // 定義state，在頁面或者傳遞數據使用
      this.state = {
         num: 1,
      };
   }
   // 定義事件
   clickFunc = () => {
      let { num } = this.state;
      num++;
      this.setState({
         num
      });
   }
   render() {
      // 獲取state
      const { num } = this.state;
      return (
         <div className="content">
            {/*渲染元素*/}
            <div className="count">{num}</div>
            {/*點擊修改元素*/}
            <button onClick={this.clickFunc}>點擊</button>
         </div>
      )
   }
}
export default Test

less樣式文件介紹

// 設置樣式
.content{
    // 可設置嵌套樣式
    .count{
        
    }
}

數據講解

1.state：內部定義，它只是用來控制這個組件本身自己的狀態，頁面渲染通過setState進行完成。

2.setState:

當我們調用這個函數的時候，React.js 會更新組件的狀態 state ，並且重新調用 render 方法，然後再把 render 方法所渲染的最新的內容顯示到頁面上
React.js為了批次與效能並不會馬上修改state。而是把這個對象放到一個更新隊列裏面，稍後才會從隊列當中把新的狀態提取出來合併到 state 當中，然後再觸發組件更新。

3.props：外部傳入，包括父子組件之間的通信，全局數據流的傳遞

父子組件之間的通信
全局數據流的傳遞（dva）

3.2 models

定義每個頁面交互的命名空間以及dispatch發起的行為方法和數據的處理

import * as lightMemberRightsManage from '../services/lightMemberRightsManage';

export default {
    //表示對於整個應用不同的命名空間,以便通過this.props.lightMemberRightsManage,規範保證命名空間和當前頁面js名稱相同
    namespace: 'lightMemberRightsManage', 
    state: {},  // 表示當前的example中的state狀態，這裡可以給初始值
    effects: {
        *lightMemberRightsManageGetList({ payload, callback }, { call, put }) {
            const testRes = yield call(lightMemberRightsManage.lightMemberRightsManageGetList, payload);
            //這裡的put表示存儲在當前命名空間lightMemberRightsManage中，通過success方法存在當前state中
            yield put({
                type: 'success',
                payload: {
                    lightMemberRightsManageGetListResult: testRes
                }
            });
            // 回調函數
            callback && callback(testRes);
            // 可以promise.then使用
            return testRes;
        }
    },
    //用來保存更新state值 上面的put方法調用這裡的方法
    reducers: {
        success(state, { payload }) {
            return {
                ...state,
                ...payload
            }
        }
    }
}

3.3 services

// 異步請求的中轉文件
import axios from '../utils/axios';
// 請求地址的文件
import Api from '../configs/api';
export function lightMemberRightsManageGetList(params) {
    return axios.get(configs.host.test + Api.lightMemberRightsManageGetList, { 'params': params });
}

3.4 untils工具庫

定義自己寫的工具庫，例如異步請求axios、數據截取的公用函數js

3.5 index.js

項目入口js文件
引用全局樣式
引用models文件connect連接組件
引用路由

3.6 index.ejs

單頁應用入口html文件

3.7 router.js

頁面路由

import React from 'react';
import PropTypes from 'prop-types';
import {
  Switch,
  Route,
  routerRedux,
} from 'dva/router';
import dynamic from 'dva/dynamic';


const { ConnectedRouter } = routerRedux;
const RouterWrapper = ({ history, app }) => {
  // 開發的組件
  const Home = dynamic({
    app,
    component: () => import('./components/Home'),
  });
  return (
    <ConnectedRouter history={history}>
      <Switch>
        // 加載路由
        <Route exact path="/" component={Home} />
      </Switch>
    </ConnectedRouter>
};

四、頁面開發流程

1.通過vscode插件生成頁面組件、models、services
2.路由註冊對應頁面
3.index.js引用對應的頁面models
4.models,services進行細微調整
5.api接口地址調整對應後端接口地址

五、實戰：使用腳手架開發商戶側項目

// 全局安裝fl-hscli，生成商戶側腳手架的命令（目前寫入的是mall商戶側）
npm i fl-hscli -g

// 進入想要創建項目的文件夾創建項目（projectName是你的項目名稱）
create-react-app-fl projectName

// package.json中fl-pro、fulu-method是公司內部組件庫，安裝模塊包之前，先安裝公內部組件,不然會報錯

npm --registry //10.0.1.244:8081/repository/npm-group/ install [email protected]   --save 

// 安裝成功後,執行安裝模塊包的命令，因為package.json模塊非常多,可以使用淘寶鏡像進行安裝，安裝速度快
npm i
cnpm i(需要先安裝淘寶鏡像)


// 安裝成功後，啟動項目
npm start

六、商戶側顯示效果

注意

安裝nodejs，才可使用npm命令
cnpm安裝：npm install -g cnpm –registry=//registry.npm.taobao.org
開發者運行的商戶側地址都需要在福祿管家配置回調地址，否則頁面打不開,開發環境訪問使用自己開啟的域名（例如：//192.168.0.105:3008)/?MerchantId=商戶id（bcc1adce-927a-4c0b-88c0-c446a0435b98 ）進行訪問

七、模塊包下載工具

npm

npm是node官方的包管理器，如果沒有鎖定版本，通常會直接下載package.json中版本庫里最高版本
下載速度慢，可能因為網絡原因無法使用npm下載，或者是國外的庫無法進行下載

cnpm

cnpm是個中國版的npm，是淘寶定製的 cnpm,下載速度極快
每隔10分鐘去刷新npm庫同步到cnpm
不會讀取package.lock.json

yarn

斷點續傳，鎖定版本，不過npm5更新之後，兩者都沒有明顯的優劣勢

後續會做更加詳細的講解

如何提高開發效率

js

公用模塊進行提取

代碼片段
vscode插件
封裝繼承
npm命令行進行項目代碼導入

css

規範的間距、顏色、字體大小、行高、居中、浮動

開發規範

1.按照目前的目錄結構進行開發
2.頁面的文件命名具有語義化，對應使用的文件名與其保持一致，組件命名首字母需要大寫，其餘命名需要使用駝峰命名

好處

1.目錄結構清晰，根據頁面來查找問題更加輕鬆便捷
2.同事接手也更簡單易懂，上手更快

開發注意事項

如果引用的組件或者函數不支持按需加載，引用的話，會把所有功能都打包進來
less文件在生產環境會被打包在一起，所以每個頁面的less文件最外層樣式必須唯一，不然會互相影響
setState會渲染頁面，所以不要在render（渲染頁面的函數）里使用setState，不然就會死循環，不要使用this.state賦值（不會重新渲染）
不要直接給props賦值
後續會一直迭代…

Tags: 前端