- 博客(78)
- 收藏
- 关注
RSS订阅原创 C#基础语法(2)
Console.WriteLine($"年龄: {age}, 姓名: {name}, 身高: {height}, 是否学生: {isStudent}");Console.WriteLine("结果: {0} {1} {2} = {3}", num1, op, num2, res);- `new string[] { "33", "99" }` 创建一个新的字符串数组，并初始化为包含指定字符串元素。Console.WriteLine("请输入运算符:（+、-、*、/）");
2025-06-03 11:32:48
655
原创 C#基础语法
在 C# 7.0 及以上版本中，`switch` 的 `case` 分支可以使用模式匹配，例如：`case int i:` 表示当表达式结果是整数时匹配。表示小数时默认为 `double` 类型，若要指定为 `float`，需在数值后加 `f` 或 `F`。=`（不等于）、`>`（大于）、`<`（小于）、`>=`（大于等于）、`<=`（小于等于）。* `if-else` 语句：`if (条件) { 语句块 1 } else { 语句块 2 }`，条件为 `true` 执行语句块 1，否则执行语句块 2。
2025-06-03 11:32:07
466
原创 Visual Studio Code
[C# 编程指南](https://docs.microsoft.com/en-us/dotnet/csharp/programming-guide/)- 访问 [Visual Studio Code 官网](https://code.visualstudio.com/)。- 访问 [.NET 下载页面](https://dotnet.microsoft.com/download)。- [.NET 官方文档](https://docs.microsoft.com/en-us/dotnet/)
2025-06-03 11:31:30
469
原创 Vue.js 后台管理系统
**Ant Design Vue**：一个企业级的 UI 设计语言，提供丰富的 React 组件。- 安装必要的依赖，如 **Vue Router**、**Vuex**、**Axios** 等。- **数据展示**：使用 **ECharts** 或 **Chart.js** 展示数据图表。- **登录注册**：使用 **Vuex** 管理用户状态，实现登录注册功能。- **Element UI**：一个基于 Vue 2.0 的桌面端组件库。- 使用 **VS Code** 作为开发环境。
2025-06-03 11:30:57
244
原创 前后端分离项目之新增编辑功能
在模板中使用 ` v-model` 实现双向数据绑定，确保用户输入能够实时更新响应式数据。- 使用 Axios 进行 HTTP 请求，调用后端 API 实现图书的添加和更新。- 使用 ` reactive` 创建响应式对象，用于管理表单数据。### Vue.js 前端开发笔记：图书添加与编辑功能。- 在保存成功后，通过路由跳转返回到主页面。#### 前端代码要点。#### 后端代码要点。1. 响应式数据管理。
2025-05-26 08:05:40
582
原创 前后端分离项目
Vue 能够侦听数组的变更方法，如 ` push`、` pop`、` shift`、` unshift`、` splice`、` sort` 和 ` reverse`，并在它们被调用时触发相关的更新。- 在 ` btnEdit` 和 ` btnAdd` 函数中，通过 ` router.push` 实现页面跳转。- 定义 ` Book` 模型，包含 ` bookname` 和 ` author` 字段。- 定义一个名为 `book` 的模型，对应数据库中的 `books` 表。
2025-05-26 08:05:01
434
原创 待定事项之存储数据
**`JSON.parse` 和 `JSON.stringify`**：用于将字符串转换为 js 对象，以及将 js 对象转换为字符串。- **`getItem` 和 `setItem`**：分别用于读取和写入本地存储中的数据。- **`arr.value`**：通过 `.value` 访问 `ref` 的值。- **`watch`**：Vue 3 的响应式 API，用于监听响应式数据的变化。// 初始化 arr。- **`ref`**：Vue 3 的响应式 API，用于创建响应式引用。
2025-05-26 08:04:16
328
原创 `待办事项css样式
div class="删除"><input type="button" value="删除"></div><input type="text" placeholder="请输入您的待办事项，按回车添加"><input type="button" value="未完成"><input type="button" value="已完成"><input type="button" value="全部"><input type="button" value="总计：">1. **克隆/下载项目**
2025-05-09 19:17:55
742
原创 命名视图~
**子路由**：`/home/User`、`/home/Role` 和 `/home/QuestionView` 分别对应 `User`、`Role` 和 `QuestionView` 组件。- **重定向规则**：将 `/User`、`/Role` 和 `/QuestionView` 重定向到对应的嵌套路由，方便用户直接访问。- 命名路由允许我们使用路由的 `name` 属性而不是 `path` 来进行导航。- **`/home` 路由**：对应 `HomeView` 组件，作为父路由。
2025-05-09 19:17:09
491
原创 嵌套路由~
在 User 组件的模板中添加 `<router-view></router-view>`，用于渲染匹配的子组件。<router-link to="/profile">个人资料</router-link><router-link to="/posts">文章</router-link><router-link to="/home">首页</router-link>-- 要写出口，子文件 -->1. **空路径的嵌套路由**
2025-05-09 19:16:31
307
原创 动态路由匹配
path: '/chapters+', // 匹配 `/chapters/one`, `/chapters/one/two`, 等，但不匹配 `/chapters`path: '/chapters*', // 匹配 `/chapters`, `/chapters/one`, `/chapters/one/two`, 等。', // 可选参数，匹配 `/users` 和 `/users/42`path: '/user-*', // 匹配以 `/user-` 开头的任意路径。// 对路由变化作出响应。
2025-05-09 19:15:56
652
原创 路由组件1
从 vue-router 中引入 createRouter：`import { createRouter, createWebHistory } from "vue-router"`* 在模板中使用 RouterView 作为路由出口，用于渲染匹配路径对应的组件：`<RouterView></RouterView>`* `<RouterLink to="/profile">用户资料页</RouterLink>`* `<RouterLink to="/">首页</RouterLink>`
2025-05-09 19:15:11
368
原创 插槽、生命周期
例如，在 `<script setup>` 中调用 `onMounted()` 等钩子函数。2. [动态组件]实现方式：通过 Vue 的 `<component>` 元素和特殊的 `is` attribute 来实现组件的动态切换。- 概念：每个 Vue 组件实例在创建时会经历一系列初始化步骤，在此过程中会运行生命周期钩子函数，让开发者有机会在特定阶段运行自己的代码。- 注意事项：不要在异步函数中注册生命周期钩子，否则可能导致当前组件实例丢失，钩子无法正常工作。### 生命周期钩子。
2025-05-09 19:14:30
491
原创 侦听、模板引用
input type="button" value="点击按钮+1" @click="btn">- `@keyup.enter`：释放 `Enter` 键时触发。console.log(`新月份: ${nv}`)console.log(`旧月份: ${ov}`)- `@keypress`：按下并释放键盘时触发。- `@keydown`：按下键盘时触发。- `@keyup`：释放键盘时触发。2. **getter 函数**3. **多个来源组成的数组**1. **单个 ref**#### 侦听器的用法。
2025-04-27 08:04:18
390
原创 表单绑定~
**绑定数组**：使用 `v-model` 绑定一个数组，每个复选框的值会添加或移除到数组中。- **绑定值**：使用 `v-model` 绑定一个变量，选中的单选按钮的值会更新该变量。##### 单一复选框:使用 `v-model` 绑定一个布尔值变量。- `.lazy`：在 `input` 事件后更新数据。- `.number`：自动转换为数字**- `.trim`：自动去除空格**1. 复选框（Checkbox）2. 单选按钮（Radio）3. 选择器（Select）
2025-04-27 08:03:44
504
原创 事件绑定tips
使用 `v-on` 指令（简写为 `@`）来监听 DOM 事件，并在事件触发时执行对应的 js。- 用法：`v-on:click="handler"` 或 `@click="handler"`。-- 当按下 Ctrl 时，即使同时按下 Alt 或 Shift 也会触发 -->-- 仅当 event.target 是元素本身时才会触发事件处理器 -->-- 仅在 `key` 为 `Enter` 时调用 `submit` -->-- 仅当没有按下任何系统按键时触发 -->-- 单击事件将停止传递 -->
2025-04-27 08:02:44
780
原创 条件、列表渲染.
需要使用 `item in items` 形式的语法，其中 `items` 是数组或对象，`item` 是迭代项的别名。- `v-if` 无论 `true` 或 `false`，DOM 元素都存在，只是根据条件渲染或销毁。- 建议将 `v-for` 放在 `<template>` 上，再在其内部使用 `v-if`。- 支持三个参数：`value`、`key` 和 `index`。- **`v-if` 与 `v-show` 的 DOM 行为**- `v-if` 初始渲染时条件为假则不渲染任何内容。
2025-04-27 07:59:49
765
原创 计算属性练习及答案、Class与Style绑定
</div>` 或 `<div class="static active text-danger"></div>`。- 结果是 `<p class="baz">Hi!<input type="text" v-model="find" placeholder="输入日期（YYYY-MM-DD）"><input type="text" placeholder="姓" v-model="firstName">">
2025-04-21 08:01:53
548
原创 计算属性概念
**ref()**：用于将普通值包装成响应式对象。- **reactive()**：用于将对象转换为响应式对象。- **避免直接修改计算属性值**：计算属性是派生状态，应通过更新依赖的源状态来触发新计算。- **只能用于对象类型**：不能用于原始类型（如 `string`、`number`）。- **数组和集合中的 ref**：不会自动解包，需手动访问 `.value`。- **ref**：在模板中自动解包，无需 `.value`。- **不能替换整个对象**：替换对象会丢失响应式连接。
2025-04-21 08:01:01
504
原创 nodejs前端改vue
`v-model` 实现双向数据绑定，将输入框的值与 `blog` 对象的属性绑定。- 新增/编辑表单：通过 `v-show="isShow"` 控制显示。- `blog`：响应式对象，用于存储新增或编辑的博客信息。- 博客列表：通过 `v-for` 循环渲染博客数据。- `isShow`：控制新增/编辑表单的显示状态。- `blogs`：响应式博客数据，用于动态显示。- `initBlogs`：初始博客数据数组。- `v-show` 控制表单的显示状态。- `v-for` 循环渲染博客列表。
2025-04-21 08:00:26
511
原创 响应式基础
它接收一个参数，并将其包裹在一个带有 `.value` 属性的 `ref` 对象中返回。- 在模板中使用 `ref` 时，不需要 `.value`，Vue 会自动解包。- Vue 通过 `getter` 和 `setter` 拦截变量的访问和修改。- `ref` 的 `.value` 属性允许 Vue 追踪和触发状态变化。- 在模板中使用 `ref` 时，Vue 会自动解包，无需 `.value`。// 等待 DOM 更新。- 使用 `ref()` 声明响应式状态，通过 `.value` 修改值。
2025-04-21 07:59:55
353
原创 vue3语法（三）
`v-on:[eventName]="doSomething"` 动态事件名称。- `.prevent`：调用 `event.preventDefault()`- `v-bind:[attributeName]="url"` 动态决定参数。- `:id="dynamicId"` 等同于 `v-bind:id`- `v-bind:id="dynamicId"` 绑定动态属性。- 值为 `null` 或 `undefined` 时移除属性。- `{{ msg }}` 绑定组件实例的 `msg` 属性。
2025-04-15 07:57:36
395
原创 vue3语法（二）
**代码组织方式**：通过 `data`、`methods`、`computed` 等选项来组织代码。- **选项式写法**：传统的Vue写法，使用`data`函数返回一个对象，包含组件所需的数据。- **组合式写法**：使用`script setup`语法，结合`ref`函数定义响应式数据。- **响应式数据**：使用 `ref` 或 `reactive` 定义响应式数据。- **响应式数据**：在 `data` 函数中定义响应式数据。- **v-html**：用于动态渲染HTML内容。
2025-04-15 07:57:01
384
原创 vue3语法（一）
/ 挂载路由：将创建好的 Vue 实例挂载至指定 id 为 app 的 DOM 元素，让 Vue 接管该区域 DOM 操作，按规则渲染更新页面。<input type="button" @click="btnClick()" value="按钮">let arr = ['巴拉巴拉', '耳洞', '耳钉', '耳环'];- data() 函数：是 Vue 实例的关键部分，返回一个包含应用数据的对象。- methods 部分：定义 Vue 实例的方法集合。// 创建 Vue 应用实例。
2025-04-15 07:56:28
289
原创 -vue3基础
1. Vue 是一个用于构建用户界面的渐进式 JavaScript 框架。它通过声明式渲染和组件化开发，帮助开发者高效地构建动态的 Web 应用。- `<script setup>`：Vue 3 的新语法，用于编写组件逻辑。- **Prettier**：用于代码格式化，确保代码风格一致。- **ESLint**：用于代码错误预防和代码质量检查。- `--host` 参数允许外部设备访问开发服务器。- `<template>`：定义页面的 HTML 结构。// 这里可以编写逻辑代码。
2025-04-15 07:55:38
193
原创 跨域，前端
在前后端分离开发中，前端页面运行在某个域名（如 `http://localhost:8080`），后端服务运行在另一个域名（如 `http://localhost:3000`）。当前端页面通过 js（如 `axios`）向后端发送请求时，浏览器会执行同源策略，限制跨域请求，从而导致请求失败。// `url` 是后端服务的地址，例如 `http://localhost:3000`。2. 使用 `axios` 向后端接口发送请求，获取数据库中的数据。1. 页面加载事件：绑定 `load`，渲染。
2025-03-24 08:00:09
404
原创 基于路由、数据库与模型的控制器设计.
**自动注册路由**：`regControllers` 函数遍历控制器文件，根据方法和 URL 注册路由。- **Sequelize 初始化**：使用 SQLite 作为数据库，定义 `sequelize` 实例。- **动态导入控制器**：通过 `getControllers` 函数获取所有控制器文件路径。- **同步数据库**：`sync` 函数用于初始化数据库并插入初始数据。- **定义控制器函数**：每个函数对应一个路由操作，处理请求并返回响应。### 1. 路由注册。### 3. 数据模型。
2025-03-24 07:59:34
232
原创 restful接口
响应格式：统一返回 JSON 格式，包含状态码（`code`）、消息（`msg`）和数据（`data`）。- 路由处理：通过 `koa-router` 定义 RESTful API 路由。- **DELETE /blogs/:id**：删除指定 ID 的博客。- **GET /blogs/:id**：获取指定 ID 的博客。- **PUT /blogs/:id**：修改指定 ID 的博客。- **GET /blogs**：获取博客列表。- **POST /blogs**：新增博客。
2025-03-24 07:59:02
266
原创 连接MongoDB数据库
**MongoDB**：基于文档模型，数据以 JSON 格式的文档存储在集合中，适合存储复杂数据【基于 JSON 的查询语言】- **配置环境变量**：将 MongoDB 的 `bin` 目录路径添加到系统环境变量 `PATH` 中。- **MongoDB**：文档模型允许动态添加字段，无需提前定义表结构，适合快速开发和迭代。- **关系型数据库**：基于表格模型，数据存储在表格的行和列中，结构固定【使用 SQL】- **引用文档**：适合多对多关系，使用 `$lookup` 进行关联查询。
2025-03-24 07:58:22
491
原创 MongoDB下载安装
mongorestore -h localhost --port 27017 -u 用户名 -p 密码 --db 数据库名 --authenticationDatabase admin --drop 恢复路径。- Windows 64位：[Try MongoDB Atlas Products](https://www.mongodb.com/)mongodump -h localhost --port 27017 -u 用户名 -p 密码 -db 数据库名 -o 备份路径。
2025-03-17 10:35:29
641
原创 实现改查功能
使用 `Blog.update(obj, { where: { id: id } })` 更新博客。- 使用 `sequelize` 的 `Op.or` 和 `Op.like` 来实现多字段模糊查询。- 使用 `Blog.destroy({ where: { id: id } })` 删除博客。ctx.body = '所要修改的博客不存在，请确认后重试';ctx.body = '所要修改的博客不存在，请确认后重试';- 使用 `Blog.findByPk(id)` 查询博客。### **后端逻辑**
2025-03-17 08:00:38
303
原创 实现增删功能
1. 使用`document.querySelectorAll`获取所有带有`name`属性的`<input>`标签。let isOk = confirm('真的取消，取消后填写数据丢失，无法找回');4. 如果请求成功（状态码为200），跳转到博客列表页面`/blogs`。3. 使用`axios.post`将对象发送到`/blogs`接口。2. 提取每个字段的值并存储到一个对象`obj`中。- 使用`confirm`弹出提示框，询问用户是否取消。- 使用`axios.delete`向后端发送删除请求。
2025-03-17 08:00:06
394
原创 定义模型生成数据表
使用 `Blog.update(obj, { where: { id } })` 更新指定 ID 的博客。- 使用 `Blog.destroy({ where: { id } })` 删除指定 ID 的博客。- 使用 `Blog.findByPk(id)` 查询指定 ID 的博客。- 将结果渲染到 `blogsAddOrEdit.html` 模板。- 使用 `Blog.create(obj)` 创建新的博客记录。ctx.body = '修改成功';ctx.body = '删除成功';
2025-03-17 07:59:32
434
原创 数据库持久化
console.error("无法连接到数据库:", error);console.error('数据库连接失败:', error);storage: "./test.db" // SQLite存储路径。console.log('数据库连接正常，Over.');dialect: "sqlite", // 数据库类型。console.log("数据库连接成功");// Sequelize配置和使用示例。// 引入Sequelize模块。// 配置数据库连接。// 测试数据库连接。// 同步表到数据库。
2025-03-17 07:58:58
278
原创 nodejs部署云服务器
按 `ESC` 退出编辑模式。- 输入 `:wq` 保存并退出。- 按 `i` 进入编辑模式。## 一、安装Node.js运行环境。## 二、安装并配置Nginx。
2025-03-10 08:21:09
201
原创 分页、渲染、读取静态资源.
**文件类型限制**：目前仅设置了`Content-Type`为`text/css`，仅适用于CSS文件。pageIndex={{pageIndex - 1}}&pageSize={{pageSize}}">上一页</a>pageIndex={{pageIndex + 1}}&pageSize={{pageSize}}">下一页</a>- 使用`ctx.set`方法设置响应头`Content-Type`为`text/css`，表示返回的内容是CSS样式表。-- 分页导航 -->// 转换为数字类型。
2025-03-10 08:20:17
364
原创 `Nunjucks模板引擎基本语法
URL模块：用于处理文件路径和URL转换，`import.meta.url`获取当前模块路径，`new URL()`解析路径，`fileURLToPath()`转换为本地路径。// 输出：file:///path/to/module.js。// 输出：file:///path/views。// 输出：/path/views。- 用途：获取当前模块的完整URL（以`file://`开头）。- 用途：将`file://`协议的URL转换为本地文件路径。- **变量**：`{{ 变量名 }}`
2025-03-10 08:19:40
367
原创 Nunjucks 模板引擎
**安装**：在 `package.json` 中添加 `nunjucks` 依赖，使用 `npm install` 安装。- **渲染模板**：使用 `env.render(view, model)` 方法渲染模板，返回字符串。- **配置**：创建一个 `env` 对象，配置模板加载器和环境选项。1. 基于模板和数据生成字符串输出的工具。常用于生成网页（HTML）// 定义 ctx.render 方法。// 配置 Nunjucks。// 继续执行后续中间件。// 获取模板目录路径。
2025-03-10 08:19:08
326
原创 重构及封装
1. 注册路由【通过两个函数】【把 router 传进去】2. 使用app.use(Router.routes())// 遍历所有的控制器，动态导入每个控制器模块。console.log('图书列表');ctx.body = '图书列表'ctx.body = '单个图书'ctx.body = '新增图书'ctx.body = '修改图书'"name":"巴拉巴拉"// 找到并遍历所有指定路径下的js文件。ctx.body = '删除'// 找到所有的控制器文件。// 找到所有的控制器文件。
2025-03-10 08:18:22
586
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人