- 博客(125)
- 收藏
- 关注
RSS订阅原创 数据库表一对多，多对一，多对多的理解
建表的时候，首先得明确两个实体之间的关系是属于哪一种，多对多是属于双向的一对多，即：站在彼此的角度，它们都是一对多的关系比如： 班级和学生分析：先站在班级角度，一个班级有多个学生，再站在学生角度，一个学生只能属于一个班级，那么它们就不属于多对多的关系，这样关系就好建立了，在多的这边建立一个外键，与一的这边的主键关联，即：学生的这边建立 一个外键与班级主键相关联如果是多对多的关系，是不可以进行彼此建立外键的，只能另外建立一个关系表，来建立起它们之间多对多的关系用户，角色，权限就是这样的多对多关
2020-08-08 17:59:01
948
原创 对sesson的简单理解
每个用户登录成功之后，shiro都会给该用户创建一个独立的session对象，同时再创建一个sessionId，存放起来，并且给该前端传递对应的sessionId，前端拿到sessionId存放起来，下次访问的时候，拿上sessionId，后端拿到sessionId进行识别，找到对应的session，就好比在银行开通一个账户一样，有独立的银行卡号，不同的用户访问同一个后台，后台都能给它们分配到对应的session上，彼此不会受影响SessionDao：负责对session的存，取，改，删Simple
2020-06-23 17:09:09
322
原创 鉴权原因
情景：前端对按钮权限做了控制，无权限的不显示，但这只是最基本的控制，如果有人通过postman软件发送删除请求，并且携带上token，这个token是在浏览器开发者工具中可以查到的，后端如果不做防御处理的话是很危险的需求分析：后端如何做防御呢？后端在收到请求后，设置一个拦截器，去比对请求的api是否在该用户的权限列表中，这样的目的就是为了防止有人通过postman发送不合法的请求，同时也防止了前端页面中万一忘记写v-if暴露了某个按钮，也可以在后端进行了补救，起到二次控制作用jwt和sh
2020-06-03 09:52:18
522
原创 加载用户菜单权限信息放到哪里合适
情景：登录成功获取到token后，跳转到首页，请求用户的权限信息(包括可访问的菜单信息)这一步是放到跳转之前的路由守卫中，还是放到首页的钩子函数中呢？分析：其实都可以，但觉得还是放到跳转之前，依然处于登录页面中好一些，因为数据处理准备好，再去加载页面会合理...
2020-05-31 11:45:27
977
原创 给用户分配角色情景
给用户分配角色情景：显示出所有角色，当前选中用户拥有的角色是选中状态分析：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
622
原创 将表结构中的数据转化为树形节点数据对象
情景：左侧菜单，右侧权限树，它们接收到的数据都应为后台处理好的树形节点数据，不应该在前端来进行树状结构的转化，虽然比如Z-Tree自带这个功能，但是会造成前端树形显示延迟解决：后端提供一个工具类进行转换一次将数据查询出来，再进行递归建模：即先创建一个节点类public class TreeNode { private Integer id; private String name; private Integer pid; //子节点数组 必须先初
2020-05-29 17:40:15
866
原创 权限管理系统数据库表的设计分析
为什么要分析这些呢？因为从前端到后端都自己写的话，数据库中表结构的设计是基础，很关键，这样从前到后才是清晰的权限控制：就是指对菜单和按钮可见性的控制，菜单：根据登录用户返回的菜单数据进行动态加载，v-for遍历；按钮：比如点开订单管理界面，会先从功能表中查询出对应的按钮权限数据进行判断显示还是隐藏，v-if判断权限表设计思想：所分配的权限就是指左侧的菜单项和右侧菜单项对应页面上的按钮，这些在前端页面上表现出的是对应的控件，对应到数据库中就是一些对应的id和名称信息一般左侧菜单最多分三
2020-05-25 11:55:12
1902
原创 配置与优化
通过vue-cli3.0工具生成的项目，默认隐藏了所有webpack的配置项，目的是为了屏蔽项目的配置过程，让开发者把工作的中心，放到功能和业务逻辑上如果有修改webpack默认配置的需求，可以在项目根目录中，按需创建vue.config.js这个配置文件默认情况下，通过import导入的第三方依赖包，会最终打包合并到一个文件中，从而导致打包文件体积过大的问题，如在ui可视化面板中，可以看到资源中第一个文件体积特别大为了解决以上问题，可以通过webpack的externals的节点，来配置加载外
2020-05-23 10:51:34
201
原创 发布时候去除项目中所有的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
674
原创 进度条nprogress使用
1.安装依赖2.导入NProgress包对应的js和cssimportNProgressfrom'nprogress'import'nprogress/nprogress.css'3.请求拦截器中 NProgress.start()4.响应拦截器中 NProgress.done()
2020-05-23 09:11:02
195
原创 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
139
原创 富文本编辑器组件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
383
原创 vue图片上传功能
element-ui提供了上传的组件，真是方便，el-upload情景：界面上虽然看到选取后上传到界面了，但是没有传到后端，F12->network可以看到400原因：它自己内部封装了一套ajax请求，而不通过axios请求，这样就会导致上传不成功，因为默认没有携带token，所有的api接口除了登录，只要通过axios方式进行请求，就会通过请求拦截器就行携带token，当然这个请求拦截器是自己配置的解决：上传组件el-upload手动绑定一个属性 :headers="hea.
2020-05-22 11:34:23
342
原创 vue中字符串和数值互转
数值转字符串num + ' '长的像数值的字符串转数值，让它减0就可以如: strVal = '1'strVal - 0
2020-05-22 09:40:26
16218
原创 自定义格式化时间的全局过滤器
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
191
原创 表单的取消操作
情景1：当新增一个用户或者新增一个存货时，输入了相关信息，又不想新增了，点击了取消，表单中的输入框应该置空解决：不需要挨个获取输入框控件置空，如果是引用的element-ui，设置ref后，获取到该form，调用resetFields()this.$refs.addUserFormRef.resetFields()其它UI库应该也有类似操作，多看文档情景2：修改用户后，又点击了取消解决：待补充...
2020-05-19 11:34:46
758
原创 分配权限过程
每一个节点都有唯一的id值，选中某个节点，就可以获取到该节点的id值，el-tree提供了一个默认勾选节点的数组属性，这个值对象得自己提供选中某些节点后，拿到它们的id放入数组中在点击分配按钮的同时，即弹出树形结构对话框之前，把已有末级节点的id值全部拿到，放到数组中，通过:default-checked-keys="defkeys"属性绑定，把这个数组交给该属性如何拿到呢？定义一个递归函数，把当前选中的角色传到函数中，通过递归的方式把末级节点id值都放到数组中分配权限：点击确定分配
2020-05-19 11:29:22
297
原创 vue中返回结果是promise的处理
调用element-ui中提供的方法是，经常返回结果类型对象是promise，如果某个函数调用的结果打印后返回的是promise，就马上用saync和await进行优化，async放到方法名称的前面，await放到方法里面
2020-05-17 11:54:29
13386
原创 vue中新增弹出对话框操作
情景：点击新增用户或者新增订单，弹出对话框页面进行信息输入操作分析：这个对话框组件是直接放到用户组件代码中的，自带一个属性，控制是否显示，默认为false不显示，需要显示的时候拿到此属性对应的变量，设置为true主体内容使用表单组件<!-- 添加用户的对话框 --> <el-dialog title="添加用户" :visible.sync="addDialogVisible" width="
2020-05-16 15:40:03
4954
原创 vue中带参数的请求路径
情景：api文档中会有这样的请求路径 users/:uId/state/:type带冒号的不能直接提交，应该用具体的参数值 ${xxx} 来取代，并且此路径应用模板字符串` `来包围this.$http.put(`users/${userinfo.id}/state/${userinfo.mg_state}`)...
2020-05-16 10:47:07
3927
1
原创 点击aside中的每一项进行路由跳转设置
情景：点击aside中的每一项进行路由跳转分析：使用了element-ui是不需要给每一项加上一个<router-link>的，因为此框架给<el-menu>提供了 一个router属性，默认是关闭的，只需要在标签后面加上router，等同于 :router = "true" ,菜单中的每一项的路由功能就开启了，是以index值为路由路径跳转的，刚开始使用的是subItem.id，但最好是使用每一项数据的path字段值路径名称为路径，后台应该提供一个这样的字段，为了与前端
2020-05-13 11:08:51
572
原创 展开一个菜单项所有的项都展开问题解决
问题情景：对于标签<el-menu>来说使用v-for循环创建出来，菜单项列表数组有多少项就创建出多少菜单项控件，导致所有的菜单行索引index值都一样，点击展开和关闭一定是根据index来进行定位操作的，所以导致了点击一个，其它都是同样的效果，相当于对所有相同index项进行的操作解决：给每一项index绑定不同唯一的值，而数据中每个item都有唯一的id，这个id是后台数据库中给设计好的，所以利用这个id<el-submenu :index="item.id + ''
2020-05-13 10:31:05
5216
原创 vue-登录路由跳转到主页后开始加载菜单数据
情景：点击登录后，是通过路由跳转到主页，此时是没有发出菜单数据请求的，什么时候发起呢？应该在Home.vue整个页面加载的时候，就应该立即发送请求获取左侧菜单数据在哪里写这个请求代码呢？1.created中调用created () { this.getMenuList()}2.methods中实现methods: { // 获取所有的菜单 async getMenuList() { // 利用对象结构获取等号右边对象的data属性，用re
2020-05-12 21:20:01
1355
原创 请求头中携带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
10330
原创 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
176
原创 ESLint与格式化文档规则发生冲突解决
情景1：当点击右键选择格式化文档时，会把js代码中的单引号编程双引号，并且export default的大括号最后加成封号解决：项目src目录下创建一个配置文件.prettierrc 它是一个json格式的文件{ "semi": false, "singleQuote": true}这样格式化的时候就不会再末尾处加封号，然后把双引号变为单引号情景2：当方法名称后面如果不加空格的话，ESLint会提示加一个空格，这个规则应当关掉，它本身不是一个错误解决：
2020-05-12 14:50:55
1180
原创 登录与退出逻辑
当点击登录按钮，不应该直接发起请求，而应当在发起请求之前对表单数据进行预验证，验证通过之后再发起请求，验证没通过提示数据不合法如何进行预验证呢？如果返回的promise对象，应该用await async简化，await只能用于async修饰的方法中为什么要把token保存到sessionStorage而不是localStorage?因为localStorae是持久化的存储机制，而sessionStorage是会话期间的存储机制，而token应该咋当前网站打开期间生效路由导航守卫控制页面
2020-05-12 11:44:25
964
原创 vue中表单的重置
重置，即把表单中所有属于框内容都变为data中表单对象的默认值，若初始为空则变为空1.先给<el-form ref="loginFormRef">设置ref标识2.给重置按钮绑定重置方法3.拿到form对象，并重置resetLoginForm () { this.$refs.loginFormRef.resetFields() }...
2020-05-11 21:32:24
1482
原创 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
2589
原创 vue项目准备工作
1.创建分支：在开发中，要开发新功能，尽量把这个新功能放到一个分支上进行开发，当把分支开发完成之后，再把分支合并到master这个主分支上在vue终端上命令：git checkout -b login //创建了一个login的分支并通过checkout切换到了这个分支上2.查看当前项目的所有分支： git branch 前面有*的代表当前正处于这个分支上可视化编译启动项目：vue ui 可以打开可视化操作面板，左侧 任务->运行->启动app3.改造默认...
2020-05-11 18:28:47
101
原创 token分析
http是无状态的方式一：如果前端后后端不存在跨域问题，通过cookies在客户端记录状态，通过session在服务端记录状态方式二：有跨域情况，通过token方式维持状态token原理分析：首次登录，输入用户名和密码，服务器验证之后生成该用户的token并返回给客户端，每个用户的token值不同，客户端进行token存储，后续客户单所有的请求都携带token并发送请求给服务端，服务器根据token确认是哪个用户，同时根据操作返回结果...
2020-05-11 11:17:35
219
原创 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
282
原创 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
44460
1
原创 vue一个单页面应用的设计思想
单页面应用就是说在静态资源服务器上只有一个html页面：index.html，不同于以往开发需要多个html页面，一个url对应一个html页面，当访问该网站的的时候，会把index.html包括支撑它的后面所有资源都下载到浏览器上，这样就不再与静态资源服务器交互了，所有的路由功能都在浏览器端完成，url改变，对应的页面中组件的改变，但不进行页面整体的刷新，这是一种好的设计思想一般服务器分为两种：静态资源服务器用于部署前端，API服务器用于部署后端代码...
2020-05-09 10:53:32
432
原创 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
2880
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
735
原创 vuex的疑点理解
理解成：把多个组件中共享的变量全部存储到一个对象里面，然后将这个对象放到顶层的vue实例中，这样多个组件就可以共享这个对象中的所有变量属性，类似于仓库，类似于前端数据库其它语言中的单例模式，也正如这样的思想为什么会产生了vuex？一个对象如何被所有组件共享呢？所有的组件都继承vue的一个原型，所以一旦给vue的原型上加上一个原型的话，那么所有的组件就都有了这个对象属性了，就可以拿到...
2020-05-08 11:14:23
119
原创 vue中网络模块的封装
一旦使用了第三方框架，最好做一个封装，要不这些框架更新后有问题，就麻烦大了，不要在项目各个地方直接使用第三方框架，这是一个好的编程习惯安装：npm install axios --save...
2020-05-07 11:24:24
390
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人