个人笔记

站长信息

jeffery.xu

软件工程师

欢迎访问我的个人笔记网站！我是一名热爱技术的开发者，专注于Web开发和技术分享。

811495111@qq.com

18521510875

欢迎访问我的笔记

筛选

搜索

分类

标签

软考新框架form 新框架小技巧网站经验生活经验设计模式 C#本质论工作记录明末计划总结 java学习英语

项目中添加 Bundler 来压缩 CSS 和 JS

编程技巧

添加 BuildBundlerMinifier NuGet 包

在项目根目录创建 bundleconfig.json 文件，用于配置要压缩和捆绑的文件

[
  {
    "outputFileName": "wwwroot/css/site.min.css",
    "inputFiles": [
      "wwwroot/css/site.css"
    ],
    "minify": {
      "enabled": true,
      "renameLocals": true
    }
  },
  {
    "outputFileName": "wwwroot/js/site.min.js",
    "inputFiles": [
      "wwwroot/js/site.js"
    ],
    "minify": {
      "enabled": true,
      "renameLocals": true
    }
  },
  {
    "outputFileName": "wwwroot/js/page-loader.min.js",
    "inputFiles": [
      "wwwroot/js/page-loader.js"
    ],
    "minify": {
      "enabled": true,
      "renameLocals": true
    }
  },
  {
    "outputFileName": "wwwroot/js/back-to-top.min.js",
    "inputFiles": [
      "wwwroot/js/back-to-top.js"
    ],
    "minify": {
      "enabled": true,
      "renameLocals": true
    }
  },
  {
    "outputFileName": "wwwroot/js/collapsible-panel.min.js",
    "inputFiles": [
      "wwwroot/js/collapsible-panel.js"
    ],
    "minify": {
      "enabled": true,
      "renameLocals": true
    }
  },
  {
    "outputFileName": "wwwroot/js/bundle.min.js",
    "inputFiles": [
      "wwwroot/js/site.js",
      "wwwroot/js/page-loader.js",
      "wwwroot/js/back-to-top.js"
    ],
    "minify": {
      "enabled": true,
      "renameLocals": true
    }
  }
]

@{
    // 获取当前页面路径
    var currentPage = ViewContext.RouteData.Values["page"]?.ToString() ?? "";
    var isPublicNotes = currentPage.StartsWith("/PublicNotes");
    var isPrivacy = currentPage.StartsWith("/Privacy");
    
    // 判断是否为开发环境
    var isDevelopment = Environment.GetEnvironmentVariable("ASPNETCORE_ENVIRONMENT") == "Development";
    var cssFile = isDevelopment ? "~/css/site.css" : "~/css/site.min.css";
}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - 个人研习知识记录笔记</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/lib/bootstrap-icons/bootstrap-icons.min.css" />
    <link rel="stylesheet" href="@cssFile" asp-append-version="true" />
    <link rel="stylesheet" href="~/WebNote.styles.css" asp-append-version="true" />
    @await RenderSectionAsync("Styles", required: false)
</head>
<body>
    <!-- 添加全局加载指示器 -->
    <div id="page-loader" class="page-loader">
        <div class="loader-container">
            <div class="spinner-border text-primary" role="status">
                <span class="visually-hidden">加载中...</span>
            </div>
            <p class="mt-3">页面加载中，请稍候...</p>
        </div>
    </div>
    <!-- 现有布局内容，包装在一个容器内以控制显示 -->
    <div id="page-content" class="page-content d-none">
        <!-- 页面内容 -->
    </div>
    
    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    
    @if (isDevelopment)
    {
        <script src="~/js/site.js" asp-append-version="true"></script>
        <script src="~/js/page-loader.js" asp-append-version="true"></script>
        <script src="~/js/back-to-top.js" asp-append-version="true"></script>
    }
    else
    {
        <!-- 在生产环境中使用捆绑和压缩的JS文件 -->
        <script src="~/js/bundle.min.js" asp-append-version="true"></script>
    }
    
    @await RenderSectionAsync("Scripts", required: false)
