使用react全家桶製做博客後臺管理系統 網站PWA升級 移動端常見問題處理 按部就班學.Net Core Web Api開發系列【4】：前端訪問WebApi [Abp 源碼分析]4、模塊配置 [Ab

使用react全家桶製做博客後臺管理系統

 

前面的話

　　筆者在作一個完整的博客上線項目，包括前臺、後臺、後端接口和服務器配置。本文將詳細介紹使用react全家桶製做的博客後臺管理系統

 

概述

　　該項目是基於react全家桶（React、React-router-dom、redux、styled-components）開發的一套博客後臺管理系統，用於前端小站的管理，主要功能包括遊客瀏覽、文章管理、類別管理、評論通知、推薦設置和用戶管理

【訪問地址】

　　域名：https://admin.xiaohuochai.cc

　　Github: https://github.com/littlematch0123/blog-admin

　　或者能夠直接掃描二維碼訪問

 

【項目介紹】

　　採用移動優先的響應式佈局，移動端、桌面端都可適配；字體大小使用em單位，桌面端的文字相應變大；移動端大量使用滑屏操做，桌面端經過光標設置、自定義滾動條、回車肯定等，提高交互體驗

　　根據HTML標籤內容模型，使用語義化標籤，儘可能減小標籤層級，儘可能使用React.Fragment來代替div

　　採用統一的色調處理，除了黑白兩色外，全部頁面共使用了8種顏色，保證了頁面顏色素雅、統一

　　使用service worker實現了離線緩存，配置了robots，禁止搜索引擎抓取頁面

　　使用styled-components插件，實現css in JS。全部圖標資源均採用svg格式，並存儲到common/BaseImg組件中，方便管理，圖片資源均上傳到七牛雲圖牀，使用外鏈訪問。最終，html、css、image都使用js管理

　　沒有引用第三方組件庫，如bootstrap或螞蟻設計，而是本身開發了項目中所需的公共組件。在common目錄下，封裝了頭像、篩選框、全屏、loading、遮罩、搜索框、滑屏、聯動選擇等組件，方便開發

　　功能組件按照功能（Post、Comment...）而不是角色（controllers、models、views）分類，將展現組件component和容器組件container整合爲一個文件

　　狀態管理借鑑了vuex的管理模式，action-types、action、reducer、selecter、state整合到每一個模塊目錄的module.js文件下。爲了方便擴展，全部的state都設置了filter字段

　　使用配置數據，實現了數據和應用分離，配置數據包括API調用地址和顏色值，以常量的形式存儲在constants目錄下

　　使用esLint規範JS代碼，代碼風格參照airbnb規範，全部命名採用駝峯寫法，公共組件以Base爲前綴，函數大多以get或set爲前綴，事件函數以on爲前綴，異步函數以async爲後綴，布爾值基本以do或is爲前綴

　　使用styleLint規範CSS代碼，按照佈局類屬性、盒模型屬性、文本類屬性、修飾類屬性的順序編寫代碼，並使用order插件進行校驗

　　使用react最新版本的方法，包括createRef()、getDerivedStateFromProps生命週期、 React.Fragment語法糖等

　　進行了代碼優化，包括減小請求數量（文件合併 、小圖片使用Base6四、使用301而不是302重定向、靜態資源使用強緩存、接口資源使用協商緩存、使用離線緩存、長緩存優化、CSS內聯），減少資源大小（文件壓縮、andriod下使用webp格式圖片、開啓gzip），優化網絡鏈接（使用DNS預解析、使用keep-alive持久鏈接、使用HTTP2管道化鏈接），優化資源加載（優化資源加載位置、圖片懶加載），減小重繪迴流（減小兄弟選擇器、動畫元素硬件渲染、使用函數節流、及時清理環境）

　　該項目的一個隱藏彩蛋是搖一搖功能，能夠直接搖到前臺頁面，固然也能夠再搖回來

　　最終優化評分以下所示

 

功能演示

　　功能主要包括遊客瀏覽、評論通知、用戶管理、推薦設置、文章管理和類別管理

【遊客瀏覽】

　　在沒有管理員賬號的狀況下，能夠點擊遊客瀏覽進入後臺。可是，遊客只有瀏覽權限，沒有操做權限

【評論通知】

　　有新評論未查看時，右上角快捷菜單上會出現評論通知的按鈕。查看評論後，通知按鈕消失

【用戶管理】

　　用戶管理包括查看全部用戶信息、查看用戶點贊狀況、查看用戶評論狀況、按用戶名拼音排序、按點贊數排序、按評論數排序以及設置用戶狀態

【推薦管理】

　　推薦管理包括文章推薦和專題推薦兩類

　　一、文章推薦

　　文章推薦的功能包括更改推薦文章、更改背景圖和更改次序

　　二、專題推薦

　　專題推薦的功能包括更改推薦專題、更改專題說明和更改次序

【文章管理】

　　文章管理包括文章篩選、文章搜索、新建文章、編輯文章、刪除文章、設置配圖、查看點贊等功能

　　一、文章篩選

　　初始頁顯示所有文章，設置類別後，只顯示篩選後的文章，文章查閱完成後，可返回文章篩選頁

　　二、文章搜索

　　初始頁只顯示搜索框，設置搜索詞後，顯示出相關文章，但每次只顯示16篇，下拉刷新後，可繼續顯示。文章查閱完成後，可返回文章搜索頁

　　三、新建文章

　　四、編輯文章

　　五、設置配圖

　　六、查看點贊和評論並刪除文章

【類別管理】

　　類別管理包括查看類別、添加類別、編輯類別、刪除類別

 

目錄結構

　　src目錄下，包括assets(靜態資源)、common(公共組件)、components(功能組件)、constants(常量配置)、store(redux)和utils(工具方法)這6個目錄

- assets // 存放靜態資源，包括通用CSS和圖片
    global.css // 全局CSS
    login_bg.jpg // 登陸框背景圖
- common // 存放公共組件
    BaseArticle.js // 文章組件
    BaseAvatar.js // 頭像組件
    ...
- components // 存放功能組件
    Category // 類別組件
      AddCategory.js // 類別添加組件
      DeleteCategory.js // 類別刪除組件
      UpdateCategory.js // 類別更新組件      
      Category.js // 類別路由組件
      CategoryForm.js // 類別基礎組件
      CategoryItem.js // 類別項組件
      CategoryItemList.js // 類別列表組件
      CategoryRootList.js // 類別根列表組件
      module.js //類別狀態管理
      ...
- constants // 存放常量配置
    API.js // 存放API調用地址
    Colors.js // 存放顏色值
- store // 存放redux
    index.js
- utils // 存放工具方法
    async.js // fetch方法
    history.js // 路由方法
    util.js // 其餘工具方法

【公共組件】

　　沒有引用第三方組件庫，如bootstrap或螞蟻設計，而是本身開發了項目中所需的公共組件

　　封裝了文章組件、頭像組件、返回組件、徽章組件、按鈕組件、卡片組件、篩選框組件、全屏組件、圖片組件、輸入框組件、loading組件、遮罩組件、搜索框組件、滑屏組件、多行輸入框組件、標題組件、麪包屑組件、按鈕組組件、反色按鈕組件、自適應按鈕組件、密碼框組件和聯動選擇組件

BaseArticle.js  // 文章組件
BaseAvatar.js // 頭像組件
BaseBack.js // 返回組件
BaseBadge.js  // 徽章組件
BaseButton.js // 按鈕組件
BaseCard.js // 卡片組件
BaseFilterList.js // 篩選框組件
BaseFullScreen.js // 全屏組件
BaseImg.js  // 圖片組件
BaseInput.js  // 輸入框組件
BaseLoading.js  // loading組件
BaseMask.js // 遮罩組件
BaseSearchBox.js  // 搜索框組件
BaseSwipeItem.js  // 滑屏組件
BaseTextArea.js // 多行輸入框組件
BaseTitle.js  // 標題組件
BreadCrumb.js // 麪包屑組件
ButtonBox.js  // 按鈕組組件
ButtonInverted.js // 反色按鈕組件
ButtonWithAutoWidth.js  // 自適應按鈕組件
InputPassword.js  // 密碼框組件
LinkageSelector.js // 聯動選擇組件

【功能組件】

　　按照功能來設置目錄，以下所示

彈出框(Alert)
登陸框(Auth)
類別管理(Category)
評論管理(Comment)
主頁(Home)
點贊管理(Like)
文章管理(Post)
七牛傳圖(Qiniu)
推薦設置(Recommend)
頁面尺寸(Size)
用戶管理(User)

 

總體思路

【全屏佈局】

　　使用設置高度的全屏佈局方式，主要經過calc來實現

  <section style={{ height: `${wrapHeight}px` }}>
    <HomeHeader />
    <Inner>
        ...
    </Inner>
    <HomeNav />
  </section>

const Header = styled.header`
  height: 50px;
`
const Inner = styled.main`
  height: calc(100% - 100px);
  background: ${PRIMARY_BG_COLOR};
`
const List = styled.nav`
  height: 50px;
`

【層級管理】

　　項目的層級z-index，只使用0-3

　　全屏的彈出框優化級最高，設置爲3；側邊欄設置爲2；頁面元素默認爲0，若有須要，要設置爲1

【全局彈出層】

　　在入口文件app.js中設置全局的彈出層和loading，全部組件均可以共用

// app.js
  render() {
    const { doShowLoading, alertText, hideAlertText } = this.props
    return (
      <React.Fragment>
        { doShowLoading && <AlertWithLoading /> }
        { !!alertText && <AlertWithText text={alertText} onExit={hideAlertText} />}
        <Router history={history} >
            ...
        </Router>
      </React.Fragment>
    )
  }

【路由管理】

　　react-router-dom第四版採用了動態路由，在組件目錄內，以組件同名文件保存該組件內的路由

// category.js
const Category = () =>
  (
    <Switch>
      <Route exact path="/categories" component={CategoryRootList} />
      <Route exact path="/categories/:id" component={CategoryItemList} />
      <Route path="/categories/:id/add" component={AddCategory} />
      <Route path="/categories/:id/update" component={UpdateCategory} />
      <Route path="/categories/:id/delete" component={DeleteCategory} />
    </Switch>
  )

【狀態管理】

　　參照vuex的狀態管理方式，將每一個組件的狀態管理命名爲module.js，保存在當前組件目錄下

import auth from '@/components/Auth/module'
import size from '@/components/Size/module'
import alert from '@/components/Alert/module'
import categories from '@/components/Category/module'
import posts from '@/components/Post/PostsModule'
import post from '@/components/Post/PostModule'
import comments from '@/components/Comment/module'
import likes from '@/components/Like/module'
import qiniu from '@/components/Qiniu/module'
import users from '@/components/User/module'

const rootReducer = combineReducers({
  auth, size, alert, categories, posts, post, comments, likes, qiniu, users
})

　　每一個模塊的狀態都設置有filter字段，方便擴展

// action-types
export const SET_COMMENTS_FILTER = 'SET_COMMENTS_FILTER'

// state
const initialState = {
  filter: null,
  docs: []
}

// action
export const setCommentsFilter = filter => dispatch => new Promise(resolve => {
  resolve()
  dispatch({ type: SET_COMMENTS_FILTER, filter })
})

// reducer
const comments = (state = initialState, action) => {
  switch (action.type) {
  case SET_COMMENTS_FILTER:
    return { ...state, filter: action.filter }

}
export default comments

// selector
export const getCommentsFilter = state => state.comments.filter

【數據傳遞】

　　組件間的數據傳遞方式通常有三種，一種是使用react中的函數傳參，另外一種是使用路由的location屬性，還有一種是經過redux

　　一、函數傳參

// PostRecommendItem
<BaseSearchBox
  searchText={title}
  datas={posts}
  onInput={this.onInput}
  onBack={() => { this.setState({ doShowSearchBox: false }) }}
/>

  onInput = data => {
    this.setState({ doShowSearchBox: false })
    const { updatePostAsync, showAlertText } = this.props
    const { prevData, datas } = this.statethis.setState({
        datas: datas.map(t => {
          if (t.number === data.number) return data
          return t
        })
      })
　　　　...
  }

// BaseSearchBox
<List innerRef={this.scrollRef}>
  {resultDatas.map(t =>
    <Item key={t._id} onClick={() => { onInput && onInput(t) }}>{t.title}</Item>)}
  {resultDatas.length >= limitNumber && !doNeedMoreDatas &&
    <ExtendedItem>已經到底了...</ExtendedItem>}
</List>

　　二、location傳遞state

// CommentForm
  constructor(props) {
    super(props)
    const { operate, location } = props
    if (operate === 'update' && location.state) {
      const { content } = location.state.comment
      this.state = { content }
    } else {
      this.state = { content: '' }
    }
  }

// CommentList
history.push({ pathname: `${BasePostUrl}/comments/${t._id}/update`, state: { comment: t } })

　　三、使用redux

//CategoryForm.js
  componentDidMount() {
    const { operate, match, setCategoriesFilter } = this.props
    setCategoriesFilter(Number(match.params.id)).then(() => {
      if (operate === 'update') {
        const { category } = this.props
        const { name, description } = category
        if (name) {
          this.setState({ name, description })
        } else {
          history.push(`/categories/${getParentNumber(Number(match.params.id))}`)
        }
      }
    })
  }
const mapStateToProps = state => ({
  category: getCategoryByFilter(state)
})
export default connect(mapStateToProps, { setCategoriesFilter })(CategoryForm)

 

項目優化

【子頁面刷新】

　　子頁面刷新時，可能會出現得不到從父級傳遞過來的數據的狀況，筆者的處理是跳轉到父級頁面

  componentDidMount() {
    const { operate, location, match } = this.props
    if (operate === 'update' && !location.state) {
      history.push(`/posts/${match.params.postId}/comments`)
    }
  }

【reselect】

　　經過reselect來保存狀態，減小狀態查詢，提高性能

export const getRecommendedCategories = createSelector(getCategories,
  datas => datas.filter(t => t.recommend).sort((a, b) => a.index - b.index))

【promise】

　　爲action添加Promise，方便狀態改變後的處理

export const setCategoriesFilter = filter => dispatch => new Promise(resolve => {
  resolve()
  dispatch({ type: SET_CATEGORIES_FILTER, filter })
})

【組件共用】

　　因爲編輯和新建組件用到的元素是同樣的，只不過，新建組件時內容爲空，編輯組件時須要添加內容，這時就能夠複用組件

const AddCategory = ({ match }) => <CategoryForm match={match} operate="add" />
const UpdateCategory = ({ match }) => <CategoryForm match={match} operate="update" />

【清理環境】

　　若是使用addEventListener綁定了事件處理函數，在組件銷燬的時候，要及時清理環境

  componentDidMount() {
    this.scrollRef.current.addEventListener('scroll', throttle(this.onScroll))
  }
  componentWillUnmount() {
    this.scrollRef.current.removeEventListener('scroll', throttle(this.onScroll))
  }

【生命週期函數】

　　一、使用getDerivedStateFromProps生命週期函數時，若是不設置constructor，會有以下警告

Did not properly initialize state during construction. Expected state to be an object, but it was undefined.

　　添加空state便可解決

  constructor(props) {
    super(props)
    this.state = {}
  }

　　二、使用componentDidMount生命週期函數時，若是在該函數中直接使用this.setState()，會有以下警告

Do not use setState in componentDidMount  react/no-did-mount-set-state

　　將state設置轉移到then方法，或者另外一個函數中便可

componentDidMount() {
  this.test()
}
test() {
  this.setState({ name: '' })
}

【應用和數據分離】

　　使用配置數據，實現數據和應用分離，配置數據包括API調用地址和顏色值，以常量的形式存儲在constants目錄下

// API.js
let API_HOSTNAME
if (process.env.NODE_ENV === 'development') {
  API_HOSTNAME = '/local'
} else {
  API_HOSTNAME = '/api'
}

export const BASE_AUTH_URL = `${API_HOSTNAME}/auth/admin`
export const BASE_USER_URL = `${API_HOSTNAME}/users`
export const BASE_POST_URL = `${API_HOSTNAME}/posts`
export const BASE_TOPIC_URL = `${API_HOSTNAME}/topics`
export const BASE_CATEGORY_URL = `${API_HOSTNAME}/categories`
export const BASE_LIKE_URL = `${API_HOSTNAME}/likes`
export const BASE_COMMENT_URL = `${API_HOSTNAME}/comments`
export const BASE_RECOMMEND_URL = `${API_HOSTNAME}/recommends`
export const BASE_QINIU_URL = `${API_HOSTNAME}/qiniu`
export const STATIC = 'https://static.xiaohuochai.site'
export const CLIENT_URL = 'https://www.xiaohuochai.cc'

// Colors.js
export const PRIMARY_COLOR = '#00a8e5'
export const DARK_COLOR = '#0066cc'
export const ERROR_COLOR = '#f67280'
export const PRIMARY_BG_COLOR = '#fafafa'
export const TRANSPARENT_BG_COLOR = 'rgba(7, 17, 27, .4)'
export const DARK_BG_COLOR = '#f5f5f5'
export const PRIMARY_LINE_COLOR = '#eee'
export const DARK_LINE_COLOR = '#ebedf0'

【函數節流】

　　爲觸發頻率較高的函數使用函數節流

/**
 * 函數節流
 * @param {fn} function test(){}
 * @return {fn} function test(){}
 */
export const throttle = (fn, wait = 100) => function func(...args) {
  if (fn.timer) return
  fn.timer = setTimeout(() => {
    fn.apply(this, args)
    fn.timer = null
  }, wait)
}

 

功能實現

【登陸設置】

　　將用戶信息保存到sessionStorage中並檢測，若是不存在，則跳轉到登陸頁面

<Router history={history} >
  <Switch>
    <Route path="/login" component={AuthLogin} />
    <Route
      path="/"
      render={props => {
        if (sessionStorage.getItem('token') && sessionStorage.getItem('user')) {
          return <Home {...props} />
        }
        return <Redirect to="/login" />
      }}
    />
  </Switch>
</Router>

【全角空格佔位】

　　使用全角空格佔位，從而使文字對齊

<Label htmlFor="username">用戶名：</Label>
<Label htmlFor="password">&emsp;密碼：</Label>

【一像素邊框】

　　將僞元素高度設置爲1px，而後用 transform縮小到原來的一半

div {
  position: relative;
  &::after {
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    transform: scaleY(.5);
    content: '';
  }
`

【緩動彈出層】

　　過渡彈出層有兩種實現方式，包括transition和animation，該項目使用transition的方式實現

<StyledMask className={doShowMenuList ? 'mask-show' : ''} />
<StyledList className={doShowMenuList ? 'transform-show' : ''} />

const StyledList = styled(HomeMenuList)`
  transform: translateY(-100%);
  transition: .2s;
`
const StyledMask = styled(BaseMask)`
  z-index: 2;
  display: none;
`
const MenuBox = styled.div`
  cursor: pointer;
  & .transform-show {
    transform: translateY(0);
  }
  & .mask-show {
    display: block;
  }
`

【圖標管理】

　　全部的圖標都使用SVG格式，存儲在common/BaseImg.js文件中

// BaseImg.js
...
export const Home = props => (
  <svg height={24} viewBox="0 0 24 24" width={24} {...props}>
    <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />
    <path d="M0 0h24v24H0z" fill="none" />
  </svg>
)

【搜索實現】

　　處理搜索功能時，須要特別處理正則表達式中的元字符

  static getReg(searchText) {
    return new RegExp(searchText.replace(/[[(){}^$|?*+.\\-]/g, '\\$&'), 'ig')
  }

　　若是將間隔符-放在中間，大寫字母，如V會被匹配爲/V

return new RegExp(searchText.replace(/[[(){}^$|?*+.-\\]/g, '\\$&'), 'ig')

　　此時的-被識別爲範圍間隔符，至關於.到\之間的字符，正好包括了全部的大寫字母，因此。必定要把-放在最後

【滑屏實現】

　　滑屏主要經過touch事件來實現，通常地，有兩種形式。一種是當前元素滑動，另外一種是其餘元素滑動。該項目採用較簡單的第二種

  static checkSwipe(absMove, duration) {
    const THRESHOLD = 10
    const SHORTESTTIME = 300
    // 距離大於10，且時間小於300ms，纔算作一次滑動
    return Boolean(absMove > THRESHOLD && duration < SHORTESTTIME)
  }
  onTouchStart = e => {
    this.startTime = new Date().getTime()
    this.startX = e.targetTouches[0].pageX
    this.startY = e.targetTouches[0].pageY
  }
  onTouchEnd = e => {
    const { pageX, pageY } = e.changedTouches[0]
    // 若是y軸移動距離大於元素高度，說明手指已經移出元素自己，則取消滑動
    if (pageY - this.startY > this.clientHeight) {
      return false
    }
    const moveX = pageX - this.startX
    const duration = new Date().getTime() - this.startTime
    // 若是符合滑動要求，且向左滑動，則控制條滑出
    if (BaseSwipeItem.checkSwipe(Math.abs(moveX), duration) && moveX < 0) {
      this.setState({ doShowControlBox: true })
    } else {
      this.setState({ doShowControlBox: false })
    }
    return true
  }

【密碼框實現】

　　密碼框的右側通常都有一個小圖標用於顯示密碼

<Wrap className={className} {...rest} >
  <StyledInput
    id="password"
    textIndent={textIndent}
    color={color}
    value={value}
    onChange={onChange}
    type={doShowPassword ? 'password' : 'text'}
  />
  { doShowPassword ?
    <Visibility onClick={onChangeStatus} />
    : <VisibilityOff onClick={onChangeStatus} />
  }
</Wrap>

【fetch函數封裝】

　　該項目是基於create-react-app構建的，自帶fetch功能。封裝fetch函數到utils目錄下的async.js文件中，將loading組件、alert組件整合到fetch函數的整個數據獲取過程當中

import { showLoading, hideLoading, showAlertText, hideAlertText } from '@/components/Alert/module'
import { logout } from '@/components/Auth/module'

const async = ({ dispatch, url, method, data, headers, success, fail, doHideAlert }) => {
  // 顯示loading
  dispatch(showLoading())
  let fetchObj = {}
  if (method) {
    fetchObj = {
      method,
      body: JSON.stringify(data),
      headers: new Headers({ ...headers, 'Content-Type': 'application/json' })
    }
  }
  fetch(url, fetchObj).then(res => {
    // 關閉loading
    dispatch(hideLoading())
    return res.json()
  }).then(json => {
    // 成功
    if (json.code === 0) {
      !doHideAlert && dispatch(showAlertText(json.message))
      setTimeout(() => {
        dispatch(hideAlertText())
      }, 1000)
      success && success(json.result)
      // 自定義錯誤
    } else if (json.code === 1) {
      dispatch(showAlertText(json.message))
      // 系統錯誤
    } else if (json.code === 2) {
      dispatch(showAlertText(json.message))
      fail && fail(json.err)
      // 認證失敗
    } else if (json.code === 3) {
      dispatch(showAlertText(json.message))
      dispatch(logout)
      // 權限不足
    } else if (json.code === 4) {
      dispatch(showAlertText(json.message))
    }
  }).catch(() => {
    dispatch(showAlertText('服務器故障'))
  })
}

export default async

【組件內路由】

　　若是要在組件內使用路由功能，可封裝utils/history.js文件

// utils/history.js
import createBrowserHistory from 'history/createBrowserHistory'
const customHistory = createBrowserHistory()
export default customHistory

　　Router中使用history={history}，而不是BrowserRouter

// app.js
import history from '@/utils/history'
<Router history={history} >
  <Switch>
    <Route path="/login" component={AuthLogin} />
    <Route
      path="/"
      render={props => {
        if (sessionStorage.getItem('token') && sessionStorage.getItem('user')) {
          return <Home {...props} />
        }
        return <Redirect to="/login" />
      }}
    />
  </Switch>
</Router>

　　而後，在組件中引用便可

import  history  from '@/utils/history'
// 跳轉到首頁
history.push('/')

 

兼容處理

【虛擬鍵盤】

　　andriod下，虛擬鍵盤會影響可視區域的高度；而IOS下，不會影響

可視區域高度 = document.documentElement.clientHeight - 虛擬鍵盤的高度;

　　bug重現以下：

　　因此，要將包含input域的頁面高度設爲固定

　　在頁面初始化時，獲取頁面高度

// app.js
  componentDidMount() {
    const { setWrapSize } = this.props
    const { clientHeight, clientWidth } = document.documentElement
    setWrapSize({ clientHeight, clientWidth })
    window.addEventListener('orientationchange', this.setSize)
  }

　　而後經過行間樣式，將此高度設置到包含input域的頁面上

// BaseFullScreen
<Wrap className={className} style={{ height: `${wrapHeight}px` }} {...rest}>{children}</Wrap>

【取消自動大寫】

　　IOS下，input域會自動大寫首字母，設置autoCapitallize="off"便可

const BaseInput = ({ value, onChange, ...rest }) =>
  <Input {...rest} value={value} onChange={onChange} autoComplete="off" autoCapitalize="off" />

【光標顏色】

　　默認狀況下，光標顏色與字體顏色color相同，但也能夠經過caret-color屬性來單獨設置

　　可是，IOS的光標不支持caret-color，與字體顏色無關，默認爲紫藍色。因此，儘可能不要設置藍色或紫色背景，不然光標看不清楚

【頁面放大】

　　IOS下，input獲取焦點時會放大，meta設置user-scalable=no，可取消放大效果

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, shrink-to-fit=no">

【圓角】

　　IOS下，input域只顯示底邊框時，會出現底邊圓角效果，設置border-radius:0便可

border-radius:0

【輪廓outline】

　　android瀏覽器下，input域處於焦點狀態時，默認會有一圈淡黃色的輪廓outline效果

　　經過設置outline:none可將其去除

outline: none

【點擊背景】

　　在移動端，點擊可點擊元素時，android下會出現淡藍色背景，IOS下會出現灰色背景

　　bug重現以下：

　　能夠經過-webkt-tap-hightlight-color屬性的設置，取消點擊時出現的背景效果

* {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

【局部不滾動】

　　IOS下，可能會出現局部滾動不流暢，甚至局部不滾動的bug

　　經過在該元素上設置overflow-scrolling屬性爲touch便可解決

div {
  -webkit-overflow-scrolling: touch;
}

【高度無效】

　　在IOS下，設置height:100%，若是父級的flex值爲1，而沒有設置具體高度，則100%高度設置無效

　　處理方法是，在父級經過計算來設置具體高度height，如height: calc(100% - 100px)

 

 

 

網站PWA升級

 

前面的話

　　漸進式網絡應用 ( Progressive Web Apps )，即咱們所熟知的 PWA，是 Google 提出的用前沿的 Web 技術爲網頁提供 App 般使用體驗的一系列方案。PWA 本質上是 Web App，藉助一些新技術也具有了 Native App 的一些特性。本文將詳細介紹針對現有網站的PWA升級

 

效果演示

　　之前端小站xiaohuochai.cc的PWA效果作演示，github移步至此

【添加到桌面】

【離線緩存】

 　　因爲手機錄屏選擇沒法進行離線錄製，改由模擬器模擬離線效果

 

概述

　　PWA 的主要特色包括下面三點：

　　一、可靠 - 即便在不穩定的網絡環境下，也能瞬間加載並展示

　　二、體驗 - 快速響應，而且有平滑的動畫響應用戶的操做

　　三、粘性 - 像設備上的原生應用，具備沉浸式的用戶體驗，用戶能夠添加到桌面

　　主要功能包括站點可添加至主屏幕、全屏方式運行、支持離線緩存、消息推送等

【PRPL模式】

　　「PRPL」（讀做 「purple」）是 Google 的工程師提出的一種 web 應用架構模式，它旨在利用現代 web 平臺的新技術以大幅優化移動 web 的性能與體驗，對如何組織與設計高性能的 PWA 系統提供了一種高層次的抽象

　　「PRPL」其實是 Push/Preload、Render、Precache、Lazy-Load 的縮寫

　　一、PUSH/PRELOAD，推送/預加載初始 URL 路由所需的關鍵資源

　　二、RENDER，渲染初始路由，儘快讓應用可被交互

　　三、PRE-CACHE，用 Service Worker 預緩存剩下的路由

　　四、LAZY-LOAD 按需懶加載、懶實例化剩下的路由

【Service workers】

　　Service Workers 是谷歌 chrome 團隊提出並大力推廣的一項 web 技術。在 2015 年，它加入到 W3C 標準，進入草案階段

　　PWA 的關鍵在於 Service Workers 。就其核心來講，Service Workers 只是後臺運行的 worker 腳本。它們是用 JavaScript 編寫的，只需短短几行代碼，它們即可使開發者可以攔截網絡請求，處理推送消息並執行許多其餘任務

　　Service Worker 中用到的一些全局變量:

self: 表示 Service Worker 做用域, 也是全局變量
caches: 表示緩存
skipWaiting: 表示強制當前處在 waiting 狀態的腳本進入 activate 狀態
clients: 表示 Service Worker 接管的頁面

　　Service Worker 的工做機制大體以下：用戶訪問一個具備 Service Worker 的頁面，瀏覽器就會下載這個 Service Worker 並嘗試安裝、激活。一旦激活，Service Worker 就到後臺開始工做。接下來用戶訪問這個頁面或者每隔一個時段瀏覽器都會下載這個 Service Worker，若是監測到 Service Worker 有更新，就會從新安裝並激活新的 Service Worker，同時 revoke 掉舊的 Service Worker，這就是 SW 的生命週期

　　由於 Service Worker 有着最近的權限接觸數據，所以 Service Worker 只能被安裝在 HTTPS 加密的頁面中，雖然無形當中提升了 PWA 的門檻，不過也是爲了安全作考慮

 

離線緩存

　　下面來經過service worker實現離線緩存

　　通常地，經過sw-precache-webpack-plugin插件來實現動態生成service worker文件的效果

　　不過，首先要在index.html中引用service worker

    <script>
      (function() {
        if('serviceWorker' in navigator) {
          navigator.serviceWorker.register('/service-worker.js');
        }
      })()
    </script>

【SPA】

　　經過create-react-app生成的react SPA應用默認就進行了sw-precache-webpack-plugin的設置。可是，其只對靜態資源進行了設置

　　若是是接口資源，則通常的處理是優先經過網絡訪問，若是網絡不通，再經過service worker的緩存進行訪問

　　webpack.config.prod.js文件的配置以下

    const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');
    new SWPrecacheWebpackPlugin({
      // By default, a cache-busting query parameter is appended to requests
      // used to populate the caches, to ensure the responses are fresh.
      // If a URL is already hashed by Webpack, then there is no concern
      // about it being stale, and the cache-busting can be skipped.
      dontCacheBustUrlsMatching: /\.\w{8}\./,
      filename: 'service-worker.js',
      logger(message) {
        if (message.indexOf('Total precache size is') === 0) {
          // This message occurs for every build and is a bit too noisy.
          return;
        }
        if (message.indexOf('Skipping static resource') === 0) {
          // This message obscures real errors so we ignore it.
          // https://github.com/facebookincubator/create-react-app/issues/2612
          return;
        }
        console.log(message);
      },
      minify: true,
      // For unknown URLs, fallback to the index page
      navigateFallback: publicUrl + '/index.html',
      // Ignores URLs starting from /__ (useful for Firebase):
      // https://github.com/facebookincubator/create-react-app/issues/2237#issuecomment-302693219
      navigateFallbackWhitelist: [/^(?!\/__).*/],
      // Don't precache sourcemaps (they're large) and build asset manifest:
      staticFileGlobsIgnorePatterns: [/\.map$/, /asset-manifest\.json$/],
      runtimeCaching: [{
          urlPattern: '/',
          handler: 'networkFirst'
        },
        {
          urlPattern: /\/api/,
          handler: 'networkFirst'
        }
      ]
    })

【SSR】

　　若是是服務器端渲染的應用，則配置基本相似。但因爲沒法使用代理，則須要設置網站實際路徑，且因爲靜態資源已經存到CDN，則緩存再也不經過service worker處理

　　配置以下

    new SWPrecacheWebpackPlugin({
      dontCacheBustUrlsMatching: /\.\w{8}\./,
      filename: 'service-worker.js',
      logger(message) {
        if (message.indexOf('Total precache size is') === 0) {
          return;
        }
        if (message.indexOf('Skipping static resource') === 0) {
          return;
        }
        console.log(message);
      },
      navigateFallback: 'https://www.xiaohuochai.cc',
      minify: true,
      navigateFallbackWhitelist: [/^(?!\/__).*/],
      dontCacheBustUrlsMatching: /./,
      staticFileGlobsIgnorePatterns: [/\.map$/, /\.json$/],
      runtimeCaching: [{
          urlPattern: '/',
          handler: 'networkFirst'
        },
        {
          urlPattern: /\/(posts|categories|users|likes|comments)/,
          handler: 'networkFirst'
        },
      ]
    })
  ]

 

添加到屏幕

　　沒人願意畫蛇添足地在移動設備鍵盤上輸入長長的網址。經過添加到屏幕的功能，用戶能夠像從應用商店安裝本機應用那樣，選擇爲其設備添加一個快捷連接，而且過程要順暢得多

【配置項說明】

　　使用manifest.json文件來實現添加到屏幕的功能，下面是該文件內的配置項

short_name: 應用展現的名字
icons: 定義不一樣尺寸的應用圖標
start_url: 定義桌面啓動的 URL
description: 應用描述
display: 定義應用的顯示方式，有 4 種顯示方式，分別爲：
　　fullscreen: 全屏
　　standalone: 應用
　　minimal-ui: 相似於應用模式，但比應用模式多一些系統導航控制元素，但又不一樣於瀏覽器模式
　　browser: 瀏覽器模式，默認值
name: 應用名稱
orientation: 定義默認應用顯示方向，豎屏、橫屏
prefer_related_applications: 是否設置對應移動應用，默認爲 false
related_applications: 獲取移動應用的方式
background_color: 應用加載以前的背景色，用於應用啓動時的過渡
theme_color: 定義應用默認的主題色
dir: 文字方向，3 個值可選 ltr(left-to-right), rtl(right-to-left) 和 auto(瀏覽器判斷)，默認爲 auto
lang: 語言
scope: 定義應用模式下的路徑範圍，超出範圍會以瀏覽器方式顯示

　　下面是一份常規的manifest.json文件的配置

{
  "name": "小火柴的前端小站",
  "short_name": "前端小站",
  "start_url": "/",
  "display": "standalone",
  "description": "",
  "theme_color": "#fff",
  "background_color": "#d8d8d8",
  "icons": [{
      "src": "./logo_32.png",
      "sizes": "32x32",
      "type": "image/png"
    },
    {
      "src": "./logo_48.png",
      "sizes": "48x48",
      "type": "image/png"
    },
    {
      "src": "./logo_96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "./logo_144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "./logo_192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "./logo_256.png",
      "sizes": "256x256",
      "type": "image/png"
    }
  ]
}

【注意事項】

　　一、在 Chrome 上首選使用 short_name，若是存在，則優先於 name 字段使用

　　二、圖標的類型最好是png，，且存在144px的尺寸，不然會獲得以下提示

Site cannot be installed: a 144px square PNG icon is required, but no supplied icon meets this requirement

　　三、start_url表示項目啓動路徑

　　若是是'/'，則啓動路徑爲

localhost:3000/

　　若是是'/index.html'，則啓動路徑爲

localhost:3000/index.html

　　因此，最好填寫'/'

【HTML引用】

 　　在HTML文檔中經過link標籤來引用manifest.json文件

<link rel="manifest" href="/manifest.json">

　　要特別注意manifest文件路徑問題，要將該文件放到靜態資源目錄下，不然，會找不到該文件，控制檯顯示以下提示

Manifest is not valid JSON. Line: 1, column: 1, Unexpected token

　　若是index.html也位於靜態資源目錄，則設置以下

<link rel="manifest" href="/manifest.json">

　　若是index.html位於根目錄，而靜態資源目錄爲static，則設置以下

<link rel="manifest" href="/static/manifest.json" />

【meta標籤】

　　爲了更好地SEO，須要經過meta標籤設置theme-color

<meta name="theme-color" content="#fff"/>

【SSR】

　　若是是服務器端配置，須要在server.js文件中配置manifest.json、logo、icon等文件的靜態路徑

app.use(express.static(path.join(__dirname, 'dist')))
app.use('/manifest.json', express.static(path.join(__dirname, 'manifest.json')))
app.use('/logo', express.static(path.join(__dirname, 'logo')))
app.use('/service-worker.js', express.static(path.join(__dirname, 'dist/service-worker.js')))

移動端常見問題處理

 

前面的話

　　本文將詳細介紹移動web開發中的常見問題

 

Input

【光標顏色】

　　默認狀況下，光標顏色與字體顏色color相同，但也能夠經過caret-color屬性來單獨設置

caret-color: auto;
caret-color: transparent;
caret-color: currentColor;
caret-color: red;
caret-color: #5729e9;
caret-color: rgb(0, 200, 0);
caret-color: hsla(228, 4%, 24%, 0.8);

　　可是，IOS的光標不支持caret-color，與字體顏色無關，默認爲紫藍色。因此，儘可能不要設置藍色或紫色背景，不然光標看不清楚

【光標高度】

　　input域的光標高度與行高line-height相同，因此不要設置過高的行高，能夠經過設置上下padding來撐開高度

【放大】

　　IOS下，input獲取焦點時會放大，meta設置user-scalable=no，可取消放大效果

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, shrink-to-fit=no">

【自動大寫】

　　通常地，IOS下默認開啓鍵盤的首字母自動大寫功能，這樣輸入英文的時候，首字母便會自動大寫

　　可是，有些時候並不但願一直是首字母大寫的。好比用戶名這個字段，若是字段自己就是區分大小寫的，首字母自動大寫每每會給用戶帶來麻煩。能夠經過在表單元素上能夠經過設置autocapitalize="off"來關閉

<input type="text" autocapitalize="off">

【圓角】

　　IOS下，input域只顯示底邊框時，會出現兩個底部底邊圓角效果，設置border-radius:0便可

border-radius:0

【自動保存】

　　input域默認會開啓自動保存功能，可使用autocomplete="off"屬性將其關閉

<input autocomplete="off" />

　　要特別注意的是，若是使用react框架，須要將autocomplete替換爲autoComplete這種小駝峯形式

【輪廓outline】

　　android瀏覽器下，input域處於焦點狀態時，默認會有一圈淡黃色的輪廓outline效果

　　經過設置outline:none可將其去除

outline: none

【虛擬鍵盤】

　　IOS彈出虛擬鍵盤不影響可視區域大小，而android手機彈出虛擬鍵盤時會影響。因此，最好將包含input域的頁面高度設爲固定

　　在頁面初始化時，獲取頁面高度

// app.js
  componentDidMount() {
    const { setWrapSize } = this.props
    const { clientHeight, clientWidth } = document.documentElement
    setWrapSize({ clientHeight, clientWidth })
    window.addEventListener('orientationchange', this.setSize)
  }

　　而後經過行間樣式，將此高度設置到包含input域的頁面上

// BaseFullScreen
<Wrap className={className} style={{ height: `${wrapHeight}px` }} {...rest}>{children}</Wrap>

 

樣式

【點擊背景】

　　在移動端，點擊可點擊元素時，android下會出現淡藍色背景，IOS下會出現灰色背景

　　能夠經過-webkt-tap-hightlight-color屬性的設置，取消點擊時出現的背景效果

* {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

【appearance】

　　使用appearance:none主要用來去除表單類元素的中瀏覽器內置樣式，如去除data類型input域的叉叉，去除number類型input域的上下箭頭等

-webkit-appearance: none;

【禁止選中】

　　有時不但願用戶在網站上選擇文本，或許是出於版權的緣由，如電子書網站。一般使用js來實現

　　另外一個方案就是，將-webkit-user-select設爲none

-webkit-user-select：none;

【禁止文字縮放】

　　部分手機上，切換橫豎屏時，會縮放字體。使用以下設置，能夠禁止文字縮放

* {
  -webkit-text-size-adjust:100%;
}

【文本渲染】

　　使用text-rendering:optimizeLegibility屬性，可讓瀏覽器在繪製文本時將着重考慮易讀性，而不是渲染速度和幾何精度.它會使字間距和連字有效

text-rendering: optimizeLegibility;

　　該屬性在移動設備上會形成比較明顯的性能問題

【文本平滑顯示】

　　-webkit-font-smoothing屬性能夠用來控制字體的像素顯示是否平滑

none 關閉抗鋸齒，字體邊緣犀利。
antialiased 字體像素級平滑，在深色背景上會讓文字看起來更細了
subpixel-antialiased 字體亞像素級平滑，主要爲了在非視網膜設備下更好的顯示

body { -webkit-font-smoothing: antialiased; }

【輪廓outline】

　　input、textarea等表單類標籤，在獲取焦點的狀況下，在andriod系統下，會出現淡黃色輪廓outline，使用outline:none將其去除

outline: none

【placeholder】

　　placeholder默認是淺灰色，若是input域是淺灰色背景，則這時placeholder的文本與背景顏色相近，沒法清晰顯示，就須要設置placeholder的顏色

　　能夠經過僞元素來進行設置

::placeholder {
    color: #fff;
  }

【清除按鈕圓角】

input,button{
  -webkit-appearance:none;
  border-radius:0;
}

【滾動回彈】

　　-webkit-overflow-scrolling 屬性控制元素在移動設備上是否使用滾動回彈效果

auto 使用普通滾動, 當手指從觸摸屏上移開，滾動會當即中止
touch 使用具備回彈效果的滾動, 當手指從觸摸屏上移開，內容會繼續保持一段時間的滾動效果。繼續滾動的速度和持續的時間和滾動手勢的強烈程度成正比。同時也會建立一個新的堆棧上下文

body {
  -webkit-overflow-scrolling: touch;
}

　　必定要設置該屬性，不然在IOS下會出現局部滾動不流暢的bug

【1倍行高】

　　設置line-height:1，即行高爲1時，有的頁面會出現文字顯示不全的狀況，因此行高設置必定要大於1

 

1像素邊框

　　因爲retina屏的緣由，1px 的 border 會顯示成兩個物理像素，因此看起來會感受很粗，這是一個移動端開發常見的問題

　　解決方案有不少，但都有本身的優缺點

　　一、0.5px 邊框

　　從iOS 8開始，iOS 瀏覽器支持 0.5px 的 border，可是在 Android 上是不支持的，0.5px 會被認爲是 0px，因此這種方法，兼容性不好

　　二、背景漸變

　　CSS3 有了漸變背景，能夠經過漸變背景實現 1px 的 border，實現原理是設置 1px 的漸變背景，50% 有顏色，50% 是透明的

@mixin commonStyle() {
  background-size: 100% 1px,1px 100% ,100% 1px, 1px 100%;
  background-repeat: no-repeat;
  background-position: top, right top,  bottom, left top;
}
@mixin border($border-color) {
  @include commonStyle();
  background-image:linear-gradient(180deg, $border-color, $border-color 50%, transparent 50%),
  linear-gradient(270deg, $border-color, $border-color 50%, transparent 50%),
  linear-gradient(0deg, $border-color, $border-color 50%, transparent 50%),
  linear-gradient(90deg, $border-color, $border-color 50%, transparent 50%);
}

　　三、僞類 + transform

　　這類方法的實現原理是用僞元素高度設置爲1px，而後用 transform縮小到原來的一半

div {
  position: relative;
  &::after {
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    transform: scaleY(.5);
    content: '';
  }
`

 

佈局

【vh】

　　頁面使用vh來控制元素高度的時候，在安卓端瀏覽器虛擬鍵盤彈出時，致使視口高度改變，以致於vh的取值改變

// 正常模式下
100vh = document.documentElement.clientHeight;

// 安卓端彈出虛擬鍵盤狀況下
100vh = document.documentElement.clientHeight - 虛擬鍵盤的高度;

　　這種狀況致使了在虛擬鍵盤彈出時，頁面中使用vh定高的元素的大小被壓縮，形成佈局錯位以及文字溢出

　　因此，最好將包含input域的頁面高度設爲固定

【100%與100vh】

　　100vh指的是視口，即屏幕高度的100%，不只包括瀏覽器可視高度，還包括瀏覽器地址欄高度。而100%高度，是頁面高度的100%

　　因此，在全屏狀況下，100vh等於100%高度，不然，100vh大於100%高度

【高度無效】

　　在IOS下，設置height:100%，若是父級的flex值爲1，而沒有設置具體高度，則100%高度設置無效

　　處理方法是，在父級經過計算來設置具體高度height，如height: calc(100% - 100px)

 

事件

【鼠標事件】

　　因爲移動設備沒有鼠標，因此與電腦端有一些不一樣之處

　　一、不支持dblclick雙擊事件。在移動設備中雙擊瀏覽器窗口會放大畫面

　　二、單擊元素會觸發mousemove事件

　　三、兩個手指放在屏幕上且頁面隨手指移動而滾動時會觸發mousewheel和scroll事件

【touch事件】

　　新版的chrome下，不支持直接給document和body設置touch事件，因此下列代碼無效

document.addEventListener('touchstart', function(e) {
  e.preventDefault();
})

 

圖片

【SVG】

　　SVG圖片因爲其矢量的性質，縮放不失真，則代碼量較少，大量地應用在小圖標上。但在使用的過程當中，有一些要注意的地方

　　一、在僞類中添加SVG，在IOS下svg不顯示

　　二、在頁面中添加SVG，在android的微信中下會出現設置透明度opacity的元素有的不顯示的狀況，因此儘可能不設置透明度

　　三、在mask屬性中設置SVG，能夠經過background-color給SVG變換顏色

【base64】

　　要特別注意的是，圖片變化base64格式以後，再添加查詢字符串，會報錯

【緩存】

　　移動端更改同名圖片沒法清除緩存。因此，仍是要在圖片命名上作文章

 

meta

【shrink-to-fit=no】

　　IOS9+系統下，使用Viewport元標記"width=device-width"會致使頁面縮小以適應溢出視口邊界的內容。能夠經過添加"shrink-to-fit=no"到meta標籤來覆蓋此行爲，增長的值將阻止頁面縮放以適應視口

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no，shrink-to-fit=no">

【頁面縮放】

　　在meta標籤中設置了禁止縮放user-scalable=no，能夠實如今IOS下input域焦點狀態時放大被禁止的效果。可是，仍然沒法阻止頁面總體的縮放

 【識別規則】

　　一、打電話

<a href="tel:0755-10086">打電話給:0755-10086</a>

　　二、發短信，winphone系統無效

<a href="sms:10086">發短信給: 10086</a>

 　　三、跳轉到地圖

<a href="iosamap://viewMap?sourceApplication=yukapril&poiname=國宏賓館&lat=39.905592&lon=116.33604&dev=0">高德地圖</a>
<a href="androidamap://viewMap?sourceApplication=yukapril&poiname=國宏賓館&lat=39.905592&lon=116.33604&dev=0">高德</a>

　　四、寫郵件

<a href="mailto:peun@foxmail.com">peun@foxmail.com</a>

　　五、禁止識別

<meta name="format-detection" content="telephone=no,email=no,address=no"/>

【爬蟲】

　　 robots(網頁搜索引擎索引方式)：對應一組使用逗號(,)分割的值，一般取值：

none：搜索引擎將忽略此網頁，等同於noindex，nofollow；
noindex：搜索引擎不索引此網頁；nofollow：搜索引擎不繼續經過此網頁的連接索引搜索其它的網頁；
all：搜索引擎將索引此網頁與繼續經過此網頁的連接索引，等同於index，follow；
index：搜索引擎索引此網頁；follow：搜索引擎繼續經過此網頁的連接索引搜索其它的網頁；

　　使用下列代碼，則網頁會被搜索引擎忽略

<meta name="robots" content="none"/>

【添加到主屏幕】

　　在IOS下，在head元素底部，使用下列代碼能夠實現添加到主屏幕的功能

  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-title" content="Weather PWA">
  <link rel="apple-touch-icon" href="images/icons/icon-152x152.png">

【QQ瀏覽器】

// 全屏模式
<meta name="x5-fullscreen" content="true">
// 強制豎屏
<meta name="x5-orientation" content="portrait">
// 強制橫屏
<meta name="x5-orientation" content="landscape">
// 應用模式
<meta name="x5-page-mode" content="app">

【UC瀏覽器】

// 全屏模式
<meta name="full-screen" content="yes">
// 強制豎屏
<meta name="screen-orientation" content="portrait">
// 強制橫屏
<meta name="screen-orientation" content="landscape">
// 應用模式
<meta name="browsermode" content="application">

按部就班學.Net Core Web Api開發系列【4】：前端訪問WebApi

 

系列目錄

按部就班學.Net Core Web Api開發系列目錄

 本系列涉及到的源碼下載地址：https://github.com/seabluescn/Blog_WebApi

 

1、概述

前一篇文章重點介紹了Controller的一些知識，本篇重點介紹如何經過HTML端來調用這些後臺API。

 

2、準備工做

一、引入js包

前面介紹過前端的js包，須要經過Bower工具進行管理，這裏咱們添加三個js的包：

jQuery

jquery-form

bootstrap

 

二、添加靜態文件支持

全部靜態頁面存放在wwwroot文件夾下面，默認是不能訪問的，須要在Configure方法內要增長下面語句：app.UseStaticFiles();

        public void Configure(IApplicationBuilder app, IHostingEnvironment env)
        {   
            //啓用Mvc服務
            app.UseMvcWithDefaultRoute();  
            app.UseStaticFiles();
        }

 

3、開工

先建兩個實體類

    public class Product
    {      
        public string Code { get; set; }
        public string Name { get; set; }        
        public int Numbers { get; set; }
        public User user { get; set; }
        public Product()
        {
            user = new User();
        }
    }

    public class User
    {
        public string Name { get; set; }
        public int Age { get; set; }
    }

 

一、經過json格式

後臺服務代碼：

    [Produces("application/json")]  
    [Route("api/products")]
    public class ProductsController : Controller
    {        
        [HttpPost]
        public string  AddProduct(String Code,[FromBody]Product product)
        {
            Console.WriteLine($"Code :{Code}");  
            Console.WriteLine($"product code :{product.Code}");
            Console.WriteLine($"product name :{product.Name}");          
　　　　　　　Console.WriteLine($" product.user.Name :{product.user.Name}");
            return "success";
        }  
    }    

前端調用代碼：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>Using Bootstrap</title>
    <link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.css" />
    <script src="lib/jquery/dist/jquery.js"></script>
    <script src="lib/jquery-form/dist/jquery.form.min.js"></script>
    <script src="lib/bootstrap/dist/js/bootstrap.js"></script>
    <script>
        $(document).ready(function () {
            $("#add1").click(function (event) {
                var datastr = "{ 'Code': '2222', 'Name': '33333','Numbers': 0,'user':{'Name':'username'}}";
                $.ajax({
                    type: "POST",
                    url: "api/products",
                    contentType: "application/json;charset=UTF-8",
                    data: datastr,
                    success: function (result) {
                        alert("success");
                    },
                    error: function (error) {
                        alert("出錯：" + error.responseText);
                    }
                });
            });  
        });
    </script>
</head>
<body>     
        <div> 
            <button type="button" class="btn btn-success" id="add1">ADD1</button><br /><br />            
        </div> 
</body>
</html>

其中datastr是一個json字符串。

注意：第一個參數Code是沒有辦法取到值的，只有FromBody標記的參數才能取到值，Code能夠經過URL傳過來，或者封裝到類裏，好比更新product的操做，主鍵能夠經過product.Code得到，而不是單獨傳過來。

經過Chrome的開發者工具DevTools，咱們能夠跟蹤一下提交的數據信息：

head信息：

1	Content-Type: application/json;charset=UTF-8

POST的數據：

1	{  'Code' :  '2222' ,  'Name' :  '33333' , 'Numbers' : 0, 'user' :{ 'Name' : 'username' }}

　　

二、普通表單的提交

服務端代碼：

    [Produces("application/json")]  
    [Route("api/products")]
    public class ProductsController : Controller
    {        
        [HttpPost]
        public string  AddProduct(String Code,Product product)
        {
            Console.WriteLine($"Code :{Code}");
            Console.WriteLine($" product code :{product.Code}");
            Console.WriteLine($" product name :{product.Name}");
            Console.WriteLine($" product.user.Name :{product.user.Name}");

            return "success";
        }  
    }

服務端代碼和上面基本同樣，去掉了FromBody標籤。

前端調用代碼：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>Using Bootstrap</title>
    <link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.css" />
    <script src="lib/jquery/dist/jquery.js"></script>
    <script src="lib/jquery-form/dist/jquery.form.min.js"></script>
    <script src="lib/bootstrap/dist/js/bootstrap.js"></script>

    <script>
        $(document).ready(function () { 
            $("#add3").click(function (event) {
                $("#myform").ajaxSubmit();
            });
        });
    </script>
</head>
<body>     
    <form id="myform" action="api/products" method="post"  >
        <div>
            Code:<input type="text" id="Code" name="Code" /><br />
            productCode:<input type="text" id="product.Code" name="product.Code" /><br />
            productName:<input type="text" id="product.Name" name="product.Name" /><br />
            UserName:<input type="text" id="product.user.Name" name="product.user.Name" /><br />
            <input type="submit" value="Submit" /><br /><br />           
            <button type="button" class="btn btn-success" id="add3">ADD3</button><br /><br />
        </div>
    </form>
</body>
</html>

add3模擬了一個submit的操做，經過submit‘按鈕提交數據或經過ADD3按鈕提交數據，其效果一致。

head信息：

1	Content-Type: application/x-www-form-urlencoded

Post的數據：

1	Code=111&product.Code=www&product.Name=eeee&product.user.Name=4444

　

三、二進制格式文本

後臺代碼和上面一致。

前臺代碼：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <title>Using Bootstrap</title>
    <link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.css" />
    <script src="lib/jquery/dist/jquery.js"></script>
    <script src="lib/jquery-form/dist/jquery.form.min.js"></script>
    <script src="lib/bootstrap/dist/js/bootstrap.js"></script>

    <script>
        $(document).ready(function () { 
            $("#add2").click(function (event) {

                var datastr = new FormData();
                datastr.append("Code", "111111");               
                datastr.append("product.Code", "3333");
                datastr.append("product.Name", "4444");
                datastr.append("product.user.Name", "555555");

                $.ajax({
                    type: "POST",
                    url: "api/products",
                    contentType: false,
                    processData: false,
                    data: datastr,
                    success: function (result) {
                        alert(result);
                    },
                    error: function (error) {
                        alert("出錯：" + error.responseText);
                    }
                });
            });
        });
    </script>
</head>
<body>     
    <form id="myform" action="api/products" method="post"  >
        <div>
            Code:<input type="text" id="Code" name="Code" /><br />
            productCode:<input type="text" id="product.Code" name="product.Code" /><br />
            productName:<input type="text" id="product.Name" name="product.Name" /><br />
            UserName:<input type="text" id="product.user.Name" name="product.user.Name" /><br />
                      
            <button type="button" class="btn btn-success" id="add2">ADD2</button><br /><br />           
        </div>
    </form>
</body>
</html>

此時前臺構建了一個FormData的對象，並進行提交，屬性的值應該從表單中進行讀取。

有一個更方便的方式能夠填充FormData對象：

 var formdata = new FormData(document.getElementById("myform"));

實際效果和上面代碼一致。

head信息：

1	Content-Type: multipart/form-data; boundary=----WebKitFormBoundarywjCGumOsjj4HdEQC

Post的數據：

1 2 3 4 5 6 7 8 9 10 11 12 13

------WebKitFormBoundarywjCGumOsjj4HdEQC Content-Disposition: form-data; name= "Code" 111111 ------WebKitFormBoundarywjCGumOsjj4HdEQC Content-Disposition: form-data; name= "product.Code" 3333 ------WebKitFormBoundarywjCGumOsjj4HdEQC Content-Disposition: form-data; name= "product.Name" 4444 ------WebKitFormBoundarywjCGumOsjj4HdEQC Content-Disposition: form-data; name= "product.user.Name" 555555 ------WebKitFormBoundarywjCGumOsjj4HdEQC--

因爲 multipart/form-data類型能夠傳輸非文本格式文件，可能包含特殊字符，不能簡單經過&字符分割內容，因此定義了一個字符串來進行分割。

 若是須要上傳文件，就必須採用這個方式。

 

 

 

[Abp 源碼分析]4、模塊配置

 

目錄

• 0.簡要介紹
• 1.啓動流程
• 2.代碼分析
  • 2.1自定義模塊配置
  • 2.2 服務實現替換
  • 3. 擴展：Abp 支持多數據庫

 

---

回到頂部

0.簡要介紹

在 Abp 框架當中經過各類 Configuration 來實現模塊的配置，Abp 自己提供的不少基礎設施功能的一些在運行時的行爲是經過不少不一樣的 Configuration 來開放給用戶進行一些自定義配置的。

好比說緩存模塊，我要配置緩存的過時時間，Abp 默認是 1 個小時，可是我也能夠本身來定義，直接賦值或者從配置項來讀取都是由具體使用者來控制的，因此 Abp 經過各類 Configuration 類來控制一些運行時參數。

這些 Abp 自己基礎設施的配置類都是存放在 \Abp\src\Abp\Configuration\Startup\ 這個文件夾內部的，咱們來看一下他們的依賴關係。

回到頂部

1.啓動流程

從上圖能夠看到在 IAbpStartupConfiguration 內部擁有諸多引用(可能沒有列舉完成，能夠在其定義看到)，基本上 Abp 本身的基礎設施配置都在這裏面。

那麼 IAbpStartupConfiguration 本身內部的這些屬性是在哪兒初始化的呢，其實就是在以前講過的 AbpBootstrapper 的 Initialize() 內部初始化的。再看下代碼：

public virtual void Initialize() { try { // 其餘代碼 IocManager.IocContainer.Install(new AbpCoreInstaller()); IocManager.Resolve<AbpStartupConfiguration>().Initialize(); // 其餘代碼 } catch (Exception ex) { _logger.Fatal(ex.ToString(), ex); throw; } }

在 AbpCoreInstaller 類內部以前也說過，在這裏面統一注入了這些 Configuration 的單例，同時解析出 AbpStartupConfiguration ，調用其 Initialzie() 方法來對本身的那些 xxxConfiguration 接口賦值，代碼以下：

public void Initialize() { Localization = IocManager.Resolve<ILocalizationConfiguration>(); Modules = IocManager.Resolve<IModuleConfigurations>(); Features = IocManager.Resolve<IFeatureConfiguration>(); Navigation = IocManager.Resolve<INavigationConfiguration>(); Authorization = IocManager.Resolve<IAuthorizationConfiguration>(); Validation = IocManager.Resolve<IValidationConfiguration>(); Settings = IocManager.Resolve<ISettingsConfiguration>(); UnitOfWork = IocManager.Resolve<IUnitOfWorkDefaultOptions>(); EventBus = IocManager.Resolve<IEventBusConfiguration>(); MultiTenancy = IocManager.Resolve<IMultiTenancyConfig>(); Auditing = IocManager.Resolve<IAuditingConfiguration>(); Caching = IocManager.Resolve<ICachingConfiguration>(); BackgroundJobs = IocManager.Resolve<IBackgroundJobConfiguration>(); Notifications = IocManager.Resolve<INotificationConfiguration>(); EmbeddedResources = IocManager.Resolve<IEmbeddedResourcesConfiguration>(); EntityHistory = IocManager.Resolve<IEntityHistoryConfiguration>(); CustomConfigProviders = new List<ICustomConfigProvider>(); ServiceReplaceActions = new Dictionary<Type, Action>(); }

因此，在模塊定義的基類 AbpModule 當中，早就注入了 IAbpStartupConfiguration 接口，讓你很方便的就能夠在模塊的預加載的時候配置各類基礎設施的參數。舉個栗子：

public override void PreInitialize() { Configuration.Caching.ConfigureAll(z=>z.DefaultSlidingExpireTime = TimeSpan.FromHours(1)); }

能夠看到這裏咱們的 Configuration 屬性其實就是 IAbpStartupConfiguration 接口。

回到頂部

2.代碼分析

2.1自定義模塊配置

咱們能夠看到 IAbpStartupConfiguration 除了本身擁有大量基礎設施的配置類，同時他還繼承一個基類叫作 DictionaryBasedConfig ，那麼 Abp 框架爲何要這麼寫呢？

其實這個基類的做用就是存放用戶自定義的 Configuration 類型的，細心觀察的話會發如今 AbpStartupConfiguration 的內部有一個 Get 方法，該方法就是用來獲取存儲的配置類型。

public T Get<T>() { // 調用基類的 GetOrCreate 方法，不存在的話直接從 IocContainer 中解析 return GetOrCreate(typeof(T).FullName, () => IocManager.Resolve<T>()); }

在 DictionaryBasedConfig 中維護了一個字典 CustomSettings ，其 Key/Value 類型爲 string/object ，由於在 Abp 框架當中是不知道你自定義模塊配置類的類型的，因此存了一個 object 對象。

而後就有如下用法，首先在模塊 PreInitialize() 方法當中注入你須要注入的配置類：

public override void PreInitialize() { // 注入配置類 IocManager.Register<IAbpAspNetCoreConfiguration, AbpAspNetCoreConfiguration>(); // 替換服務，後面講解 Configuration.ReplaceService<IPrincipalAccessor, AspNetCorePrincipalAccessor>(DependencyLifeStyle.Transient); Configuration.ReplaceService<IAbpAntiForgeryManager, AbpAspNetCoreAntiForgeryManager>(DependencyLifeStyle.Transient); Configuration.ReplaceService<IClientInfoProvider, HttpContextClientInfoProvider>(DependencyLifeStyle.Transient); }

而後針對 IModuleConfigurations 寫一個擴展方法，由於在 IModuleConfigurations 內部就有一個 IAbpAspNetCoreConfiguration 的實例，IModuleConfigurations 的註釋就說該接口是用於配置模塊的，模塊能夠經過編寫擴展方法來添加本身的 Configuration 類：

public static class AbpAspNetCoreConfigurationExtensions { /// <summary> /// Used to configure ABP ASP.NET Core module. /// </summary> public static IAbpAspNetCoreConfiguration AbpAspNetCore(this IModuleConfigurations configurations) { // 兩種寫法都差很少 return configurations.AbpConfiguration.GetOrCreate("AbpModule", () => IocManager.Resolve<IAbpAspNetCoreConfiguration>()); return configurations.AbpConfiguration.Get<IAbpAspNetCoreConfiguration>(); } }

2.2 服務實現替換

在 Abp 當中容許咱們替換一些他自己的一些實現，只要你是在模塊進行預加載的時候替換的話，都是能夠的。而 Abp 他自己在 IAbpStartupConfiguration 當中提供了一個方法叫作 ReplaceService() 方法專門來讓你替換服務。

咱們來看一下他的定義：

void ReplaceService(Type type, Action replaceAction);

emmmm，傳入一個 Type 和 Action,咋跟我看到的不同呢，Ctrl + N 搜索了一下，發如今模塊裏面使用的 ReplaceService() 方法是存放在 AbpStartupConfigurationExtensions 裏面編寫的一個靜態方法，其定義以下：

public static void ReplaceService<TType, TImpl>(this IAbpStartupConfiguration configuration, DependencyLifeStyle lifeStyle = DependencyLifeStyle.Singleton) where TType : class where TImpl : class, TType { configuration.ReplaceService(typeof(TType), () => { configuration.IocManager.Register<TType, TImpl>(lifeStyle); }); }

我來看看，傳入一個 Type 和 一個 Action ，Type 用來調用 IAbpStartupConfiguration 的同名方法，Action 則是用來註冊組件的。

原來如此，咱們再來到 IAbpStartupConfiguration.ReplaceService(Type type, Action replaceAction) 的具體實現：

public Dictionary<Type, Action> ServiceReplaceActions { get; private set; } public void ReplaceService(Type type, Action replaceAction) { ServiceReplaceActions[type] = replaceAction; }

唔，就是一個字典嘛，咱們來看看在什麼地方用到過它。

public override void Initialize() { foreach (var replaceAction in ((AbpStartupConfiguration)Configuration).ServiceReplaceActions.Values) { replaceAction(); } // 其餘代碼 }

最後咱們看到在 AbpKernelModule 的 Initialize() 方法裏面就會遍歷這個字典，來調用以前存入的 Action 。

由於 Abp 全部組件的註冊都是在模塊 Initialize() 內部來進行註冊的，而這串代碼恰好又放在 AbpKernelModule的初始化方法的第一行就開始執行，因此確保你替換的組件可以在 Abp 內部組件註冊前執行。

因此當你要替換 Abp 內置組件服務的時候必定要記住在模塊的 PreInitialize() 裏面執行哦~

3. 擴展：Abp 支持多數據庫

若是你的 Abp 項目有多個數據庫上下文實體的時候怎麼辦呢？

在 Abp 官方 Demo 當中就有說明，你能夠經過替換默認的 IConnectionStringResolver 來實現不一樣數據庫的解析哦~，咱們繼承 DefaultConnectionStringResolver 實現一個 MulitDbContextConnectionStringResolver。

public class MulitDbContextConnectionStringResolver : DefaultConnectionStringResolver { public HKERPConnectionStringResolver(IAbpStartupConfiguration configuration) : base(configuration) { } public override string GetNameOrConnectionString(ConnectionStringResolveArgs args) { if (args["DbContextConcreteType"] as Type == typeof(ADbContext)) { var configuration = AppConfigurations.Get(WebContentDirectoryFinder.CalculateContentRootFolder()); // 返回 ADbContext 的 ConnectionString return configuration.GetConnectionString(AllConsts.ADbConnectionStringName); } if (args["DbContextConcreteType"] as Type == typeof(BDbContext)) { var configuration = AppConfigurations.Get(WebContentDirectoryFinder.CalculateContentRootFolder()); // 返回 BDbContext 的 ConnectionString return configuration.GetConnectionString(HKERPCRMConsts.BDbConnectionStringName); } // 都不是則使用默認的數據庫鏈接字符串 return base.GetNameOrConnectionString(args); } }

而後在咱們的 EFCore 模塊的預加載方法當中加入如下代碼：

Configuration.ReplaceService(typeof(IConnectionStringResolver), () => { IocManager.IocContainer.Register( Component.For<IConnectionStringResolver, IDbPerTenantConnectionStringResolver>() .ImplementedBy<MulitDbContextConnectionStringResolver>() .LifestyleTransient() ); });

固然你也不要忘記在後面經過 AddDbContext() 方法來把你的數據庫上下文添加到 Abp 裏面去哦。

Configuration.Modules.AbpEfCore().AddDbContext<ADbContext>(options=>{ /*配置代碼*/}); Configuration.Modules.AbpEfCore().AddDbContext<BDbContext>(options=>{ /*配置代碼*/});

[Abp 源碼分析]3、依賴注入

 

目錄

• 0.簡要介紹
• 1.大致結構
• 2 代碼解析
  • 2.1 基本實現
  • 2.2 規約注入
  • 2.3 初始化過程
• 3.初始化流程圖

 

---

回到頂部

0.簡要介紹

在 Abp 框架裏面，無時無刻不存在依賴注入，關於依賴注入的做用與好處我就不在這裏多加贅述了，網上有不少解釋的教程。在 [Abp 源碼分析]1、Abp 框架啓動流程分析 裏面已經說過，Abp 自己在框架初始化的時候咱們就能夠看到它使用 Castle Windsor 將 Asp.Net Core 自帶的 IServiceProvider 替換掉了。

回到頂部

1.大致結構

在 Abp 框架當中，它的依賴注入相關的類型基本上都放在 Abp 項目的 Dependency 文件夾裏面，下圖是他們之間的依賴關係：

回到頂部

2 代碼解析

2.1 基本實現

IIocManager 是直接繼承 IIocRegistrar 與 IIocResolver 的一個接口，經過名稱咱們就能夠看出來他們的做用，IIocRegistrar 內部提供了組件註冊的方法定義，而 IIocResolver 內部則是提供瞭解析已經注入的組件方法。在 IIocManager 自己則是封裝了一個 Castle Windsor 的 Ioc 容器，定義以下：

/// <summary> /// This interface is used to directly perform dependency injection tasks. /// </summary> public interface IIocManager : IIocRegistrar, IIocResolver, IDisposable { /// <summary> /// Reference to the Castle Windsor Container. /// </summary> IWindsorContainer IocContainer { get; } /// <summary> /// Checks whether given type is registered before. /// </summary> /// <param name="type">Type to check</param> new bool IsRegistered(Type type); /// <summary> /// Checks whether given type is registered before. /// </summary> /// <typeparam name="T">Type to check</typeparam> new bool IsRegistered<T>(); }

那麼咱們來看看 IIocManager 的具體實現。

方法雖然看起來挺多，不過更多的只是在 Castle Windsor 上面進行了一層封裝而已，能夠看到 Register() 這個註冊方法在其內部也是直接調用的 IWindsorContainer.Register() 來進行注入。

那麼 Abp 爲何還要再包裝一層呢，由於對外開放的你在使用的時候都使用的是 IIocManager 提供的註冊方法，那麼你須要替換 DI 框架的時候能夠很快捷的替換掉整個依賴注入框架而不會影響現有代碼。

public void Register(Type type, DependencyLifeStyle lifeStyle = DependencyLifeStyle.Singleton) { IocContainer.Register(ApplyLifestyle(Component.For(type), lifeStyle)); }

2.2 規約注入

咱們重點說一說它的規約注入，什麼是規約注入？

在上面的類圖當中，能夠看到有一個 IConventionalDependencyRegistrar 接口，而且該接口還擁有四個實現，咱們以 BasicConventionalRegistrar 類爲例子看看裏面作了什麼操做。

/// <summary> /// This class is used to register basic dependency implementations such as <see cref="ITransientDependency"/> and <see cref="ISingletonDependency"/>. /// </summary> public class BasicConventionalRegistrar : IConventionalDependencyRegistrar { public void RegisterAssembly(IConventionalRegistrationContext context) { //Transient context.IocManager.IocContainer.Register( Classes.FromAssembly(context.Assembly) .IncludeNonPublicTypes() .BasedOn<ITransientDependency>() .If(type => !type.GetTypeInfo().IsGenericTypeDefinition) .WithService.Self() .WithService.DefaultInterfaces() .LifestyleTransient() ); //Singleton context.IocManager.IocContainer.Register( Classes.FromAssembly(context.Assembly) .IncludeNonPublicTypes() .BasedOn<ISingletonDependency>() .If(type => !type.GetTypeInfo().IsGenericTypeDefinition) .WithService.Self() .WithService.DefaultInterfaces() .LifestyleSingleton() ); //Windsor Interceptors context.IocManager.IocContainer.Register( Classes.FromAssembly(context.Assembly) .IncludeNonPublicTypes() .BasedOn<IInterceptor>() .If(type => !type.GetTypeInfo().IsGenericTypeDefinition) .WithService.Self() .LifestyleTransient() ); } }

在 BasicConventionalRegistrar 內部，他會掃描傳入的程序集，而且根據類型所繼承的接口來進行自動注入，因此 Abp 定義了兩個輔助注入接口，叫作ITransientDependency 和 ISingletonDependency，而且在下面還注入了攔截器。

這樣的話，咱們本身就不須要頻繁的使用 IIocManager.Register() 方法來手動注入，只須要在本身的實現類或者接口上面，繼承上述兩個接口之一便可。

在 IocManager 內部維護了一個集合 _conventionalRegistrars。

/// <summary> /// List of all registered conventional registrars. /// </summary> private readonly List<IConventionalDependencyRegistrar> _conventionalRegistrars;

這個集合就是已經存在的規約註冊器，在 AbpKernelModule 的預加載方法裏面就使用 AddConventionalRegistrar() 方法來添加了 BasicConventionalRegistrar 註冊器。代碼在 AbpKernelModule.cs 的 45 行：

public override void PreInitialize() { IocManager.AddConventionalRegistrar(new BasicConventionalRegistrar()); // 其餘代碼 }

以後每當程序調用 IIocManager.RegisterAssemblyByConvention(Assembly assembly) 方法的時候，就會根據傳入的 Assembly 來循環調用存放在集合裏面註冊器的 RegisterAssembly() 方法，固然你也能夠隨時定義一個 Registrar ，註冊約定你也能夠本身來編寫。

public void RegisterAssemblyByConvention(Assembly assembly, ConventionalRegistrationConfig config) { var context = new ConventionalRegistrationContext(assembly, this, config); foreach (var registerer in _conventionalRegistrars) { registerer.RegisterAssembly(context); } if (config.InstallInstallers) { IocContainer.Install(FromAssembly.Instance(assembly)); } }

注：通常來講，每一個模塊都會在它的 Initialize 方法當中調用 IocManager.RegisterAssemblyByConvention()，將本身傳入該方法當中來注入當前模塊程序集全部符合規約的組件。

這裏值得注意的是 RegisterAssemblyByConvention() 方法還有一個重載 RegisterAssemblyByConvention(Assembly assembly, ConventionalRegistrationConfig config)，他將會傳入一個 ConventionalRegistrationConfig 對象，該對象只有一個 bool InstallInstallers 屬性，主要是在註冊的時候告訴 Abp 框架是否使用該程序集內部的 IWindsorInstaller 接口規則。

2.3 初始化過程

吶，首先呢在咱們初始化 AbpBootstrapper 的時候，就已經建立好了咱們的 IocManager 實例，咱們能夠來到 AbpBootstrapper.cs 的構造函數有如下代碼：

public IIocManager IocManager { get; } private AbpBootstrapper([NotNull] Type startupModule, [CanBeNull] Action<AbpBootstrapperOptions> optionsAction = null) { Check.NotNull(startupModule, nameof(startupModule)); var options = new AbpBootstrapperOptions(); optionsAction?.Invoke(options); if (!typeof(AbpModule).GetTypeInfo().IsAssignableFrom(startupModule)) { throw new ArgumentException($"{nameof(startupModule)} should be derived from {nameof(AbpModule)}."); } StartupModule = startupModule; IocManager = options.IocManager; PlugInSources = options.PlugInSources; _logger = NullLogger.Instance; if (!options.DisableAllInterceptors) { AddInterceptorRegistrars(); } }

能夠看到在 new 了一個 AbpBootstrapperOptions 對象，而且在第 17 行將 options 建立好的 IocManager 賦值給 AbpBootstrapper 自己的 IocManager 屬性。

那麼在 options 內部是如何建立 IIocManager 的呢？

public AbpBootstrapperOptions() { IocManager = Abp.Dependency.IocManager.Instance; PlugInSources = new PlugInSourceList(); }

能夠看到他直接是使用的 IocManager 這個類所提供的一個靜態實例。

也就是在 IocManager 類裏面他有一個靜態構造函數：

static IocManager() { Instance = new IocManager(); }

就是這種操做，以後在 IocManager 的構造函數裏面呢就將本身再註冊到了 Castle Windsor 的容器裏面，這樣其餘的組件就能夠直接注入使用 IIocManager 了。

public IocManager() { IocContainer = new WindsorContainer(); _conventionalRegistrars = new List<IConventionalDependencyRegistrar>(); //Register self! IocContainer.Register( Component.For<IocManager, IIocManager, IIocRegistrar, IIocResolver>().UsingFactoryMethod(() => this) ); }

咱們能夠回顧一下在替換 Asp.Net Core 自身的 Ioc 容器的時候，在使用的 CreateServiceProvider 就是 Castle Windsor 提供的 IocContainer 對象，該對象就是咱們上文在 AbpBootstrapperOptions 裏面建立的靜態實例。

public static IServiceProvider AddAbp<TStartupModule>(this IServiceCollection services, [CanBeNull] Action<AbpBootstrapperOptions> optionsAction = null) where TStartupModule : AbpModule { var abpBootstrapper = AddAbpBootstrapper<TStartupModule>(services, optionsAction); ConfigureAspNetCore(services, abpBootstrapper.IocManager); return WindsorRegistrationHelper.CreateServiceProvider(abpBootstrapper.IocManager.IocContainer, services); }

回到頂部

3.初始化流程圖

總的來講呢，整個 Abp 框架的依賴注入相關的初始化流程圖就像這樣。