IT的隱形人世界

簡單說明一下程序

1.  先找一張自己喜歡的200K以下的Gif動圖

有時候寫SQL寫得太順手的時候，就會報出這個未知的錯誤

太久沒遇到還是會忘記XD

最近覺得網站比較複雜，所以問了谷哥大神看看有沒有甚麼方式可以讓使用者更簡單的了解網站的使用方式

就找到了introjs這個簡單的前端套件

最近有做到驗證，筆記一下，發現真的蠻淺顯易懂的，比elementUI還簡單...

之前看網站時，發現一個功能，就是閱讀進度條

這功能可以讓User知道自己的頁面還有多長多多，就是一個炫麗的效果，這邊筆記一下

最近遇到一個問題，在使用vue3的wangeditor3.0 ，發現在輸入文字後，文字的光標會自行的跳到最後一個字，導致打字非常麻煩

<template>
        <div class="editor-container">
                <div :id="id"></div>
        </div>
</template>

<script lang="ts">
import { toRefs, reactive, onMounted, watch } from 'vue';
import wangeditor from 'wangeditor';
export default {
        name: 'wngEditor',
        props: {
                id: {
                        type: String,
                        default: () => 'wangeditor',
                },
                // 是否禁用
                isDisable: {
                        type: Boolean,
                        default: () => false,
                },
                // 雙像綁定
                // 参考：https://v3.cn.vuejs.org/guide/migration/v-model.html#%E8%BF%81%E7%A7%BB%E7%AD%96%E7%95%A5
                modelValue: String,
        },
        setup(props, { emit }) {
                const state = reactive({
                        editor: null,
                        isChanged : false,
                });
                // 初始化
                // https://doc.wangeditor.com/
                const initWangeditor = () => {
                        state.editor = new wangeditor(`#${props.id}`);
                        state.editor.config.placeholder = '請輸入內容';
                        state.editor.config.uploadImgShowBase64 = true;
                        state.editor.config.showLinkImg = false;
                        onWangeditorChange();
                        state.editor.create();
                        state.editor.txt.html(props.modelValue);
                        props.isDisable ? state.editor.disable() : state.editor.enable();
                };
                // 内容改變時
                const onWangeditorChange = () => {
                        state.editor.config.onchange = (html: string) => {
                                state.isChanged = true;    //標記改變
                                emit('update:modelValue', html);
                        };
                };

                // 監聽雙像綁定值
                // https://gitee.com/lyt-top/vue-next-admin/issues/I4LM7I

                watch(
                        () => props.modelValue,
                        (value) => {
                                if(!state.isChanged)
                                        state.editor.txt.html(value);
                                
                                state.isChanged = false;
                        }
                );

                onMounted(() => {
                        initWangeditor();
                });
                return {
                        ...toRefs(state),
                };
        },
};
</script>

最近因要與.net framework 4 web進行串接，因舊專案都使用WCF進行資料共享，故在不想調整舊程式為Webapi時，就會需要進行WCF的套用

而.net core在進行服務連接時，因原本回傳為Datatable形式，故在進行程式碼自動建立時，會將回傳資訊轉成xml格式進行回傳

最近開始使用open ID進行驗證認證 , 我在找尋解決方案時發現了identityserver4 得這個集大成的open ID使用 套件 , 切可以很方便擴展公司內部所使用的AD認證 或者是Google認證LINE認證等方式, 那我們就開始簡單的介紹一下identityserver4實作的方式。