店员端项目总结（先后端分离）

时间  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 (基于官方文档翻译）

  1. 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: {
    // ...
  }
}

复制代码
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程