ASP.NET Core 一步步搭建个人网站(6)_单页模式和优化
前言
HI,有段时间没有更新了,主要因为第一年前事情比较多,有些事得忙着张罗下;第二呢,对个人网站进行了一次大范围的优化,主要是申请的云服务器资源有限,1m的网络带宽,带上图片展示的话,打开网站的平均速度会达到20s以上,用户的体验不是很好;经过这次优化,已将访问速度控制在1s左右,整体感觉速度和用户体验提升了不少。当然,最主要的是,把网站的模式改成了单页应用模式,算得上是比较大的重构了,所以耽搁的时间比较久,请大家见谅。
那今天主要来说一下我是怎么重构之前的网站代码,更新为单页模式吧,顺便分享下个人性能优化的经验。
重构出发点和目标
之前.Net Core自动帮我们生成的网站代码,主要是多页的应用,我们定义页面的时候,引入了_layout文件,相当视图区域的模板页,那通过控制器调整页面的同时,会将整个页面包括模板页都会再次加载一遍。所以,之前的多页应用,对应我的个人应用来说,有以下问题:
- 页面导航跳转时,需要重新加载整个页面包含的css、js和html元素,云服务器带宽有限,重新加载资源有些浪费;
- 用户体验不好,在网速带宽不够的情况下,页面刷新慢,用户需要等待很长一段时间才能看到内容区域;
- 作为后台管理系统,页面布局包含导航栏,头部区域、尾部区域和内容区域,除了内容区域的视图会经常变换,其他区域不会有大的变化,却每次需要重新加载和刷新;
- 当初网站设计需要在移动端提供支持,多页应用在移动设备中页面切换的表现加载慢、不流畅、用户体验差;
现在,网页设计整体趋向于单页网站设计,但是这里我还是要强调一下,我从没说过单页模式就一定比多页模式要好,只是这对我个人网站项目来说,单页模式可能会更合适。其实2者都有很明显的优缺点,多页模式也有它的优势,比如可以很方便的做SEO,单页模式也有自己的劣势,比如得单独方案做SEO,而且开发难度相对多页会复杂些。
所以说,一切抛开具体应用去谈技术之间的好坏都是耍流氓!!!这里,我们的网站也不完全是单页模式,比如登录页面跳转等等用的还是多页,所以只能说是以单页模式为主的混合模式。
那既然我们决定要改造我们的网站为单页应用,首先定一下优化的目标吧:
- 以简单、容易和可操作的方式展示给用户,提供用户简单的线性体验;
- 整个页面有固定的导航栏,头部区域、尾部区域和变化的内容区域,实现页面片段局部刷新;
- 公共资源首次加载后,页面更新后不在重新加载;
- 选择专门的UI框架,降低单页模式的开发难度;
- 很好的响应式设计,支持移动端良好的用户体验;
引入UI路由框架
既然我们舍弃了多页模式,就不能再用微软提供的_layout模板页取渲染视图了,很方便的Razor引擎也没法再用了(这里稍微解释下,.Net Core之前版本的,是可以继续用Razor来渲染数据模型的,但是.Net Core中,会将cshtml文件一起编译成dll文件,所以cshtml文件在发布路径中是找不到的,所以路由后的url是找不到的),那选用那种UI框架,来满足单页模式应用呢?
我们理一下思路:如图,我们通过导航栏side的url地址,通过一种路由方式找到对应的html文件,然后后台加载数据,通过UI渲染,在内容区域content中显示。这里可以看出,主要要满足一是url的路由,二是数据模型的渲染。当然,满足这样需求的UI框架很多,我这里用的一种主流框架angular-ui-router(url路由,可以支持多样化视图和嵌入式视图)+angular(数据模型和UI界面双向绑定),大家也可以用别的方式,条条大道通罗马嘛!
angular-ui-router配置
本文只是简单介绍angular的使用方法,如果需要了解更多的使用方法,请参考官网文档。
首先,我们引入以下2个脚本:angular.js和angular-ui-router.js。导航菜单结构重构如下:
1 /// <summary> 2 /// 导航菜单项 3 /// </summary> 4 public class NavMenu 5 { 6 public string Name { get; set; } 7 public string TemplateUrl { get; set; } 8 public string Icon { get; set; } 9 10 /// <summary> 11 /// 子菜单 12 /// </summary> 13 public IList<NavMenu> SubNavMenus { get; set; } 14 } 15 16 /// <summary> 17 /// 左侧导航菜单视图模型 18 /// </summary> 19 public class NavBarMenus 20 { 21 public IList<NavMenu> NavMenus { get; set; } 22 }
在site.js里,做如下配置:
1 //Angular相关配置 2 var app = angular.module('app', ['ui.router']); 3 //路由配置 4 app.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) { 5 $urlRouterProvider.otherwise('/'); 6 $stateProvider.state('Home', { 7 //主页 8 url: '/', 9 templateUrl: 'App/Home/Home.html' 10 }).state('MenuManagement', { 11 //菜单管理 12 url: '/Configuration/MenuManagement', 13 templateUrl: 'App/Configuration/MenuManagement/MenuManagement.html' 14 }).state('ApiSimulator', { 15 //API模拟 16 url: '/Tools/ApiSimulator', 17 templateUrl: 'App/Tools/ApiSimulator/ApiSimulator.html' 18 }).state('SiteAnalytics', { 19 //网站分析 20 url: '/Tools/SiteAnalytics', 21 templateUrl: 'App/Tools/SiteAnalytics/SiteAnalytics.html' 22 }).state('Error', { 23 url: '/Error', 24 templateUrl: 'App/Home/Error.html' 25 }); 26 }]);
之前的嵌套菜单也需要重构,注意这里操作菜单不再用<a>标签的默认导航属性href,而是改用ui-sref属性:
1 @foreach (var navMenu in Model.NavMenus) 2 { 3 if (navMenu.SubNavMenus != null && navMenu.SubNavMenus.Any()) 4 { 5 <li class="treeview"> 6 <a href="#"> 7 <i class="fa @navMenu.Icon"></i><span>@SharedLocalizer[navMenu.Name]</span> 8 <span class="pull-right-container"> 9 <i class="fa fa-angle-left pull-right"></i> 10 </span> 11 </a> 12 <ul class="treeview-menu"> 13 @await Html.PartialAsync("_NavMenu", new NavBarMenus { NavMenus = navMenu.SubNavMenus }) 14 </ul> 15 </li> 16 } 17 else 18 { 19 <li> 20 @if (navMenu.TemplateUrl != null && navMenu.TemplateUrl.StartsWith("http")) 21 { 22 <a href="@navMenu.TemplateUrl" target="_blank"> 23 <i class="fa @navMenu.Icon"></i><span>@SharedLocalizer[navMenu.Name]</span> 24 </a> 25 } 26 else 27 { 28 <a ui-sref="@navMenu.TemplateUrl"> 29 <i class="fa @navMenu.Icon"></i><span>@SharedLocalizer[navMenu.Name]</span> 30 </a> 31 } 32 </li> 33 } 34 }
以上,我们的路由配置就可以了,点击左侧的导航菜单,angular-ui-router会自动帮我们解析,对应做部分视图更新,我们可以看到,现在整页只有内容区域部分刷新,其他区域不再会被重新加载。
angularjs数据视图双向绑定
多页模式下,我们的控制器方法返回的是View视图,即整个html页面。改造成单页模式,控制器需要返回的是数据模型的json,通过angularjs提供的数据双向绑定,可以很方便的改造,以下用菜单管理功能作为示例。
我们新增一个html视图_MenuPartial.html,作为菜单项的部分视图(相当于叶节点),可以看到节点会判断有没有子菜单,如果有子菜单,会再次引用_MenuPartial.html,实现了子菜单的嵌套:
1 <div class='dd-handle dd3-handle'></div> 2 <div class="dd3-content" ng-click="editMenu(item)"> 3 <i class="fa {{item.icon}} margin-r-5"></i>{{item.name}} 4 <span class='pull-right'> 5 <a style="cursor: pointer" 6 ng-click="deleteMenu(item,$event);$event.stopPropagation();"> 7 <i class="fa fa-minus text-success margin-r-5"></i> 8 </a> 9 </span> 10 </div> 11 <ol class='dd-list' ng-if="item.subNavMenus"> 12 <li class="dd-item dd3-item" 13 ng-repeat="item in item.subNavMenus" 14 ng-include="'App/Configuration/MenuManagement/_MenuPartial.html'"></li> 15 </ol>
有了菜单项模板,接下来重构一下菜单管理页面MenuManagement.html,控制器指定MenuManagementController:
1 <section class="content-header"> 2 <h1> 3 菜单管理 4 <small>Preview</small> 5 </h1> 6 <ol class="breadcrumb"> 7 <li><a href="#"><i class="fa fa-home"></i></a></li> 8 <li>后台管理</li> 9 <li class="active">菜单管理</li> 10 </ol> 11 </section> 12 <section class="content"> 13 <div class="box" ng-controller="MenuManagementController"> 14 <div class="box-body row"> 15 <div class="col-md-7"> 16 <div class="dd"> 17 <ol class='dd-list'> 18 <li class="dd-item dd3-item" ng-repeat="item in navMenus" 19 ng-include="'App/Configuration/MenuManagement/_MenuPartial.html'"></li> 20 </ol> 21 </div> 22 </div> 23 <div class="col-md-5"> 24 <div class="box box-solid"> 25 <div class="box-header"> 26 <i class="fa fa-bars"></i> 27 <h3 class="box-title">编辑菜单</h3> 28 </div> 29 <form class="form"> 30 <div class="form-group"> 31 <label for="name">菜单名称:</label> 32 <input class="form-control" type="text" id="name" 33 ng-model="selectedMenu.name"> 34 </div> 35 <div class="form-group"> 36 <label for="icon">菜单图标:</label> 37 <input class="form-control" type="text" id="icon" 38 ng-model="selectedMenu.icon"> 39 </div> 40 <div class="form-group"> 41 <label for="templateUrl">菜单路径:</label> 42 <input class="form-control" type="text" id="templateUrl" 43 ng-model="selectedMenu.templateUrl"> 44 </div> 45 <div class="pull-right"> 46 <a ng-click="addMenu()" 47 class="btn btn-social btn-instagram margin-r-5"> 48 <i class="fa fa-plus margin-r-5"></i>新增 49 </a> 50 <a ng-click="save(navMenus)" 51 ng-disabled="submitting" 52 class="btn btn-social btn-instagram"> 53 <i class="fa fa-save margin-r-5"></i>保存 54 </a> 55 </div> 56 </form> 57 </div> 58 </div> 59 </div> 60 </div> 61 </section>
最后,我们实现MenuManagementController控制器逻辑:
1 app.controller('MenuManagementController', ['$scope', function ($scope) { 2 //编辑菜单 3 $scope.editMenu = function (item) { 4 $scope.selectedMenu = item; 5 }; 6 //新增菜单 7 $scope.addMenu = function () { 8 var newMenu = { name: "<新增菜单>", icon: "fa-circle-o", templateUrl: "" }; 9 $scope.navMenus.push(newMenu); 10 $scope.selectedMenu = newMenu; 11 }; 12 //删除菜单 13 $scope.deleteMenu = function (item, $event) { 14 $.confirm({ 15 icon: 'fa fa-info', 16 title: '删除', 17 content: '确认删除菜单[' + item.name + ']?', 18 type: 'dark', 19 closeIcon: true, 20 typeAnimated: true, 21 buttons: { 22 confirm: { 23 text: '确定', 24 btnClass: 'btn-dark', 25 action: function () { 26 $($event.target).closest('li').remove(); 27 } 28 }, 29 cancel: { 30 text: '取消', 31 btnClass: 'btn-dark' 32 } 33 } 34 }); 35 }; 36 //保存菜单 37 $scope.save = function (menus) { 38 $scope.submitting = true; 39 $.ajax({ 40 type: 'POST', 41 url: '/Configuration/MenuManagement/Save', 42 data: {}, 43 success: function (data) { 44 //TODO: 45 }, 46 complete: function () { 47 $scope.submitting = false; 48 $scope.$apply(); 49 } 50 }); 51 } 52 $scope.selectedMenu = {}; 53 //加载菜单 54 $.ajax({ 55 type: 'GET', 56 url: '/Configuration/MenuManagement/GetMenus', 57 success: function (data) { 58 $scope.navMenus = data; 59 $scope.$apply(); 60 setTimeout(function () { 61 $('.dd').nestable(); 62 }, 100); 63 } 64 }); 65 }]);
简单说下大体的加载流程:用户点击左侧导航菜单-->angular-ui-router会根据咱们site.js中的路由配置,找到对应的MenuManagement.html页面进行局部刷新-->根据视图中的控制器MenuManagementController,执行对应控制器中的逻辑并返回数据,由angularjs绑定到视图-->内容区域获取到绑定后的视图,在内容区域显示。
最终菜单管理页面效果:
网站性能优化
我们已经将网站改造成单页应用,用户体验已经有了很大的提高,但是还是有许多值得优化的地方。由于云服务器提供的带宽非常有限,有时资源和图片下载稍微有点慢的情况,会导致整个体验会非常不好。当然,优化网站的手段非常多,实际情况往往比较复杂,那针对本人的网站,这里列出我自己此次实际过程中采取的优化方法,跟大家分享下。
引入CDN资源
之前我们访问css/js资源,我们都是直接去=访问的是网站服务器,这样的话,在带宽不足的情况下,下载特别慢,另外也占用了其他html元素和图片下载时间,比如bootstrap.min.css文件,可能就需要几秒的下载时间,一但css/js文件多的情况下,整体页面下载经常超过20s。
那像这种经常使用的外部库文件,现在有许多免费的前端开源项目 CDN 加速服务,可以提供我们稳定、快速访问这些库文件的功能,我们直接引用这些CDN服务即可:
1 <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> 2 <script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script> 3 <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 4 <script src="https://cdn.bootcss.com/angular.js/1.6.8/angular.min.js"></script> 5 <script src="https://cdn.bootcss.com/angular-ui-router/1.0.3/angular-ui-router.min.js"></script> 6 <script src="https://cdn.bootcss.com/spin.js/2.3.2/spin.min.js"></script> 7 <script src="https://cdn.bootcss.com/Ladda/1.0.5/ladda.min.js"></script> 8 <script src="https://cdn.bootcss.com/angular-ladda/0.4.3/angular-ladda.min.js"></script> 9 <script src="https://cdn.bootcss.com/jquery_lazyload/1.9.7/jquery.lazyload.min.js"></script> 10 <script src="https://cdn.bootcss.com/Nestable/2012-10-15/jquery.nestable.min.js"></script> 11 <script src="https://cdn.bootcss.com/jquery-confirm/3.3.2/jquery-confirm.min.js"></script> 12 <script src="https://cdn.bootcss.com/Chart.js/2.7.1/Chart.min.js"></script> 13 <script src="https://cdn.bootcss.com/jquery-sparklines/2.1.2/jquery.sparkline.min.js"></script> 14 <script src="https://cdn.bootcss.com/moment.js/2.20.0/moment.min.js"></script> 15 <script src="https://cdn.bootcss.com/moment.js/2.20.0/locale/zh-cn.js"></script> 16 <script src="https://cdn.bootcss.com/bootstrap-daterangepicker/2.1.27/daterangepicker.min.js"></script> 17 <script src="https://cdn.bootcss.com/jQuery-slimScroll/1.3.8/jquery.slimscroll.min.js"></script> 18 <script src="https://cdn.bootcss.com/fastclick/1.0.6/fastclick.min.js"></script> 19 <script src="https://cdn.bootcss.com/iCheck/1.0.2/icheck.min.js"></script> 20 <script src="https://cdn.bootcss.com/pace/1.0.2/pace.min.js"></script>
1 <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" /> 2 <link rel="stylesheet" href="https://cdn.bootcss.com/Ladda/1.0.5/ladda-themeless.min.css" /> 3 <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-confirm/3.3.2/jquery-confirm.min.css" /> 4 <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css"> 5 <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap-daterangepicker/2.1.27/daterangepicker.min.css" /> 6 <link rel="stylesheet" href="https://cdn.bootcss.com/ionicons/4.0.0-9/css/ionicons.min.css"> 7 <link rel="stylesheet" href="https://cdn.bootcss.com/iCheck/1.0.2/skins/all.css" /> 8 <link rel="stylesheet" href="https://fonts.cat.net/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic" />
引入后,我们监测下网络传输,可以看到,现在访问这些资源直接从CDN服务器中去取,大大提高了访问速度:
使用对象存储服务
网站难免包含一些图片或稍微大一点的资源,几十kb到几M。没有缓存情况下,访问这些资源,我那可怜的带宽基本就占用差不多了,打开这种界面,经常就卡死或超时很严重。其实国内外很多云服务器服务商已经提供了这种解决方案,比如云存储服务。您可以将任意数量和形式的非结构化数据存入对象存储服务,并对数据进行管理和处理,满足各类场景的存储需求。
我们将图片存储到申请的对象存储服务中,这样我们访问网站图片的时候,就可以直接访问云存储服务器。再来看下访问速度,可以明显看出,现在图片下载速度控制在几百ms内,比之前几秒甚至十几秒才能下载一张图片,有了很大的性能提高。
图片延迟加载
相对来说,一般图片算是比较大的文件,往往网页传输过程中,占了很大的带宽,如果一个页面图片比较多,出现图片集中加载的时候,网站整体感觉加载偏慢。
我们考虑用图片延迟加载的方法,只有滚动条快要滚动到图片位置时,才去加载对应的图片,否则暂时不需要加载图片,因为视图区域尚未存在改图片,即使加载了也看不到。
这里我们需要引入jquery.lazyload.min.js,在需要延迟加载的图片,实现对应的代码: $("img.lazyload").lazyload();
监测一下网络传输,刚开始未加载图片,发现只有滚动条到达图片内容区域时,才会实时加载图片,相对来说,它帮助减轻服务器负载。
合并压缩资源
为了合理的管理自己的代码,我们可以将css和js文件打包并压缩,这样我们可以将所有的css或js压缩成1个文件,文件体积也比原先小很多。
.Net Core已经提供了合并和压缩资源的工具,我们在程序包管理控制台,安装BundlerMinifier工具:Install-Package BundlerMinifier.Core -Version 2.6.362
安装完成后,我们配置根目录下的bundleconfig.json,关于BundlerMinifier的使用方法和配置说明,参考官方文档:
1 [ 2 { 3 "outputFileName": "wwwroot/dist/bundles.min.css", 4 // An array of relative input file paths. Globbing patterns supported 5 "inputFiles": [ 6 "wwwroot/css/skins/_all-skins.css", 7 "wwwroot/css/adminlte.css", 8 "wwwroot/css/site.css" 9 ] 10 }, 11 { 12 "outputFileName": "wwwroot/dist/bundles.min.js", 13 "inputFiles": [ 14 "wwwroot/js/adminlte.js", 15 "wwwroot/js/site.js", 16 "wwwroot/App/**/*.js" 17 ], 18 // Optionally specify minification options 19 "minify": { 20 "enabled": true, 21 "renameLocals": true 22 }, 23 // Optionally generate .map file 24 "sourceMap": false 25 } 26 ]
编译代码,可以看到会自动将配置的所有css和js打包:
这里注意一个小细节,angular依赖注入的js文件,必须严格按照标准格式来写,否则的话,打包后会执行报错。
我们可以设置在开发环境下,用原始的css/js资源,方便调试,发布时用打包后的资源
1 <environment names="Development"> 2 <script>window.environment = 'Development'</script> 3 <script src="~/js/adminlte.js"></script> 4 <script src="~/js/site.js"></script> 5 <script src="~/App/Home/Home.js"></script> 6 <script src="~/App/Home/Error.js"></script> 7 <script src="~/App/Configuration/MenuManagement/MenuManagement.js"></script> 8 <script src="~/App/Tools/ApiSimulator/ApiSimulator.js"></script> 9 <script src="~/App/Tools/SiteAnalytics/SiteAnalytics.js"></script> 10 </environment> 11 <environment names="Production"> 12 <script>window.environment = 'Production'</script> 13 <script src="~/dist/bundles.min.js" asp-append-version="true"></script> 14 </environment>
我们再监测下网站传输,可以看到,打包后的文件大小,较之前压缩了很多,很大提高了传输效率。
总结
我们最后看下优化后的效果,主页在没有缓存情况下,2s内就完成了加载,实际用户体验良好。 我们的单页模式改造和性能优化,顺利完成!
转载于:https://www.cnblogs.com/lizzie-xhu/p/8378256.html
如若内容造成侵权/违法违规/事实不符,请联系编程学习网邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
相关文章
- 分批次插入mysql:一次性插入mysql两万以上数据造成数据库假死
强烈推荐一个大神的人工智能的教程:http://www.captainbed.net/zhanghan 项目距离上线的日期越来越近了,需要规范一下数据库中的数据,就需要从前端页面上导入系统数据到mysql数据库。导入3万数据,期间会有校验,最后分别插入到四张表中,本库插入3张表,云平台插入一张…...
2024/5/1 23:00:30 - 关于结合SpringBoot使用frontend-maven-plugin前端插件以及遇到的坑
导入依赖 <plugin><groupId>com.github.eirslett</groupId><artifactId>frontend-maven-plugin</artifactId><vers...
2024/4/21 15:05:45 - 解决npm install卡住不动的小尴尬
npm install卡顿问题记录 遇到的问题 npm install -g angular/cli 安装angular cli工具时,发现进度条一直卡住不动,相信很多朋友也遇到过。原因应该是国内的网络连接npm速度较慢,甚至很多东西都无法下载安装。那么如何解决这个问题呢…...
2024/4/21 15:05:45 - npm verdaccio_使用Verdaccio托管,发布和管理私有npm软件包
npm verdaccioPanayiotispvgrVelisarakos和Jurgen Van de Moere对通过Verdaccio托管,发布和管理私人npm软件包进行了同行评审。 感谢所有SitePoint的同行评审员使SitePoint内容达到最佳状态! 如您所知,事实上JavaScript软件包管理器是npm&am…...
2024/4/21 15:05:43 - 解决npm install卡住不动
方案一:安装cnpm镜像 这个是比较常用的方法,我首先也是使用了这个方法。cnpm的安装方法,参考http://npm.taobao.org/ 推荐 npm install -g cnpm --registryhttps://registry.npm.taobao.orgcmd输入以上命令就可以了,然后输入,安…...
2024/5/2 1:12:44 - 上海九院 双眼皮 周六
...
2024/4/20 12:28:51 - 做双眼皮跟开眼角多少钱
...
2024/5/2 0:35:56 - AngularJS-1
框架:优秀的可以重复使用的代码,单独提取并封装,提高代码的服用了、开发速度,并保证良好的浏览器的兼容性。angularJS、phoneGap、Ionic、ZeptoJS、React。。。判断框架:①它适用的场景 ②如何使用 ③遇到了问题怎么解…...
2024/4/20 5:40:20 - 搭前端框架要注意的东东
AngularJs诞生于2009年,最初由Misko Hevery和Adam Abrons开发,后来成为Google的项目。AngularJS 是一个为动态WEB应用设计的结构框架。它能让你使用HTML作为模板语言,通过扩展HTML的语法,让你能更清楚、简洁地构建你的应用组件。它…...
2024/5/1 1:56:15 - 切双眼皮后吃什么消炎药
...
2024/4/20 15:06:34 - 割双眼皮后吃三七片和利君沙
...
2024/4/28 0:35:43 - 范巨峰滨州丽都整形死鱼眼是双眼皮拆了留下小疤痕
...
2024/5/2 2:50:13 - 双眼皮第十五天抻了一下
...
2024/4/20 15:06:37 - 割了双眼皮鼻梁没了
...
2024/4/21 15:05:42 - 九院 双眼皮 疤痕
...
2024/4/21 15:05:41 - 天津做双眼皮伊美尔和美莱哪个好
...
2024/4/21 15:05:39 - 埋线双眼皮 术后几天 可以吃火锅
...
2024/4/21 15:05:38 - angular cli安装
1.安装Node.jsURL:https://nodejs.org/en/download/选择合适的版本进行安装2.安装AngularJS CLIangular是用typescript编写的,所以先安装typescript,再安装angularjs-clinpm install -g typescript typingsnpm install -g angular-cli --ignore-scriptsn…...
2024/4/30 19:37:55 - 关于OpenLDAPAdmin管理页面提示“This base cannot be created with PLA“问题. Strong Authentication Required问题...
经过查询,最终总结和处理如下: 1、首先需要在/etc/openldap/目录下,创建一个base.ldif文件,如下所示:2、在base.ldif文件中,写入如下信息,为创建初始化根节点做准备工作:3、执行ldapadd -f base.ldif -x -D cn=Manager,dc=DouBi,dc=Ren –W 输入之前配置OpenLDAP的…...
2024/4/21 15:05:37 - 做双眼皮一周后的照片
...
2024/4/23 3:56:43
最新文章
- Qt Creator导入第三方so库和jar包——Qt For Android
前言 之前了解了在Android Studio下导入so库和jar包,现在实现如何在Qt上导入so库和jar包。 实现 下面是我安卓开发(需调用安卓接口的代码)的目录(图1),此目录结构和原生态环境(Android Studi…...
2024/5/2 3:07:48 - 梯度消失和梯度爆炸的一些处理方法
在这里是记录一下梯度消失或梯度爆炸的一些处理技巧。全当学习总结了如有错误还请留言,在此感激不尽。 权重和梯度的更新公式如下: w w − η ⋅ ∇ w w w - \eta \cdot \nabla w ww−η⋅∇w 个人通俗的理解梯度消失就是网络模型在反向求导的时候出…...
2024/3/20 10:50:27 - 数据可视化-Python
师从黑马程序员 Json的应用 Json的概念 Json的作用 Json格式数据转化 Python数据和Json数据的相互转化 注:把字典列表变为字符串用dumps,把字符串还原回字典或列表用loads import json#准备列表,列表内每一个元素都是字典,将其转化为Json …...
2024/5/1 14:06:00 - 大数据主要组件HDFS Iceberg Hadoop spark介绍
HDFSIceberghadoopspark HDFS 面向PB级数据存储的分布式文件系统,可以存储任意类型与格式的数据文件,包括结构化的数据以及非结构化的数据。HDFS将导入的大数据文件切割成小数据块,均匀分布到服务器集群中的各个节点,并且每个数据…...
2024/5/1 3:28:09 - 【外汇早评】美通胀数据走低,美元调整
原标题:【外汇早评】美通胀数据走低,美元调整昨日美国方面公布了新一期的核心PCE物价指数数据,同比增长1.6%,低于前值和预期值的1.7%,距离美联储的通胀目标2%继续走低,通胀压力较低,且此前美国一季度GDP初值中的消费部分下滑明显,因此市场对美联储后续更可能降息的政策…...
2024/5/1 17:30:59 - 【原油贵金属周评】原油多头拥挤,价格调整
原标题:【原油贵金属周评】原油多头拥挤,价格调整本周国际劳动节,我们喜迎四天假期,但是整个金融市场确实流动性充沛,大事频发,各个商品波动剧烈。美国方面,在本周四凌晨公布5月份的利率决议和新闻发布会,维持联邦基金利率在2.25%-2.50%不变,符合市场预期。同时美联储…...
2024/4/30 18:14:14 - 【外汇周评】靓丽非农不及疲软通胀影响
原标题:【外汇周评】靓丽非农不及疲软通胀影响在刚结束的周五,美国方面公布了新一期的非农就业数据,大幅好于前值和预期,新增就业重新回到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/4/30 18:21:48 - 【外汇早评】日本央行会议纪要不改日元强势
原标题:【外汇早评】日本央行会议纪要不改日元强势近两日日元大幅走强与近期市场风险情绪上升,避险资金回流日元有关,也与前一段时间的美日贸易谈判给日本缓冲期,日本方面对汇率问题也避免继续贬值有关。虽然今日早间日本央行公布的利率会议纪要仍然是支持宽松政策,但这符…...
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/4/25 18:39:16 - 【外汇早评】美伊僵持,风险情绪继续升温
原标题:【外汇早评】美伊僵持,风险情绪继续升温昨日沙特两艘油轮再次发生爆炸事件,导致波斯湾局势进一步恶化,市场担忧美伊可能会出现摩擦生火,避险品种获得支撑,黄金和日元大幅走强。美指受中美贸易问题影响而在低位震荡。继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/4/30 9:43:22 - 械字号医用眼膜缓解用眼过度到底有无作用?
原标题:械字号医用眼膜缓解用眼过度到底有无作用?医用眼膜/械字号眼膜/医用冷敷眼贴 凝胶层为亲水高分子材料,含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