【 Web前端 】
Francis-Leo
管理自己的时间,流程化工作
展开
-
【Angular2】Tour of Hero 部分理解
背景由于负责项目中Angular2的端对端测试和单元测试,所以需要掌握一定Angular的知识同时还需要学习Typescript,Karma,Jasmine,Protractor一些相关知识现在需要一些简单的项目来熟悉Angular2的运转,官方的Tour of Hero就是一个不错的上手项目 功能说明该系统的功能简单来说就是:列表显示英雄,点击查看并可以修改英雄的信息 知识点1.module和co原创 2017-05-21 21:40:40 · 1128 阅读 · 23 评论 -
【Angular2】组件交互异步问题
问题父组件通过服务调取后台接口获取数据 子组件@Input变量是父组件获取数据中的一个数据 由于子组件在渲染的时候,父组件的数据还没有获取到,所以会出现问题 方法1使用setTimeout函数setTimeout(() => { this.diff = this.examTimeLength * 60; }, 300);这种方法实现了功能,但是不太可取,因为后台返回的数据可能会更慢,300ms内原创 2017-09-16 15:26:42 · 1432 阅读 · 18 评论 -
【Angular2】开发中的小问题
前言在Angular2开发的过程中遇到一些问题,现记录一下,避免重复同样的错误 ngOnChanges截听输入属性值的变化问题在组件交互中,使用了ngOnchanges来监听传输到组件数据的微小变化 官网中使用的是两个变量,他们的变化可以很好监听出来,而我传输的是一个实体,每次改变的是实体里面的属性值 但是第一次能监听到,后来就不行,换一个可以监听,在换回之前又可以监听了,在点击就又不可以了原创 2017-09-10 09:43:57 · 609 阅读 · 10 评论 -
【Angular2】Unexpected token / in JSON at position 35
前言这是一个很小的问题,但是刚遇到的时候也是各种懵因为,逻辑挺复杂,组件传递到父组件到父组件,用到的实体是多层嵌套,测试json是500多行所以,为了便于理解,在各个地方加了一些注释,所以报错了….因为逻辑,实体都复杂,不知道是哪错了其实,就是因为注释问题1.Unexpected token / in JSON at position 35 2.Uncaught (i原创 2017-09-01 14:40:06 · 2384 阅读 · 12 评论 -
【Angular2】遍历嵌套实体生成数组
前言需要根据实体生成一个数组,存放初始数据实体是ExamPaperModel(试卷),其中一个属性为QuestionTypeList,包含的是实体QuestionTypeModel(题型),题型实体中有一个属性为QuestionMainList,包含的是实体QuestionMainModel(题干)现在整个试卷实体是从后台返回,然后传递到该组件,该组件要在页面渲染前生成数组存放初始的题干答题状态原创 2017-09-01 15:56:18 · 3479 阅读 · 11 评论 -
【Angular2】通过Pipe使用InnerHTML
背景数据库存的内容是有一段有格式的HTML文本,需要把这段文本显示在界面上 这时候,可以使用pipe和innerHTML实现这个功能代码pipe fileimport { Pipe, PipeTransform } from '@angular/core';import { DomSanitizer } from '@angular/platform-browser';@Pipe({ name:原创 2017-10-07 11:14:32 · 2711 阅读 · 5 评论 -
【Angular2】简易版富文本编辑器
前言因为项目中需要用户输入一些内容,比如一段话什么的,这时候需要把用户的格式记录下来,再次显示的时候可以显示原来的排版开始想就是引用第三方的组件,比如primeNG的https://www.primefaces.org/primeng/#/,但是折腾了一晚上总是引入失败,然后分析了一下,这次需求里面的格式无非就是 空格 和 回车,其它的样式也不需要,直接采用默认就好那么,就自己做一个简易版本的吧,造原创 2017-09-21 14:59:15 · 2566 阅读 · 19 评论 -
【Angular2】CheckBox获取值的两种方式
前言因为项目中需要用到CheckBox向后台提交数据 最开始设定的是学生选择什么就直接把答案合成一个字符串传到后端 但是需要回显学生答案,后端返回的json数据中答案是一个处理后的字符串,无法进行判断 所以采用数组形式答案,可以在HTML中利用模板表达式进行循环遍历判断,从而实现答案回显的功能 方式一 _ 答案合成字符串html code<div> <p>{{question.questi原创 2017-10-04 09:53:41 · 3124 阅读 · 2 评论 -
【Angular2】生成条形码并打印网页
引言项目中要用到生成一系列的条形码,并在网页中打印 前端用的是Angular2,在实现的过程中查找了许多资料,以下是相关总结 步骤1.下载JsBarcode.all.js下载地址:http://download.csdn.net/download/francis123580/101302702.把JsBarcode引入到项目首先把js放在assets文件夹下; 然后在index.html中引入;原创 2017-11-23 17:07:41 · 2680 阅读 · 24 评论 -
【Angular2】You have to be inside an angular-cli project in order to use the generate command
背景需要在项目中建立自己的component 定位到具体的目录下;输入ng g component my-indivi dual-information 就会显示如下问题,无法创建component问题在控制台提示如下问题:You have to be inside an angular-cli project in order to use the generate command解决原创 2017-06-03 16:08:47 · 5216 阅读 · 26 评论 -
【Angular2】Uncaught (in promise): TypeError: Cannot read property 'id'
背景需要显示用户信息,用到了插值表达式和双向绑定 开始数据显示正常,但是浏览器一直报错,不知为何因为可以正常运行,所以就继续做 但是用到后台返回值来切换编辑状态的时候,什么都不显示 所以就得解决了这个问题问题ERROR Error: Uncaught (in promise): TypeError: Cannot read property ‘id’ of undefinedTypeError原创 2017-06-06 11:48:03 · 17249 阅读 · 21 评论 -
【BS】总结
知识总结 单从Web端的网页来看BS开发,个人看来,可以分为静态和动态两块知识。 ●静态的内容是用于呈现的HTML,CSS是把HTML中用于描述样式的内容抽离出来,集中处理。 ●动态的内容就是JavaScript负责页面的效果,操作DOM,CSS;同时AJAX负责页面的局部更新,使得页面的交互性更强。 从整体来看整个BS开发,技术原创 2016-12-31 17:39:25 · 1321 阅读 · 67 评论 -
【AJAX】ScriptManager和UpdatePanel的属性说明
仅作为个人笔记,记录下来方便以后查阅UpdatePanel-更新面板 RenderMode -呈现模式InLine:UpdatePanel控件被解析成HTML的标记Block:UpdatePanel控件被解析成HTML控件的 UpdateMode- 更新模式Always:页面上任何一处发生的回发操作都会产生页局部更新;Cond原创 2016-12-24 20:57:55 · 736 阅读 · 21 评论 -
Web Page的生命周期
生命周期阶段 1. Page request- 请求页面发生在webpage生命周期之前,判断页面是编译还是把缓冲版本直接发给请求者。 2. Start- 开始 设置Page的Request,Response,IsPostBack的属性值,确定是回发还是请求 3. Page initialization- 初始化原创 2016-12-23 17:18:38 · 1151 阅读 · 22 评论 -
【AJAX】readyState和status的值及解释
仅作为本人笔记,记录下来方便以后查阅 xmlhttp.readyState的值及解释:0:请求未初始化(还没有调用 open())。1:请求已经建立,但是还没有发送(还没有调用send())。2:请求已发送,正在处理中(通常现在可以从响应中获取内容头)。3:请求在处理中;通常响应中已有部分数据可用了,但是服务器还没有完成响应的生成。4:响应已完成;您可以获取并使用服务器原创 2016-12-18 17:30:48 · 602 阅读 · 17 评论 -
【AJAX】XMLHttpRequest
前言AJAX:是指一种创建交互式网页应用的网页开发技术。AJAX :Asynchronous Javascript And XML即异步 JavaScript和XML通过在后台与服务器进行少量数据交换,AJAX可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。 定义XHR:XmlHtt原创 2016-12-18 16:53:53 · 579 阅读 · 14 评论 -
JQuery
定义 jQuery是一个快速、简洁的JavaScript框架(JavaScript代码库)。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式。它优化HTML文档操作、事件处理、动画设计和Ajax交互。 内容 ●静态:通过选择器我们来对DOM中各种元素,进而操作他们的样式,属性●动态:通过AJA原创 2016-12-11 20:26:54 · 1285 阅读 · 24 评论 -
CSS+DIV
1.CSS - Cascading Style Sheets 层叠样式表是一种用来表现HTML或XML等文件样式的计算机语言。 CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化CSS 能够对网页中元素位置的排版进行像素级精确控制 支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。 2.DIV - DIVision原创 2016-11-22 08:14:19 · 957 阅读 · 31 评论 -
HTML总结
HTML常用标签 & 英文全称 虽说可以通过熟能生巧记住这些,但是通过了解英文全称而快速搞定,也是不错的选择。 2.盒子模型 盒子模型经常用到,这里有必要总结一下。 盒子的属性有:边界、边框、填充、内容;每个属性都有上、右、下、左 这四部可以生活化的原创 2016-05-21 11:33:46 · 813 阅读 · 39 评论 -
【JS】进度条实时监测数据加载量
背景由于项目中需要导入大量数据到memcache中 需要用WCF调取11万条数据,由于那边多级联查和排序,所以比较慢(1分钟左右) 同时这边需要对数据进行处理,合并成2万条数据,然后存储,需要一定时间(也是1分钟左右) 总之,完成这个数据导入一共需要1分30秒左右这时候,需要一个进度条来实时监测完成的数据量 (之前用的是一个动态图,不能知道程序目前的完成量,甚至不知道它是不是卡住了,只能等着原创 2017-03-28 10:12:28 · 5745 阅读 · 68 评论 -
【Angular2】基于localStorage实现本地备份操作记录
引言项目中需要对用户的操作记录备份起来,如果后端出现任何问题,可以从前端把用户操作记录提取出来,然后后期把数据导入到数据库 功能网络监测 1.监测每条记录的提交情况,分辨出是客户端和服务器问题; 2.呼吸灯动态显示当前整体提交状况; 3.监控中心可以查看每条记录的提交情况; 4.监控中心可以控制对每条记录的监控状态; 5.监控中心可以切换网络监测的开闭模式;智能提交 1.监控中心原创 2017-12-21 20:03:56 · 1069 阅读 · 15 评论