1、vue初识

学习笔记

第一篇 从 VS Code 开始

下载及配置修改

  1. VS Code 是微软推出的一款开源的代码编辑器。有“宇宙第一编辑器”之称，下载地址为https://code.visualstudio.com/ 。

  2. 版本选择： User Installer 和 System Installer 版本，下载 System Installer（系统安装）版本；

  3. 下载加速：如果下载较慢，将下载网址中的 az764295.vo.msecnd.net 更换为 vscode.cdn.azure.cn ，使用国内的镜像服务器加速。具体操作

    1. 先点击下载，
    2. 谷歌浏览器工具栏，点击更多操作即那三个点，点击下载内容，或者快捷键Ctrl + j
    3. 显示所有下载内容
    4. 右键复制连接地址，粘贴到文本文件
    5. 将网址中的 az764295.vo.msecnd.net 替换为 vscode.cdn.azure.cn
    6. 将新网址重新粘贴到浏览器地址栏

  4. 基本布局：

    1. 活动栏：最左侧的一列，包括资源管理器、查找、源代码管理（Git 应用）、debug 调式（一般用于后端的调理）、扩展（插件安装）
    2. 侧栏：点击活动栏中的图标，显示活动栏里具体的项。
    3. 编辑器：编写代码的区域
    4. 面板：左下角有个错误和警告的提示，点击出来的就是面板。该面板包括问题、输出、调试控制器、终端，常用的就是终端，比如建 Vue 项目时就会使用它，相当于 cmd。
    5. 状态栏：最下面这一条，包括警告和错误，行列代表鼠标所在位置，空格代表缩进（因为不同的格式标准由不同的格式要求，有的是 4 空格缩进，有的是两空格缩进，还可以使用 tab 缩进），还包括字符集，行尾序列，语言模式（不需要手动设置，他可以自动识别）。

  5. 安装插件

    1. Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code，适用于 VS Code 的中文（简体）语言包
    2. Prettier - Code formatter，是一个用于格式化代码的工具。它可以帮助开发者统一代码风格、提高代码可读性，并减少代码出错的可能性。Prettier 是一个独立的代码格式化工具，支持多种编程语言，如 JavaScript、TypeScript、CSS、HTML、JSON 等。

  6. VS Code 快捷键

    Ctrl + Shift + P --显示所有命令
    Shift + Alt + F --代码格式化
    Ctrl + Shift + Enter --上方插入一行
    Ctrl + Enter --下方插入一行
    Ctrl + d --选定字符串，如果按多次将添加选中另一个相同的关键字
    Ctrl + + --放大屏幕
    Ctrl + - --缩小屏幕
    Ctrl + k + z --全屏
    Esc + Esc --退出全屏
    Ctrl + / --切换行注释
    Shift + Alt + A --切换块注释

  7. 项目的新建与引入

    1. 文件夹的操作

      • 软件中没有新建文件夹功能，通过在桌面创建文件夹，在软件内打开文件夹就会自动引入该文件了。
      • 创建项目的目录：项目包括常见的 CSS、JS，这里可以点击第二个图标新建文件夹，第一个是新建文件，第三个是刷新，第四个是折叠（所有打开的文件夹都会关闭）。

    2. 文件的操作：点击菜单栏-文件-新建文件，就可以新建文件，也可以点击文件夹来创建文件。

      • 在 vscode 新建文件时，一定要加后缀，如果不加，它就相当于一个文本。

