打包和运行

# 安装依赖

npm install

 

# 建议不要直接使用 cnpm 安装以来，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题,或者使用yarn安装也行

npm install --registry=https://registry.npm.taobao.org

 

 

# 启动服务

npm run dev

```

 

# 构建生产环境

npm run build

```

 

## 其它

 

# 代码格式检查

npm run lint

 

# 代码格式检查并自动修复

npm run lint -- --fix

 

一、api使用文档

1.api的使用

utils/request.js对axios进行了二次封装，导出了变量request，request封装了几种常用的请求方式（get,post,postForm,put,delete,getFile）

请求方式

请求说明

get

get请求

post

post请求（json格式）

postForm

post请求（formData格式）

put

put请求(json格式)

delete

delete请求

getFile

对get请求二次封装导出文件功能，所有的导出文件功能用这个方式即可

另外暴露了整个axios的实例，用于自定义请求（该请求方式可自定义操作，用于后端的各种操作）

用法：

//暴露的request变量，自定义封装的请求方式

import { request } from '@/utils/request'

request.get(url, data)

request.post(url, data)

request.postForm(url, data)

request.put(url, data)

request.delete(url, data)

request.getFile(url, data)

 

//使用axios的实例请求，自定义使用

import request from '@/utils/request'

request({

       url,

       method: 'get',

       params,

       data:,

       headers

    })

2.api文件管理

为了统一管理好接口，根据模块定义一个api.js文件。一个系统有多个模块，每个模块对应多个页面。故一个模块有一个js文件，一个页面中定义一个对象变量存储页面的接口地址。

例如：

// ModuleDistr.js //分销模块，故定义一个js

//例如：分销设置页面里面的所有api（建议每个页面的变量名后缀都是Api和每个接口都需要写注释）

const distrSetApi = {

// 保存菜单

addSettings: (data) => request.post('/activity/admin/distribution/rules/basic/settings', data),

//获取分销规则设置

distributionRules: (data) => request.get('/activity/admin/distribution/rules', data),

 

//保存分销结算设置

addbillingSettings: (data) => request.post('/activity/admin/distribution/rules/billing/settings', data),

 

//切换分销规则开关

updateRulesSwitch: (data) => request.post('/activity/admin/distribution/rules/update/rules/switch', data),

}

//暴露页面变量

export {

    distrSetApi, //分销设置

}

二.路由的使用

路由分为本地路由和动态路由（在@/config/config.js中asyncRoutes属性控制）

const config = {

    server: 'http://192.168.0.66:9999', // 少龙 （后端接口地址）

    photoServer: 'http://192.168.0.13:9000/dev6.0/', // 图片服务器地址

    shareUrl: 'http://mdiamonds.legendshop.cn/',//h5域名

    staticServer: 'https://legendshop-front-resource.oss-cn-shenzhen.aliyuncs.com/miniprogram/',//静态服务器地址

    imServer: 'ws://192.168.0.19:2397',//im地址，客服地址（暂时没有用）

    AmapKey: 'b67650d214590281b2ab8e413473553d',//高德地图秘钥

    asyncRoutes: false //true：本地路由，false：后端动态路由

 }

1.本地路由的定义如下

const ModuleGoods = [

    //所有的name、path都和文件夹的名称一样（注意一级路由的path前面需要加一个/）

    {

        path: '/ModuleGoods',

        component: Layout,  //所有需要侧边栏页面的一级路由的component都是layout

        name: 'ModuleGoods',

        meta: {

            title: '商品管理', //页面标题

            icon: 'shangpin' //侧边栏icon

        },

        children: [

            // 商品管理start

            {

                path: 'GoodsManage',

                component: () => import('@/views/ModuleGoods/GoodsManage/index'), // 在vue文件中都需要定义name属性（和文件名称一致）

                name: 'GoodsManage',

                meta: { title: '商品管理' },

                children: [

                    {

                        path: 'addGood',

                        component: () => import('@/views/ModuleGoods/GoodsManage/addGood'),

                        name: 'addGood',

                        meta: { title: '商品添加' , noCache: true},

                        hidden: true //(默认 false),当设置 true 的时候该路由不会在侧边栏出现 如401，login等页面，或者如一些编辑页面/edit/1

                    }

                ]

            }

        ]

    }

]

