了解bootstrap改造asp.net core MVC的样式模板

我们都知道,在使用默认的asp.net core MVC模板建立项目的时候,里面的样式是已经事先被写好了的。一般来说都在css目录下的site.css和bootstrap.css及下面的bootstrap.min.css中。我们打开bootstrap这些样式文件,里面有大量的样式类的定义,如果我们没有搞懂这些定义,显然是不能完成我们接下来的网站样式的改造的,所以我们必须找时间研究一下bootstrap。

文章目录

  • 一、初步了解bootstrap
  • 二、改造导航栏
    • 1、修改主导航
    • 2、另起炉灶自己来布局
      • (1)、建立导航栏
      • (2)、增加二级导航
    • 3、增加登录按钮和登录对话框
      • (1)、登录按钮
      • (2)、登录对话框
      • (3)、漂亮登录对话框
  • 三、改造表格显示
  • 四、改造表单显示

在这里插入图片描述
我们这里不打算开始一种新的布局,所以只能说我们是对默认网站进行改造。原始的默认网站如下图:
在这里插入图片描述

一、初步了解bootstrap

如果大家都想我一样比较懒,不想一开始就做一个很复杂的网站,那么我们就用不着一开始就把精力放在改造布局文件上。那么我们进入到布局文件_layout.cshtml来看看它的样式引入都有哪些。如下图,这里有两个css文件的引入。我们在注销掉第二个引入链接后发现网页显示的效果并没有发生任何变化,所以,我们笃定,默认模版的样式都来自于bootstrap。
在这里插入图片描述
Bootstrap流行已经很多年了,横jquery一样被默认嵌入到asp.net core mvc的项目模板中了,所以如果你想高效的利用asp.net core mvc的模板开发你的网站项目,那么了解bootstrap,实在必行。其实学习了解Bootstrap也并没有想象中的那么繁杂,尤其是对于有css基础的同学。这里我贴出两个参考学习Bootstrap的URL:

菜鸟教程:https://www.runoob.com/bootstrap/bootstrap-tutorial.html
Bootstrap中文网:https://www.bootstrap.cn/

Bootstrap 框架,据说是全球使用人数最多的前端框架,使用Bootstrap框架是世界上迅速进行web前端开发的主流做法,它是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 前端开发更加快捷。
对于Bootstrap我也不想过多的介绍它的功能,反正你需要用到的各种组件各种情形都几乎完全包含了,不用你操心如何实现他们了。除非你有特殊的要求。

二、改造导航栏

首先我们来看看导航栏默认的模样,我感觉是惨不忍睹,把brand和导航内容柔道一起,我是不太能够接受。至少说要对brand进行一些改造或者将导航栏的内容移动右边一些才好一些。
在这里插入图片描述

1、修改主导航

我们现在的目标是让导航部分与网站名称分居左右两边,不要挤在一起,否则分不清是导航栏还是标题。如下图的效果:
在这里插入图片描述
我们来看看代码如何修改:

 <header>
     <nav class="navbar navbar-expand-sm navbar-toggleable-sm bg-dark bg-opacity-75  border-bottom box-shadow mb-3">
         <div class="container-fluid ">
             <div class="row  w-100">
                 <div class="col">
                     <a class="navbar-brand text-light" asp-area="" asp-controller="Home" asp-action="Index">WEBCSS</a>
                     <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                             aria-expanded="false" aria-label="Toggle navigation">
                         <span class="navbar-toggler-icon"></span>
                     </button>
                 </div>

                 <div class="col-1  collapse d-sm-inline-flex justify-content-end   ">

                     <ul class="navbar-nav flex-grow-1">
                         <li class="nav-item">
                             <a class="nav-link text-light" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
                         </li>
                         <li class="nav-item">
                             <a class="nav-link text-light" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
                         </li>
                         <li class="nav-item">
                             <a class="nav-link text-light" asp-area="">Bussiness</a>
                         </li>
                         <li class="nav-item">
                             <a class="nav-link text-light" asp-area="">Projects</a>
                         </li>
                         <li class="nav-item">
                             <a class="nav-link text-light" asp-area="">About</a>
                         </li>
                     </ul>

                 </div>

             </div>
         </div>
     </nav>
 </header>

