正文

前端009-vue框架

IP云
IP云V管理员/1 阅读
11/29
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

vue-admin-element https://panjiachen.github.io/vue-element-admin-site/zh/

基于vue的生态做的很好，提供的很多的文档，中文。并且有视频。

vue

element == element ui

vue-cli实现（脚手架）

内置了 i18 国际化解决方案 提供了中文

1、安装： 
# 克隆项目

git clone https://github.com/PanJiaChen/vue-element-admin.git

# 进入项目目录

cd vue-element-admin

# 安装依赖

npm install  # FQ安装  npm  ==  linux 中  yum  包管理工具 npm时候node的包管理工具

# node_modules

# 建议不要用 cnpm 安装 会有各种诡异的bug 可以通过如下操作解决 npm 下载速度慢的问题

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

# 需要启动mock服务

# 运行 mock

# python mock.py

# 本地开发 启动项目

npm run dev # 项目的根目录

2、框架中重点关注： 
├── src                        # 源代码

│   ├── api                    # 所有请求   *

│   ├── assets                 # 主题 字体等静态资源

│   ├── components             # 全局公用组件  *

│   ├── directive              # 全局指令

│   ├── filters                # 全局 filter

│   ├── icons                  # 项目所有 svg icons

│   ├── lang                   # 国际化 language

│   ├── layout                 # 全局 layout

│   ├── router                 # 路由   *

│   ├── store                  # 全局 store管理

│   ├── styles                 # 全局样式

│   ├── utils                  # 全局公用方法

│   ├── vendor                 # 公用vendor

│   ├── views                  # views 所有页面  *

│   ├── App.vue                # 入口页面

│   ├── main.js                # 入口文件 加载组件 初始化等

│   └── permission.js          # 权限管理

3、目标：

parameter.html 迁移到 vue-admin框架

parameter.html 就是基于elementui实现的 vue-element-admin 框架也是基于 vue和element-ui实现的

前端 3 大块

js、css、html

导入模块，导出模块： 

第一种

export { parameterRouter } // 导出模块

import { parameterRouter } from './modules/parameter'

第二种

  export default {     // 只能导出一个

    name: 'parameter'

  }

  import chartsRouter from './modules/charts'   //  不带大括号的都是 和 export default结合使用的

代码爆红：

代码爆红是由于框架增加了代码格式验证

需要修改根目录下 .eslintrc.js 中rules改为 rules:{}

4、新建页面：

4.1 配置路由

例：src/router/parameter.js 

import Layout from '@/layout' //导入一个模块，菜单模块

const parameterRouter = {  //定义一个常量

  path: '/main', //路径

  component: Layout,

  redirect: 'noRedirect',  //重定向

  meta: {

    icon: 'lock',

    roles: ['qa'] // 权限

  },

  children: [

    {

      path: 'parameter',

      component: () => import('@/views/parameter/index'),

      name: '参数管理',

      meta: { title: '参数管理', icon: 'table' }

    }

  ]

}

export { parameterRouter }   //导出模块，当你想要外部应用你的模块，要用export，多个变量用，隔开   export{a,b}

4.2 在src/router/index.js中导入模块 

/* Router Modules */

import componentsRouter from './modules/components'

import chartsRouter from './modules/charts'

import tableRouter from './modules/table'

import nestedRouter from './modules/nested'

