2023/1/8 Vue学习笔记-4-脚手架及相关属性配置

news2024/12/24 21:22:56

1 创建脚手架

（1）CLI就是 command line interface 的缩写。Vue CLI官网：Vue CLI
（2）安装过程：
（PS：
提前安装过node.js了，没有安装的可以打开这个：Download | Node.js
已经安装的可以检查node.js和npm版本及安装情况：
检查nodejs ： node -v
检查npm ： npm -v （这两个指令均出现版本号为安装成功）
）

 ①配置npm淘宝镜像：npm config set registryhttps://registry.npm.taobao.org
（这一步可以让vue的安装更加快速，可有可无，但是建议还是安装一下）
 ②第一步（仅第一次执行），全局安装@vue/cli ： npm install -g @vue/cli
 ③第二步，切换到你要创建项目的目录，然后使用命令创建项目 ： vue create xxxx （xxxx为项目名，最好不要取vue、jQuery这种名字）
 ④第三步，启动项目 ： npm run serve

2 分析脚手架结构

在这里插入图片描述
2）整个流程：
1、执行npm run serve，随后来到src中，找到main.js，这个页面中引入了Vue、App.vue、关闭了提示等。

// 该文件是整个项目的入口文件
// 引入Vue
import Vue from 'vue'
// 引入App组件-是所有组件的父组件
import App from './App.vue'
// 关闭Vue的生产提示
Vue.config.productionTip = false
// 创建Vue实例对象 --- vm
new Vue({
    // 将App组件放入容器中
    render: h => h(App),
}).$mount('#app')

2、继续找到App.vue页面，看到这个页面中引入了school和student，于是就到components文件夹中找到这两个并执行，执行最终汇总到了App.vue页面。

3、再回到main.js页面，把App组件放入容器中。

4、再找到index.html（容器），把东西放到这个里面。

3 render函数

main.js

import App from './App'
new Vue({
    el: '#single',
    template: `
      <app></app>
    `,
    components: {
        App
    }
})

替换

import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
    // 将App组件放入容器中
    render: h => h(App),
}).$mount('#app')

——>

// 引入Vue
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
    el: '#app',
    template: `
      <app></app>
    `,
    components: {
        App
    }
})

此时页面有问题：

此时，在main.js中引入的vue是残缺版的。缺少了模板解析器：
在这里插入图片描述
这才是最完整的vue如下
在这里插入图片描述
解决方案一 我们可以引入完整的vue:

import Vue from 'vue/dist/vue'

在这里插入图片描述
解决方案二 ：render

import Vue from 'vue'

Vue.config.productionTip = false
new Vue({
    el: '#app',
    render(createElement) {
        return createElement('h1', '你好啊')
    }
=======================箭头函数替换============================
	render: h => h(App)
})

最终得到：

import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
    // 将App组件放入容器中
    render: h => h(App),
}).$mount('#app')

为什么不直接引入vue.js，反而要vue文件夹那么多东西？

vue中包含了两种东西，核心（比如说生命周期、处理事件等）和模板解析器。如果没有其它的文件，只把vue放到一个页面中，可能会出现问题。因为vue中有三分之一都是模板解析器，之后webpack打包完成后，会生成一个非常大的文件，这个时候vue的模板解析器就不适合出现在这里，没有作用。（vue文件中，带有runtime的都表示运行时的vue，带有common的就是走commonJS）
简而言之，没有了模板解析器的vue体积很小，打包之后能够更加轻量，代价就是写的时候要用那行render去写。

在这里插入图片描述
关于不同版本的Vue：
1、 vue.js 与 vue.runtime.xxx.js 的区别：

1）vue.js 是完整版的Vue，包含：核心功能+模板解析器。
2）vue.runtime.xxx.js 是运行版的Vue，只包含核心功能，没有模板解析器。

2、因为 vue.runtime.xxx.js 没有模板解析器，所以不能使用template配置项，需要使用render函数接收到的createrElement函数去指定具体内容。

