Nice2cu_Code

Vue 全套教程（一），入门 Vue 必知必会

Vue(一)

文章目录

Vue(一)
- 一、Vue简介
- - 1. 介绍
  - 2. 特点
- 二、HelloWorld
- 三、v-bind指令
- 四、v-model指令
- 五、el与data的两种写法
- - 5.1 el的两种写法
  - 5.2 data的两种写法
- 六、MVVM模型
- 七、Object.defineProperty方法
- 八、数据代理
- - 8.1 数据代理概念
  - 8.2 Vue中的数据代理
- 九、事件处理
- - 9.1 基本使用
  - 9.2 $event
  - 9.3 事件修饰符
  - - 9.3.1 prevent事件
    - 9.3.2 stop事件
    - 9.3.3 once事件
    - 9.3.4 self事件
  - 9.4 按键修饰符
- 十、计算属性
- - 10.1 基本概念
  - 10.2 简写形式

一、Vue简介

1. 介绍

Vue 是一套用来动态构建用户界面的渐进式 JavaScript 框架

构建用户界面：把数据通过某种办法变成用户界面
渐进式：Vue 可以自底向上逐层的应用，简单应用只需要一个轻量小巧的核心库，复杂应用可以引入各式各样的 Vue 插件

2. 特点

2.1 采用组件化模式，提高代码复用率、且让代码更好维护

每一个组件由三部分组成：HTML、CSS、JS，如下图：

2.2 使用虚拟 DOM 和 Diff 算法，尽量复用 DOM 节点

如果数据修改，不需要重新拼串，在虚拟 DOM 层会通过 Diff 算法比较与原数据的差异，从而复用原数据，如下图：

2.3 声明式编码，让编码人员无需直接操作 DOM，提高开发效率

不需要像命令式编码一样将每一步操作都通过代码编写，如下图：

二、HelloWorld

首先需要引入Vue，通过本地文件引入，或通过网络引入：https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js
想要让Vue工作，就需要创建一个Vue实例，给这个实例传入一些数据，比如 data（定义数据）、methods（定义方法）等，并将这个实例绑定给页面的 div 标签（称为容器）
在容器的标签中通过 {{}} （插值表达式）编写 JS 表达式可以直接获取 data 中的数据，一旦 data 中的数据发生改变，那么页面中用到该数据的地方也会自动更新

代码示例：



    
        
        初识Vue
        
        
        
    
    
        
        
        
            
            Hello，{{name}}，{{address}}

运行结果：

注意：

容器中的代码依然符合 HTML 规范，只不过可以写一些 Vue 的语法
容器和 Vue 实例是一一对应的，可以有多个容器和Vue实例一一对应（但是一般只写一个容器和一个Vue实例，其余内容配合组件一起使用）

三、v-bind指令

基本语法：v-bind:属性名 = "JS表达式"，表示将 JS 表达式的值赋值给此属性（单向绑定）

简写：:属性名 = "JS表达式"

代码示例：


    
    你好，{{name}}
    
    点我去{{school.name}}学习
    
    点我去学习

运行结果：

注意：

如果 data 中的属性值发生变化，单向绑定的数据也会自动的随之变化
插值表达式一般写在标签体中，单向绑定一般用于给标签的属性绑定值

四、v-model指令

基本语法：v-model:value = "JS表达式"，表示双向绑定，也就是 data 中的值被修改，页面的值也会被修改；页面的值被修改，对应的 data 属性值也会随之修改

简写：v-model = "JS表达式"，即双向绑定默认操作的属性就是 value

代码示例：


    

        
        双向数据绑定：


        
        双向数据绑定：


         data属性的值：{{name}}

运行结果：

注意：

双向绑定只能使用在表单类元素上，也就是标签必须有 value 属性，比如输入框、单选框、多选框等
插值表达式和单向绑定数据只能从 data 流向页面，而双向绑定还可以使数据从页面流向 data

五、el与data的两种写法

5.1 el的两种写法

5.1.1 第一种写法

<script type="text/javascript">
    new Vue({
        el: '#root', //绑定id为root的容器
        data: {
       		//定义数据 
    	}
    })
script>

5.1.2 第二种写法

<script type="text/javascript">
    const vm = new Vue({
        data: {
       		//定义数据 
    	}
    })
    vm.$mount('#root') //绑定id为root的容器
script>

两种方式的区别：

第一种创建Vue对象的时候就要绑定容器；第二种先创建Vue对象，可以做一些其他操作后再绑定容器。

5.2 data的两种写法

5.2.1 对象式

<script type="text/javascript">
    new Vue({
        el: '#root',
        //定义data对象，然后在其中定义属性
        data: {
       		name:'Nicki Minaj' 
    	}
    })
script>

5.2.2 函数式

<script type="text/javascript">
    new Vue({
        el: '#root',
        //定义data函数，然后在返回值中定义属性
        data(){
            return{
                //返回值是定义的数据
                name:'Nicki Minaj' 
            }
        }
    })
script>

注意：

使用组件时，必须使用函数式定义数据
由 Vue 管理的函数不能写成箭头函数，如果使用箭头函数，则函数中的 this 表示的是 window，如果使用普通函数格式，则 this 表示 Vue对象

六、MVVM模型

M：模型 (Model) ：data中的数据
V：视图 (View) ：模板代码
VM：视图模型 (ViewModel)：Vue实例

图示：

图中 Vue 实例的双向箭头表示：

Data Bindings：数据存放在 Model 中，经过 Vue 实例将数据绑定在页面上
DOM Listeners：页面上的数据会被 Vue 实例监听，比如双向绑定：页面数据发生变化，对应 Model 中的数据也跟着变化

代码示例：

<body>
    <div id="root">
        <h1>学校名称：{{name}}h1>
        <h1>学校地址：{{address}}h1>

        
        <h1>测试一下2：{{$options}}h1>
        <h1>测试一下3：{{$emit}}h1>
    div>
body>

