黑马智数Day1

news2024/11/14 18:27:06

src文件夹

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

apis - 业务接口
assets - 静态资源（图片）
components - 组件公共组件
constants - 常量（不需要变动的数据）
directive - 全局指令 --- （指令是用于在模板中将 DOM 元素绑定到底层 Vue 实例的数据的一种特殊标记，如 v-model、v-for、v-if）
icons - 图标（png svg 字体图标）
Layout - 搭建项目的架子 -- 布局
utils - 工具函数（转化函数校验函数请求request）
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 + url
    method: 'POST',
    data: {
      mobile,
      password
    }
  })
}