Redis-Docker-Ubuntu启动容器命令 docker run -d --name redis1 -p 16379:6379 -v /Users/${yourname}/xcredis/docker_data:/data 44d36d2c2374 --appendonly yes --appendfsync everysec 注意挂载目录，冒号前面是宿主机，后面是docker内部 设置密码 --requirepass "mypassword" 挂载外部配置和数据安装 1.创建目录和配置文件redis.conf mkdir /docker mkdir /docker/redis mkdir /docker/redis/conf mkdir /docker/redis/data 创建redis.conf配置文件 touch /docker/redis/conf/redis.conf redis.conf文件内容自行添加： 切记注释掉：#daemonize yes 否则无法启动容器 重要话说三遍：注释掉#daemonize yes，注释掉#daemonize yes，注释掉#daemonize yes 2.创建启动容器，加载配置文件并持久化数据 docker run -d --privileged=true -p 6379:6379 -v /docker/redis/conf/redis.conf:/etc/redis/redis.conf -v /docker/redis/data:/data --name redistest2 redis:4.0 redis-server /etc/redis/redis.conf --appendonly yes 参数说明： --privileged=true：容器内的root拥有真正root权限，否则容器内root只是外部普通用户权限 -v /docker/redis/conf/redis.conf:/etc/redis/redis.conf：映射配置文件 -v /docker/redis/data:/data：映射数据目录 redis-server /etc/redis/redis.conf：指定配置文件启动redis-server进程 --appendonly yes：开启数据持久化

阅读全文

vue-admin-element的全局按钮添加 有天业务测试来找我，说希望在列表页加一个刷新按钮-。- 其实这个页面的各个生命周期钩子里都加了刷新操作的回调函数，除此之外，table-row中的全部button也绑定了相同的方法—为的就是希望实时刷新结果（恨不能挂个websocket上去) 所以我很诧异，为啥还要单独添加一个独立于各种区块的按钮呢？她说就觉得方便··· 众所周知，我是一个爱惜页面整洁性的人，所以我准备加一个全局刷新按钮，就在odin后台的顶部！ 同时也因为这个项目的侧边栏渲染是基于比如oom模块： src/router/modules/oom.js中的 import Layout from '@/layout' const oomRouter = { path: '/oom', component: Layout, redirect: '/oom/index', name: 'oom自动化分析', // hidden: true, meta: { title: 'oom自动化分析', icon: 'tree-table', roles: ['admin'] // affix: true }, children: [ { path: 'index', component: () => import('@/views/oom/index'), name: 'oom-index', // hidden: true, meta: { title: '管理首页', icon: 'guide', noCache: true } }, { path: 'list', component: () => import('@/views/oom/list'), name: 'oom-list', // hidden: true, meta: { title: '任务列表', icon: 'nested', noCache: true } } ] } export default oomRouter 所以我明显需要在Layout中添加元素和方法，而进去发现它是以组件的方式使用Navbar的，所以在Navbar.

阅读全文

要命的table行内回填 我们的业务场景之一，是在一个结果列表页的结果列表中，点击任意一行row中的button，弹出抽屉或者嵌套了form表单的dialog，显然，通过<template slot-scope="scope">可以拿到行内数据，button代码： <el-button size="small" type="primary" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)" /> 这里click的方法如下： handleEdit(index, row) { console.log(row) if (row.cron === '0 4 * * *' || row.cron === '0 4 * * 0' || row.cron === '0 4 1 * *') { this.cron_radio = row.cron } else { this.cron_radio = '' } this.post_data = row this.dialog = true }, 这里的this.post_data，就是vue实例上的双向绑定的form表单数据，这段代码的作用是：经过一些业务层面的判断（if-else）后，把行内数据赋值给表单，这样就达到了编辑回填的效果，用户可以直接编辑或者重新提交，能大大节省重复操作数据的时间！ 可是我想得太天真了 当我this.post_data = row如此赋值的时候，我发现后续在form中编辑数据，table中当前行的数据也在变！！我隐约感觉到是对象引用的问题，可是，如何解除引用？ 经过一番波折，大概有三种方法可以解决： 将row中的每个字段分别赋值给this.post_data row对象转字符串再解析出来this.post_data = JSON.

阅读全文