<script type="text/javascript">

    //一般使用vm这个变量名表示Vue实例
    const vm = new Vue({
        el:'#root',
        data:{
            name:'清华大学',
            address:'北京',
        }
    })
    // 控制台输出Vue实例
    console.log(vm)
script>

运行结果1：

控制台输出 Vue 实例：

运行结果2：

页面展示：

结论：

data 中所有的属性，最后都出现在了 Vue 实例中
Vue 实例身上所有的属性以及 Vue 原型所有的属性，都可以直接在 View 中使用

七、Object.defineProperty方法

先看一段 JS 代码，将一个变量的值赋值给一个属性：

let number = 18
let person = {
    name:'张三',
    sex:'男',
    age:number //age值为18
}

如果通过这种方式给 age 赋值，只有第一次代码执行到赋值语句时才会将 age 的值修改为 18，如果以后 number 的值发生变化，则 age 不会跟着变化。

方法介绍：

此方法用于给对象定义属性使用，参数1表示给哪个对象定义属性，参数2表示给对象中的哪个属性赋值，参数3写赋予值的配置对象（对属性值进行一些高级的操作），如下所示：

<script type="text/javascript" >
    
    let person = {
        name:'张三',
        sex:'男',
    }

    Object.defineProperty(person,'age',{
        value:18, //这个属性值为18
        enumerable:true, //控制属性是否可以枚举（被遍历），默认值是false
        writable:true, //控制属性是否可以被修改，默认值是false
        configurable:true //控制属性是否可以被删除，默认值是false
    })
    
script>

运行结果：

get()、set()方法：

<script type="text/javascript" >

    let number = 12
    let person = {
        name:'张三',
        sex:'男',
    }

    Object.defineProperty(person,'age',{

        //当有人读取person的age属性时，get函数（getter）就会被调用，且返回值就是age此时的值
        get(){
            console.log('有人读取age属性，get方法被调用')
            return number //返回定义的number变量值
        },

        //当有人修改person的age属性时，set函数（setter）就会被调用，且参数是要赋予age属性的值
        set(value){
            console.log('有人修改age属性，set方法被调用，修改值为',value)

            //age的值取决于number，修改number的值就可以修改age的值
            //并没有直接修改age属性值
            number = value 
        }
    })
script>

运行结果：

上述代码完成了一种功能：person 对象中有 age 这个属性，但是 age 属性的值并不是固定的，可以随时读取，随时修改。

八、数据代理

8.1 数据代理概念

**数据代理：**通过一个代理对象，操作另一个对象中的数据，而不是直接操作该对象。

代码示例：


<script type="text/javascript" >

    let obj = {
        x:100
    }
    let obj2 = {
        y:200
    }

    Object.defineProperty(obj2,'x',{
        get(){
            return obj.x
        },
        set(value){
            obj.x = value
        }
    })
script>

运行结果：

8.2 Vue中的数据代理

观察下述代码：

<body>
    <div id="root">
        <h2>名称：{{name}}h2>
        <h2>地址：{{address}}h2>
    div>
body>

<script type="text/javascript">
    const vm = new Vue({
        el:'#root',
        data:{
            name:'Jay',
            address:'台湾'
        }
    })
script>

运行结果1：

运行结果2：

运行结果3：

总结：

Vue 中的数据代理指的就是通过 Vue 实例（Vue实例中也会有上述的 name、address 属性）来代理 data 对象中 name、address 属性的操作
如果没有数据代理，那么在 View 中获取 data 中的数据只能通过上述的 _data 来获取
- Vue 使用数据代理的目的就是可以编码时简写，比如直接写 name 就可以拿到 'Jay' 这个值（编码获取的是 Vue 中的 name，最终通过 getter() 方法读取到的是 data 中的 name）
- Vue 使用数据代理还可以将数据的改变同步到页面上，比如修改 vm.name 值，最终通过 setter() 方法修改的是 data 中的数据，data 中的数据发生了变化，最终会直接影响到页面上的数据
- 只要 data 中的数据发生变化，Vue 就会重新解析模板（View），以更新模板中的值，如果解析模板的过程中，插值表达式中有调用函数，这个函数一定会被重新调用
通过 Object.defineProperty() 方法把 data 对象中的所有属性添加到 Vue 实例上，并且为每个属性自动的添加 getter/setter，通过这些方法修改 data 中的属性值
具体见下图：

可以发现编码时写的 data 没有出现在 Vue 实例中，都转换成了 _data，所以最终读取的都是 _data 中的数据。
只有 data 中的数据会做数据代理

九、事件处理

9.1 基本使用

基本语法：v-on:事件名 = "xxx"，xxx 表示事件发生时要执行的函数，也可以写一些简单的逻辑语句

简写：@事件名 = "xxx"

**事件对象：**事件触发的时候会执行某个函数，该函数的形参（如果只有一个）会自动接收一个事件对象（即使调用函数时没有传递任何实参），这个事件对象中包含这个事件的各种信息

代码示例：

<body>
    <div id="root">
        <h2>欢迎来到{{name}}学习h2>
        
        <button @click="showInfo1">点我提示信息1button>
    div>
body>

<script type="text/javascript">
    const vm = new Vue({
        el:'#root',
        data:{
            name:'霍格沃茨',
        },
        
        //定义的方法要写在methods对象中
        methods:{
            showInfo1(event){
                
                //event表示事件对象，target表示发生这个事件时的标签
                //event可以更改成其他的任何字母（都表示事件对象）
                console.log(event.target)
                
                //innerText表示标签中的文本
                console.log(event.target.innerText)
            },
        }
    })
script>

运行结果1：

运行结果2：

9.2 $event

如果想要事件发生时既要传递实参又要在函数中使用事件对象，那么就必须在调用函数时使用 $event 来表示传递的是事件对象，如下代码所示：

<div id="root">
    <h2>欢迎来到{{name}}学习h2>
    
    <button @click="showInfo1($event, 22)">点我提示信息1button>
