自定义

1、减少sql语句，组合数据表：eb_system_group（表前缀有更改，请手动变更） INSERT INTO `eb_system_group` (`id`, `cate_id`, `name`, `info`, `config_name`, `fields`) VALUES (NULL, 0, 'PC页面链接', 'PC页面链接', 'pc_link', '[{\"name\":\"\\u540d\\u79f0\",\"title\":\"name\",\"type\":\"input\",\"param\":\"\"},{\"name\":\"\\u5730\\u5740\",\"title\":\"link\",\"type\":\"input\",\"param\":\"\"}]');2、 在后盾设置->系统维护->开发配置->组合数据中找方才增加的PC页面链接，如图： 关上数据列表，自定义增加PC页面存在链接： 3、 pc端接口定义：在route/api.php文件搜寻‘pc’,定义接口在不须要受权登录分组中，如下： Route::get('get_top_category', 'pc.HomeController/getTopCategory')->name('getTopCategory');//获取顶部分类4、 在控制器文件目录：app/controller/api/pc/HomeController中定义方法：getTopCategory，如下： public function getTopCategory() { $list = sys_data('pc_link'); return app('json')->successful($list);}sys_data办法详解：https://doc.crmeb.com/web/pro...到这里数据和后端接口就定义实现5、 批改pc端代码，完整包中代码门路：view/pc(1)、文件components/headers.vue定义获取顶部分类办法： getTopCategory() { this.$axios.get("/pc/get_top_category").then((res) => { this.headerList = res.data; }); },在created()中调用；如图 （2） 批改data中headerList为空数组（3） 批改遍历展现分类如图： 留神：1、 pc批改当初本地测试通过，而后打包放入服务器public/home下，打包教程：https://doc.crmeb.com/web/pro...2、 分类数据排序（降序排序） 效果图如下： 看完如果还有不懂的敌人能够在下方留言或者关注crmeb公众号发问问题，咱们会帮大家解答 最初如果你感觉这篇文章对你有点用的话，麻烦请给咱们的开源我的项目点点star:http://github.crmeb.net/u/defu不胜感激 ！ 收费获取源码地址：http://www.crmeb.com PHP学习手册：https://doc.crmeb.com 技术交换论坛：https://q.crmeb.com

es 配置IK Dictionary Configuration <?xml version="1.0" encoding="UTF-8"?><!DOCTYPE properties SYSTEM "http://java.sun.com/dtd/properties.dtd"><properties> <comment>IK Analyzer 扩大配置</comment> <!--用户能够在这里配置本人的扩大字典 --> <entry key="ext_dict">custom/mydict.dic;custom/single_word_low_freq.dic</entry> <!--用户能够在这里配置本人的扩大进行词字典--> <entry key="ext_stopwords">custom/ext_stopword.dic</entry> <!--用户能够在这里配置近程扩大字典 --> <entry key="remote_ext_dict">location</entry> <!--用户能够在这里配置近程扩大进行词字典--> <entry key="remote_ext_stopwords">http://xxx.com/xxx.dic</entry></properties>不能热词更新，每次批改词典都须要重启 ES热词更新参见 应用 nginx 疾速搭建 elasticsearch ik 近程词典服务Kibana 测试GET _analyze{ "analyzer": "ik_smart", "text": "三体"}本文出自 qbit snap

