MISTECH 技術手抄本

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

• GitHub: vue-form-making

Form Making 線上展示

• GitHub: form-generator

Form Generator 線上展示

• 安裝 vue-i18n

繼  在 Node JS 使用 vue-cli 3 快速開發網頁與佈署到 github-pages 後，接下來要實作 i18n 多國語系網站，npm 安裝的方式，指令是 npm install vue-i18n ，在 Vue i18n 官方文件中有提供 Vue-cli 3 專用的 vue add i18n指令

PS nodejs\vue2-apps> vue add i18n

 

� Installing vue-cli-plugin-i18n...

 

+ vue-cli-plugin-i18n@1.0.1

added 17 packages from 15 contributors and audited 1631 packages in 80.325s

 

55 packages are looking for funding

run `npm fund` for details

 

Successfully installed plugin: vue-cli-plugin-i18n

 

? The locale of project localization. en

? The fallback locale of project localization. en

? The directory where store localization messages of project. It's stored under `src` directory. locales

? Enable locale messages in Single file components ? No

安裝完後，由下圖可以知道 vue add i18n指令幫我們作了很多事，實在太方便了

繼續閱讀

Jenkins 自動部署 Spring Boot 並自動起動

當程式存放在 程式版本控制 on GitHub or Gitee or Bitbucket or GitLab 有版本更新時，使用 Jenkins 可以減少人為手工的錯誤，並讓它自動部署及自動起動。這篇文章將 Jenkins 建置在 windows 10 作為說明。

• 下載安裝檔

我們可以到以下連結下載適合的 OS 環境版本安裝，我們選擇熟悉的Windows環境。細部安裝步驟可以參考: Jenkins Master Server安裝

1.  Jenkins – https://jenkins.io/download/
2. Java – OpenJDK: https://developers.redhat.com/products/openjdk/download
3. Git Tool – https://git-scm.com/download/win
4. Gradle Tool –  gradle-6.5

安裝 Jenkins 完後在幾分鐘後重新整理網頁，就過出現以下內容，我們可以依照指示在指定目錄找到初始管理員密碼，取得密碼後在下面輸入，接著按下Continue按鈕。

• 基本的配置設定

管理 Jenkins ->組態設定 : 設定遠端連到系統的網址，以及系統管理員的 email

管理 Jenkins -> Global Tool Configuration ： 將 JDK、Git、Gradle 的路徑設好

• 設定登入 GitLab 的憑證

Jenkins -> Credentials -> System -> Global credentials (unrestricted)

若不知怎麼設定  Personal Access Tokens ，可以參考: 程式版本控制 on GitHub or Gitee or Bitbucket or GitLab

繼續閱讀

在 jquery 與 axios 對於 spring boot 的 ajax 請求處理 裡談到現行的網頁操作使用 ajax 技術來節省頻寛，若想與 Vue.js 結合，則不妨使用Axios。而在使用  ajax 技術常會遇到一件事是  session timeout，後端主機會反饋一個 Status Code: 302，且 post url 轉指向 login。這時操作畫面沒有變化，但已經無法與後端主機取得資料。

要解決這個問題需要前端 HTML 的 java script 與後端主機 spring boot 的 Interceptor 作著手。

首先，前端 ( Front-End ) HTML 裡的 java script 對 axios 送出前加入 "X-REQUEST-TYPE":"axios"，以及收到後端主機 spring boot 的 Interceptor 的 401 錯誤作導向登入畫面。

繼續閱讀:

spring boot 對於 axios 執行 ajax 遇到 response.status:302 的處理方式

Spring Boot 透過 Gmail SMTP 寄信

在 WordPress Useful Plugin – 使用 WP Mail SMTP 透過 GMail 來寄信 是讓 WordPress 可以透過 Goole API 的方式來寄信，而在 Spring Boot 中也可以透過客製程式來達成這功能。

• 在 build.gradle 加入 dependencies: spring-boot-starter-mail

• 在 application.properties 加入連結到 Gmail 的參數

在 application.properties 這些的參數設定，也可以透過下方的程式碼來達成。

繼續閱讀:  Spring Boot 透過 Gmail SMTP 寄信

Spring Boot 支援多語系(國際化)的網頁顯示，這在國際化的軟體或公司是必需具備的，要達成這個功能只需要簡單的幾個步驟即可以達到。在 Spring Boot 在 Eclipse 的安裝與設定 最後中，有建議安裝 ResourceBundle Editor 的插件，在此也會用到，不妨先安裝於 Eclipse 中。

• LocaleResolver

為了讓應用程式能夠確定當前正在使用的語言環境，需要在 class: WebMvcConfig 中添加一個 @Bean(name = "localeResolver") ，記得要設定 name = "localeResolver"，不然會出現HTTP Status 500 – Internal Server Error 的錯誤訊息。

這裡是使用 CookieLocaleResolver ，所以會在用戶端的電腦建立一個 Cookie 的檔案來存放 appsLocaleCookie 的值，若不想要這麼作，那可以用 SessionLocaleResolver ，如下：

繼續閱讀:  Spring Boot 多語系設置(國際化)

在參考  Spring Boot 在 Eclipse 的安裝與設定 後，我們於文章中 使用 Eclipse 快速建立 Spring Starter Project 建立了一個網站，並且利用 程式版本控制 on GitHub or Gitee or Bitbucket or GitLab 將專案上傳到了 GitLab ，如何回到了家或是在另一台電腦工作環境時，Eclipse 如何將這個專案導入進來呢? 其實它很簡單，依照下面的步驟就可以了。