改造的代码说明:
1、为网站名称单独增加了div容器,将网站名称和导航部分的div一起装入到一个div容器中作为container的子容器,并设置样式为row
2、我们主要在nav标签中增加了黑色背景的bg-dark
3、在container的子元素中设置了宽度w-100,否则它就收到了nav样式的约束不能充满全屏宽度。
4、增加了几个控制的导航标签如:Bussiness,projects,about

2、另起炉灶自己来布局

实际上在别人的代码上修改,又不完全理解别人的用意,修改起来总是 很被动的,那么我们索性自己来建一个自己的layout文件。这里比我忘记在_ViewStart.cshtml文件中,Layout修改为自己的布局文件即可。

@{
   // Layout = "_Layout";
    Layout = "myLayout";
}

接下来,新建一个满足Bootstrap基本结构的cshtml文件即可,基本结构如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title> WebDemo</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
</head>
<body>
    <div class="container">
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
    </div>
</body>
</html>

这就算是骨架搭建完毕,接下来,我们就自己建立自己的布局了。当然首先是建立自己的导航栏。

(1)、建立导航栏

注意,我这里使用的是bootstrap的5.3来调试的,请注意你的bootstrap版本,否则有可能会出现不兼容的奇怪现象。

 <nav class="navbar navbar-expand-md bg-dark" >
     <div class="container ">
          <a class="navbar-brand text-light" href="#">WebDemo</a>
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navContent">
              <span class="navbar-toggler-icon"/>
          </button>

         <div class="collapse navbar-collapse " id="navContent">
             <ul class="nav navbar-nav ">
                 <li class="nav-item">
                     <a class="nav-link text-light" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
                 </li>
                 <li class="nav-item">
                     <a class="nav-link text-light" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
                 </li>
                 <li class="nav-item">
                     <a class="nav-link text-light" asp-area="">Bussiness</a>
                 </li>
                 <li class="nav-item">
                     <a class="nav-link text-light" asp-area="">Projects</a>
                 </li>
                 <li class="nav-item">
                     <a class="nav-link text-light" href="#">Coperation</a>
                 </li>
                 <li class="nav-item ">
                     <a class="nav-link text-light" href="#">Services</a>
                 </li>
                 <li class="nav-item">
                     <a class="nav-link text-light" asp-area="">About</a>
                 </li>
             </ul>
         </div>
     </div>
 </nav>

注意:
如何让导航栏铺满全屏,导航栏的母容器div中使用container-fluid。如何让导航栏居右,brand居左,在ul>的class中使用ms-auto
运行效果如下:
在这里插入图片描述
当屏幕小到不能容下导航栏是就开始折叠,点击toggler就能弹出导航栏,效果如下:
在这里插入图片描述

(2)、增加二级导航

二级导航估计也是很多网站的必备,所以这里在改造之外还增加了这个二级导航的内容。也是特别的简单,只要在当前的导航nav-item下增加一个dropdown-menu的ul标签即可。如下代码:

 <li class="nav-item dropdown">
     <a class="nav-link dropdown-toggle text-light" href="#" id="navbarDropdown" role="button"
        data-bs-toggle="dropdown" aria-expanded="false">
         Services
     </a>
     <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
         <li><a class="dropdown-item" href="#">Service 1</a></li>
         <li><a class="dropdown-item" href="#">Service 2</a></li>
         <li><a class="dropdown-item" href="#">Service 3</a></li>
     </ul>
 </li>

在这里插入图片描述

3、增加登录按钮和登录对话框

对话框对于数据的增删改查,或者在互动操作中的提示也是使用频率非常高的,所以,这里也一并写出来。

(1)、登录按钮

在导航栏的最末增加一个nav-item

 <li class="nav-item">
     <button type="button" class="btn  p-0 userlogin" data-bs-toggle="modal" data-bs-target="#loginModal">
         <i class="fas fa-user"></i>
         <span id="userName">Login</span>
     </button>
 </li>

同时,增加一个登录对话框的容器,以模态方式modal-dialog

(2)、登录对话框

