簡單使用: 2022

2022年10月14日星期五

.Net Core HTTP Error 500.19 - Internal Server Error

.Net Core在IIS上的錯誤

HTTP 錯誤 500.19 – 內部伺服器錯誤
HRESULT: 0x8007000d

1.web.config有問題
2.Hosting Bundle有問題(裝完記得開機)

參考資料
開啟 IIS 網頁時出現「HTTP Error 500.19 - Internal Server Error」錯誤

2022年10月5日星期三

Angular 建立Module+Component+Input(22)

建立Module且更新app.module.ts

ng g m news --module=app

到news module資料夾

cd src\app\news

建立component

ng g c news-list --module=news

修改news.module.ts加入exports

@NgModule({
  declarations: [
    NewslistComponent
  ],
  imports: [
    CommonModule
  ],
  exports:[NewslistComponent]
})

建立list底下的component

ng g c news-head --module=news
ng g c news-body --module=news

news-list html部分

<div id="foridis{{idx}}" *ngFor="let item of data;let idx=index">
  <app-news-head [item]="item"></app-news-head>
  <app-news-body [item]="item"></app-news-body>
</div>

news-list ts部分

data = [ { "id": 1, "href": "http://www.golgle.com.tw", "title": "Google", "Content": "

Google是總部位於美國加州山景城的跨國科技公司，為Alphabet的子公司，業務範圍涵蓋網際網路廣告、網際網路搜尋、雲端運算等領域，開發並提供大量基於網際網路的產品與服務，其主要利潤來自Ads等廣告服

", "href-s": "https://www.google.com.tw" }, { "id": 2, "href": "http://tw.yahoo.com", "title": "雅虎", "Content": "

Yahoo奇摩是台灣入口網站之一，由「香港商雅虎資訊股份有限公司台灣分公司」代表營運。該網站於2001年10月雅虎台灣與奇摩站合併後成立，網址續用雅虎台灣的「tw.yahoo.com」

", "href-s": "https://tw.yahoo.com", }, { "id": 3, "href": "http://www.microsoft.com/zh-tw", "title": "微軟", "Content": "

微軟是美國的一家跨國電腦科技公司，公司於1975年由比爾·蓋茲與保羅·艾倫創立，以研發、製造、授權及提供廣泛的電腦軟體服務為主。坐標為47.642229°N 122.136934°W

", "href-s": "https://www.microsoft.com/zh-tw", } ];

news-head html部分

<div>
  <a [href]="item.href" [title]="item.id">{{ item.title}}</a><br />
  <a [href]="item['href-s']">{{ item.title}}-s</a>
</div>

news-head ts部分，@Input()重點

import { Component, OnInit ,Input} from '@angular/core';

@Component({
  selector: 'app-news-head',
  templateUrl: './news-head.component.html',
  styleUrls: ['./news-head.component.css']
})
export class NewsHeadComponent implements OnInit {
  @Input()
  item: any;

  constructor() { }

  ngOnInit(): void {
  }
}

news-body html部分

<div>
  <div [innerHTML]="item.Content">
  </div>
  <pre>
  {{item.Content|json}}
</pre>
</div>

news-body ts部分，@Input()重點

import { Component, OnInit ,Input} from '@angular/core';

@Component({
  selector: 'app-news-body',
  templateUrl: './news-body.component.html',
  styleUrls: ['./news-body.component.css']
})
export class NewsBodyComponent implements OnInit {
  @Input()
  item: any;

  constructor() { }

  ngOnInit(): void {
  }

}

參考資料
1.保哥的Angular 開發實戰：從零開始
2.Angular官網

2022年10月4日星期二

Angular ?.安全導覽運算子(Safe Navigation Operator)(21)

目前使用Angualr 14時好像就內含了這功能無須額外寫
html部分

<div id="foridis{{idx}}" *ngFor="let item of data;let idx=index">
  <div>
    <a [href]="item.href" [title]="item.id">{{ item.title}}</a><br />
    <a [href]="item['href-s']">{{ item.sub?.xxx}}</a><br />
    <a [href]="item['href-s']">{{ item.sub?.yyy}}</a><br />
    <div [innerHTML]="item.Content">
    </div>
  </div>
</div>

ts部分

data = [ { "id": 1, "href": "http://www.golgle.com.tw", "title": "Google", "Content": "

", "href-s": "https://www.google.com.tw", "sub": { "xxx": "xxx1", } }, { "id": 2, "href": "http://tw.yahoo.com", "title": "雅虎", "Content": "

", "href-s": "https://tw.yahoo.com", "sub": { "yyy": "yyy2" } }, { "id": 3, "href": "http://www.microsoft.com/zh-tw", "Content": "

", "href-s": "https://www.microsoft.com/zh-tw", "sub": { "xxx": "xxx3", "yyy": "yyy3" } } ];

參考資料
1.保哥的Angular 開發實戰：從零開始
2.Angular官網

Angular |SlicePipe(20)

html部分

 <div id="foridis{{idx}}" *ngFor="let item of data|slice:1;let idx=index">
  <div>
    <p>
      {{item.Content|slice:0:20}}
    </p>
    <p>
      {{item.Content|slice:-20:-1}}
    </p>
    <p>
      {{item.Content|slice:-20}}
    </p>    
  </div>
</div>

ts部分

data = [ { "id": 1, "href": "http://www.golgle.com.tw", "title": "Google", "Content": "

", "href-s": "https://www.google.com.tw" }, { "id": 2, "href": "http://tw.yahoo.com", "title": "雅虎", "Content": "

", "href-s": "https://tw.yahoo.com", }, { "id": 3, "href": "http://www.microsoft.com/zh-tw", "title": "微軟", "Content": "

", "href-s": "https://www.microsoft.com/zh-tw", } ];

參考資料
1.保哥的Angular 開發實戰：從零開始
2.Angular官網

Angular |JsonPipe(19)

html部分

<div id="foridis{{idx}}" *ngFor="let item of data|slice:1;let idx=index">
  <pre>
{{item|json}}
</pre>
</div>

ts部分

data = [ { "id": 1, "href": "http://www.golgle.com.tw", "title": "Google", "Content": "

", "href-s": "https://www.google.com.tw" }, { "id": 2, "href": "http://tw.yahoo.com", "title": "雅虎", "Content": "

", "href-s": "https://tw.yahoo.com", }, { "id": 3, "href": "http://www.microsoft.com/zh-tw", "title": "微軟", "Content": "

", "href-s": "https://www.microsoft.com/zh-tw", } ];

參考資料
1.保哥的Angular 開發實戰：從零開始
2.Angular官網

2022年10月3日星期一

Angular |DecimalPipe(18)

html部分

  <p>
    {{pi | number}}
  </p>
  <p>
    {{pi | number:'4.1-5'}}-4.1-5=整數出現四位、小數點至少一位、小數最多五位
  </p>
  <p>
    minIntegerDigits.minFractionDigits-maxFractionDigits
    <br />
    minIntegerDigits:小數點前的最小整數位數。默認為1<br />
    minFractionDigits: 小數點後的最小位數。默認為0<br />
    maxFractionDigits:小數點後的最大位數。默認值為3<br />
  </p>

ts部分

  pi: number = 3.14159265359;

參考資料
1.保哥的Angular 開發實戰：從零開始
2.Angular官網

Angular |UpperCasePipe、|LowerCasePipe(17)

html部分

<p>{{mStr|uppercase}}-uppercase(轉大寫)</p>
<p>{{mStr|lowercase}}-lowercase(轉小寫)</p>

ts部分

 mStr = "aBcDe";

參考資料
1.保哥的Angular 開發實戰：從零開始
2.Angular官網

Angular |DatePipe(16)

更多格式Angular DatePipe
html部分

日期物件
<p>{{mNow|date:'medium' }}</p>
<p>{{mNow|date:'yyyy-MM-dd' }}</p>
字串物件
<p>{{mNows|date:'medium' }}</p>
<p>{{mNows|date:'yyyy-MM-dd' }}</p>
格林威治時間+小時
<p>{{mNow|date:'yyyy-MM-dd HH:mm:ss' :'+0800'}}</p>

ts部分

  mNow = Date.now();
  mNows = '2022-09-11 12:00:12';

參考資料
1.保哥的Angular 開發實戰：從零開始
2.Angular官網
3.Angular DatePipe

2022年9月29日星期四

Angular [ngSwitch]、*ngSwitchCase、ng-container(14)

html部分

<h5 class="btn-primary btn" (click)="CountPlus()">[ngSwitch]</h5>
<ng-container [ngSwitch]="count % 3">
  <ng-container *ngSwitchCase="0">
    <p>餘數0</p>
  </ng-container>
  <ng-container *ngSwitchCase="1">
    <p>餘數1</p>
  </ng-container>
  <ng-container *ngSwitchCase="2">
    <p>餘數2</p>
  </ng-container>
</ng-container>

ts部分

  count = 1;
  CountPlus() {
    this.count++;
  }

參考資料
1.保哥的Angular 開發實戰：從零開始
2.Angular官網

Angular *ngFor(15)

html部分

<div id="foridis{{idx}}" *ngFor="let item of data;let idx=index">
  <div>
    <a [href]="item.href" [title]="item.id">{{ item.title}}</a><br />
    <a [href]="item['href-s']">{{ item.title}}-s</a>
    <div [innerHTML]="item.Content">
    </div>
  </div>
</div>

ts部分

 data = [
    {
      "id": 1,
      "href": "http://www.golgle.com.tw",
      "title": "Google",
      "Content": "<p>Google是總部位於美國加州山景城的跨國科技公司，為Alphabet的子公司，業務範圍涵蓋網際網路廣告、網際網路搜尋、雲端運算等領域，開發並提供大量基於網際網路的產品與服務，其主要利潤來自Ads等廣告服</p>",
      "href-s": "https://www.google.com.tw"
    },
    {
      "id": 2,
      "href": "http://tw.yahoo.com",
      "title": "雅虎",
      "Content": "<p>Yahoo奇摩是台灣入口網站之一，由「香港商雅虎資訊股份有限公司台灣分公司」代表營運。該網站於2001年10月雅虎台灣與奇摩站合併後成立，網址續用雅虎台灣的「tw.yahoo.com」</p>",
      "href-s": "https://tw.yahoo.com",
    },
    {
      "id": 3,
      "href": "http://www.microsoft.com/zh-tw",
      "title": "微軟",
      "Content": "<p>微軟是美國的一家跨國電腦科技公司，公司於1975年由比爾·蓋茲與保羅·艾倫創立，以研發、製造、授權及提供廣泛的電腦軟體服務為主。坐標為47.642229°N 122.136934°W</p>",
      "href-s": "https://www.microsoft.com/zh-tw",
    }
  ];

參考資料
1.保哥的Angular 開發實戰：從零開始
2.Angular官網

2022年9月28日星期三

Angular *ngIf(13)

html部分

<button class="btn-primary btn" (click)="CountPlus()">點我點我</button>

<p *ngIf="count % 2 == 1">
  {{count}}  以下是另一個Directives，被移掉後再回來就不再是原本的component，可用ngStyle那個component來測試以下
  <br />
  <app-attribute-directives></app-attribute-directives>
</p>

ts部分

 count = 1;

  CountPlus() {
    this.count++;
  }

參考資料
1.保哥的Angular 開發實戰：從零開始
2.Angular官網

2022年9月27日星期二

Angular [ngClass](12)

html部分

<h5 (click)="CountPlus()">ngClass</h5>
<p [ngClass]="{'backsp' : count % 2 == 1}">
  {{count}}
</p>
<p [class.backsp]="count % 2 == 1">
  {{count}}
</p>

ts部分

count = 1;

  CountPlus() {
    this.count++;
 }

css部分

.backsp{
    background-color:aqua;
}

參考資料
1.保哥的Angular 開發實戰：從零開始
2.Angular官網

Angular [ngStyle](11)

html部分

<h5 (click)="CountPlus()">ngStyle</h5>

<p [ngStyle]="{'font-size': (count * 2) + 'px'}">
  {{count}}
</p>
<p [ngStyle]="getStyle()">
  {{count}}
</p>
<p [style.font-size]="(count * 2) + 'px'" [style.color]="'blue'">
  {{count}}
</p>

ts部分

  count = 0;

  CountPlus() {
    this.count++;
  }

  getStyle() {
   return { 'font-size': ( this.count * 2) + 'px' }
  }

參考資料
1.保哥的Angular 開發實戰：從零開始
2.Angular官網

2022年9月22日星期四

Angular #範本參考變數(Template Reference Variables)(10)

使用在Template中
html部分

  <input type="text" [(ngModel)]="title" #inputTxt />
  <button (click)="ChangeTitle()">點我</button>
  目前文字:{{inputTxt.value}},目前字數:{{inputTxt.value.length}}

ts部分

  title = "123";
  ChangeTitle() {
    this.title = "被點了";
  }

使用在directive中
承上面程式碼再另外開新增一個Template
然後加入上面的Template

 <app-template-reference-variables #tfvTemp></app-template-reference-variables>
 <button (click)="tfvTemp.title = '被外面的點了'">被外面的點了</button>;

點被外面的點了也可變動原本Template的屬性
參考資料
1.保哥的Angular 開發實戰：從零開始
2.Angular官網

2022年9月19日星期一

Angular Virtual Studio 2022 ng generate component

Could not find an NgModule. Use the skip-import option to skip importing in NgModule.

因為vs2022如果是開.net core版本會是app.module.ts及app.service.module.ts兩個，所以兩個module以上所以必須指定module

ng g c firstapp --module=app

參考來源
Could not find an NgModule. Use the skip-import option to skip importing in NgModule.
保哥

Angular Virtual Studio 2022 Install Angular CLI

Angular終於可以在Virtual Studio上直接開發不需再使用VS Code
新增專案時有兩種
1.Angular(前端) + .Net Core(後端API)
2.純前端Angular

這時在vs 2022上輸入

ng version

都是沒用的
1.先安裝node.js如果在安裝VS2022時有勾選就可忽略
2.在專案上右鍵 > 在終端機中開啟 > 選擇開發人員命令提示字元 > 輸入

npm install @angular/cli

進行安裝，再輸入ng version有執行表示安裝完成
特別注意以上操作要在ClinetApp底下資料夾

2022年9月14日星期三

Visual Studio 2022開啟2019出現404

最近使用vs2022開啟2019後跑專案網頁都會出現404，
後來自己測試修改許多地方
最後修改了port後順利執行

2022年8月15日星期一

ssls.com 憑證流程Windows +DNS驗證(圖示版)

目前憑證效期都只有一年所以會常常用
今天看了上次的做法因沒寫得很仔細，所以又多花了很多時間重新研究
這次做成圖片版的希望明年不用花那麼多時間
下列方法新買的跟舊的均可使用
1-1.到ssls.com網站後點選MY SSL至下圖後點選REISSUE(新購買可能不一樣)

1-2.或是點選REACTIVATE(2023新增)，操作後直接跳3

2.點選ONWARDS

3.選擇Use my CSR 然後選擇Windows ,將CREATE CSR...內容文字複製起來

4.到主機上打開命令提示字元(CMD)管理員執行，點確定

5.完成後會出現Begin NNEW至END NEW,將內容複製起來

6.回到網頁中貼在ENTER CSR下方框框後點選ONWARDS

7.選擇您的驗證方式，個人覺得EMAIL跟DNS蠻方便的，就看您有哪種權限

8.使用DNS驗證(Create a DNS record)，點選上面選MY SSL，點選GET CNAME

9.在自己的DNS上面新增SSLS.com給的值

10.等待驗證秒數

11.下載SSL檔案

12.會有三個檔案ca-bundle、crt、p7b

13.將三個檔案放在主機中，開啟IIS點選伺服器憑證，點選完成憑證要求，選擇.crt檔

14.完成憑證，如果關掉IIS後再開啟憑證，如果消失了代表沒成功可能要重做看看

2022年6月21日星期二

Javascript 上個月、本月、下個月

參考了網路寫了一個可直接設定第一天跟最後一天

//上個月
$(document).on('click', '#LastMonth', function () {                        
	SetLastAndFirstDate($('#fromdate').val(), -1);
})
//本月
$(document).on('click', '#ThisMonth', function () {            
	SetLastAndFirstDate($('#fromdate').val(), 0);
})
//下個月
$(document).on('click', '#NextMonth', function () {            
	SetLastAndFirstDate($('#fromdate').val(), +1);
})

function SetLastAndFirstDate(nowday, tomonth) {
	var date = new Date(nowday);

	if (tomonth == 0)
		var date = new Date();
	
	var firstDay = new Date(date.getFullYear(), date.getMonth() + (0 + tomonth), 1);
   var lastDay = new Date(date.getFullYear(), date.getMonth() + (1+tomonth), 0);
   $('#fromdate').val(formatDate(firstDay));//設定第一天
   $('#todate').val(formatDate(lastDay));//設定最後一天
   
}       

function formatDate(date) {
	var d = new Date(date),
	month = '' + (d.getMonth() + 1),
	day = '' + d.getDate(),
	year = d.getFullYear();
 	if (month.length < 2)
		month = '0' + month;
	if (day.length < 2)
	day = '0' + day;
	return [year, month, day].join('-');
}

參考來源
Format JavaScript date as yyyy-mm-dd
取得當月第一天和最後一天

2022年2月10日星期四

c# ViewModel To Model

這方法也是今天才發現
但真的還蠻實用的
如下兩個Class，StaffViewModel繼承了Staff

public class Staff
{
    public int id { get; set; }
    public string name { get; set; }
}

public class StaffViewModel :Staff
{ 
    public int departid { get; set; }
}

如果後端存檔時前端回傳是StaffViewModel但存檔只需要Staff資料
就需要轉換目前網路上看最多人推之一AutoMapper
後來發現如果有繼承關係在時被繼承的List中可直接塞入繼承類別如下

private List<Staff> Merge(List<StaffViewModel> model)
{
     List<Staff> result = new List<Staff>(0);
     foreach (var item in model)
         result.Add(item);
            
     return result;
}

如果以上不是BUG的話設計時能多用原本存在的方式就能少裝些插件
真的可以省下很多時間減少安裝插件後的問題

2022年1月21日星期五

c# DirectoryInfo應用

DirectoryInfo di = new DirectoryInfo(@"\\192.168.0.1\old");
//所有檔案列表包含子資料夾
var queryfileall = di.GetFiles("*", SearchOption.AllDirectories);
//指定單一副檔名
var queryfileone = di.GetFiles("*.jpg", SearchOption.AllDirectories);
//指定多重副檔名
string[] extensions = new[] { ".jpg", ".mp3"};
var queryfilemultiple  = di.GetFiles("*", SearchOption.AllDirectories).Where(x => extensions.Contains(x.Extension.ToLower())).ToArray();

//建立資料夾
string newpath =  @"\\192.168.0.1\new";
if (!Directory.Exists(newpath))
{
	Directory.CreateDirectory(newpath);
}
           

foreach (var item in queryfile)
{
	try
   {
   	   //可自行變化...
   	   //複製檔案
		if (!File.Exists(newpath + item.Name))
         item.MoveTo(newpath + item.Name);
   }
   catch (Exception ex)
   {

      throw new Exception(ex.Message);
   }   
}

//方法2
  DirectoryInfo root = new DirectoryInfo(@"\\192.168.0.1\old");
  FileInfo[] files = root.GetFiles();
  foreach (var item in files)
 {}

參考來源
Get multiple files with different extension

訂閱：意見 (Atom)

2022年10月14日 星期五

2022年10月5日 星期三

2022年10月4日 星期二

2022年10月3日 星期一

2022年9月29日 星期四

2022年9月28日 星期三

2022年9月27日 星期二

2022年9月22日 星期四

2022年9月19日 星期一

2022年9月14日 星期三

2022年8月15日 星期一

2022年6月21日 星期二

2022年2月10日 星期四

2022年1月21日 星期五

2022年10月14日星期五

2022年10月5日星期三

2022年10月4日星期二

2022年10月3日星期一

2022年9月29日星期四

2022年9月28日星期三

2022年9月27日星期二

2022年9月22日星期四

2022年9月19日星期一

2022年9月14日星期三

2022年8月15日星期一

2022年6月21日星期二

2022年2月10日星期四

2022年1月21日星期五