前言GitHub徽标，GitHub Badge，你也可以叫它徽章。就是在项目README中经常看到的那些表明构建状态或者版本等信息的小图标。就像这样：这些好看的小图标不仅简洁美观，而且包含了清晰易读的信息，在README中使用小徽标能够为自己的项目说明增色不少！如何给自己的项目加上小徽标呢？ 一、关于徽标徽标图片分左右两部分，左边是标题，右边是内容，就像是键值对。GitHub徽标官网是 https://shields.io/图标规范二、如何添加动态徽标动态徽标是指如果项目状态发生变化，会自动更新状态的徽标，它能保证用户看到的信息就是项目当前的真实状态。 常用的动态徽标有： 持续集成状态项目版本信息代码测试覆盖率项目下载量贡献者统计等等这里以Travis CI 的持续集成状态为例。没有接触过 Travis CI的可以看我的上一篇文章 利用Travis CI+GitHub实现持续集成和自动部署 登录 Travis CI，进入配置过构建的项目，在项目名称的右边有个 build passing 或者 build failing 徽标。点击它，在弹出框中，就可以看到 Travis CI 为你提供的各种格式的徽章地址了。你可以根据需要选择格式，imageUrl格式大概是这个样子： https://www.travis-ci.org/{your-name}/{your-repo-name}.svg?branch=mastermarkdown格式大概是这个样子： [](https://www.travis-ci.org/{your-name}/{your-repo-name})简单起见，我选择 markdown 格式。将内容复制后，打开项目的README文档，在顶部位置粘贴。经过前4步，小徽章就搞定了。将README文档push到远程，刷新GitHub页面，过一会，就会看到README上面已经有了持续集成状态图标了:之所以要过一会才加载出来，是因为它要动态从 Travis CI 平台获取状态。三、如何自定义徽标shields.io 提供了自定义徽标的功能。 徽标图标格式https://img.shields.io/badge/{徽标标题}-{徽标内容}-{徽标颜色}.svg带链接的徽标[]({linkUrl})变量说明徽标标题：徽标左边的文字徽标内容：徽标右边的文字徽标颜色：徽标右边的背景颜色，可以是颜色的16进制值，也可以是颜色英文。支持的颜色英文如下：变量之间用 - 连接。将这3个变量替换为你需要的内容即可生成一个自定义的徽标。 举个栗子例如下面这个是我的博客的徽标： [](https://champyin.com)效果：点击该徽标会打开对应的linkUrl地址，即直接跳到我的博客。 进阶除了上面所说的3个参数，shields.io 还提供了一些 query string 来控制徽标样式。使用方式跟URL的query string一致：徽标图标地址?{参数名}={参数值}，多个参数用 & 连接： https://img.shields.io/badge/{徽标标题}-{徽标内容}-{徽标颜色}.svg?{参数名1}={参数值1}&{参数名2}={参数值2}常用的 query string 参数有： style：控制徽标主题样式，style的值可以是： plastic | flat | flat-square | social 。label：用来强制覆盖原有徽标的标题文字。colorA：控制左半部分背景颜色，只能用16进制颜色值作为参数，不能使用颜色英文。colorB：控制右半部分背景颜色。以style参数为例 plastic 立体效果： flat 扁平化效果，也是默认效果： flat-square 扁平 + 去圆角效果： ...

需求：vue项目移动端要求用户在公众号中分享出去的链接是图片+文字+标题的形式。而不是默认的要实现的效果如图所示： 不设置时，分享的默认效果,如下图所示： 几个要注意的地方：wx.config 所有的配置项的数据都是后台返回的wx.config配置项的参数大小写一定要按照官网文档来，区分大小写，但是获取到的后台返回的字段可以自由定义，这个时候要注意后台返回的数据字段名称是否和官网的一致，在这块有个问题找了半天，结果最后发现wx.config配置项里面后台返回的res.data.noncestr中noncestr为小写，而自己没有细看一直以为也是nonceStr.导致config:fail.分享时，请求的url不能带有hash值等，所以要进行截取具体参考代码如下所示：` wxShared() { let newUrl = window.location.href.split("#")[0]; // let url = newUrl; this.$store.dispatch("GetTicketJSAPI", url).then(res => { let params = { debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来 appId: "wx3dab174110e5f840", // 必填，企业微信的corpID timestamp: res.data.timestamp, // 必填，生成签名的时间戳*************** nonceStr: res.data.noncestr, // 必填，生成签名的随机串 必填，生成签名的随机串*************** signature: res.data.signature, // 必填，签名*************** jsApiList: ["onMenuShareAppMessage", "onMenuShareTimeline"] }; wx.config(params); //通过config接口注入权限验证配置 wx.ready(function() { // config信息验证成功后会执行ready方法 //通过ready接口处理成功验证 wx.onMenuShareAppMessage({ // 分享给朋友 title: "声动语商学苑", // 分享标题 desc: "好语商引领自信人生 · “一站式”专业青少儿语商培养教育品牌", // 分享描述 link: res.data.str, // 分享链接 imgUrl: "http://www.shengdongyushang.com/upload/asserts/sdys_logo1.png", // 分享图标 type: "", // 分享类型,music、video或link，不填默认为link dataUrl: "", // 如果type是music或video，则要提供数据链接，默认为空 success: function(res) { // 用户确认分享后执行的回调函数 }, cancel: function() { // 用户取消分享后执行的回调函数 } }); wx.onMenuShareTimeline({ //分享朋友圈 title: "声动语商学苑", // 分享标题 desc: "好语商引领自信人生 · “一站式”专业青少儿语商培养教育品牌", link: res.data.str, imgUrl: "https://qccdata.qichacha.com/AutoImage/052236e320f34be80991ce01fd8cd138.jpg?x-oss-process=image/resize,w_120", // 分享图标 success: function(res) { // 用户确认分享后执行的回调函数 }, cancel: function() { // 用户取消分享后执行的回调函数 } }); }); });},`如果对你有所帮助，麻烦点个赞再走吧 ^_^

