vue开发-语法和基础流程规范

当一个请求发生的时候 后端的扭转流程对标前端的扭转过程

***vue 中 整体url触发整体流程服务流程：

node 中定义了默认加载 vue.config.js 文件 （vue.config.js 文件名不可更改）-> vue.config.js 中 devServer 绑定了个 ip端口 和资源 -》 然后将资源 交给浏览器

浏览器通过# 来做相对定位〉 走到 route 路由》router 路由用来绑定其他资源页面。〉 将路由页面 放在 如下的div 中

***vue 中 整体加载流程

node 启动。-》加载vue.config.js 〉加载资源（sso匹配等。。。）》tsconfig.json 加载所有静态资源-〉通过heraOpen 加载 main.ts 文件》创建全局VUE 对象〉并且将router，和store 加载到VUE 对象中

从而使得 在浏览器中 可以使用#/相对定位到 router路由的地址 访问路由中的地址

***vue文件中的核心标签

vue 语法

1、views 文件夹下面创建对应业务名的文件夹

2、 建立对应业务操作的.vue 文件 并且 声明如下标签

}

2.1 vue 文件标签解读

}

2.1.1、template 标签中主要写页面的dom文档 页面标签等。代码可参考 ui库 https://mtdui.sankuai.com/mtd/vue/components/input-number

2.1.2、script 标签中 写 数据逻辑 以及 和后端交互逻辑 数据处理逻辑等代码

2.1.3、style 页面的样式 通过选择器来定义template 标签中 页面标签的样式

3、在 router/type 文件夹下方建立一个 ts 文件 用于校验 vue 文件中的实体对象的 规则和合规性 例如： 建立了一个sceneManager.ts 并且书写了如下代码

// 查询场景参数
export interface EventAccessQueryRequest {
admin?: string;
endTime?: number| string;
id?: number;
method?: number;
pageNo?: number;
pageSize?: number;
scene?: string;
source?: string;
//开始时间
startingTime?: number| string;
// 标签
tag?: string;
// 状态 1上线 0下线
valid?: number;
timeRange?: Date[];
group?: [];
}
//查询场景list返回
export interface PageType {
records: EventAccessResponse[];
pageNum: 10;
pageSize: 20 ;
total: number;
}

4、 在vue 的文件中 书写如下实体类

const initSearchData: EventAccessQueryRequest = {
// 结束时间
admin: ‘’,
endTime: ‘’,
scene: ‘’,
source: ‘’,
//开始时间
startingTime: ‘’,
// 标签
tag: ‘’,
// 状态 1上线 0下线
timeRange: [],
pageNo: 1,
pageSize: 20,
group: []
};

5、然后在vue 中可以使用 this. 的方式去调用initSearchData 进行取值和赋值 用于在页面中 渲染后端数据 和 提交给后端数据 或者 前端逻辑交互

6、在router/下找到index.ts

倒入。
import Myadd from ‘@/views/SceneList/myAdd.vue’;

对应的vue 文件
然后添加如下代码

{
path: ‘/myAdd’,
name: ‘myAdd’,
component: Myadd,
},
用于 增加一个新的页面跳转 在路由里面

7 页面初始化方法

7.1、先在 script 标签下面建立一个

import { Vue, Component, Watch, Mixins } from ‘vue-property-decorator’;
import { mapState, mapActions } from ‘vuex’;
export default class MyAdd extends Vue{

}

7.2、添加如下代码

private mounted() {
const { type, id } = this.$route.query;
console.log(“展示type:”,type)
}

7.3 整体代码结构

import { Vue, Component, Watch, Mixins } from ‘vue-property-decorator’;
import { mapState, mapActions } from ‘vuex’;
export default class MyAdd extends Vue{
private mounted() {
const { type, id } = this.$route.query;
console.log(“展示type:”,type)
}
}

7.3.1 代码解读

const { type, id } = this.$route.query;

