外国网站建设公司,中国河北网站,在wordpress中 怎么把主题删掉,免费个人网站 上传当一个请求发生的时候 后端的扭转流程对标前端的扭转过程 ***vue 中 整体url触发整体流程服务流程#xff1a;
node 中定义了默认加载 vue.config.js 文件 #xff08;vue.config.js 文件名不可更改#xff09;- vue.config.js 中 devServer 绑定了个 ip端口 和资源 -》…当一个请求发生的时候 后端的扭转流程对标前端的扭转过程 ***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,});});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 }],};
上述代码中 描述了两种规则定义格式。
第一个简单表达式规则 表示 当失去焦点的时候不可为空
第二个规则 是 输入框的整体规则必须符合 roundConfigDefaultCountDetection 方法中定义的逻辑
10、页面中的一些语法和基础使用 语法
含义
clickbackoute
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