4 修改默认配置

在这里插入图片描述
五个默认不能改的：public文件夹、favicon.ico、index.html、src文件夹、main.js
如果还是要修改的话，打开Vue CLI官网——配置参考——左侧栏都是能改的
在这里插入图片描述
vue.config.js： https://cli.vuejs.org/zh/config/#vue-config-js 配置参考

项目开发中需要关闭语法检查（具体的根据公司要求定），在 module.exports 里面添加 lintOnSave:false 

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false
})

5 ref属性

<template>
  <div>
<!--    <h1 v-text="msg" id="title"></h1>-->
    <h1 v-text="msg" ref="title"></h1>
    <button ref="btn" @click="showDOM">点我输出上方的DOM元素</button>
    <School/>
  </div>
</template>

<script>
// 引入组件
import School from "./components/School"

export default {
  name: 'App',
  data() {
    return {
      msg: 'Hello zhaoshuai-lc'
    }
  },
  methods: {
    showDOM() {
      // console.log(document.getElementById('title')) 原生操作
      console.log(this.$refs)
    }
  },
  components: {School}
}
</script>

<style>
</style>

在这里插入图片描述

<template>
  <div>
<!--    <h1 v-text="msg" id="title"></h1>-->
    <h1 v-text="msg" ref="title"></h1>
    <button ref="btn" @click="showDOM">点我输出上方的DOM元素</button>
    <School ref="sch"/>
  </div>
</template>

<script>
// 引入组件
import School from "./components/School"

export default {
  name: 'App',
  data() {
    return {
      msg: 'Hello zhaoshuai-lc'
    }
  },
  methods: {
    showDOM() {
      // console.log(document.getElementById('title')) 原生操作
      console.log(this.$refs.sch)
    }
  },
  components: {School}
}
</script>

<style>
</style>

在这里插入图片描述
对于传统的HTML而言，id和ref确实没有什么差别，但是对于组件来说就不一样了。
给组件加id，打印出获取的结果为组件所对应的完整DOM结构。
给组件加ref，打印出获取的结果就是VueComponent实例。

ref属性：
1.被用来给元素(html标签)或子组件注册引用信息（id的代替者）
2.应用在html标签上获取的是真实的DOM元素，应用在组件标签上是组件实例对象（vc）
3.使用方式：

打标识：<h1 ref="xxx">  ... </h1>
获取： this.$refs.xxx

6 props配置

<template>
  <div>
    <!--    :age="" ""作为表达式-->
    <!--    <Student name="zhaoshuai-lc" gender="male" :age="27"/>-->
    <!--    <Student name="zhaoshuai-ld" gender="male" :age="27"/>-->

    <Student name="zhaoshuai-lc" gender="male"/>
    <Student name="zhaoshuai-ld" gender="male" :age="27"/>
  </div>
</template>

<script>
// 引入组件
import Student from "./components/Student"

export default {
  name: 'App',
  data() {
    return {}
  },
  methods: {},
  components: {Student}
}
</script>

<style>
</style>


<template>
  <div class="sc">
    <h1>{{ msg }}</h1>
    <h2>学生名称：{{ name }}</h2>
    <h2>学生性别：{{ gender }}</h2>
    <h2>学生年龄：{{ age + 1 }}</h2>
  </div>
</template>

<script>
export default {
  name: `Student`,
  data() {
    return {
      msg: 'i am a student'
    }
  },
  // 接受数据
  // props: ['name', 'gender', 'age'],
  // 接收的同时对数据进行类型限制
  // props: {
  //   name: String,
  //   gender: String,
  //   age: Number
  // },
  // 接收的同时对数据进行类型限制 + 默认值的指定 + 必要性的限制
  props: {
    name: {
      type: String,
      required: true
    },
    gender: {
      type: String,
      default: 'male'
    },
    age: {
      type: Number,
      default: 99
    }
  },
  methods: {}
}
</script>

<style>
.sc {
  background-color: aquamarine;
}
</style>