Git 配置

  1. Git 介绍
    Git 是一个开源的分布式版本控制系统，可以有效、高速地处理从很小到非常大的项目版本管理。 [1] 也是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件

  2. 下载及安装

    1. 下载：点击 vscode 中活动栏中的源代码管理器，如果未安装 Git，显示下载适用于Windows的Git,点击进入下载网站，https://git-scm.com/download/win ，选择对应版本下载，也可以直接登录网址下载。
    2. 镜像下载：下载较慢的话，进入阿里镜像网址：https://registry.npmmirror.com/binary.html?path=git-for-windows/ ，阿里镜像直接 Ctrl+F 搜索最新版本前缀即可，如：Git-2.42.0.2-64-bit.exe
    3. 安装
      1. 使用许可声明
      2. 选择安装目录
      3. 选择安装组件
        1. (NEW!) Add a Git Bash Profile to Windows Terminal：选择此选项后，Git 会将一个 Git Bash 配置文件添加到 Windows Terminal 中。Windows Terminal 是 Windows 上的一个多功能终端应用程序，添加 Git Bash 配置文件后可以直接在 Windows Terminal 中使用 Git Bash。
        2. (NEW!) Scalar (Git add-on to manage large scale repositories)：选择此选项后，Git 会安装 Scalar，这是一个 Git 的附加组件，用于管理大规模仓库。Scalar 提供了一些工具和功能，使大规模仓库的克隆、检出等操作更高效。
      4. 选择开始菜单文件夹
      5. 默认编辑器选择
        1. Git 安装程序里面内置了 10 种编辑器供你挑选，比如 Atom、Notepad、Notepad++、Sublime Text、Visual Studio Code、Vim 等等，默认的是 Vim ，选择 Vim 后可以直接进行到下一步
      6. 决定初始化新项目(仓库)的主干名字
        1. 在创建新的仓库时，Git 会使用默认的分支名称 master。
        2. 覆盖新的默认分支名称（Override the default branch name for new repositories）： 由于技术和文化因素的考虑，Git 2.28 版本引入了一个新的默认分支名称的选项。你可以将默认分支更改为其他名称（如 main）
      7. 调整你的 path 环境变量
        1. “Use Git from Git Bash only”（仅使用 Git Bash 中的 Git）： 这是最谨慎的选择，因为它不会修改你的系统环境变量（PATH）。你只能在 Git Bash 中使用 Git 命令行工具。
        2. “Git from the command line and also from 3rd-party software”（从命令行和第三方软件中使用 Git）： 这是推荐的选项，它会将一些最基本的 Git 包装器添加到你的系统环境变量（PATH），以避免在环境中混乱地添加可选的 Unix 工具。你将能够从 Git Bash、命令提示符和 Windows PowerShell 中使用 Git，并且可以在 PATH 中寻找 Git 的任何第三方软件。
        3. “Use Git and optional Unix tools from the Command Prompt”（从命令提示符中使用 Git 和可选的 Unix 工具）： 这个选项会将 Git 和可选的 Unix 工具都添加到你的系统环境变量（PATH）中。需要注意的是，这将覆盖 Windows 中的一些工具（如"find"和"sort"）。只有当你完全理解这些影响并愿意接受时，才应选择这个选项。
      8. 选择 HTTPS 后端传输，使用 OpenSSL 库即可
      9. 配置行尾转换
      10. 配置 Git Bash 使用的终端模拟器
      11. git pull 默认行为
      12. 选择凭证助手，使用跨平台的 Git Credential Manager（GCM）。Git Credential Manager 是一个凭据助手工具，可以帮助您在访问远程 Git 存储库时自动处理身份验证。它能够安全地存储并检索您的凭据。如果您选择此选项，Git 会配置使用 GCM 作为凭据助手。
      13. 配置额外选项，默认选择即可
      14. 配置实验选项，一般不用开启，直接下一步安装即可

  3. 配置

    1. 检查安装是否成功
      1. 桌面空白处右键：上下文菜单显示：Open Git GUI here 和 Open Git Bash here两项
      2. 检查版本：命令行窗口输入 git --version 或者 git -v 可以验证
    2. 设置全局用户名和邮箱
      1. 在使用 Git 之前，建议设置全局的用户名称和电子邮件地址，这样每次提交代码时就可以自动关联您的身份信息。
      2. 打开命令行窗口，设置 Git 全局用户名称和电子邮件地址的步骤 
        git config --global user.name "Your Name"
git config --global user.email "email@example.com"
    3. 查看用户名和邮箱
      1. 方式一、配置完的用户名和邮箱地址会被写入 C:/Users/用户名文件夹/.gitconfig 文件中，可以使用记事本查看配置信息。
      2. 方式二：打开命令行窗口，输入以下命令，如果显示用户名和邮箱，则表示已成功配置了全局用户信息。如果未显示任何输出，则表示尚未设置全局用户信息。 
        git config --global user.name
git config --global user.email
    4. 配置完成后，重新打开 vscode，点击活动栏的源代码管理，侧栏显示打开文件夹和克隆仓库

  4. 使用

    1. 克隆 Gitee 中的仓库到本地

      1. 打开配置
        1. 方式一：点击活动栏的源代码管理，点击侧栏的克隆仓库,显示远程 URL 地址的输入框。
        2. 方式二：快捷键Ctrl + Shift + P,调出用于执行命令的输入框,在输入框中填入Git: Clone,（如果可以看到的话，也可直接选择），也可以显示远程 URL 地址的输入框。
      2. 配置远程库，在输入框中，输入远程仓库 URL 地址，回车
      3. 选择本地存储位置
      4. 克隆完成

    2. 提交项目到远程库

      1. 初始化仓库（第一次使用）
        1. 方式一：点击活动栏的源代码管理，提示创建本地仓库。点击侧栏初始化仓库，侧栏变为源代码管理界面，显示消息输入框和提交按钮。同时，项目目录下自动创建隐藏文件夹.git。
        2. 方式二：快捷键Ctrl + Shift + P,调出用于执行命令的输入框,在输入框中填入Git: Initialize Repository,（如果可以看到的话，也可直接选择），选择项目文件夹
      2. 配置远程库
        1. 方式一：点击活动栏的源代码管理，点击侧栏右上角的...,在下拉菜单中，依次选择远程-添加远程存储库,调出用于执行命令的输入框,在输入框中填入远程 URL 地址，回车，再在输入框中输入远程存储库名字，回车，配置完毕。
        2. 方式二：快捷键Ctrl + Shift + P,调出用于执行命令的输入框，在输入框中填入Git: Add Remote,（如果可以看到的话，也可直接选择），后面操作同上
      3. 将修改保存到缓存区
        1. 点击活动栏的源代码管理，更改菜单下显示所有已修改待缓存的文件。
        2. 将鼠标悬浮更改菜单的二级文件上，右侧显示+图标，即暂存更改；悬浮在更改菜单上，右侧显示+图标，即暂存所有更改
        3. 根据需要点击暂存所有更改或暂存更改，显示暂存的更改菜单，说明已经保存到缓存区。
        4. 命令行：git add 项目名
      4. 描述这次提交的内容 (推送到本地库中)
        1. 输入框输入要描述的内容
        2. 点击提交
        3. 命令行：git commit -m “描述的内容”
      5. 推送到远端仓库
        1. 点击右上角三个小点...
        2. 依次点击拉取、推送--推送到
        3. 选择远程URL库
        4. 命令行：git push origin master