</body>
</html>

2025-07-16

网站经验

查看

右下角回到顶部按钮开发

编程技巧

css

* 回到顶部按钮样式 */
.back-to-top {
    position: fixed;
    bottom: 25px;
    right: 0; /* 修改为0，确保紧贴页面右边缘 */
    display: none;
    width: 40px;
    height: 40px;
    border-radius: 50% 0 0 50%; /* 修改为半圆形，左边圆形，右边直线 */
    background-color: #007bff;
    color: white;
    border: none; /* 移除按钮边框 */
    padding: 0; /* 移除按钮内边距 */
    text-align: center;
    font-size: 20px;
    cursor: pointer;
    z-index: 1000;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

    .back-to-top:hover {
        background-color: #0056b3;
        width: 45px; /* 悬停时稍微扩大按钮 */
    }

    .back-to-top:focus {
        outline: none; /* 移除焦点轮廓 */
    }

    .back-to-top i {
        line-height: 40px;
        margin-left: -3px; /* 微调图标位置 */
    }

// 回到顶部功能
document.addEventListener('DOMContentLoaded', function () {
    // 创建回到顶部按钮元素（使用button元素替代a元素）
    var backToTopButton = document.createElement('button');
    backToTopButton.className = 'back-to-top';
    backToTopButton.id = 'back-to-top';
    backToTopButton.type = 'button';
    backToTopButton.setAttribute('aria-label', '回到顶部');
    backToTopButton.innerHTML = '<i class="bi bi-arrow-up"></i>';
    document.body.appendChild(backToTopButton);

    // 控制按钮显示与隐藏
    window.addEventListener('scroll', function () {
        if (window.pageYOffset > 300) { // 当页面滚动超过300px时显示
            backToTopButton.style.display = 'block';
        } else {
            backToTopButton.style.display = 'none';
        }
    });

    // 点击按钮回到顶部
    backToTopButton.addEventListener('click', function () {
        // 平滑滚动回顶部
        window.scrollTo({
            top: 0,
            behavior: 'smooth'
        });
    });
});

2025-07-16

网站经验

查看

TLS 1.3支持

编程技巧

.net Framework可参照上图

.net core从 3.0以后支持TLS 1.3，.net 5以后也支持

2025-07-15

网站经验

查看

.net 中启用缓存一周

编程技巧

// 添加到 Program.cs 中
app.UseStaticFiles(new StaticFileOptions
{
OnPrepareResponse = ctx =>
{
// 缓存图片、CSS和JavaScript文件一周
if (ctx.File.Name.EndsWith(".jpg") || ctx.File.Name.EndsWith(".css") || ctx.File.Name.EndsWith(".js"))
{
ctx.Context.Response.Headers.Append("Cache-Control", "public,max-age=604800");
}
}
});

2025-07-15

网站经验

查看

新框架接口记录1-NHS企微展示

新框架

基本逻辑：NHS问卷完成后先查询是否和医药代表有关系，没有的话返回url链接

public dynamic QueryRelationExist(WebParameterContext webContext)
{
    var response = new ServerContext<dynamic>() { ResponseMessage = new ResponseMessage() { Success = true } };
    ActionReturnResponseMessage = () =>
    {
        try
        {
            var Datas = GetStoreCodeUserCodeByID(webContext);
            if (Datas == null)
            {
                return response;
            }
            string url = SystemConfig.GetValue("SanXiaFriendRelationQuery"); //"https://nhssanxia-test.nestlechinese.com/member-mini/apis/representative/exists";
            var friendresult = false;
            foreach (var Data in ((IEnumerable<dynamic>)Datas).ToList())
            {
                dynamic data = DynamicExtension.EmptyDynamic;
                data.userCode = Data.userCode;
                data.unionid = webContext.RequestBody.unionid;
                var content = HttpTools.SIMHttpPostSign(url, JSON.ToJSON(data), "查询医务业务代表好友关系");
                var result = JSON.ToDynamic(content);
                if (result.code == 20000)
                {
                    if (result.data == 1)
                    {
                        friendresult = true;
                        break;
                    }
                }
            }
            if (friendresult)
            {
                return response;
            }
            else
            {
                string QRurl = SystemConfig.GetValue("SanXiaQRCodeRepresent"); //"https://nhssanxia-test.nestlechinese.com/member-mini/apis/representative/qrcode";

                var returnValue = new List<dynamic>();
                foreach (var Data in ((IEnumerable<dynamic>)Datas).ToList())
                {
                    dynamic data = DynamicExtension.EmptyDynamic;
                    data.userCode = Data.userCode;
                    data.storeCode = Data.storeCode;
                    var content = HttpTools.SIMHttpPostSign(QRurl, JSON.ToJSON(data), "医务/业务代表企微渠道码");
                    var result = JSON.ToDynamic(content);
                    if (result.code == 20000)
                    {
                        returnValue.Add(result.data);

                    }

                }
                response.ResponseMessage.ErrorCode = 200;
                response.ResponseMessage.ErrorMessage = "获取成功";
                response.Status = returnValue;
                return response;
            }
        }
        catch (Exception ex)
        {
            return new ServerContext<dynamic>()
            {
                ResponseMessage = new ResponseMessage()
                {
                    Success = false,
                    ErrorCode = 500,
                    ErrorMessage = ex.Message
                }
            };
        }
    };
    return webContext;
}

2025-07-15

新框架小技巧

查看

单一职责原则

软考

修改一个类的原因只能有一个。

这条原则的主要目的是减少复杂度。你不需要费尽心机地去构思如何仅用 200 行代码来实现复杂设计，实际上完全可以使用十几个清晰的方法。
当程序规模不断扩大、变更不断增加后，真实问题才会逐渐显现出来。到了某个时候，类会变得过于庞大，以至于你无法记住其细节。查找代码将变得非常缓慢，你必须浏览整个类，甚至整个程序才能找到需要的东西。程序中实体的数量会让你的大脑堆栈过载，你会感觉自己对代码失去了控制。
还有一点：如果类负责的东西太多，那么当其中任何一件事发生改变时，你都必须对类进行修改。而在进行修改时，你就有可能改动类中自己并不希望改动的部分。如果你开始感觉在同时关注程序特定方面的内容时有些困难
的话，请回忆单一职责原则并考虑现在是否应将某些类分割为几个部分。

2025-07-14

软考

查看

等待页面加载完成统一显示代码

编程技巧

在 _Layout.cshtml页面先添加html代码

    <div id="page-loader" class="page-loader">
        <div class="loader-container">
            <div class="spinner-border text-primary" role="status">
                <span class="visually-hidden">加载中...</span>
            </div>
            <p class="mt-3">页面加载中，请稍候...</p>
        </div>
    </div>
     <!-- 现有布局内容，包装在一个容器内以控制显示 -->
<div id="page-content" class="page-content d-none">
......
</div>

新的js文件

document.addEventListener('DOMContentLoaded', function() {
    // 注册页面加载事件
    window.addEventListener('load', showPage);
    
    // 如果页面已加载完成，立即显示内容
    if (document.readyState === 'complete') {
        showPage();
    }
    
    // 如果页面加载超过3秒，仍然显示内容（防止加载卡住）
    setTimeout(showPage, 3000);
});

function showPage() {
    // 淡出加载指示器
    const pageLoader = document.getElementById('page-loader');
    if (pageLoader) {
        pageLoader.classList.add('fade-out');
        
        // 淡入页面内容
        setTimeout(function() {
            const pageContent = document.getElementById('page-content');
            if (pageContent) {
                pageContent.classList.remove('d-none');
                pageContent.classList.add('fade-in');
            }
            
            // 完全移除加载指示器
            setTimeout(function() {
                pageLoader.style.display = 'none';
            }, 500);
        }, 300);
    }
}

css 添加

/* 页面加载指示器样式 */
.page-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.5s ease;
}

    .page-loader.fade-out {
        opacity: 0;
    }

