一.后台搭建

使用 vue-admin-template 来快速搭建后台管理,它包含了 Element UI & axios & iconfont & permission control & lint，这些搭建后台必要的东西。

Element是（饿了么团队）基于MVVM框架Vue开源出来的一套前端ui组件。官网： element-ui

1.快速搭建

若用vue官网提供的脚手架需要写跟多代码，比如登录界面、主界面菜单等。可以使用 vue-admin-template ，在此基础上开发，而且github上配有详细的模板说明，这样可以节省开发时间。

  1. 下载vue-admin-template(vue 2.0)进行解压
  2. 在命令提示符切换到该目录，输入命令安装所有依赖：

    cnpm install

  3. 运行

    npm run dev

2.工程结构

目录名称 存储内容
build 构建工程相关脚本
config 配置相关
src 工程源码
static 静态资源
src/api 访问后端API
src/utils 工具类
src/views 路由组件
src/router 路由

3.项目初始化

  1. 关闭语法规范性检查

    修改config/index.js : useEslint = false

  2. 国际化设置

    修改main.js :

    import locale from 'element‐ui/lib/locale/lang/en' --> import locale from 'elemen‐ui/lib/locale/lang/zh‐CN'

  3. 与easy-mock对接

    修改config下dev.env.js中BASE_API为easy-mock的Base URL，easy-mock最好部署到服务器上

    1. BASE_API: '"http://192.168.91.136:7300/mock/5af314a4c612520d0d7650c7"',

    easy-mock添加登录认证模拟数据

    地址： /user/login

    提交方式：post

    内容：

    1. {
    2. 	"code": 20000,
    3. 	"data": {
    4. 		"token": "admin"
    5. 	}
    6. }

    添加返回用户信息url模拟数据

    地址：/user/info

    提交方式：get

    内容：

    1. {
    2.   	"code": 20000,
    3.   	"data": {
    4.     	"roles": ["admin"],
    5.     	"role": ["admin"],
    6.     	"name": "admin",
    7.     	"avatar": "https://wpimg.wallstcn.com/f778738c‐e4f8‐4870‐b634‐56703b4acafe.gif"
    8.  	 }
    9. }

4.更改标题与菜单

  1. 修改index.html的标题为“后台管理系统”，修改后浏览器自动刷新。

  2. 修改src/router下的index.js中constantRouterMap的内容

    1. export const constantRoutes = [
    2.   {
    3.     path: '/login',
    4.     component: () => import('@/views/login/index'),
    5.     hidden: true
    6.   },
    8.   {
    9.     path: '/404',
    10.     component: () => import('@/views/404'),
    11.     hidden: true
    12.   },
    14.   {
    15.     path: '/',
    16.     component: Layout,
    17.     // redirect: '/dashboard',
    18.     redirect: '/hostmanager/server',   //登录后重定向到服务器信息页面
    19.     children: [{
    20.       path: 'dashboard',
    21.       name: 'Dashboard',
    22.       component: () => import('@/views/dashboard/index'),
    23.       meta: { title: 'Dashboard', icon: 'dashboard' }
    24.     }]
    25.   },
    27.   {
    28.     path: '/hostmanager',
    29.     component: Layout,
    30.     redirect: '/hostmanager/list',
    31.     name: 'hostmanager',
    32.     meta: { title: '主机管理', icon: 'example' },
    33.     children: [
    34.       {
    35.         path: 'server',
    36.         name: 'Server',
    37.         component: () => import('@/views/server/index'),
    38.         meta: { title: '服务器信息', icon: 'form' }
    39.       },
    40.       {
    41.         path: 'list',
    42.         name: 'List',
    43.         component: () => import('@/views/list/index'),
    44.         meta: { title: '主机列表', icon: 'table' }
    45.       },
    46.       {
    47.         path: 'task',
    48.         name: 'Task',
    49.         component: () => import('@/views/task/index'),
    50.         meta: { title: '任务控制', icon: 'tree' }
    51.       }
    52.     ]
    53.   },
    55.   {
    56.     path: '/testqueue',
    57.     component: Layout,
    58.     children: [
    59.       {
    60.         path: 'index',
    61.         name: 'testQueue',
    62.         component: () => import('@/views/queue/index'),
    63.         meta: { title: '测试队列', icon: 'form' }
    64.       }
    65.     ]
    66.   },
    67.   {
    68.     path: '/taskmanager',
    69.     component: Layout,
    70.     meta: { title: '任务管理', icon: 'example' },
    71.     children: [
    72.       {
    73.         path: 'list',
    74.         name: 'taskList',
    75.         component: () => import('@/views/taskList/index'),
    76.         meta: { title: '任务列表', icon: 'form' }
    77.       },
    78.       {
    79.         path: 'detail',
    80.         name: 'taskDetail',
    81.         component: () => import('@/views/taskDetail/index'),
    82.         meta: { title: '任务清单', icon: 'form' }
    83.       },
    84.       {
    85.         path: 'create',
    86.         name: 'taskCreate',
    87.         component: () => import('@/views/taskCreate/index'),
    88.         meta: { title: '新建任务', icon: 'form' }
    89.       },
    90.     ]
    91.   },
    93.   // 404 page must be placed at the end !!!
    94.   { path: '*', redirect: '/404', hidden: true }
    95. ]