在这里插入图片描述
配置项propos 功能：让组件接收外部传过来的数据
（1）传递数据：

    <!--    :age="" ""作为表达式-->
    <!--    <Student name="zhaoshuai-lc" gender="male" :age="27"/>-->
    <!--    <Student name="zhaoshuai-ld" gender="male" :age="27"/>-->

    <Student name="zhaoshuai-lc" gender="male"/>
    <Student name="zhaoshuai-ld" gender="male" :age="27"/>

（2）接收数据：
第一种方式（只接收）：

props:['name']

第二种方式（限制类型）：

props:{
	name:Number
 }

第三种方式（限制类型、限制必要性、指定默认值）：

props:{
	name:{
	type:String, // 类型
	 required:true, // 必要性
	 default:'老王' // 默认值
	 }
  }

备注：props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据。

<template>
  <div class="sc">
    <h1>{{ msg }}</h1>
    <h2>学生名称：{{ name }}</h2>
    <h2>学生性别：{{ gender }}</h2>
    <h2>学生年龄：{{ ageBK }}</h2>
    <button @click="updateAge">点击我尝试修改年龄</button>
  </div>
</template>

<script>
export default {
  name: `Student`,
  data() {
    return {
      msg: 'i am a student',
      ageBK: this.age
    }
  },
  props: {
    name: {
      type: String,
      required: true
    },
    gender: {
      type: String,
      default: 'male'
    },
    age: {
      type: Number,
      default: 99
    }
  },
  methods: {
    updateAge() {
      this.ageBK++
    } 
  }
}
</script>

<style>
.sc {
  background-color: aquamarine;
}
</style>

在这里插入图片描述

7 mixin混入

在这里插入图片描述

export const mixin = {
    methods: {
        showName() {
            alert(this.name)
        }
    },
    mounted() {
        console.log('hello mounted() ...')
    }
}
export const data = {
    data() {
        return {
            x: 100
        }
    }
}


<template>
  <div class="sc">
    <h1>{{ msg }}</h1>
    <h2 @click="showName">学生名称：{{ name }}</h2>
    <h2>学生性别：{{ gender }}</h2>
    <h2>{{ x }}</h2>
  </div>
</template>

<script>
// 引入一个混合
import {mixin, data} from "@/mixin";

export default {
  name: `Student`,
  data() {
    return {
      msg: 'i am a Student',
      name: 'zhaoshuai-lc',
      gender: 'male',
      x: 10000 // 混合中也存在该值 - 以自己的为主
    }
  },
  mounted() {
    console.log('hello mounted() ...')
  },
  mixins: [mixin, data]
}
</script>

<style>
.sc {
  background-color: aquamarine;
}
</style>


<template>
  <div class="sc">
    <h1>{{ msg }}</h1>
    <h2 @click="showName">学校名称：{{ name }}</h2>
    <h2>学校地址：{{ address }}</h2>
  </div>
</template>

<script>
import {mixin, data} from "@/mixin";

export default {
  name: `School`,
  data() {
    return {
      msg: 'i am a School',
      name: 'Peking University',
      address: 'Beijing'
    }
  },
  mounted() {
    console.log('hello mounted() ...')
  },
  mixins: [mixin, data]

}
</script>

<style>
.sc {
  background-color: aquamarine;
}
</style>


<template>
  <div>
    <Student/>
    <School/>
  </div>
</template>

<script>
// 引入组件
import Student from "./components/Student"
import School from "./components/School";

export default {
  name: 'App',
  data() {
    return {}
  },
  methods: {},
  components: {Student, School}
}
</script>

<style>
</style>

在这里插入图片描述

以上是局部引入，全局引入如下：

main.js

import Vue from 'vue'
import App from './App.vue'
import {mixin, data} from './mixin'
Vue.config.productionTip = false
Vue.mixin(mixin)
Vue.mixin(data)
new Vue({
    // 将App组件放入容器中
    render: h => h(App),
}).$mount('#app')

