
前端框架
今日相乐,皆当喜欢
这个作者很懒,什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
SPA项目开发之tab页实现
实现思路及细节:1、利用Vuex的知识定义几个变量Options:存放tab页对象的容器(主要是路由路径以及tab页的名字)activeIndex:被激活的tab页路由路径showName:tab页的标题Role:用来区分是否是因为左侧菜单被点击造成的路由路径发生改变(是:pass、不是:nopass)2、左侧导航菜单绑定点击事件将被点击的菜单名称存放到Vuex中,供路...原创 2020-02-04 15:15:44 · 492 阅读 · 0 评论 -
JWT在SPA项目开发中的使用
在传统的jsp开发中,要对系统的资源进行保护,那么会用到session机制里完成,但session是跟随Tomcat存在的,也就是说session是在前后端分离中的后端服务器里面,而现在浏览器请求的却是前端服务器(node.js),这也就意味着在浏览器输入网址(路由跳组件)的时候,它并不能获取到session,所以目前存在的问题是:不进行登录也能对其他组件进行访问,在本例中,意味着不登录也能访问M...原创 2020-02-03 22:34:31 · 447 阅读 · 0 评论 -
Vuex的使用
1、Vue中各个组件之间传值的方式a、父子组件父组件传给子组件,通过子组件的自定义属性:props子组件传给父组件,通过自定义事件:this.$emit('事件名',参数1,参数2,...);b、非父子组件或父子组件通过总线Bus,this.$root.$emit('事件名',参数1,参数2,...)c、非父子组件或父子组件更好的方式是在vu...原创 2020-02-02 22:09:18 · 174 阅读 · 0 评论 -
SPA项目开发之CRUD+表单验证
1、表单验证element-UI的Form组件提供了表单验证的功能,只需要通过rules属性传入约定的验证规则,并将Form-Item的prop属性设置为需校验的字段名即可,重点代码如下图标注部分:接着可在提交时判断校验能否通过:注:有多个表单时,怎么在提交进行区分?我们在rules这里写了对表单的验证规则,但是我们如何在methods里进行指定的表单进行认证,所以我们一...原创 2020-02-01 16:28:01 · 209 阅读 · 0 评论 -
SPA项目开发之动态树+数据表格+分页
本篇博客记录如何用element-ui中的menu标签将后台返回的数据绑定到左侧菜单形成动态树、用自定义组件来展示文章列表以及绑定element-ui提供的分页组件来完成分页功能,是在上一篇博客的基础上进行改良的:https://blog.youkuaiyun.com/weixin_42687829/article/details/1040013341、动态树的实现首先来看后台准备好的表设计以及接...原创 2020-01-31 17:47:08 · 155 阅读 · 0 评论 -
SPA项目开发之首页导航+左侧菜单
1、什么是Mock.js前后端分离开发开发过程当中,经常会遇到以下几个尴尬的场景: 1.老大,接口文档还没输出,我的好多活干不下去啊! 2.后端小哥,接口写好了没,我要测试啊!前后端分离之后,前端迫切需要一种机制,不再需要依赖后端接口开发,而今天的主角Mock.js就可以做到这一点。Mock.js是一个模拟数据的生成器,用来帮助前端调试开发、进行前后端的原型分离以及...原创 2020-01-28 17:05:12 · 562 阅读 · 0 评论 -
SPA项目开发之登录注册
本篇博客是基于上次建好的SPA项目进行开发的,如何创建SPA项目请参考这篇博客:https://blog.youkuaiyun.com/weixin_42687829/article/details/103508428接着首先要安装开发所需模块:#安装element-ui模块npm install element-ui -S #axios是vue2提倡使用的轻量版的ajax,它是基于pro...原创 2020-01-15 15:03:31 · 2273 阅读 · 0 评论 -
使用vue-cli搭建SPA项目
1、什么是vue-clivue-cli是vue.js的脚手架,用于自动生成vue.js+webpack的项目模板,创建命令如下:vue init webpack xxx xxx为自己创建项目的名称 必须先安装vue、vue-cli、webpack、node等一些必要的环境2、安装vue-cli、webpack打开cmd命令窗口,先后执行以下命令即可:npm in...原创 2019-12-12 15:51:55 · 214 阅读 · 0 评论 -
Node.js环境搭建
1、Node.js是什么Node.js是一个基于Chrome V8引擎的JavaScript运行环境。Node.js使用了一个事件驱动、非阻塞式I/O(即异步)的模型;Node.js是一个让JavaScript运行在服务端的开发平台,它让JavaScript成为与PHP、Python、Perl、Ruby等服务端语言平起平坐的脚本语言Node.js-->JavaScript运行环境...原创 2019-11-09 21:41:59 · 407 阅读 · 0 评论 -
Vue路由
1、什么是SPASPA是指单页面Web应用(single page application),就是只有一个Web页面的应用,是加载单个HTML页面,并在用户与应用程序交互时动态更新该页面的Web应用程序。单页面应用程序:只有第一次会加载页面,以后的每次请求,,仅仅是获取必要的数据;然后,由页面中js解析获取的数据,再展示在页面中传统多页面应用程序:对于传统的多页面应用程序来说,每次请求...原创 2019-11-02 19:22:20 · 245 阅读 · 0 评论 -
Vue基础语法
1、插值语法文本:{{title}} HTML:使用v-html指令用于输出html代码 属性:HTML标签属性中的值应使用v-bind指令 表达式:Vue提供了完全的JavaScript表达式支持示例代码: <body> <div id="app"> <ul> <li> <p>...原创 2019-10-06 18:48:02 · 271 阅读 · 0 评论 -
ES6(Reflect与Proxy)
Proxy与Reflect是ES6为了操作对象引入的API。Proxy可以对目标对象的读取、函数调用等操作进行拦截,然后进行操作处理。它不直接操作对象,而是像代理模式,通过对象的代理对象进行操作,在进行这些操作时,可以添加一些需要的额外操作。Reflect可以用于获取目标对象的行为,它与Object类似,但是更易读,为操作对象提供了一种更优雅的方式。它的方与Prox...原创 2019-09-15 17:35:15 · 198 阅读 · 0 评论 -
ES6(三点运算符、Symbol类型、Map与Set)
1、es6三点运算符(可变参数)当一个方法参数个数不确定的时候,我们可以用es6提供的三点运算符 <script type="text/javascript"> function func(...params){ console.log(params); // 遍历 params.forEach(...原创 2019-09-15 15:12:00 · 610 阅读 · 0 评论 -
ES6(let和const关键字、对象定义简写、模板字符串、箭头函数)
1、let和const关键字在es6中,引入了let和const关键字;let关键字是用来取代var的;let的作用,与var类似,用于声明一个变量;(1)let特点:在块级作用域里有效(比如循环遍历内部就可以用let定义变量) <script> { let a = "zs"; var b = "ww"; console.l...原创 2019-09-15 12:04:01 · 959 阅读 · 0 评论 -
Vue入门
1、简介Vue.js是什么?Vue是一个构建用户界面(UI)的[渐进式]JavaScript框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,非常容易与其它库或已有项目整合。官网:https://cn.vuejs.org/库和框架的区别库(Library):本质上是一些函数的集合。每次调用函数,实现一个特定的功能,接着把控制权交给使用...原创 2019-09-08 22:34:13 · 212 阅读 · 0 评论 -
Bootstrap入门
1、简介:Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。Bootstrap能够火起来的原因就是支持响应式布局。所谓响应式,指的是能够智能化的选择对应的硬件设备呈现出美观的展示效果,不会产生样式失真。2、为什么使用Bootstrap?移动设备优先:自 Bootstrap 3 起,框架包含了贯穿...原创 2018-10-14 19:58:06 · 315 阅读 · 0 评论 -
SpringBoot+Dubbo+Bootstrap完成简单的记事本系统
前段时间简单的学习了一下dubbo,然后最近花了点时间撸了个简单的记事本系统,先看看效果:关于springboot与dubbo的整合,在我之前的博客里已经有了:https://blog.youkuaiyun.com/weixin_42687829/article/details/90077623记事本系统服务提供者项目结构:记事本系统服务消费者项目结构:运行的时候不用像...原创 2019-05-25 20:58:09 · 668 阅读 · 0 评论