el-admin前端学习笔记

转x33g5p2x  于2022-02-12 转载在 其他  
字(6.7k)|赞(0)|评价(0)|浏览(691)

###　1.用v-permission代替v-if，即使用自定义指令代替v-if

###　2.路由跳转发起get请求的流程

views/xxx/index.vue

cruds() {
    return CRUD({
      title: "部署",
      url: "api/deploy",
      crudMethod: { ...crudDeploy },
    });
  },

components/Crud/crud.js

created() {
      for (const k in this.$crud) {
        if (this.$crud[k].queryOnPresenterCreated) {
          // 默认查询
          this.$crud[k].toQuery()
        }
      }
},
// 搜索
    toQuery() {
        crud.page.page = 1
        crud.refresh()
    },
	// 刷新
        refresh() {
            if (!callVmHook(crud, CRUD.HOOK.beforeRefresh)) {
                return
            }
            return new Promise((resolve, reject) => {
                crud.loading = true
                // 请求数据
                initData(crud.url, crud.getQueryParams()).then(res => {
                    // console.log(123456)
                    // console.log(res)
                    const table = crud.getTable()
                    if (table && table.lazy) { // 懒加载子节点数据，清掉已加载的数据
                        table.store.states.treeData = {}
                        table.store.states.lazyTreeNodeMap = {}
                    }
                    crud.page.total = res.data.pages === undefined ? 0 : res.data.total
                    crud.data = res.data.pages === undefined ? res.data : res.data.records
                    crud.resetDataStatus()
                    // time 毫秒后显示表格
                    setTimeout(() => {
                        crud.loading = false
                        callVmHook(crud, CRUD.HOOK.afterRefresh)
                    }, crud.time)
                    resolve(data)
                }).catch(err => {
                    crud.loading = false
                    reject(err)
                })
            })
        },

api/data.js

export function initData(url, params) {
  return request({
    url: url + '?' + qs.stringify(params, { indices: false }),
    method: 'get'
  })
}

3.添加按钮发起请求流程

components/Crud/CRUD.operation.vue

<el-button
    v-if="crud.optShow.add"
    v-permission="permission.add"
    class="filter-item"
    size="mini"
    type="primary"
    icon="el-icon-plus"
    @click="crud.toAdd"
    >
        新增
</el-button>
import CRUD, { crud } from '@crud/crud'

component/Crud/crud.js

toAdd() {
      crud.resetForm()
      if (!(callVmHook(crud, CRUD.HOOK.beforeToAdd, crud.form) && callVmHook(crud, 				CRUD.HOOK.beforeToCU, crud.form))) {
        return
      }
      crud.status.add = CRUD.STATUS.PREPARED
      callVmHook(crud, CRUD.HOOK.afterToAdd, crud.form)
      callVmHook(crud, CRUD.HOOK.afterToCU, crud.form)
    },
/**
     * 重置表单
     * @param {Array} data 数据
     */
        resetForm(data) {
            const form = data || (typeof crud.defaultForm === 'object' ? JSON.parse(JSON.stringify(crud.defaultForm)) : crud.defaultForm.apply(crud.findVM('form')))
            const crudFrom = crud.form
            for (const key in form) {
                if (crudFrom.hasOwnProperty(key)) {
                    crudFrom[key] = form[key]
                } else {
                    Vue.set(crudFrom, key, form[key])
                }
            }
        },
// hook VM
function callVmHook(crud, hook) {
  if (crud.debug) {
    console.log('callVmHook: ' + hook)
  }
  const tagHook = crud.tag ? hook + '$' + crud.tag : null
  let ret = true
  const nargs = [crud]
  for (let i = 2; i < arguments.length; ++i) {
    nargs.push(arguments[i])
  }
  // 有些组件扮演了多个角色，调用钩子时，需要去重
  const vmSet = new Set()
  crud.vms.forEach(vm => vm && vmSet.add(vm.vm))
  vmSet.forEach(vm => {
    if (vm[hook]) {
      ret = vm[hook].apply(vm, nargs) !== false && ret
    }
    if (tagHook && vm[tagHook]) {
      ret = vm[tagHook].apply(vm, nargs) !== false && ret
    }
  })
  return ret
}

4.添加部署实现

新增编辑前做的操作

import crudDeploy from "@/api/mnt/deploy";

[CRUD.HOOK.beforeToCU](crud, form) {
      this.initSelect();
      const deploys = [];
      form.deploys.forEach(function (deploy, index) {
        deploys.push(deploy.id);
      });
      this.form.deploys = deploys;
},
        
initSelect() {
      crudDeploy.getApps().then((res) => {
        this.apps = res.content;
      });
      crudDeploy.getServers().then((res) => {
        this.servers = res.content;
      });
    },

api/mnt/deploy.js

export function getApps() {
  return request({
    url: 'api/app',
    method: 'get'
  })
}

export function getServers() {
  return request({
    url: 'api/server-deploy',
    method: 'get'
  })
}

点击提交前

[CRUD.HOOK.beforeSubmit]() {
      const deploys = [];
      this.form.deploys.forEach(function (data, index) {
        const deploy = { id: data };
        deploys.push(deploy);
      });
      this.form.deploys = deploys;
      return true;
 }

提交

<el-button
          :loading="crud.status.cu === 2"
          type="primary"
          @click="crud.submitCU"
          >确认</el-button>