二.element-ui使用

1.表格组件

  1. <el-table :data="list" border style="width: 100%;">
  2.   <el-table-column prop="id" label="活动ID" min-width="1"></el-table-column>
  3.   <el-table-column prop="name" label="活动名称" min-width="1"></el-table-column>
  4.   <el-table-column prop="address" label="活动地址" min-width="1"></el-table-column>
  5.   <el-table-column prop="starttime" label="开始日期" min-width="1"></el-table-column>
  6.   <el-table-column label="操作" min-width="1">
  7.     <template slot-scope="scope">
  8.       <el-button type="text" size="small" @click="handleEdit(scope.row.id)">修改</el-button>
  9.       <el-button type="text" size="small" @click="handleDelete(scope.row.id)">删除</el-button>
  10.     </template>
  11.   </el-table-column>
  12. </el-table>
  14. <script>
  15. import gatheringApi from '@/api/gathering'
  16. export default {
  17.     data(){
  18.       return {
  19.           list:[]
  20.       }
  21.     },
  22.     created(){
  23.         this.fetchData();
  24.     },
  25.     methods:{
  26.         fetchData(){
  27.            gatheringApi.getList().then(response => {
  28.                 this.list=response.data
  29.            });
  30.         }
  31.     }
  32. }
  33. </script>

当没有使用template模板页时，一般加上prop属性，若有template时，可以为：

  1. <el-table-column label="主机名" min-width="2">
  2.   <template slot-scope="scope">{{scope.row.name}}</template>
  3. </el-table-column>
  4. <el-table-column label="操作" min-width="3">
  5.   <template slot-scope="scope">
  6.     <el-button type="primary" size="small" @click="findTask(scope.$index,scope.row)">查看</el-button>
  7.     <el-button type="info" size="small" :disabled="scope.row.status !== '空闲'" @click="createTask(scope.$index,scope.row)">新建</el-button>
  8.   </template>
  9. </el-table-column>

slot-scope用于指定当前行的上下文。使用scope.row可以获取行对象。

table组件的属性：

参数 说明 类型
data 显示的数据 array

table-column组件的属性：

参数 说明 类型
label 显示的标题 string
prop 对应列内容的字段名 string
width 对应列的宽度 number
min-width 按比例显示宽度 number

官方文档：table组件

