店員端項目總結（先後端分離）

時間 2019-12-02

標籤店員項目總結後端分離简体版

原文原文鏈接

1. 商城店員端

商城後臺管理手機版（又稱商城店員端），主要服務於方便客戶使用移動設備（手機，pad）管理商品和訂單，實現一鍵上架、下架，訂單管理查詢，銷售統計，掃碼覈銷，售後處理等大部分PC端後臺管理功能。css

2. 項目樹

MALL_NEW_WEB(項目名稱)
—— clerk (前端店員端vue項目)
    |——node_modules
    |——public(公共靜態文件)
    |——src
    |   |——assets (靜態資源，樣式圖片)
    |   |——components(公共組件)
    |   |——lib (公用方法)
    |   |——views (業務頁面)
    |   |——App.vue (入口頁面)
    |   |——main.js (入口js)
    |   |——router.js (路由)
    |   |——store.js (狀態管理)
    |——.browserslistrc(見項目文件解釋)
    |——MIDDLE.md (中間層優化說明)
    |——vue.config.js(vue打包配置，各種開發生產環境配置)
—— deploy (部署打包文件)
    |——clerk
—— kubernetes (K8s部署配置)
    |——deployment.yaml(CI流程和部署腳本)
—— server (node中間層轉發-egg.js)
    |—— app
    |    |—— controller(解析用戶的輸入，處理後返回相應的結果)
    |    |—— middleware(中間件)
    |    |—— public(靜態資源)
    |    |—— service(業務邏輯層)
    |    |—— router.js(配置 URL 路由規則)
    |—— config
    |    |—— config.default.js(默認配置文件)
    |    |—— plugin.js(配置須要加載的插件)
    |—— logs(日誌文件)
    |—— node_modules
    |—— test(單元測試)
    |   |—— app
    |       |—— controller
    |       |—— service    
    |—— .gitignore
    |—— app.js(自定義啓動時的初始化工做)
    |—— package.json
    |—— README.md
—— .editorconfig (見項目文件解釋)
—— .gitignore (git提交須要忽略的文件)
—— .gitlab-ci.yml(CI流程和部署腳本)
—— Dockerfile (使用Dockerfile構建鏡像，自動部署上線)
—— package.json (包管理文件)
—— README.md (項目說明文檔)
—— UPDATE.md (更新說明文檔)
複製代碼

3. 項目文件解釋

.editorconfig

EditorConfig幫助開發人員在不一樣的編輯器和IDE之間定義和維護一致的編碼樣式。EditorConfig項目由用於定義編碼樣式的文件格式和一組文本編輯器插件組成，這些插件使編輯器可以讀取文件格式並遵循定義的樣式。EditorConfig文件易於閱讀，而且與版本控制系統配合使用。」html

拓展連接：.editorconfig前端

kubernetes

Kubernetes(k8s)是Google開源的容器集羣管理系統（谷歌內部:Borg）。在Docker技術的基礎上，爲容器化的應用提供部署運行、資源調度、服務發現和動態伸縮等一系列完整功能，提升了大規模容器集羣管理的便捷性。vue

Kubernetes是一個完備的分佈式系統支撐平臺，具備完備的集羣管理能力，多擴多層次的安全防禦和准入機制、多租戶應用支撐能力、透明的服務註冊和發現機制、內建智能負載均衡器、強大的故障發現和自我修復能力、服務滾動升級和在線擴容能力、可擴展的資源自動調度機制以及多粒度的資源配額管理能力。同時Kubernetes提供完善的管理工具，涵蓋了包括開發、部署測試、運維監控在內的各個環節。node

拓展連接：啥叫K8s？啥是k8s？ webpack

// kubernetes/deployment.yaml
---
apiVersion: v1
kind: Service
metadata:
  name: $LABEL_NAME
  namespace: $NAME_SPACE
  labels:
    app: $LABEL_NAME
    app-group: $APP_GROUP
    app-role: $APP_ROLE
spec:
  selector:
    app: $LABEL_NAME
  ports:
    - port: 80
      targetPort: $CONTAINER_PORT

---
apiVersion: apps/v1
kind: Deployment
metadata:
  name: $LABEL_NAME
  namespace: $NAME_SPACE
  labels:
    app: $LABEL_NAME
    app-group: $APP_GROUP
    app-role: $APP_ROLE
