技术背景,前后端分离,前端 vue 后端 .Net Core
小白有一个需求,在他费尽千辛万苦之力,写了N行sql才完成的汇总数据报表中,根据表头和首列类别定位的单元格上添加点击事件。点击单元格后,跳转至汇总数据的详细列表。经其分析,详细列表本身带有高级筛选功能,筛选时,会在表格上方显示筛选条件。所以,小白决定点击单元格跳转到详细列表页的同时带上参数做为筛选条件。
因为,详细列表页面为某位大哥开发,已经具备了一定的代码和基础。所以充分了解其已编辑代码,在其基础上开发可以达到写最少的代码量,减少不必要的重复的目的。
小白首先写了一个测试的url,在url中带入了测试的参数数据。然后在页面用某位大哥的方式
$route.params.name
接收参数时,发现接收不到。小白对 vue 没有经过深刻的系统的学习,只是根据教程笼统的学习过,再经过各种项目的洗礼。虽然可以说对 vue 非常熟悉,但对于细节的技术点,还是没有把握。不过小白是一位爱学习的好孩子,经其努力补充上了此技术点。获取route参数的方式有下面两种:
$route.query.name
$route.params.name
//name 为参数名
其中query写入参数的方式为
{name: '路由名', query: {参数名:值}}
或者
{path:'路由地址', query: {参数名:值}}
此种方式类似于http请求的GET方式。
其中params写入参数的方式为
{name: '路由名', params: { 参数名: 值 }}
或者
'/path/参数1/参数2' 此种方式需要在路由中的path指定 :参数名成,确认参数1、参数2的是ID还是Name
此种方式类似于http请求的POST方式
最后通过push的方式压入route即可
$route.push(obj)
解决完参数传递的方式之后,小白发现,由于高级筛选正常情况下是通过手动点击后,记录筛选条件到 tag,tag 绑定到表头的 dom 。
其中表头的组件又是引用到列表页面的,所以小白考虑在 created 中构造 tag,然后以属性的方式传递至表头组件。
这种方式虽然可以实现效果,但是在小白写完代码测试过程中,发现之前的开发大哥已经写过类型的功能,并且是在mounted中使用nextTick实现的。
经对比小白惭愧不已,发现自己不光有知识盲点,还对页面的加载过程不甚了解。
使用nextTick不光在页面的Dom元素加载完毕后可以异步的更新数据,还要比把构造 tag 放到 created 中优雅的多。
查看nextTick说明,更是觉得nextTick是专门为处理此任务而生
nexttick使用场景:有时需要根据数据动态的为页面某些dom元素添加事件,这就要求在dom元素渲染完毕时去设置
在使用某个第三方插件时 ,希望在vue生成的某些dom动态发生变化时重新应用该插件,也会用到该方法。
解决完这两个问题,小白想起最近让写的一些简单的Go脚本程序。小白虽然白了点,但是技术面还是可以的,不光大学的专业就学过多种语言(只能是学过,学完就还给老师)。应大佬要求,了解了一些Go的知识后,使用Go写了一些简单的小程序。
但是在刚刚开始写一个以上文件时,小白遇上了,他觉着很多自学初学者都会遇到的问题,引用包!默认情况下Go的引用路径是Go的安装路径,具体路径可以看错误提示,会提示在某个路径下找不到所要的包。小白又经过一番努力,发现了go.mod,按官方介绍其就是一个Modules。使用方式很简单:
在项目的根目录下使用命令
go mod init modname
此命令将引用目录指定到当前项目目录。
需要注意的是创建的每个包,都需要创建相同名称的文件夹,在文件夹内创建go文件。
引用时一般使用 modname/packname 即可。
小白记录完这些问题之后兴致很高,于是乎,小白将其半年前做单点登录时收藏的几篇文章又做了一个总结:
有关单点登录,小白已知的单点登录协议主要有 CAS OAuth OIDC
根据多种单点登录方式的协议可知,单点是一种协商后的登录方式,各方按照相关协议开发登录验证模块,并接入单点系统即可实现单点登录
对于前后端不分离系统,使用Session Cookie做单点登录
对于前后端分离系统,通常使用token localStorage的方式开发。
下面举个实际的例子,比如:
拿CAS来说,新接入系统首页加入登录验证,如果未登录,即跳转至单点登录系统,并以参数的方式带入回调地址。
在单点登录系统登录验证成功之后,形成票据,同样以参数的形式跳转至回调地址。
新接入系统获得票据(ticket)之后,将票据传递至后台。后台API调用单点登录系统接口验证ticket。
验证通过后,形成自身系统的登录验证token或者说Session,之后新接入系统即可访问自己系统的后台,每次访问都带有验证信息。
以上是小白同学,一天中所学的知识点,不欢迎批评,欢迎吹水????。如写内容让初学者困惑请忘记即可!
最后小白又想起来了一个特别好用的DatePicker组件,可以轻松的设置日期选择是选到月、还是选择到天。只需设置其属性 maximumView 和 minimumView 的值为day或month即可。可实验的地址:测试 vue DatePicker