2.分页组件

  1. <el‐table :data="list" border style="width: 100%"></el-table>
  2. <el-pagination
  3.   @size-change="fetchDate"
  4.   @current-change="fetchDate"
  5.   :current-page="currentPage"
  6.   :page-sizes="[10,20,30,50]"
  7.   :page-size="pageSize"
  8.   layout="sizes, prev, pager, next, jumper, ->, total, slot"
  9.   :total="total">
  10. </el-pagination>
  12. <script>
  13. import gatheringApi from '@/api/gathering'
  14. export default {
  15.     data(){
  16.       return {
  17.          list:[],
  18.          total:0,//总记录数
  19.          currentPage:1,//当前页
  20.          pageSize:10,//每页大小
  21.          searchMap: {}//查询表单绑定变量
  22.       }
  23.     },
  24.     created(){
  25.         this.fetchData();
  26.     },
  27.     methods:{
  28.         fetchData(){
  29.            gatheringApi.search(this.currentPage,this.pageSize,this.searchMap).then(response =>{
  30.                this.list=response.data.rows
  31.                this.total=response.data.total
  32.            });
  33.         }
  34.     }
  35. }
  36. </script>

上面的分页方式是数据量比较大是传currentPage, pageSize给后端，由后端来实现分页；

数据量比较小时由前端实现分页，如下：

  1. <el-table border :data="list.slice((currentPage-1)*pageSize, currentPage*pageSize)" style="width: 100%;margin-top: 20px;"></el-table>
  2. <el-pagination
  3.   background
  4.   @size-change="handleSizeChange"
  5.   @current-change="handleCurrentChange"
  6.   :current-page="currentPage"
  7.   :page-size="pageSize"
  8.   layout="sizes, prev, pager, next, jumper, ->, total"
  9.   :total="list.length">
  10. </el-pagination>
  12. <script>
  13. export default {
  14. 	data() {
  15. 		return {
  16. 			list: [],
  17. 			currentPage: 1,
  18. 			pageSize: 10,
  19. 		}
  20. 	},
  21. 	methods: {
  22. 			// 分页相关函数
  23. 	      handleSizeChange(val){
  24. 	        console.log(`每页${val}条`)
  25. 	        this.pageSize = val
  26. 	      },
  27. 	      handleCurrentChange(val){
  28. 	        console.log(`当前页：${val}`)
  29. 	        this.currentPage = val
  30. 	      },
  31. 	}
  32. }
  33. </script>

pagination的常用属性：

参数 说明 类型 可选值 默认值
page-size 每页显示条目个数 number - 10
total 总条目数 number - -
current-page 当前页数，支持.sync修饰符 number - 1
layout 组件布局 string sizes,prev,pager,next,jumper,->,total,slot prev,pager,next,jumper, ->, total
pages-sizes 每页显示个数选择器的选项设置 number[] - [10,20,30,40,50,100]

pagination的常用事件：

事件名称 说明 回调参数·
size-changer pageSize改变时会触发 每页条数
current-change currentPage改变时会触发 当前页

官网链接：pagination组件

3.表单组件

在分页列表的基础上实现条件查询功能

  1. <!-- 行内表单：用于查询条件 -->
  2. <el-form :inline="true">
  3.   <el-form-item label="活动名称">
  4.     <el-input v-model="searchMap.name" placeholder="活动名称"></el-input>
  5.   </el-form-item>
  6.   <el-form-item label="活动日期">
  7.     <el-date-picker
  8.       type="date"
  9.       v-model="searchMap.startdate"
  10.       placeholder="选择开始日期"
  11.       ></el-date-picker>
  12.     <el-date-picker
  13.       type="date"
  14.       v-model="searchMap.enddate"
  15.       placeholder="选择结束日期"
  16.       ></el-date-picker>
  17.   </el-form-item>
  18.   <el-button type="primary" @click="fetchDate">查询</el-button>
  19.   <el-button type="primary" @click="handleEdit('')">新增</el-button>
  20. </el-form>
  22. <!-- 对话框表单  -->
  23. <el-dialog title="活动编辑" :visible.sync="addDialogVisible">
  24. 	<el-form label-width="80px">
  25. 	  <el-form-item label="活动名称">
  26. 	    <el-input v-model="pojo.name" placeholder="活动名称"></el-input>
  27. 	  </el-form-item>
  28. 	  <el-form-item label="开始日期">
  29. 	    <el-date-picker type="date" v-model="pojo.starttime" placeholder="开始日期"></el-date-picker>
  30. 	  </el-form-item>
  31. 	  <el-form-item label="活动详情">
  32. 	    <el-input type="textarea" v-model="pojo.detail" :rows="2" placeholder="活动详情"></el-input>
  33. 	  </el-form-item>
  34. 	  <el-form-item label="是否可见">
  35. 	    <el-switch v-model="pojo.state" active-color="#13ce66" inactive-color="#ff4949"
  36. 	      active-value="1" inactive-value="0"></el-switch>
  37. 	  </el-form-item>
  38. 	  <el-form-item>
  39. 	    <el-button type="primary" @click="handerSave">保存</el-button>
  40. 	    <el-button @click="addDialogVisible=false">关闭</el-button>
  41. 	  </el-form-item>
  42. 	</el-form>
  43. </el-dialog>