div>
body>

<script type="text/javascript">
    const vm = new Vue({
        el:'#root',
        data:{
            name:'霍格沃茨',
        },
        methods: {
            showInfo1(event, number) {
                // event表示事件对象，number表示接收的实参
                console.log(event.target)
                console.log('参数数字是' + number)
            },
        }
    })
script>

运行结果：

总结：

methods 中定义的方法属于被 Vue 实例所管理的方法：

如果使用箭头函数，this 表示 window
如果使用普通函数，this 表示 Vue 实例或者组件实例对象

9.3 事件修饰符

事件修饰符有6种：

prevent：阻止事件的默认行为
stop：阻止事件冒泡（使用在内部标签上）
- 事件冒泡：内部标签的事件触发时，外层标签如果有相同的事件，那么这个外部标签的事件会被自动触发
once：事件只触发一次
self：只关心自己标签上触发的事件，不监听事件冒泡
capture：使用事件的捕获模式
passive：事件的默认行为立即执行，无需等待事件回调执行完毕

9.3.1 prevent事件

代码示例：

<body>
    <div id="root">
        <h2>欢迎来到{{name}}学习h2>
        
        <a href="http://www.baidu.com" @click.prevent="showInfo">点我提示信息a>
    div>
body>

<script type="text/javascript">
    new Vue({
        el:'#root',
        data:{
            name:'霍格沃茨'
        },
        methods:{
            showInfo(){
                alert('同学你好！')
            }
        }
    })
script>

点击之后只弹出提示信息，没有跳转到百度页面。

9.3.2 stop事件

代码示例：

<body>
    <div id="root">
        <h2>欢迎来到{{name}}学习h2>
        
        <div @click = "showInfo">
            
            
            <button @click.stop = "showInfo"> 按钮 button>
        div>

    div>
body>

<script type="text/javascript">
    new Vue({
        el:'#root',
        data:{
            name:'霍格沃茨'
        },
        methods:{
            showInfo(){
                alert('同学你好！')
            }
        }
    })
script>

只弹出一次提示信息，如果不阻止事件冒泡，则会弹出两次提示信息。

9.3.3 once事件


<button @click.once="showInfo"> 按钮 button>

9.3.4 self事件



<div @click.self = "showInfo">
    <button @click= "showInfo"> 按钮 button>
div>

点击了按钮之后，只弹出一次提示信息。

注意：事件修饰符可以连续写，比如：@click.prevent.stop = "method" 表示既阻止事件的默认行为又阻止事件冒泡的发生。

9.4 按键修饰符

使用方式：@事件名.按键修饰符名称 = "要执行的方法"
作用：用来和按键事件绑定在一起，修饰特定按键事件
- click：点击事件
- keyup：按键抬起事件
- keydown：按键按下事件
常用的按键修饰符有9个
- enter：回车
- delete：删除或退格
- esc：退出
- space：空格
- tab：换行（键盘按下就会失去焦点，所以必须配合 keydown 使用）
- up：上
- down：下
- left：左
- right：右

代码示例：

<body>
    <div id="root">
        
        <input type="text" placeholder="请按下对应的按键" @keyup.enter="showInfo">input>
    div>
body>

<script type="text/javascript">
    new Vue({
        el:'#root',
        methods:{
            showInfo(event){
                alert(event.target.value)
            }
        }
    })
script>

获取按键名

<script type="text/javascript">
    new Vue({
        methods:{
            // event是事件对象
            showInfo(event){
                //获取按键名
                console.log(event.key)
                //获取按键编码
                console.log(event.keyCode)
            }
        }
    })
script>

可以使用上述方式得到所有按键的按键名，故可以使用的按键修饰符不仅仅是默认的9个。

注意：如果想要使用非默认的9个按键修饰符，使用时必须将对应的按键名进行转换，比如：CapsLock 转换成 caps-lock。

十、计算属性

10.1 基本概念

如果一个属性要通过已有的属性计算出来，那么可以使用计算属性。计算属性的读取和修改必须通过定义 getter/setter 来进行。

注：计算属性的底层借助了 Objcet.defineproperty 方法提供的 getter 和 setter 来完成读取和修改

代码示例：

<body>
    <div id="root">
        姓：<input type="text" v-model="firstName"> <br/><br/>
        名：<input type="text" v-model="lastName"> <br/><br/>
        
        全名：<span>{{fullName}}span> <br/><br/>
        全名：<span>{{fullName}}span>
    div>
body>

<script type="text/javascript">

    Vue.config.productionTip = false

    const vm = new Vue({
        el:'#root',
        data:{
            firstName:'张',
            lastName:'三',
        },
        methods: {
        },

        // 定义计算属性必须使用computed对象
        computed:{
            // 一个新的属性fullName，需要通过已有的属性计算出来
            fullName:{
                // 读取计算属性的值
                get(){
                    console.log('计算属性被调用了')
                    // this表示Vue实例，读取data中的属性
                    // 计算属性fullName依赖已有的属性
                    return this.firstName + '-' + this.lastName
                },
                // 修改计算属性的值
                set(value){
                    console.log('set',value)
                    const arr = value.split('-')
                    // 修改data中的属性（依赖的已有属性）
                    this.firstName = arr[0]
                    this.lastName = arr[1]
                }
            }
        }
    })
script>

运行结果1：

可以直接在 View 中读取计算属性：

运行结果2：

初始时，尽管调用了两次计算属性，但是控制台仅显示一次提示，也就是计算属性只调用了1次 get 方法。

原因：计算属性使用了缓存机制，如果已经有了计算属性的值，之后读取的都是缓存值（效率更高）。

运行结果3：

修改输入框内容的同时计算属性的 get 方法会被多次调用。

原因：get 方法何时被调用？（不使用缓存）

第一次读取计算属性时
当依赖的已有属性值发生变化时

运行结果4：

