Angular 从 0 到 1 (三)史上最简单的 Angular 教程
第一节:初识Angular-CLI
第二节:登录组件的构建
第三节:建立一个待办事项应用
第四节:进化!模块化你的应用
第五节:多用户版本的待办事项应用
第六节:使用第三方样式库及模块优化用
第七节:给组件带来活力
Rx--隐藏在Angular 2.x中利剑
Redux你的Angular 2应用
第八节:查缺补漏大合集(上)
第九节:查缺补漏大合集(下)
第三节:建立一个待办事项应用
这一章我们会建立一个更复杂的待办事项应用,当然我们的登录功能也还保留,这样的话我们的应用就有了多个相对独立的功能模块。以往的web应用根据不同的功能跳转到不同的功能页面。但目前前端的趋势是开发一个SPA(Single Page Application 单页应用),所以其实我们应该把这种跳转叫视图切换:根据不同的路径显示不同的组件。那我们怎么处理这种视图切换呢?幸运的是,我们无需寻找第三方组件,Angular官方内建了自己的路由模块。
建立routing的步骤
由于我们要以路由形式显示组件,建立路由前,让我们先把src\app\app.component.html
中的<app-login></app-login>
删掉。
- 第一步:在
src/index.html
中指定基准路径,即在<header>
中加入<base href="/">
,这个是指向你的index.html
所在的路径,浏览器也会根据这个路径下载css,图像和js文件,所以请将这个语句放在header的最顶端。 - 第二步:在
src/app/app.module.ts
中引入RouterModule:import { RouterModule } from '@angular/router';
第三步:定义和配置路由数组,我们暂时只为login来定义路由,仍然在
src/app/app.module.ts
中的imports中imports: [BrowserModule,FormsModule,HttpModule,RouterModule.forRoot([{path: 'login',component: LoginComponent}]) ],复制代码
注意到这个形式和其他的比如BrowserModule、FormModule和HTTPModule表现形式好像不太一样,这里解释一下,forRoot其实是一个静态的工厂方法,它返回的仍然是Module,下面的是Angular API文档给出的
RouterModule.forRoot
的定义。forRoot(routes: Routes, config?: ExtraOptions) : ModuleWithProviders复制代码
为什么叫forRoot呢?因为这个路由定义是应用在应用根部的,你可能猜到了还有一个工厂方法叫forChild,后面我们会详细讲。接下来我们看一下forRoot接收的参数,参数看起来是一个数组,每个数组元素是一个
{path: 'xxx', component: XXXComponent}
这个样子的对象。这个数组就叫做路由定义(RouteConfig)数组,每个数组元素就叫路由定义,目前我们只有一个路由定义。路由定义这个对象包括若干属性:- path:路由器会用它来匹配路由中指定的路径和浏览器地址栏中的当前路径,如 /login 。
- component:导航到此路由时,路由器需要创建的组件,如
LoginComponent
。 - redirectTo:重定向到某个path,使用场景的话,比如在用户输入不存在的路径时重定向到首页。
- pathMatch:路径的字符匹配策略
- children:子路由数组
运行一下,我们会发现出错了
这个错误看上去应该是对于''没有找到匹配的route,这是由于我们只定义了一个'login',我们再试试在浏览器地址栏输入:http://localhost:4200/login
。这次仍然出错,但错误信息变成了下面的样子,意思是我们没有找到一个outlet去加载LoginComponent。对的,这就引出了router outlet的概念,如果要显示对应路由的组件,我们需要一个插头(outlet)来装载组件。
下面我们把error_handler.js:48EXCEPTION: Uncaught (in promise): Error: Cannot find primary outlet to load 'LoginComponent' Error: Cannot find primary outlet to load 'LoginComponent' at getOutlet (http://localhost:4200/main.bundle.js:66161:19) at ActivateRoutes.activateRoutes (http://localhost:4200/main.bundle.js:66088:30) at http://localhost:4200/main.bundle.js:66052:19 at Array.forEach (native) at ActivateRoutes.activateChildRoutes (http://localhost:4200/main.bundle.js:66051:29) at ActivateRoutes.activate (http://localhost:4200/main.bundle.js:66046:14) at http://localhost:4200/main.bundle.js:65787:56 at SafeSubscriber._next (http://localhost:4200/main.bundle.js:9000:21) at SafeSubscriber.__tryOrSetError (http://localhost:4200/main.bundle.js:42013:16) at SafeSubscriber.next (http://localhost:4200/main.bundle.js:41955:27)复制代码
<router-outlet></router-outlet>
写在src\app\app.component.html
的末尾,地址栏输入http://localhost:4200/login
重新看看浏览器中的效果吧,我们的应用应该正常显示了。但如果输入http://localhost:4200
时仍然是有异常出现的,我们需要添加一个路由定义来处理。输入http://localhost:4200
时相对于根路径的path应该是空,即''。而我们这时希望将用户仍然引导到登录页面,这就是redirectTo: 'login'
的作用。pathMatch: 'full'
的意思是必须完全符合路径的要求,也就是说http://localhost:4200/1
是不会匹配到这个规则的,必须严格是http://localhost:4200
注意路径配置的顺序是非常重要的,Angular2使用“先匹配优先”的原则,也就是说如果一个路径可以同时匹配几个路径配置的规则的话,以第一个匹配的规则为准。RouterModule.forRoot([{path: '',redirectTo: 'login',pathMatch: 'full'},{path: 'login',component: LoginComponent} ])复制代码
但是现在还有一点小不爽,就是直接在app.modules.ts
中定义路径并不是很好的方式,因为随着路径定义的复杂,这部分最好还是用单独的文件来定义。现在我们新建一个文件src\app\app.routes.ts
,将上面在app.modules.ts
中定义的路径删除并在app.routes.ts
中重新定义。
import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from './login/login.component';export const routes: Routes = [{path: '',redirectTo: 'login',pathMatch: 'full'},{path: 'login',component: LoginComponent}
];export const routing = RouterModule.forRoot(routes);复制代码
接下来我们在app.modules.ts
中引入routing,import { routing } from './app.routes';
,然后在imports数组里添加routing,现在我们的app.modules.ts
看起来是下面这个样子。
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { AuthService } from './core/auth.service';
import { routing } from './app.routes';@NgModule({declarations: [AppComponent,LoginComponent],imports: [BrowserModule,FormsModule,HttpModule,routing],providers: [{provide: 'auth', useClass: AuthService}],bootstrap: [AppComponent]
})
export class AppModule { }复制代码
让待办事项变得有意义
现在我们来规划一下根路径'',对应根路径我们想建立一个todo组件,那么我们使用ng g c todo
来生成组件,然后在app.routes.ts
中加入路由定义,对于根路径我们不再需要重定向到登录了,我们把它改写成重定向到todo。
export const routes: Routes = [{path: '',redirectTo: 'todo',pathMatch: 'full'},{path: 'todo',component: TodoComponent},{path: 'login',component: LoginComponent}
];复制代码
在浏览器中键入http://localhost:4200
可以看到自动跳转到了todo路径,并且我们的todo组件也显示出来了。
我们希望的Todo页面应该有一个输入待办事项的输入框和一个显示待办事项状态的列表。那么我们先来定义一下todo的结构,todo应该有一个id用来唯一标识,还应该有一个desc用来描述这个todo是干什么的,再有一个completed用来标识是否已经完成。好了,我们来建立这个todo模型吧,在todo文件夹下新建一个文件todo.model.ts
export class Todo {id: number;desc: string;completed: boolean;
}复制代码
然后我们应该改造一下todo组件了,引入刚刚建立好的todo对象,并且建立一个todos数组作为所有todo的集合,一个desc是当前添加的新的todo的内容。当然我们还需要一个addTodo方法把新的todo加到todos数组中。这里我们暂且写一个漏洞百出的版本。
import { Component, OnInit } from '@angular/core';
import { Todo } from './todo.model';@Component({selector: 'app-todo',templateUrl: './todo.component.html',styleUrls: ['./todo.component.css']
})
export class TodoComponent implements OnInit {todos: Todo[] = [];desc = '';constructor() { }ngOnInit() {}addTodo(){this.todos.push({id: 1, desc: this.desc, completed: false});this.desc = '';}
}复制代码
然后我们改造一下src\app\todo\todo.component.html
<div><input type="text" [(ngModel)]="desc" (keyup.enter)="addTodo()"><ul><li *ngFor="let todo of todos">{{ todo.desc }}</li></ul>
</div>复制代码
如上面代码所示,我们建立了一个文本输入框,这个输入框的值应该是新todo的描述(desc),我们想在用户按了回车键后进行添加操作((keyup.enter)="addTodo()
)。由于todos是个数组,所以我们利用一个循环将数组内容显示出来(<li *ngFor="let todo of todos">{{ todo.desc }}</li>
)。好了让我们欣赏一下成果吧
如果我们还记得之前提到的业务逻辑应该放在单独的service中,我们还可以做的更好一些。在todo文件夹内建立TodoService:ng g s todo\todo
。上面的例子中所有创建的todo都是id为1的,这显然是一个大bug,我们看一下怎么处理。常见的不重复id创建方式有两种,一个是搞一个自增长数列,另一个是采用随机生成一组不可能重复的字符序列,常见的就是UUID了。我们来引入一个uuid的包:npm i --save angular2-uuid
,由于这个包中已经含有了用于typescript的定义文件,这里就执行这一个命令就足够了。由于此时Todo
对象的id
已经是字符型了,请更改其声明为id: string;
。
然后修改service成下面的样子:
import { Injectable } from '@angular/core';
import {Todo} from './todo.model';
import { UUID } from 'angular2-uuid';@Injectable()
export class TodoService {todos: Todo[] = [];constructor() { }addTodo(todoItem:string): Todo[] {let todo = {id: UUID.UUID(),desc: todoItem,completed: false};this.todos.push(todo);return this.todos;}
}复制代码
当然我们还要把组件中的代码改成使用service的
import { Component, OnInit } from '@angular/core';
import { Todo } from './todo.model';
import { TodoService } from './todo.service';@Component({selector: 'app-todo',templateUrl: './todo.component.html',styleUrls: ['./todo.component.css'],providers:[TodoService]
})
export class TodoComponent implements OnInit {todos: Todo[] = [];desc = '';constructor(private service:TodoService) { }ngOnInit() {}addTodo(){this.todos = this.service.addTodo(this.desc);this.desc = '';}
}复制代码
为了可以清晰的看到我们的成果,我们为chrome浏览器装一个插件,在chrome的地址栏中输入chrome://extensions
,拉到最底部会看到一个“获取更多扩展程序”的链接,点击这个链接然后搜索“Angury”,安装即可。安装好后,按F12调出开发者工具,里面出现一个叫“Angury”的tab。
我们可以看到id这时候被设置成了一串字符,这个就是UUID了。
建立模拟web服务和异步操作
实际的开发中我们的service是要和服务器api进行交互的,而不是现在这样简单的操作数组。但问题来了,现在没有web服务啊,难道真要自己开发一个吗?答案是可以做个假的,假作真时真亦假。我们在开发过程中经常会遇到这类问题,等待后端同学的进度是很痛苦的。所以Angular内建提供了一个可以快速建立测试用web服务的方法:内存 (in-memory) 服务器。
一般来说,你需要知道自己对服务器的期望是什么,期待它返回什么样的数据,有了这个数据呢,我们就可以自己快速的建立一个内存服务器了。拿这个例子来看,我们可能需要一个这样的对象
class Todo {id: string;desc: string;completed: boolean;
}复制代码
对应的JSON应该是这样的
{"data": [{"id": "f823b191-7799-438d-8d78-fcb1e468fc78","desc": "blablabla","completed": false},{"id": "c316a3bf-b053-71f9-18a3-0073c7ee3b76","desc": "tetssts","completed": false},{"id": "dd65a7c0-e24f-6c66-862e-0999ea504ca0","desc": "getting up","completed": false}]
}复制代码
首先我们需要安装angular-in-memory-web-api
,输入npm install --save angular-in-memory-web-api
然后在Todo文件夹下创建一个文件src\app\todo\todo-data.ts
import { InMemoryDbService } from 'angular-in-memory-web-api';
import { Todo } from './todo.model';export class InMemoryTodoDbService implements InMemoryDbService {createDb() {let todos: Todo[] = [{id: "f823b191-7799-438d-8d78-fcb1e468fc78", desc: 'Getting up', completed: true},{id: "c316a3bf-b053-71f9-18a3-0073c7ee3b76", desc: 'Go to school', completed: false}];return {todos};}
}复制代码
可以看到,我们创建了一个实现InMemoryDbService
的内存数据库,这个数据库其实也就是把数组传入进去。接下来我们要更改src\app\app.module.ts
,加入类引用和对应的模块声明:
import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
import { InMemoryTodoDbService } from './todo/todo-data';复制代码
然后在imports数组中紧挨着HttpModule
加上InMemoryWebApiModule.forRoot(InMemoryTodoDbService),
。
现在我们在service中试着调用我们的“假web服务”吧
import { Injectable } from '@angular/core';
import { Http, Headers } from '@angular/http';
import { UUID } from 'angular2-uuid';import 'rxjs/add/operator/toPromise';import { Todo } from './todo.model';@Injectable()
export class TodoService {//定义你的假WebAPI地址,这个定义成什么都无所谓//只要确保是无法访问的地址就好private api_url = 'api/todos';private headers = new Headers({'Content-Type': 'application/json'});constructor(private http: Http) { }// POST /todosaddTodo(desc:string): Promise<Todo> {let todo = {id: UUID.UUID(),desc: desc,completed: false};return this.http.post(this.api_url, JSON.stringify(todo), {headers: this.headers}).toPromise().then(res => res.json().data as Todo).catch(this.handleError);}private handleError(error: any): Promise<any> {console.error('An error occurred', error); return Promise.reject(error.message || error);}
}复制代码
上面的代码我们看到定义了一个 api_url = 'api/todos'
,你可能会问这个是怎么来的?分两部分看,api/todos
中前面的api定义成什么都可以,但后面这个todos是有讲究的,我们回去看一下 src\app\todo\todo-data.ts
返回的 return {todos}
,这个其实是 return {todos: todos}
的省略表示形式,如果我们不想让这个后半部分是todos,我们可以写成{nahnahnah: todos}
。这样的话我们改写成 api_url = 'blablabla/nahnahnah'
也无所谓,因为这个内存Web服务的机理是拦截Web访问,也就是说随便什么地址都可以,内存Web服务会拦截这个地址并解析你的请求是否满足RESTful API的要求
简单来说RESTful API中GET请求用于查询,PUT用于更新,DELETE用于删除,POST用于添加。比如如果url是api/todos,那么
- 查询所有待办事项:以GET方法访问
api/todos
- 查询单个待办事项:以GET方法访问
api/todos/id
,比如id是1,那么访问api/todos/1
- 更新某个待办事项:以PUT方法访问
api/todos/id
- 删除某个待办事项:以DELETE方法访问
api/todos/id
- 增加一个待办事项:以POST方法访问
api/todos
在service的构造函数中我们注入了Http,而angular的Http封装了大部分我们需要的方法,比如例子中的增加一个todo,我们就调用this.http.post(url, body, options)
,上面代码中的.post(this.api_url, JSON.stringify(todo), {headers: this.headers})
含义是:构造一个POST类型的HTTP请求,其访问的url是this.api_url
,request的body是一个JSON(把todo对象转换成JSON),在参数配置中我们配置了request的header。
这个请求发出后返回的是一个Observable(可观察对象),我们把它转换成Promise然后处理res(Http Response)。Promise提供异步的处理,注意到then中的写法,这个和我们传统编程写法不大一样,叫做lamda表达式,相当于是一个匿名函数,(input parameters) => expression
,=>
前面的是函数的参数,后面的是函数体。
还要一点需要强调的是:在用内存Web服务时,一定要注意res.json().data
中的data属性必须要有,因为内存web服务坑爹的在返回的json中加了data对象,你真正要得到的json是在这个data里面。
下一步我们来更改Todo组件的addTodo方法以便可以使用我们新的异步http方法
addTodo(){this.service.addTodo(this.desc).then(todo => {this.todos = [...this.todos, todo];this.desc = '';});}复制代码
这里面的前半部分应该还是好理解的:this.service.addTodo(this.desc)
是调用service的对应方法而已,但后半部分是什么鬼?...
这个貌似省略号的东东是ES7中计划提供的Object Spread操作符,它的功能是将对象或数组“打散,拍平”。这么说可能还是不懂,举例子吧:
let arr = [1,2,3];
let arr2 = [...arr];
arr2.push(4); // arr2 变成了 [1,2,3,4]
// arr 保存原来的样子let arr3 = [0, 1, 2];
let arr4 = [3, 4, 5];
arr3.push(...arr4);
// arr3变成了[0, 1, 2, 3, 4, 5]let arr5 = [0, 1, 2];
let arr6 = [-1, ...arr5, 3];
// arr6 变成了[-1, 0, 1, 2, 3]复制代码
所以呢我们上面的this.todos = [...this.todos, todo];
相当于为todos增加一个新元素,和push很像,那为什么不用push呢?因为这样构造出来的对象是全新的,而不是引用的,在现代编程中一个明显的趋势是不要在过程中改变输入的参数。第二个原因是这样做会带给我们极大的便利性和编程的一致性。下面通过给我们的例子添加几个功能,我们来一起体会一下。
首先更改src\app\todo\todo.service.ts
//src\app\todo\todo.service.ts
import { Injectable } from '@angular/core';
import { Http, Headers } from '@angular/http';
import { UUID } from 'angular2-uuid';import 'rxjs/add/operator/toPromise';import { Todo } from './todo.model';@Injectable()
export class TodoService {private api_url = 'api/todos';private headers = new Headers({'Content-Type': 'application/json'});constructor(private http: Http) { }// POST /todosaddTodo(desc:string): Promise<Todo> {let todo = {id: UUID.UUID(),desc: desc,completed: false};return this.http.post(this.api_url, JSON.stringify(todo), {headers: this.headers}).toPromise().then(res => res.json().data as Todo).catch(this.handleError);}// PUT /todos/:idtoggleTodo(todo: Todo): Promise<Todo> {const url = `${this.api_url}/${todo.id}`;console.log(url);let updatedTodo = Object.assign({}, todo, {completed: !todo.completed});return this.http.put(url, JSON.stringify(updatedTodo), {headers: this.headers}).toPromise().then(() => updatedTodo).catch(this.handleError);}// DELETE /todos/:iddeleteTodoById(id: string): Promise<void> {const url = `${this.api_url}/${id}`;return this.http.delete(url, {headers: this.headers}).toPromise().then(() => null).catch(this.handleError);}// GET /todosgetTodos(): Promise<Todo[]>{return this.http.get(this.api_url).toPromise().then(res => res.json().data as Todo[]).catch(this.handleError);}private handleError(error: any): Promise<any> {console.error('An error occurred', error); return Promise.reject(error.message || error);}
}复制代码
然后更新src\app\todo\todo.component.ts
import { Component, OnInit } from '@angular/core';
import { TodoService } from './todo.service';
import { Todo } from './todo.model';@Component({selector: 'app-todo',templateUrl: './todo.component.html',styleUrls: ['./todo.component.css'],providers: [TodoService]
})
export class TodoComponent implements OnInit {todos : Todo[] = [];desc: string = '';constructor(private service: TodoService) {}ngOnInit() {this.getTodos();}addTodo(){this.service.addTodo(this.desc).then(todo => {this.todos = [...this.todos, todo];this.desc = '';});}toggleTodo(todo: Todo) {const i = this.todos.indexOf(todo);this.service.toggleTodo(todo).then(t => {this.todos = [...this.todos.slice(0,i),t,...this.todos.slice(i+1)];});}removeTodo(todo: Todo) {const i = this.todos.indexOf(todo);this.service.deleteTodoById(todo.id).then(()=> {this.todos = [...this.todos.slice(0,i),...this.todos.slice(i+1)];});}getTodos(): void {this.service.getTodos().then(todos => this.todos = [...todos]);}
}复制代码
更新模板文件src\app\todo\todo.component.html
<section class="todoapp"><header class="header"><h1>Todos</h1><input class="new-todo" placeholder="What needs to be done?" autofocus="" [(ngModel)]="desc" (keyup.enter)="addTodo()"></header><section class="main" *ngIf="todos?.length > 0"><input class="toggle-all" type="checkbox"><ul class="todo-list"><li *ngFor="let todo of todos" [class.completed]="todo.completed"><div class="view"><input class="toggle" type="checkbox" (click)="toggleTodo(todo)" [checked]="todo.completed"><label (click)="toggleTodo(todo)">{{todo.desc}}</label><button class="destroy" (click)="removeTodo(todo); $event.stopPropagation()"></button></div></li></ul></section><footer class="footer" *ngIf="todos?.length > 0"><span class="todo-count"><strong>{{todos?.length}}</strong> {{todos?.length == 1 ? 'item' : 'items'}} left</span><ul class="filters"><li><a href="">All</a></li><li><a href="">Active</a></li><li><a href="">Completed</a></li></ul><button class="clear-completed">Clear completed</button></footer>
</section复制代码
更新组件的css样式:src\app\todo\todo.component.css
.todoapp {background: #fff;margin: 130px 0 40px 0;position: relative;box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2),0 25px 50px 0 rgba(0, 0, 0, 0.1);
}
.todoapp input::-webkit-input-placeholder {font-style: italic;font-weight: 300;color: #e6e6e6;
}
.todoapp input::-moz-placeholder {font-style: italic;font-weight: 300;color: #e6e6e6;
}
.todoapp input::input-placeholder {font-style: italic;font-weight: 300;color: #e6e6e6;
}
.todoapp h1 {position: absolute;top: -155px;width: 100%;font-size: 100px;font-weight: 100;text-align: center;color: rgba(175, 47, 47, 0.15);-webkit-text-rendering: optimizeLegibility;-moz-text-rendering: optimizeLegibility;text-rendering: optimizeLegibility;
}
.new-todo,
.edit {position: relative;margin: 0;width: 100%;font-size: 24px;font-family: inherit;font-weight: inherit;line-height: 1.4em;border: 0;color: inherit;padding: 6px;border: 1px solid #999;box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);box-sizing: border-box;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}
.new-todo {padding: 16px 16px 16px 60px;border: none;background: rgba(0, 0, 0, 0.003);box-shadow: inset 0 -2px 1px rgba(0,0,0,0.03);
}
.main {position: relative;z-index: 2;border-top: 1px solid #e6e6e6;
}
label[for='toggle-all'] {display: none;
}
.toggle-all {position: absolute;top: -55px;left: -12px;width: 60px;height: 34px;text-align: center;border: none; /* Mobile Safari */
}
.toggle-all:before {content: '❯';font-size: 22px;color: #e6e6e6;padding: 10px 27px 10px 27px;
}
.toggle-all:checked:before {color: #737373;
}
.todo-list {margin: 0;padding: 0;list-style: none;
}
.todo-list li {position: relative;font-size: 24px;border-bottom: 1px solid #ededed;
}
.todo-list li:last-child {border-bottom: none;
}
.todo-list li.editing {border-bottom: none;padding: 0;
}
.todo-list li.editing .edit {display: block;width: 506px;padding: 12px 16px;margin: 0 0 0 43px;
}
.todo-list li.editing .view {display: none;
}
.todo-list li .toggle {text-align: center;width: 40px;/* auto, since non-WebKit browsers doesn't support input styling */height: auto;position: absolute;top: 0;bottom: 0;margin: auto 0;border: none; /* Mobile Safari */-webkit-appearance: none;appearance: none;
}
.todo-list li .toggle:after {content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="50" fill="none" stroke="#ededed" stroke-width="3"/></svg>');
}
.todo-list li .toggle:checked:after {content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="50" fill="none" stroke="#bddad5" stroke-width="3"/><path fill="#5dc2af" d="M72 25L42 71 27 56l-4 4 20 20 34-52z"/></svg>');
}
.todo-list li label {word-break: break-all;padding: 15px 60px 15px 15px;margin-left: 45px;display: block;line-height: 1.2;transition: color 0.4s;
}
.todo-list li.completed label {color: #d9d9d9;text-decoration: line-through;
}
.todo-list li .destroy {display: none;position: absolute;top: 0;right: 10px;bottom: 0;width: 40px;height: 40px;margin: auto 0;font-size: 30px;color: #cc9a9a;margin-bottom: 11px;transition: color 0.2s ease-out;
}
.todo-list li .destroy:hover {color: #af5b5e;
}
.todo-list li .destroy:after {content: '×';
}
.todo-list li:hover .destroy {display: block;
}
.todo-list li .edit {display: none;
}
.todo-list li.editing:last-child {margin-bottom: -1px;
}
.footer {color: #777;padding: 10px 15px;height: 20px;text-align: center;border-top: 1px solid #e6e6e6;
}
.footer:before {content: '';position: absolute;right: 0;bottom: 0;left: 0;height: 50px;overflow: hidden;box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2),0 8px 0 -3px #f6f6f6,0 9px 1px -3px rgba(0, 0, 0, 0.2),0 16px 0 -6px #f6f6f6,0 17px 2px -6px rgba(0, 0, 0, 0.2);
}
.todo-count {float: left;text-align: left;
}
.todo-count strong {font-weight: 300;
}
.filters {margin: 0;padding: 0;list-style: none;position: absolute;right: 0;left: 0;
}
.filters li {display: inline;
}
.filters li a {color: inherit;margin: 3px;padding: 3px 7px;text-decoration: none;border: 1px solid transparent;border-radius: 3px;
}
.filters li a:hover {border-color: rgba(175, 47, 47, 0.1);
}
.filters li a.selected {border-color: rgba(175, 47, 47, 0.2);
}
.clear-completed,
html .clear-completed:active {float: right;position: relative;line-height: 20px;text-decoration: none;cursor: pointer;
}
.clear-completed:hover {text-decoration: underline;
}
/*Hack to remove background from Mobile Safari.Can't use it globally since it destroys checkboxes in Firefox
*/
@media screen and (-webkit-min-device-pixel-ratio:0) {.toggle-all,.todo-list li .toggle {background: none;}.todo-list li .toggle {height: 40px;}.toggle-all {-webkit-transform: rotate(90deg);transform: rotate(90deg);-webkit-appearance: none;appearance: none;}
}
@media (max-width: 430px) {.footer {height: 50px;}.filters {bottom: 10px;}
}复制代码
更新src\styles.css
为如下
/* You can add global styles to this file, and also import other style files */
html, body {margin: 0;padding: 0;
}
button {margin: 0;padding: 0;border: 0;background: none;font-size: 100%;vertical-align: baseline;font-family: inherit;font-weight: inherit;color: inherit;-webkit-appearance: none;appearance: none;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}
body {font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;line-height: 1.4em;background: #f5f5f5;color: #4d4d4d;min-width: 230px;max-width: 550px;margin: 0 auto;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;font-weight: 300;
}
:focus {outline: 0;
}
.hidden {display: none;
}
.info {margin: 65px auto 0;color: #bfbfbf;font-size: 10px;text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);text-align: center;
}
.info p {line-height: 1;
}
.info a {color: inherit;text-decoration: none;font-weight: 400;
}
.info a:hover {text-decoration: underline;
}复制代码
现在我们看看成果吧,现在好看多了
本节代码:github.com/wpcfan/awes…
纸书出版了,比网上内容丰富充实了,欢迎大家订购!
京东链接:item.m.jd.com/product/120…
第一节:Angular 2.0 从0到1 (一)
第二节:Angular 2.0 从0到1 (二)
第三节:Angular 2.0 从0到1 (三)
第四节:Angular 2.0 从0到1 (四)
第五节:Angular 2.0 从0到1 (五)
第六节:Angular 2.0 从0到1 (六)
第七节:Angular 2.0 从0到1 (七)
第八节:Angular 2.0 从0到1 (八)
如若内容造成侵权/违法违规/事实不符,请联系编程学习网邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
相关文章
- springboot+websocket实现页面后台长连接
在自己整合websocket时踩了一些坑,给大家分享出来希望可以帮到有需要的小伙伴,我的测试案例中有什么问题请指出,大家共同学习,现在开始上代码; 第一步,添加pom.xml依赖<?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.…...
2024/5/3 16:02:49 - 免费的程序员书籍
免费的编程中文书籍索引 免费的编程中文书籍索引,欢迎投稿。 国外程序员在 stackoverflow 推荐的程序员必读书籍,中文版。stackoverflow 上的程序员应该阅读的非编程类书籍有哪些? 中文版github 上的一个流行的编程书籍索引 中文版 欢迎订阅…...
2024/4/20 13:54:29 - 2.4K Star!450 个重磅前端开源项目合集推荐
大家好,我是你们的 猫哥,还是那个不喜欢吃鱼、又不喜欢喵 的超级猫 ~不知不觉,公众号:前端GitHub 和 GitHub 上的仓库 FrontEndGitHub 都已经更新并运营超过半年了呀, 前端GitHub 的定位是如下的:专注于挖掘优秀的前端…...
2024/4/21 4:05:52 - 图书集合
免费的编程中文书籍索引 [外链图片转存失败(img-nWlttNHU-1563679005689)(https://img.shields.io/github/issues/justjavac/free-programming-books-zh_CN.svg)] [外链图片转存失败(img-HYcajnPC-1563679005690)(https://img.shields.io/github/forks/justjavac/free-program…...
2024/4/23 21:31:18 - WEB前端知识总结
WEB前端知识总结 文杰快过年啦,高级web、java有意向看机会的私信我哈~关注他492 人赞了该文章前言 一直想着整理一下关于前端的知识体系和资料,工作忙了些,挤挤总会有的, 资料很多,就看你能不能耐下心坚持去学了&…...
2024/4/25 12:15:10 - 史上最全计算机类编程资料大集合
你想要的干货,都在这里哟! 免费的计算机编程类中文书籍 摘自:github上由justjavac整理的free-programming-books-zh_CN(免费的计算机编程类中文书籍)觉得不错的可以去star和fork一下哟! 写在最前面的话 首先声明,本篇博文并非本人原创,而是摘自github上…...
2024/4/21 4:05:49 - 开源电子书
操作系统 开源世界旅行手册鸟哥的Linux私房菜The Linux Command Line (中英文版)Linux 设备驱动 (第三版)深入分析Linux内核源码UNIX TOOLBOXDocker中文指南Docker —— 从入门到实践Docker入门实战Docker Cheat SheetFreeRADIUS新手入门Mac 开发配置手册FreeBSD 使用手册Linux…...
2024/4/21 4:05:47 - 计算机类学习总结
一、目录 语言无关类 操作系统智能系统分布式系统编译原理函数式概念计算机图形学WEB服务器版本控制编辑器NoSQLPostgreSQLMySQL管理和监控项目相关设计模式Web大数据编程艺术其它语言相关类 AndroidAPPAWKC/CC#ClojureCSS/HTMLDartElixirErlangFortranGoGroovyHaskelliOSJava…...
2024/4/21 4:05:46 - FPB 2.0:免费的计算机编程类中文书籍 2.0
之前我在 github 上整理了来一份:free-programming-books-zh_CN(免费的计算机编程类中文书籍)。 截至目前为止,已经有 90 多人发了 300 多个 Pull Requests 和 200 多个 issues,从最初的几十本书到现在的近 500 本书。…...
2024/4/21 4:05:45 - 免费编程API
本文转载于https://github.com/justjavac/free-programming-books-zh_CN 前言 本文主要介绍一些免费的编程中文书籍索引。 PS:部分书籍可能失效,大家可以留言给出新地址或者反馈给我。 目录 语言无关类 操作系统智能系统分布式系统编译原理函数式概念计算…...
2024/4/21 4:05:45 - 史上最全的免费编程电子书籍集合
置顶 [笔记]前端工程师的入门与进阶 ?[全文]如何正确的学习 Node.js ?语言无关类 操作系统 开源世界旅行手册鸟哥的Linux私房菜The Linux Command Line (中英文版)Linux 设备驱动 (第三版)深入分析Linux内核源码UNIX TOOLBOXDocker中文指南Docker —— 从入门到实践Docker入门…...
2024/5/3 13:53:39 - 免费的计算机编程类中文书籍(超全)
https://github.com/justjavac/free-programming-books-zh_CN 语言无关类 操作系统智能系统分布式系统编译原理函数式概念计算机图形学WEB服务器版本控制编辑器NoSQLPostgreSQLMySQL管理和监控项目相关设计模式Web大数据编程艺术其它 语言相关类 AndroidAPPAWKC/CC#ClojureCSS/…...
2024/4/21 4:05:42 - 编程中文书集合
转载自:https://github.com/justjavac/free-programming-books-zh_CN 作者博客:https://justjavac.com/ 免费的编程中文书籍索引 置顶 [笔记]前端工程师的入门与进阶 ?[全文]如何正确的学习 Node.js ? 操作系统 开源世界旅行手册鸟哥的Linux私房菜…...
2024/4/28 11:15:55 - 开发测试官方文档、书籍免费奉献啦
语言无关类 操作系统 开源世界旅行手册鸟哥的Linux私房菜The Linux Command Line (中英文版)Linux 设备驱动 (第三版)深入分析Linux内核源码UNIX TOOLBOXDocker中文指南Docker —— 从入门到实践Docker入门实战Docker Cheat SheetFreeRADIUS新手入门Mac 开发配置手册FreeBSD 使…...
2024/4/20 19:55:19 - 免费的编程中文书籍索引(2018第三版)
之前我在 github 上整理了来一份:free-programming-books-zh_CN(免费的计算机编程类中文书籍)。 截至目前为止,已经在 GitHub 收获了 40000 多的 stars,有 90 多人发了 600 多个 Pull Requests 和 issues。 在收集的过…...
2024/4/20 19:55:18 - 计算机相关技术资料整理
程序员必读书籍语言无关类 ###操作系统 开源世界旅行手册鸟哥的Linux私房菜Linux 系统高级编程Zephyr OS 中文文档(v1.6.0)The Linux Command Line (中英文版)Linux 设备驱动 (第三版)深入分析Linux内核源码UNIX TOOLBOXDocker中文指南Docker —— 从入门到实践Docker入门实战D…...
2024/4/20 19:55:17 - 免费的编程中文书籍索引
免费的编程中文书籍索引 国外程序员在 stackoverflow 推荐的程序员必读书籍,中文版。stackoverflow 上的程序员应该阅读的非编程类书籍有哪些? 中文版github 上的一个流行的编程书籍索引 中文版目录 语言无关类 操作系统智能系统分布式系统编译原理函数式…...
2024/4/20 19:55:16 - 2、angular指令
一、ng-app 1、定义和用法 ng-app 指令用于告诉 AngularJS 应用当前这个元素是根元素。 所有 AngularJS 应用都必须要要一个根元素。 HTML 文档中只允许有一个 ng-app 指令,如果有多个 ng-app 指令,则只有第一个会被使用。 2、语法 <element ng-app&q…...
2024/4/20 19:55:16 - Angular入门(二)快速入门
想要快点上手Angular的项目,就读了《精通AngularJS》,就第一章快速入门做个笔记。 <!DOCTYPE html> <html> <head> <meta charset"utf-8"> <script src"http://cdn.static.runoob.com/libs/angular.…...
2024/4/20 19:55:14 - 10-angular 实例学习-1
controller 和 ng-options CSDN 链接 1.demo: <!-- 下面是一个简单通过quantity和costs计算Total的示例 --><!-- 让我们增加一些逻辑,可以用不同的货币输入,计算和支付这个货单。 --><!-- 1 USD 6 CNY 0.8 EUR --><!…...
2024/4/20 19:55:13
最新文章
- 【书生·浦语大模型实战营第二期】Lagent AgentLego 智能体应用搭建——学习笔记6
文章目录 概述Lagent: 轻量级智能体框架Lagent Web Demo用Lagent自定义工具 AgentLego:组装智能体“乐高”直接使用AgentLego作为智能体工具使用AgentLego用AgentLego自定义工具 参考资料 概述 Lagent是什么 一个轻量级开源智能体框架,提供了一些典型工…...
2024/5/3 16:58:58 - 梯度消失和梯度爆炸的一些处理方法
在这里是记录一下梯度消失或梯度爆炸的一些处理技巧。全当学习总结了如有错误还请留言,在此感激不尽。 权重和梯度的更新公式如下: w w − η ⋅ ∇ w w w - \eta \cdot \nabla w ww−η⋅∇w 个人通俗的理解梯度消失就是网络模型在反向求导的时候出…...
2024/3/20 10:50:27 - String类(1)
❤️❤️前言~🥳🎉🎉🎉 hellohello~,大家好💕💕,这里是E绵绵呀✋✋ ,如果觉得这篇文章还不错的话还请点赞❤️❤️收藏💞 💞 关注💥&a…...
2024/4/30 4:56:57 - 数据挖掘中的PCA和KMeans:Airbnb房源案例研究
目录 一、PCA简介 二、数据集概览 三、数据预处理步骤 四、PCA申请 五、KMeans 聚类 六、PCA成分分析 七、逆变换 八、质心分析 九、结论 十、深入探究 10.1 第 1 步:确定 PCA 组件的最佳数量 10.2 第 2 步:使用 9 个组件重做 PCA 10.3 解释 PCA 加载和特…...
2024/5/3 4:40:07 - JavaEE 初阶篇-生产者与消费者模型(线程通信)
🔥博客主页: 【小扳_-CSDN博客】 ❤感谢大家点赞👍收藏⭐评论✍ 文章目录 1.0 生产者与消费者模型概述 2.0 在生产者与消费者模型中涉及的关键概念 2.1 缓冲区 2.2 生产者 2.3 消费者 2.4 同步机制 2.5 线程间通信 3.0 实现生产者与消费者模…...
2024/5/2 21:34:51 - 【外汇早评】美通胀数据走低,美元调整
原标题:【外汇早评】美通胀数据走低,美元调整昨日美国方面公布了新一期的核心PCE物价指数数据,同比增长1.6%,低于前值和预期值的1.7%,距离美联储的通胀目标2%继续走低,通胀压力较低,且此前美国一季度GDP初值中的消费部分下滑明显,因此市场对美联储后续更可能降息的政策…...
2024/5/1 17:30:59 - 【原油贵金属周评】原油多头拥挤,价格调整
原标题:【原油贵金属周评】原油多头拥挤,价格调整本周国际劳动节,我们喜迎四天假期,但是整个金融市场确实流动性充沛,大事频发,各个商品波动剧烈。美国方面,在本周四凌晨公布5月份的利率决议和新闻发布会,维持联邦基金利率在2.25%-2.50%不变,符合市场预期。同时美联储…...
2024/5/2 16:16:39 - 【外汇周评】靓丽非农不及疲软通胀影响
原标题:【外汇周评】靓丽非农不及疲软通胀影响在刚结束的周五,美国方面公布了新一期的非农就业数据,大幅好于前值和预期,新增就业重新回到20万以上。具体数据: 美国4月非农就业人口变动 26.3万人,预期 19万人,前值 19.6万人。 美国4月失业率 3.6%,预期 3.8%,前值 3…...
2024/4/29 2:29:43 - 【原油贵金属早评】库存继续增加,油价收跌
原标题:【原油贵金属早评】库存继续增加,油价收跌周三清晨公布美国当周API原油库存数据,上周原油库存增加281万桶至4.692亿桶,增幅超过预期的74.4万桶。且有消息人士称,沙特阿美据悉将于6月向亚洲炼油厂额外出售更多原油,印度炼油商预计将每日获得至多20万桶的额外原油供…...
2024/5/2 9:28:15 - 【外汇早评】日本央行会议纪要不改日元强势
原标题:【外汇早评】日本央行会议纪要不改日元强势近两日日元大幅走强与近期市场风险情绪上升,避险资金回流日元有关,也与前一段时间的美日贸易谈判给日本缓冲期,日本方面对汇率问题也避免继续贬值有关。虽然今日早间日本央行公布的利率会议纪要仍然是支持宽松政策,但这符…...
2024/4/27 17:58:04 - 【原油贵金属早评】欧佩克稳定市场,填补伊朗问题的影响
原标题:【原油贵金属早评】欧佩克稳定市场,填补伊朗问题的影响近日伊朗局势升温,导致市场担忧影响原油供给,油价试图反弹。此时OPEC表态稳定市场。据消息人士透露,沙特6月石油出口料将低于700万桶/日,沙特已经收到石油消费国提出的6月份扩大出口的“适度要求”,沙特将满…...
2024/4/27 14:22:49 - 【外汇早评】美欲与伊朗重谈协议
原标题:【外汇早评】美欲与伊朗重谈协议美国对伊朗的制裁遭到伊朗的抗议,昨日伊朗方面提出将部分退出伊核协议。而此行为又遭到欧洲方面对伊朗的谴责和警告,伊朗外长昨日回应称,欧洲国家履行它们的义务,伊核协议就能保证存续。据传闻伊朗的导弹已经对准了以色列和美国的航…...
2024/4/28 1:28:33 - 【原油贵金属早评】波动率飙升,市场情绪动荡
原标题:【原油贵金属早评】波动率飙升,市场情绪动荡因中美贸易谈判不安情绪影响,金融市场各资产品种出现明显的波动。随着美国与中方开启第十一轮谈判之际,美国按照既定计划向中国2000亿商品征收25%的关税,市场情绪有所平复,已经开始接受这一事实。虽然波动率-恐慌指数VI…...
2024/4/30 9:43:09 - 【原油贵金属周评】伊朗局势升温,黄金多头跃跃欲试
原标题:【原油贵金属周评】伊朗局势升温,黄金多头跃跃欲试美国和伊朗的局势继续升温,市场风险情绪上升,避险黄金有向上突破阻力的迹象。原油方面稍显平稳,近期美国和OPEC加大供给及市场需求回落的影响,伊朗局势并未推升油价走强。近期中美贸易谈判摩擦再度升级,美国对中…...
2024/4/27 17:59:30 - 【原油贵金属早评】市场情绪继续恶化,黄金上破
原标题:【原油贵金属早评】市场情绪继续恶化,黄金上破周初中国针对于美国加征关税的进行的反制措施引发市场情绪的大幅波动,人民币汇率出现大幅的贬值动能,金融市场受到非常明显的冲击。尤其是波动率起来之后,对于股市的表现尤其不安。隔夜美国股市出现明显的下行走势,这…...
2024/5/2 15:04:34 - 【外汇早评】美伊僵持,风险情绪继续升温
原标题:【外汇早评】美伊僵持,风险情绪继续升温昨日沙特两艘油轮再次发生爆炸事件,导致波斯湾局势进一步恶化,市场担忧美伊可能会出现摩擦生火,避险品种获得支撑,黄金和日元大幅走强。美指受中美贸易问题影响而在低位震荡。继5月12日,四艘商船在阿联酋领海附近的阿曼湾、…...
2024/4/28 1:34:08 - 【原油贵金属早评】贸易冲突导致需求低迷,油价弱势
原标题:【原油贵金属早评】贸易冲突导致需求低迷,油价弱势近日虽然伊朗局势升温,中东地区几起油船被袭击事件影响,但油价并未走高,而是出于调整结构中。由于市场预期局势失控的可能性较低,而中美贸易问题导致的全球经济衰退风险更大,需求会持续低迷,因此油价调整压力较…...
2024/4/26 19:03:37 - 氧生福地 玩美北湖(上)——为时光守候两千年
原标题:氧生福地 玩美北湖(上)——为时光守候两千年一次说走就走的旅行,只有一张高铁票的距离~ 所以,湖南郴州,我来了~ 从广州南站出发,一个半小时就到达郴州西站了。在动车上,同时改票的南风兄和我居然被分到了一个车厢,所以一路非常愉快地聊了过来。 挺好,最起…...
2024/4/29 20:46:55 - 氧生福地 玩美北湖(中)——永春梯田里的美与鲜
原标题:氧生福地 玩美北湖(中)——永春梯田里的美与鲜一觉醒来,因为大家太爱“美”照,在柳毅山庄去寻找龙女而错过了早餐时间。近十点,向导坏坏还是带着饥肠辘辘的我们去吃郴州最富有盛名的“鱼头粉”。说这是“十二分推荐”,到郴州必吃的美食之一。 哇塞!那个味美香甜…...
2024/4/30 22:21:04 - 氧生福地 玩美北湖(下)——奔跑吧骚年!
原标题:氧生福地 玩美北湖(下)——奔跑吧骚年!让我们红尘做伴 活得潇潇洒洒 策马奔腾共享人世繁华 对酒当歌唱出心中喜悦 轰轰烈烈把握青春年华 让我们红尘做伴 活得潇潇洒洒 策马奔腾共享人世繁华 对酒当歌唱出心中喜悦 轰轰烈烈把握青春年华 啊……啊……啊 两…...
2024/5/1 4:32:01 - 扒开伪装医用面膜,翻六倍价格宰客,小姐姐注意了!
原标题:扒开伪装医用面膜,翻六倍价格宰客,小姐姐注意了!扒开伪装医用面膜,翻六倍价格宰客!当行业里的某一品项火爆了,就会有很多商家蹭热度,装逼忽悠,最近火爆朋友圈的医用面膜,被沾上了污点,到底怎么回事呢? “比普通面膜安全、效果好!痘痘、痘印、敏感肌都能用…...
2024/4/27 23:24:42 - 「发现」铁皮石斛仙草之神奇功效用于医用面膜
原标题:「发现」铁皮石斛仙草之神奇功效用于医用面膜丽彦妆铁皮石斛医用面膜|石斛多糖无菌修护补水贴19大优势: 1、铁皮石斛:自唐宋以来,一直被列为皇室贡品,铁皮石斛生于海拔1600米的悬崖峭壁之上,繁殖力差,产量极低,所以古代仅供皇室、贵族享用 2、铁皮石斛自古民间…...
2024/4/28 5:48:52 - 丽彦妆\医用面膜\冷敷贴轻奢医学护肤引导者
原标题:丽彦妆\医用面膜\冷敷贴轻奢医学护肤引导者【公司简介】 广州华彬企业隶属香港华彬集团有限公司,专注美业21年,其旗下品牌: 「圣茵美」私密荷尔蒙抗衰,产后修复 「圣仪轩」私密荷尔蒙抗衰,产后修复 「花茵莳」私密荷尔蒙抗衰,产后修复 「丽彦妆」专注医学护…...
2024/4/30 9:42:22 - 广州械字号面膜生产厂家OEM/ODM4项须知!
原标题:广州械字号面膜生产厂家OEM/ODM4项须知!广州械字号面膜生产厂家OEM/ODM流程及注意事项解读: 械字号医用面膜,其实在我国并没有严格的定义,通常我们说的医美面膜指的应该是一种「医用敷料」,也就是说,医用面膜其实算作「医疗器械」的一种,又称「医用冷敷贴」。 …...
2024/5/2 9:07:46 - 械字号医用眼膜缓解用眼过度到底有无作用?
原标题:械字号医用眼膜缓解用眼过度到底有无作用?医用眼膜/械字号眼膜/医用冷敷眼贴 凝胶层为亲水高分子材料,含70%以上的水分。体表皮肤温度传导到本产品的凝胶层,热量被凝胶内水分子吸收,通过水分的蒸发带走大量的热量,可迅速地降低体表皮肤局部温度,减轻局部皮肤的灼…...
2024/4/30 9:42:49 - 配置失败还原请勿关闭计算机,电脑开机屏幕上面显示,配置失败还原更改 请勿关闭计算机 开不了机 这个问题怎么办...
解析如下:1、长按电脑电源键直至关机,然后再按一次电源健重启电脑,按F8健进入安全模式2、安全模式下进入Windows系统桌面后,按住“winR”打开运行窗口,输入“services.msc”打开服务设置3、在服务界面,选中…...
2022/11/19 21:17:18 - 错误使用 reshape要执行 RESHAPE,请勿更改元素数目。
%读入6幅图像(每一幅图像的大小是564*564) f1 imread(WashingtonDC_Band1_564.tif); subplot(3,2,1),imshow(f1); f2 imread(WashingtonDC_Band2_564.tif); subplot(3,2,2),imshow(f2); f3 imread(WashingtonDC_Band3_564.tif); subplot(3,2,3),imsho…...
2022/11/19 21:17:16 - 配置 已完成 请勿关闭计算机,win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机...
win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机”问题的解决方法在win7系统关机时如果有升级系统的或者其他需要会直接进入一个 等待界面,在等待界面中我们需要等待操作结束才能关机,虽然这比较麻烦,但是对系统进行配置和升级…...
2022/11/19 21:17:15 - 台式电脑显示配置100%请勿关闭计算机,“准备配置windows 请勿关闭计算机”的解决方法...
有不少用户在重装Win7系统或更新系统后会遇到“准备配置windows,请勿关闭计算机”的提示,要过很久才能进入系统,有的用户甚至几个小时也无法进入,下面就教大家这个问题的解决方法。第一种方法:我们首先在左下角的“开始…...
2022/11/19 21:17:14 - win7 正在配置 请勿关闭计算机,怎么办Win7开机显示正在配置Windows Update请勿关机...
置信有很多用户都跟小编一样遇到过这样的问题,电脑时发现开机屏幕显现“正在配置Windows Update,请勿关机”(如下图所示),而且还需求等大约5分钟才干进入系统。这是怎样回事呢?一切都是正常操作的,为什么开时机呈现“正…...
2022/11/19 21:17:13 - 准备配置windows 请勿关闭计算机 蓝屏,Win7开机总是出现提示“配置Windows请勿关机”...
Win7系统开机启动时总是出现“配置Windows请勿关机”的提示,没过几秒后电脑自动重启,每次开机都这样无法进入系统,此时碰到这种现象的用户就可以使用以下5种方法解决问题。方法一:开机按下F8,在出现的Windows高级启动选…...
2022/11/19 21:17:12 - 准备windows请勿关闭计算机要多久,windows10系统提示正在准备windows请勿关闭计算机怎么办...
有不少windows10系统用户反映说碰到这样一个情况,就是电脑提示正在准备windows请勿关闭计算机,碰到这样的问题该怎么解决呢,现在小编就给大家分享一下windows10系统提示正在准备windows请勿关闭计算机的具体第一种方法:1、2、依次…...
2022/11/19 21:17:11 - 配置 已完成 请勿关闭计算机,win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机”的解决方法...
今天和大家分享一下win7系统重装了Win7旗舰版系统后,每次关机的时候桌面上都会显示一个“配置Windows Update的界面,提示请勿关闭计算机”,每次停留好几分钟才能正常关机,导致什么情况引起的呢?出现配置Windows Update…...
2022/11/19 21:17:10 - 电脑桌面一直是清理请关闭计算机,windows7一直卡在清理 请勿关闭计算机-win7清理请勿关机,win7配置更新35%不动...
只能是等着,别无他法。说是卡着如果你看硬盘灯应该在读写。如果从 Win 10 无法正常回滚,只能是考虑备份数据后重装系统了。解决来方案一:管理员运行cmd:net stop WuAuServcd %windir%ren SoftwareDistribution SDoldnet start WuA…...
2022/11/19 21:17:09 - 计算机配置更新不起,电脑提示“配置Windows Update请勿关闭计算机”怎么办?
原标题:电脑提示“配置Windows Update请勿关闭计算机”怎么办?win7系统中在开机与关闭的时候总是显示“配置windows update请勿关闭计算机”相信有不少朋友都曾遇到过一次两次还能忍但经常遇到就叫人感到心烦了遇到这种问题怎么办呢?一般的方…...
2022/11/19 21:17:08 - 计算机正在配置无法关机,关机提示 windows7 正在配置windows 请勿关闭计算机 ,然后等了一晚上也没有关掉。现在电脑无法正常关机...
关机提示 windows7 正在配置windows 请勿关闭计算机 ,然后等了一晚上也没有关掉。现在电脑无法正常关机以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧!关机提示 windows7 正在配…...
2022/11/19 21:17:05 - 钉钉提示请勿通过开发者调试模式_钉钉请勿通过开发者调试模式是真的吗好不好用...
钉钉请勿通过开发者调试模式是真的吗好不好用 更新时间:2020-04-20 22:24:19 浏览次数:729次 区域: 南阳 > 卧龙 列举网提醒您:为保障您的权益,请不要提前支付任何费用! 虚拟位置外设器!!轨迹模拟&虚拟位置外设神器 专业用于:钉钉,外勤365,红圈通,企业微信和…...
2022/11/19 21:17:05 - 配置失败还原请勿关闭计算机怎么办,win7系统出现“配置windows update失败 还原更改 请勿关闭计算机”,长时间没反应,无法进入系统的解决方案...
前几天班里有位学生电脑(windows 7系统)出问题了,具体表现是开机时一直停留在“配置windows update失败 还原更改 请勿关闭计算机”这个界面,长时间没反应,无法进入系统。这个问题原来帮其他同学也解决过,网上搜了不少资料&#x…...
2022/11/19 21:17:04 - 一个电脑无法关闭计算机你应该怎么办,电脑显示“清理请勿关闭计算机”怎么办?...
本文为你提供了3个有效解决电脑显示“清理请勿关闭计算机”问题的方法,并在最后教给你1种保护系统安全的好方法,一起来看看!电脑出现“清理请勿关闭计算机”在Windows 7(SP1)和Windows Server 2008 R2 SP1中,添加了1个新功能在“磁…...
2022/11/19 21:17:03 - 请勿关闭计算机还原更改要多久,电脑显示:配置windows更新失败,正在还原更改,请勿关闭计算机怎么办...
许多用户在长期不使用电脑的时候,开启电脑发现电脑显示:配置windows更新失败,正在还原更改,请勿关闭计算机。。.这要怎么办呢?下面小编就带着大家一起看看吧!如果能够正常进入系统,建议您暂时移…...
2022/11/19 21:17:02 - 还原更改请勿关闭计算机 要多久,配置windows update失败 还原更改 请勿关闭计算机,电脑开机后一直显示以...
配置windows update失败 还原更改 请勿关闭计算机,电脑开机后一直显示以以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧!配置windows update失败 还原更改 请勿关闭计算机&#x…...
2022/11/19 21:17:01 - 电脑配置中请勿关闭计算机怎么办,准备配置windows请勿关闭计算机一直显示怎么办【图解】...
不知道大家有没有遇到过这样的一个问题,就是我们的win7系统在关机的时候,总是喜欢显示“准备配置windows,请勿关机”这样的一个页面,没有什么大碍,但是如果一直等着的话就要两个小时甚至更久都关不了机,非常…...
2022/11/19 21:17:00 - 正在准备配置请勿关闭计算机,正在准备配置windows请勿关闭计算机时间长了解决教程...
当电脑出现正在准备配置windows请勿关闭计算机时,一般是您正对windows进行升级,但是这个要是长时间没有反应,我们不能再傻等下去了。可能是电脑出了别的问题了,来看看教程的说法。正在准备配置windows请勿关闭计算机时间长了方法一…...
2022/11/19 21:16:59 - 配置失败还原请勿关闭计算机,配置Windows Update失败,还原更改请勿关闭计算机...
我们使用电脑的过程中有时会遇到这种情况,当我们打开电脑之后,发现一直停留在一个界面:“配置Windows Update失败,还原更改请勿关闭计算机”,等了许久还是无法进入系统。如果我们遇到此类问题应该如何解决呢࿰…...
2022/11/19 21:16:58 - 如何在iPhone上关闭“请勿打扰”
Apple’s “Do Not Disturb While Driving” is a potentially lifesaving iPhone feature, but it doesn’t always turn on automatically at the appropriate time. For example, you might be a passenger in a moving car, but your iPhone may think you’re the one dri…...
2022/11/19 21:16:57