2.动态路由的定义

动态路由在平台管理系统（系统设置→菜单权限→平台菜单）平台菜单这个页面设置。

菜单字段

菜单说明

类型

分为菜单类型和按钮类型。菜单类型定义的是菜单路径；按钮类型主要定义按钮权限

菜单名称

页面标题：设置该路由在侧边栏和面包屑中展示的名字

链接地址

对应的是path和name字段（因为name和path是一样的）

组件地址

页面对应的文件路径。注意（一级路由固定是layout，拥有三级路由以上的父级路由的固定是ParentView。意思是最后一级是文件路径，除了一级和最后一级以外，都是ParentView）

例如下图：

 

权限编码

页面的权限编码

显示侧边栏

菜单类型的选项，菜单是否显示在侧边栏。

 

三、页面编写

页面类型

编写说明

表格页面

已经写好了公共样式直接拷贝现有就行了

表单提交页面

表单提交页外层需要定义一个class=‘sumbit__warp’属性，用户该页面撑满当前页面。有提交按钮需要引入<sumbitBottom>组件，作用把提交按钮一直置于底部，当表单过长时，就不需要滑动到底部了。

1.表格搜索和弹窗表单新增的混入使用

在mixins/pages/commom.js(处理表格搜索)和cud.js（处理弹窗表单操作）中混入了表格请求的方法

第一 导入混入结构

import common from '@/mixins/pages/commom' //表格混入

import cud from '@/mixins/pages/cud.js' //表单混入

data() { 

        return {

            date: '',

            url: {

                getData: '/shop/admin/grass/lable/page', //获取分页列表请求路径

                delete: '/shop/admin/grass/lable',//删除数据接口

                update: '/shop/admin/grass/lable',//编辑数据接口

                create: '/shop/admin/grass/lable',//新增数据接口

                getExcel: "/product/admin/count/search/page/excel" //导出数据接口

            },

            //弹窗表单校验

            dialogForm: {

                formData: {  //弹窗表单需要默认值需要定义，不需要默认值的可以不写

                    recommendFlag: 1,

                    status: 1

                },

                formRule: {//弹窗表单校验定义，

                    name: [{ required: true, message: '请输入标题', trigger: 'blur' }],

                }

            }

        }

 }

第二，搜索字段定义

<div class="search">

     <el-form :inline="true" :model="searchFilters" size="small">

             <el-form-item label="举报类型">

                 <!-- 例如后台需要的搜索参数是name，只需要 v-model="searchFilters.name"就行了  -->

                 <el-input v-model="searchFilters.name" placeholder="请输入" />

             </el-form-item>

             <el-form-item label="状态">

                 <el-select v-model="searchFilters.status" placeholder="请选择" clearable>

                     <el-option label="上线" :value="1" />

                     <el-option label="下线" :value="0" />

                 </el-select>

             </el-form-item>

             <el-form-item class="mb-20">

                 <el-button size="small" @click.stop="dbnSearch">搜索</el-button>

                 <el-button size="small" @click.stop="dbnResetSearch">重置</el-button>

             </el-form-item>

     </el-form>

</div>

第三，表格渲染

<!--表格-->   