form（表单）组件官方文档：form组件

input（文本框）组件官方文档：input组件

date-picker（日期框）组件官方文档：DatePicker组件

switch（开关）组件官方文档：switch组件

注意：input组件中多行文本框设置

4.对话框组件

  1. <el-dialog title="新建任务" :visible.sync="addDialogVisible" width="37%">
  2. </el-dialog>
  4. <script>
  5. 	data(){
  6. 		......
  7. 		addDialogVisible: false	// 对话框是否显示
  8. 	}
  9. </script>

属性title为对话框标题，visible为是否显示。变量addDialogVisible用于控制对话框的显示，点击按钮将dialogFormVisible = true即可打开对话框。

dialog（对话框）组件官方文档：dialog组件

5.下拉选组件

  1. <el‐form‐item label="城市">
  2.   <el‐select v‐model="pojo.city" placeholder="请选择">
  3.     <el‐option
  4.       v‐for="item in cityList"
  5.       :key="item.id"
  6.       :label="item.name"
  7.       :value="item.id">
  8.     </el‐option>
  9.   </el‐select>
  10. </el‐form‐item>
  12. <script>
  13. 	import cityApi from '@/api/city'
  14. 	export default {
  15. 		data(){
  16. 			return {
  17. 				cityList: []
  18. 			}
  19. 		},
  20. 		created() {
  21. 	      cityApi.getList().then(response =>{
  22. 	        this.cityList = response.data
  23. 	      })
  24. 	    }
  25.     }
  26. </script>

select（下拉选）组件官方文档：select组件

6.消息提示组件

  1. this.$message({
  2.     message: response.message,
  3.     type: (response.flag?'success':'error')
  4. });
  5. // 或者
  6. this.$message.success('请求成功！');

message（消息提示）组件官方文档：message组件

7.关于尺寸介绍

默认尺寸是最大的，其次中等、小、超小

button按钮

size：medium / small / mini

input输入框

size：medium / small / mini

select选择器

size：medium / small / mini

form表单

label-width：表单域标签的宽度

size：medium / small / mini （用于控制该表单域下组件的尺寸）

table表格

size：medium / small / mini

三.vue中使用element-ui示例

对活动管理的查询、分页、条件查询，增加，修改，删除等。采用的easy-mock的模拟接口。

