qidao123.com技术社区-IT企服评测·应用市场

标题: 黑马智数Day1 [打印本页]

---

作者: 光之使者    时间: 2024-9-22 05:31
标题: 黑马智数Day1


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

只有一级路由的设置写法

1.   {
2.     path: '/workbench',
3.     component: Layout,
4.     children: [{
5.       path: '', // 地址为空
6.       name: 'workbench',
7.       component: () => import('@/views/workbench/index'),
8.       meta: { title: '工作台', icon: 'el-icon-eleme' }
9.     }]
10.   }

复制代码

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

1. {
2.     path: '/park',
3.     component: Layout,
4.     name: 'park',
5.     meta: { title: '园区管理', icon: 'el-icon-office-building' },
6.     children: [{
7.       path: 'building',
8.       name: 'building',
9.       meta: { title: '楼宇管理' },
10.       component: () => import('@/views/Park/Building/index')
11.     },
12.     {
13.       path: 'enterprise',
14.       name: 'enterprise',
15.       meta: { title: '企业管理' },
16.       component: () => import('@/views/Park/Enterprise/index')
17.     }]
18.   }

复制代码

状态管理 - Vuex

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

请求模块说明

request.js模块说明

1. import axios from 'axios'
2. const service = axios.create({
3.   baseURL: 'https://api-hmzs.itheima.net/v1',
4.   timeout: 5000 // request timeout
5. })
6. // 请求拦截器
7. service.interceptors.request.use(
8.   config => {
9.     return config
10.   },
11.   error => {
12.     return Promise.reject(error)
13.   }
14. )
16. // 响应拦截器
17. service.interceptors.response.use(
18.   response => {
19.     return response.data
20.   },
21.   error => {
22.     return Promise.reject(error)
23.   }
24. )
26. export default service

复制代码

• 一样平常项目中多数的接口使用的设置是相似的，以是必要统一设置一次
  
• 请求拦截器紧张做的事变是在请求发送之前，针对请求参数对象做一些事变（好比添加鉴权Token）
  
• 相应拦截器紧张做的事变是在相应数据返回到业务方之前，针对相应对象做一些事变（好比简化data，错误处置惩罚等）
  

apis模块说明

 基础封装逻辑：

1. import request from '@/utils/request'
3. // 登录函数
4. /**
5. * @description: 登录函数
6. * @param {*} data { mobile,password}
7. * @return {*} promise
8. */
9. export function login({ mobile, password }) {
10.   return request({
11.     url: '/sys/login',  // baseURL + url
12.     method: 'POST',
13.     data: {
14.       mobile,
15.       password
16.     }
17.   })
18. }

复制代码

• apis中的所有业务函数都采用同样的封装逻辑（参数格式/返回值格式），方便维护
  
• apis中的所有业务函数内部都采用request.js中统一导出的axios实例到达设置一次，管控所有接口的目的
  

路由和菜单的关系

路由表是菜单的数据支持

路由对象的属性和菜单表现对应

• 菜单通过遍历路由表来表现，路由表作为数据来源
  
• 路由对象meta属性中的icon决定了表现的图表，title决定了要表现的标题
  

使用Git管理项目

• 删除原有的.git文件，切断和原本远程仓库的链接
  
• 重新执行 git init . 下令, 初始化本地仓库
  
• 在gitee上新增远程仓库
  
• 关联远程仓库到本地
  
• 推送本地到远程
  
• 后续一样平常提交 git add . git commit -m "提交说明"
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 qidao123.com技术社区-IT企服评测·应用市场 (https://dis.qidao123.com/)

Powered by Discuz! X3.4