修改计算属性的值时，set 被调用，然后由于修改所依赖的已有的属性值，故 get 方法也会随之调用。

10.2 简写形式

当计算属性只读不改的时候可以使用简写形式。

代码示例：

<script type="text/javascript">
    const vm = new Vue({
        el:'#root',
        computed:{

            //完整写法
            /* fullName:{
					get(){
						console.log('get被调用了')
						return this.firstName + '-' + this.lastName
					}
				} */

            //简写
            //fullName直接当作get方法来用
            fullName(){
                console.log('get被调用了')
                return this.firstName + '-' + this.lastName
            }
        }
    })
script>

注意：

使用简写形式之后，fullName 仍然是一个属性而不是方法，所以调用的时候不能加小括号。

你可能感兴趣的:(前端知识,vue,前端框架,vue.js,html)

【vue】Mammoth.js的使用：将.docx转换成HTML 暴富暴富暴富啦啦啦 1024程序员节
mammoth.convertToHtml(input,options）：把源文档转换为HTML文档mammoth.convertToMarkdown(input,options)：把源文档转换为Markdown文档。mammoth.extractRawText(input)：提取文档的原始文本。这将忽略文档中的所有格式。每个段落后跟两个换行符。npminstallelement-uimammot
vue3-video-play 插件在 Vue 3 项目上的应用放逐者-保持本心，方可放逐 vue3应用 vue.js 前端 javascript vue3-video-play
文章目录vue3-video-play插件在Vue3项目上的应用一、插件简介二、插件安装三、插件组件应用示例1.局部引入组件2.全局引入组件四、需要注意的事项五、本地环境将`package.json`中`"module":"./dist/index.es.js"`改为`"module":"./dist/index.mjs"`问题解析探索问题描述原因分析解决方案格式及应用实例vue3-video-p
单细胞轨迹分析-monocle包的使用探序基因 r语言
探序基因肿瘤研究院整理安装：monocle源码下载：https://www.bioconductor.org/packages/release/bioc/html/monocle.htmlR版本，4.2.0BiocManager::install("monocle")不过在安装过程中还是报错了：Warning:无法在https://bioconductor.org/packages/3.15/bi
前端导出word文件—包含canvas(echarts图表) Liuer_Qin js canvas echarts echarts 前端 javascript
一、使用的插件html-docx-js二、整体思路因为canvas是运行在内存中的，所以不能简单的通过dom获取canvas图片，需要手动的先将canvas转为image。三、实现先克隆要下载的DOM的副本。因为canvas是运行在内存中的，所以也不能通过cloneNode方法克隆下来（克隆下来是空的）。我们这里将原DOM中的canvas转成图片，然后插入到副本的对应位置，这样操作不会影响原DOM
Vue.js 基础与实战指南：从入门到跑路王嘉俊705 前端 javascript visual studio code html 前端 vue.js
一、Vue的两种使用方式扩展核心包开发直接通过引入Vue.js，适用于简单页面或局部功能增强。优点：轻量，无需构建工具。缺点：难以管理复杂项目，缺少工程化支持。工程化开发使用VueCLI、Vite等工具创建项目，结合Webpack/Vite构建。支持单文件组件（.vue文件），结构清晰（`,,）。插件生态丰富（如VueRouter、Vuex、Pinia）。二、Vue实例的深入理解核心配置项 new
动态蛇形卷积（DySnakeConv）在YOLOv8检测头中的应用与优化-分割性能的提升【YOLOv8】步入烟尘 YOLO 动态蛇形卷积 DySnakeConv
本专栏专为AI视觉领域的爱好者和从业者打造。涵盖分类、检测、分割、追踪等多项技术，带你从入门到精通！后续更有实战项目，助你轻松应对面试挑战！立即订阅，开启你的YOLOv8之旅！专栏订阅地址：https://blog.csdn.net/mrdeam/category_12804295.html文章目录动态蛇形卷积（DySnakeConv）在YOLOv8检测头中的应用与优化-分割性能的提升【YOLOv
微信支付-扫码支付全流程自娱自乐22 thinkphp php 微信扫码支付
微信支付官方文档：`https://pay.weixin.qq.com/wiki/doc/api/index.html`微信支付分为2种模式：【模式一】：商户后台系统根据微信支付规则链接生成二维码，链接中带固定参数productid（可定义为产品标识或订单号）。用户扫码后，微信支付系统将productid和用户唯一标识(openid)回调商户后台系统(需要设置支付回调URL)，商户后台系统根据pr
mac+php5.3的docker-compose.yml分享自娱自乐22 docker
version:'3'services:nginx:image:nginx:latestcontainer_name:nginx-composevolumes:-./wwwroot:/usr/share/nginx/html:rw-./nginx/nginx/:/etc/nginx/:rw-./log/nginx:/var/log/nginx:rwrestart:alwayslinks:-phpp
Python+Playwright常用元素定位方法 HAMYHF python 功能测试
CSSselector选择器在CSS中，定位元素主要通过选择器完成，以下是几种常见的CSS选择器定位方法：标签选择器(element):直接使用HTML元素名称来定位，例如p会选择所有段落元素。属性选择器(attribute):选择所有具有指定属性的元素，无论该属性的值是什么。例如，[title]会选择所有包含title属性的元素。选择具有指定属性，并且该属性值完全等于给定值的元素。例如，[typ
JavaScript网页设计案例：打造交互式个人简历网站程序媛小果前端 javascript 开发语言 ecmascript
在当今数字化时代，个人简历不再局限于纸质文档，而是越来越多地以网页形式呈现。JavaScript作为一种强大的客户端脚本语言，为网页设计提供了无限可能，使得网页不仅仅是静态的信息展示，而是具有丰富交互性的平台。本文将通过一个案例，展示如何使用HTML、CSS和JavaScript来设计一个交互式的个人简历网站。1.项目概述本案例的目标是创建一个个人简历网站，它不仅展示个人信息、工作经历、教育背景和
vue3计算属性computed
计算属性computedimport{computed}from"vue"//方式一//constcollapse=computed(()=>{//console.log('计算属性变化');//returnisCollapse//})//方式二constcollapse=computed({get:()=>{//返回订阅值returnisCollapse},set:(val)=>{//这里可以对
solidjs中实现vue中的keep-alive功能的总结 chrome-devtools
在Solid.js中，虽然没有像Vue中keep-alive这样的直接API，但你可以使用类似的方式来保持组件的状态或避免组件的重复挂载。Solid.js中的组件本质上是基于反应式系统的，每个组件都在被销毁时自动清除其反应式状态。所以，如果你想模拟keep-alive的效果，可以使用以下几种方式：1.使用createEffect或createMemo保存状态你可以通过使用createEffect或
solidjs中实现vue中的keep-alive功能的方法 angular
在Solid.js中，虽然没有像Vue中keep-alive这样的直接API，但你可以使用类似的方式来保持组件的状态或避免组件的重复挂载。Solid.js中的组件本质上是基于反应式系统的，每个组件都在被销毁时自动清除其反应式状态。所以，如果你想模拟keep-alive的效果，可以使用以下几种方式：1.使用createEffect或createMemo保存状态你可以通过使用createEffect或
[附源码]计算机毕业设计基于SpringBoot的小说阅读系统计算机毕设程序设计 spring boot java 后端
项目运行环境配置：Jdk1.8+Tomcat7.0+Mysql+HBuilderX（Webstorm也行）+Eclispe（IntelliJIDEA,Eclispe,MyEclispe,Sts都支持）。项目技术：SSM+mybatis+Maven+Vue等等组成，B/S模式+Maven管理等等。环境需要1.运行环境：最好是javajdk1.8，我们在这个平台上运行的。其他版本理论上也可以。2.ID
基于 Spring Boot 的社区居民健康管理系统部署说明书小星袁毕业设计原文 spring boot 后端 java
目录1系统概述2准备资料3系统安装与部署3.1数据库部署3.1.1MySQL的部署3.1.2Navicat的部署3.2服务器部署3.3客户端部署4系统配置与优化5其他基于SpringBoot的社区居民健康管理系统部署说明书1系统概述本系统主要运用了SpringBoot框架，前端页面的设计主要依托Vue框架来构建，实现丰富且交互性强的用户界面，后台管理功能则采用SpringBoot框架与MySQL数
2025年全国CTF夺旗赛-从零基础入门到竞赛，看这一篇就稳了！白帽安全-黑客4148 安全 web安全网络网络安全 CTF
目录一、CTF简介二、CTF竞赛模式三、CTF各大题型简介四、CTF学习路线4.1、初期1、html+css+js（2-3天）2、apache+php（4-5天）3、mysql（2-3天）4、python(2-3天)5、burpsuite（1-2天）4.2、中期1、SQL注入（7-8天）2、文件上传（7-8天）3、其他漏洞（14-15天）4.3、后期五、CTF学习资源5.1、CTF赛题复现平台5.
2025年全国CTF夺旗赛-从零基础入门到竞赛，看这一篇就稳了！白帽安全-黑客4148 网络安全 web安全 linux 密码学 CTF
目录一、CTF简介二、CTF竞赛模式三、CTF各大题型简介四、CTF学习路线4.1、初期1、html+css+js（2-3天）2、apache+php（4-5天）3、mysql（2-3天）4、python(2-3天)5、burpsuite（1-2天）4.2、中期1、SQL注入（7-8天）2、文件上传（7-8天）3、其他漏洞（14-15天）4.3、后期五、CTF学习资源5.1、CTF赛题复现平台5.
dreamweaver html语言,Dreamweaver网页设计与制作(HTML+CSS+JavaScript) weixin_39979245 dreamweaver html语言
Dreamweaver网页设计与制作(HTML+CSS+JavaScript)编辑锁定讨论上传视频本词条缺少信息栏，补充相关内容使词条更完整，还能快速升级，赶紧来编辑吧！《Dreamweaver网页设计与制作(HTML+CSS+JavaScript)》是2014年清华大学出版社出版的图书。Dreamweaver网页设计与制作(HTML+CSS+JavaScript)图书详细信息编辑ISBN：978
html 5中css的含义,HTML 5+CSS+JavaScript网页设计与制作律保阁-Michael html 5中css的含义
HTML5+CSS+JavaScript网页设计与制作编辑锁定讨论上传视频《HTML5+CSS+JavaScript网页设计与制作》是2019年4月清华大学出版社出版的图书，作者是彭进香、张茂红、王玉娟、叶娟、孙秀娟、万幸、刘英。书名HTML5+CSS+JavaScript网页设计与制作作者彭进香张茂红王玉娟叶娟作者孙秀娟展开作者孙秀娟万幸刘英收起出版社清华大学出版社出版时间2019年4月定价48
html+css+javascript实用详解,HTML+CSS+JavaScript 课程标准 vvv666s
②学会运用HTML语言中的标记设置颜色、文本格式和列表；熟练掌握颜色值的配置和背景图案的设置方法,熟练掌握字符、链接颜色的设置方法；③掌握在网页中添加CSS、嵌入图像、声音、多媒体信息的方法；④熟练掌握表格的使用方法，学会利用表格设布局网页；掌握框架制作网页的方法，会使用框架设计网页；掌握制作表单的方法，会利用表单建立交互式页面；⑤掌握JavaScript语言的语法；⑥掌握在HTML语言代码中嵌入
EDA事件驱动架构领域事件 Event Sourcing talentluke 架构设计
摘自http://www.jdon.com/eda.htmlEDA(Event-drivenarchitecture)是以事件为核心，与SOA以服务为核心有本质区别，是状态模式的延伸到架构上，事件是触发状态变化的根源，事件是介于业务和技术两者之间的概念，用户界面是事件主要发生来源，事件也可以来源其他系统或模块，通过事件可以实现系统或组件之间松耦合。EDA可以实现SOA服务之间的调用，事件也可以用于
前端开发入门指南：HTML、CSS和JavaScript基础知识方向感超强的 javascript css html 前端
引言：大家好，我是一名简单的前端开发爱好者，对于网页设计和用户体验的追求让我深深着迷。在本篇文章中，我将带领大家探索前端开发的基础知识，涵盖HTML、CSS和JavaScript。如果你对这个领域感兴趣，或者想要了解如何开始学习前端开发，那么这篇文章将为你提供一个良好的起点。1.前端开发概述在我们深入了解前端开发的细节之前，让我们先了解一下前端开发的定义和作用。简而言之，前端开发涉及构建用户直接与
小程序类毕业设计选题题目推荐（29）初尘屿风毕业设计后端小程序课程设计 spring boot 微信后端学习
基于微信小程序的设备故障报修管理系统设计与实现，SpringBoot+Vue+毕业论文基于微信小程序的设备故障报修管理系统设计与实现，SSM+Vue+毕业论文基于微信小程序的电影院购票小程序系统，SpringBoot+Vue+毕业论文+指导搭建视频基于微信小程序的宿舍报修管理系统设计与实现，SpringBoot（15500字）+Vue+毕业论文+指导搭建视频基于微信小程序的电影院订票选座系统的设计
scoped作用原理及样式穿透的应用太阳与星辰 Vue2 前端面试前端 vue 面试
scoped作用原理及样式穿透的应用(1)scoped作用原理(2)对第三条的详细解释(3)场景----微调第三方库样式(4)样式穿透(5)补充(1)scoped作用原理scoped是Vue样式作用域的一个特性,相信很多人经常在项目中用它来避免样式污染(即样式隔离)。当我们在一个组件中给style标签加上scoped时候,它会遵循以下三个规则，如下为组件实例生成一个唯一标识(可以称为文件指纹),给
【2025年】全国CTF夺旗赛-从零基础入门到竞赛，看这一篇就稳了！网安詹姆斯 web安全 CTF 网络安全大赛 python linux
【2025年】全国CTF夺旗赛-从零基础入门到竞赛，看这一篇就稳了！基于入门网络安全/黑客打造的：黑客&网络安全入门&进阶学习资源包目录一、CTF简介二、CTF竞赛模式三、CTF各大题型简介四、CTF学习路线4.1、初期1、html+css+js（2-3天）2、apache+php（4-5天）3、mysql（2-3天）4、python(2-3天)5、burpsuite（1-2天）4.2、中期1、S
前端基础入门：HTML、CSS 和 JavaScript 阿绵前端前端 html css js
在现代网页开发中，前端技术扮演着至关重要的角色。无论是个人网站、企业官网，还是复杂的Web应用程序，前端开发的基础技术HTML、CSS和JavaScript都是每个开发者必须掌握的核心技能。本文将详细介绍这三者的基本概念及其应用一、HTML——网页的骨架HTML（HyperTextMarkupLanguage）是构建网页的基础语言。它是网页的结构和内容的标记语言，决定了网页上的文本、图像、表单等元
网页制作03-html,css,javascript初认识のhtml的图像设置 Ama_tor 网页制作专栏 html css 前端
一、图像格式网页中图像的格式有三种，Gif，Jpeg，PngGif：Graphicinterchangeformat图像交换格式，文件最多可使用256种颜色，最适合显示色调不连续或具有大面积单一颜色的图像，例如导航条、按钮、图标、徽标或其他具有统一色彩和色调的图像；还可以制作动态图像Jpeg：Giantphotographicexpectgroup，它是一种图像压缩格式，可包含数百万种颜色，不支持
MXTU MAX 苹果cmsv10模板仿毒舌自适应主题/短视X体验版完全开源希希分享软希网58soho_cn 源码资源仿毒舌自适应主题/
基于MxonePro二开的主题，全开源未加密。MXTUMAX仿毒舌苹果CMS影视自适应主题主题说明：1、将mxtheme目录放置根目录|将mxpro目录放置template文件夹中2、苹果cms后台-系统-网站参数配置-网站模板-选择mxpro模板目录填写html3、网站模板选择好之后一定要先访问前台，然后再进入后台设置4、主题后台地址：MXTUMAX图图主题,/admin.php/admin/m
使用Python获取在线股票交易网站的实时交易数据嵌入式开发项目 2025年爬虫精通专栏 python 开发语言爬虫
目录步骤1：选择股票交易网站步骤2：使用requests库发送HTTP请求步骤3：解析HTML内容步骤4：提取实时交易数据步骤5：存储和使用数据在金融市场中，实时交易数据对于投资者来说具有重要的价值。实时的股票价格、交易量和其他市场指标可以帮助投资者做出更准确的决策，同时也是进行金融分析和建模的重要数据源。在本篇博客中，我们将学习如何使用Python获取在线股票交易网站的实时交易数据。在开始之前，
【FastAPI 】FastAPI 模板：提供静态文件 iFakeCoder Flask fastapi python 开发语言
FastAPI是一个现代、快速（高性能）的Web框架，用于基于标准Python类型提示使用Python3.7+构建API。虽然它的主要用例是构建API，但FastAPI还可以轻松提供静态文件和HTML模板，从而让您可以构建全栈Web应用程序。在此博客中，我们将探讨如何使用FastAPI提供静态文件。我们将介绍基础知识并提供演示以帮助您入门。为什么要提供静态文件？静态文件是不经常更改的资产，并按原样
强大的销售团队背后竟然是大数据分析的身影蓝儿唯美数据分析
Mark Roberge是HubSpot的首席财务官，在招聘销售职位时使用了大量数据分析。但是科技并没有挤走直觉。大家都知道数理学家实际上已经渗透到了各行各业。这些热衷数据的人们通过处理数据理解商业流程的各个方面，以重组弱点，增强优势。 Mark Roberge是美国HubSpot公司的首席财务官，HubSpot公司在构架集客营销现象方面出过一份力——因此他也是一位数理学家。他使用数据分析
Haproxy+Keepalived高可用双机单活 bylijinnan 负载均衡 keepalived haproxy 高可用
我们的应用MyApp不支持集群，但要求双机单活（两台机器：master和slave）： 1.正常情况下，只有master启动MyApp并提供服务 2.当master发生故障时，slave自动启动本机的MyApp，同时虚拟IP漂移至slave，保持对外提供服务的IP和端口不变 F5据说也能满足上面的需求，但F5的通常用法都是双机双活，单活的话还没研究过服务器资源 10.7
eclipse编辑器中文乱码问题解决 0624chenhong eclipse乱码
使用Eclipse编辑文件经常出现中文乱码或者文件中有中文不能保存的问题，Eclipse提供了灵活的设置文件编码格式的选项，我们可以通过设置编码格式解决乱码问题。在Eclipse可以从几个层面设置编码格式：Workspace、Project、Content Type、File 本文以Eclipse 3.3（英文）为例加以说明： 1. 设置Workspace的编码格式： Windows-&g
基础篇--resources资源不懂事的小屁孩 android
最近一直在做java开发，偶尔敲点android代码，突然发现有些基础给忘记了，今天用半天时间温顾一下resources的资源。 String.xml 字符串资源涉及国际化问题 http://www.2cto.com/kf/201302/190394.html string-array
接上篇补上window平台自动上传证书文件的批处理问卷酷的飞上天空 window
@echo off : host=服务器证书域名或ip，需要和部署时服务器的域名或ip一致 ou=公司名称, o=公司名称 set host=localhost set ou=localhost set o=localhost set password=123456 set validity=3650 set salias=s
企业物联网大潮涌动：如何做好准备？蓝儿唯美企业
物联网的可能性也许是无限的。要找出架构师可以做好准备的领域然后利用日益连接的世界。尽管物联网（IoT）还很新，企业架构师现在也应该为一个连接更加紧密的未来做好计划，而不是跟上闸门被打开后的集成挑战。“问题不在于物联网正在进入哪些领域，而是哪些地方物联网没有在企业推进，” Gartner研究总监Mike Walker说。 Gartner预测到2020年物联网设备安装量将达260亿，这些设备在全
spring学习——数据库（mybatis持久化框架配置） a-john mybatis
Spring提供了一组数据访问框架，集成了多种数据访问技术。无论是JDBC，iBATIS(mybatis)还是Hibernate，Spring都能够帮助消除持久化代码中单调枯燥的数据访问逻辑。可以依赖Spring来处理底层的数据访问。 mybatis是一种Spring持久化框架，要使用mybatis，就要做好相应的配置： 1，配置数据源。有很多数据源可以选择，如：DBCP，JDBC，aliba
Java静态代理、动态代理实例 aijuans Java静态代理
采用Java代理模式，代理类通过调用委托类对象的方法，来提供特定的服务。委托类需要实现一个业务接口，代理类返回委托类的实例接口对象。按照代理类的创建时期，可以分为：静态代理和动态代理。所谓静态代理：　指程序员创建好代理类，编译时直接生成代理类的字节码文件。所谓动态代理：　在程序运行时，通过反射机制动态生成代理类。一、静态代理类实例： 1、Serivce.ja
Struts1与Struts2的12点区别 asia007 Struts1与Struts2
1) 在Action实现类方面的对比：Struts 1要求Action类继承一个抽象基类；Struts 1的一个具体问题是使用抽象类编程而不是接口。Struts 2 Action类可以实现一个Action接口，也可以实现其他接口，使可选和定制的服务成为可能。Struts 2提供一个ActionSupport基类去实现常用的接口。即使Action接口不是必须实现的，只有一个包含execute方法的P
初学者要多看看帮助文档不要用js来写Jquery的代码百合不是茶 jquery js
解析json数据的时候需要将解析的数据写到文本框中, 出现了用js来写Jquery代码的问题; 1, JQuery的赋值有问题代码如下: data.username 表示的是: 网易 $("#use
经理怎么和员工搞好关系和信任 bijian1013 团队项目管理管理
产品经理应该有坚实的专业基础，这里的基础包括产品方向和产品策略的把握，包括设计，也包括对技术的理解和见识，对运营和市场的敏感，以及良好的沟通和协作能力。换言之，既然是产品经理，整个产品的方方面面都应该能摸得出门道。这也不懂那也不懂，如何让人信服？如何让自己懂？就是不断学习，不仅仅从书本中，更从平时和各种角色的沟通
如何为rich:tree不同类型节点设置右键菜单 sunjing contextMenu tree Richfaces
组合使用target和targetSelector就可以啦，如下： <rich:tree id="ruleTree" value="#{treeAction.ruleTree}" var="node" nodeType="#{node.type}" selectionChangeListener=&qu
【Redis二】Redis2.8.17搭建主从复制环境 bit1129 redis
开始使用Redis2.8.17 Redis第一篇在Redis2.4.5上搭建主从复制环境，对它的主从复制的工作机制，真正的惊呆了。不知道Redis2.8.17的主从复制机制是怎样的，Redis到了2.4.5这个版本，主从复制还做成那样，Impossible is nothing! 本篇把主从复制环境再搭一遍看看效果，这次在Unbuntu上用官方支持的版本。 Ubuntu上安装Red
JSONObject转换JSON--将Date转换为指定格式白糖_ JSONObject
项目中，经常会用JSONObject插件将JavaBean或List<JavaBean>转换为JSON格式的字符串，而JavaBean的属性有时候会有java.util.Date这个类型的时间对象，这时JSONObject默认会将Date属性转换成这样的格式： {"nanos":0,"time":-27076233600000,
JavaScript语言精粹读书笔记 braveCS JavaScript
【经典用法】： //①定义新方法 Function .prototype.method=function(name, func){ this.prototype[name]=func; return this; } //②给Object增加一个create方法，这个方法创建一个使用原对
编程之美-找符合条件的整数用字符串来表示大整数避免溢出 bylijinnan 编程之美
import java.util.LinkedList; public class FindInteger { /** * 编程之美找符合条件的整数用字符串来表示大整数避免溢出 * 题目：任意给定一个正整数N，求一个最小的正整数M(M>1)，使得N*M的十进制表示形式里只含有1和0 * * 假设当前正在搜索由0，1组成的K位十进制数
读书笔记 chengxuyuancsdn 读书笔记
1、Struts访问资源 2、把静态参数传递给一个动作 3、<result>type属性 4、s:iterator、s:if c:forEach 5、StringBuilder和StringBuffer 6、spring配置拦截器 1、访问资源 (1)通过ServletActionContext对象和实现ServletContextAware,ServletReque
[通讯与电力]光网城市建设的一些问题 comsci 问题
信号防护的问题,前面已经说过了,这里要说光网交换机与市电保障的关系我们过去用的ADSL线路,因为是电话线,在小区和街道电力中断的情况下,只要在家里用笔记本电脑+蓄电池,连接ADSL,同样可以上网........
oracle 空间RESUMABLE daizj oracle 空间不足 RESUMABLE 错误挂起
空间RESUMABLE操作转 Oracle从9i开始引入这个功能，当出现空间不足等相关的错误时，Oracle可以不是马上返回错误信息，并回滚当前的操作，而是将操作挂起，直到挂起时间超过RESUMABLE TIMEOUT，或者空间不足的错误被解决。这一篇简单介绍空间RESUMABLE的例子。第一次碰到这个特性是在一次安装9i数据库的过程中，在利用D
重构第一次写的线程池 dieslrae 线程池 python
最近没有什么学习欲望,修改之前的线程池的计划一直搁置,这几天比较闲,还是做了一次重构,由之前的2个类拆分为现在的4个类. 1、首先是工作线程类:TaskThread,此类为一个工作线程,用于完成一个工作任务,提供等待(wait),继续(proceed),绑定任务(bindTask)等方法 #!/usr/bin/env python # -*- coding:utf8 -*-
C语言学习六指针 dcj3sjt126com c
初识指针，简单示例程序： /* 指针就是地址，地址就是指针地址就是内存单元的编号指针变量是存放地址的变量指针和指针变量是两个不同的概念但是要注意：通常我们叙述时会把指针变量简称为指针，实际它们含义并不一样 */ # include <stdio.h> int main(void) { int * p; // p是变量的名字， int *
yii2 beforeSave afterSave beforeDelete dcj3sjt126com delete
public function afterSave($insert, $changedAttributes) { parent::afterSave($insert, $changedAttributes); if($insert) { //这里是新增数据 } else { //这里是更新数据 } }
timertask shuizhaosi888 timertask
java.util.Timer timer = new java.util.Timer(true); // true 说明这个timer以daemon方式运行（优先级低， // 程序结束timer也自动结束），注意，javax.swing // 包中也有一个Timer类，如果import中用到swing包， // 要注意名字的冲突。 TimerTask task = new
Spring Security（13）——session管理 234390216 session Spring Security 攻击保护超时
session管理目录 1.1 检测session超时 1.2 concurrency-control 1.3 session 固定攻击保护
公司项目NODEJS实践0.3[ mongo / session ...] 逐行分析JS源代码 mongodb session nodejs
http://www.upopen.cn 一、前言书接上回，我们搭建了WEB服务端路由、模板等功能，完成了register 通过ajax与后端的通信，今天主要完成数据与mongodb的存取，实现注册 / 登录 /
pojo.vo.po.domain区别 LiaoJuncai java VO POJO javabean domain
　　POJO = "Plain Old Java Object"，是MartinFowler等发明的一个术语，用来表示普通的Java对象，不是JavaBean, EntityBean 或者 SessionBean。POJO不但当任何特殊的角色，也不实现任何特殊的Java框架的接口如，EJB， JDBC等等。　　　　即POJO是一个简单的普通的Java对象，它包含业务逻辑
Windows Error Code OhMyCC windows
0 操作成功完成. 1 功能错误. 2 系统找不到指定的文件. 3 系统找不到指定的路径. 4 系统无法打开文件. 5 拒绝访问. 6 句柄无效. 7 存储控制块被损坏. 8 存储空间不足, 无法处理此命令. 9 存储控制块地址无效. 10 环境错误. 11 试图加载格式错误的程序. 12 访问码无效. 13 数据无效. 14 存储器不足, 无法完成此操作. 15 系
在storm集群环境下发布Topology roadrunners 集群 storm topology spout bolt
storm的topology设计和开发就略过了。本章主要来说说如何在storm的集群环境中，通过storm的管理命令来发布和管理集群中的topology。 1、打包打包插件是使用maven提供的maven-shade-plugin，详细见maven-shade-plugin。 <plugin> <groupId>org.apache.maven.
为什么不允许代码里出现“魔数” tomcat_oracle java
　　在一个新项目中，我最先做的事情之一，就是建立使用诸如Checkstyle和Findbugs之类工具的准则。目的是制定一些代码规范，以及避免通过静态代码分析就能够检测到的bug。　　迟早会有人给出案例说这样太离谱了。其中的一个案例是Checkstyle的魔数检查。它会对任何没有定义常量就使用的数字字面量给出警告，除了-1、0、1和2。　　很多开发者在这个检查方面都有问题，这可以从结果
zoj 3511 Cake Robbery(线段树) 阿尔萨斯线段树
题目链接：zoj 3511 Cake Robbery 题目大意：就是有一个N边形的蛋糕，切M刀，从中挑选一块边数最多的，保证没有两条边重叠。解题思路：有多少个顶点即为有多少条边，所以直接按照切刀切掉点的个数排序，然后用线段树维护剩下的还有哪些点。 #include <cstdio> #include <cstring> #include <vector&