gathering.vue

  1. <template>
  2.   <div>
  3.     <br/>
  4.     <el-form :inline="true">
  5.       <el-form-item label="活动名称">
  6.         <el-input v-model="searchMap.name" placeholder="活动名称"></el-input>
  7.       </el-form-item>
  8.       <el-form-item label="活动日期">
  9.         <el-date-picker
  10.           type="date"
  11.           v-model="searchMap.startdate"
  12.           placeholder="选择开始日期"
  13.           ></el-date-picker>
  14.         <el-date-picker
  15.           type="date"
  16.           v-model="searchMap.enddate"
  17.           placeholder="选择结束日期"
  18.           ></el-date-picker>
  19.       </el-form-item>
  20.       <el-button type="primary" @click="fetchDate">查询</el-button>
  21.       <el-button type="primary" @click="handleEdit('')">新增</el-button>
  22.     </el-form>
  24.     <el-table :data="list" border style="width: 100%;">
  25.       <el-table-column prop="id" label="活动ID" min-width="1"></el-table-column>
  26.       <el-table-column prop="name" label="活动名称" min-width="1"></el-table-column>
  27.       <el-table-column prop="address" label="活动地址" min-width="1"></el-table-column>
  28.       <el-table-column prop="starttime" label="开始日期" min-width="1"></el-table-column>
  29.       <el-table-column label="操作" min-width="1">
  30.         <template slot-scope="scope">
  31.           <el-button type="text" size="small" @click="handleEdit(scope.row.id)">修改</el-button>
  32.           <el-button type="text" size="small" @click="handleDelete(scope.row.id)">删除</el-button>
  33.         </template>
  34.       </el-table-column>
  35.     </el-table>
  37.     <el-pagination
  38.       @size-change="fetchDate"
  39.       @current-change="fetchDate"
  40.       :current-page="currentPage"
  41.       :page-sizes="[10,20,30,50]"
  42.       :page-size="pageSize"
  43.       layout="sizes, prev, pager, next, jumper, ->, total, slot"
  44.       :total="total">
  45.     </el-pagination>
  47.     <el-dialog title="活动编辑" :visible.sync="addDialogVisible">
  48.       <el-form label-width="80px">
  49.         <el-form-item label="活动名称">
  50.           <el-input v-model="pojo.name" placeholder="活动名称"></el-input>
  51.         </el-form-item>
  52.         <el-form-item label="开始日期">
  53.           <el-date-picker type="date" v-model="pojo.starttime" placeholder="开始日期"></el-date-picker>
  54.         </el-form-item>
  55.         <el-form-item label="活动详情">
  56.           <el-input type="textarea" v-model="pojo.detail" :rows="2" placeholder="活动详情"></el-input>
  57.         </el-form-item>
  58.         <el-form-item label="选择城市">
  59.           <el-select v-model="pojo.city" placeholder="请选择">
  60.             <el-option
  61.               v-for="item in cityList"
  62.               :key="item.id"
  63.               :value="item.id"
  64.               :label="item.name"></el-option>
  65.           </el-select>
  66.         </el-form-item>
  67.         <el-form-item label="是否可见">
  68.           <el-switch v-model="pojo.state" active-color="#13ce66" inactive-color="#ff4949"
  69.             active-value="1" inactive-value="0"></el-switch>
  70.         </el-form-item>
  71.         <el-form-item>
  72.           <el-button type="primary" @click="handerSave">保存</el-button>
  73.           <el-button @click="addDialogVisible=false">关闭</el-button>
  74.         </el-form-item>
  75.       </el-form>
  76.     </el-dialog>
  78.   </div>
  79. </template>
  81. <script>
  82.   import gatheringApi from '@/api/gathering'
  83.   import cityApi from '@/api/city'
  85.   export default {
  86.     data(){
  87.       return {
  88.         list: [], // 当前活动列表
  89.         // 分页初始化
  90.         currentPage: 1, // 当前页
  91.         pageSize: 20, // 每页条数,默认是10
  92.         searchMap: {}, //查询条件
  93.         total: 0, // 总条数
  94.         // 对话框
  95.         addDialogVisible: false,
  96.         pojo: {},  // 对话框表单数据对象
  97.         // 城市下拉选列表
  98.         cityList: [],  //城市列表
  99.         id: '', // 当前编辑的id
  100.       }
  101.     },
  102.     created() {
  103.       this.fetchDate();
  104.       cityApi.getList().then(res => {
  105.         this.cityList = res.data;
  106.         console.log(res.data)
  107.       })
  109.     },
  110.     methods: {
  111.       // 分页根据条件获取列表数据
  112.       fetchDate(){
  113.         gatheringApi.search(this.currentPage, this.pageSize, this.searchMap).then(res => {
  114.           this.list = res.data.rows;    // 当前页面列表
  115.           this.total = res.data.total;  // 总条数
  116.           console.log(res.data.rows)
  117.         }).catch(err => {
  118.           alert('请求失败!')
  119.         })
  120.       },
  121.       // 新增或修改
  122.       handleEdit(id){
  123.         this.id = id; // 标准是新增还是修改
  124.         this.addDialogVisible = true; // 打开窗口
  125.         if (id){  // 修改
  126.           // 调用查询
  127.           gatheringApi.findById(id).then(response => {
  128.             this.pojo = response.data;
  129.           })
  130.         } else {  // 新增
  131.           this.pojo = {}  // 清空表单
  132.         }
  133.       },
  134.       // 保存
  135.       handerSave(){
  136.         gatheringApi.updateById(this.id,this.pojo).then(res => {
  137.           this.$message({
  138.             message: res.message,
  139.             type: (res.flag? 'success':'error'),
  140.           });
  141.           if (res.flag){  //添加成功
  142.             this.fetchDate();
  143.           }
  144.         });
  145.         this.addDialogVisible = false;  //关闭对话框
  146.       },
  147.       handleDelete(id){
  148.         this.$confirm('确定要删除此条记录吗','提示',{
  149.           confirmButtonText: '确定',
  150.           cancelButtonText: '取消',
  151.           type: 'warning'
  152.         }).then(() => {
  153.           gatheringApi.deleteById(id).then(res => {
  154.             this.$message({
  155.               message: res.message,
  156.               type: (res.flag? 'success':'error')
  157.             });
  158.             if (res.flag){
  159.               this.fetchDate(); // 刷新数据
  160.             }
  161.           });
  162.         }).catch(() => {});
  163.       }
  165.     },
  167.   }
  168. </script>
  170. <style>
  172. </style>

