ant-design-vue的admin-pro项目是怎么做权限控制的
公司的后台管理系统是基于ant-design-vue的vip收费版搭建的项目。下载地址是https://store.antdv.com/items/admin-pro, 收费版和免费版的区别是收费版用的vue3 ts开发的,而免费版用的是vue2开发的。
项目初始化后是怎么创建页面组件(路由)的,权限控制又是怎么做的?我们的项目基于pro-vip做了一些改动,但是架子跟pro-vip是基本差不多的。
在router.beforeEach中获取用户信息及权限信息,并将(路由)权限存到userStore里,下次路由跳转判断userStore中有权限信息就不重新获取用户信息及权限信息了
12345678910111213141516router.beforeEach(async to => { //.... // 判断userStore中有allowRouters,直接返回true if (userStore.allowRouters && userStore.allowRouters.length > 0) { return tr ...
a-table搜索表格数据但不影响表格的数据选中,怎么做?
场景:表格数据勾选了某条数据或某几条数据,再通过搜索框搜索数据,此时界面上看不到刚才已勾选的数据,但是点击提交时却需要提交所有刚刚勾选的数据。搜索出来的数据勾选或取消勾选,当重新搜索或重置搜索时,勾选不会受影响。
这就需要做一些特殊操作,不能直接把selectedRowKeys赋值给选中的keys,具体应该怎么处理,请看下文。
12345678910111213<a-table @change="handleTableChange" :row-selection="{ selectedRowKeys: data.selectedRowKeys, onChange: onSelectChange, getCheckboxProps: checkboxPropsFn, }" :loading="data.loading" :columns="data.columns" :data-source="data.dataList" :pag ...
a-tree右侧的checkbox
业务场景中,分配职责权限,职责权限是树的结构,需求是树的左侧为新勾选的职责,数的右侧为用户的角色带的职责。如图所示。树用的是ant-design-vue的a-tree,该组件默认是没有右侧的checkbox的,但是它提供的插槽可供开发人员自定义树中每个节点的展示形式。所以我们可以通过插槽的形式自定义树的节点。该需求的难点是右侧checkbox的选中时,实现父级的全选与半选。
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253<a-input v-model:value="data.searchValue" placeholder="权限名称" style="width: 200px; margin: 8px 0" :maxlength="20" @change="searchFn"> <template #suffi ...
gitignore修改了但不生效
gitignore修改了但不生效,一般是由于缓存导致的,可以尝试清除缓存并重新提交
123git rm -r --cached .git add .git commit -m "清除 Git 缓存并重新提交"
github推送代码由于网络原因经常失败的解决办法
github是全球最大的代码托管平台,但是由于墙的原因,在国内访问经常会有问题,虽然国内也有平替比如gitee,但是说实话比github还是差点意思。
最近发现github推送代码总是失败,查看错误日志一般都是由于网络的原因。
于是各种切换网络,使用各种梯子,但总是不能完美解决问题。
今天实在是忍不了,好好搜了一下解决方法。原来可以用ssh的方式解决这个问题。(原先我下载代码一般习惯用http的方式,这下发现它的弊端了。)下面介绍一下用ssh克隆以及推送代码的方法:
1.创建ssh密钥本机是mac电脑,使用ssh命令生成公钥私钥
1ssh-keygen -t rsa -C "公司电脑"
-t 指定要创建的密钥类型为rsa-C 注释
敲了该命令会出现 Enter file in which to save the key (/Users/用户名/.ssh/id_rsa):让输入密钥文件名的提示,可以直接回车,默认生成名为 id_rsa 及 id_rsa.pub 的私钥及公钥。
再次出现Enter passphrase (empty for no passphras ...
修改Butterfly主题的一些源码,定制样式
修改了一些butterfly主题的源码
1.修改posts页面不显示文章的分类的问题发现posts文章页面顶部不显示文章的标签(tags),故阅读了修改了butterfly的相关源码,还提了一个pr给作者,经沟通作者说他有写tags,但是按照设计稿,tags在页面的底部展示。闹了个乌龙。不过我把这个修改放到我的项目里了,个人认为tags放顶部合适。修改的文件目录为 themes/butterfly/layout/includes/header/post-info.pug
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115 ...
用vue3 vite搭建一个项目
1.搭建项目按照vue官网执行命令
1npm init vue@latest
这一指令将会安装并执行 create-vue,它是 Vue 官方的项目脚手架工具。
2.安装lessless-loader貌似不必须
3.安装postcss-px-to-viewport自动转化px为vw并新建配置文件对其配置发现报了个警告:postcss-px-to-viewport: postcss.plugin was deprecated.又重新安装了升级版postcss-px-to-viewport-8-plugin,该配置文件同postcss-px-to-viewport的配置
4.安装vant发现postcss-px-to-viewport连vant的px也转了,导致vant的样式被压扁了。于是修改其配置,判断是vant文件viewport就用375的宽度
12345678910111213141516// postcss.config.jsmodule.exports = { plugins: { "postcss-px-to-viewport-8-plu ...
git推代码报错了
别人往我的分支上合并了代码,我在不清楚的情况下直接提交,并推送,git报错,也无法拉取代码了。错误信息如下
12345678910111213hint: You have divergent branches and need to specify how to reconcile them.hint: You can do so by running one of the following commands sometime beforehint: your next pull:hint: hint: git config pull.rebase false # mergehint: git config pull.rebase true # rebasehint: git config pull.ff only # fast-forward onlyhint: hint: You can replace "git config" with "git config --global" to set a defau ...
前端导出word文档
1234567891011121314151617181920212223242526272829303132333435363738function exportWord(css, html, fname, type='application/msword'){ const htmlDom = `<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style>${css}</styl ...
typescript的学习记录
ts的准备工作
什么是tsTypeScript是JavaScript的超集,因为它扩展了JavaScript,有JavaScript没有的东西。硬要以父子类关系来说的话,TypeScript是JavaScript子类,继承的基础上去扩展。为什么要用ts简单来说就是因为JavaScript是弱类型, 很多错误只有在运行时才会被发现而TypeScript提供了一套静态检测机制, 可以帮助我们在编译时就发现错误ts的特点支持最新的JavaScript新特特性支持代码静态检查支持诸如C,C++,Java,Go等后端语言中的特性 (枚举、泛型、类型转换、命名空间、声明文件、类、接口等)
安装1npm i -g typescript
编译生产js1tsc index.ts
不编译直接运行安装一个工具 npm i -g ts-node
1ts-node index.ts
ts的语法声明变量并给它指定类型1let a: number = 3
类型的别名用type定义一个类型的别名
12type mytype = 1 | 2 | 3let x: mytype = 1
函数的类型声明声明参数的 ...