廣告聯播

2021年1月7日 星期四

基於Vue的視覺化表單設計器,讓表單開發簡單而高效

From: Polin Wei

基於Vue的視覺化表單設計器,讓表單開發簡單而高效

在作SA需求訪談時,常需與需求者對於操作畫面的確認,在此提供兩款不錯的可視化表單設計。它是以 Vue & Element UI 作為基本元件,可以快速與需求者當面討論,是不錯的方式。

Form Making 線上展示

form-making

 

Form Generator 線上展示

form-generator

 

2020年7月10日 星期五

Remove credentials from Git on Windows 10

From: Polin Wei

在 程式版本控制 on GitHub or Gitee or Bitbucket or GitLab 有談到  Personal Access Tokens ,若當它的憑證有變更時,會出現 remote: HTTP Basic: Access denied 的錯誤,在 windows 10 的平台該如何解法這問題呢?
C:\Users\polin.wei>git.exe ls-remote -h -- https://gitlab.com/polin.wei/apps.git HEAD
remote: HTTP Basic: Access denied
fatal: Authentication failed for 'https://gitlab.com/polin.wei/apps.git/'

其實很簡單,在 搜查中輸入 Credential Manager

CredentialManager
然後選擇 Windows Credentials ,找到要變更的憑證,可以直接刪除或修正就可以了。
git-CredentialManager

在 Linux 的話, 應該是下列的指令
git config --global --unset credential.helper

2020年1月8日 星期三

Spring Boot Internationalization 多語系設置(國際化)

From: Polin Wei

Spring Boot 多語系設置(國際化 Internationalization )



Spring Boot 支援多語系(國際化)的網頁顯示,這在國際化的軟體或公司是必需具備的,要達成這個功能只需要簡單的幾個步驟即可以達到。在 Spring Boot 在 Eclipse 的安裝與設定 最後中,有建議安裝 ResourceBundle Editor 的插件,在此也會用到,不妨先安裝於 Eclipse 中。
  • LocaleResolver
為了讓應用程式能夠確定當前正在使用的語言環境,需要在 class: WebMvcConfig 中添加一個 @Bean(name = "localeResolver") ,記得要設定 name = "localeResolver",不然會出現HTTP Status 500 – Internal Server Error 的錯誤訊息。
  1. /**
  2. * 多語系設定
  3. * @return
  4. */
  5. @Bean(name = "localeResolver")
  6. public LocaleResolver getLocaleResolver() {
  7. CookieLocaleResolver cookieLocaleResolver= new CookieLocaleResolver();
  8. cookieLocaleResolver.setCookieHttpOnly(true);
  9. cookieLocaleResolver.setDefaultLocale(Locale.US);
  10. cookieLocaleResolver.setCookieName("appsLocaleCookie");
  11. cookieLocaleResolver.setCookieMaxAge(60*60);
  12. return cookieLocaleResolver;
  13. }
這裡是使用 CookieLocaleResolver ,所以會在用戶端的電腦建立一個 Cookie 的檔案來存放 appsLocaleCookie 的值,若不想要這麼作,那可以用 SessionLocaleResolver 

2020年1月4日 星期六

spring boot minify html

From: Polin Wei

Spring Boot 利用 Filter 與 htmlcompressor 最小化 HTML 網頁Size


在 WordPress 利用 gzip 與外掛提升網站速度 中提到,可以將網頁的空白去除,以達到網頁最小的 Size ,進而提升載入網頁的速度,而在 Spring boot 中也可以透過 javax.servlet.Filter 及使用 com.googlecode.htmlcompressor 來達到這個功能。

  • 攔截器 ( Interceptor )  與 篩選器 ( Filter )
在實作之前,我們先瞭解一下攔截器 ( Interceptor )  與篩選器 ( Filter ) 。這兩者在功能方面很類似,但是在具體技術實現方面,還是有差異的,兩者的主要區別包括以下幾個方面:
  1. Filter 是依賴於 Servlet 容器,屬於 Servlet 規範的一部分,而攔截器則是獨立存在的,可以在任何情況下使用。
  2. Filter 的執行由 Servlet 容器 FilterChain 完成,而攔截器通常通過動態代理的方式來執行。
  3. Filter 的生命週期由 Servlet 容器管理,而攔截器則可以通過 IoC (Inversion of Control) 容器來管理,因此可以通過注入等方式來獲取其他 Bean 的實例,因此使用會更方便。

瞭解兩者差異後,接下來透過下列幾個步驟就可以輕易達到這個功能。
  • 在 gradle 中加入 com.googlecode.htmlcompressor 相依套件
  1. compile("com.googlecode.htmlcompressor:htmlcompressor:1.5.2")

2020年1月1日 星期三

Spring Boot 身份認證 (Authentication) 使用資料庫 (Database)

From: Polin Wei

在 Spring Boot 客製化 登入 ( Login ) 與 認證 (Authenticate) 機制中我們使用固定的帳號來作身份認證 (authentication),但在實務上這並不實用,因為不可能增加或減少帳號,就來修改程式,最好的方法就是將帳號維護於資料庫 (Database) 內,這樣就可以方便管理者作日常維護了。

這裡要實作 org.springframework.security.core.userdetails.UserDetails ,其中主要的重點是透過  public Collection getAuthorities() 提供 Authorities,在 JPA (Java Persistence API) Many-To-Many Relationship 在 Model 上的設置 已經取得帳號所有的 Authority,再利用 mapToGrantedAuthorities(Set authorities) 轉換成 Spring Security 需要的 Authorities 格式即可

  1. @Override
  2. public Collectionextends GrantedAuthority> getAuthorities() {
  3. return mapToGrantedAuthorities(getRoles());
  4. }
  5. private static List mapToGrantedAuthorities(Set authorities) {
  6. return authorities.stream()
  7. .map(Authority -> new SimpleGrantedAuthority("ROLE_" + Authority.getName()))
  8. .collect(Collectors.toList());
  9. }
至於 isAccountNonExpired()isCredentialsNonExpired()isEnabled() 則可以使用 active_date & inactive_date 來作判斷即可。


繼續閱讀:  Spring Boot 身份認證 (Authentication) 使用資料庫 (Database) 

2019年12月29日 星期日

Spring Boot 啟用 gzip 及 cache 提升網站速度

From: Polin Wei

WordPress 利用 gzip 與外掛提升網站速度 中有提到設定 gzip 壓縮,可以減少在主機與使用者端之間,資料傳輸量的減少,進而提升網站回應的速度,它的方法原則上是利用修改 .htaccess 的設定來達成,而 Spring Boot 是一個非常功能強大且靈活的系統,有很多功能只要透過設定就可以達成,在 gzip 的功能上只要在 application.properties 加上下列設定即可。


  1. # =================================
  2. # GZip compression, HTTP/2, caching
  3. # =================================
  4. # Enable response compression
  5. server.compression.enabled=true
  6. # The comma-separated list of mime types that should be compressed
  7. server.compression.mime-types=text/html,text/xml,text/plain,text/css,text/javascript,application/javascript,application/json,application/xml
  8. # Compress the response only if the response size is at least 1KB
  9. server.compression.min-response-size=1024