gathering.js

  1. import request from '@/utils/request'
  2. const group_name = 'gathering'
  3. const api_name = 'gathering'
  5. export default {
  6.   getList() { // 获取所有
  7.     return request(
  8.       {
  9.         url: `/${group_name}/${api_name}`,
  10.         method: 'get'
  11.       }
  12.     );
  13.   },
  14.   search(page, size, searchMap){  // 分页
  15.     return request(
  16.       {
  17.         url: `/${group_name}/${api_name}/search/${page}/${size}`,
  18.         method: 'post',
  19.         data: searchMap
  20.       }
  21.     );
  22.   },
  23.   save(pojo){   // 新增对话框保存
  24.     return request(
  25.       {
  26.         url: `/${group_name}/${api_name}`,
  27.         method: 'post',
  28.         data: pojo
  29.       }
  30.     )
  31.   },
  32.   findById(id){ // 根据id查询
  33.     return request({
  34.       url: `/${group_name}/${api_name}/${id}`,
  35.       method: 'get'
  36.     });
  37.   },
  38.   updateById(id,pojo){
  39.     if (id == null || id == ''){
  40.       return this.save();
  41.     };
  42.     return request({
  43.       url: `/${group_name}/${api_name}/${id}`,
  44.       method: 'put',
  45.       data: pojo
  46.     });
  47.   },
  48.   deleteById(id){
  49.     return request({
  50.       url: `/${group_name}/${api_name}/${id}`,
  51.       method: 'delete'
  52.     });
  53.   }
  54. }

city.js

  1. import request from "@/utils/request"
  2. export default {
  3.   getList(){
  4.     return request(
  5.       {
  6.         url:'/base/city',
  7.         method:'get'
  8.       }
  9.     );
  10.   }
  11. }