import { parameterRouter }  from './modules/parameter'
export const asyncRoutes = [

  parameterRouter,

  {

    path: '/permission',

    component: Layout,

    redirect: '/permission/page',

    alwaysShow: true, // will always show the root menu

    name: 'Permission',

    meta: {

      title: 'permission',

      icon: 'lock',

      roles: ['qa', 'editor'] // you can set roles in root nav

    }

]
asyncRoutes:受权限控制的模块
constantRoutes：全部模块，不受权限控制

导入成功后，在左侧菜单栏处，能看到新增页面

4.3 在Views目录创建 对应业务的文件夹，文件夹下有默认的一个index.vue  parameter.html

例：src/views/parameter目下有个index.vue 

<template>

  <div class="app-container">

    <div id="bar">

      <!--搜索、筛选-->

      <el-form :inline="true" class="demo-form-inline">

        <el-form-item>

          <el-input placeholder="搜索" v-model="filter_query.search"></el-input>

        </el-form-item>

        <el-form-item>

          <el-button type="primary" @click="search">查询</el-button>

        </el-form-item>

        <el-form-item>

          <el-button type="primary" @click="add_collection">添加</el-button>

        </el-form-item>

      </el-form>

    </div>

    <div id="table">

      <el-table

        ref="multipleTable"

        :data="tableData"

        tooltip-effect="dark"

        style="width: 100%"

        v-loading="loading" element-loading-text="玩命加载中...">

        <el-table-column

          prop="id"

          label="ID">

        </el-table-column>

        <el-table-column

          prop="name"

          label="参数名称">

        </el-table-column>

        <el-table-column

          prop="desc"

          label="描述"

          show-overflow-tooltip>

        </el-table-column>

        <el-table-column

          prop="value"

          label="参数值"

          show-overflow-tooltip>

        </el-table-column>

        <el-table-column label="操作">

          <template slot-scope="scope">

            <el-button

              size="mini"

              @click="handle_edit(scope.row)">编辑

            </el-button>

            <el-button

              size="mini"

              type="danger"

              @click="handle_delete(scope.row)">删除

            </el-button>

          </template>

        </el-table-column>

      </el-table>

    </div>

    <div id="edit">

      <el-dialog :title="dialog_title" :visible.sync="dialogFormVisible" v-loading="loading"

                 element-loading-text="玩命加载中...">

        <el-form :model="form">

          <el-form-item label="参数名称" :label-width="formLabelWidth">

            <el-input v-model="form.name" style="width: 50%" placeholder="请输入参数名称"></el-input>

          </el-form-item>

          <el-form-item label="描述" :label-width="formLabelWidth">

            <el-input type="textarea" v-model="form.desc" style="width: 50%" placeholder="请输入参数描述"></el-input>

          </el-form-item>

          <el-form-item label="参数值" :label-width="formLabelWidth">

            <el-input v-model="form.value" style="width: 50%" placeholder="请输入参数值"></el-input>

          </el-form-item>

        </el-form>

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

          <el-button @click="dialogFormVisible = false">取 消</el-button>

          <el-button type="primary" @click="operate" :loading="button_loading">确 定</el-button>

        </div>

      </el-dialog>

    </div>

    <div id="pagination">

      <el-pagination

        @size-change="handleSizeChange"

        @current-change="handleCurrentChange"

        :current-page="currentPage"

        :page-sizes="[10, 20, 50, 100]"

        :page-size="filter_query.limit"

        layout="total, sizes, prev, pager, next, jumper"

        :total="total">

      </el-pagination>

    </div>

  </div>

</template>

<script>

  import { getParameter, deleteParameter, putParameter, postParameter } from '@/api/parameter'

  export default {

    name: 'parameter',

    mounted() {

      this.get_page_data()

    },

    data: function() {

      return {

        currentPage: 1,

        total: 0,

        filter_query: {

          search: undefined,

          limit: 10,

          page: 1

        },

        tableData: [],

        dialogFormVisible: false,

        dialog_title: '添加',

        form: {

          name: '',

          value: '',

          desc: ''

        },

        formLabelWidth: '120px',

        value: [],

        loading: false,

        button_loading: false,

        id: undefined

      }

    },

    methods: {

      handleSizeChange(val) {

        this.filter_query.limit = val

        this.filter_query.page = 1

        this.get_page_data()

      },

      handleCurrentChange(val) {

        this.filter_query.page = val

        this.get_page_data()

      },

      data_to_string(data) {

        let tmp = new FormData()

        for (var key in data) {

          tmp.append(key, data[key])

        }

        return tmp

      },

      get_page_data: function() {

        this.loading = true //

        getParameter(this.filter_query).then((response) => {

          this.tableData = response.data.data

          this.total = response.data.count

          this.loading = false //

        })

      },

      search: function() {

        this.filter_query.page = 1

        this.get_page_data()

      },

      handle_edit(row) {

        // this.form = Object.assign({}, {name: row.name, value: row.value, desc: row.desc}); //深拷贝

        this.form = { name: row.name, value: row.value, desc: row.desc } //深拷贝

        this.form.id = row.id

        this.dialog_title = '编辑'

        this.dialogFormVisible = true //打开模态框

      },

      handle_delete(row) {

        this.$confirm('确认删除当前参数吗？', '提示', {

          confirmButtonText: '确定',

          cancelButtonText: '取消',

          type: 'warning'

        }).then(() => {

          deleteParameter({ id: row.id }).then((response) => {

            if (response.data.code == 0) {

              this.$message({

                type: 'success',

                message: '删除成功'

              })

              this.get_page_data()

            } else {

              this.$message({

                type: 'error',

                message: response.data.msg

              })

            }

          }).catch((error) => {

            this.$message({

              type: 'error',

              message: error

            })

          })

        }).catch(() => {

          this.$message({

            type: 'info',

            message: '取消删除'

          })

        })

      },

      add_collection() {

        this.reset_form()

        this.dialog_title = '添加'

        this.dialogFormVisible = true

      },

      reset_form() {

        //form数据置为空

        this.form = {

          name: '',

          desc: '',

          value: ''

        }

      },

      operate() {

        this.button_loading = true

        if (this.dialog_title == '添加') {

          postParameter(this.data_to_string(this.form)).then((response) => {

            this.button_loading = false

            if (response.data.code == 0) {

              this.dialogFormVisible = false //关闭模态框

              this.get_page_data()

            } else {

              this.$message({

                type: 'error',

                message: response.data.msg

              })

            }

          }).catch((error) => {

            this.button_loading = false

            this.$message({

              type: 'error',

              message: error

            })

          })

        } else if (this.dialog_title == '编辑') {

          putParameter(this.data_to_string(this.form)).then((response) => {

            this.button_loading = false

            if (response.data.code == 0) {

              this.dialogFormVisible = false //关闭模态框

              this.get_page_data()

            } else {

              this.$message({

                type: 'error',

                message: response.data.msg

              })

            }

          }).catch((error) => {

            this.button_loading = false

            this.$message({

              type: 'error',

              message: error

            })

          })

        }

      }

    }

  }

</script>

<style scoped>

</style>

4.4 创建API，和后台请求的接口，每开发一个模块，需要在src/api目录下创建一个针对这个模块的API接口

例：src/api/parameter.js 

import request from '@/utils/request' //@代表src目录

//获取参数信息

export function getParameter(params) {

  return request({

    url: 'http://127.0.0.1:8000/api/parameter',

    method: 'get',

    params:params

  })

}

//删除参数信息

export function deleteParameter(params) {

  return request({

    url: 'http://127.0.0.1:8000/api/parameter',

    method: 'delete',

    params:params

  })

}

export function putParameter(data) {

  return request({

    url: 'http://127.0.0.1:8000/api/parameter',

    method: 'put',

    data:data

  })

}

export function postParameter(data) {

  return request({

    url: 'http://127.0.0.1:8000/api/parameter',

    method: 'post',

    data:data

  })

}

4.5 src/utils/requests.js 实际是对axios进行封装，最后暴露一个模块 

import request from '@/utils/request' //@代表src目录

export function getParameter(params) {

  return request({

    url: 'http://127.0.0.1:8000/api/parameter',

    method: 'get',

    params:params

  })

}
//引用

//getParameter(this.filter_query)相当于axios()

get_page_data: function() {

        this.loading = true //

        getParameter(this.filter_query).then((response) => {

          this.tableData = response.data.data

          this.total = response.data.count

          this.loading = false //

        })

      },

4、pycharm安装vue插件

File--Settings--Plugins

搜索vue，选择第一个vue.js，Install

安装成功后，重启pycharm

相关阅读

目录[+]