mixin中的data数据会与页面中的data数据进行整合，如若有冲突的话，则以页面为准。
mixin和页面中的生命周期钩子不以任何为主，都要。

mixin（混入）
功能：可以把多个组件共用的配置提取成一个混入对象
使用方式：
第一步定义混合，例如：

 {
     data(){ ... }
     methods:{ ... }
              ...
 }

第二步使用混入，例如：

1）全局混入：Vue.mixin(xxx)
2）局部混入：mixins:['xxx']

8 插件

// const obj = {
//     install() {
//         console.log('@@@@install')
//     }
// }
// export default obj


export default {
    install(Vue) {
        console.log('@@@@install', Vue)
    }
}



import Vue from 'vue'
import App from './App.vue'
// 引入插件
import plugins from "@/plugins"

Vue.config.productionTip = false
// 应用插件
Vue.use(plugins)
new Vue({
    // 将App组件放入容器中
    render: h => h(App),
}).$mount('#app')

在这里插入图片描述

plugins.js

// const obj = {
//     install() {
//         console.log('@@@@install')
//     }
// }
// export default obj


export default {
    install(Vue) {
        Vue.filter('mySlice', function (value) {
            return value.slice(0, 4)
        })
        // 定义全局指令
        Vue.directive('fbind', {
            bind(element, binding) {
                element.value = binding.value
            },
            inserted(element, binding) {
                element.focus()
            },
            update(element, binding) {
                element.value = binding.value
            }
        })
        // 定义混入
        Vue.mixin({
            data() {
                return {
                    x: 100,
                    y: 200
                }
            }
        })
        // 给Vue原型上添加一个方法 vm vc 都可以用
        Vue.prototype.hello = () => alert('你好啊！！！')
    }
}

main.js

import Vue from 'vue'
import App from './App.vue'
// 引入插件
import plugins from "@/plugins"

Vue.config.productionTip = false
// 应用插件
Vue.use(plugins)
new Vue({
    // 将App组件放入容器中
    render: h => h(App),
}).$mount('#app')

School.vue

<template>
  <div class="sc">
    <h1>{{ msg }}</h1>
    <h2>学校名称：{{ name | mySlice }}</h2>
    <h2>学校地址：{{ address }}</h2>
    <button @click="test">点我测试一下hello方法</button>
  </div>
</template>

<script>

export default {
  name: `School`,
  data() {
    return {
      msg: 'i am a School',
      name: 'Peking University',
      address: 'Beijing'
    }
  },
  methods: {
    test() {
      this.hello()
    }
  }
}
</script>

<style>
.sc {
  background-color: aquamarine;
}
</style>

Student.vue

<template>
  <div class="sc">
    <h1>{{ msg }}</h1>
    <h2>学生名称：{{ name }}</h2>
    <h2>学生性别：{{ gender }}</h2>
    <input type="text" v-fbind:value="name">
  </div>
</template>

<script>
export default {
  name: `Student`,
  data() {
    return {
      msg: 'i am a Student',
      name: 'zhaoshuai-lc',
      gender: 'male',
    }
  }

}
</script>

<style>
.sc {
  background-color: aquamarine;
}
</style>

插件：
功能：用于增强Vue
本质：包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据。
定义插件：

 对象.install = fuction (Vue, options){
 // 1.添加全局过滤器
 Vue.filter( ... )
 // 2.添加全局指令
Vue.directive( ... )
}

9 scoped样式

问题：样式冲突

<template>
  <div class="sc">
    <h1>{{ msg }}</h1>
    <h2>学校名称：{{ name }}</h2>
    <h2>学校地址：{{ address }}</h2>
  </div>
</template>

<script>

export default {
  name: `School`,
  data() {
    return {
      msg: 'i am a School',
      name: 'Peking University',
      address: 'Beijing'
    }
  },
  methods: {
  }
}
</script>

<style>
.sc {
  background-color: #7f90ff;
}
</style>


<template>
  <div class="sc">
    <h1>{{ msg }}</h1>
    <h2>学生名称：{{ name }}</h2>
    <h2>学生性别：{{ gender }}</h2>
  </div>
