Coder Social home page Coder Social logo

idcf-boat-house / boat-house-frontend Goto Github PK

View Code? Open in Web Editor NEW
87.0 13.0 92.0 227.69 MB

IDCF Boat House 前端库,包括用户界面 和 管理界面

Home Page: https://github.com/idcf-boat-house/boat-house

License: MIT License

Dockerfile 0.02% JavaScript 31.71% CSS 48.05% PHP 2.90% HTML 10.57% Go 0.05% Python 0.22% CoffeeScript 0.14% C# 0.08% Vue 0.64% Pug 0.14% Less 2.30% SCSS 3.17%
devops chatops agile agile-development microservices cloud-native vue

boat-house-frontend's Introduction

Boat House(船屋餐饮系统)—— Web前端

包含用户操作界面 和 管理员操作界面

文档目录

  1. 以docker容器方式在本地运行

1. 说明

  • dev.env.js
    开发环境配置文件,在开发终端修改这个文件进行开发,提交前要改回IDCF社区的dev环境配置
  • 沿用vue-element-admin做法,新增内容拆成modules。减少对index.js的修改
  • 按照业务功能把每个页面放在view下面,如果页面较小,可以将增删改查功能放在一个文件中;如果页面较大,可以拆成多个模块,页面单独使用的模块放在view目录下。
  • 所有请求后端的api封装文件放在src\api下面。按照业务模块划分目录存放。业务模块命名要与view下面业务模块一致
  • 命名规则
    • 项目命名:全部采用小写方式, 以下划线分隔。 例:my_project_name
    • 目录命名:有复数结构时,要采用复数命名法。例:scripts、styles、images、data_models
    • 组件名:components组件命名使用大驼峰(KebabCase)TodoItem.vue,组件名为多个单词,这样做可以避免跟现有的以及未来的 HTML 元素相冲突,因为所有的 HTML 元素名称都是单个单词的。
    • 页面名:views目录下,页面命名使用连接符(kebab-case)user-info.vue,如果views下的文件件只有一个文件,命名使用index.vue 。
    • JS文件命名:名使用分隔符线resize-event.js,如果为单个单词,使用小写md5.js

2. 目录结构

├── images                              # 代码库中饮用图片的统一存放文件夹
├── src                                 # 代码文件
│   ├── client                          # 用户操作界面
│   │   ├── build
│   │   ├── config
│   │   │   ├── dev.env.js              # 开发环境配置文件
│   │   │   ├── index.js                # webpack相关
│   │   │   ├── prod.env.js             # 生产环境配置文件,一idcf社区为准不建议修改
│   │   │   ├── test.env.js             # 测试环境配置文件,一idcf社区为准不建议修改
│   │   ├── mock                        # 项目mock 模拟数据
│   │   ├── plop-templates              # 基本模板
│   │   ├── src                         # 源代码
│   │   │   ├── assets                  # 主题 字体等静态资源
│   │   │   │   ├── css                 # 样式文件
│   │   │   │   ├── js                  # 公用JS文件
│   │   │   │   ├── font                # 字体
│   │   │   │   ├── img                 # 图片
│   │   │   │   ├── plugins             # 前端插件
│   │   │   ├── components              # 全局公用组件
│   │   │   ├── router                  # 路由
│   │   │   │   ├──index.js             # 路由配置文件
│   │   │   │   ├──modules              # 存储各个模块的路由信息
│   │   ├── test                        # 测试
│   │   ├── .env.xxx                    # 环境变量配置
│   │   ├── .eslintrc.js                # eslint 配置项
│   │   ├── .babelrc                    # babel-loader 配置
│   │   ├── .travis.yml                 # 自动化CI配置
│   │   ├── vue.config.js               # vue-cli 配置
│   │   ├── postcss.config.js           # postcss 配置
│   │   └── package.json                # package.json
│   └── management                      # 与 client 类似  
├── test
│   ├── jmeter
│   ├── selenium
│   │   └── dotnet-uitest
│   ├── unit-test
│   │   ├── client-test
│   │   └── management-test