登录对话框,实际是增加了一个设置class为modal fade的div构成,最好有三级,分别是modal fade/modal-dialog/modal-content,代码如下:

 <div class="modal fade" id="loginModal" tabindex="-1" aria-labelledby="loginModalLabel" aria-hidden="true">
     <div class="modal-dialog">
         <div class="modal-content">
             <div class="modal-header">
                 <h5 class="modal-title" id="loginModalLabel">Login</h5>
                 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
             </div>
             <div class="modal-body">
                 <form>
                     <div class="form-group">
                         <label for="username">Username</label>
                         <input type="text" class="form-control" id="username">
                     </div>
                     <div class="form-group">
                         <label for="password">Password</label>
                         <input type="password" class="form-control" id="password">
                     </div>
                     <div class="form-group form-check">
                         <input type="checkbox" class="form-check-input" id="rememberMe">
                         <label class="form-check-label" for="rememberMe">Remember me</label>
                     </div>
                 </form>
             </div>
             <div class="modal-footer">
                 <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Login</button>
                 <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
             </div>
         </div>
     </div>
 </div>

效果如下:
在这里插入图片描述

(3)、漂亮登录对话框

可以说工作是完成了,但看起来不是很漂亮。如果想漂亮点,可以修改一下,代码如下:

  <div class="modal fade" id="loginModal" tabindex="-1" aria-labelledby="loginModalLabel" aria-hidden="true">
      <div class="modal-dialog">
          <div class="modal-content">
              <div class="modal-header">
                  <h5 class="modal-title" id="loginModalLabel">
                      <i class="fas fa-user-circle"></i> 登录
                  </h5>
                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
              </div>
              <div class="modal-body">
                  <div class="d-flex">
                      <img src="~/images/login2.jpg" alt="宣传图片" class="img-fluid" style="max-width: 30%;">
                      <form>
                          <div class="input-group mb-3">
                              <span class="input-group-text"><i class="fas fa-user"></i></span>
                              <input type="text" id="username" class="form-control" placeholder="请输入用户名">
                          </div>
                          <div class="input-group mb-3">
                              <span class="input-group-text"><i class="fas fa-lock"></i></span>
                              <input type="password" class="form-control" placeholder="请输入密码">
                              
                          </div>
                          <div class="form-group form-check">
                              <input type="checkbox" class="form-check-input" id="rememberMe">
                              <label class="form-check-label" for="rememberMe">记住密码</label>
                              <a class="register" href="#">注册账号</a>
                          </div>
                      </form>
                  </div>
              </div>
              <div class="modal-footer justify-content-right">

                  <button type="button" class="btn btn-primary " data-bs-dismiss="modal">登录</button>
                  
                  <button type="button" class="btn btn-secondary loginfooterbtn "  data-bs-dismiss="modal">退出</button>
                 
              </div>
          </div>
      </div>
  </div>

经过进一步改造,看起来更符合我们常规的登录对话框的模样了,如下图:
在这里插入图片描述

三、改造表格显示

表格的改造相对来说比较容易,无非就是将table的class设置为table即可,当然,这里的改造也包含对按钮进行了“操作部分的链接”更改为按钮样式了,效果如下:
在这里插入图片描述

表格的改造,也可以直接使用bootstrap的样式来改造,无须其他的css和js,代码如下(假定你已经有了数据库的控制类,可以得到一个表格)

<table class="table table-striped ">
        <thead>
        <tr class="table-primary">
            <th scope="col">姓名</th>
            <th scope="col">年龄</th>
            <th scope="col">性别</th>
            <th scope="col">邮件</th>
            <th scope="col">电话</th>
            <th scope="col">生日</th>
            <th scope="col">地址</th>
            <th scope="col">职业</th>
            <th scope="col">国籍</th>
            <th colspan="3">操作</th>
            </tr>
        </thead>
    <tbody >
            @foreach (var info in Model)
            {
            <tr class="table-small-text">
                    <td >@info.Name</td>
                    <td>@info.Age</td>
                    <td>@info.Gender</td>
                    <td>@info.Email</td>
                    <td>@info.PhoneNumber</td>
                    <td>@info.BirthDate.ToString("yyyy-MM-dd")</td>
                    <td>@info.Address</td>
                    <td>@info.Occupation</td>
                    <td>@info.Nationality</td>
                <td><a class="btn btn-secondary btn-sm" asp-action="Details" asp-route-id="@info.Index">详情</a></td>
                <td><a class="btn btn-secondary btn-sm" asp-action="Edit" asp-route-id="@info.Index">编辑</a></td>
                <td><a class="btn btn-secondary btn-sm" asp-action="DeleteByID" asp-route-id="@info.Index" onclick="return confirm('你确定要删除当前记录?')">删除</a></td>
          </tr>
            }
        </tbody>
    </table>