</template>

<script>
export default {
  name: `Student`,
  data() {
    return {
      msg: 'i am a Student',
      name: 'zhaoshuai-lc',
      gender: 'male',
    }
  }

}
</script>

<style>
.sc {
  background-color: aquamarine;
}
</style>


<template>
  <div>
    <Student/>
    <School/>
  </div>
</template>

<script>
// 引入组件
import School from "./components/School"
import Student from "./components/Student"

export default {
  name: 'App',
  data() {
    return {}
  },
  methods: {},
  components: {Student, School}
}
</script>

<style>
</style>

在这里插入图片描述
在这里插入图片描述

解决方案： scoped
School.vue

<style scoped>
.sc {
  background-color: aquamarine;
}
</style>

Student.vue

<style scoped>
.sc {
  background-color: aquamarine;
}
</style>

在这里插入图片描述
又出现如下问题：

<h2 class="title">学校名称：{{ name }}</h2>

<h2 class="title">学生名称：{{ name }}</h2>

App.vue
<style>
.title{
  color: red
}
</style>

在这里插入图片描述
但是在App.vue:

<style scoped>
.title{
  color: red
}
</style>

在这里插入图片描述
又如：

<template>
  <div class="sc">
    <h1>{{ msg }}</h1>
    <h2 class="title">学校名称：{{ name }}</h2>
    <h2 class="atlc">学校地址：{{ address }}</h2>
  </div>
</template>

<script>

export default {
  name: `School`,
  data() {
    return {
      msg: 'i am a School',
      name: 'Peking University',
      address: 'Beijing'
    }
  },
  methods: {}
}
</script>

<style lang="less" scoped>
.sc {
  background-color: #7f90ff;

  .atlc {
    font-size: 40px;
  }
}
</style>

在这里插入图片描述
1）各个组件虽然样式是在自己的页面上写的，可是最后编译起来都会汇总到一起。
2）脚手架在解析Vue文件的时候，顺序是：最先扫描import引入、然后再读取配置项、最后才解析模板。
3）scoped原理：
其实就是在外层的div中，加了一个特殊的标签（随机生成值），通过标签+属性选择器，完成控制指定的div。
4）App组件不适合用。
5）安装less指令：npm i less-loader

查看less版本指令：npm view less-loader versions （less-loader可替换成别的，查看别的版本）
安装指定版本的less：npm i less-loader@7

scoped样式

作用：让样式在局部生效，放置冲突。
写法：<style scoped>

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

什么是布隆过滤器？——超详细解析【建议收藏】

什么是布隆过滤器？——超详细解析【建议收藏】

目录 1、什么是布隆过滤器&#xff1f; 2、实现原理 2.1、回顾哈希函数 2.1.1、哈希函数概念 2.1.2、散列函数的基本特性&#xff1a; 2.2、布隆过滤器数据结构 3、特点 3.1、支持删除吗&#xff1f; 3.2、优点 3.3、缺点 3.4、误判率 4、如何选择哈希函数个数和布…
阅读更多...
3 机器学习之聚类

3 机器学习之聚类

学习笔记自&#xff0c;慕课网 《Python3 入门人工智能》 https://coding.imooc.com/lesson/418.html#mid32716 分类问题 1. 无监督学习 机器学习的一种方法&#xff0c;没有给定事先标记过的训练示例&#xff0c;自动对输入的数据进行分类或分群 优点&#xff1a; 1&#xf…
阅读更多...
今年十八，喜欢CTF-杂项

今年十八，喜欢CTF-杂项

目录 前言 菜狗杯杂项签到 我吐了你随意 损坏的压缩包 misc4 misc5 前言 &#x1f340;作者简介&#xff1a;被吉师散养、喜欢前端、学过后端、练过CTF、玩过DOS、不喜欢java的不知名学生。 &#x1f341;个人主页&#xff1a;被吉师散养的职业混子 &#x1fad2;每日emo&am…
阅读更多...
Rad Studio 11.2 安装 QuickBurro 7.21 中间件组件教程

