zoukankan      html  css  js  c++  java
  • 前端009-vue框架

    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  # 翻墙安装  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=" 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=" 50%" placeholder="请输入参数名称"></el-input>
              </el-form-item>
              <el-form-item label="描述" :label-width="formLabelWidth">
                <el-input type="textarea" v-model="form.desc" style=" 50%" placeholder="请输入参数描述"></el-input>
    
              </el-form-item>
              <el-form-item label="参数值" :label-width="formLabelWidth">
                <el-input v-model="form.value" style=" 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

  • 相关阅读:
    Leetcode 121. Best Time to Buy and Sell Stock
    Leetcode 120. Triangle
    Leetcode 26. Remove Duplicates from Sorted Array
    Leetcode 767. Reorganize String
    Leetcode 6. ZigZag Conversion
    KMP HDU 1686 Oulipo
    多重背包 HDU 2844 Coins
    Line belt 三分嵌套
    三分板子 zoj 3203
    二分板子 poj 3122 pie
  • 原文地址:https://www.cnblogs.com/cjxxl1213/p/13479774.html
Copyright © 2011-2022 走看看