如果我们的Vue项目中没有用到任何UI框架的话，为了更好的用户体验，肯定会用到loading和toast。那么我们就自定义这两个组件吧。1、Toast组件首先，在common下新建global文件夹，存放我们的toast.vue和toast.js两个文件（当然文件的具体位置你可以自行安排）。(1). toast.vue<template lang=“html”> <div v-if=“isShowToast” class=“toast-container” @touchmove.prevent> <!– 这里content为双花括号 –> <span class=“loading-txt”>{content}</span> </div></template><script>export default { data () { return { isShowToast: true, content: ’’ } }}</script><!– Add “scoped” attribute to limit CSS to this component only –><style scoped>.toast-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.1);}.toast-msg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60%; padding: 35px; border-radius: 10px; font-size: 28px; line-height: 36px; background: #eee; color: #666;}</style>(2). toast.jsimport Vue from ‘Vue’import ToastComponent from ‘./Toast.vue’const Toast = {}let showToast = false // 存储loading显示状态let toastNode = null // 存储loading节点元素const ToastConstructor = Vue.extend(ToastComponent)Toast.install = function (Vue, options) { // 参数 var opt = { duration: ‘1200’ } for (var property in options) { opt[property] = options[property] } Vue.prototype.$toast = function (tips, type) { if (type === ‘hide’) { toastNode.isShowToast = showToast = false } else { if (showToast) { // 如果toast还在，则不再执行 return } toastNode = new ToastConstructor({ data: { isShowToast: showToast, content: tips } }) toastNode.$mount() // 挂在实例，为了获取下面的toastNode.$el document.body.appendChild(toastNode.$el) toastNode.isShowToast = showToast = true setTimeout(function () { toastNode.isShowToast = showToast = false }, opt.duration) } }; [‘show’, ‘hide’].forEach(function (type) { Vue.prototype.$toast[type] = function (tips) { return Vue.prototype.$toast(tips, type) } })}export default Toast然后，我们需要把写好的组件在/src/main.js中引用一下。import Toast from ‘./components/common/global/toast’Vue.use(Toast)最后，怎么使用呢？只需在要用的地方this.$toast.show(‘hello world’)2、Loading组件loading组件只需要照着toast组件搬过来，稍微改下就可以了。首先，在common下新建global文件夹，存放我们的loading.vue和loading.js两个文件。(1). loading.vue<template lang=“html”> <div v-if=“isShowLoading” class=“loading-container”> <div class=“loading-box”> <img class=“loading-img” :src=“require(’../../../assets/images/loading.png’)"> <!– 这里content为双花括号 –> <span class=“loading-txt”>{content}</span> </div> </div></template><script>export default { data () { return { isShowLoading: false, content: ’’ } }}</script><!– Add “scoped” attribute to limit CSS to this component only –><style scoped>.loading-container { display: flex; justify-content: center; align-items: center; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0); z-index: 1000;}.loading-box { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 150px; height: 150px; border-radius: 10px; background: #e5e5e5;}.loading-img { width: 70px; height: 70px; animation: rotating 2s linear infinite;}@keyframes rotating { 0% { transform: rotate(0deg); } 100% { transform: rotate(1turn); }}.loading-txt { display: flex; justify-content: center; align-items: center; font-size: 24px; color: #666;}</style>(2). loading.jsimport Vue from ‘Vue’import LoadingComponent from ‘./Loading.vue’const Loading = {}let showLoading = false // 存储loading显示状态let loadingNode = null // 存储loading节点元素const LoadingConstructor = Vue.extend(LoadingComponent)Loading.install = function (Vue) { Vue.prototype.$loading = function (tips, type) { if (type === ‘hide’) { loadingNode.isShowLoading = showLoading = false } else { if (showLoading) { // 如果loading还在，则不再执行 return } loadingNode = new LoadingConstructor({ data: { isShowLoading: showLoading, content: tips } }) loadingNode.$mount() // 挂在实例，为了获取下面的loadingNode.$el document.body.appendChild(loadingNode.$el) loadingNode.isShowLoading = showLoading = true } }; [‘show’, ‘hide’].forEach(function (type) { Vue.prototype.$loading[type] = function (tips) { return Vue.prototype.$loading(tips, type) } })}export default Loading然后，在/src/main.js中引用一下loading组件。import Loading from ‘./components/common/global/loading’Vue.use(Loading)最后，只需在要用的地方this.$loading.show(‘hello world’)、 this.$loading.hide() ...