第二篇 Markdowm

简介

  1. Markdown 是一种轻量级标记语言，创始人为约翰·格鲁伯（John Gruber）。 它允许人们使用易读易写的纯文本格式编写文档，然后转换成有效的 XHTML（或者 HTML）文档。这种语言吸收了很多在电子邮件中已有的纯文本标记的特性。
  2. 由于 Markdown 的轻量化、易读易写特性，并且对于图片，图表、数学式都有支持，许多网站都广泛使用 Markdown 来撰写帮助文档或是用于论坛上发表消息。 如 GitHub、Reddit、Diaspora、Stack Exchange、OpenStreetMap 、SourceForge、简书等，甚至还能被使用来撰写电子书。

编辑器

  1. Typora 是一款简洁而强大的 Markdown 编辑器。它提供实时预览功能，让用户可以即时查看文档的渲染效果。Typora 采用所见即所得的编辑模式，没有繁杂的标记符号，用户可以专注于写作而不必分心处理格式。此外，Typora 还支持数学公式、表格、图像等丰富的 Markdown 语法和扩展功能。总之，Typora 是一款易用且功能丰富的 Markdown 编辑器，适用于撰写各种类型的文档。
  2. VSCode 是当下最流行的代码编辑器，拥有丰富的扩展，这也使其成为最强大的文本编辑器之一，搞定 Markdown 自然不在话下。与上面提到的编辑器相比，VSCode 的明显优势有：
    1. 集成的布局：大纲（outline）、工作区（workspace）；
    2. 强大的补全：LaTeX 公式；
    3. 丰富的扩展：方便整合其他工具（详见下文的功能扩展部分）；