用于获取页面的queryParam。就是url上面的参数。是通过map的方式存储的

7.4.1、 扩展引入

7.4.1.1、在Vue中，比mounted方法更早触发的方法有以下几个：

beforeCreate：在Vue实例被创建之初，数据观测和事件/生命周期钩子等尚未初始化，此时beforeCreate钩子函数会被调用。

created：在Vue实例创建完成后，数据观测和事件/生命周期钩子已经初始化，但尚未挂载到DOM上，此时created钩子函数会被调用。

beforeMount：在Vue实例即将挂载到DOM上之前，此时beforeMount钩子函数会被调用。在这个阶段，Vue实例的模板编译已经完成，但尚未生成真实的DOM。

这些生命周期钩子函数的触发顺序如下：beforeCreate -> created -> beforeMount -> mounted，也就是说，beforeCreate和created会在mounted之前触发。

需要注意的是，这些生命周期钩子函数的执行时机是自动由Vue框架触发的，不需要手动调用。开发者可以根据自己的需求，在这些钩子函数中执行相应的逻辑操作，异步数据获取、组件初始化等。

7.4.1.2、在Vue中，mounted方法之后会触发以下几个方法：

updated：在Vue实例更新完DOM之后被调用。当数据发生改变，触发重新渲染时，updated钩子函数会被执行。

activated：在使用Vue的组件时，被缓存的组件再次被激活时会触发activated钩子函数。

deactivated：同样，在使用Vue的组件时，被缓存的组件被停用时会触发deactivated钩子函数。

beforeUpdate：在Vue实例更新之前被调用。在数据改变时，beforeUpdate钩子函数会在重新渲染之前被执行。

beforeDestroy：在Vue实例销毁之前被调用。在组件被销毁之前，可以在beforeDestroy钩子函数中执行一些清理操作。

destroyed：在Vue实例销毁之后被调用。在组件被销毁后，destroyed钩子函数会被执行。

这些钩子函数在Vue的生命周期中有特定的执行时机，开发者可以根据需要在这些方法中添加相应的逻辑处理。需要注意的是，这些方法的触发是自动由Vue框架处理的，不需要手动调用。

7.4.1.3、vue 文件中的方法生命周期

beforeCreate：在这个阶段，Vue实例已被创建，但尚未完成数据观测和事件/生命周期钩子等的初始化。此时，Vue实例的data和methods等属性还未被初始化。

created：在这个阶段，Vue实例的数据观测和事件/生命周期钩子等已经初始化完成，但尚未挂载到DOM上。此时，Vue实例的data和methods等属性已经被初始化。

beforeMount：在这个阶段，Vue实例即将被挂载到DOM上。此时，Vue实例的模板已经编译完成，但尚未生成真实的DOM。

mounted：在这个阶段，Vue实例已经被挂载到DOM上，并且可以通过DOM操作和访问DOM元素。此时，Vue实例已经和DOM建立了关联。

beforeUpdate：在这个阶段，Vue实例正在进行重新渲染，即数据发生改变，Vue正在更新DOM。此时，Vue实例的数据已经发生了变化，但DOM还未完成更新。

updated：在这个阶段，Vue实例已完成重新渲染，即数据发生改变，Vue已经更新了DOM。此时，Vue实例的数据和DOM都已经完成了更新。

activated：在使用Vue的组件时，被缓存的组件再次被激活时会触发activated钩子函数。

deactivated：在使用Vue的组件时，被缓存的组件被停用时会触发deactivated钩子函数。

beforeDestroy：在这个阶段，Vue实例即将被销毁。此时，Vue实例还存在，并且可以进行一些清理操作，例如取消订阅、清除定时器等。

destroyed：在这个阶段，Vue实例已经被销毁。此时，Vue实例和DOM的关联已经解除，事件监听和watcher已被移除。

7.4.1.3、vue 文件中自定义方法的加载和销毁 以及什么阶段被初始化和可以被调用以及无法调用的阶段，例：自定义方法 checkSceneDetail（）