element-ui默认的table组件支持的表头筛选（过滤）是比较简单的，只支持数组的方式，单选或多选的形式，但有时候我们喜欢支持输入框形式（其实感觉有点扯淡，一般列表页上面都有搜索条件）。注意：里面用到的jsx语法，可能需要安装一些插件。准备工作：1.安装babel-plugin-jsx-v-model插件npm i babel-plugin-jsx-v-model -D或者yarn add babel-plugin-jsx-v-model -D2..babelrc:{ “presets”: [“es2015”], “plugins”: [“jsx-v-model”, “transform-vue-jsx”]}3.重启本地环境实现效果如下：代码如下：<template> <div> <el-table :data=“tableData”> <el-table-column label=“这是文字” :render-header=“renderHeader” prop=“name”></el-table-column> <el-table-column label=“地址” prop=“address”></el-table-column> </el-table> </div></template><script>export default { data() { return { search: ‘’, visible: false, tableData: [{ date: ‘2016-05-02’, name: ‘王小虎’, address: ‘上海市普陀区金沙江路 1518 弄’ }, { date: ‘2016-05-04’, name: ‘王小虎’, address: ‘上海市普陀区金沙江路 1517 弄’ }, { date: ‘2016-05-01’, name: ‘王小虎’, address: ‘上海市普陀区金沙江路 1519 弄’ }, { date: ‘2016-05-03’, name: ‘王小虎’, address: ‘上海市普陀区金沙江路 1516 弄’ }] } }, methods: { renderHeader(h, {column, $index}, index) { return ( <span> 问题分类 <el-popover placement=‘bottom’ width=‘200’ height=‘200’ trigger=“click” v-model={this.visible}> <span slot=“reference”> <i class=“el-icon-search” style={this.search ? {‘color’ : ‘red’} : {‘color’: ‘blue’}}></i> </span> <el-input size=‘small’ v-model={this.search} placeholder=‘请输入内容’></el-input> <div class=‘el-table-filter__bottom’> <button class={this.search ? ’’ : ‘is-disabled’}>筛选</button> <button on-click={this.clearSearch}>重置</button> </div> </el-popover> </span> ); }, clearSearch() { this.search = ‘’; } }}</script>参考： https://www.jianshu.com/p/f55… ...