前端
文章平均质量分 69
众拾达人
如果你不改变什么,那什么都不会改变!
展开
-
CDN方式使用Vue,VantUI组件方式
代码示例:<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="https://原创 2020-09-30 13:53:59 · 953 阅读 · 0 评论 -
GitHub提交文件报错 Commit failed - exit code 1 received
使用Git将一个文件夹上传仓库时出现题述错误。打开本地仓库,快捷键shift + commond + . ps:我是mac系统 打开隐藏文件夹,删除.git文件夹即可原创 2018-07-24 16:40:51 · 6298 阅读 · 0 评论 -
Angular4.0_辅助路由
辅助路由上篇文章中我们介绍了Angular的父子关系的子路由,这里我们介绍兄弟关系的辅助路由。1.除了在控件中声明router-outlet插座外,还需要声明一个带有name属性的插座。<router-outlet></router-outlet><router-outlet name="aux"></router-outlet>2...原创 2018-07-24 16:16:23 · 646 阅读 · 0 评论 -
Angular4.0_重定向路由&子路由
重定向路由重定向路由:用户访问一个特定的地址时,将其重定向到另一个指定的地址。www.aaa.com => www.aaa.com/products或者www.aaa.com/x => www.aaa.com/y修改app.component.html<a [routerLink]="['/home']">主页</a><!-...原创 2018-07-24 14:28:13 · 1542 阅读 · 0 评论 -
Angular4.0_路由数据传递
在路由时传递数据在查询参数中传递数据/product?id=1&name=2 => ActivatedRoute.queryParams[id]在路由路径中传递数据{path:/product,component:ProductComponent,data:[{isProd:true}]} => ActivatedRo...原创 2018-07-24 10:46:45 · 1294 阅读 · 0 评论 -
Angular4.0_页面搭建
开发页面布局app.component.hrml&amp;amp;amp;amp;lt;app-search&amp;amp;amp;amp;gt;&amp;amp;amp;amp;lt;/app-search&amp;amp;amp;amp;gt;&amp;amp;amp;amp;lt;div class=&amp;amp;amp;quot;container&amp;amp;am原创 2018-07-05 18:04:54 · 1992 阅读 · 0 评论 -
Angular4.0_路由基础
Angular Route 导航路由基础创建一个新的项目Demo,介绍路由知识 ng new router –routing我们会发现多生成的一个文件app-routing.module.ts,这个文件就是当前应用的路由配置生成一个home组件 ng g component home ng g component product修改home...原创 2018-07-23 17:58:34 · 301 阅读 · 0 评论 -
Angular4.0_开发准备
启动Angular过程介绍启动时加载了哪个页面? 启动时加载了哪些脚本? 这些脚本做了什么事?默认情况下是index对应的文件是启动时加载的页面 main.ts是启动时的起点文件main.ts//核心模块提供的enableProdMode用来,用来关闭angular的开发者模式import { enableProdMode } from '@angular/core';...原创 2018-07-05 10:46:35 · 334 阅读 · 0 评论 -
Angular4.0_环境搭建
1.百度Node.js下载并安装2.检查npm版本 npm -v3.安装angular/cli sudo npm install -g @angular/cli4.检查版本 ng -v5.在当前目录下创建angular项目 ng new auction6.使用WebStrom打开项目组件例如项目创建初始的app.compo...原创 2018-07-05 10:09:27 · 291 阅读 · 0 评论 -
Angular—目录
开始Anglular开发Angular-路由Angular-依赖注入数据绑定,响应式编程和管道组件间通讯表单处理与服务器通讯构建和部署总结原创 2018-07-05 09:44:49 · 491 阅读 · 0 评论 -
前端系列之jQuery(jQuery选择的艺术)
一.jQuery是什么?•是一款JavaScript库•方便地处理HTML、事件、动画等 html:处理HTML文档中的DOM节点,如添加、删除等 事件:通过jQuery对页面上的事件进行处理 动画:通过jQuery实现淡入、淡出、滑动等动画•可以兼容多浏览器 •80%以上网站使用如何安装和选择版本?下载jQuery •http://jquery.com/如何使用?如何选择版本?》V1.x原创 2018-01-30 15:14:38 · 275 阅读 · 0 评论 -
前端系列之JavaScript(实现轮播特效)
轮播图内容和样式carousel.htmlhtml> head> meta charset="UTF-8"> title>综合实例—图片轮播title> link rel="stylesheet" href="css/style.css" /> head> body> div class="m原创 2018-01-29 17:41:28 · 2901 阅读 · 0 评论 -
Angular4.0_路由守卫
路由守卫只有当用户已经登录并拥有某些权限时,才能进入某些路由。一个由多个表单组成的向导,例如注册流程,用户只有在当前路由的组件中填写了满足要求的信息才可以导航到下一个路由。当用户未执行保存操作,而试图离开当前导航时,提醒用户。CanActivate:处理导航到某路由的情况。CanDeactivate:处理当前路由离开的情况。Resolve:在路由激活之前获取路由数据。下...原创 2018-07-25 10:25:47 · 1739 阅读 · 0 评论 -
Angular4.0_完善在线竞拍应用路由
路由实战思路 创建商品详情组件,显示商品的图片和标题 使用Angular命令行工具生成一个新的组件 ng g component productDetail product-detail.component.tsimport { Component, OnInit } from '@angular/core';import {ActivatedRoute} ...原创 2018-07-25 14:41:02 · 249 阅读 · 0 评论 -
Angular4.0_依赖注入简介
什么是依赖注入模式及使用依赖注入的好处依赖注入:Dependency Injection 简称DIvar product = new Product();createShipment(product);我们new一个对象实例,然后当做参数传递给createShipment这个方法,这种也可以成为注入。var product = new MockProduct();creat...原创 2018-07-25 15:29:56 · 204 阅读 · 0 评论 -
Angular_与服务器通讯(项目完善商品搜索功能)
product.service.tsimport {Injectable, EventEmitter} from '@angular/core';import {Observable} from "rxjs";import {HttpClient,HttpParams} from "@angular/common/http";import 'rxjs/Rx';import {URL...原创 2018-08-03 13:59:29 · 250 阅读 · 0 评论 -
Angular_与服务器通讯(项目改造以网络请求的方式获取数据)
网络请求数据的方式改造项目新建配置文件proxy.conf.json{ "/api":{ "target":"http://localhost:8000" }}修改package.json"start": "ng serve --proxy-config proxy.conf.json",原创 2018-08-02 14:39:30 · 828 阅读 · 0 评论 -
Angular_与服务器通讯(Websocket通讯)
在上一篇文章中,我们创建了server服务,在那个项目中我们继续添加websocket服务 npm install ws –save然后安装types格式的 npm install @types/ws –save-dev实现场景编写服务端 auction_server.js"use strict";var express = require("e...原创 2018-08-01 17:19:02 · 3169 阅读 · 0 评论 -
Angular_构建&部署&多环境
构建构建:编译和合并 部署:与服务器整合 ng build使用命令ng build进行构建构建完成以后,会在项目中多出一个dist文件夹部署在服务器端新建一个文件夹client,将dist文件夹中的文件复制粘贴到cleint文件夹当中这个过程就叫部署修改auction_server.js新增代码var path = require("path...原创 2018-08-06 11:53:13 · 2617 阅读 · 0 评论 -
Angular_项目添加商品关注功能
product-detail.component.css<div class="thumbnail"> <button class="btn btn-default btn-lg" [class.active] = "isWatched" (click)="watchProduct" >原创 2018-08-06 10:05:39 · 447 阅读 · 0 评论 -
Angular_与服务器通讯(使用node+express搭建web服务器)
创建Web服务器使用Nodejs创建服务器 使用Express创建restful的http服务 监控服务器文件的变化首先新建一个文件夹名为server cd 文件目录/server npm init -y npm i @types/node –savewebStrom打开server文件 新建tsconfig.json配置文件{// 编译...原创 2018-08-01 15:23:09 · 1186 阅读 · 0 评论 -
Angular_项目完善搜索功能(表单处理)
在商品名称和商品价格以及商品类别都输入或者选择合法的情况下才能进行搜索。一.product.service.ts添加一个新的方法,获取所有商品类别getAllCategories():string[]{ return [&quot;电子产品&quot;, &quot;硬件设备&quot;, &quot;其他&quot;]; }二.使用响应式表单实现效果,所以建一个表单的数据原创 2018-07-31 18:10:11 · 2166 阅读 · 0 评论 -
Angular_项目添加评论功能(组件间通讯)
实现点击星级评价组件,首先先给星级评价组件添加点击状态。stars.component.html&amp;amp;lt;p&amp;amp;gt; &amp;amp;lt;span *ngFor=&amp;quot;let star of stars; let i=index;&amp;quot; class=&amp;quot;glyphicon glyphicon-star&am原创 2018-07-31 15:39:16 · 759 阅读 · 0 评论 -
Angular_组件间通讯
组件间通讯1.组件间通讯 父组件向子组件输入属性用 @Input()amount: number;2.组件输出属性 1.在发射的组件内部定义发射的EventEmitter对象@Output()lastPrice: EventEmitter&lt;PriceQuote&gt; = new EventEmitter();2.在发射组件里 将要发射的变量发射出去 ,注意类...原创 2018-07-27 14:41:27 · 187 阅读 · 0 评论 -
Angular4.0_Auction项目添加商品搜索功能
在前面的文章中,我们介绍学习了Angular的数据绑定和管道的知识,现在我们使用它们完成Auction项目的商品搜索功能1.首先在product中添加搜索栏product.component.html<div class="row"> <div class="col-sm-12"> <div class="form-group"> ..原创 2018-07-26 19:16:05 · 322 阅读 · 0 评论 -
Angular4.0_数据绑定和管道
单向数据绑定使用插值表达式将一个表达式的值显示在模板上。<h1>{{productTitle}}</h1>事件绑定使用小括号将组建控制器的一个方法绑定为模板上一个事件的处理器。<button (clcik)="toProductDetail()">商品详情</button>Dom属性绑定<input valu...原创 2018-07-26 17:30:13 · 501 阅读 · 0 评论 -
Angular4.0_Auction项目依赖注入
重构Auction步骤编写ProductService.包含3个方法:getProducts(),getProducts(id)以及getCommentsForProduct(id) ng g service shared/productproduct.service.tsimport {Injectable} from '@angular/core';@Inject...原创 2018-07-26 11:07:43 · 208 阅读 · 0 评论 -
前端系列之实战(城市医院预约挂号平台3.UI组件)
大将生来胆气豪,腰横秋水雁翎刀,风吹橐鼓山河动,电闪旌旗日月高, 天上麒麟原有种,穴中蝼蚁岂能逃,太平待到归来日,朕与将军解战袍。书接上文: 前端系列之实战(城市医院预约挂号平台2.基本样式编写)jQuery插件模块开发UI组件首页.UI组件-UiSearchindex.htmlui.css/*搜索*/.ui-sea原创 2018-02-05 09:36:58 · 3606 阅读 · 2 评论 -
前端系列之JavaScript(BOM对象)
什么是BOM? BOM(browser object model)浏览器对象模型window对象全局对象说明:所有的全局变量和全局方法都被归为window上<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <s原创 2018-01-29 10:42:24 · 294 阅读 · 0 评论 -
前端系列之CSS(布局)
1.行布局2.多列布局3.混合布局4.圣杯布局5.双飞翼布局原创 2018-01-19 16:59:06 · 274 阅读 · 0 评论 -
前端系列之jQuery(jQuery弹出层)
弹出层与使用场景介绍弹出层代码编写html整体结构 <!--弹出层遮罩--> <div id="layer-mask" class="layer-mask"></div> <!--弹出层窗体--> <div id="layer-pop" class="layer-pop"> <!--弹出层关闭按钮--> <div id="layer-close"原创 2018-01-31 17:38:14 · 1410 阅读 · 1 评论 -
前端系列之JavaScript(内置对象)
Array(数组)ECMAScript中的Array数组,数组主要是用来存储一组数据的。创建数组1.使用Array构造函数,语法:new Array() 小括号()说明: (1)预先知道数组要保存的项目数量 (2)向Array构造函数中传递数组应包含的项。 2.使用数组字面量表示法 由一堆包含数组项的方括号[]表示,多个数组项之间以逗号隔开。数组元素的读写: 读取和设置值时,使用方括号[原创 2018-01-24 16:06:20 · 513 阅读 · 0 评论 -
前端系列之jQuery(jQuery插件)
jQuery的插件机制jQuery主要有两种使用方式: 1、在jQuery集合对象上调用方法 2、直接调用jQuery方法扩展jQuery对象上的方法:jQuery.fn.extend()扩展jQuery工具方法:jQuery.extend()//给jQuery本身的类添加新的方法如何寻找自己需要的插件http://plugins.jquery.com/此网站已经停止维护,官方的说明是在NPM原创 2018-01-31 16:04:17 · 541 阅读 · 0 评论 -
前端系列之jQuery(jQuery事件)
DOM事件模型DOM 0级事件模型<input type="button" onclick="doSomething()" />input.onclick = function(){...}//兼容性差异event= event || window.event;var target = event.target || event.srcElement;只支持一个DOM事件处理函数DOM 2级事原创 2018-01-31 14:22:25 · 277 阅读 · 0 评论 -
前端系列之jQuery(jQueryDOM操作)
一.如何筛选jQuery对象<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>jQuery chapter 2 Demo</title> </head> <body> <div id="div">div</div> <script src=原创 2018-01-31 11:48:34 · 2323 阅读 · 0 评论 -
前端系列之JavaScript(函数)
函数的作用:通过函数可以封装任意多条语句,而且可以在任何地方,任何时候调用执行。函数的定义:函数使用function声明,后跟一组参数以及函数体,语法如下:function functionName([arg0,arg1,...,argn]){ statements}说明: 1.functionName是要定义的函数名,属于标识符 2.[]中的arg0,arg1..argn为函数的参数原创 2018-01-23 17:48:49 · 809 阅读 · 0 评论 -
前端系列之JavaScript(流程控制语句)
JS的分支语句:条件语句if语法一:if(condition){ statement1;}语法二:if(condition){ statement1;}else{ statement2;}语法三:if(condition){ statement1;}else if{ statement2;}...else{ statement3;}var age = prompt原创 2018-01-23 16:19:21 · 502 阅读 · 0 评论 -
前端系列之JavaScript(语法)
什么是JavaScript?JavaScript是一种基于对象和事件驱动的客户端脚本语言,最初的设计是为了检验HTML表单输入的正确性,起源于Netscape公司的LiveScript语言。javaScript的组成完整的JavaScript是由ECMAScript(语法),Browser Obejcts(DOM,BOM)(特性组成的)。JavaScript的语法规则1.JS的注释与分号 // 单原创 2018-01-23 09:50:54 · 997 阅读 · 0 评论 -
前端系列之CSS(布局案例)
效果图:hmtl文件<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>CSS网页布局</title> <link href="css/index.css" rel="stylesheet"> </head> <body> <!-原创 2018-01-22 14:06:24 · 909 阅读 · 0 评论 -
Safari安装使用JsonView插件
google的jsonView插件可以使接口数据json化,方便查看。下载地址: https://github.com/rfletcher/safari-json-formatter/downloads 下载后直接点击打开安装.默认是自动开启的.双击打开 信任原创 2017-06-13 14:21:59 · 9225 阅读 · 3 评论