VueCMF前端开发

本节主要介绍前端的模板制作及如何调用后端API。前端源码在源码包中的frontend_src目录中，目录结构如下：

目录结构

├── public
├── src                         #前端源码                    
|   ├── api                     
|   |   └── index.js            # 调用后端API接口公共函数
|   ├── assets                  # 静态资源目录（如样式文件、图片文件）
|   ├── components              # 存放模板公用组件目录
|   ├── plugins                 # 存放vue插件目录（如axios、iview及指令集扩展）
|   ├── utils                   # 存放公共工具函数目录（如cookie、date、int2ip等）
|   └── views
|       ├── layout              # 存放后台布局模板文件
|       ├── login               # 存放后台登录界面模板文件
|       ├── template            # 存放后台功能模型的模板文件（如菜单模型的模板文件等）
|       └── welcome             # 存放后台欢迎页模板文件
├── .env.development            # 开发环境下后端API配置
├── .env.production             # 生产环境下后端API配置
└── vue.config.js               # webpack打包配置

下载前端源码

1、第一种是下载vuecmf源码（https://github.com/emei8/vuecmf/releases），前端源码在frontend_src目录中。

2、第二种是使用Vue CLI3拉取前端源码。

#第一步：下载安装nodejs（https://nodejs.org/zh-cn/），已安装过的跳过此步。
#第二步：在命令行执行下面命令
#安装yarn（已安装过的跳过此步）
npm install -g yarn

#安装Vue CLI 3（已安装过的跳过此步）
yarn global add @vue/cli

#第三步：使用vuecmf-tpl创建项目，my-project为你创建的项目名称
vue create --preset emei8/vuecmf-tpl my-project

#运行项目，看下效果
yarn serve

#打包发布项目
yarn build

制作模板

例如制作单页模型的模板，如下

<template>
    <div>
        <vuecmf-table

           ...... //这里省略部分代码，详情可见源码中 views\template\list\single_list.vue 文件

        </vuecmf-table>
    </div>
</template>
<script>
    import VuecmfTable from 'vuecmf-table/src/lib/vuecmf-table/table.vue'
    import * as utils from "@/utils/screen.js"
    import { mapState } from 'vuex'
    import '@/plugins/axios'

    export default {
        name: 'list',
        components:{
            'vuecmf-table': VuecmfTable
        },

        ...... //这里省略部分代码，详情可见源码中 views\template\list\single_list.vue 文件

        methods: {
            //保存数据到后端数据库中
            save: function (form_data) {
                let that = this
                if(typeof that.$route.meta.permission.save == "undefined"){
                    that.$Message.error('对不起！您没有此保存数据权限。');
                }else {
                    //对接后端API接口
                    that.$api.request(that.$route.meta.model, that.$route.meta.permission.save, 'post', form_data).then(function (res) {
                        if (res.code == 0) {
                            that.$Message.success(res.msg)
                            that.$refs.vcTable.refresh()   //刷新列表组件
                        } else {
                            that.$Message.error(res.msg);
                        }

                    })
                }
            },

            ...... // 这里省略部分代码

        }
    }
</script>

下面详细说明模板中如何调用后端API:

this.$api.request(model_name, operate_name, method, form_data)

功能：

全局公共调用后端API方法

参数：

model_name：模型名称，如“single_list_model”，这里的“that.$route.meta.model” 为路由中自动传入的模型名称，路由中的模型名称则是由后台菜单管理中每项菜单中设置的模型。

operate_name：操作名称，如“save_single_list”，这里的“that.$route.meta.permission.save”为路由传入的操作名称，操作名称则是由后台模型操作项中添加的，这里经过了权限筛选后的操作项才传入路由中；permission.save中的 save 为操作类型，详见后台中的模型操作项列表。

method：提交方式，post或get 方式。

form_data：要提交的表单内容

发布前端文件

模板制作好后，需要进行webpack打包发布后，通过浏览器访问 http://你的域名/admin 才能看到添加的界面。

1.安装运行环境

首页需要下载并安装Node.js，官网地址https://nodejs.org/zh-cn/。

2.修改配置

.env.production 文件为打包发布的连接后端API的配置文件，默认无需修改，如需要单独指定API地址，则可修改此文件。.env.development为边制作模板边预览调试时的配置文件。

vue.config.js 为webpack调试和打包时用到的配置文件，其中api代理可根据自己开发环境修改，其余默认都无需修改，有特殊需求的可适当根据需求修改。

3.打包发布

然后在命令行下切换到源码中frontend_src目录下，初次发布时，需要先进行初始化，再发布。

如下：

初始化

注意：已经初始化过的，直接跳过此步，进行一下步操作。

G:\git\vuecmf-release\frontend_src>npm install

如果初始化失败或者过慢，可以尝试切换 taobao 源，再进行初始化。如下：

G:\git\vuecmf-release\frontend_src>npm set registry https://registry.npm.taobao.org/
G:\git\vuecmf-release\frontend_src>npm install

开始发布

G:\git\vuecmf-release\frontend_src>npm run build

开发调试

如需边制作模板边预览效果，可进行如下操作进入前端开发调试模型。

G:\git\vuecmf-release\frontend_src>npm run serve

执行完后,可访问上面运行完后的结果中的地址在浏览器访问，查看前端界面效果。

前端开发