经上一篇编译指令数据后，我们已经可以将指令数据编译成具体需要展示的数据了，上一篇只是编译了指令数据，还没有编译模板数据，这一篇我们就来编译模板数据。 也就是{{}}这种模板的形式我们该如何编译，其实和指令数据编译的思路是一样的，废话不多说，直接上代码。 改造一下buildText方法，让它支持编译模板数据，调用CompilerUtilcontent方法，传入模板数据，返回编译后的数据，然后再将编译后的数据替换到文本节点中。 CompilerUtil['content'](node,content,this.vm); 在CompilerUtil中添加content方法，该方法和指令数据编译的...

经过上一篇的介绍，数据驱动界面改变v-model的双向绑定已告一段落,剩余的就以这篇文章来完成。 首先完成我们的v-html，v-text,其实很简单，就是将我们之前的v-model创建观察者的方法，在v-html和v-text中再写一次即可，创建属于v-html和v-text的观察者。 v-html: html:function(node,value,vm){ newWatcher(vm,value,(newValue,oldValue)=>{ node.innerHTML=newValue; }); node.innerHTML=this.getValue(vm,value); }...

经过上一篇的介绍，已经实现了观察者模式的基本内容，接下来要完成的就是将上一篇的发布订阅模式运用到Nue中，实现数据驱动界面改变。 在监听数据变化的章节当中，根据指定的区域和数据去编译渲染界面这个步骤处，我写了一个注释，这个注释是这样的：第一步：给外界传入的所有数据都添加get/set方法，第二步就是在第一步的基础上，给所有属性都添加观察者对象，当数据发生变化时，发布订阅触发观察者对象的回调函数重新渲染界面。 先处理下v-model的情况，找到CompilerUtil中的model方法，将其修改添加观察者对象代码: model:function(node,value,vm){ //第二部：在第...

接着上一篇文章，我们已经实现了构建Vue实例的过程，接下来我们要实现的是提取元素到内存。 主要是通过文档碎片来实现，文档碎片是一个轻量级的文档，可以包含和控制节点，但是不会像真实的DOM那样占用内存，所以我们可以通过文档碎片来提高性能。 大致的思路是这样的： 创建一个空的文档碎片对象 编译循环取到每一个元素 返回存储了所有元素的文档碎片对象 在这个思路当中有一个注意点： !>只要将元素添加到了文档碎片对象中,那么这个元素就会自动从网页上消失 大概是这样的，例如我们页面当中有一个p元素，我们将这个元素添加到文档碎片当中，那么这个元素就会从页面上消失，但是我们可以通过文档碎片对象来访问这...

接着上一篇文章，我们已经实现了提取元素到内存的过程，接下来我们要实现的是查找指令和模板。 大致的思路是这样的： 遍历所有的节点 需要判断当前遍历到的节点是一个元素还是一个文本 如果是一个元素,我们需要判断有没有v-model属性 如果是一个文本,我们需要判断有没有{{}}的内容 那么随着思路的展开，接下来我们就来实现这个功能。 首先我们编写一个buildTemplate方法，主要功能是利用指定的数据编译内存中的元素： buildTemplate(fragment){ letnodeList=[...fragment.childNodes]; //1.遍历所有的节点 nodeList.f...

经过上一篇的分析，完成了查找指令和模板的功能，接下来就是编译指令的数据了。 所以本章节主要处理的方法则是buildElement方法，我们先分析一下我们所拿到的数据在进行编码，这样会更加清晰一些。 我将name,value打印出来，分别对应的值是name:v-model,value:name，在今后我们的命令中可不止只有v-model，还有v-text、v-html、v-on等等，所以我们需要对这些指令进行分类，然后再进行编译。 所以我这里特意定义了一个工具类叫CompilerUtil，用来处理指令的分类，代码如下： letCompilerUtil={ / 处理v-model指令 @para...

经过上一篇的介绍，已经实现了将模板编译成具体数据，接下来要介绍的是如何监听数据的变化，本章主要完成这个需求即可。 在我们文章的开始，我写了一个Vue双向数据绑定原理的文章当中封装了一个Observer类，这个类的作用就是监听数据的变化，当数据发生变化的时候，会通知订阅者，订阅者会去更新视图。 所以我先将这个类拿过来，稍微修改一下，没有这个类的源码可以去我之前的文章中查看，或者我这里也贴一下： classObserver{ constructor(data){ this.observer(data); } observer(obj){ if(obj&&typeofobj='o...

经过上一篇的介绍，已经实现了监听数据的变化，接下来就是要实现数据变化后，界面也跟着变化，这就是数据驱动界面改变。 想要实现数据变化之后更新UI界面，我们可以使用发布订阅模式来实现，先定义一个观察者类,再定义一个发布订阅类,然后再通过发布订阅的类来管理观察者类。 接下来我们就来实现这个代码。 定义一个观察者类，观察属性的变化，当属性变化时，触发回调函数。 classWatcher{ constructor(vm,attr,cb){ this.vm=vm; this.attr=attr; this.cb=cb; //在创建观察者对象的时候就去获取当前的旧值 this.oldValue=this...

经过上一篇的介绍，已经实现了观察者模式的基本内容，接下来要完成的就是将上一篇的发布订阅模式运用到Nue中，实现数据驱动界面改变。 在监听数据变化的章节当中，根据指定的区域和数据去编译渲染界面这个步骤处，我写了一个注释，这个注释是这样的：第一步：给外界传入的所有数据都添加get/set方法，第二步就是在第一步的基础上，给所有属性都添加观察者对象，当数据发生变化时，发布订阅触发观察者对象的回调函数重新渲染界面。 先处理下v-model的情况，找到CompilerUtil中的model方法，将其修改添加观察者对象代码: model:function(node,value,vm){ //第二部：在第...

经过上一篇的介绍，数据驱动界面改变v-model的双向绑定已告一段落,剩余的就以这篇文章来完成。 首先完成我们的v-html，v-text,其实很简单，就是将我们之前的v-model创建观察者的方法，在v-html和v-text中再写一次即可，创建属于v-html和v-text的观察者。 v-html: html:function(node,value,vm){ newWatcher(vm,value,(newValue,oldValue)=>{ node.innerHTML=newValue; }); node.innerHTML=this.getValue(vm,value); }...

CourseController.java @PreAuthorize("hasPermission('tienchin:course:remove')") @Log(title="课程管理",businessType=BusinessType.DELETE) @DeleteMapping("/{courseIds}") AjaxResultremove(@PathVariableObject[]courseIds){ returntoAjax(iCourseService.deleteCourseByIds(courseIds)); } ICourseService.java / 根据...

更改包名 将之前的entity更改为domain： 将之前的validator包当中的校验分组接口移动到common模块当中，因为其它模块也需要使用就放到公共当中进行存储。 更改完毕之后在修改下Course.java的校验注解的作用范围： / 课程ID / @TableId(value="course_id",type=IdType.AUTO) @NotNull(message="{course.id.notnull}") privateIntegercourseId; / 课程类型1.舞蹈类2.游泳类3.拳击类 / @NotNull(message="{course.type.not...

课程类型 课程适用人群

//设置活动未过期，相当于新增的活动，默认都是未过期的 activity.setActivityStatus(1);

CREATETABLE`tienchin_course` ( `course_id`intNOTNULLAUTO_INCREMENTCOMMENT'课程ID', `type`intNULLCOMMENT'课程类型1.舞蹈类2.游泳类3.拳击类', `name`varchar(64)NULLCOMMENT'课程名称', `price`doubleNULLCOMMENT'课程价格', `apply_to`intNULLCOMMENT'课程适用人群', `info`intNULLCOMMENT'课程简介', `remark`varchar(255)NULLCOMMENT'课程备注', `creat...

前言 要想使用Vue必须先创建Vue的实例,创建Vue的实例通过new来创建,所以说明Vue是一个类,所以我们要想使用自己的Vue,就必须定义一个名称叫做Vue的类。 只要创建好了Vue的实例，Vue就会根据指定的区域和数据，去编译渲染这个区域，所以我们需要在自己编写的Vue实例中拿到数据和控制区域，去编译渲染这个区域。 !>注意点：创建Vue实例的时候指定的控制区域可以是一个ID名称,也可以是一个Dom元素 指定控制区域是一个ID名称的情况： <!DOCTYPEhtml> <htmllang="en"> <head> <metacharset...

Vue双向数据绑定原理-下这一篇文章主要讲解Vue双向数据绑定的原理，主要是通过Object.defineProperty()来实现的，这里我们手写Vue双向数据绑定的原理。 首先我提出一个需求，我的需求是，快速监听对象中所有属性的变化。 首先得要有一个对象，对象的定义代码如下： <script> letobj={ name:'BNTang', age:33 }; </script> 然后我们需要监听这个对象中所有属性的变化，最最最简单的做法如下，这里我们可以使用Object.defineProperty()来实现，代码如下： Object.definePrope...

defineProperty方法 defineProperty除了可以动态修改/新增对象的属性以外,还可以在修改/新增的时候给该属性添加get/set方法,从而实现数据劫持。 definePropertyget/set方法特点 只要通过defineProperty给某个属性添加了get/set方法,那么以后只要获取这个属性的值就会自动调用get,设置这个属性的值就会自动调用set。 !>但是有一个注意点,如果设置了get/set方法,那么就不能通过value直接赋值,也不能编写writable:true。 definePropertyget方法 <script> letob...

在上一篇文章当中，表里面有一个渠道类型，我们这节主要是将这个渠道类型创建好，首先我们来看看字典表。 sys_dict_type表: 字段名 数据类型 注释 dict_id bigint 字典主键 dict_name varchar(100) 字典名称 dict_type varchar(100) 字典类型 status char(1) 状态（0正常1停用） create_by varchar(64) 创建者 create_time datetime 创建时间 update_by varchar(64) 更新者 update_time date...

因为本文章主要围绕着项目开发进行，所以前言不做开头，直接上内容。 添加字段 我们的渠道表，我看到若依脚手架当中有一个是否删除的标志字段，所以我这里也添加一下： ALTERTABLE`tienchin_channel` ADDCOLUMN`del_flag`char(1)NULLDEFAULT'0'COMMENT'删除标志（0代表存在2代表删除）'AFTER`update_time`; 新建模块 配置模块信息： 信息自己照着上方进行输入即可，具体的每一个选项，做这种项目不做过多介绍，因为并不是什么新的技术点，点击Create。 channel模块需要依赖一下tienchin-common...