Rad Studio 11.2 安装 QuickBurro 7.21 中间件组件教程

背景 QuickBurro 官方网址&#xff1a;http://www.quickburro.org/ 系统环境&#xff1a;Rad Studio 11.2 安装其他的组件操作和这个一样的&#xff0c;同样可以参考 开始配置 先打开 Rad Studio 11&#xff0c;依次点击 File–Open Project… 然后找到你解压的 qbcn 目录下的…
阅读更多...
React 环境搭建以及创建项目工程（二）

React 环境搭建以及创建项目工程（二）

创建工程 首先创建一个工程 npx create-react-app weibo cd移动到当前创建的文件下 cd weibo 安装 React 路由 npm install react-router react-router-dom5.2.0 --save 安装 npm install 安依赖包 npm install antd --save npm install axios --save 安装less和less-…
阅读更多...
PyCharm安装步骤

PyCharm安装步骤

以64位的Windows10系统为例&#xff1a; 下载链接&#xff1a;Thank you for downloading PyCharm! 下载并打开安装包 在 Installation Options&#xff08;安装选项&#xff09;页面按下图所示勾选相应内容&#xff1a; 等待电脑自动安装完成 在PyCharm里编写程序 第1步&a…
阅读更多...
【python】天平最少砝码设计

【python】天平最少砝码设计

题目 有一架天平&#xff0c;砝码的种类和个数要你来设计。给定一个整数n&#xff0c;则待称重的物品的重量可能是 [1,n] 之间的整数&#xff0c;砝码可以放在左盘也可以放在右盘&#xff0c;要能称出所有 [1,n] 重量的物品&#xff0c;请问如何设计砝码的种类和个数&#xff…
阅读更多...
Unreal UFUNCTION函数宏标记

Unreal UFUNCTION函数宏标记

BlueprintCallable,使C中的函数在蓝图中能被调用,新建C类CustomActor继承AActor,并分别声明public、protected、private方法:拖拽一个CustomActor到Map中,打开关卡蓝图,可以到无法在蓝图中调出C中的方法:我们为这三个方法添加BlueprintCallable标记:然后在蓝图中调用:可以发现,…
阅读更多...
驱动程序开发：多点电容触摸屏

驱动程序开发：多点电容触摸屏

驱动程序开发&#xff1a;多点电容触摸屏一、编写驱动前的知识准备1、CST340触摸屏芯片寄存器2、CST340触摸屏的硬件原理图3、电容触摸屏驱动是由几种linux驱动框架组成的4、linux多点电容触摸的(Multi-touch&#xff0c;简称 MT)协议二、驱动程序的编写1、修改设备树2、驱动程…
阅读更多...
Spring AOP【AOP的基本实现与动态代理JDK Proxy 和 CGLIB区别】

Spring AOP【AOP的基本实现与动态代理JDK Proxy 和 CGLIB区别】

Spring AOP【AOP的基本实现与动态代理JDK Proxy 和 CGLIB区别】&#x1f34e;一. Spring AOP&#x1f352;1.1 什么是Spring AOP&#x1f352;1.2 Spring AOP的作用&#x1f352;1.3 AOP的组成&#x1f349;1.3.1 切面&#xff08;Aspect&#xff09;&#x1f349;1.3.2 连接点…
阅读更多...
大数据NiFi（十一）：NiFi入门案例一

大数据NiFi（十一）：NiFi入门案例一

文章目录 NiFi入门案例一 一、配置“GetFile”处理器
阅读更多...
Elastic-Job分布式任务调度

Elastic-Job分布式任务调度

一.什么是任务调度 **任务调度&#xff1a;**是指系统为了自动完成特点任务&#xff0c;在约定的特定时刻去执行任务的过程。有了任务调度就不需要人力去实现&#xff0c;系统可以在某个时间自动执行任务。 二&#xff0c;任务调度的实现方式&#xff1a; 1.**多线程方式实现…
阅读更多...
【博客579】netfilter network flow 和 routing decision的网络流处理交互关系