这里要注意的就是表格的颜色间隔显示效果,我们只要在table的class中加入table-striped样式即可达到。

四、改造表单显示

网站中,表单是不可少的,除非你只做静态页面,既然选择了asp.net core就决定了你不可能只做静态页面。其实在前面的登录页中我们就已经涉及到了表单的改造,这里我们以修改记录页面来举例:
没有改造之前,如下图:
在这里插入图片描述
我们进行改造后,效果如下:
在这里插入图片描述

当然,你也可以为其添加一些背景或者图标等来丰富它,这里我们仅仅演示的是form表单的控件如何使用。代码如下:

<form class="input-group ">
    <div class="row  g-3">
        <div class="col-2 text-end">
            <label for="Id" class="col-form-label-sm">ID:</label>
        </div>
        <div class="col-3 ">
            <input type="text" name="Index" class="form-control form-control-sm" value="@Model.Index" readonly />
        </div>
    </div>
    <div class="row  g-3">
        <div class="col-2 text-end">
            <label for="Name" class="col-form-label-sm ">姓名:</label>
        </div>
        <div class="col-3">
            <input type="text" name="Name" class="form-control form-control-sm" value="@Model.Name" />
        </div>
    </div>
    <div class="row  g-3">
        <div class="col-2 text-end">
            <label for="Age" class="col-form-label-sm">年龄:</label>
        </div>
        <div class="col-2">
            <input type="number" name="Age" class="form-control form-control-sm" value="@Model.Age" />
        </div>
    </div>
    <div class="row">
        <div class="col-2 text-end">
            <label for="Gender" class="col-form-label-sm " for="autoSizingSelect">性别:</label>
        </div>
        <div class="col-auto">
            <select name="Gender" class="form-select form-control-sm" id="autoSizingSelect">
                <!option value="男" @(Model.Gender == "男" ? "selected" : "")>男</!option>
                <!option value="女" @(Model.Gender == "女" ? "selected" : "")>女</!option>
            </select>
        </div>
    </div>
    <div class="row">
        <div class="col-2 text-end">
            <label for="Email" class="col-form-label-sm">邮件:</label>
        </div>
        <div class="col-3">
            <input type="email" name="Email" class="form-control form-control-sm" value="@Model.Email" />
        </div>
    </div>
    <div class="row">
        <div class="col-2 text-end">
            <label for="PhoneNumber" class="col-form-label-sm">电话:</label>
        </div>
        <div class="col-3">
            <input type="text" name="PhoneNumber" class="form-control form-control-sm" value="@Model.PhoneNumber" pattern="^(137|180|153|138|136|159|166|189|130|133)\d{8}$"
                   title="Phone number must start with one of the specified prefixes and be 11 digits in total." />
        </div>
    </div>
    <div class="row">
        <div class="col-2 text-end">
            <label for="BirthDate" class="col-form-label-sm">生日:</label>
        </div>
        <div class="col-4">
            <input type="date" name="BirthDate" class="form-control form-control-sm" value="@Model.BirthDate.ToString("yyyy-MM-dd")" />
        </div>
    </div>
    <div class="row">
        <div class="col-2 text-end">
            <label for="Address" class="col-form-label-sm">地址:</label>
        </div>
        <div class="col-8">
            <input type="text" name="Address" class="form-control form-control-sm" value="@Model.Address" />
        </div>
    </div>
    <div class="row">
        <div class="col-2 text-end">
            <label for="Occupation" class="col-form-label-sm">职业:</label>
        </div>
        <div class="col-2">
            <input type="text" name="Occupation" class="form-control form-control-sm" value="@Model.Occupation" />
        </div>
    </div>
    <div class="row">
        <div class="col-2 text-end">
            <label for="Nationality" class="col-form-label-sm">国籍:</label>
        </div>
        <div class="col-2">
            <input type="text" name="Nationality" class="form-control form-control-sm" value="@Model.Nationality" />
        </div>
    </div>
    <div class="row">
        <div class="col-6 text-center">
            <input class="btn btn-success" type="submit" value="保存" />
        </div>
        <div class="col-6 text-start">
            <a class="btn btn-primary" asp-action="Index">返回列表</a>
        </div>
    </div>