扩展插件

  1. 必备扩展： Markdown All in One

    1. 提供了常用操作便利的快捷键

      Ctrl + B 粗体
      Ctrl + I 斜体
      Alt + S 删除线
      Ctrl + Shift + ] 标题(uplevel)
      Ctrl + Shift + [ 标题(downlevel)
      Ctrl + M Toggle math environment
      Alt + C Check/Uncheck task list item

    2. 支持目录

      光标定位到创建目录的位置
      按下 Ctrl + Shift + p，打开命令面板
      输入：mark，选择Markdown All in One：创建目录
      基于目前的标题建立目录，如果新建了一个新的标题，可以保存，保存之后目录就更新了

    3. 一边书写一边预览(Ctrl + Shift + V or Ctrl + K V)

    4. 可轻松转换为 HTML 文件和 PDF 文件

    5. 优化了 List editing 的编辑

    6. 可格式化 table (Alt + Shift + F) 以及 Task list (use Alt + C to check/uncheck a list item)

    7. 支持特殊数学符号渲染

  2. 预览插件 Markdown Preview Enhanced

  3. 图片粘贴 Paste Image

  4. 转为 PDF Markdown Pdf

  5. 主题插件 One Dark Pro

  6. 快捷键插件 Intellij IDEA Key Bindings

  7. 工具 MarkdownTools

  8. 发布到 limfx LimfxCodeEx

  9. 发布到博客园 Cnblogs Client For VSCode

    • 安装后会在 activity bar 中出现写代码小人的图标，点击 Login 按钮登录
    • 登录后会看到自己博客的最新随笔
    • 在编辑器中点击鼠标右键，通过上下文菜单“博客园关联博文”可进行关联或取消关联
    • 点击对应的随笔标题就可以编辑（博文会自动下载到工作空间，默认路径是~/Documents/Cnblogs）
    • 在编辑器中点击鼠标右键，通过上下文菜单“保存至博客园”可以上传到自己的博客
    • 如果是本地已有的 markdown 文件或者新建的 markdown 文件，也是通过右键“保存至博客园”上传到自己的博客。

基础语法

  1. 标题

    #+空格+标题：表示一级标题
    ##+空格+标题：表示二级标题，
    以此类推，最高六级标题
    快捷键: Ctrl+ Shift + [ 或 Ctrl+ Shift + ]

  2. 粗体斜体

    两个**+内容+**：表示粗体，快捷键：Ctrl+b
    一个*+内容+*：表示斜体，快捷键：Ctrl+i

  3. 段落与换行

    如果行与行之间没有空行，视为同一段落
    如果行与行有空行，视为不同段落
    段内换行，在上一行结尾插入两个以上空格再回车。

  4. 代码块

    var i = 1
i = i + 1

  5. 图片
    Alt text

  6. 表格

    时间 地点 人物 备注
    2022 年 5 月 北京 张三 主管
    2022 年 5 月 上海 李四 职员

第三篇 微信小程序开发

运行环境

  1. 安装 Node.js

    1. 下载地址：https://nodejs.org/zh-cn/ ，win10 可直接下载最新稳定版，如 v16.17.1；注意：server 2008R2 服务器上只能安装 v13 及以下 Node.js 版本，可以网站以往的版本中下载相应版本的 msi 文件进行安装。
    2. node.js 集成 npm，npm 不需要单独安装
    3. 安装好后 cmd 命令检测是否成功：

      node -v --查看 node 版本 ；
      npm -v --查看 npm 版本

    4. 如果有警告：npm WARN config global --global, --local are deprecated. Use --location=global instead。打开 node.js 安装目录，用记事本打开 npm.cmd 文件，将文件里的 prefix -g 改为 prefix --location=global
    5. 建议安装 Node.js 18+ 以上版本

  2. 安装微信开发者工具

  3. 安装移动端框架，如 Vant 框架

创建小程序

  1. 创建小程序，选择“不使用云服务”，“不使用模板”

  2. 初始化项目，右键项目，在外部终端窗口中打开

    npm init

初始化后，项目中生成 package.json 文件

  1. 安装 vant

    npm i @vant/weapp -S --production

安装完成后，项目中生成 node_modules 包

  1. 修改 app.json 配置文件，去掉

    "style": "v2", --去掉

  2. 修改 project.config.json 配置文件， 添加

    {
  "packNpmManually": true,
  "packNpmRelationList": [
    {
      "packageJsonPath": "./package.json",
      "miniprogramNpmDistDir": "./"
    }
  ]
}

  3. 构建项目，点击工具--构建 npm，生成 miniprogram_npm 的文件夹

  4. 测试 vant 组件

    1. 在 app.json 中添加
      "usingComponents": {
    "van-button": "@vant/weapp/button/index"
},
    2. 在 index.wxml 中添加
      <!--index.wxml-->
<scroll-view class="scrollview" scroll-y type="list">
  <view class="container">
    <van-button type="default">默认按钮</van-button>
    <van-button type="primary">主要按钮</van-button>
    <van-button type="info">信息按钮</van-button>
    <van-button type="warning">警告按钮</van-button>
    <van-button type="danger ">危险按钮</van-button>
  </view>
</scroll-view>

添加页面，配置 tabbar

  1. 在 app.json 文件中增加页面

         "pages": [
       "pages/home/home",
       "pages/search/search",
       "pages/cart/cart",
       "pages/user/user",
       "pages/index/index"
     ],

  2. 新建 components 文件夹，新建自定义 tabbar 控件

  3. 配置 tabbar.wxml

    <!-- components/tabbar/tabbar.wxml -->
<!-- placeholder="true" --占位空间 -->
<van-tabbar active="{{active}}" bind:change="onTabChang" placeholder="true">
  <van-tabbar-item icon="home-o">首页</van-tabbar-item>
  <van-tabbar-item icon="friends-o">列表</van-tabbar-item>
  <van-tabbar-item icon="search">搜索</van-tabbar-item>
  <van-tabbar-item icon="cart-o">购物车</van-tabbar-item>
  <van-tabbar-item icon="user-o">我的</van-tabbar-item>
</van-tabbar>

  4. 在 app.json 中引用 tabbar 组件，命名 CustomTabbar，同时引用 vant-tabbar 组件

       "usingComponents": {
       "CustomTabbar":"./components/tabbar/tabbar",
       "van-tabbar": "@vant/weapp/tabbar/index",
       "van-tabbar-item": "@vant/weapp/tabbar-item/index",
       "van-button": "@vant/weapp/button/index"
   },

  5. 在 home.wxml 引用 CustomTabbar 组件，也在其他页面引用该控件

    <!--pages/home/home.wxml-->
<CustomTabbar></CustomTabbar>

  6. Tabs 切换效果的实现

    1. app.js 中定义 globalData 参数
       // app.js
   App({
     globalData: {
       active: 0,
     },
   });
    1. tabbar.js 中声明生命周期
        // tabbar.js
    // 组件的生命周期在该字段中声明
    lifetimes: {
        //在组件实例进入页面节点树时执行
        attached: function () {
            const app = getApp();
            this.setData({
                active: app.globalData.active
            })
        }
    },
    1. tabbar.js 中定义 onTabChange
      // tabbar.js
  methods: {
    onTabChang(e){
      //
    }
  }
    1. tabbar.js 中，通过 onTabChange 修改 app.globalData.active，使用 navigateTo 导航到指定页面
    // tabbar.js
 methods: {
     onTabChang(e) {
         const app = getApp();
         //每次点击tab时设置全局变量的值
         app.globalData.active = e.detail
         switch (e.detail) {
             case 0:
                 wx.navigateTo({
                     url: '/pages/home/home',
                 })
                 break;
             case 1:
                 wx.navigateTo({
                     url: '/pages/index/index',
                 })
                 break;
             case 2:
                 wx.navigateTo({
                     url: '/pages/search/search',
                 })
                 break;
             case 3:
                 wx.navigateTo({
                     url: '/pages/cart/cart',
                 })
                 break;
             case 4:
                 wx.navigateTo({
                     url: '/pages/user/user',
                 })
                 break;
             default:
                 break;
         }
     }
 }

定义搜索栏

  1. 修改全局 app.wxss

    /**app.wxss**/
.container {
  height: 100%;
  text-align: center;
}
swiper {
  margin-top: 10px;
}
swiper-item image {
  width: 100%;
  height: 100%;
}

  2. 配置 Search 搜索栏，实现页面跳转

    1. 配置 home.json
        "usingComponents": {
     "van-search": "@vant/weapp/search/index"
 }
    1. 配置 home.js
       data: {
     value:""
   },

   onSearch(e) {
     console.log(e)
     this.setData({
         value : e.detail
     })
     console.log(this.data.value)
     wx.redirectTo({
       url: '/pages/search/search',
     })
     const app = getApp()
     app.globalData.active = 2
   },
    1. 配置 home.wxml
      <!--pages/home/home.wxml-->
<view class="container">
  <van-search
    v-model="{{ value }}"
    shape="round"
    background="red"
    placeholder="请输入搜索关键词"
    bind:search="onSearch"
  />
</view>
<CustomTabbar></CustomTabbar>

轮播图

  1. 新建静态文件夹 images
  2. 在 home.js 中配置轮播图参数
    data: {
        indicatorDots: true,  //是否显示面板指示点
        autoplay: true,   //是否自动切换
        interval: 2000,   //自动切换时间间隔
        duration: 500,    //滑动动画时长
    },
  1. 在 home.wxml 中配置轮播图
<!-- 轮播图 -->
<swiper
  indicator-dots="{{indicatorDots}}"
  autoplay="{{autoplay}}"
  interval="{{interval}}"
  duration="{{duration}}"
>
  <swiper-item>
    <image src="/images/1.jpg" mode="" />
  </swiper-item>
  <swiper-item>
    <image src="/images/2.jpg" mode="" />
  </swiper-item>
</swiper>

分类板块

  1. 在 component 文件下新建文件夹 category

  2. 新建组件 category

  3. 配置 category

    1. 配置 category.js
      properties: {
  href:{
    type:String,
    value:""
  }
},
    2. 配置 category.wxml
      <view class="category">
  <view>
    <image class="category_img" src="{{href}}" mode="" />
  </view>
  <view><text>京东超市</text> </view>
</view>
    3. 配置 category.wxss
      /* components/categony/categony.wxss */
.category_img {
  width: 120rpx;
  height: 120rpx;
}
.category {
  width: 150rpx;
  float: left;
}
    4. 在 app.json 中注册
        "usingComponents": {
    "Category":"./components/categony/categony",
    }

  4. home.wxml 使用 category 组件

    <Category href="/images/1.jpg"></Category>

  5. 循环图片

    <view>
  <Category
    wx:for="{{10}}"
    wx:key="item"
    href="/images/{{item+1}}.jpg"
  ></Category>
</view>

列表

第四篇 c#

NET CLI 常用命令

  1. 查看版本
dotnet --version
  1. 查看命令
dotnet new list
  1. 显示
模板名 短名称 语言 标记
ASP.NET Core Web API webapi [C#],F# Web/WebAPI
ASP.NET Core Web 应用 webapp,razor [C#] Web/MVC/Razor Pages
ASP.NET Core Web 应用(MVC) mvc [C#],F# Web/MVC
ASP.NET Core 与 Angular angular [C#] Web/MVC/SPA
ASP.NET Core 与 React.js react [C#] Web/MVC/SPA
ASP.NET Core 空 web [C#],F# Web/Empty
global.json file globaljson Config
NuGet 配置 nugetconfig Config
Web 配置 webconfig Config
控制台应用 console [C#],F#,VB Common/Console
类库 classlib [C#],F#,VB Common/Library
解决方案文件 sln,solution Solution

创建项目

  1. 在文件资源管理器的地址栏输入“cmd”，点击回车键，进入到 cmd 界面

    1. 命令
    dotnet new web -o app             //指定项目名称 app
dotnet new web -o app -f net6.0   //指定项目名称同时指定版本,f 代表 framework
    1. 使用 vscode 打开
    cd app
code .

  2. 项目中的主要文件

    1. Program.cs

      // Program.cs
var builder = WebApplication.CreateBuilder(args);
var app = builder.Build();
app.MapGet("/", () => "Hello World!");
app.Run();

    2. app.csproj，查看.net 版本及引用情况

      <Project Sdk="Microsoft.NET.Sdk.Web">
    <PropertyGroup>
      <TargetFramework>net6.0</TargetFramework>
      <Nullable>enable</Nullable>
      <ImplicitUsings>enable</ImplicitUsings>
    </PropertyGroup>
  </Project>

    1. launchSettings.json，可简化配置

      {
  "profiles": {
    "app": {
      "commandName": "Project",
      "dotnetRunMessages": true,
      "launchBrowser": true,
      "applicationUrl": "http://localhost:5000",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    }
  }
}

  3. 运行项目

dotnet run
dotnet watch run  //热启动
  1. 编译项目，Debug/netx.0 文件夹下，生成 app.exe
dotnet build
  1. 发布项目,Debug/netx.0/publish 文件夹下,生成配置文件 web.config
dotnet publish
  1. 测试项目，使用 Postman 测试

api 示例

//Get 返回字符串
app.MapGet("/todo_1", () => {
    return Results.Ok("Hello World! To me!");
});

显示：

//Get 返回对象
app.MapGet("/todo_2", () => {
    return Results.Ok(new {
        Name = "张三",
        Age = 30
    });
});

显示：

//Get 返回数组
app.MapGet("/todo_3", () => {
    List<object> p = new();
    p.Add(new {
        Name = "张三",
        Age = 30
    });
    p.Add(new {
        Name = "李四",
        Age = 40
    });
    return Results.Ok(p);
});

显示：

//Get 返回数组(带参数)
app.MapGet("/todo_4", (string? name,int? age) => {
    List<object> p = new();
    p.Add(new {
        Name = name,
        Age = age
    });
    p.Add(new {
        Name = name,
        Age = age
    });
    return Results.Ok(p);
});

// Post 返回数组（带参数）
app.MapPost("/todo_5", (string? name, int? age) =>
{
    List<object> p = new();
    p.Add(new
    {
        Name = name,
        Age = age
    });
    p.Add(new
    {
        Name = name,
        Age = age
    });
    return Results.Ok(p);
});

// Post 文件上传
app.MapPost("/Upload", async (HttpRequest httpRequest) =>
{
    var file = httpRequest.Form.Files.FirstOrDefault();
    if (file != null)
    {
        using FileStream ms = new(AppContext.BaseDirectory + "File-" + Guid.NewGuid(), FileMode.Create);
        await file.CopyToAsync(ms);
    }
});

文件上传

  1. 核心代码
  /// <summary>
  /// FileStream对文件流读写操作，参数path：保存地址；mode：操作，如Create（创建）
  /// 文件上传到.\bin\Debug\netx.0目录下
  /// 文件名去除GUID中间的-
  /// </summary>
  /// <param name="file"></param>
  /// <returns></returns>
  [HttpPost]
  public async Task Upload(IFormFile file)
  {
      if(file != null)
      {
          using FileStream ms = new(AppContext.BaseDirectory + Guid.NewGuid().ToString("N"), FileMode.Create);
          await file.CopyToAsync(ms);
      }
  }

第五篇 vue

使用 vite 构建 vue 项目

  1. 创建项目
npm init vite@latest  --安装最新版本
或
npm init vite

依次输入项目名称、选择 vue、选择使用 js 或者 ts

  1. 引入依赖
cd 项目名称
npm install
  1. 启动项目
npm run dev

  1. 配置 vue-router

    1. 安装
    npm install vue-router@4 -S
npm install vuex@next -S
    1. 创建 router 实例,src 目录下，添加 router/index.js
    import { createRouter, createWebHashHistory } from "vue-router";
// 创建路由对象
const routes = [
  //   {
  //     path: "/",
  //     name: "home",
  //     component: () => import("../views/layout.vue"),
  //   },
];
const router = createRouter({
  // createWebHashHistory hash 路由
  // createWebHistory history 路由
  // createMemoryHistory 带缓存 history 路由
  history: createWebHashHistory(),
  routes,
});

export default router;
    1. 导入 main.js
    import router from "./router"; // 引入路由
//...
createApp(App).use(router).mount("#app");

  2. 配置 Element-Plus

    1. 安装
    npm install element-plus -save
npm install @element-plus/icons-vue
    1. 引入
    //main.js
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";

createApp(App).use(ElementPlus).mount("#app");
    1. 测试 Button 按钮测试
    <template>
  <el-button>Default</el-button>
  <el-button type="primary">Primary</el-button>
  <el-button type="success">Success</el-button>
  <el-button type="info">Info</el-button>
  <el-button type="warning">Warning</el-button>
  <el-button type="danger">Danger</el-button>
</template>

  3. 配置 axios

    1. 安装
    npm install axios -save
    1. 引入
    import axios from "axios";
    1. 二次封装
    import axios from "axios";
axios.defaults.baseURL = "http://127.0.0.1:5000";
axios.interceptors.request.use((config) => config);
axios.interceptors.response.use(
  (res) => res,
  (err) => Promise.reject(err)
);
export default axios;

文件上传实例

  1. 配置服务端 API
var builder = WebApplication.CreateBuilder(args);
//  配置跨域
builder.Services.AddCors(options =>
{
    options.AddPolicy("CorsPolicy", policy =>
    {
        policy.AllowAnyOrigin()
              .AllowAnyHeader()
              .AllowAnyMethod();
    });
});

var app = builder.Build();

//使用跨域
app.UseCors("CorsPolicy");

// Post 文件上传
app.MapPost("/Upload", async (HttpRequest httpRequest) =>
{
    var file = httpRequest.Form.Files.FirstOrDefault();
    if (file != null)
    {
        using FileStream ms = new(AppContext.BaseDirectory + "File-" + Guid.NewGuid(), FileMode.Create);
        await file.CopyToAsync(ms);
    }
});

app.Run();
  1. 单文件即时上传
<script setup></script>

<template>
  <!-- 引入Card组件 -->
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>单文件上传</span>
      </div>
    </template>
    <!-- 引入Upload组件 -->
    <div>
      <!--action：上传url，只要有url就直接上传  -->
      <el-upload class="upload-demo" action="http://location:5000/Upload"
        ><el-button type="primary">选择文件即时上传</el-button></el-upload
      >
    </div>
  </el-card>
</template>

<style scoped></style>
  1. 文件上传限制
<script setup>
import { ElMessage } from "element-plus";

// 上传文件之前的钩子函数
const beforeUpload = (file) => {
  const isJPG = file.type === "image/jpeg"; //文件类型限制
  const isLt2M = file.size / 1024 / 1024 < 2; //文件大小限制2M
  if (!isJPG) {
    ElMessage.warning("上传的图片只能是JPG格式");
  }
  if (!isLt2M) {
    ElMessage.warning("上传的图片大小不能超过2MB");
  }
  return isJPG && isLt2M;
};
// 超出数量限制时，执行的钩子函数
const handeExceed = () => {
  ElMessage.warning("超出最大文件数！");
};
</script>

<template>
  <!-- 引入Card组件 -->
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>单文件上传</span>
      </div>
    </template>
    <!-- 引入Upload组件 -->
    <div>
      <!--action：上传url，只要有url就直接上传
          before-upload:上传文件之前的钩子，参数为上传的文件
          limit：允许上传文件的最大数量
          on-exceed：当超出限制时，执行的钩子函数 
      -->
      <el-upload
        class="upload-demo"
        action="http://127.0.0.1:5000/Upload"
        :before-upload="beforeUpload"
        :limit="1"
        :on-exceed="handeExceed"
        ><el-button type="primary">选择文件</el-button></el-upload
      >
    </div>
  </el-card>
</template>
  1. 提交确认后再上传
    关键点：http-request：覆盖默认的 Xhr 行为，允许自行实现上传文件的请求
    获取选中文件信息，获取 name，size，type 信息
import { reactive } from "vue";
import { useRouter } from "vue-router";
import { ElMessage, ElNotification } from "element-plus";
import axios from "./http";
const router = useRouter();
// 定义form表单
const form = reactive({
  name: "",
  file: "",
});
// 覆盖默认的 Xhr 行为，允许自行实现上传文件的请求
const uploadFile = (params) => {
  // console.log(params); //获取选中文件信息
  form.file = params.file; //将选中文件信息赋值给form表单
};
// 提交
const onSubmit = async () => {
  // console.log(form);
  let formdata = new FormData();
  formdata.append("name", form.name);
  formdata.append("file", form.file);
  let res = await axios.post("/Upload", formdata, {
    Headers: { "Content-type": "multipart/form-data" },
  });
  console.log(res);
  if (res.status === 200) {
    ElNotification({
      title: "上传成功",
      duration: 2000,
      type: "success",
    });
  }
  // 跳转
  router.push("/home");
};

<template>
  <!-- 引入Card组件 -->
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>单文件上传</span>
      </div>
    </template>
    <!-- 引入Upload组件 -->
    <div>
      <el-form :model="form" label-width="120px">
        <el-form-item label="">
          <el-upload
            class="upload-demo"
            action=""
            :limit="1"
            :on-exceed="handeExceed"
            :http-request="uploadFile"
            :before-upload="beforeUpload"
            ><el-button type="primary">选择文件</el-button></el-upload
          ></el-form-item
        >
        <el-form-item label="">
          <el-button type="primary" @click="onSubmit">提交</el-button>
        </el-form-item></el-form
      >
    </div>
  </el-card>
</template>

vue常用函数

vue_map使用

// 测试数据集list
const list = [
  { id: 1, name: "张三", sex: "男", age: 20 },
  { id: 2, name: "李四", sex: "女", age: 30 },
  { id: 3, name: "王五", sex: "男", age: 40 },
];
// 1、获取数据集的一个字段组成新数组
let res1 = list.map((item) => item.name);
console.log(res1);
// 输出：
// ['张三', '李四', '王五']

// 2、重名数据集的某个字段组成新的数组
let res2 = list.map((item) => ({ newname: item.name }));
console.log(res2);
// 输出：
// [{newname: '张三'},{newname: '李四'},{newname: '王五'}]

// 3、重名数据集的多个字段组成新的数组
let res3 = list.map((item) => ({ newname: item.name, newid: item.id }));
console.log(res3);
// 输出：
// [{newname: '张三', newid: 1},{newname: '李四', newid: 2},{newname: '王五', newid: 3}]

// 4、拼接数据集的多个字段组成新的数组
let res4 = list.map((item) => ({ newname: item.name + item.id }));
console.log(res4);
// 输出：
// [{newname: '张三1'},{newname: '李四2'},{newname: '王五3'}]

部署服务器

搭建 IIS(WEB)服务

Windows server 2008搭建

  1. Windows Server 2008上通过“添加角色和功能”，桌面Windows上通过“启用和关闭Windows功能”来安装和配置IIS。
  3. 勾选Web服务和“IIS 管理控制台”：
  4. 打开折叠菜单，勾选“应用程序开发”和“IIS6管理兼容性”

Windows server 2016搭建

  1. 点击 Windows server 2016 系统的开始菜单，选择打开【服务器管理器】。
  2. 在服务器管理器的界面中点击配置此本地服务器下方的【添加角色和功能】。
  3. 开启添加角色和功能向导的界面，按向导开始进行安装配置操作。点击【下一步】继续。
  4. 因需要的是在本机进行安装配置，这里的操作选项点击【基于角色或基于功能的安装】。点击【下一步】继续。
  5. 从服务器池中选择服务器，这里选择是本机服务器。点击【下一步】继续。
  6. 在服务器角色中勾选【web 服务器(IIS)】，完成相关的选项后点击【下一步】继续。
  7. 进入需要安装功能的选项界面，如果需要安装.NET framework 3.5 该功能，可以勾选该选项。点击【下一步】继续。
  8. 进入角色服务选择界面，例如这里需要 IIS 网站支持 ASP，则在应用程序开发的下方勾选 ASP,如果还需要其他功能的支持，可以根据需要进行对应功能的勾选。完成选择后点击【下一步】继续。
  9. 完成上面的相关操作之后，基本就到了向导的最后一步【确认】操作，确认没有需要修改之处，便点击【安装】开始安装操作。
  10. 完成 IIS 服务的安装之后，打开 IE 浏览器，输入本机或者 127.0.0.1 的地址出现 lnternet Information Services 的界面，表示 IIS 服务安装成功。
  11. 在服务器管理器主界面,选择“工具”>“Internet 信息服务（IIS）管理器”选项，即可打开 IIS 管理器。
  12. 在“Internet 信息服务（IIS）管理器”中单击左侧窗格的“网站”选项，在展开的列表中右击默认站点“Default Web Site”，在弹出的快捷菜单中选择“管理网站”>“浏览”菜单项。

安装.NetCore x.0 运行时

  1. 下载地址：https://dotnet.microsoft.com/zh-cn/download/dotnet
  2. 选择项目对应版本，以 .NET 6.0 为例，最新版本是 6.0.21
  3. 下载托管捆绑包，其中包括 .NET 运行时和 IIS 支持安装.net core 运行时及 iis 支持，
  4. 下载链接名称：Hosting Bundle，下载后文件名：例dotnet-hosting-x.x.xx-win.exe
  5. 下载很慢，可以用站长工具查询该站点 DNS 的 TTL 值较小的 ip，添加到 hosts 文件
  6. 安装完成后，打开 IIS 管理器，双击“模块”，检查是否有 AspNetCoreModuleV2 模块，如果有表示安装成功

创建网站

  1. 在“Internet 信息服务（IIS）管理器”窗口，右键“网站”，选择“添加网站”

    1. 网站名称：自定义
    2. 物理路径
      1. 选择本机发布的文件夹
      2. 点击“测试设置”，查看结果，如果有“无法验证对路径 xxxxxx 访问”的警告
        1. 添加好了物理路径和站点以后，点击右侧的基本设置；
        2. 再点击测试设置；
        3. 会发现测试不成功，提示：无法验证对路径，是用户权限问题；
        4. 关闭，点击：链接为；
        5. 勾选特定用户；
        6. 输入你电脑的用户名和密码即可，这样就得到了访问权限；
        7. 如果你的电脑没有设置密码，可以新建一个账户和密码专门用于网站授权，这个用户可以不用再电脑上登陆
    3. 绑定 IP 地址：选择本机 ip，并配置端口

  2. 在“Internet 信息服务（IIS）管理器”窗口，选择“应用程序池”，

    1. 选择网站对应的应用程序池,默认情况下，iis会自动创建一个跟网站同名的应用程序池
    2. 在右侧窗口，双击对应程序池，打开“编辑应用程序池”
    3. 设置应用程序池的.NET CLR 版本下拉框中，选择“无托管代码”，

常见错误及解决

  1. HTTP 错误 403.14 - Forbidden 错误的解决方法

  2. ERR_SSL_VERSION_OR_CIPHER_MISMATCH 错误解决方法

    1. Windows server2008 IIS7.5 配置 SSL 证书(https) ERR_SSL_VERSION_OR_CIPHER_MISMATCH 错误解决方法,支持 woindows 2008 以上系统
    2. IIS 配置 SSL 证书(https) ,我用是 Windows server2008 IIS7.5，官网上说支持 windows 2008 以上系统，
    3. TLS 检测网站：https://www.ssllabs.com/ssltest/index.html ，通过这个可以检测自己的网站是否支持 TLS 1.2
    4. IISCrypto 工具官网下载地址 https://www.nartac.com/Products/IISCrypto/Download
    5. 因为是国外网站，如果打不开，百度网盘下载地址 https://pan.baidu.com/s/1B-4QA6TsqUw-UzKHKZqsAA?pwd=6p7c
    6. 工具内置最佳实践，点击 “Best Practices” 再 “Apply”，然后重启服务器即可，设置前记得备份注册表。

参考网址

  1. .Net Core 6.0 WebApi 远程部署到 Server2016 https://blog.csdn.net/weixin_44367548/article/details/126649234

https://www.cnblogs.com/liu6978/p/16046531.html
https://www.5axxw.com/questions/simple/caymga
https://blog.51cto.com/u_11990719/3182041?articleABtest=0
https://blog.51cto.com/u_16213353/7145129

posted @ 2022-04-07 19:10  生之韵  阅读(266)  评论(0)    收藏  举报