ivew admin 笔记

routers.js：

export default [
  {
    path: '',
    name: '',
    meta: {
      icon: '',
      title: '',
    },
    component: Main,	//套用模板
    children: [
      {
        path: '',
        name: '',
        meta: {
          icon: '',
          title: '',
        },
        component: () => import('@/view/xxx.vue')
      }
    ]
  },
]

vue 文件模板：

<style lang="xxx">
    @import "xxx.less";
</style>

<template>
  <div>
    ...
  </div>
</template>

<script>
import ...
export default {
  name: 'export-excel',	//用途：1.允许组件模板递归地调用自身；2.便于调试；
  data () {
    return {
      ...
    }
  },
  methods: {
    functionname() {},
    aget: function() {
      this.axios
        .get("http://localhost:8000/xxx")
        .then(response => {
          this.data1 = response.data;
        })
        .catch(error => {
          console.log(error);
        });
    }
  },
  created () {	//在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
    ...
    this.aget();
  },
  mounted () {	//在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。
    ...
  }
}
</script>

前端页面跳转传参：

let argu = { id: params.row.id };
this.$router.push({
// name: 'asset-edit',
path: "book",
// params: argu
query: { id: params.row.id }

向后端 get 方法：

let ids = this.$route.query.id;
this.axios.get("http://localhost:8000/collection?nid=" + ids)
	.then(response => {
	this.data1 = response.data;
	console.log("ok");
	})
	.catch(error => {
	console.log(error);
	});

向后端 post 方法：

let param = new URLSearchParams();
param.append("book_id", params.row.id);
this.axios
	.post("http://localhost:8000/remove_book_from_collection", param)
	.then(response => {
	this.$Message.success("提交成功");
	this.remove(params.index);
	})
	.catch(error => {
	this.e = 
	JSON.stringify(error.response.data);
	});

后端异常捕捉：

ret = {'status': True, 'message': None}
try:
	nid = request.POST.get('nid')
	content = request.POST.get('content')
	sqlhelper.modify("update class set title=%s where id=%s", [content, nid, ])
except Exception as e:
	ret['status'] = False
	ret['message'] = "处理异常"
import json
return HttpResponse(json.dumps(ret))

获取列表形式：

books = Book.objects.values_list('number', flat=True)
books = ['1', '2', '3', '4', '5']

处理数据时将queryset处理成 list

new_list = list(queryset)

Modal 修改（header/footer/close/无）：

<Modal v-draggable="options" v-model="modalVisible">
	<h4 slot="header">
		<Icon type="android-archive"></Icon>将此书添加到收藏夹
	</h4>
	<Row>
		<Col span="24">
			<Table border ref="selection" :columns="columns1" :data="data1"></Table>
		</Col>
	</Row>
	<div slot="footer">
		<Button type="text" size="large" @click="cancel()">取消</Button>
		<Button type="primary" size="large" @click="submit()">提交</Button>
	</div>
</Modal>

. /指当前目录
. ./指当前目录的上一层目录
‘@’: resolve(‘src’),
iview-admin-master\vue.config.js

chainWebpack: config => {
    config.resolve.alias
      .set('@', resolve('src')) // key,value自行定义，比如.set('@@', resolve('src/components'))
      .set('_c', resolve('src/components'))
  },

设置 Cookie

document.cookie = 'name=张三;';

查看 Cookie

let re = new RegExp("\s?" + "name" + "=([^;]+)(;|$)")
console.log(document.cookie.match(re)[1])

删除 Cookie

let data = new Date().getTime(); //先将此时的时间转化为毫秒
let old_data = new Date(data - 24 * 60 * 60 * 1000); //将过期时间设为24小时前
document.cookie = "name=张三;" + "expires=" + old_data.toUTCString();

前端 try:

try {
   window.a.b !== 2
}
catch(err){
     alert(err) // 可执行
     alert(123) // 可执行
}

让 id 列不显示的方法:

this.columns = this.columns.filter(col => col.key !== 'id' )

报错：Uncaught NotFoundError: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node

需在父级元素下兄弟节点前插入，寻找父节点：

test() {
      this.domplace = '<Button type="primary" @click="test()">test</Button>';
      var newDiv = document.createElement("div");
      var newButton = document.createAttribute();
      var newContent = document.createTextNode('Hello');
      newDiv.appendChild(newContent);
      console.log(newDiv);
      var currentDiv = document.getElementById("bt1");
      console.log(currentDiv);
      var parentDiv = document.getElementById("idiv1");
      parentDiv.insertBefore(newDiv, currentDiv.nextSibling);
      // document.body.insertBefore(newDiv, currentDiv);
    }

或：

originalDiv.parentNode.insertBefore(newVideo, originalDiv); 

报错：[vue-i18n] Value of key 'test' is not a string!

解决办法：

// const i18n = new VueI18n({
//   locale: lang,
//   messages,
  silentTranslationWarn: true
// })

报错：[Vue warn]: Duplicate keys detected: 'menu-test'. This may cause an update error.

问题：vue执行npm run卡死在某一进度

解决办法：相应文件编译错误