Vue脚手架
Vue脚手架是一个基于Vue.js进行快速开发的完整系统，是一个专门为Vue应用快速搭建繁杂项目结构的脚手架，它可以轻松地创建新的应用程序，且可用于自动生成Vue和Webpack的项目模板.
快速构建项目
单文件组件
为了更好地适应复杂项目的开发,Vue.js支持以.vue为扩展名的文件来定义一个组件. 这个组件被称为单文件组件,文件中封装了组件相关代码.如 html\css\js等,最终通过Webpack编译成js文件并在浏览器中运行.
单文件组件嵌套
index.html 是入口地址,可调用App.vue. 在App.vue文件中可以调用其他组件,所以App.vue被称为根组件.
组件之间的信息传递
父->子: v-bind
子->父: 子组件通过$emit来触发事件,父组件在子组件的自定义标签上使用v-on指令来监听子组件触发的自定义事件.
非父子: 使用一个空的Vue实例作为中央事件总线.利用这个来emit触发事件/on监听事件
前端路由
Vue.js的路由和<a>标签实现的功能是一样的,它们都实现一个对应的跳转,只不过路由的性能更佳. a标签无论点击多少次,都会发生对应的网络请求,页面会不停地进行刷新,但是使用路由机制,单击之后,不会出现请求及页面刷新,而会直接转换到要跳转的地址,这就是使用路由的好处.
随着前后端分离开发模式的兴起,出现了前端路由的概念:前端通过Ajax获取数据后,通过一定的方式渲染到页面中,改变URL不会向服务器发送请求,同时,前端可以监听URL变化,可以解析URL并执行相应操作,而后端只负责提供API来返回数据.
在Vue中,通过路由跳转到不同的页面中,实际上就是加载不同的组件.
这里之前的那个问题可以说得到了解决
在企业实训的阶段中, 我们采用前端Vue+后端Springboot来完成整个项目, 其中使用到了shiro作为安全框架来管理后端验证和权限访问等等. 其中出现了一个问题, 就是没有办法通过shiro来对访问的url进行限制,只能限制请求数据的接口
🐷🐷🐷🐷🐷🐷
可以说这跟Vue的前端路由有很大的关系, 虽然我们把项目部署到了服务器上,但是依然采用的是前端路由的方式, 相当于请求的url地址根本没有经过后端. 也就不能被shiro管理, 从而进行权限验证并拦截. 而请求数据的接口就不一样了, 它们是真正向后端发起请求的.shiro是可以接受到, 并且进行拦截的.
👍👍👍👍👍
所以出现了这种问题,而我们的解决方案也很正确. 在需要拦截的地方使用了前端路由管理的方式. 只是当时这个问题的原因没有探讨的很清楚,虽然观察到了出现问题的现象, 但是没有从原理上里面出现问题的原因.