<div class="table mt-20">

               <!-- 多选要添加 @selection-change="handleSelectionChange"  方法-->

               <!-- selectable 属性封装了禁止选择 -->

               <!-- 禁止表格多选选择框，配合data里的fillerOption属性使用 -->

               <!--例如 fillerOption: { //禁止状态 fillerOption:{status:'1,-1,-2'}} -->

                    

               <el-table

                   ref="multipleTable"

                   v-loading="tableListLoading"

                   :data="tableList"

                   :selectable="selectable"

                   tooltip-effect="dark"

                   class="w-100"

                   @selection-change="handleSelectionChange"

               >

                    

                   <!-- 如果有多选功能需要加上属性reserve-selection，能记录分页后选中的数据 -->

                   <el-table-column type="selection" width="55" reserve-selection />

                   <el-table-column prop="name" label="举报类型" align="center" />

               </el-table>

               <el-row type="flex" justify="space-between" class="mt-20">

                   <el-col>

                       <el-button size="mini" class="allCheck">

                           <!-- 全选功能封装-->

                           <el-checkbox v-model="checkAll" label="全选" size="small" @change="selAll()" />

                       </el-button>

                   </el-col>

                   <!-- //分页组件封装（直接使用） -->

                   <pagination :current-page="page.curPage" :total="tableTotal" @size-change="pageSizeChange" @current-change="currentPageChange" />

               </el-row>

</div>

第四、表单新增编辑

    <!-- 表单新增-编辑 -->

    <el-dialog :title="dialogForm.title" custom-class="dialog-form" width="420px" :visible.sync="dialogForm.isVisible">

            <el-form ref="myForm" :model="dialogForm.formData" :rules="dialogForm.formRule" label-width="95px" label-position="right" size="small">

              <!-- 只需要把后端需要的参数放进dialogForm.formData属性里就能动态修改了

               注意：prop属性不能丢，为了能保存默认值和关闭弹窗的时候清空数据，因为用的是element的form组件清除的表单 -->

                <el-form-item label="举报类型" prop="name">

                    <el-input v-model="dialogForm.formData.name" maxlength="20" show-word-limit placeholder="举报类型" />

                </el-form-item>

                <el-form-item label="状态" prop="status">

                    <el-radio-group v-model="dialogForm.formData.status">

                        <el-radio :label="1">上线</el-radio>

                        <el-radio :label="0">下线</el-radio>

                    </el-radio-group>

                </el-form-item>

            </el-form>

            <!-- //以下两个按钮都是固定的值，直接拷贝即可 -->

            <div slot="footer" class="dialog-footer">

                <el-button size="small" @click.stop="dialogForm.isVisible = false">取 消</el-button>

                <el-button size="small" type="primary" @click.stop="debounceSubmit('myForm')">确 定</el-button>

            </div>

    </el-dialog>

 

<!-- 新增编辑删除导出都是固定方法，直接拷贝就行

    新增 handleCreate()

    编辑 handleEdit(scope.row, scope.column, scope.$index)

    删除 handleDel(scope.row, scope.column, scope.$index)

    导出 getExcel()

 -->

    <el-button style="height: 32px" type="primary" size="small" @click="handleCreate">新增</el-button>

    <el-button style="height: 32px" type="primary" size="small" @click="getExcel">导出</el-button>

    <el-link :underline="false" type="primary" @click.stop="handleEdit(scope.row, scope.column, scope.$index)">

          编辑

    </el-link>

    <el-link

        :underline="false"

        type="primary"

        @click.stop="handleDel(scope.row, scope.column, scope.$index)">

        删除

    </el-link>

2.统一使用的组件

组件名称

组件作用

dialogAudit

平台所有的审核都使用这个组件，可以搜索组件名称参考使用

dialogViewLinks

平台商家端的查看链接,暂时统一用这个组件。后面需要写死一个页面中转跳转路径。所有的跳转都需要经过此页面。再由这个页面跳转到相应的页面

selectCascader

多级联动地址选择器

selectLoad

下拉选择框支持上拉加载和远程搜索

sumbitBottom

底部按钮组件，作用是始终显示在底部

四、页面编写常见问题

***原型和需求文档一定要看，但是画页面不一定要和原型一模一样，高保真才是页面的最终实现。建议着手前先和前端或产品沟通，避免重复劳动***

1、正常情况下对于输入信息的地方（输入框、选择框等）都需要做边界处理（比如限制字数），原型一般标有，没有则原型--->需求文档-→产品同事

2、页面编写记得加上头部注释（至少说明页面名称和作者）

 

3、列表页面搜索头部（输入框、选择框、日期等）一般加清除按钮clearable，特殊需求除外

 

4、组件尺寸一般使用small，建议直接改el-form 中 size="small"属性，特殊需求除外

 

5、详情中的返回、取消按钮建议用go(-1)或back()返回，因为有时跳转进的入口有可能多个

 

6、普通金额使用全局过滤（priceFilter，保留两位，向下取整）即可，如果有特殊需求，则需要考虑是否需要四舍五入

 

7、表格和表单数据展示一般不要留空

 

8、表格验证可以参考这个页面seckillGoodsTable.vue

9、对于嵌套表单，A表单嵌套B表单，点击A表单要验证B表单的内容，可以这么写