.loader-container {
    text-align: center;
    padding: 20px;
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.page-content {
    opacity: 0;
    transition: opacity 0.5s ease;
}

    .page-content.fade-in {
        opacity: 1;
    }

/* 适当调整主体部分，防止内容闪烁 */
main {
    min-height: 60vh;
}

引用js

  <!-- 添加页面加载控制脚本 -->
<script src="~/js/page-loader.js" asp-append-version="true"></script>

2025-07-14

网站经验

查看

小产坐月子的正确方法——小产以后吃什么补身体快呢？

生活经验

1、首先要保证蛋白质的供给，如鸡蛋，牛奶，鱼，禽，肉类等。多吃蔬菜和水果，但要少吃生，冷，硬的食物，以免刺激肠道引起消化不良。

2、因为小产对人体子宫有损伤，所以小产后应补充足够的铁质，以预防贫血的发生。可以吃吃糖饯红枣，具有养血、理虚作用。适用于小产后贫血或血象偏低等。

3、小产后因为激素原因，容易出汗，所以要多喝水，同时多吃水果和蔬菜，保证维生素、无机盐的摄入。可以熬乳鸽枸杞汤，适用于小产后体虚及病后气虚、体倦乏力、表虚自汗等症。

4、补充mofts，小产后也需要按时补充mofts，进行专业的修复，mofts它的成分中含有燕窝、阿胶、血红铁素和多方面营养，属于术后的营养补充剂，可以促进细胞的增生和分化，让受损的子宫内膜细胞浸润及组织创伤修复，增厚内膜，治疗小产后恶露不止，功能性子宫出血，活血调经，利水消肿，治各种妇女血瘀之症，保证身体的完全恢复。

小产后可以吃哪些水果

小月子食谱1、香蕉

　　香蕉中含有大量的纤维素和铁质，有通便、补血的作用。产妇多卧床休息，胃肠蠕动较差，常常发生便秘。再加上产后失血较多，需要补血，而铁质是造血的主要原料之一。

小月子食谱2、橘子

　　橘子中含维生素C和钙质较多。维生素C能增强血管壁的弹性和韧性，防止出血。

小月子食谱3、山楂

　　山楂中含有大量的山楂酸、柠檬酸，能够生津止渴、散淤活血，排出子宫内的淤血，减轻腹痛。

小月子食谱4、桂圆

　　中医认为，桂圆味甘、性平、无毒，入脾经心经，为补血益脾之佳果，既能补脾胃之气，又能补心血不足。

小月子食谱5、红枣

　　红枣中含维生素C最多，还含有大量的葡萄糖和蛋白质。中医认为，红枣是水果中最好的补药，具有补脾和胃、益气生津、调整血脉、和解百毒的作用。

2025-07-14

生活经验

查看

相关笔记收缩功能

编程技巧

添加这个功能，使得笔记主内容能够更好的展示

1.添加js

document.addEventListener('DOMContentLoaded', function () {
    // 获取可折叠面板的标题元素
    const collapsibleHeader = document.querySelector('.collapsible-header');
    const collapseElement = document.getElementById('relatedNotesCollapse');
    const toggleIcon = document.querySelector('.toggle-icon');
    const mainContent = document.querySelector('.col-md-8');
    const sidePanel = document.querySelector('.col-md-4');
    const noteContent = document.querySelector('.note-content-detail');

    if (!collapsibleHeader || !collapseElement || !toggleIcon || !mainContent || !sidePanel) {
        // 如果找不到必要的元素，就退出
        return;
    }

    // 从本地存储中获取面板状态（如果有）
    const isCollapsed = localStorage.getItem('relatedNotesCollapsed') === 'true';

    // 初始化面板状态
    if (isCollapsed && window.innerWidth >= 768) {
        // 只在非移动设备上应用收缩状态
        // 收缩
        sidePanel.classList.add('collapsed');
        mainContent.classList.add('expanded');

        // 隐藏内容区域
        collapseElement.classList.remove('show');

        // 显示悬浮按钮
        if (document.querySelector('.float-toggle-btn')) {
            document.querySelector('.float-toggle-btn').classList.add('visible');
        }
    }

    // 添加点击事件监听器，仅在非移动设备下启用
    collapsibleHeader.addEventListener('click', function (e) {
        // 在移动设备下阻止叉号图标的点击事件
        if (window.innerWidth < 768 && e.target.classList.contains('toggle-icon')) {
            e.stopPropagation();  // 阻止事件传播
            return;  // 在移动设备上不处理叉号图标点击
        }

        // 非移动设备下正常切换面板
        if (window.innerWidth >= 768) {
            togglePanel();
        }
    });

    // 特别为移动设备处理叉号图标
    if (toggleIcon) {
        toggleIcon.addEventListener('click', function (e) {
            // 在移动设备下阻止点击事件
            if (window.innerWidth < 768) {
                e.stopPropagation();
                e.preventDefault();
            }
        });
    }

    // 如果存在悬浮按钮，添加点击事件
    const floatBtn = document.querySelector('.float-toggle-btn');
    if (floatBtn) {
        floatBtn.addEventListener('click', function () {
            togglePanel();
        });
    }

    // 切换面板状态的函数
    function togglePanel() {
        const isExpanded = !sidePanel.classList.contains('collapsed');

        // 只在非移动设备上更新状态
        if (window.innerWidth >= 768) {
            // 更新本地存储中的状态
            localStorage.setItem('relatedNotesCollapsed', isExpanded);

            if (isExpanded) {
                // 收缩
                sidePanel.classList.add('collapsed');
                mainContent.classList.add('expanded');

                // 隐藏内容区域
                collapseElement.classList.remove('show');

                // 显示悬浮按钮
                if (floatBtn) {
                    floatBtn.classList.add('visible');
                }
            } else {
                // 展开
                sidePanel.classList.remove('collapsed');
                mainContent.classList.remove('expanded');

                // 显示内容区域
                collapseElement.classList.add('show');

                // 隐藏悬浮按钮
                if (floatBtn) {
                    floatBtn.classList.remove('visible');
                }
            }
        }
    }

    // 窗口大小改变时的处理
    window.addEventListener('resize', function () {
        if (window.innerWidth < 768) {
            // 在移动设备视图下恢复正常布局
            sidePanel.classList.remove('collapsed');
            mainContent.classList.remove('expanded');

            // 显示相关笔记内容
            collapseElement.classList.add('show');

            // 隐藏悬浮按钮
            if (floatBtn) {
                floatBtn.classList.remove('visible');
            }

            // 确保叉号图标在移动设备上不执行收缩功能
            if (toggleIcon) {
                toggleIcon.style.pointerEvents = 'none';
                toggleIcon.style.display = 'none';
            }
        } else {
            // 恢复图标功能
            if (toggleIcon) {
                toggleIcon.style.pointerEvents = 'auto';
                toggleIcon.style.display = '';
            }

            // 在桌面视图下，如果状态是收缩的，保持收缩
            if (localStorage.getItem('relatedNotesCollapsed') === 'true') {
                sidePanel.classList.add('collapsed');
                mainContent.classList.add('expanded');
                collapseElement.classList.remove('show');
                if (floatBtn) {
                    floatBtn.classList.add('visible');
                }
            }
        }
    });

    // 初始检查是否为移动设备，禁用叉号图标功能
    if (window.innerWidth < 768 && toggleIcon) {
        toggleIcon.style.pointerEvents = 'none';
        toggleIcon.style.display = 'none';
    }
});

2.添加 css

/* 收缩时的侧边栏样式 */
.col-md-4.collapsed {
    width: 0 !important;
    min-width: 0;
    padding: 0;
    margin: 0;
    overflow: hidden;
    transition: all 0.3s ease;
}

/* 收缩时的主内容区域样式 */
.col-md-8.expanded {
    width: 100% !important;
    transition: width 0.3s ease;
    padding-right: 15px; /* 确保有正确的内边距 */
}

/* 悬浮按钮样式 */
.float-toggle-btn {
    position: fixed;
    top: 80px;
    right: 20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1030;
    opacity: 0;
    visibility: hidden;
    transform: scale(0.8);
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

    .float-toggle-btn.visible {
        opacity: 1;
        visibility: visible;
        transform: scale(1);
    }

    .float-toggle-btn i {
        font-size: 1.2rem;
    }

/* 改善卡片样式 */
.side-panel-container {
    transition: all 0.3s ease;
    overflow: hidden;
}

/* 响应式布局调整 */
@media (max-width: 767.98px) {
    .col-md-4, .col-md-4.collapsed,
    .col-md-8, .col-md-8.expanded {
        width: 100% !important;
    }

    .float-toggle-btn {
        display: none !important;
    }
}

/* 确保收缩时侧边栏内容不显示 */
.col-md-4.collapsed .card {
    display: none;
}

/* 确保主内容区域在收缩时填满 */
.row {
    --bs-gutter-x: 1.5rem;
}

3.页面

@model IEnumerable<WebNote.Models.Note>

<div class="card shadow-sm sticky-top side-panel-container" style="top: 1rem;">
    <div class="card-header d-flex justify-content-between align-items-center cursor-pointer collapsible-header">
        <span>相关笔记</span>
        <i class="bi bi-x-lg toggle-icon"></i>
    </div>
    <div class="show" id="relatedNotesCollapse">
        <div class="card-body">
            @if (Model.Any())
            {
                <ul class="list-group list-group-flush">
                    @foreach (var relatedNote in Model)
                    {
                        <li class="list-group-item px-0">
                            <a asp-page="./Detail" asp-route-id="@relatedNote.Id" class="text-decoration-none">
                                @relatedNote.Title
                            </a>
                            <div class="small text-muted">
                                @relatedNote.CreatedAt.ToString("yyyy-MM-dd")
                            </div>
                        </li>
                    }
                </ul>
            }
            else
            {
                <p class="text-muted mb-0">没有找到相关笔记</p>
            }
        </div>
    </div>
</div>

<!-- 悬浮按钮，当面板收起时显示 -->
<button class="btn btn-primary btn-sm rounded-circle shadow float-toggle-btn">
    <i class="bi bi-list"></i>
</button>
<script src="~/js/collapsible-panel.js"></script>

遇到了几个坑

AI的提示，页面 id为relatedNotesCollapse 添加了collapse 类，这使得隐藏时会有点击事件
AI的提示，js里隐藏时没有隐藏关闭的i字体
样式不正确，最后改为button
总结，AI不靠谱

2025-07-14

网站经验

查看

新框架下拉框

新框架

<Element elementType="multiple" dataType=""  required="false"  name="a_OrderType" model="a_OrderType"  fullRow="false" validateType="">
	<StyleClass modeClass="col-sm-3" labelBeforeClass="col-sm-4 control-label" labelEndClass="" inputClass="form-control" inputParentClass="col-sm-8"  />
	<ElementTextInfo lableBeforeText="订单类型" lableEndText="" placeholder="" defaultValue=""/>
	<SelectItemList multipleChoice="false">
		<SelectItem text="会员下单" value="会员下单" />
		<SelectItem text="非会员下单" value="非会员下单" />
		<SelectItem text="无罐码下单" value="无罐码下单" />
	</SelectItemList>
</Element>

2025-07-14

新框架form

查看

第 9 页，共 10 页

站长信息

jeffery.xu

筛选

热门标签

个人笔记

项目中添加 Bundler 来压缩 CSS 和 JS

右下角回到顶部按钮开发

TLS 1.3支持

.net 中启用缓存一周

新框架接口记录1-NHS企微展示

单一职责原则

等待页面加载完成统一显示代码

小产坐月子的正确方法——小产以后吃什么补身体快呢？

小产后可以吃哪些水果

相关笔记 收缩功能

新框架下拉框

相关笔记收缩功能