vue.js的简单让它可以很方便的集成到各应用中，相比react它更轻便灵活，所以react做大型应用是合适的。不过作为wordpress一个插件，react太重了。
其实，在wp的插件中集成vue是很简单的事情，可以看下面的代码示意，比较重要的是要先include页面进来，然后再引入vue.js，以及vue的初始化以及逻辑代码了
下面这个是插件主文件，我这里是dfass.php function df_options_page_html() {
// check user capabilities
if (!current_user_can('manage_options')) {
return;
}
//加载页面
include(plugin_dir_path(__FILE__) . 'view.php');
//加载css
wp_enqueue_style('element-css', plugin_dir_url(__FILE__) . 'element.css', [], '2.14.1');
wp_enqueue_style('index.css', plugin_dir_url(__FILE__) . 'index.css', array(), '1.0');
//加载js
wp_enqueue_script('vue', plugin_dir_url(__FILE__) . 'vue.js', [], '2.6.12');
wp_enqueue_script('element-js', plugin_dir_url(__FILE__) . 'element.js', [], '2.14.1');
wp_enqueue_script('axios', plugin_dir_url(__FILE__) . 'axios.min.js', [], '0.21.1');
wp_enqueue_script('index.js', plugin_dir_url(__FILE__) . 'index.js', array(), '1.0');
init_user();
}
add_action('admin_menu', 'df_options_page');
function df_options_page() {
add_dashboard_page('钉钉表单助手', '钉钉表单助手', 'manage_options', 'df', 'df_options_page_html');
}2. 接下来是view页面html文件view.php
<div id="app" class="wrapper">
<div class="centered">
<h2>钉钉表单助手</h2>
</div>
<template>
<el-row>
<el-input
v-model="value"
style="width: 300px"
placeholder="请输入手机号">
</el-input>
<el-button type="primary" v-on:click="btnClick()">添加</el-button>
<el-button type="primary" v-on:click="btnApply()">执行</el-button>
</el-row>
<el-row>
<el-table
:data="tableData"
stripe
style="width: 100%">
<el-table-column
prop="name"
label="用户名"
width="180">
</el-table-column>
<el-table-column
prop="user_id"
label="钉钉id"
width="180">
</el-table-column>
<el-table-column
prop="created_at"
label="添加时间">
</el-table-column>
<el-table-column
prop="last_time"
label="最后执行时间">
</el-table-column>
<el-table-column
prop="last_result"
label="最后执行结果">
</el-table-column>
<el-table-column
prop="enable"
label="状态">
<template slot-scope="scope">
<div slot="reference" class="name-wrapper">
<el-tag v-show="scope.row.enable===true" type="success" size="medium">启用</el-tag>
<el-tag v-show="scope.row.enable===false" type="info" size="medium">禁用</el-tag>
</div>
</template>
</el-table-column>
<el-table-column
fixed="right"
label="操作"
width="100">
<template slot-scope="scope">
<el-button v-show="scope.row.enable === false" @click="handleClick(scope.row,true)" type="primary"
size="small">启用
</el-button>
<el-button v-show="scope.row.enable === true" @click="handleClick(scope.row,false)" type="danger"
size="small">禁用
</el-button>
</template>
</el-table-column>
</el-table>
</el-row>
</template>
</div>3. 最后是vue初始化及逻辑代码index.js
(function () {
let vue = new Vue({
el: '#app',
data: function () {
return {
activeIndex: '1',
activeSubIndex: '1',
tableData: [],
loading: false,
value: undefined,
options: [],
}
},
mounted: function () {
this.getTableData()
},
methods: {
getTableData() {
let data = new FormData();
data.append('action', 'df_get_setting_list');
axios.post(ajaxurl, data).then(function (res) {
if (res.data.code !== 200) {
vue.$message({
message: res.data.message,
type: 'error'
});
return;
}
vue.tableData = res.data.data.userList;
})
},
handleClick(row, enable) {
let data = new FormData();
data.append('action', 'df_update_form_enable');
data.append('user_id', row.user_id);
data.append('enable', enable);
axios.post(ajaxurl, data).then(function (res) {
if (res.data.code !== 200) {
vue.$message({
message: res.data.message,
type: 'error'
});
}
vue.getTableData();
})
},
btnApply() {
let data = new FormData();
data.append('action', 'df_apply_form');
axios.post(ajaxurl, data).then(function (res) {
if (res.data.code !== 200) {
vue.$message({
message: res.data.message,
type: 'error'
});
}
vue.getTableData();
})
},
btnClick() {
let data = new FormData();
data.append('action', 'df_add_user_form');
data.append('phone', this.value);
this.value = undefined;
axios.post(ajaxurl, data).then(function (res) {
if (res.data.code !== 200) {
vue.$message({
message: res.data.message,
type: 'error'
});
}
vue.getTableData();
vue.$message({
message: '添加成功',
type: 'success'
});
})
}
}
})
})();如上，其实就可以在wp插件中集成vue了，完整的逻辑代码省略。
这个插件其实实现的是，每天9点根据钉钉打卡记录检测如果有加班讲自动发起加班餐表单申请。
可能有的人觉得奇葩，加班餐都还要申请！确实，博主所在公司也是个几百人的“大公司”，所以规章很多。但加班了还要手动填单，说句实话虽然我不是多懒的人，但我觉得不符合我们做“懒人”宗旨。
具体实现的不开源了，需要了解详细的可以留言交流。
linux kill 特定名称
ps -ef | grep java | grep -v grep | cut -c 9-15 | xargs kill -9sourcetree避免输入密码方法
git config --global credential.helper storelinux磁盘扩容
e2fsck -f /dev/vdb1 resize2fs /dev/vdb1druid数据库密码配置文件加密
java -cp .\\druid-1.0.31.jar com.alibaba.druid.filter.config.ConfigTools ******mac下csv乱码解决办法
到csv目录下， 用终端执行以下命令:
iconv -f UTF8 -t GB18030 a.csv >b.csvMySQL修改密码
ALTER USER 'root'@'localhost' IDENTIFIED BY '******';
CREATE USER 'nextcloud'@'localhost' IDENTIFIED BY '******';
CREATE DATABASE IF NOT EXISTS nextcloud CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;
GRANT ALL PRIVILEGES ON nextcloud.* TO 'nextcloud'@'localhost';
FLUSH PRIVILEGES;