注意:为保证站点的加载速度

  1. 站点中的图片尽量配置清晰度为80%,图片大小控制在500kb以下
  2. 静态资源本地话,即插件放在plugin,公用的静态资源可以放在assets对应的文件夹下

3. 开发/调试环境配置

3.1. MAC

安装brew, 如果update速度慢,请 参考

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
brew update
brew install

安装

# 安装cnpm & node
brew install cnpm
cnpm install node

# 查看版本
cnpm -v
node -v

# 安装Vue
cnpm install vue  

# 全局安装 vue-cli
cnpm install --global vue-cli

3.2. Windows

下载node.js安装 https://nodejs.org/en/download

# 基于 Node.js 安装cnpm(淘宝镜像)
npm install -g cnpm --registry=https://registry.npm.taobao.org

# 安装Vue
cnpm install vue -g

# 安装vue命令行工具,即vue-cli 脚手架
cnpm install vue-cli -g

4. 调试

# 进入web 用户界面文件夹
cd /src/client

# 安装依赖包
cnpm install

# 启动
cnpm start

markdown

5. 测试

以docker容器方式在本地运行

docker-compose -f src/docker-compose.yml up -d

6. DevOps

Jenkins

点击这里

GitHub Action

前台页面

后台页面

常见问题

1. 解决brew安装速度慢的问题

使用阿里云的git库, 替换homebrew镜像源

替换brew.git:

cd "$(brew --repo)”
git remote set-url origin https://mirrors.aliyun.com/homebrew/brew.git

替换homebrew-core.git:

cd "$(brew --repo)/Library/Taps/homebrew/homebrew-core"
git remote set-url origin https://mirrors.aliyun.com/homebrew/homebrew-core.git

boat-house-frontend's People

Contributors

alvinisfuwenxin avatar cadengjy avatar cqpaul avatar dengyakui avatar fudaliang avatar hawaicai avatar jackyzhou594 avatar janeconan avatar liaokevin avatar liminany avatar lykrsl avatar lzj7618937 avatar majie86 avatar nodew avatar sl639 avatar smallidea avatar sunyaxiong avatar tzm1119 avatar ups216 avatar wangyingwei avatar wilsonbogh avatar wilsonbols avatar xiaokunliu avatar yimeng avatar yinay avatar zhoushangmin avatar zhouwenyang avatar zlweicoder avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

boat-house-frontend's Issues

如何规范测试计划?

现在有了需求,那么这个需求对应的测试用例如何管理?
有了测试用例完成了此次测试之后,日后如何将他自动化?(UI自动化?接口自动化?)
自动化之后如何和原测试用例进行关联管理,被自动化管理了之后的用例日后迭代理论上不用手动回归了(因为自动化了)

作为PR审批人员,我希望PR验证流水线中可以验证构建、单元测试、静态代码扫描,以及开发环境部署。不需要部署测试环境以及生产环境

作为PR审批人员,我希望PR验证流水线中可以验证构建、单元测试、静态代码扫描,以及开发环境部署。不需要部署测试环境以及生产环境.

方案:Jenkins里两条流水线

  1. 自动 - for PR - 构建、单元测试、静态代码扫描、部署到开发环境、接口测试。
  2. 手工 - for Master - 构建、单元测试、静态代码扫描、部署到测试环境、生产环境。

是否可以考虑长链路业务的测试场景,并能集成到流水线?