spec:
  replicas: $REPLICAS_NUM
  selector:
    matchLabels:
      app: $LABEL_NAME
  template:
    metadata:
      labels:
        app: $LABEL_NAME
        app-group: $APP_GROUP
        app-role: $APP_ROLE
    spec:
      containers:
        - name: $CONTAINER_NAME
          image: $IMAGE_NAME
          env:
            - name: TZ
              value: Asia/Shanghai
            - name: GIT_VERSION
              value: $GIT_VERSION
            - name: EGG_SERVER_ENV
              value: $EGG_SERVER_ENV
          resources:
            limits:
              cpu: "$LIMITS_CPU"
              memory: "$LIMITS_MEM"
          ports:
            - containerPort: $CONTAINER_PORT
              name: http
              protocol: TCP
          readinessProbe:
            httpGet:
              port: $CONTAINER_PORT
              path: $HEALTH_CHECK_PATH
            initialDelaySeconds: 60
            periodSeconds: 15
            timeoutSeconds: 5
            failureThreshold: 3
          livenessProbe:
            httpGet:
              port: $CONTAINER_PORT
              path: $HEALTH_CHECK_PATH
            initialDelaySeconds: 60
            periodSeconds: 15
            timeoutSeconds: 5
            failureThreshold: 2
      restartPolicy: Always
      imagePullSecrets:
        - name: regcred
      affinity:
        nodeAffinity:
          preferredDuringSchedulingIgnoredDuringExecution:
            - preference:
                matchExpressions:
                  - key: $LABELS_ENV
                    operator: In
                    values:
                      - enable
              weight: 1
          requiredDuringSchedulingIgnoredDuringExecution:
            nodeSelectorTerms:
              - matchExpressions:
                  - key: $LABELS_ENV
                    operator: In
                    values:
                      - enable
        podAffinity:
          preferredDuringSchedulingIgnoredDuringExecution:
            - podAffinityTerm:
                topologyKey: $APP_GROUP
              weight: 10
          # modify 2019年06月10日 修改3
        podAntiAffinity:
          preferredDuringSchedulingIgnoredDuringExecution:
            - podAffinityTerm:
                topologyKey: $LABEL_NAME
              weight: 10
  # 若是沒有設置該值，在某些極端狀況下可能會形成服務服務正常運行
  minReadySeconds: 5
  strategy:
    type: RollingUpdate
    rollingUpdate:
      # 例如：maxSurage=1，replicas=5,則表示Kubernetes會先啓動1一個新的Pod後才刪掉一箇舊的POD，整個升級過程當中最多會有5+1個POD。
      maxSurge: 1
      maxUnavailable: 0
  # 保留3個歷史記錄
  revisionHistoryLimit: 3

複製代碼

.gitlab.yml

開發者在本身的電腦上寫代碼，提交代碼到gitlab服務器上，gitlab服務器會根據項目根目錄下的.gitlab-ci.yml，通知runner服務器執行相應命令，runner服務器克隆代碼，按build、test、deploy等流程自動部署。git

// .gitlab.yml
include:
  - project: "GT-Dev/Gitlab-CI/gitlab-ci-template"
    ref: master
    file: "/mall/mall-mall-web.yaml"
複製代碼

Dockerfile

Dockerfile是一個包含用於組合映像的命令的文本文檔。可使用在命令行中調用任何命令。Docker經過讀取Dockerfile中的指令自動生成映像。web

docker build命令用於從Dockerfile構建映像。能夠在docker build命令中使用-f標誌指向文件系統中任何位置的Dockerfile。docker

// Dockerfile
# Stage 1
FROM harbor.deeptel.com.cn/library/gt-nodejs:10.15.3-alpine as builder

WORKDIR /app

COPY ./deploy /app/deploy
COPY ./server /app/server

# 拷貝全部源代碼到工做目錄
RUN cd /app/server \
  && yarn install --production

# Stage 2
FROM harbor.deeptel.com.cn/library/gt-nodejs:10.15.3-alpine as server
# 做者
LABEL MAINTAINER="XXX <aaa@qq.com>"
# 設置工做目錄
WORKDIR /app
# 啓動環境命令
ENV GIT_VERSION="0" EGG_SERVER_ENV='test' ENABLE_NODE_LOG='YES'
# copy 項目文件
COPY --from=builder /app/server /app/server
COPY --from=builder /app/deploy /app/deploy

# 暴露端口
EXPOSE 7001

# 運行容器 執行指令
CMD ["bash","-c","cd /app/server && yarn start"]

複製代碼

拓展連接：json

i. Dockerfile文件詳解

ii. 乾貨滿滿！10分鐘看懂Docker和K8S

.browserslistrc

browserslist 在不一樣的前端工具之間共用目標瀏覽器和 node 版本的配置工具。

根據提供的目標瀏覽器的環境來，智能添加css前綴，js的polyfill墊片,來兼容舊版本瀏覽器，而不是所有添加。避免沒必要要的兼容代碼，以提升代碼的編譯質量。

拓展連接：前端工程基礎知識點--Browserslist (基於官方文檔翻譯）

vue配置

// vue.config.js
'use strict'
const path = require('path')

function resolve(dir) {
  return path.join(__dirname, dir)
}

module.exports = {
  // 將構建好的文件輸出到哪裏
  outputDir: '../deploy/mall',
  // 項目部署的基礎路徑
  publicPath: process.env.NODE_ENV === 'production' ? '/web/mall' : '/',
  lintOnSave: true,
  // CSS 相關選項
  assetsDir: 'assets',
  // 生產環境是否生成 sourceMap 文件
  productionSourceMap: false,
  parallel: require('os').cpus().length > 1, // 構建時開啓多進程處理babel編譯
  // webpack-dev-server 相關配置
  devServer: {
    host: '0.0.0.0',
    open: false,
    port: 8080,
    proxy: { // 設置代理
      '/api': {
        // target: 'https://mall.aaa.com.cn',
        target: 'https://nbmall.aaa.com.cn',
        // target: 'https://mall.aaa.com',
        // target: 'http://127.0.0.1:7001',
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/'
        }
      }
    }
  },
  // webpack配置節點
  configureWebpack: config => {
    // 路徑配置
    return {
      resolve: {
        extensions: ['.js', '.vue', '.json'],
        // 別名配置
        alias: {
          // @ is an alias to /src
          '@': resolve('src'),
          '@views': resolve('src/views'),
          '@assets': resolve('src/assets'),
          '@utils': resolve('src/utils'),
          '@components': resolve('src/components')
        }
      }
    }
  },
  // 第三方插件配置
  pluginOptions: {
    // ...
  }
}

複製代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。