黑马智数Day1

src文件夹

src 目录指的是源代码目录,存放项目应用的源代码,包含项目的逻辑和功能实现,实际上线之后在浏览器中跑的代码就是它们

  1. apis - 业务接口

  2. assets - 静态资源 (图片)

  3. components - 组件 公共组件

  4. constants - 常量 (不需要变动的数据)

  5. directive - 全局指令 --- (指令是用于在模板中将 DOM 元素绑定到底层 Vue 实例的数据的一种特殊标记,如 v-modelv-forv-if

  6. icons - 图标 (png svg 字体图标)

  7. Layout - 搭建项目的架子 -- 布局

  8. utils - 工具函数 (转化函数 校验函数 请求request)

  9. views - 页面级组件 路由级别组件 业务组件

包文件 - package.json

可执行命令

项目依赖

开发和生产都需要:

仅在开发时需要:

应用入口 - main.js

组件树 - App.vue

路由文件 - vueRouter

只有一级路由的配置写法

  {path: '/workbench',component: Layout,children: [{path: '', // 地址为空name: 'workbench',component: () => import('@/views/workbench/index'),meta: { title: '工作台', icon: 'el-icon-eleme' }}]}

同时拥有一级和二级路由的配置写法

{path: '/park',component: Layout,name: 'park',meta: { title: '园区管理', icon: 'el-icon-office-building' },children: [{path: 'building',name: 'building',meta: { title: '楼宇管理' },component: () => import('@/views/Park/Building/index')},{path: 'enterprise',name: 'enterprise',meta: { title: '企业管理' },component: () => import('@/views/Park/Enterprise/index')}]}

状态管理 - Vuex

  • Vuex 将应用程序的状态集中存储在一个对象中,称为状态树(store)。
  • Vuex 规定只有通过提交 mutation(同步操作)来更改状态。Mutation 是一种特殊函数,用于更改 store 中的状态。
  • 虽然 mutation 必须是同步的,但可以通过 action 来处理异步操作。Action 类似于 mutation,但它负责提交 mutation 而不是直接变更状态,这使得你可以在 action 中执行异步操作。
  • 为了更好地组织代码,Vuex 允许将 store 分割成模块。每个模块拥有自己的 state、mutations、actions 和 getters,使得状态管理更加模块化和清晰。

请求模块说明

request.js模块说明

import axios from 'axios'
const service = axios.create({baseURL: 'https://api-hmzs.itheima.net/v1',timeout: 5000 // request timeout
})
// 请求拦截器
service.interceptors.request.use(config => {return config},error => {return Promise.reject(error)}
)// 响应拦截器
service.interceptors.response.use(response => {return response.data},error => {return Promise.reject(error)}
)export default service
  • 一般项目中多数的接口使用的配置是相似的,所以需要统一配置一次

  • 请求拦截器主要做的事情是在请求发送之前,针对请求参数对象做一些事情(比如添加鉴权Token)

  • 响应拦截器主要做的事情是在响应数据返回到业务方之前,针对响应对象做一些事情(比如简化data,错误处理等)

apis模块说明

 基础封装逻辑:

import request from '@/utils/request'// 登录函数
/*** @description: 登录函数* @param {*} data { mobile,password}* @return {*} promise*/
export function login({ mobile, password }) {return request({url: '/sys/login',  // baseURL + urlmethod: 'POST',data: {mobile,password}})
}
  • apis中的所有业务函数都采用同样的封装逻辑(参数格式/返回值格式),方便维护

  • apis中的所有业务函数内部都采用request.js中统一导出的axios实例达到配置一次,管控所有接口的目的

路由和菜单的关系

路由表是菜单的数据支撑

路由对象的属性和菜单显示对应

  • 菜单通过遍历路由表来显示,路由表作为数据来源

  • 路由对象meta属性中的icon决定了显示的图表,title决定了要显示的标题

使用Git管理项目

  • 删除原有的.git文件,切断和原本远程仓库的链接

  • 重新执行 git init . 命令, 初始化本地仓库

  • 在gitee上新增远程仓库

  • 关联远程仓库到本地

  • 推送本地到远程

  • 后续日常提交 git add . git commit -m "提交说明"

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

LeetCode 面试经典 150 题回顾

目录 一、数组 / 字符串 1.合并两个有序数组 (简单) 2.移除元素 (简单) 3.删除有序数组中的重复项 (简单) 4.删除有序数组中的重复项 II(中等) 5.多数元素(简单&am…

【全网最全】2024年华为杯研赛A题成品论文获取入口(后续会更新)

您的点赞收藏是我继续更新的最大动力! 一定要点击如下的卡片,那是获取资料的入口! 点击链接加入【2024华为杯研赛资料汇总】:https://qm.qq.com/q/hMgWngXvcQhttps://qm.qq.com/q/hMgWngXvcQ你是否在寻找数学建模比赛的突破点&am…

LabVIEW机动车动态制动性能校准系统

机动车动态制动性能测试系统通过高精度的硬件设备与LabVIEW软件的紧密配合,实现了对机动车制动性能的精确校准与评估。系统不仅提高了测试的精确性和效率,而且具备良好的用户交互界面,使得操作更加简便、直观。 项目背景 随着机动车辆数量的…

Redisson实现分布式锁(看门狗机制)

目录 可重入锁: 锁重试和看门狗机制: 主从一致性: 首先引入依赖,配置好信息 3.使用Redisson的分布式锁 可重入锁: 可重入锁实现是通过redsi中的hash实现的,key依旧是业务名称加id,然后第一个…

Cocos Creator3.x设置动态加载背景图并且循环移动

效果图 项目结构 项目层级结构: 预制: 代码 import { _decorator, CCFloat, Component, Node, Sprite, instantiate, Prefab, assert } from cc; const { ccclass, property } _decorator;/*** 背景脚本*/ ccclass(Background) export class Backg…

前端入门:HTML+CSS

引言: 前端三大件:HTML、CSS、JS,每一个部分都很重要,我听过比较形象的比喻就是HTML(HYPER TEXT MARKUP LANGUAGE)相当于骨架,而CSS就是装饰渲染,JS则是动作功能实现。 之前的文章…

Qt 模型视图(三):视图类QAbstractItemView

文章目录 Qt 模型视图(三):视图类QAbstractItemView1.基本概念1.1.使用现有视图1.2.使用模型1.3.使用模型的多个视图1.4.在视图之间共享选择 Qt 模型视图(三):视图类QAbstractItemView ​ 模型/视图结构是一种将数据存储和界面展示分离的编程方法。模型存储数据,视…

Unity3D入门(一) : 第一个Unity3D项目,实现矩形自动旋转,并导出到Android运行

1. Unity3D介绍 Unity3D是虚拟现实行业中,使用率较高的一款软件。 它有着强大的功能,是让玩家轻松创建三维视频游戏、建筑可视化、实时三维动画等互动内容的多平台、综合型 虚拟现实开发工具。是一个全面整合的专业引擎。 2. Unity安装 官网 : Unity…

感知笔记4:YOLO 3D 物体定位

如何在 ROS 中使用 YOLO 如何在 2D 中检测人和大象如何在 3D 中检测人和大象 有许多可用的深度学习库。您可能听说过:Keras、TensorFlow 和 Darknet。 在这里我们将使用 Darknet,因为它实现了 YOLOv3,这是一个对象检测模型。它非常快&…

【AI大语言模型】提示词工程基础及进阶

【AI大语言模型】提示词工程基础及进阶 什么是提示词(Prompt) 提示词(Prompt)是与人工智能对话时用来引导或触发生成某种输出的指令。 它相当于你在与 AI 进行互动时所提出的问题或任务说明。提示词可以是简短的指令、一个问题…

YOLOv8改进,YOLOv8替换主干网络为VanillaNet( CVPR 2023 华为提出的全新轻量化架构),大幅度涨点

改进前训练结果: 改进后训练结果: 摘要 基础模型的核心理念是“更多即不同”,这一理念在计算机视觉和自然语言处理领域取得了惊人的成功。然而,变压器模型的优化挑战和固有复杂性呼唤一种向简化转变的范式。在本研究中,引入了VanillaNet,一种拥抱设计优雅的神经网络架构…

VSCode好用的插件推荐

1. Chinese 将vscode翻译成简体中文 如果安装了依然是英文,请参考如下方法: ctrlshfitp 2. ESLint 自动检查规范 3. Prettier - Code formatter 可以自动调整代码的缩进、换行和空格,确保代码风格统一。通过配置,Prettier可…

掌握Android开发新趋势:Jetpack与现代架构技术全解析

随着Android开发技术的不断进步,Jetpack和现代架构技术已成为构建高效、可维护应用的关键。本文将为您介绍一套全面的学习资料,包括大纲、PDF文档、源代码以及学习视频,帮助您深入理解Jetpack核心库、架构组件以及现代开发工具。 内容&#…

python贪吃蛇游戏项目源码【免费】

使用Pygame库实现的贪吃蛇游戏。Pygame是一个用于创建视频游戏的Python模块集合,它提供了图形和声音库,使游戏开发变得容易。 初始化设置 屏幕大小 (SCREEN_WIDTH, SCREEN_HEIGHT): 定义了游戏窗口的宽度和高度。方格大小 (SIZE): 定义了游戏中每个小方…

简单水印通过python去除

简单水印通过python去除 先看效果,如果效果不是你需要的就可以不用浪费时间。 注意:这种主要还是对应的文字在水印上方的情况,同时最好不要有渐变水印否则可能最后输出的图片的水印还会有所残留,不过还是学习使用,相信…

救生圈检测系统源码分享

救生圈检测检测系统源码分享 [一条龙教学YOLOV8标注好的数据集一键训练_70全套改进创新点发刊_Web前端展示] 1.研究背景与意义 项目参考AAAI Association for the Advancement of Artificial Intelligence 项目来源AACV Association for the Advancement of Computer Visio…

基于协同过滤算法的商品推荐系统

系统展示 用户前台界面 管理员后台界面 商家后台界面 系统背景 随着互联网技术的飞速发展,用户每天面临的信息量呈爆炸式增长,如何有效地筛选出用户感兴趣的内容成为一大挑战。在此背景下,基于协同过滤算法的商品推荐系统应运而生。该系统通过…

九章云极DataCanvas公司荣获2024年服贸会“科技创新服务示范案例”

9月15日,2024年中国国际服务贸易交易会(服贸会)示范案例交流会暨颁奖典礼在北京国家会议中心举行,九章云极DataCanvas 公司自研的DataCanvas Alaya NeW智算操作系统凭借卓越的AI创新实力、前瞻性的市场布局以及突破性的技术革新成…

Golang | Leetcode Golang题解之第423题从英文中重建数字

题目: 题解: func originalDigits(s string) string {c : map[rune]int{}for _, ch : range s {c[ch]}cnt : [10]int{}cnt[0] c[z]cnt[2] c[w]cnt[4] c[u]cnt[6] c[x]cnt[8] c[g]cnt[3] c[h] - cnt[8]cnt[5] c[f] - cnt[4]cnt[7] c[s] - cnt[6]…

机器翻译之Bahdanau注意力机制在Seq2Seq中的应用

目录 1.创建 添加了Bahdanau的decoder 2. 训练 3.定义评估函数BLEU 4.预测 5.知识点个人理解 1.创建 添加了Bahdanau的decoder import torch from torch import nn import dltools#定义注意力解码器基类 class AttentionDecoder(dltools.Decoder): #继承dltools.Decoder写…