记Angular与Django REST框架的一次合作(2):前端组件化——Angular
注:这是这个系列的第二部分,主要集中在Angular的使用方面。之前使用过AngularJS(Angular 1.x),混在Django的模板中使用,这些页面一般完全是结果展示页。在有Django表单输入的页面中,就很难将两者很好的结合起来。自己在学习新版的Angular时,跟了2遍官方网站的“英雄指南”教程。第1次完全是照搬,熟悉了一下基本概念;第2次自己做了一些修改,写了一个图片分享系统(只有一个雏形,还不是特别完善)。
推荐IDE:Visual Studio Code
代码: github地址(如果喜欢,记得star哦~)
第一部分:记Angular与Django REST框架的一次合作(1):分离 or 不分离,it's the question
1. Angular
作为一个新入坑web开发的人,本来一开始想选择一个轻量级的前端+Django来开发网站。开始比较了几个框架(主要是纠结于React和Angular),最后还是选择了Angular(当时用的是1.x版)。之所以作出这样的决定,在Stock Overflow中Josh David Miller对问题“Thinking in AngularJS” if I have a jQuery background? 的回答对我的影响很大。其中有一句话我很认同。
Don't design your page, and then change it with DOM manipulations
上面的问题是比较Angular和jQuery的,但是同样适用从某些方面来比较Angualr和React:Angular是以html为中心的,从某种程度上可以看做是对html的一种扩展;React是以JS为中心的,在JS中混入了html。由于是初学,当时发现如果没有先用html搭个架子,就完全搞不清楚网站的结构。
现在学习新版的Angular,反而觉得与React更像了。不得不说,组件(Component)是一种恰到好处的组织代码的结构单元,而且感觉经过重新设计的Angular学习起来比AngularJS更容易上手,学习曲线也更加平滑(也许是因为之前的经验)。Angular中有许多重要的基本概念,但是最重要的应该就是组件了。
1.1 突出的特点
目前了解到的关于Angualr项目中,印象最为深刻的两个特点:
- 在导航栏中,链接到其他页面不会触发页面重载(这也是SPA应用的一大特色);
- 在不主动刷新的情况下,整个网站可以离线使用。
2. 图片分享系统(image-sharing-system)
这个项目完全是仿照着官方的“英雄指南”教程修改并添加了一些元素构成的。修改如下:
- 将hero换成了user;
- 每个user多了一个属性"files",包含该用户上传的图片的编号(一个数组);
- 添加了图片相关的数据,与user的相关数据一起放在"in-memory-data.service.ts"文件中;
- 添加了"image.service"用来处理与图片相关的数据;
- 修改了"user-detail"组件,使得进入详情页后可以看到每个用户分享的图片;
- 修改了"dashboard"组件,使得可以展示分享图片最多的4位用户;
图1:http://localhost:4201/dashboard 视图
图2-1:http://localhost:4201/users 视图
图2-2:http://localhost:4201/detail/19 视图
整个项目实现的功能:进入主页(dashboard视图,图1),可以看到分享图片最多的4位用户,点击每位用户可以进入用户的详情页,在主页可以按照用户名搜索用户并进入详情页;点击导航栏中的user,可以查看所有用户的列表(users视图,图2-1),点击每个user,可以从下方的View Details进入该user的详情页(detail视图,图2-2)。在users视图中还可以添加、删除用户。
2.1 本地运行的方法
github:https://github.com/OnlyBelter/image-sharing-system
首先要安装Node.js和Angular CLI,将项目clone到本地,然后运行下面的命令
npm install ng serve --host 0.0.0.0 --port 4201
如果运行正常,就可以在浏览器中查看了,http://localhost:4201/dashboard
2.2 整个程序的结构
图3:图片分享系统程序的结构,查看pdf
3. Angular CLI
CLI是Angular的命令行接口,使用CLI可以通过命令行创建项目,创建新的组件,服务,模块等;而且可以用来实时编译,测试,发布。CLI创建组件时(或服务等)会自动将组件import到app.module.ts文件中,并在NgModule中声明。创建一个新项目后的文件结构如下图:
图4:Angular CLI生成的文件结构(VS Code中打开)
后面所有的修改都在app文件夹中,其他的文件一般不需要修改。
下面是一些常用的命令:
# 安装cli npm install -g @angular/cli# 创建一个新项目 ng new my-project cd my-project# 启动项目,可以实时编译 ng serve --host 0.0.0.0 --port 4201# 创建新的component ng g component my-new-component# 创建新的服务 ng g service my-new-service
CLI的文档:https://github.com/angular/angular-cli/wiki
4. 组件(component)
组件就是“一小块TypeScript代码 + 一小块html代码 + 一小块css代码“,每个组件相对来说都可以实现一个比较独立的功能。而前端最重要的功能就是内容的展示和与用户的交互。因此组件相当于将整个大任务进行了分解:每个组件都完成一小块任务,然后将这些组件拼在一起,就可以得到整个功能完整的网站。
比如在我自己写的这个小项目中,一共有5个组件(图3橙色部分):
- app.component:由Angular CLI创建时自动生成,直接被添加到了index.html中,相当于所有组件的父组件,控制着整个网站的基本结构,也是路由的出口;
- users.component:/users路由到这个视图,主要用于显示user列表,增加、删除用户;
- dashboard.component:/dashboard路由到这个视图(根路由也被重定向到这个视图),展示分享图片最多的前4位用户,按用户名搜索;
- user-search.component:dashboard组件的子组件,负责搜索相关事务;
- user-detail.component:/detail/user-id,用于展示每个用户的详情;
上面的5个组件,app用于组织网站的结构,确定路由的出口;其他组件要么负责一个独立的页面,或者是一个页面的一部分。其他无论是module(例如路由模块,图3绿色部分)还是service(主要用于提供数据,图3紫色部分),都是为组件的正常工作提供支持的。因此可以说,组件是位于Angular框架的中心位置的。
4.1 组件的组成
利用CLI创建一个新的component后,默认会在app文件夹下生成一个文件夹,这个文件夹内包含四个文件(以users组件为例):
- users.component.css:负责该组件的样式;
- users.component.html:该组件的模板;
- users.component.spec.ts:一般用不到;
- users.component.ts:负责逻辑的处理,可以定义变量和函数,在模板中展示或调用;此外还可以导入相应的service,通过调用service的方法获取数据;
4.2 组件中的构造函数(constructor)
组件的构造函数用来解决依赖注入,初始化服务或路由。其他变量的初始化不应该放在这里,而应该放在ngOnInit中。下面是users组件中的构造函数:
// the constructor itself does nothing, the parameter simultaneously deinfes // a private userService property and identifies it as a UserService injection constructor(private userService: UserService, // 组件在构造函数中请求服务private router: Router // 在构造函数中注入Router ) { }
初始化服务和路由后,就可以在后面通过this.userService和this.router来调用服务和路由中的方法了。
5. 服务(service)
服务是连接服务器端和组件的桥梁,使用单独的服务可以保持组件精简,服务可以通过http协议中的方法(get, post等)向服务器请求资源或修改、添加资源。
服务也可以通过CLI直接创建,服务的标志是在export前有一个@Injectable()修饰符。当 TypeScript 看到@Injectable()装饰器时,就会记下本服务的元数据。 如果 Angular 需要往这个服务中注入其它依赖,就会使用这些元数据。像上面组件的构造函数中介绍的那样,服务可以注入到组件中,从而为组件提供数据服务。
5.1 承诺
服务总是异步的。Angular的http.get返回一个 RxJS 的Observable对象。Observable(可观察对象)是一个管理异步数据流的强力方式。可以利用toPromise操作符把Observable转换成Promise对象。
一个Observable对象是一个数组,其中的元素随着时间的流逝异步地到达。 Observable帮助我们管理异步数据,例如来自后台服务的数据。 Angular 自身使用了Observable,包括 Angular 的事件系统和它的 http 客户端服务。为了使用Observable, Angular 采用了名为 Reactive Extensions (RxJS) 的第三方包。
这部分应该是官方教程中最复杂的一块儿了。我打算后面单独写一篇博客,介绍这部分的内容。下面看一下我自己改写的项目中user.service的实现:
5.2 服务的实现
在这部分实现了以下操作:
- 获取所有user的数据(三种实现,直接返回一个数组、返回一个Promise对象、利用http返回一个Observable对象再转换成Promise对象);
- 获取单个user的数据(两种实现,返回所有user的数据再根据id过滤、直接请求单个user的数据);
- 修改某个user的信息:利用http的put方法修改服务器端数据,使得数据可以持久化;
- 添加新的user:利用http的post方法,将数据添加到服务器端;
- 删除已存在的user:利用http的delete方法,删除数据;
import { Injectable } from '@angular/core'; import { Headers, Http } from "@angular/http";// 有很多像toPromise这样的操作符,用于扩展Observable,为其添加有用的能力 import 'rxjs/add/operator/toPromise';import { USERS } from './mock-users'; import { User } from "./user"; @Injectable() export class UserService {private usersUrl = 'api/users';constructor(private http: Http) { }//UserService暴露了getUsers方法,返回跟以前一样的模拟数据,但它的消费者不需要知道这一点//服务是一个分离关注点,建议你把代码放到它自己的文件里getUsers(): Promise<User[]> {// return USERS; // 直接返回一个数组return Promise.resolve(USERS); // 返回一个Promise对象 }// 延迟6s后返回getUsersSlowly(): Promise<User[]> {return new Promise(resolve => setTimeout(() => resolve(USERS), 6000));}// 返回所有user的数据再过滤getUser(id: number): Promise<User> {return this.getUsers().then(rep => rep.find(user => user.id === id));}//Angular 的http.get返回一个 RxJS 的Observable对象getUsersByHttp(): Promise<User[]> {return this.http.get(this.usersUrl).toPromise().then(res => res.json().data as User[]).catch(this.handleError);}// 来发起一个 get-by-id 请求,直接请求单个user的数据getUserByHttp(id: number): Promise<User> {const url = `${this.usersUrl}/${id}`;return this.http.get(url).toPromise().then(res => res.json().data as User).catch(this.handleError);}private headers = new Headers({'Content-Type': 'application/json'});// 使用 HTTP 的 put() 方法来把修改持久化到服务端update(user: User): Promise<User> {const url = `${this.usersUrl}/${user.id}`;return this.http.put(url, JSON.stringify(user), {headers: this.headers}).toPromise().then(() => user) // ().catch(this.handleError);}create(name: string): Promise<User> {return this.http.post(this.usersUrl, JSON.stringify({name: name}), {headers: this.headers}).toPromise()// 下面的.then方法对默认返回的数据进行了加工,得到了一个完整的User对象.then(res => res.json().data as User) .catch(this.handleError);}delete(id: number): Promise<void> {const url = `${this.usersUrl}/${id}`;return this.http.delete(url, {headers: this.headers}).toPromise().then(() => null) // 什么也不返回.catch(this.handleError);}private handleError(error: any): Promise<any> {console.error('An error occurred', error); // for demo purposes onlyreturn Promise.reject(error.message || error);}}
5.3 http请求与响应
在上面的代码中,每次调用http.get(url),或其他http方法(post, put, delete),就相当于对相应的url发送了一次请求(Request)。发出这个请求后,收到请求的一方(一般是服务器端)总会给出一个响应(Response),这个响应可以是各种不同的形式。上面的getUsersByHttp方法中,就返回了一个User[]数组(由res.json().data得到),如果我们做一些修改:
1 //Angular 的http.get返回一个 RxJS 的Observable对象 2 getUsersByHttp(): Promise<User[]> { 3 return this.http.get(this.usersUrl) 4 .toPromise() 5 // .then(res => res.json().data as User[]) 6 .then(res => res) 7 .catch(this.handleError); 8 }
现在返回的是一个原生态的Response,如果在users组件中打印出这个Response:
1 getUsers(): void { 2 // res是UserService返回的User数组,作为参数传递并赋值给组件的users属性 3 // 使用.then(res => console.log(res))可以将res打印到终端 4 this.userService.getUsersByHttp() 5 // .then(res => this.users = res); 6 .then(res => console.log(res)); 7 }
我们可以看到下面的结果:
图5:一个标准的Response类
我们可以看到status为200,表示我们请求成功了。在_body的data中,可以看到返回的数据。
6. 一个模拟的服务器端
到目前为止,我们并没有真正的服务器端,我们的服务器端是利用"angular-in-memory-web-api"模拟出来的一个内存数据库。因此数据只是保存到了内存,在不刷新的情况下,暂时做到了对数据的持久化。下面是"in-memory-data.service.ts"文件中的内容:
import { InMemoryDbService } from 'angular-in-memory-web-api'; export class InMemoryDataService implements InMemoryDbService {// 由于没有后端,这里创建了一个内存数据库来存放数据 createDb() {let users = [{ id: 11, name: 'Mr. Nice', files: [1, 2] },{ id: 12, name: 'Narco', files: [32] },{ id: 13, name: 'Bombasto', files: [11, 5] },{ id: 14, name: 'Celeritas', files: [4, 12] },{ id: 15, name: 'Magneta', files: [6] },{ id: 16, name: 'RubberMan', files: [21] },{ id: 17, name: 'Dynama', files: [3, 7, 9] },{ id: 18, name: 'Dr IQ', files: [] },{ id: 19, name: 'Magma', files: [10] },{ id: 20, name: 'Tornado', files: [8, 13, 14, 16] }];let images = [{ id: 1, userId: 11, des: '', fileUrl: 'https://raw.githubusercontent.com/OnlyBelter/learn_neuralTalk/master/self_pic/img/butterfly1.jpg' },{ id: 2, userId: 11, des: '', fileUrl: 'https://raw.githubusercontent.com/OnlyBelter/learn_neuralTalk/master/self_pic/img/cat1.jpg' },{ id: 3, userId: 17, des: '', fileUrl: 'https://raw.githubusercontent.com/OnlyBelter/learn_neuralTalk/master/self_pic/img/cloud1.jpg' },{ id: 4, userId: 14, des: '', fileUrl: 'https://raw.githubusercontent.com/OnlyBelter/learn_neuralTalk/master/self_pic/img/river1.jpg' },{ id: 5, userId: 13, des: '', fileUrl: 'https://raw.githubusercontent.com/OnlyBelter/learn_neuralTalk/master/self_pic/img/flower1.jpg' },{ id: 6, userId: 15, des: '', fileUrl: 'https://raw.githubusercontent.com/OnlyBelter/learn_neuralTalk/master/self_pic/img/disney1.jpg' },{ id: 7, userId: 17, des: '', fileUrl: 'https://raw.githubusercontent.com/OnlyBelter/learn_neuralTalk/master/self_pic/img/cloud2.jpg' },{ id: 8, userId: 20, des: '', fileUrl: 'https://raw.githubusercontent.com/OnlyBelter/learn_neuralTalk/master/self_pic/img/panda1.jpg' },{ id: 9, userId: 17, des: '', fileUrl: 'https://raw.githubusercontent.com/OnlyBelter/learn_neuralTalk/master/self_pic/img/sunfei2.jpg' },{ id: 10, userId: 19, des: '', fileUrl: 'https://raw.githubusercontent.com/OnlyBelter/learn_neuralTalk/master/self_pic/img/panda2.jpg' },{ id: 11, userId: 13, des: '', fileUrl: 'https://raw.githubusercontent.com/OnlyBelter/learn_neuralTalk/master/self_pic/img/flower2.jpg' },{ id: 12, userId: 14, des: '', fileUrl: 'https://raw.githubusercontent.com/OnlyBelter/learn_neuralTalk/master/self_pic/img/IMG_20161105_100414_A19.jpg' },{ id: 13, userId: 20, des: '', fileUrl: 'https://raw.githubusercontent.com/OnlyBelter/learn_neuralTalk/master/self_pic/img/panda3.jpg' },{ id: 14, userId: 20, des: '', fileUrl: 'https://raw.githubusercontent.com/OnlyBelter/learn_neuralTalk/master/self_pic/img/shanghai4.jpg' },{ id: 16, userId: 20, des: '', fileUrl: 'https://raw.githubusercontent.com/OnlyBelter/learn_neuralTalk/master/self_pic/img/shanghai5.jpg' },{ id: 21, userId: 16, des: '', fileUrl: 'https://raw.githubusercontent.com/OnlyBelter/learn_neuralTalk/master/self_pic/img/grass.jpg' },{ id: 32, userId: 12, des: '', fileUrl: 'https://raw.githubusercontent.com/OnlyBelter/learn_neuralTalk/master/self_pic/img/lamp1.jpg' },];return {users, images};} }
查看上面的代码,我们在内存数据库中定义了两个数据库users和images;因此,我们可以在service中利用http协议中的动词(get, post, put, delete)通过"api/users"和"api/images"这两个url地址对这两数据库进行操作。在service中,对这种内存数据库的操作和对真正的利用Django REST框架搭建的API的操作是没有差别的。下个部分,我会尝试用Django REST Framework搭建一个可以替代"angular-in-memory-web-api"构建的内存数据库的,真正意义上的后端。
接下来...
第三部分:后端服务化——Django REST框架
Reference
中文版英雄教程:https://angular.cn/tutorial
https://stackoverflow.com/a/15012542/2803344
https://angular.cn/guide/glossary#observable-对象
https://stackoverflow.com/questions/35763730/difference-between-constructor-and-ngoninit/35763811#35763811
https://github.com/OnlyBelter/image-sharing-system
转载于:https://www.cnblogs.com/Belter/p/7300704.html
如若内容造成侵权/违法违规/事实不符,请联系编程学习网邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
相关文章
- 入门ROS教程与视频汇总(kinetic)
参考网址: 1 MooreRobots 2 Richard Wang 3 Shawn Chen 部分视频网址: http://v.youku.com/v_show/id_XMjUxMTc5MzE5Mg http://i.youku.com/i/UMTg1NDE4MDM2/videos 注意下面是机器翻译结果~MooreRobots博客关于博客文章【概述】获得通过模拟在ROS…...
2024/4/21 4:38:06 - 一篇全面的zepplin教程
https://www.jianshu.com/p/090f02005e07 1.Zeppelin是什么? Apache Zeppelin是一款基于Web的Notebook(类似于jupyter notebook),支持交互式地数据分析。 Zeppelin可实现你所需要的: 数据采集数据发现数据分析数据可视化和协作 支持多种语言ÿ…...
2024/4/21 4:38:05 - 【资料】228页的 《重学TS》PDF 终于来了,一份值得一读的 TS 学习资料
「《重学TS v1.0》」 PDF 是今年阿宝哥发布的第三本电子书,前两本分别是《前端进阶篇》(下载量 9500) 和《了不起的 TS 和 Deno》(下载量近 2060),这里衷心感谢大家对阿宝哥的认可与支持。在学习 TS 的过程…...
2024/4/21 4:38:05 - html注释标签,完整PDF
前言 JavaScript是面向 Web 的编程语言,获得了所有网页浏览器的支持,是目前使用最广泛的脚本编程语言之一,也是网页设计和 Web 应用必须掌握的基本工具。 JavaScript主要用途 嵌入动态文本与HTML页面对浏览器时间做出相应读写HTML元素在数…...
2024/4/21 4:38:03 - webgoat全关教程手册
Webgoat&Webwolf owaspbwa里面的两个服务 搭建 先要安装jdk、Webgoat和Webwolf Webgoat和Webwolf jdk1.8不支持了,需要安装jdk11 去git上下载Webgoat和Webwolf https://github.com/WebGoat/WebGoat/releases/tag/v8.0.0.M26 去oracle官网下载JDK https:/…...
2024/4/21 4:38:03 - web前端入门到实战:HTML 转 PDF 图文报表实践
导出 PDF 图文报表实践 方法一: jsPDF 使用 jsPDF 时,需要注意的是其默认单位为 mm,需要在 new jsPDF() 时传入配置 const doc new jsPDF({unit: px,format: a4 })这个方法废了。这个鬼东西多行文本和多个图片,简直要人命&…...
2024/4/21 4:38:01 - JavaTutorialNetwork 中文系列教程 · 翻译完成
原文:JavaTutorialNetwork 协议:CC BY-NC-SA 4.0 欢迎任何人参与和完善:一个人可以走的很快,但是一群人却可以走的更远。 在线阅读ApacheCN 学习资源 目录 JavaTutorialNetwork 中文系列教程Java 基础 Java 概述在 Ubuntu 上安装…...
2024/4/21 4:38:01 - 干货!java生成pdf工具类
开头 Spring框架自诞生以来一直备受开发者青睐,有人亲切的称之为:Spring 全家桶。Spring更是避免了重复造轮子的工作并跟随着互联网行业的发展做出不断的更新,很多研发人员把spring看作心目中最好的Java项目,没有之一。 **可以毫…...
2024/4/21 4:38:01 - tf入门教程
本文为原创博客, 转载请注明出处:https://blog.csdn.net/q_z_r_s 机器感知 一个专注于SLAM、三维重建、机器视觉等相关技术文章分享的公众号 开源地址:点击该链接 tf入门教程 1. 引言 本节将告诉你tf可以做什么, 将使用turtlesim来展示它的威力. 接下来也将涉…...
2024/4/21 4:37:58 - 初学者应该如何开启自己的编程生涯?,springmvc教程pdf
前端。如果你希望掌握外观,比方说开发好看到让用户爱上的网站,你就应该了解HTML(样子),CSS(外观与感觉),JavaScript(感觉)。不过这还不够,利用纯粹…...
2024/4/21 4:37:57 - turtlebot3入门教程
旨在用于教育,研究,产品原型和爱好应用的目的。 TurtleBot3的目标是大幅降低平台的尺寸和价格,而不会牺牲性能,功能和质量。 由于提供了不同可选,如底盘,计算机和传感器,TurtleBot3可以通过各…...
2024/4/27 1:12:07 - 2019年5月6小时学会TypeScript入门实战视频教程
TypeScript是为大型应用之开发而设计,作为一个前端工程师,TypeScript目前是必备技能,目前TypeScript 已在Nodejs 、Angualr、React、Vue这些框架中广泛应用。这里分享套今年5月份刚出的TypeScript入门实战视频教程,这套TypeScript…...
2024/4/21 4:37:55 - ROS2入门教程
https://www.ncnynl.com/archives/201801/2250.html ROS2入门教程-基本概念 介绍ROS2的基本概念 1. 基本概念: ROS是一个用于在不同进程间匿名的发布、订阅、传递信息的中间件。 ROS2系统的核心部分是ROS网络(ROS Graph)。 ROS网络是指在ROS系统中不同的节点间相…...
2024/4/26 9:40:19 - H5 页面如何查看 PDF 文件
我们知道在 Chrome、Firefox 等浏览器可以查看 PDF 文件,不需要额外安装什么插件,这是由于 pdf.js 被预置到了这些浏览器中。 pdf.js 是一款使用 HTML5 Canvas 安全地渲染 PDF 文件以及遵从网页标准的网页浏览器渲染 PDF 文件的JavaScript库。Mozilla基金…...
2024/4/20 19:45:56 - 使用Angular 4、Bootstrap 4、TypeScript和ASP.NET Core开发的Apworks框架案例应用:Task List...
最近我为我自己的应用开发框架Apworks设计了一套案例应用程序,并以Apache 2.0开源,开源地址是:https://github.com/daxnet/apworks-examples,目的是为了让大家更为方便地学习和使用.NET Core、最新的前端开发框架Angularÿ…...
2024/4/20 19:45:55 - [译] RxJS 高级缓存
原文链接: blog.thoughtram.io/angular/201… 本文为 RxJS 中文社区 翻译文章,如需转载,请注明出处,谢谢合作! 如果你也想和我们一起,翻译更多优质的 RxJS 文章以奉献给大家,请点击【这里】 温馨提示: 文章…...
2024/4/20 19:45:54 - angularjs 页面缓存及动态刷新解决方案
angularjs 页面缓存及动态刷新解决方案参考文章: (1)angularjs 页面缓存及动态刷新解决方案 (2)https://www.cnblogs.com/yang-shun/p/10191974.html (3)https://www.javazxz.com/thread-549…...
2024/4/20 19:45:53 - angular2页面抓取,如何在Angular 2中获取当前页面的绝对路径?
Ive essentially run into this problem, where I need a reference to the current route to use gradients, but have yet to figure out how to translate the solution into Angular 2.解决方案constructor(location:Location) {console.log(location.prepareExternalUrl(l…...
2024/4/21 4:37:53 - angular-resource的url转义问题
最近遇到这样一个问题,就是使用angular-resource后,拼接的url中 / 会被转义成 %2F ,后台代码不能识别,查看$resource的源码后发现,拼接的url被转义了,现提供一种解决方案: 使用angular的拦截器…...
2024/4/25 2:59:01 - angular7 路由路径中的 #
一般我们习惯看的路由路径是 http://localhost:4200/home 可是有时候路径会变成 http://localhost:4200/#/home 路径中出现了 # ,是angular中使用了 hash模式 设置hash模式有两种途径 在app.module.ts中 引入 import {HashLocationStrategy, LocationStrategy}…...
2024/4/26 18:52:01
最新文章
- Ubuntu Mysql修改密码时遇到的问题
参考: ubuntu18.04 首次登录mysql未设置密码或忘记密码解决方法_ubuntu中mysql设置密码-CSDN博客 1. use mysql; #连接到mysql数据库 2. update mysql.user set authentication_stringpassword(123456) where userroot and Host localhost; #修改密码123456是密码…...
2024/4/27 8:45:27 - 梯度消失和梯度爆炸的一些处理方法
在这里是记录一下梯度消失或梯度爆炸的一些处理技巧。全当学习总结了如有错误还请留言,在此感激不尽。 权重和梯度的更新公式如下: w w − η ⋅ ∇ w w w - \eta \cdot \nabla w ww−η⋅∇w 个人通俗的理解梯度消失就是网络模型在反向求导的时候出…...
2024/3/20 10:50:27 - 自我介绍的HTML 页面(入门)
一.前情提要 1.主要是代码示例,具体内容需自己填充 2.代码后是详解 二.代码实例和解析 代码 <!DOCTYPE html> <html lang"zh-CN"> <head> <meta charset"UTF-8"> <title>自我介绍页面</title>…...
2024/4/26 14:55:53 - springboot 项目整合easy-captcha验证码功能
效果 1、验证码使用easy-captcha,在pom文件增加依赖 <!-- google 验证码 --><dependency><groupId>com.github.whvcse</groupId><artifactId>easy-captcha</artifactId></dependency> 2、增加获取kaptcha的ctrl package com.*.*.s…...
2024/4/24 13:16:37 - 【外汇早评】美通胀数据走低,美元调整
原标题:【外汇早评】美通胀数据走低,美元调整昨日美国方面公布了新一期的核心PCE物价指数数据,同比增长1.6%,低于前值和预期值的1.7%,距离美联储的通胀目标2%继续走低,通胀压力较低,且此前美国一季度GDP初值中的消费部分下滑明显,因此市场对美联储后续更可能降息的政策…...
2024/4/26 18:09:39 - 【原油贵金属周评】原油多头拥挤,价格调整
原标题:【原油贵金属周评】原油多头拥挤,价格调整本周国际劳动节,我们喜迎四天假期,但是整个金融市场确实流动性充沛,大事频发,各个商品波动剧烈。美国方面,在本周四凌晨公布5月份的利率决议和新闻发布会,维持联邦基金利率在2.25%-2.50%不变,符合市场预期。同时美联储…...
2024/4/26 20:12:18 - 【外汇周评】靓丽非农不及疲软通胀影响
原标题:【外汇周评】靓丽非农不及疲软通胀影响在刚结束的周五,美国方面公布了新一期的非农就业数据,大幅好于前值和预期,新增就业重新回到20万以上。具体数据: 美国4月非农就业人口变动 26.3万人,预期 19万人,前值 19.6万人。 美国4月失业率 3.6%,预期 3.8%,前值 3…...
2024/4/26 23:05:52 - 【原油贵金属早评】库存继续增加,油价收跌
原标题:【原油贵金属早评】库存继续增加,油价收跌周三清晨公布美国当周API原油库存数据,上周原油库存增加281万桶至4.692亿桶,增幅超过预期的74.4万桶。且有消息人士称,沙特阿美据悉将于6月向亚洲炼油厂额外出售更多原油,印度炼油商预计将每日获得至多20万桶的额外原油供…...
2024/4/27 4:00:35 - 【外汇早评】日本央行会议纪要不改日元强势
原标题:【外汇早评】日本央行会议纪要不改日元强势近两日日元大幅走强与近期市场风险情绪上升,避险资金回流日元有关,也与前一段时间的美日贸易谈判给日本缓冲期,日本方面对汇率问题也避免继续贬值有关。虽然今日早间日本央行公布的利率会议纪要仍然是支持宽松政策,但这符…...
2024/4/25 18:39:22 - 【原油贵金属早评】欧佩克稳定市场,填补伊朗问题的影响
原标题:【原油贵金属早评】欧佩克稳定市场,填补伊朗问题的影响近日伊朗局势升温,导致市场担忧影响原油供给,油价试图反弹。此时OPEC表态稳定市场。据消息人士透露,沙特6月石油出口料将低于700万桶/日,沙特已经收到石油消费国提出的6月份扩大出口的“适度要求”,沙特将满…...
2024/4/25 18:39:22 - 【外汇早评】美欲与伊朗重谈协议
原标题:【外汇早评】美欲与伊朗重谈协议美国对伊朗的制裁遭到伊朗的抗议,昨日伊朗方面提出将部分退出伊核协议。而此行为又遭到欧洲方面对伊朗的谴责和警告,伊朗外长昨日回应称,欧洲国家履行它们的义务,伊核协议就能保证存续。据传闻伊朗的导弹已经对准了以色列和美国的航…...
2024/4/26 21:56:58 - 【原油贵金属早评】波动率飙升,市场情绪动荡
原标题:【原油贵金属早评】波动率飙升,市场情绪动荡因中美贸易谈判不安情绪影响,金融市场各资产品种出现明显的波动。随着美国与中方开启第十一轮谈判之际,美国按照既定计划向中国2000亿商品征收25%的关税,市场情绪有所平复,已经开始接受这一事实。虽然波动率-恐慌指数VI…...
2024/4/25 16:48:44 - 【原油贵金属周评】伊朗局势升温,黄金多头跃跃欲试
原标题:【原油贵金属周评】伊朗局势升温,黄金多头跃跃欲试美国和伊朗的局势继续升温,市场风险情绪上升,避险黄金有向上突破阻力的迹象。原油方面稍显平稳,近期美国和OPEC加大供给及市场需求回落的影响,伊朗局势并未推升油价走强。近期中美贸易谈判摩擦再度升级,美国对中…...
2024/4/26 16:00:35 - 【原油贵金属早评】市场情绪继续恶化,黄金上破
原标题:【原油贵金属早评】市场情绪继续恶化,黄金上破周初中国针对于美国加征关税的进行的反制措施引发市场情绪的大幅波动,人民币汇率出现大幅的贬值动能,金融市场受到非常明显的冲击。尤其是波动率起来之后,对于股市的表现尤其不安。隔夜美国股市出现明显的下行走势,这…...
2024/4/25 18:39:16 - 【外汇早评】美伊僵持,风险情绪继续升温
原标题:【外汇早评】美伊僵持,风险情绪继续升温昨日沙特两艘油轮再次发生爆炸事件,导致波斯湾局势进一步恶化,市场担忧美伊可能会出现摩擦生火,避险品种获得支撑,黄金和日元大幅走强。美指受中美贸易问题影响而在低位震荡。继5月12日,四艘商船在阿联酋领海附近的阿曼湾、…...
2024/4/25 18:39:16 - 【原油贵金属早评】贸易冲突导致需求低迷,油价弱势
原标题:【原油贵金属早评】贸易冲突导致需求低迷,油价弱势近日虽然伊朗局势升温,中东地区几起油船被袭击事件影响,但油价并未走高,而是出于调整结构中。由于市场预期局势失控的可能性较低,而中美贸易问题导致的全球经济衰退风险更大,需求会持续低迷,因此油价调整压力较…...
2024/4/26 19:03:37 - 氧生福地 玩美北湖(上)——为时光守候两千年
原标题:氧生福地 玩美北湖(上)——为时光守候两千年一次说走就走的旅行,只有一张高铁票的距离~ 所以,湖南郴州,我来了~ 从广州南站出发,一个半小时就到达郴州西站了。在动车上,同时改票的南风兄和我居然被分到了一个车厢,所以一路非常愉快地聊了过来。 挺好,最起…...
2024/4/26 22:01:59 - 氧生福地 玩美北湖(中)——永春梯田里的美与鲜
原标题:氧生福地 玩美北湖(中)——永春梯田里的美与鲜一觉醒来,因为大家太爱“美”照,在柳毅山庄去寻找龙女而错过了早餐时间。近十点,向导坏坏还是带着饥肠辘辘的我们去吃郴州最富有盛名的“鱼头粉”。说这是“十二分推荐”,到郴州必吃的美食之一。 哇塞!那个味美香甜…...
2024/4/25 18:39:14 - 氧生福地 玩美北湖(下)——奔跑吧骚年!
原标题:氧生福地 玩美北湖(下)——奔跑吧骚年!让我们红尘做伴 活得潇潇洒洒 策马奔腾共享人世繁华 对酒当歌唱出心中喜悦 轰轰烈烈把握青春年华 让我们红尘做伴 活得潇潇洒洒 策马奔腾共享人世繁华 对酒当歌唱出心中喜悦 轰轰烈烈把握青春年华 啊……啊……啊 两…...
2024/4/26 23:04:58 - 扒开伪装医用面膜,翻六倍价格宰客,小姐姐注意了!
原标题:扒开伪装医用面膜,翻六倍价格宰客,小姐姐注意了!扒开伪装医用面膜,翻六倍价格宰客!当行业里的某一品项火爆了,就会有很多商家蹭热度,装逼忽悠,最近火爆朋友圈的医用面膜,被沾上了污点,到底怎么回事呢? “比普通面膜安全、效果好!痘痘、痘印、敏感肌都能用…...
2024/4/25 2:10:52 - 「发现」铁皮石斛仙草之神奇功效用于医用面膜
原标题:「发现」铁皮石斛仙草之神奇功效用于医用面膜丽彦妆铁皮石斛医用面膜|石斛多糖无菌修护补水贴19大优势: 1、铁皮石斛:自唐宋以来,一直被列为皇室贡品,铁皮石斛生于海拔1600米的悬崖峭壁之上,繁殖力差,产量极低,所以古代仅供皇室、贵族享用 2、铁皮石斛自古民间…...
2024/4/25 18:39:00 - 丽彦妆\医用面膜\冷敷贴轻奢医学护肤引导者
原标题:丽彦妆\医用面膜\冷敷贴轻奢医学护肤引导者【公司简介】 广州华彬企业隶属香港华彬集团有限公司,专注美业21年,其旗下品牌: 「圣茵美」私密荷尔蒙抗衰,产后修复 「圣仪轩」私密荷尔蒙抗衰,产后修复 「花茵莳」私密荷尔蒙抗衰,产后修复 「丽彦妆」专注医学护…...
2024/4/26 19:46:12 - 广州械字号面膜生产厂家OEM/ODM4项须知!
原标题:广州械字号面膜生产厂家OEM/ODM4项须知!广州械字号面膜生产厂家OEM/ODM流程及注意事项解读: 械字号医用面膜,其实在我国并没有严格的定义,通常我们说的医美面膜指的应该是一种「医用敷料」,也就是说,医用面膜其实算作「医疗器械」的一种,又称「医用冷敷贴」。 …...
2024/4/25 18:38:58 - 械字号医用眼膜缓解用眼过度到底有无作用?
原标题:械字号医用眼膜缓解用眼过度到底有无作用?医用眼膜/械字号眼膜/医用冷敷眼贴 凝胶层为亲水高分子材料,含70%以上的水分。体表皮肤温度传导到本产品的凝胶层,热量被凝胶内水分子吸收,通过水分的蒸发带走大量的热量,可迅速地降低体表皮肤局部温度,减轻局部皮肤的灼…...
2024/4/27 8:32:30 - 配置失败还原请勿关闭计算机,电脑开机屏幕上面显示,配置失败还原更改 请勿关闭计算机 开不了机 这个问题怎么办...
解析如下: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