第一次实习项目总结

1、后台管理系统权限控制问题

　　参考资料：

https://segmentfault.com/a/1190000009506097

https://github.com/WeidanLi/iview-admin-permission

https://www.cnblogs.com/nxmin/p/8490324.html

https://www.cnblogs.com/qixidi/p/10137973.html

https://github.com/mgbq/nx-admin

 

 

2、后台管理系统参考代码

https://www.cnblogs.com/wbjxxzx/p/9943049.html

https://mp.weixin.qq.com/s?__biz=MzI2ODUxMzg4Nw==&mid=2247486431&idx=1&sn=0ecaa3facdd176a2e1719b5a170c1a56&chksm=eaef2cefdd98a5f9c06f640cc75badc7adc660fb06f08536fb3f068c153ea084062ed8242b07&mpshare=1&scene=23&srcid=1211fbP8UIyaCHD2nULRv6cB&sharer_sharetime=1576030388375&sharer_shareid=94107c41bb61824f01be677622e8b67b#rd

 

3、node.js中处理版本兼容问题

https://blog.csdn.net/qq_38264999/article/details/100639227

 

4、解决display:inline-block里面有文字时盒子的内容发生改变

https://blog.csdn.net/qq_41643226/article/details/88761608

 

5、高德地图点击时获得位置和经纬度

https://blog.csdn.net/w1316022737/article/details/99439135

http://www.menvscode.com/detail/5d5caaa678f7693673ce8fed

https://github.com/qianyinghuanmie/vue2.0-demos

 

6、文件下载

https://www.cnblogs.com/rongjuan/p/9644676.html

https://www.jianshu.com/p/917a15445510

 

7、router路由重复加载问题

https://www.cnblogs.com/fqh123/p/11571688.html

https://www.jianshu.com/p/6edf74f65fc1

 

8、vue中使用过度动画

https://www.jianshu.com/p/104bbb01b222

 

9、技巧类

　　项目中使用公共分页组件

　　1.第一步：写一个新建的分页子组件

<template>
  <div :class="{'hidden':hidden}" class="pagination-container">
    <el-pagination
      :background="background"
      :current-page.sync="currentPage"
      :page-size.sync="pageSize"
      :layout="layout"
      :page-sizes="pageSizes"
      :total="total"
      v-bind="$attrs"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>

export default {
  name: 'Pagination',
  props: {
    total: {
      required: true,
      type: Number
    },
    page: {
      type: Number,
      default: 1
    },
    limit: {
      type: Number,
      default: 20
    },
    pageSizes: {
      type: Array,
      default() {
        return [10, 20, 30, 50]
      }
    },
    layout: {
      type: String,
      default: 'total, sizes, prev, pager, next, jumper'
    },
    background: {
      type: Boolean,
      default: true
    },
    autoScroll: {
      type: Boolean,
      default: true
    },
    hidden: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    currentPage: {
      get() {
        return this.page
      },
      set(val) {
        this.$emit('update:page', val)
      }
    },
    pageSize: {
      get() {
        return this.limit
      },
      set(val) {
        this.$emit('update:limit', val)
      }
    }
  },
  methods: {
    handleSizeChange(val) {
      
      this.$emit('pagination', { page: this.currentPage, limit: val })

    },
    handleCurrentChange(val) {
      this.$emit('pagination', { page: val, limit: this.pageSize })

    }
  }
}
</script>

<style scoped>
.pagination-container {
  background: #fff;
  padding: 32px 16px;
}
.pagination-container.hidden {
  display: none;
}
</style>

　　2.在父组件中传给子组件参数

<--!引入分页组件-->
 <Pagination
      v-show="total>0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="_thisgetUserList"
    />

<script>
//data中设置分页参数
data(){

return{

  //分页
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 20
      },
}
}

methods:{

}

</script>

 

10、vue中增加和编辑公用一个组件问题

https://blog.csdn.net/buzhidaoqoshaming/article/details/80228924