import CRUD, { presenter, header, form, crud } from "@crud/crud";
/**
     * 提交新增/编辑
     */
/components/Crud/crud.js

submitCU() {
    if (!callVmHook(crud, CRUD.HOOK.beforeValidateCU)) {
        return
    }
    crud.findVM('form').$refs['form'].validate(valid => {
        if (!valid) {
            return
        }
        if (!callVmHook(crud, CRUD.HOOK.afterValidateCU)) {
            return
        }
        if (crud.status.add === CRUD.STATUS.PREPARED) {
            crud.doAdd()
        } else if (crud.status.edit === CRUD.STATUS.PREPARED) {
            crud.doEdit()
        }
    })
},
doAdd() {
      if (!callVmHook(crud, CRUD.HOOK.beforeSubmit)) {
        return
      }
      crud.status.add = CRUD.STATUS.PROCESSING
      crud.crudMethod.add(crud.form).then(() => {
        crud.status.add = CRUD.STATUS.NORMAL
        crud.resetForm()
        crud.addSuccessNotify()
        callVmHook(crud, CRUD.HOOK.afterSubmit)
        crud.toQuery()
      }).catch(() => {
        crud.status.add = CRUD.STATUS.PREPARED
        callVmHook(crud, CRUD.HOOK.afterAddError)2332342442we
      })
},
    
crudMethod: {
    add: (form) => { },
    del: (id) => { },
    edit: (form) => { },
    get: (id) => { }
},
/views/xxx/index.vue
cruds() {
    return CRUD({
      title: "部署",
      url: "api/deploy",
      crudMethod: { ...crudDeploy },
    });
  },
      
/api/mnt/deploy.js
export function add(data) {
  return request({
    url: 'api/deploy',
    method: 'post',
    data
  })
}

5.查询服务器和项目记录

发起获取数据的请求，响应到数据中的res.data.records中 
crudDeploy.getApps().then((res) => {
        this.apps = res.data.records
      })
      crudDeploy.getServers().then((res) => {
        this.servers = res.data.records
      })

6.组件挂载

自动挂载

var app=new Vue({
	el:'#app-3',
	data:{
	seen:true
	}
})

手动挂载

//可以实现延迟按需挂载
<p id="app">
    {{name}}
</p>
<button οnclick="test()">挂载
</button>
<script>
 var obj= {name: '张三'}
 var vm = new Vue({
 	data: obj
 })
 function test() {
 vm.$mount("#app");
 }
</script>
// Vue.extend()创建没有挂载的的子类,可以使用该子累创建多个实例  
var app= Vue.extend({
template: '{{message}}',
 data: function () {
 return {
  message: 'message'
  }
 }
 })
new app().$mount('#app') // 创建 app实例，并挂载到一个元素上

7.无法加载验证码

①看控制台请求是否返回，查看状态码

②查看响应拦截器

③询问后端返回的状态码是否和前端响应处理的一致

8.路由跳转的四种方式及区别

1. 不带参数
 <router-link :to="{name:'home'}"> 
<router-link :to="{path:'/home'}"> //name,path都行, 建议用name 
// 注意：router-link中链接如果是'/'开始就是从根路由开始，如果开始不带'/'，则从当前路由开始。
 2.带参数
 <router-link :to="{name:'home', params: {id:1}}"> 
// params传参数 (类似post)
// 路由配置 path: "/home/:id" 或者 path: "/home:id" 
// 不配置path ,第一次可请求,刷新页面id会消失
// 配置path,刷新页面id会保留
// html 取参 $route.params.id
// script 取参 this.$route.params.id
<router-link :to="{name:'home', query: {id:1}}"> 
// query传参数 (类似get,url后面会显示参数)
// 路由可不配置
// html 取参 $route.query.id
// script 取参 this.$route.query.id
2)函数中调用this.$router.push()
1. 不带参数
 this.$router.push('/home')
this.$router.push({name:'home'})
this.$router.push({path:'/home'})
2. query传参 
 this.$router.push({name:'home',query: {id:'1'}})
this.$router.push({path:'/home',query: {id:'1'}})
// html 取参 $route.query.id
// script 取参 this.$route.query.id
3. params传参
 this.$router.push({name:'home',params: {id:'1'}}) // 只能用 name
 
// 路由配置 path: "/home/:id" 或者 path: "/home:id" ,
// 不配置path ,第一次可请求,刷新页面id会消失
// 配置path,刷新页面id会保留
// html 取参 $route.params.id
// script 取参 this.$route.params.id
4. query和params区别
query类似 get, 跳转之后页面 url后面会拼接参数,类似?id=1, 非重要性的可以这样传, 密码之类还是用params刷新页面id还在
 params类似 post, 跳转之后页面 url后面不会拼接参数 , 但是刷新页面id 会消失
3)this.$router.replace()用法同上

repalace和push的区别：push跳转后会向history栈中添加一个记录，而replace不会，点击后退会跳转到上上个页面。

4)this.$router.go(n)

n代表向前或向后跳转几个页面，正数为前，负数为后

9.el-selection绑定多个值

v-model=“value”

使用：value="item.label+’/’+item.value "

value.split(’/’)[0]

版权说明 : 本文为转载文章, 版权归原作者所有 版权申明

原文链接 : https://blog.csdn.net/weixin_44932487/article/details/114501495

内容来源于网络，如有侵权，请联系作者删除！

vue笔记

相关文章

    查看更多
    微信公众号

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新文章

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com