Element-ui 使用详细介绍的更多相关文章

  1. Element Ui使用技巧——Form表单的校验规则rules详细说明

    Element UI中对Form表单验证的使用介绍: Form 组件提供了表单验证的功能,只需要通过 rules 属性传入约定的验证规则,并将 Form-Item的 prop 属性设置为需校验的字段名 ...

  2. 【转】JSF中的三大核心组件 UI标签的详细介绍和使用举例

    JSF提供了大量的UI标签来简化创建视图.这些UI标签类似于ASP.NET中的服务器组件.使用这些标签,可以通过其value,binding,action,actionListener等属性直接绑定到 ...

  3. Element ui结合springboot的简单实战

    Eelment UI简单实战 前端开发 1 创建项目,导入element ui(略) 2 大致设计出想要的效果,如下 3 创建包 根据设计的大致模样在项目的components中创建对应的包,方便以后 ...

  4. Java 集合系列05之 LinkedList详细介绍(源码解析)和使用示例

    概要  前面,我们已经学习了ArrayList,并了解了fail-fast机制.这一章我们接着学习List的实现类——LinkedList.和学习ArrayList一样,接下来呢,我们先对Linked ...

  5. Java 集合系列12之 TreeMap详细介绍(源码解析)和使用示例

    概要 这一章,我们对TreeMap进行学习.我们先对TreeMap有个整体认识,然后再学习它的源码,最后再通过实例来学会使用TreeMap.内容包括:第1部分 TreeMap介绍第2部分 TreeMa ...

  6. Android manifest之manifest标签详细介绍

    AndroidManifest详细介绍 本文主要对AndroidManifest.xml文件中各个标签进行说明.索引如下: 概要PART--01 manifest标签PART--02 安全机制和per ...

  7. ［转]详细介绍java中的数据结构

    详细介绍java中的数据结构 本文介绍的是java中的数据结构,本文试图通过简单的描述,向读者阐述各个类的作用以及如何正确使用这些类.一起来看本文吧! 也许你已经熟练使用了java.util包里面的各 ...

  8. 详细介绍java中的数据结构

    详细介绍java中的数据结构 http://developer.51cto.com/art/201107/273003.htm 本文介绍的是java中的数据结构,本文试图通过简单的描述,向读者阐述各个 ...

  9. Java 集合系列 09 HashMap详细介绍(源码解析)和使用示例

    java 集合系列目录: Java 集合系列 01 总体框架 Java 集合系列 02 Collection架构 Java 集合系列 03 ArrayList详细介绍(源码解析)和使用示例 Java ...

随机推荐

  1. 磁盘IO过高时的参考

    主要命令:echo deadline > /sys/block/sda/queue/scheduler 注:以下的内容仅是提供参考,如果磁盘IO确实比较大的话,是数据库,可以进行读写分离或者分库 ...

  2. jmeter--单个接口通，自动化不通时

    单个接口通,自动化不通时,对比两者请求 post 请求的格式,内容编码

  3. explicit作用

    在C++中,explicit关键字用来修饰类的构造函数,被修饰的构造函数的类,不能发生相应的隐式类型转换,只能以显示的方式进行类型转换. explicit使用注意事项: explicit 关键字只能用 ...

  4. UVA 12299 线段树 （ 单点跟新 ， 区间查询）

    题目链接:题意:在传统的RMQ的基础上加上一个操作:shift(i1,i2,i3...ik),表示将这些元素,依次向左移动一位(训练指南247页) #include <iostream> ...

  5. Centos7安装Redis3.X

    本文只是简单搭建Redis,为了整合ELK用,后面会详细写. Redis:REmote DIctionary Server(远程字典服务器) 是完全开源免费的,用C语言编写的,遵守BSD协议,是一个高 ...

  6. 页面禁止刷新处理Js实现

    document.onkeydown = function(e) { e = window.event || e; var k = e.keyCode; //屏蔽ctrl+R,F5键,ctrl+F5键 ...

  7. PCL智能指针疑云 <二> 使用同一智能指针作为PCL预处理API的输入和输出

    问题介绍: slam构建地图,先进行降采样,再进行可视化或存储.然而经过降采样后,代码没有报错的情况下,点云数据散成一团.将代码和点云数据展示如下, pcl::VoxelGrid<Lidar:: ...

  8. sqli--labs(25)

    过滤了 or and 的get注入 0X01测试阶段 ’报错 ” 不报错 那么就是'闭合 好的我们知道闭合后来#闭合后面 ?id= 语法不正确 发现过滤了 or and 那么我们继续构造 ?id= 0 ...

  9. sqli-labs(6)

    双注入GET双引号字符型注入 0x01(这里思路和05一样只是单引号变成了双引号) 首先我们看见这个网站 又是不显示值的 所以想到用报错的信息来得出你想要的结果 有了思路之后来试试一下吧 先填入单引号 ...

  10. JDK源码--HashMap(之resize)

    1.HashMap源码阅读目标了解具体的数据结构(hash及冲突链表.红黑树)和重要方法的具体实现(hashCode.equals.put.resize...) 2.重要方法 hashCode 与 e ...