![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
xiaoxiao1777
这个作者很懒,什么都没留下…
展开
-
鉴权原因
情景:前端对按钮权限做了控制,无权限的不显示,但这只是最基本的控制,如果有人通过postman软件发送删除请求,并且携带上token,这个token是在浏览器开发者工具中可以查到的,后端如果不做防御处理的话是很危险的需求分析:后端如何做防御呢?后端在收到请求后,设置一个拦截器,去比对请求的api是否在该用户的权限列表中,这样的目的就是为了防止有人通过postman发送不合法的请求,同时也防止了前端页面中万一忘记写v-if暴露了某个按钮,也可以在后端进行了补救,起到二次控制作用jwt和sh原创 2020-06-03 09:52:18 · 543 阅读 · 0 评论 -
加载用户菜单权限信息放到哪里合适
情景:登录成功获取到token后,跳转到首页,请求用户的权限信息(包括可访问的菜单信息)这一步是放到跳转之前的路由守卫中,还是放到首页的钩子函数中呢?分析:其实都可以,但觉得还是放到跳转之前,依然处于登录页面中好一些,因为数据处理准备好,再去加载页面会合理...原创 2020-05-31 11:45:27 · 1007 阅读 · 0 评论 -
给用户分配角色情景
给用户分配角色情景:显示出所有角色,当前选中用户拥有的角色是选中状态分析:1.查询出所有角色select * from sys_roles2.根据用户id查询出已选择的角色使用左外连接可以把1和2的过程进行合并,不必要分开做两次查询左外连接 left join特点:即便右边中找不到关联数据,左表的数据也会全部显示,关键是要考虑把谁作为左表select r.roleName, r.roleId, u.userIdfrom sys_rol原创 2020-05-30 10:15:59 · 638 阅读 · 0 评论 -
将表结构中的数据转化为树形节点数据对象
情景:左侧菜单,右侧权限树,它们接收到的数据都应为后台处理好的树形节点数据,不应该在前端来进行树状结构的转化,虽然比如Z-Tree自带这个功能,但是会造成前端树形显示延迟解决:后端提供一个工具类进行转换一次将数据查询出来,再进行递归建模:即先创建一个节点类public class TreeNode { private Integer id; private String name; private Integer pid; //子节点数组 必须先初原创 2020-05-29 17:40:15 · 884 阅读 · 0 评论 -
权限管理系统数据库表的设计分析
为什么要分析这些呢?因为从前端到后端都自己写的话,数据库中表结构的设计是基础,很关键,这样从前到后才是清晰的权限控制:就是指对菜单和按钮可见性的控制,菜单:根据登录用户返回的菜单数据进行动态加载,v-for遍历;按钮:比如点开订单管理界面,会先从功能表中查询出对应的按钮权限数据进行判断显示还是隐藏,v-if判断权限表设计思想:所分配的权限就是指左侧的菜单项和右侧菜单项对应页面上的按钮,这些在前端页面上表现出的是对应的控件,对应到数据库中就是一些对应的id和名称信息一般左侧菜单最多分三原创 2020-05-25 11:55:12 · 1943 阅读 · 0 评论 -
配置与优化
通过vue-cli3.0工具生成的项目,默认隐藏了所有webpack的配置项,目的是为了屏蔽项目的配置过程,让开发者把工作的中心,放到功能和业务逻辑上如果有修改webpack默认配置的需求,可以在项目根目录中,按需创建vue.config.js这个配置文件默认情况下,通过import导入的第三方依赖包,会最终打包合并到一个文件中,从而导致打包文件体积过大的问题,如在ui可视化面板中,可以看到资源中第一个文件体积特别大为了解决以上问题,可以通过webpack的externals的节点,来配置加载外原创 2020-05-23 10:51:34 · 216 阅读 · 0 评论 -
发布时候去除项目中所有的console
测试阶段可以有console,发布后让console失效1.开发依赖:babel-plugin-transform-remove-console2.babel-config.js中// 项目发布阶段需要用到的babel插件const prodPlugins = []if (process.env.NODE_ENV === 'production') { prodPlugins.push('transform-remove-console')}plugins:中配置//发布产.原创 2020-05-23 09:34:26 · 709 阅读 · 0 评论 -
进度条nprogress使用
1.安装依赖2.导入NProgress包对应的js和cssimportNProgressfrom'nprogress'import'nprogress/nprogress.css'3.请求拦截器中 NProgress.start()4.响应拦截器中 NProgress.done()原创 2020-05-23 09:11:02 · 235 阅读 · 0 评论 -
vue中echarts使用
1.安装依赖-->运行依赖-->echarts 图形化界面真的很好用,弥补了命令的繁琐2.在需要的组件页面中导入,不要在main.js中导入,因为不是所有的地方都用到import echarts from 'echarts'3.mounted函数中创建实例和数据注意:不要把这些放到created函数中,mounted是dom元素加载到界面后调用,图标是在template中的dom元素加载后才去显示created表示dom元素加载到内存中调用,此时还没有显示,把图标组件放到这原创 2020-05-23 08:51:44 · 163 阅读 · 0 评论 -
vue中data一个规则
如果属性名和属性值相同,可以简写为一个如:name: name 直接简写为name原创 2020-05-22 20:34:23 · 423 阅读 · 0 评论 -
富文本编辑器组件vue-quill-editor
依赖->安装依赖->运行依赖—>vue-quill-editor// 导入富文本编辑器import VueQuillEditor from 'vue-quill-editor'// 导入富文本编辑器的样式import 'quill/dist/quill.core.css' // import stylesimport 'quill/dist/quill.snow.css' // for snow themeimport 'quill/dist/quill.bubble.cs原创 2020-05-22 15:19:42 · 405 阅读 · 0 评论 -
vue图片上传功能
element-ui提供了上传的组件,真是方便,el-upload情景:界面上虽然看到选取后上传到界面了,但是没有传到后端,F12->network可以看到400原因:它自己内部封装了一套ajax请求,而不通过axios请求,这样就会导致上传不成功,因为默认没有携带token,所有的api接口除了登录,只要通过axios方式进行请求,就会通过请求拦截器就行携带token,当然这个请求拦截器是自己配置的解决:上传组件el-upload手动绑定一个属性 :headers="hea.原创 2020-05-22 11:34:23 · 358 阅读 · 0 评论 -
vue中字符串和数值互转
数值转字符串num + ' '长的像数值的字符串转数值,让它减0就可以如: strVal = '1'strVal - 0原创 2020-05-22 09:40:26 · 16285 阅读 · 0 评论 -
自定义格式化时间的全局过滤器
main.js中定义// 自定义格式化时间的全局过滤器Vue.filter('dataFormat', function(originVal) { const dt = new Date(originVal) const y = dt.getFullYear() const m = (dt.getMonth() + 1 + '').padStart(2, '0') const d = (dt.getDate() + '').padStart(2, '0') const hh =.原创 2020-05-21 09:45:34 · 204 阅读 · 0 评论 -
表单的取消操作
情景1:当新增一个用户或者新增一个存货时,输入了相关信息,又不想新增了,点击了取消,表单中的输入框应该置空解决:不需要挨个获取输入框控件置空,如果是引用的element-ui,设置ref后,获取到该form,调用resetFields()this.$refs.addUserFormRef.resetFields()其它UI库应该也有类似操作,多看文档情景2:修改用户后,又点击了取消解决:待补充...原创 2020-05-19 11:34:46 · 781 阅读 · 0 评论 -
分配权限过程
每一个节点都有唯一的id值,选中某个节点,就可以获取到该节点的id值,el-tree提供了一个默认勾选节点的数组属性,这个值对象得自己提供选中某些节点后,拿到它们的id放入数组中在点击分配按钮的同时,即弹出树形结构对话框之前,把已有末级节点的id值全部拿到,放到数组中,通过:default-checked-keys="defkeys"属性绑定,把这个数组交给该属性如何拿到呢?定义一个递归函数,把当前选中的角色传到函数中,通过递归的方式把末级节点id值都放到数组中分配权限:点击确定分配原创 2020-05-19 11:29:22 · 310 阅读 · 0 评论 -
vue中返回结果是promise的处理
调用element-ui中提供的方法是,经常返回结果类型对象是promise,如果某个函数调用的结果打印后返回的是promise,就马上用saync和await进行优化,async放到方法名称的前面,await放到方法里面原创 2020-05-17 11:54:29 · 13567 阅读 · 0 评论 -
vue中新增弹出对话框操作
情景:点击新增用户或者新增订单,弹出对话框页面进行信息输入操作分析:这个对话框组件是直接放到用户组件代码中的,自带一个属性,控制是否显示,默认为false不显示,需要显示的时候拿到此属性对应的变量,设置为true主体内容使用表单组件<!-- 添加用户的对话框 --> <el-dialog title="添加用户" :visible.sync="addDialogVisible" width="原创 2020-05-16 15:40:03 · 5072 阅读 · 0 评论 -
vue中带参数的请求路径
情景:api文档中会有这样的请求路径 users/:uId/state/:type带冒号的不能直接提交,应该用具体的参数值 ${xxx} 来取代,并且此路径应用模板字符串` `来包围this.$http.put(`users/${userinfo.id}/state/${userinfo.mg_state}`)...原创 2020-05-16 10:47:07 · 3962 阅读 · 1 评论 -
点击aside中的每一项进行路由跳转设置
情景:点击aside中的每一项进行路由跳转分析:使用了element-ui是不需要给每一项加上一个<router-link>的,因为此框架给<el-menu>提供了 一个router属性,默认是关闭的,只需要在标签后面加上router,等同于 :router = "true" ,菜单中的每一项的路由功能就开启了,是以index值为路由路径跳转的,刚开始使用的是subItem.id,但最好是使用每一项数据的path字段值路径名称为路径,后台应该提供一个这样的字段,为了与前端原创 2020-05-13 11:08:51 · 607 阅读 · 0 评论 -
展开一个菜单项所有的项都展开问题解决
问题情景:对于标签<el-menu>来说使用v-for循环创建出来,菜单项列表数组有多少项就创建出多少菜单项控件,导致所有的菜单行索引index值都一样,点击展开和关闭一定是根据index来进行定位操作的,所以导致了点击一个,其它都是同样的效果,相当于对所有相同index项进行的操作解决:给每一项index绑定不同唯一的值,而数据中每个item都有唯一的id,这个id是后台数据库中给设计好的,所以利用这个id<el-submenu :index="item.id + ''原创 2020-05-13 10:31:05 · 5650 阅读 · 0 评论 -
vue-登录路由跳转到主页后开始加载菜单数据
情景:点击登录后,是通过路由跳转到主页,此时是没有发出菜单数据请求的,什么时候发起呢?应该在Home.vue整个页面加载的时候,就应该立即发送请求获取左侧菜单数据在哪里写这个请求代码呢?1.created中调用created () { this.getMenuList()}2.methods中实现methods: { // 获取所有的菜单 async getMenuList() { // 利用对象结构获取等号右边对象的data属性,用re原创 2020-05-12 21:20:01 · 1428 阅读 · 0 评论 -
请求头中携带token值
规则:除过登录接口,其余接口都要携带token哪里携带呢?需要授权的API,必须在请求头中使用Authorization字段获取token值如何在请求头中携带呢?使用axios的请求拦截器axios.interception.request.user(config => { config.headers.Authorization = window.sessionStorage.getItem('token') return config})...原创 2020-05-12 20:47:00 · 10433 阅读 · 0 评论 -
git分支提交及合并
1. + 新加一个终端,因为第一个终端被 vue ui 可视化任务占用2. git status 查看3. git add . 放到暂存区4. git status 所有文件变为绿色5. git commit -m "完成了xxx功能" //暂存区的代码提交到本地仓库中,没有这一步最后是无法提交的6.git branch 查看当前分支,目的是为了获取主分支的名称7. git checkout master 切换到master分支8. git branch ...原创 2020-05-12 17:51:18 · 192 阅读 · 0 评论 -
ESLint与格式化文档规则发生冲突解决
情景1:当点击右键选择格式化文档时,会把js代码中的单引号编程双引号,并且export default的大括号最后加成封号解决:项目src目录下创建一个配置文件.prettierrc 它是一个json格式的文件{ "semi": false, "singleQuote": true}这样格式化的时候就不会再末尾处加封号,然后把双引号变为单引号情景2:当方法名称后面如果不加空格的话,ESLint会提示加一个空格,这个规则应当关掉,它本身不是一个错误解决:原创 2020-05-12 14:50:55 · 1216 阅读 · 0 评论 -
登录与退出逻辑
当点击登录按钮,不应该直接发起请求,而应当在发起请求之前对表单数据进行预验证,验证通过之后再发起请求,验证没通过提示数据不合法如何进行预验证呢?如果返回的promise对象,应该用await async简化,await只能用于async修饰的方法中为什么要把token保存到sessionStorage而不是localStorage?因为localStorae是持久化的存储机制,而sessionStorage是会话期间的存储机制,而token应该咋当前网站打开期间生效路由导航守卫控制页面原创 2020-05-12 11:44:25 · 984 阅读 · 0 评论 -
vue中表单的重置
重置,即把表单中所有属于框内容都变为data中表单对象的默认值,若初始为空则变为空1.先给<el-form ref="loginFormRef">设置ref标识2.给重置按钮绑定重置方法3.拿到form对象,并重置resetLoginForm () { this.$refs.loginFormRef.resetFields() }...原创 2020-05-11 21:32:24 · 1564 阅读 · 0 评论 -
vue中如何在输入框鼠标离开后进行表单验证
1.给<el-form>通过属性绑定校验对象rules :rules="rules"2.data中定义校验对象rules,其中的每个属性都是一个校验规则3.表单item项通过props指定不同的校验规则,是给<el-form-item>,而不是<el-input>参考element-ui文档使用...原创 2020-05-11 21:26:52 · 2670 阅读 · 0 评论 -
vue项目准备工作
1.创建分支:在开发中,要开发新功能,尽量把这个新功能放到一个分支上进行开发,当把分支开发完成之后,再把分支合并到master这个主分支上在vue终端上命令:git checkout -b login //创建了一个login的分支并通过checkout切换到了这个分支上2.查看当前项目的所有分支: git branch 前面有*的代表当前正处于这个分支上可视化编译启动项目:vue ui 可以打开可视化操作面板,左侧 任务->运行->启动app3.改造默认...原创 2020-05-11 18:28:47 · 121 阅读 · 0 评论 -
token分析
http是无状态的方式一:如果前端后后端不存在跨域问题,通过cookies在客户端记录状态,通过session在服务端记录状态方式二:有跨域情况,通过token方式维持状态token原理分析:首次登录,输入用户名和密码,服务器验证之后生成该用户的token并返回给客户端,每个用户的token值不同,客户端进行token存储,后续客户单所有的请求都携带token并发送请求给服务端,服务器根据token确认是哪个用户,同时根据操作返回结果...原创 2020-05-11 11:17:35 · 235 阅读 · 0 评论 -
vue项目创建流程
图形化界面创建项目1.vscode终端:cd vueProject2.vue ui 利用图形化界面方式创建3.左侧更多:项目管理器,点击tab栏创建:选择vueProject路径,点击下方创建4.项目文件夹:vue_shop,如果使用git的话,init project,下一步5.手动:babel,Router,Vuex,Linter,使用配置文件6.ESLint+Standard config,Lint on save7.左侧:插件->查找插件->vue-cli-.原创 2020-05-09 17:06:28 · 295 阅读 · 0 评论 -
vue中const的使用
const的作用就是将变量声明为一个常量,不能被修改,不可以再次赋值,它的指向是不可以改变的,只能指向某处固定区域,不能再指向其它地方在ES6开发中,优先使用const,只有需要修改某个标识符值的时候采用let1.声明后必须初始化赋值,如:const name='aaa',不可以 const name;2.常量的含义是指向的对象不能修改,但是可以修改对象中的属性如:const obj = {name:'aaa',age:18}obj.name='bbb'...原创 2020-05-09 11:49:10 · 45991 阅读 · 1 评论 -
vue一个单页面应用的设计思想
单页面应用就是说在静态资源服务器上只有一个html页面:index.html,不同于以往开发需要多个html页面,一个url对应一个html页面,当访问该网站的的时候,会把index.html包括支撑它的后面所有资源都下载到浏览器上,这样就不再与静态资源服务器交互了,所有的路由功能都在浏览器端完成,url改变,对应的页面中组件的改变,但不进行页面整体的刷新,这是一种好的设计思想一般服务器分为两种:静态资源服务器用于部署前端,API服务器用于部署后端代码...原创 2020-05-09 10:53:32 · 451 阅读 · 0 评论 -
Vue中的Module理解
vuex中只能由一个store对象,但是随着应用变得非常复杂时,index.js中会变得非常臃肿,为了解决这个问题,vuex有了模块这个功能,允许我们把store划分成多个模块,每个模块都有自己的state,mutations,acitons,getterscommit提交仍然是按照普通的方式提交,底层先在index.js中找,没有的话再去模块中找,所以提交的时候不要有模块名称vuex中可以按mutations,actions,getters分别单独抽取出来,state最好不要分出来,也可以按模块划原创 2020-05-09 10:01:15 · 2943 阅读 · 1 评论 -
vuex中mutation理解
vuex中的方法是用来实现的,一旦组件中调用vuex中的方法,默认是会提交一个state参数的,这个state就对应vuex中state对象组件中如何直接调用mutation中的方法?将mutations中的函数可以看做两部分:字符串的事件类型:这个指的就是函数的名称,把它当做一个事件名称,通过commit调用的时候this.$store.commit('xxx')一个回调函数,该回调函数的第一个参数就是state,意思就是说第一个参数不管名称是啥,它都是指的state,所以一般都以stat原创 2020-05-08 20:20:24 · 772 阅读 · 0 评论 -
vuex的疑点理解
理解成:把多个组件中共享的变量全部存储到一个对象里面,然后将这个对象放到顶层的vue实例中,这样多个组件就可以共享这个对象中的所有变量属性,类似于仓库,类似于前端数据库其它语言中的单例模式,也正如这样的思想为什么会产生了vuex?一个对象如何被所有组件共享呢?所有的组件都继承vue的一个原型,所以一旦给vue的原型上加上一个原型的话,那么所有的组件就都有了这个对象属性了,就可以拿到...原创 2020-05-08 11:14:23 · 136 阅读 · 0 评论 -
vue中网络模块的封装
一旦使用了第三方框架,最好做一个封装,要不这些框架更新后有问题,就麻烦大了,不要在项目各个地方直接使用第三方框架,这是一个好的编程习惯安装:npm install axios --save...原创 2020-05-07 11:24:24 · 400 阅读 · 0 评论 -
vue中vuex的总结
模板里面不需要写this. js中必须写上触发事件的通知,如果需要数据的话,必须要指定两个东西:消息名和数据,不需要数据的话只指定消息名触发store中对应的action去调用,要对应起来,如何对应呢?方法名和消息名一致组件中一旦要读vuex管理的状态或者计算属性,都在组件的computed去操作//1.先引入mapStateimport {mapState} from 'v...原创 2020-05-07 10:08:23 · 211 阅读 · 0 评论 -
vue中属性get和set概念总结
get: 根据其它相关属性动态计算当前属性值set:监视当前属性的变化,更新其它相关属性值按照正常的思路不是:this.data.name吗,为什么可以直接通过this调用data中的属性:this.name呢?底层分析:底层会自动把data中的属性名称给与组件对象,并且添加set和get方法,从而操作这个属性值的变化,所以可以直接使用this.name调用,这里的set方法不仅起...原创 2020-05-06 15:01:53 · 3499 阅读 · 0 评论 -
vue中点击按钮进行跳转与返回
点击跳转分为两种:1.点击路由链接标签<router-link>2.点击按钮应用场景:点击某个组件对象中按钮,显示出另一个路由组件对象分析:每个组件对象都有两个属性:$route,代表路由路径,$router类似于ios中的导航控制器,这里可以把它叫成路由控制器,都是进行push压栈操作,返回使用back方法两种跳转行为都需要<router-view&...原创 2020-05-06 08:38:09 · 5131 阅读 · 0 评论