【博客579】netfilter network flow 和 routing decision的网络流处理交互关系

netfilter网络流转&#xff08;network flow&#xff09;与路由决策&#xff08;routing decision&#xff09;的网络流处理交互关系 1、场景&#xff1a; 我们可以通过iptables来基于netfilter机制下发我们的hook处理函数&#xff0c;那么我们平时iptables的四表五链与报文的…
阅读更多...
JDBC简介

JDBC简介

大家好&#xff0c;今天给大家分享jdbc 首先我们要知道什么是jdbc JDBC(Java DataBase Connectivity) &#xff1a;Java数据库连接技术&#xff1a;具体讲就是通过Java连接广泛的数据库&#xff0c;并对表中数据执行增、删、改、查等操作的技术 看它的架构图 或者看这个图…
阅读更多...
flowable工作流架构分析

flowable工作流架构分析

flowable工作流目录概述需求&#xff1a;设计思路实现思路分析1.复杂的状态的或者状态的维度增加的状的条件极为复杂2.工作流3.BPMN2.0协议4.协议的元素5.互斥网关包容性网关&#xff08;Inclusive Gateway&#xff09;参考资料和推荐阅读Survive by day and develop by night.…
阅读更多...
车载以太网 - DoIP诊断消息处理逻辑 - 05

车载以太网 - DoIP诊断消息处理逻辑 - 05

前面我们已经介绍了DoIP信息头部处理逻辑和路由激活处理，那根据DoIP报文的顺序，在路由激活处理完成后，接下来我们就需要发送真正的DoIP诊断信息了，那今天我们就来介绍下DoIP诊断消息的处理逻辑。 诊断消息处理逻辑 DoIP诊断报文结构： 上面表格对于DoIP诊断报文的…
阅读更多...
Android 11 SystemUI(状态/导航栏)-图标按键的深浅色

Android 11 SystemUI(状态/导航栏)-图标按键的深浅色

概述 自 Android 5.0 版本&#xff0c;Android 带来了沉浸式系统 bar&#xff08;状态栏和导航栏&#xff09;&#xff0c;Android 的视觉效果进一步提高&#xff0c;各大 app 厂商也在大多数场景上使用沉浸式效果。6.0开始提供了View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR标志位&a…
阅读更多...
MVC架构模式 | 使用银行转账的功能实现引出MVC架构模式

MVC架构模式 | 使用银行转账的功能实现引出MVC架构模式

一、银行转账的功能实现数据库表的准备创建数据库表&#xff0c;主要包括三个字段&#xff1a;自增的id、账户名、账户余额不使用MVC架构模式完成账户转账首先写一个页面&#xff0c;写入转账的账户和金额&#xff1b;并发送post请求<% page contentType"text/html;cha…
阅读更多...
【JavaEE】进入Web开发的世界-HTML

【JavaEE】进入Web开发的世界-HTML

目录 一、HTML 1.1概念篇 1.2工具篇 1.2.1文本类型的标签 1.2.2多媒体标签 1.2.3超链接 1.2.4target 1.2.5表格相关的标签 1.2.6 列表标签 1.2.7表单标签 进入Web开发的世界&#xff0c;了解html、css、JavaScript的使用。 Web开发的核心&#xff1a;准备各式各样的资…
阅读更多...
元壤：国内首家免费的数字藏品、DAO数字化营销SaaS平台

元壤：国内首家免费的数字藏品、DAO数字化营销SaaS平台

元壤&#xff1a;国内首家免费的数字藏品、DAO数字化营销SaaS平台 元壤是 Web3.0 时代 NFT 数字藏品与用户服务的数字化工具。元壤是中国企业数字资产化及数字藏品营销解决方案提供商。元壤致力于通过产品和服务,助力企业资产数字化,数字营销化,通过科技驱动数字商业变革,让数…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023