达人店后台console-shop工程说明文档

本文档为达人店后台console-shop工程的前端部分工程说明文档,主要说明以下几方面内容:

  • 工程命令行使用说明
  • console-shop前端使用技术
  • console-shop前端目录结构
  • console-shop前端页面搭建流程
  • 工程文件详细说明

工程命令行使用说明

  • 工程下载并安装依赖,本地预览工程。
git clone git@git.showjoy.net:showjoy-assets/console-shop.git  
cd console-shop  
npm install  
npm start  
  • 线下测试环境代码构建&发布(发布采用spon的流程进行)
npm run dev  
git add .  
spon cmt  
  • 线上发布环境代码构建&发布
npm run build  

console-shop前端使用技术简介

在console-shop工程中,主要使用的前端技术框架/工具包括:

  1. React框架
  2. Ant Design组件库
  3. Webpack前端资源打包工具
  4. Superagent

React框架

系统主要基于React框架进行搭建,通过在React框架使用的基础上,搭建前端组件,通过引用组件进行页面搭建,实现前端页面的开发。

官方说明文档

React-Router框架

系统采用React-Router进行页面路由控制,实现前端控制路由,达成前后端分离的目的。

官方说明文档

Ant Design组件库

console-shop工程中大部分的组件引用自Ant Design组件库;该组件库提供了样式统一、使用方式统一并可持续维护的组件库,目前而言,可以很好的支持到当前的后台前端页面开发,提高开发效率。

官方说明文档

Webpack前端资源打包工具

使用Webpack前端资源打包工具,在以下方面提供了很好的支持:

1.引用Babel工具,对使用ES6进行代码书写提供了支持。
2.为线下开发提供了支持,可以搭建热更新服务器,提高开发效率。
3.线上线下不同的打包方式,为发布前的文件处理提供了支持。

说明文档

Superagent

页面中使用的各类请求(GET/POST/PATCH/DELETE)均通过Superagent库进行请求发出与相应。

console-shop前端目录结构说明

  • /build编译后代码文件夹
  • /node_modulesnode模块文件夹
  • /src本地开发资源文件夹
  • .gitignoregit提交忽略配置文件夹
  • index.html工程单页面Html入口文件
  • index.js工程单页面Js入口文件
  • package.json工程依赖配置文件
  • webpack.config.js开发过程webpack配置文件
  • dev.config.js线下测试环境webpack配置文件
  • production.config.js线上发布环境webpack配置文件

  • src/components自定义组件文件夹
  • src/global工程公共部分文件夹
  • src/global/conf工程公共配置文件夹
  • src/global/js工程公共脚本文件夹
  • src/global/layout工程公共框架部分文件夹(公共头部/侧边导航栏)
  • src/global/less工程公共样式文件夹
  • src/pages工程页面开发代码文件夹

console-shop前端页面搭建流程

下面主要针对上流程图中的各个过程进行详细的说明 - 创建一个example页面

在/src/pages中创建页面文件

  • 页面可以通过import {Input, Button} from 'antd'的方式进行组件引入。
  • 公共部分方法(如:请求、获取日期、开发环境)可以通过import {Glo_getEnv} from '../../global/js/env'的方式进行方法引入。
  • <div className="mainContent"></div>为页面主要内容部分,所有的页面内容均在该div中进行实现。
  • route为页面的路由配置,其中path配置了页面的路由,component配置了页面的组件。
  • style.less为页面的样式文件

index.js配置工程脚本入口文件

添加example页面进行如下代码的添加:

else if (history.location.pathname === '/example') {  
      require.ensure([], function (require) {
        callback(null, [
         require('./src/pages/example/index').default
        ]);
      });
    }

侧边栏导航配置添加/src/global/conf/location.js

添加如下代码:

{
  listTitle: '开发示例',
  listIcon: 'example',
  list: [{
    pageName: '开发示例',
    pageUrl: '/example'
  }]
}

页面搭建example.js

  • 空白页面:

  • 添加antd - button组件:

  • 开发过程同步查看页面效果

在页面项目目录下打开命令行,输入npm start可实时查看页面效果

然后打开浏览器,输入地址:http://localhost:8080即可访问本地开发中网站。

由于使用了webpack/hot/only-dev-server,所以代码的改变可以实时的显示到页面中,不需要进行手动刷新操作。

  • 发布需要注意的内容

    • 进行线下发布的时候使用的文件为dev.config.js,其中资源引用的路径为:https://assets.showjoy.net/showjoy-assets/console-shop/build/src/pages/,发布线下前需要通过该文件进行构建:npm run dev
    • 如果进行线上发布,使用的文件为production.config.js,其中资源引用的路径为:https://cdn1.showjoy.com/assets/f2e/showjoy-assets/console-shop/0.0.9/需要进行版本号的修改并重新构建资源文件!构建命令:npm run build

工程文件详细说明

/src/global/js/date.js

公共时间处理函数集,当前包含方法:

  • Glo_setDateZero 小于10的数字前加上‘0’
  • Glo_getCurrentDate 获取当前年月日
  • Glo_getCurrentMonth 获取当前年月
  • Glo_timeStampFormat 时间戳格式化 YYYY-MM-DD hh:mm:ss
  • Glo_getPreDate 获取N天前日期

/src/global/js/env.js

获取当前环境并获取结果:Glo_getEnv。返回结果包括:local/dev/publish

/src/global/js/request.js

全局的请求方法函数文件,包含:get/post/patch/delete这几个方法,该文件主要依赖superAgent模块

webpack.config.js

  • entry:入口文件为index.js,同时采用webpack/hot/only-dev-server作为本地开发服务器,为开发提供便利。
  • output:输出到build文件下,并命名为build.js
  • resolve:解决引用的时候不需要填写文件后缀的问题。
  • module:针对jsless文件进行处理,其中js文件使用babel进行转义处理,并使用了import插件,帮助实现组件引入时的按需引入,减小文件体积。
  • plugins:引入了NoErrorsPlugin,避免开发过程中产生的错误导致工程完全无法运行。
  • node&externals:为引入前端excel处理架构xlsx进行的webpack文件配置。

dev.config.js

webpack.config.js文件不同的地方在于:

  • entry:去除了webpack/hot/only-dev-server
  • output:添加了文件路径https://assets.showjoy.net/showjoy-assets/console-shop/build/src/pages/
  • plugins:去除了NoErrorsPlugin,添加了UglifyJsPlugin,针对代码进行压缩。

production.config.js

dev.config.js文件不同的地方在于:

  • output:文件路径修改为https://cdn1.showjoy.com/assets/f2e/showjoy-assets/console-shop/0.0.9/

悟空

前端开发码农一枚,爱摄影,爱旅游