前端框架
关注
分享
扫一扫
今日相乐，皆当喜欢
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
SPA项目开发之tab页实现
实现思路及细节：1、利用Vuex的知识定义几个变量Options：存放tab页对象的容器（主要是路由路径以及tab页的名字）activeIndex：被激活的tab页路由路径showName：tab页的标题Role：用来区分是否是因为左侧菜单被点击造成的路由路径发生改变（是：pass、不是：nopass）2、左侧导航菜单绑定点击事件将被点击的菜单名称存放到Vuex中，供路...原创 2020-02-04 15:15:44 · 498 阅读 · 0 评论 -
JWT在SPA项目开发中的使用
在传统的jsp开发中，要对系统的资源进行保护，那么会用到session机制里完成，但session是跟随Tomcat存在的，也就是说session是在前后端分离中的后端服务器里面，而现在浏览器请求的却是前端服务器（node.js），这也就意味着在浏览器输入网址（路由跳组件）的时候，它并不能获取到session，所以目前存在的问题是：不进行登录也能对其他组件进行访问，在本例中，意味着不登录也能访问M...原创 2020-02-03 22:34:31 · 448 阅读 · 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 · 210 阅读 · 0 评论 -
SPA项目开发之动态树+数据表格+分页
本篇博客记录如何用element-ui中的menu标签将后台返回的数据绑定到左侧菜单形成动态树、用自定义组件来展示文章列表以及绑定element-ui提供的分页组件来完成分页功能，是在上一篇博客的基础上进行改良的：https://blog.youkuaiyun.com/weixin_42687829/article/details/1040013341、动态树的实现首先来看后台准备好的表设计以及接...原创 2020-01-31 17:47:08 · 156 阅读 · 0 评论 -
SPA项目开发之首页导航+左侧菜单
1、什么是Mock.js前后端分离开发开发过程当中，经常会遇到以下几个尴尬的场景： 1.老大，接口文档还没输出，我的好多活干不下去啊！ 2.后端小哥，接口写好了没，我要测试啊！前后端分离之后，前端迫切需要一种机制，不再需要依赖后端接口开发，而今天的主角Mock.js就可以做到这一点。Mock.js是一个模拟数据的生成器，用来帮助前端调试开发、进行前后端的原型分离以及...原创 2020-01-28 17:05:12 · 566 阅读 · 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 · 2280 阅读 · 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 · 216 阅读 · 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 · 408 阅读 · 0 评论 -
Vue路由
1、什么是SPASPA是指单页面Web应用（single page application），就是只有一个Web页面的应用，是加载单个HTML页面，并在用户与应用程序交互时动态更新该页面的Web应用程序。单页面应用程序：只有第一次会加载页面，以后的每次请求,，仅仅是获取必要的数据；然后，由页面中js解析获取的数据，再展示在页面中传统多页面应用程序：对于传统的多页面应用程序来说，每次请求...原创 2019-11-02 19:22:20 · 246 阅读 · 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 · 274 阅读 · 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 · 317 阅读 · 0 评论 -
SpringBoot+Dubbo+Bootstrap完成简单的记事本系统
前段时间简单的学习了一下dubbo，然后最近花了点时间撸了个简单的记事本系统，先看看效果：关于springboot与dubbo的整合，在我之前的博客里已经有了：https://blog.youkuaiyun.com/weixin_42687829/article/details/90077623记事本系统服务提供者项目结构：记事本系统服务消费者项目结构：运行的时候不用像...原创 2019-05-25 20:58:09 · 669 阅读 · 0 评论