众所周知,基于UI、安全、接口、代码扫描等测试都是相对通用的测试,使用相对通用的工具,或开发一些通用功能能够达到测试目的,但这些很难覆盖复杂的业务。
每个有一定体量的软件,对于核心功能链条,都需要有更进一步的测试,来去除业务上的病根。
在没有自动化的情况下,手工测试可能需要花费昂贵代价,很多企业是这么做的。另有一些企业可能基于流程制作场景模板,开发出基于流程的自动化测试工具或平台,提升自动化测试水平,当然值得借鉴。
Jenkins作为持续集成的存在,测试是其重要的环节,但从当前应用来看,除了一些常规测试(用了也只是作为参考,很少能明确的提供影响业务的bug),在自动化测试、冒烟测试应用上,却是跨步较小。Jenkins是否能更友好支持这样的测试呢?或者,Jenkins作为与第三方自动化测试软件集成,是否也是一个不错的考虑方向?或者,是否类似sonar一样,基于API开发对应插件实现?(当然,一般系统使用是高炮打蚊子了)
当然,作为流水线的Jenkins,我是希望看到的。

作为系统管理员,需要让Jenkins 用户 执行 sudo 命令,以清理项目中的target文件夹,保持项目目录整洁

描述:
项目中产生的target文件夹需要执行后进行清理,因为target是来自容器内部的root用户生成的,所以需要使用 sudo rm -rf target 命令来清, 但是sudo 默认需要在交互模式下,需要输入密码来执行。所以要修改jenkins用户的配置,使得sudo可以正确运行

验收标准AC:

  1. jenkins用户 可以脚本形式执行 sudo 命令
  2. jenkins用户 只能执行sudo rm 命令,不能执行其他sudo 命令
  3. jenkins用户 只能删除 target文件夹,不能删除其他文件夹

迭代计划 - 2020年2月 - 前两周(2.3-2.14)

业务系统

  • 系统架构,项目初始化 @zhouwenyang
  • 系统架构图(业务条线、微服务架构、工具链、ChatOps) @zhouwenyang
  • 客户端 - 船屋餐饮 (前端UI设计为船屋风格) @zhouwenyang
  • 产品服务 - 初始化项目,添加菜品分类管理增删改查API,添加Swagger @zlweicoder
  • 管理端 - 后台管理网站,添加菜品分类管理模块 @zlweicoder
  • 产品服务 单元测试调研、编写 @WalkerLu

DevOps工具链

  • Jenkins 与Github 集成及配置文档编写 @dengyakui
  • Docker 镜像build 脚本调用 & dev 环境docker-compose部署脚本 @dengyakui
  • test & prod 环境 k8s 部署脚本调用 @dengyakui
  • Selenium 自动化UI测试调研、本地实现 @WalkerLu
    Sonarqube 部分
  • Sonarqube JS/C#/Python 代码分析配置及文档编写 @liminany
  • Sonarqube Docker版本部署和配置及文档编写 @liminany
  • Sonarqube Java Maven 项目代码分析配置及文档编写 @liminany
  • IntelliJ IDEA 集成 Sonarqube 代码分析配置及文档编写 @liminany

DevOps整体流程

技术栈

:sparkles: **Welcome to GitHub Projects** :sparkles:

We're so excited that you've decided to create a new project! Now that you're here, let's make sure you know how to get the most out of GitHub Projects.

  • Create a new project
  • Give your project a name
  • Press the ? key to see available keyboard shortcuts
  • Add a new column
  • Drag and drop this card to the new column
  • Search for and add issues or PRs to your project
  • Manage automation on columns
  • Archive a card or archive all cards in a column

主代码库过大

国内网络环境下载会有一些难度,建议拆分。
291M boat-house
57M client
85M management

Jenkins 调度Selenium 调度

AC:

  1. Selenium自动化UI测试业务场景满足条件(增、删、改、查)符合测试业务场景。
  2. 集成Jenkins流水线

做为运维人员,我希望在Jenkins流水线中使用传统模式部署(非容器化方式)

AC:

一条新的流水线

  1. 不使用Docker而使用各语言基础框架来编译Boat House的各个应用。
  2. 不使用Docker而使用各语言基础框架来打包Boat House的各个应用。
  3. 能够将打包好的各个应用推送到Nexus服务器。
  4. 部署的时候,能够获取Nexus上的各个应用包,并完成Boat House的部署(传统部署方式,需要在部署机上安装各个应用所依赖的运行时)。

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.