element-ui中table-column的button按钮loading状态 在我们的项目中，往往需要在一个列表页里展示全部的数据，每一行展示各种数据； 但是由于是测试工具，所以经常需要在每一行中嵌入按钮，通过<template slot-scope="scope">来让每行的button获取它所在行的全部数据，从而提取这一行中的某个字段，继而发出ajax请求，column代码示例如下： <el-table-column label="操作"> <template slot-scope="scope"> <el-button size="mini" type="success" :loading="launchLoading === scope.row.task_id" @click="handleLaunch(scope.row.task_id)" >启动</el-button> <el-button size="mini" type="danger" :loading="stopLoading === scope.row.task_id" @click="handleStop(scope.row.task_id)" >停止</el-button> <el-button size="mini" type="warning" plain @click="handleCopy(scope.row.task_id), goAdd()" >复制</el-button> </template> </el-table-column> 这里的操作是：按下这一行的按钮，它会获取这一行的task_id，并作为形参传递给绑定的click方法@click="handleLaunch(scope.row.task_id) 如果只是为了传递正确的data，其实这里已经完成了操作，但是为了用户体验，往往需要在按钮上再绑定loading状态，element官方示例如下： 要设置为 loading 状态，只要设置loading属性为true即可。 <el-button type="primary" :loading="true">加载中</el-button> 那么只要通过控制:loading绑定的值，就可以手动控制按钮的loading效果啦！ 但是！！！如果这个按钮在table中，直接绑定的结果是点击任何一行的按钮，全部的按钮都在转圈圈，看起来极其愚蠢0.0 曾经我的解决方法是让后端返回的数据里，每一行都加入一个loading字段，默认是false，之后每一行中都可以获取到，那么当我按下这一行的按钮，同时修改为true就可以控制只有当前焦点的button有loading圈圈了。 可是这样还是很蠢啊。 后来在开发同事的启发下，el-table-column部分如前面所示，在data()中设置launchLoading布尔值，默认false，绑定的click方法如下： handleLaunch(task_id) { this.launchLoading = task_id // 启动 var data = { task_id: task_id } console.log(data) reqRtcLaunch(data).then((result) => { // console.log(result) this.$message({ message: '启动成功O(∩_∩)O~', type: 'success' }) this.

阅读全文

h5ai安装和配置 h5ai官网 h5ai Github 环境要求 nginx或者Apache，我的环境是mac + nginx； php，mac用户直接brew install php即可； 目录结构如下 DOC_ROOT ├─ _h5ai ├─ your files └─ and folders nginx配置文件 mac本机用brew安装nginx后，默认配置文件地址为： /usr/local/etc/nginx/nginx.conf 修改默认配置： #user nobody; worker_processes 1; #error_log logs/error.log; #error_log logs/error.log notice; #error_log logs/error.log info; #pid logs/nginx.pid; events { worker_connections 1024; } http { include mime.types; default_type application/octet-stream; #log_format main '$remote_addr - $remote_user [$time_local] "$request" ' # '$status $body_bytes_sent "$http_referer" ' # '"$http_user_agent" "$http_x_forwarded_for"'; #access_log logs/access.

阅读全文

VueSocketio的前端实现与大坑 前端实现 首先，如果全局初始化socket实例的话，在main.js中声明即可。 以下是在具体vue组件中使用的情况： import VueSocketio from 'vue-socket.io' import Vue from 'vue' Vue.use(new VueSocketio({ debug: true, // connection: 'ws://10.60.82.83/lptslog', connection: req_url_us_ws + '/lptslog', options: { // path: '/lptslog', autoConnect: false, transports: ['websocket', 'xhr-polling', 'jsonp-polling'] } })) 这个Vue-Socket.io官方文档并没有提到*transports*是干啥的,它给的例子是： import Vue from 'vue' import store from './store' import App from './App.vue' import VueSocketIO from 'vue-socket.io' Vue.use(new VueSocketIO({ debug: true, connection: 'http://metinseylan.com:1992', vuex: { store, actionPrefix: 'SOCKET_', mutationPrefix: 'SOCKET_' }, options: { path: "/my-app/" } //Optional options })) new Vue({ router, store, render: h => h(App) }).

阅读全文

需求  业务有个很常用的场景是渲染一个结果列表页时，后端返回的状态码一般只能是数字  但我们在table中渲染的时候只渲染数字显然并不能很直观的反馈给使用者，所以结合tag的type属性绑定，就能配合过滤器来实现颜色标识和文本映射，体验明显更好~ vue代码 首先vue实例中定义过滤器~ export default { // -1失败 0未启动 1运行中 2运行完成 3记录不存在 filters: { statusFilter(status) { const statusMap = { '-1': '失败', '0': '未启动', '1': '运行中', '2': '运行完成', '3': '记录不存在' } return statusMap[status] }, typeFilter(status) { const statusMap = { '-1': 'danger', '0': '', '1': 'success', '2': 'info', '3': 'warning' } return statusMap[status] } }, } 模板代码 之后在模板里使用就好啦！ <el-table-column label="状态" prop="status" width="100" > <template slot-scope="scope"> <el-tag :type="scope.

阅读全文