</form>

好了,基本上,对于动态页面所涉及的到数据显示部分我们都已经涉及到了。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/910447.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

scratch计算台阶 2024年9月scratch四级真题 中国电子学会 图形化编程 scratch四级真题和答案解析

目录 scratch计算台阶 一、题目要求 1、准备工作 2、功能实现 二、案例分析 1、角色分析 2、背景分析 3、前期准备 三、解题思路 1、思路分析 2、详细过程 四、程序编写 五、考点分析 六、推荐资料 1、入门基础 2、蓝桥杯比赛 3、考级资料 4、视频课程 5、p…

数据结构之二叉树前序,中序,后序习题分析(递归图)

1.比较相同的树 二叉树不能轻易用断言&#xff0c;因为树一定有空 2.找结点值 3.单值二叉树 4.对称二叉树 5.前序遍历

mysql死锁查看和解决

文章目录 一、MySQL死锁排查1、查看正在进行中的事务2、查看正在锁的事务3、查看等待锁的事务4、查询是否锁表5、查看最近死锁的日志6、杀死死锁 本文是基于Mysql8.0进行讲解。 本文只讲解如何查询数据库中是否有死锁及死锁的解决&#xff0c;若想了解更多关于死锁的信息&…

【STM32笔记】定时器(TIM1)无法工作

目录 项目场景&#xff1a; 问题描述 原因分析&#xff1a; 解决方案&#xff1a; 项目场景&#xff1a; 编译环境&#xff1a;keil uverison5 初次学习stm32&#xff08;stm32f103xx&#xff09;控制舵机&#xff08;mg90s&#xff09;时&#xff0c;舵机不转动&#xf…

Spark 程序开发与提交:本地与集群模式全解析

Spark 的介绍与搭建&#xff1a;从理论到实践-CSDN博客 Spark 的Standalone集群环境安装与测试-CSDN博客 PySpark 本地开发环境搭建与实践-CSDN博客 目录 一、本地开发与远程提交测试 &#xff08;一&#xff09;问题背景 &#xff08;二&#xff09;解决方案 集群环境准…

利用亚马逊AWS IoT核心和MQTT进行数据采集的综合指南

论文标题&#xff1a;A Comprehensive Guide on Data Acquisition Utilizing Amazon AWS IOT Core and MQTT 中文标题&#xff1a;利用亚马逊AWS IoT核心和MQTT进行数据采集的综合指南 作者信息&#xff1a; Tanishq. I. KohliPradip R. Selokar 两位作者均来自印度那格浦尔…

鸿萌数据迁移服务: 企业服务器整机在线热迁移, 实现不停机业务转移

天津鸿萌科贸发展有限公司从事数据安全服务二十余年&#xff0c;致力于为各领域客户提供专业的数据存储、数据恢复、数据备份、数据迁移等解决方案与服务&#xff0c;并针对企业面临的数据安全风险&#xff0c;提供专业的相关数据安全培训。 鸿萌数据迁移业务为众多企业顺利高效…

软件工程笔记一

目录 软件的概念、特性和分类 软件与程序 软件的特性 软件的分类 软件危机与软件工程 软件危机 如何摆脱软件危机? 软件工程概念的提出 什么是软件工程&#xff1f; 软件工程的若干定义 系统工程的目标 软件工程的基本原理 软件工程的目标 软件的质量特性 软件生存…

使用VS Code 安装VUE.js开发环境的搭建并创建第一个项目

初步掌握VUE.js开发环境的搭建并创建第一个项目的操作方法和实验步骤 题目 安装Visual Studio Code。安装VS Code汉化插件。安装Vue官方支持插件。使用VS Code运行第一个HTML页面。安装Node.js并验证其版本。验证npm版本。配置npm的下载镜像源。配置Yarn的下载镜像源。使用Vi…

Java | Leetcode Java题解之第541题反转字符串II

题目&#xff1a; 题解&#xff1a; class Solution {public String reverseStr(String s, int k) {int n s.length();char[] arr s.toCharArray();for (int i 0; i < n; i 2 * k) {reverse(arr, i, Math.min(i k, n) - 1);}return new String(arr);}public void reve…