mounted阶段：在Vue实例挂载到DOM后，可以通过调用this.checkSceneDetail(id)来调用该方法。此时，DOM已经完成渲染，可以执行与DOM相关的操作。

updated阶段：当Vue实例的数据发生变化，导致重新渲染时，在updated生命周期钩子函数中可以调用this.checkSceneDetail(id)来调用该方法。此时，可以在数据更新后执行一些操作。

在其他阶段，无法直接调用private checkSceneDetail(id: number)方法：

在beforeCreate和created阶段，Vue实例和数据还没有完全初始化，无法调用该方法。

在beforeMount阶段，Vue实例的模板已经编译完成，但尚未生成真实的DOM，无法调用该方法。

在beforeUpdate、activated、deactivated、beforeDestroy和destroyed阶段，这些阶段主要用于Vue实例的更新和销毁，不适合直接调用自定义方法。

因此，可以在mounted阶段或在数据变化后的updated阶段调用private checkSceneDetail(id: number)方法。如果您需要在其他阶段执行该方法，则需要根据具体情况进行调整或通过其他方式触发执行。

7.5 必须定义的结构

script 标签中

@Component({
components: {
SelectModal,
}
})
export default class ListAdd extends Vue {
}

8、 发送一个请求到后端

net.scenelist
.queryManageSceneList({ id })
.then((ajaxData: AxiosResponse) => {
const response: ResponseType = ajaxData.data;
if (ajaxData.status === 200 && response.code === 0) {
const row = response.data.records[0];
const slaEntity = this.addInfo.slaEntity;
this.addInfo = formatRequest(row);
if (this.addInfo.slaEntity == null) {
this.addInfo.slaEntity = slaEntity;
}

      console.log(
        'sql----当前查询后台的后台的addinfo 数据',
        JSON.stringify(response.data.records[0])
      );
    } else {
      this.$mtd.message({
        message: response.desc,
        type: 'error',
      });
    }
  })
  .catch((error) => {
    Message({
      message: error.message,
      type: 'error',
    });
  });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

8.1.1、 代码解读

在 net 目录下 找到 scenelist 文件 文件中有个default 方法

export default {
xxxxxx,
queryManageSceneList
};

用于定义所有对外暴露的请求方法

写出 queryManageSceneList 对应的方法

export async function queryManageSceneList(params?: EventAccessQueryRequest) {
return await post(‘/hera/api/v1/eventFlow/access/query’, params);
}

请求成功后 获取 records 中的数据 赋予给 全局对象 addInfo

这样 页面就可以根据this.addInfo 来渲染页面 和做逻辑处理了

9.1、 前端做校验

需要 在 对应页面vue 中添加如下代码

9.1.1、 template 标签中 在需要校验的标签中添加如下代码

需要校验的标签

例：
原始标签

加上校验后

label 为标签的前置文本 会自动加上个红色的 *。就是 * 账号:

prop 为规则引擎。需要自己配置规则

在script 标签中 添加如下代码

private ruleCustom = {

processCode: [
  { required: true, message: '请输入流程编号', trigger: 'blur' },
],

processCode: [{ validator: this.roundConfigDefaultCountDetection }],
1
2
3
4
5

};

上述代码中 描述了两种规则定义格式。

第一个简单表达式规则 表示 当失去焦点的时候不可为空

第二个规则 是 输入框的整体规则必须符合 roundConfigDefaultCountDetection 方法中定义的逻辑

10、页面中的一些语法和基础使用
语法

含义

@click="backoute

VUE 中的事件

v-model

dom文档展示的值

v-if

为真则加载dom 为假删除dom

v-for=“item in arr”

循环

:key=“item.mis”

:label=“${item.mis}”

:value=“item.mis”

key 渲染坐标的唯一值

label 展示的值

value 实际的值{和后端交互的值}

循环后 item.mis 中的值会转为string