2022年12月14日 星期三

React 初探-常用指令及問題(01)

1.建立新的React,開啟Vs Code終端機,以下官網提供
npx create-react-app my-app
cd my-app
npm start
2.由GitHub取得程式碼後如何使用
下載後直接跑
npm run start
錯誤訊息如下
'react-scripts' 不是內部或外部命令、可執行的程式或批次檔。
npm install react-scripts
or
npm install
3.Can't resolve 'react-router-dom' in 非官方開發為React Router開發
npm install react-router-dom
4.export 'Switch' (imported as 'Switch') was not found in 'react-router-dom'
6後改成Routes
npm install react-router-dom@5.2.0
5.發佈(2023-07-05更新)
npm run build 
會在build資料夾中產生資料 參考資料
建立全新的 React 應用程式
'react-scripts' 不是內部或外部命令,也不是可執行的程式 或批處理檔案--解決方案 Export 'Switch' (imported as 'Switch') was not found in 'react-router-dom'

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": "

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

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

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

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

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

", "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": "

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", } ];
參考資料
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": "

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", } ];
參考資料
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 *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官網

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官網

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