【物联网技术】ESP8266 WIFI模块STA、AP、STA+AP、TCP/UDP透传工作模式介绍与AT指令介绍

前言:本文对ESP8266 WIFI模块STA、AP、STA+AP、TCP/UDP透传工作模式进行介绍;以及AT指令介绍,包括基础AT指令,WIFI功能AT指令、TCP/IP相关AT指令、常用AT指令实例进行介绍。 ESP8266 WIFI模块的接线及固件烧写可参考我的这篇博客:正点原子ATK-ESP8266 WIFI模块接线及固件…

【大数据学习 | kafka】kafka的数据存储结构

以上是kafka的数据的存储方式。 这些数据可以在服务器集群上对应的文件夹中查看到。 [hexuanhadoop106 __consumer_offsets-0]$ ll 总用量 8 -rw-rw-r--. 1 hexuan hexuan 10485760 10月 28 22:21 00000000000000000000.index -rw-rw-r--. 1 hexuan hexuan 0 10月 28 …

软件测试面试题——移动端

一、常用的adb命令有哪些&#xff1f; 命令含义adb devices展示当前电脑连接的设备&#xff0c;如果电脑上有多个手机&#xff0c;需要adb -s指定对应设备adb install xxx.apk直接安装xxx.apk到手机中&#xff0c;注意&#xff1a;必须打开手机设置里的USB安装adb install -r …

软考教材重点内容 信息安全工程师 第1章 网络信息安全概述

第 1 章 网络信息安全概述 1.1.1 网络信息安全相关概念 狭义上的网络信息安全特指网络信息系统的各组成要素符合安全属性的要求&#xff0c;即机密性、完整性、可用性、抗抵赖性、可控性。 广义上的网络信息安全是涉及国家安全、城市安全、经济安全、社会安全、生产安全、人身安…

Perforce《2024游戏技术现状报告》Part2:游戏引擎、版本控制、IDE及项目管理等多种开发工具的应用分析

游戏开发者一直处于创新前沿。他们的实践、工具和技术受到各行各业的广泛关注&#xff0c;正在改变着组织进行数字创作的方式。 近期&#xff0c;Perforce发布了《2024游戏技术现状报告》&#xff0c;通过收集来自游戏、媒体与娱乐、汽车和制造业等高增长行业的从业者、管理人…

网站架构知识之密钥认证(day020)

1.密钥认证 两个节点&#xff0c;通过密钥形式进行访问&#xff0c;不要输入密码&#xff0c;单向。 应用场景&#xff1a;部分服务使用前要求我们做密钥认证。 1.使用rsa算法创建公钥私钥 ssh-keygen -t rsa /root/.ssh/id_rsa&#xff0c; 私钥地址 /root/.ssh/…

《重学Java设计模式》之 工厂方法模式

《重学Java设计模式》之 建造者模式 《重学Java设计模式》之 原型模式 《重学Java设计模式》之 单例模式 模拟发奖多种商品 工程结构 奖品发放接口 package com.yys.mes.design.factory.store;public interface ICommodity {/*** Author Sherry* Date 14:20 2024/11/6**/voi…

微信小程序的汽车维修预约管理系统

文章目录 项目介绍具体实现截图技术介绍mvc设计模式小程序框架以及目录结构介绍错误处理和异常处理java类核心代码部分展示详细视频演示源码获取 项目介绍 系统功能简述 前台用于实现用户在页面上的各种操作&#xff0c;同时在个人中心显示各种操作所产生的记录&#xff1a;后…

Oh My Posh安装

nullSet up your terminalhttps://ohmyposh.dev/docs/installation/windows Git ee oh-my-posh: Windows上的oh-my-zsh&#xff0c;源地址 https://github.com/JanDeDobbeleer/oh-my-posh.git (gitee.com)https://gitee.com/efluent/oh-my-posh

unity 镜面 反射

URP 镜面 资源绑定 下载 namespace UnityEngine.Rendering.Universal { [ExecuteInEditMode]public class PlanarURP : MonoBehaviour{public bool VR false;public int ReflectionTexResolution 512;public float Offset 0.0f;[Range(0, 1)]public float Reflecti…