切換到 git 的 Perspective ，選擇 Clone a Git Repository and add this clone to this view ，輸入在 GitLab 專案的 HTTPS 網址，以及帳號/密碼。若對於帳號/密碼不知是什麼的，請參考 程式版本控制 on GitHub or Gitee or Bitbucket or GitLab 。

選擇要匯入進來的 Branch ，因為目前只有一個 master ，所以只能選擇它囉。

選擇要放這個專案的本機目錄，以本例是放在 v:\git\gitlab\apps。

將這個專案，匯入到 Eclipse 裡

選擇專案匯入的來源，就是剛剛 git clone 到本機的目錄  v:\git\gitlab\apps

最後不要忘記將這個專案加入 Gradle ，這樣就完成了，執行看看這個專案吧，應該是可以運作正常的。

在 WordPress 實用外掛推薦 有提到 WP Mail SMTP by WPForms & Post SMTP Mailer/Email Log 都是 WordPress 的寄信外掛程式，它可以讓 WordPress 透過本機或外部的郵件主機來寄發信件。

1. WP Mail SMTP by WPForms 功能說明
2. WP Mail SMTP by WPForms 透過 Goole API 方式寄信的設定
3. 建立 Google Cloud IAM 專案
4. 建立 Google API 憑證
5. 電子郵件測試驗證

• WP Mail SMTP by WPForms 功能說明

WP Mail SMTP by WPForms 它不使用預設的 mail() 函式，而是重新設定 wp_mail() 函式，它在 設定->一般 畫面，可以點選 Gmail/Mailgun/SendGrid/SMTP 等其中一種郵件程式，經過相關設定就可以寄信了。

WP Mail SMTP plugin includes many different SMTP setup options:

1. Sendinblue SMTP (Recommended)
2. Mailgun SMTP
3. SendGrid SMTP
4. Gmail SMTP
5. Microsoft SMTP (Outlook.com and Office 365) [Pro]
6. Amazon SES SMTP [Pro]
7. All Other SMTP

繼續閱讀: WordPress Useful Plugin – 使用 WP Mail SMTP 透過 GMail 來寄信

WordPress 若要搬到新的主機要注意的事項，記錄如下：

用手動來搬家比較安全，因為這才知道你自已在作什麼，主要有下列幾個步驟：

1. Upload your website to new host
2. Export/Import Your WordPress Database
3. Modify two records: siteurl & home on table: wp_options
4. Modify wp-config.php File
5. Change all the URL of guid & post content in the posts

• Upload your website to new host

先找到安裝 WordPress 的根目錄

然後將 WordPress 安裝目錄下的所有檔案如下圖，整個上傳到新網站的根目錄下。(可以使用 FileZilla 來上傳)

繼續閱讀: WordPress 搬家 網站搬移到網址

利用 Spring Boot 可以快速開發客製化應用系統, 而這些由 Spring Boot 框架建立的應用系統則可以利用 Spring Boot Admin 來作統一的管理. 由這系統可以讓您知道 Application Server 的版本如: Java , Tomcat , session .... 等, 所以在管理這些服務系統架構中...監控管理是非常重要的一環

Server 端

1. 建立一個新的 Spring Starter Project : sbAdmin , 且只要選擇 Web 就好. 其它的相依套件如下:

buildscript {
        ext {
                springBootVersion = '2.1.1.RELEASE'
        }
        repositories {
                mavenCentral()
        }
        dependencies {
                classpath("org.springframework.boot:spring-boot-gradle-plugin:${springBootVersion}")
        }
}

apply plugin: 'java'
apply plugin: 'eclipse'
apply plugin: 'org.springframework.boot'
apply plugin: 'io.spring.dependency-management'

group = 'com.admin'
version = '0.0.1-SNAPSHOT'
sourceCompatibility = 1.8

repositories {
        mavenCentral()
}


dependencies {
        implementation('org.springframework.boot:spring-boot-starter-web')
        compile('de.codecentric:spring-boot-admin-starter-server:2.1.1') // SpringBoot Admin
        testImplementation('org.springframework.boot:spring-boot-starter-test')
}

Server 端的 application.properties 設定啟動的 port: 8099

server.port=8099

Client 端

引入的相依套件

dependencies {
        compile('de.codecentric:spring-boot-admin-starter-client:2.1.1') // SpringBoot Admin Client
}

設定Spring Boot Admin 可以存取 Client 端的設定

    @Override
    protected void configure(HttpSecurity httpSecurity) throws Exception {
        httpSecurity                
                .csrf().disable()
                .authorizeRequests()
                
                // 首頁
                .antMatchers("/home").permitAll()
                .antMatchers("/actuator/**").permitAll()                
                .anyRequest().authenticated()   // 除了以上的 URL 外, 都需要認證才可以訪問
                .and()
                        .formLogin()
                                .loginPage("/login")
                                //.failureHandler(authFailureHandler) // 使用 Spring 預設
                                .successForwardUrl("/auth/home")
                                .permitAll()
                                .and()
                .logout()
                    .permitAll();
    }

Client 端的 application.properties 設定

# =================================
# Spring Boot Admin Client
# http://codecentric.github.io/spring-boot-admin/2.1.1/
# ================================
spring.boot.admin.client.url=http://localhost:8099
management.endpoint.health.show-details=always
management.endpoints.enabled-by-default=true
management.endpoints.web.exposure.include=*

以上, 啟動後連結 http://localhost:8099 就可以了. 很快速吧.

官方的介紹

Application Servers List

>

Dashboard with desktop notifications