皮糖小王子

自学vue之路——vue生命周期及与后端交互案例

今日内容概要

表单控制
购物车案例
v-model进阶（了解）
vue生命周期
与后端交互
小电影案例

表单控制

1.input：checkbox（单选，多选），radio（单选）
2.代码展示

DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Titletitle>
   <script src="js/vue.js">script>
head>
<body>
<div id="app">
   <h1>表单控制h1>
   <p>用户名：<input type="text" v-model="name">p>
   <p>密码：<input type="text" v-model="password">p>
   <p><input type="checkbox" v-model="isRemember">记住密码p>
   <p>
       <input type="radio" v-model="gender" value="1">男
       <input type="radio" v-model="gender" value="2">女
       <input type="radio" v-model="gender" value="0">未知
   p>
   <p>
       爱好：
       <input type="checkbox" value="篮球" v-model="hobby">篮球
       <input type="checkbox" value="足球" v-model="hobby">足球
       <input type="checkbox" value="乒乓球" v-model="hobby">乒乓球
       <input type="checkbox" value="排球" v-model="hobby">排球
   p>
   {{hobby}}
div>

body>
<script>

   new Vue({
       el:'#app',
       data:{
           name:'',
           password:'',
           isRemember:false,   //checkbox单选，使用布尔类型
           gender:'',    //radio单选，使用字符串
           hobby:[]      //checkbox多选使用数组
       }
   })

script>
html>

购物车案例

1.python中只有基于迭代的循环可没有基于索引的循环
2.js，java，go基于迭代和索引的两种
3.js中for循环

for(i=0;i
for(i in checkGroup) # 基于迭代的循环

for(i of checkGroup) # es6中的循环

数组内置方法.forEach()

jquery $.each循环

代码展示：
   1 方式一：js的基于索引的循环
   for (var i = 0; i< goodList.length; i++) {
       console.log(goodList[i])
   }
   2 方式二：基于迭代的循环
   for (i in goodList){
       console.log(goodList[i])
   }

   3 方式三：of 循环，基于迭代的
     for (i of goodList){
       console.log(i)
   }
   4 方式四：数组的循环方法
   goodList.forEach(item => {
       console.log('---', item)
   })

   5 jquery:引入
   $.each(goodList, (i, v) => {
       console.log(v)
   })

4.基本购物车代码展示

DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Titletitle>
   <script src="./js/vue.js">script>
   <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js">script>
   <link rel="stylesheet" >href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
head>
<body>
<div id="app">
   <div class="container-fluid">
       <h1 class="text-center">购物车h1>
       <div class="row">
           <div class="col-md-6 col-md-offset-3">
               <table class="table table-bordered">
                   <thead>
                   <tr>
                       <th>商品idth>
                       <th>商品名字th>
                       <th>商品价格th>
                       <th>商品数量th>
                   tr>
                   thead>
                   <tbody>
                   <tr v-for="good in goodList">
                       <th>{{good.id}}th>
                       <td>{{good.name}}td>
                       <td>{{good.price}}td>
                       <td>{{good.count}}td>
                       <td><input type="checkbox" v-model="checkGroup" :value="good">td>
                   tr>

                   tbody>
               table>
               <hr>
               选中的商品是：{{checkGroup}}
               <br>
               总价格是：{{getPrice()}}

           div>
       div>

   div>

div>
body>

<script>

   new Vue({
       el: '#app',
       data: {
           goodList: [
               {id: 1, name: '小汽车', price: 1200000, count: 1},
               {id: 2, name: '钢笔', price: 12, count: 34},
               {id: 3, name: '鸡蛋', price: 2, count: 4},
               {id: 4, name: '面包', price: 9, count: 10},
           ],
           checkGroup: []


       },
       methods: {
           getPrice() {
               // 取出checkGroup中得商品数量和商品价格相乘 做累加
               // js 中 for 循环
               var total = 0
               for (item of this.checkGroup) {
                   total += item.price * item.count
               }
               return total
           }
       }
   })


   var goodList = [
       {id: 1, name: '小汽车', price: 1200000, count: 1},
       {id: 2, name: '钢笔', price: 12, count: 34},
       {id: 3, name: '鸡蛋', price: 2, count: 4},
       {id: 4, name: '面包', price: 9, count: 10},
   ]
script>
html>

5.带加减的购物车代码展示

DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Titletitle>
   <script src="./js/vue.js">script>
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
head>
<body>
<div id="app">
   <div class="container-fluid">
       <h1 class="text-center">购物车h1>
       <div class="row">
           <div class="col-md-6 col-md-offset-3">
               <table class="table table-bordered">
                   <thead>
                   <tr>
                       <th>商品idth>
                       <th>商品名字th>
                       <th>商品价格th>
                       <th>商品数量th>
                       <th><input type="checkbox" v-model="checkAll" @change="handleChange">全选/全不选th>
                   tr>
                   thead>
                   <tbody>
                   <tr v-for="good in goodList">
                       <th>{{good.id}}th>
                       <td>{{good.name}}td>
                       <td>{{good.price}}td>
                       <td><span class="btn link btn-sm" @click="handleDown(good)">-span>{{good.count}}<span
                               class="btn link btn-sm" @click="good.count++">+span>
                       td>
                       <td><input type="checkbox" v-model="checkGroup" :value="good" @change="handleCheckOne">td>
                   tr>

                   tbody>
               table>
               <hr>
               选中的商品是：{{checkGroup}}
               <br>
               总价格是：{{getPrice()}}

           div>
       div>

   div>

div>
body>

<script>

   new Vue({
       el: '#app',
       data: {
           goodList: [
               {id: 1, name: '小汽车', price: 1200000, count: 1},
               {id: 2, name: '钢笔', price: 12, count: 34},
               {id: 3, name: '鸡蛋', price: 2, count: 4},
               {id: 4, name: '面包', price: 9, count: 10},
           ],
           checkGroup: [],
           checkAll: false,


       },
       methods: {
           getPrice() {
               var total = 0
               for (item of this.checkGroup) {
                   total += item.price * item.count
               }
               return total
           },
           handleChange() {
               if (this.checkAll) {
                   this.checkGroup = this.goodList
               } else {
                   this.checkGroup = []
               }
           },
           handleCheckOne() {
               // 如果checkGroup的长度等于goodList的长度，说明全选了，checkAll就应该变为true，否则就是false
               // if (this.checkGroup.length == this.goodList.length) {
               //     this.checkAll = true
               // } else {
               //     this.checkAll = false
               // }
               // 变短
               this.checkAll = this.checkGroup.length == this.goodList.length
           },
           handleDown(good) {
               if (good.count > 1) {
                   good.count--
               } else {
                   alert('不能再少了，受不了了')
               }

           }
       }
   })

script>
html>

v-model进阶（了解）

1.v-model 之 lazy、number、trim

lazy：等待input框的数据绑定时区焦点之后在变化；

number：数字开头，只保留数字，后面的字母不保留；字母开头都保留。

trim：取出首位的空格。

2.代码展示

DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Titletitle>
   <script src="./js/vue.js">script>

head>
<body>
<div id="app">
   <h1>v-model进阶h1>
   <input type="text" v-model.lazy ="name1">----->{{name1}}
   <br>
   <input type="text" v-model.number ="name2">----->{{name2}}
   <br>
  <input type="text" v-model.trim ="name3">----->{{name3}}


div>
body>
<script>
   var vm = new Vue({
       el: '#app',
       data: {
           name1: '',
           name2:'',
           name3:'',
       },
   })


script>
html>

vue生命周期

1.var vm=new Vue实例（）
四个过程：

实例创建，数据放到实例中；

挂在模板：el====》div；

改页面，改变量，都会相互影响，update；

销毁实例

2.八个钩子函数
4个过程对应八个函数，依次执行（到某个过程就会执行某个函数）

	beforeCreate	创建Vue实例之前调用，data，el都没有
   created	        创建Vue实例成功后调用（可以在此处发送异步请求后端数据），data有了，el没有的
   beforeMount	    渲染DOM之前调用 ，data有了，el没有
   mounted	        渲染DOM之后调用
   beforeUpdate	重新渲染之前调用（数据更新等操作时，控制DOM重新渲染）
   updated	        重新渲染完成之后调用
   beforeDestroy	销毁之前调用
   destroyed	    销毁之后调用

钩子函数（hook），AOP的体现：面向切面编程----》装饰器实现aop；

3.学习生命周期需要掌握

组件想后端发送请求，获取数据，应该放在created写，此时data已经有数据；

destroyed做一些资源请理性的工作。

4.小案例：
组件创建，开启定时器，不停的打印hello，在destroyed中对定时器进行销毁。
补充之js定时任务和延时任务：

延时任务：

setTimeout(()=>{
	console.log('3s后执行我')
},3000)

定时任务：

setInterval(()=>{
		console.log('hello')
},3000)

什么场景下要用定时任务？
(1)实时跟后端交互，基于http+定时任务（websocket协议：服务端主动推送消息，手机app的消息推送）
(2)秒杀场景，先提交秒杀请求，每隔3s，查询是否秒到；
代码展示

DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Titletitle>
   <script src="./js/vue.js">script>
head>
<body>
<div id="app">
   <h1>vue声明周期h1>
   <button @click="handleShow">点我组件显示和消失button>
   <hr>
   <child v-if="show">child>
   <hr>

div>


body>

<script>
   // 定义一个全局组件
   Vue.component('child', {
       template: `
         
         
         {{ title }}
         
         `,
       data() {
           return {
               title: '好看的首页',
               t:''
           }
       },
       methods: {
           handleClick() {
               // alert('前进')
               this.title = 'lqz'

           }
       },
       beforeCreate() {
           console.log('beforeCreate')
           console.log(this.$data)
           console.log(this.$el)
       },
       created() {
           console.log('created')
           console.log(this.$data)
           console.log(this.$el)
           // 开启定时器，每隔3s，打印hello
           this.t=setInterval(()=>{
               console.log('hello')
           },3000)
       },
       beforeMount() {
           console.log('beforeMount')
           console.log(this.$data)
           console.log(this.$el)
       },
       mounted() {
           console.log('mounted')
           console.log(this.$data)
           console.log(this.$el)
       },
       beforeUpdate() {
           console.log('beforeUpdate')
       },
       updated() {
           console.log('updated')
       },
       beforeDestroy() {
           console.log('当前状态：beforeDestroy')
       },
       destroyed() {
           console.log('当前状态：destroyed')
           // 销毁定时器
           clearInterval(this.t)
           this.t=null

       },
   })

   var vm = new Vue({
       el: '#app',
       data: {
           show: true
       },
       methods: {
           handleShow() {
               this.show = !this.show
           }
       }

   })
script>
html>

与后端交互

1.发展过程

js原生发送ajax请求：new XMLHttpRequest()，浏览器兼容性不好，于是jquery基于它做了封装出了jquery的ajax方法，XMLHttpRequest中存在很多bug；

jquery的ajax，vue中用的很少；

js原生提供的fetch，现在官方主推这个，缺点是不执行ie浏览器；

axios：vue中常用的，它是封装了XMLHttpRequest

2.代码展示
前端页面：

DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Titletitle>
   <script src="./js/vue.js">script>
   <script src="https://unpkg.com/axios/dist/axios.min.js">script>
   <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js">script>
head>
<body>
<div id="app">

   <h1>jquery的ajax与后端交互h1>
   
   
   
   
   

   <h1>js原生的fetch与后端交互h1>
   
   
   
   
   

   <h1>axios与后端交互h1>
   <button @click="handleLoad3">点击加载数据button>
   <br>
   <p>名字是：{{name}}p>
   <p>年龄是：{{age}}p>
   <hr>
div>


body>

<script>

   var vm = new Vue({
       el: '#app',
       data: {
           name: '',
           age: 0
       },
       methods: {
           handleLoad1() {
               $.ajax({
                   url: "http://127.0.0.1:5000/",
                   type: 'get',
                   success: data => {
                       console.log(typeof data)
                       data = JSON.parse(data) // data 是字符串类型，需要转成对象类型
                      console.log(typeof data)
                       this.name = data.name
                       this.age = data.age

                   }
               })
           },
           handleLoad2() { // 用的很少
               fetch('http://127.0.0.1:5000/').then(res => res.json()).then(res => {
                   console.log(res)
                   console.log(typeof res)
                   this.name = res.name
                   this.age = res.age
               })

           },

           handleLoad3() { // 用的很少
               axios.get('http://127.0.0.1:5000/').then(res => {
                   console.log(res.data)  // 后端真正的数据在res.data中
                   this.name = res.data.name
                   this.age = res.data.age
               })

           },
       }


   })
script>
html>

后端Flask框架：

from flask import Flask, jsonify

app = Flask(__name__)


@app.route('/')
def index():
   res = jsonify({'name': 'lqz', 'age': 19})
   # 处理了跨域（）  在响应头中加入 django写后端 {'Access-Control-Allow-Origin': '*'}
   res.headers = {'Access-Control-Allow-Origin': '*'}
   return res
   
if __name__ == '__main__':
   app.run()

小电影案例

前端页面展示：

DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Titletitle>
   <script src="./js/vue.js">script>
   <script src="https://unpkg.com/axios/dist/axios.min.js">script>
head>
<body>
<div id="app">

   <h1>电影小案例h1>
   <ul>
       <li v-for="film in filmList">
           <h2>电影名：{{film.name}}h2>
           <img :src="film.poster" alt="" height="400px" width="300px">
       li>
   ul>

div>


body>

<script>

   var vm = new Vue({
       el: '#app',
       data: {
           filmList: []
       },
       created() {
           axios.get('http://127.0.0.1:5000/films').then(res => {
               this.filmList = res.data.data.films
           })
       }


   })
script>
html>

后盾Flask框架：

from flask import Flask, jsonify

app = Flask(__name__)

@app.route('/films')
def films():
   with open('./film.json', 'r', encoding='utf-8') as f:
       data = json.load(f)
   res = jsonify(data)
   res.headers = {'Access-Control-Allow-Origin': '*'}
   return res


if __name__ == '__main__':
   app.run()

element实现动态路由+面包屑软件技术NINI vue案例 vue.js 前端
el-breadcrumb是ElementUI组件库中的一个面包屑导航组件，它用于显示当前页面的路径，帮助用户快速理解和导航到应用的各个部分。在Vue.js项目中，如果你已经安装了ElementUI，就可以很方便地使用el-breadcrumb组件。以下是一个基本的使用示例：安装ElementUI（如果你还没有安装的话）:你可以通过npm或yarn来安装ElementUI。bash复制代码npmi
Long类型前后端数据不一致 igotyback 前端
响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计网页设计期末网页作业 html静态网页 html5期末大作业网页设计 web大作业
️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
【加密社】Solidity 中的事件机制及其应用加密社闲侃区块链智能合约区块链
加密社引言在Solidity合约开发过程中，事件（Events）是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更，还能够让外部系统（如前端应用）监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时，该事件会被记录在区块链的交易收据中。具体而言，事件
关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业 javascript html css 旅游风景
⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动二挡起步 web前端期末大作业 web设计网页规划与设计 html css javascript dreamweaver 前端
Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
node.js学习小猿L node.js node.js 学习 vim
node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
vue3中el-table中点击图片放大时，被表格覆盖叫我小鹏呀 vue.js javascript 前端
问题：vue3中el-table中点击图片放大时，被表格覆盖。解决方法：el-image添加preview-teleported
vue项目element-ui的table表格单元格合并酋长哈哈 vue.js elementui javascript 前端
一、合并效果二全部代码exportdefault{name:'CellMerge',data(){return{tableData:[{id:'1',name:'王小虎',amount1:'165',amount2:'3.2',amount3:10},{id:'1',name:'王小虎',amount1:'162',amount2:'4.43',amount3:12},{id:'1',name:'
Vue中table合并单元格用法 weixin_30613343 javascript ViewUI
地名结果人名性别{{item.name}}已完成未完成{{item.groups[0].name}}{{item.groups[0].sex}}{{item.groups[son].name}}{{item.groups[son].sex}}exportdefault{data(){return{list:[{name:'地名1',result:'1',groups:[{name:'张三',sex
springboot+vue项目实战一-创建SpringBoot简单项目苹果酱0567 面试题汇总与解析 spring boot 后端 java 中间件开发语言
这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一
JavaScript 中，深拷贝（Deep Copy）和浅拷贝（Shallow Copy）跳房子的前端前端面试 javascript 开发语言 ecmascript
在JavaScript中，深拷贝（DeepCopy）和浅拷贝（ShallowCopy）是用于复制对象或数组的两种不同方法。了解它们的区别和应用场景对于避免潜在的bugs和高效地处理数据非常重要。以下是对深拷贝和浅拷贝的详细解释，包括它们的概念、用途、优缺点以及实现方式。1.浅拷贝（ShallowCopy）概念定义：浅拷贝是指创建一个新的对象或数组，其中包含了原对象或数组的基本数据类型的值和对引用数
Vue( ElementUI入门、vue-cli安装) m0_l5z elementui vue.js
一.ElementUI入门目录：1.ElementUI入门1.1ElementUI简介1.2Vue+ElementUI安装1.3开发示例2.搭建nodejs环境2.1nodejs介绍2.2npm是什么2.3nodejs环境搭建2.3.1下载2.3.2解压2.3.3配置环境变量2.3.4配置npm全局模块路径和cache默认安装位置2.3.5修改npm镜像提高下载速度2.3.6验证安装结果3.运行n
博客网站制作教程 2401_85194651 java maven
首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java
vue+el-table 可输入表格使用上下键进行input框切换以对_ vue学习记录 vue.js javascript 前端
使用上下键进行完工数量这一列的切换-->//键盘触发事件show(ev,index){letnewIndex;letinputAll=document.querySelectorAll('.table_inputinput');//向上=38if(ev.keyCode==38){if(index==0){//如果是第一行,回到最后一个newIndex=inputAll.length-1}elsei
vue + Element UI table动态合并单元格我家媳妇儿萌哒哒 element UI vue.js 前端 javascript
一、功能需求1、根据名称相同的合并工作阶段和主要任务合并这两列，但主要任务内容一样，但要考虑主要任务一样，但工作阶段不一样的情况。（枞向合并）2、落实情况里的定量内容和定性内容值一样则合并。（横向合并）二、功能实现exportdefault{data(){return{tableData:[{name:'a',address:'1',age:'1',six:'2'},{name:'a',addre
vue 创建项目报错：command failed: npm install --loglevel error 那鱼、会飞 vue.js vue-cli3
这个问题其实很好解决，只是很多种情况，逐一排除即可。稳下心来~vuecli3创建项目我的node版本是node14.15.0，（永远不要尝试最新版本）node各种版本下载地址：以往的版本|Node.js(nodejs.org)vue/[email protected]@vue/[email protected]（注意vue/cli2和vue/cli3的下载命名有所改变，2是-形式，3是/形式）其实报错
JavaScript `Map` 和 `WeakMap`详细解释跳房子的前端 JavaScript 原生方法 javascript 前端开发语言
在JavaScript中，Map和WeakMap都是用于存储键值对的数据结构，但它们有一些关键的不同之处。MapMap是一种可以存储任意类型的键值对的集合。它保持了键值对的插入顺序，并且可以通过键快速查找对应的值。Map提供了一些非常有用的方法和属性来操作这些数据对：set(key,value):将一个键值对添加到Map中。如果键已经存在，则更新其对应的值。get(key):获取指定键的值。如果键
计算机毕业设计PHP仓储综合管理系统（源码+程序+VUE+lw+部署） java毕设程序源码王哥 php 课程设计 vue.js
该项目含有源码、文档、程序、数据库、配套开发软件、软件安装教程。欢迎交流项目运行环境配置：phpStudy+Vscode+Mysql5.7+HBuilderX+Navicat11+Vue+Express。项目技术：原生PHP++Vue等等组成，B/S模式+Vscode管理+前后端分离等等。环境需要1.运行环境：最好是小皮phpstudy最新版，我们在这个版本上开发的。其他版本理论上也可以。2.开发
最简单将静态网页挂载到服务器上(不用nginx) 全能全知者服务器 nginx 运维前端 html 笔记
最简单将静态网页挂载到服务器上(不用nginx)如果随便弄个静态网页挂在服务器都要用nignx就太麻烦了，所以直接使用Apache来搭建一些简单前端静态网页会相对方便很多检查Web服务器服务状态：sudosystemctlstatushttpd#ApacheWeb服务器如果发现没有安装web服务器：安装Apache：sudoyuminstallhttpd启动Apache：sudosystemctl
补充元象二面 Redstone Monstrosity 前端面试
1.请尽可能详细地说明，防抖和节流的区别，应用场景？你的回答中不要写出示例代码。防抖（Debounce）和节流（Throttle）是两种常用的前端性能优化技术，它们的主要区别在于如何处理高频事件的触发。以下是防抖和节流的区别和应用场景的详细说明：防抖和节流的定义防抖：在一段时间内，多次执行变为只执行最后一次。防抖的原理是，当事件被触发后，设置一个延迟定时器。如果在这个延迟时间内事件再次被触发，则重
微信小程序开发注意事项 jun778895 微信小程序小程序
微信小程序开发是一个融合了前端开发、用户体验设计、后端服务（可选）以及微信小程序平台特性的综合性项目。这里，我将详细介绍一个典型的小程序开发项目的全过程，包括项目规划、设计、开发、测试及部署上线等各个环节，并尽量使内容达到或超过2000字的要求。一、项目规划1.1项目背景与目标假设我们要开发一个名为“智慧校园助手”的微信小程序，旨在为学生提供一站式校园生活服务，包括课程表查询、图书馆座位预约、食堂
切换淘宝最新npm镜像源是 hai40587 npm 前端 node.js
切换淘宝最新npm镜像源是一个相对简单的过程，但首先需要明确当前淘宝npm镜像源的状态和最新的镜像地址。由于网络环境和服务更新，镜像源的具体地址可能会发生变化，因此，我将基于当前可获取的信息，提供一个通用的切换步骤，并附上最新的镜像地址（截至回答时）。一、了解npm镜像源npm（NodePackageManager）是JavaScript的包管理器，用于安装、更新和管理项目依赖。由于npm官方仓库
字节二面 Redstone Monstrosity 前端面试
1.假设你是正在面试前端开发工程师的候选人，面试官让你详细说出你上一段实习过程的收获和感悟。在上一段实习过程中，我获得了宝贵的实践经验和深刻的行业洞察，以下是我的主要收获和感悟：一、专业技能提升框架应用熟练度：通过实际项目，我深入掌握了React、Vue等前端框架的使用，不仅提升了编码效率，还学会了如何根据项目需求选择合适的框架。问题解决能力：在实习期间，我遇到了许多预料之外的技术难题。通过查阅文
vue render 函数详解 (配参数详解) 你的眼睛會笑 vue2 vue.js javascript 前端
vuerender函数详解(配参数详解)在Vue3中，`render`函数被用来代替Vue2中的模板语法。它接收一个h函数（或者是`createElement`函数的别名），并且返回一个虚拟DOM。render函数的语法结构如下：render(h){returnh('div',{class:'container'},'Hello,World!')}在上面的示例中，我们使用h函数创建了一个div元素
前端代码上传文件余生逆风飞翔前端 javascript 开发语言
点击上传文件import{ElNotification}from'element-plus'import{API_CONFIG}from'../config/index.js'import{UploadFilled}from'@element-plus/icons-vue'import{reactive}from'vue'import{BASE_URL}from'../config/index'i
VUE3 + xterm + nestjs实现web远程终端或连接开启SSH登录的路由器和交换机。焚木灵 node.js vue
可远程连接系统终端或开启SSH登录的路由器和交换机。相关资料：xtermjs/xterm.js:Aterminalfortheweb(github.com)后端实现(NestJS)：1、安装依赖：npminstallnode-ssh@nestjs/websockets@nestjs/platform-socket.io2、我们将创建一个名为RemoteControlModule的NestJS模块，
详解“c:/work/src/components/a/b.vue“‘ has no default export报错原因 hw_happy 开发语言前端 vue.js javascript
前情提要在一个vue文件中需要引入定义的b.vue文件，但是提示b文件没有默认导出，对于vue2文件来说有exportdefault，在中，所有定义的变量、函数和组件都会自动被视为默认导出的组件内容。因此，不需要显式地使用exportdefault来导出组件。但是在我引用这个文件的时候还是提示了这个错误，原来是我的项目使用了ts和vite\webpack，因为TypeScript和Vue的默认导出
uniapp实现动态标记效果详细步骤【前端开发】 2401_85123349 uni-app
第二个点在于实现将已经被用户标记的内容在下一次获取后刷新它的状态为已标记。这是什么意思呢？比如说上面gif图中的这些人物对象，有一些已被该用户添加为关心，那么当用户下一次进入该页面时，这些已经被添加关心的对象需要以“红心”状态显现出来。这个点的难度还不算大，只需要在每一次获取后端的内容后对标记对象进行状态更新即可。II.动态标记效果实现思路和步骤首先，整体的思路是利用动态类名对不同的元素进行选择。
高性能javascript--算法和流程控制海淀萌狗
-for,while和do-while性能相当-避免使用for-in循环，==除非遍历一个属性量未知的对象==es5:for-in遍历的对象便不局限于数组，还可以遍历对象。原因：for-in每次迭代操作会同时搜索实例或者原型属性，for-in循环的每次迭代都会产生更多开销，因此要比其他循环类型慢，一般速度为其他类型循环的1/7。因此，除非明确需要迭代一个属性数量未知的对象，否则应避免使用for-i
面向对象面向过程 3213213333332132 java
面向对象：把要完成的一件事，通过对象间的协作实现。面向过程：把要完成的一件事，通过循序依次调用各个模块实现。我把大象装进冰箱这件事为例，用面向对象和面向过程实现，都是用java代码完成。 1、面向对象 package bigDemo.ObjectOriented; /** * 大象类 * * @Description * @author FuJian
Java Hotspot: Remove the Permanent Generation bookjovi HotSpot
openjdk上关于hotspot将移除永久带的描述非常详细，http://openjdk.java.net/jeps/122 JEP 122: Remove the Permanent Generation Author Jon Masamitsu Organization Oracle Created 2010/8/15 Updated 2011/
正则表达式向前查找向后查找,环绕或零宽断言 dcj3sjt126com 正则表达式
向前查找和向后查找 1. 向前查找：根据要匹配的字符序列后面存在一个特定的字符序列(肯定式向前查找)或不存在一个特定的序列(否定式向前查找)来决定是否匹配。.NET将向前查找称之为零宽度向前查找断言。对于向前查找，出现在指定项之后的字符序列不会被正则表达式引擎返回。 2. 向后查找：一个要匹配的字符序列前面有或者没有指定的
BaseDao 171815164 seda
import java.sql.Connection; import java.sql.DriverManager; import java.sql.SQLException; import java.sql.PreparedStatement; import java.sql.ResultSet; public class BaseDao { public Conn
Ant标签详解--Java命令 g21121 Java命令
这一篇主要介绍与java相关标签的使用终于开始重头戏了，Java部分是我们关注的重点也是项目中用处最多的部分。 1
[简单]代码片段_电梯数字排列 53873039oycg 代码
今天看电梯数字排列是9 18 26这样呈倒N排列的,写了个类似的打印例子，如下: import java.util.Arrays; public class 电梯数字排列_S3_Test { public static void main(S
Hessian原理云端月影 hessian原理
Hessian 原理分析一．远程通讯协议的基本原理网络通信需要做的就是将流从一台计算机传输到另外一台计算机，基于传输协议和网络 IO 来实现，其中传输协议比较出名的有 http 、 tcp 、 udp 等等， http 、 tcp 、 udp 都是在基于 Socket 概念上为某类应用场景而扩展出的传输协
区分Activity的四种加载模式----以及Intent的setFlags aijuans android
在多Activity开发中，有可能是自己应用之间的Activity跳转，或者夹带其他应用的可复用Activity。可能会希望跳转到原来某个Activity实例，而不是产生大量重复的Activity。这需要为Activity配置特定的加载模式，而不是使用默认的加载模式。加载模式分类及在哪里配置 Activity有四种加载模式： standard singleTop
hibernate几个核心API及其查询分析 antonyup_2006 html .net Hibernate xml 配置管理
(一) org.hibernate.cfg.Configuration类读取配置文件并创建唯一的SessionFactory对象.(一般,程序初始化hibernate时创建.) Configuration co
PL/SQL的流程控制百合不是茶 oracle PL/SQL编程循环控制
PL/SQL也是一门高级语言,所以流程控制是必须要有的,oracle数据库的pl/sql比sqlserver数据库要难,很多pl/sql中有的sqlserver里面没有流程控制; 分支语句 if 条件 then 结果 else 结果 end if ; 条件语句 case when 条件 then 结果; 循环语句 loop
强大的Mockito测试框架 bijian1013 mockito 单元测试
一.自动生成Mock类在需要Mock的属性上标记@Mock注解，然后@RunWith中配置Mockito的TestRunner或者在setUp()方法中显示调用MockitoAnnotations.initMocks(this);生成Mock类即可。二.自动注入Mock类到被测试类 &nbs
精通Oracle10编程SQL(11)开发子程序 bijian1013 oracle 数据库 plsql
/* *开发子程序 */ --子程序目是指被命名的PL/SQL块，这种块可以带有参数，可以在不同应用程序中多次调用 --PL/SQL有两种类型的子程序：过程和函数 --开发过程 --建立过程：不带任何参数 CREATE OR REPLACE PROCEDURE out_time IS BEGIN DBMS_OUTPUT.put_line(systimestamp); E
【EhCache一】EhCache版Hello World bit1129 Hello world
本篇是EhCache系列的第一篇，总体介绍使用EhCache缓存进行CRUD的API的基本使用，更细节的内容包括EhCache源代码和设计、实现原理在接下来的文章中进行介绍环境准备 1.新建Maven项目 2.添加EhCache的Maven依赖 <dependency> <groupId>ne
学习EJB3基础知识笔记白糖_ bean Hibernate jboss webservice ejb
最近项目进入系统测试阶段，全赖袁大虾领导有力，保持一周零bug记录，这也让自己腾出不少时间补充知识。花了两天时间把“传智播客EJB3.0”看完了，EJB基本的知识也有些了解，在这记录下EJB的部分知识，以供自己以后复习使用。 EJB是sun的服务器端组件模型，最大的用处是部署分布式应用程序。EJB (Enterprise JavaBean)是J2EE的一部分，定义了一个用于开发基
angular.bootstrap boyitech AngularJS AngularJS API angular中文api
angular.bootstrap 描述：手动初始化angular。这个函数会自动检测创建的module有没有被加载多次，如果有则会在浏览器的控制台打出警告日志，并且不会再次加载。这样可以避免在程序运行过程中许多奇怪的问题发生。使用方法： angular .
java-谷歌面试题-给定一个固定长度的数组，将递增整数序列写入这个数组。当写到数组尾部时，返回数组开始重新写，并覆盖先前写过的数 bylijinnan java
public class SearchInShiftedArray { /** * 题目：给定一个固定长度的数组，将递增整数序列写入这个数组。当写到数组尾部时，返回数组开始重新写，并覆盖先前写过的数。 * 请在这个特殊数组中找出给定的整数。 * 解答： * 其实就是“旋转数组”。旋转数组的最小元素见http://bylijinnan.iteye.com/bl
天使还是魔鬼？都是我们制造 ducklsl 生活教育情感
----------------------------剧透请原谅，有兴趣的朋友可以自己看看电影，互相讨论哦！！！从厦门回来的动车上，无意中瞟到了书中推荐的几部关于儿童的电影。当然，这几部电影可能会另大家失望，并不是类似小鬼当家的电影，而是关于“坏小孩”的电影！自己挑了两部先看了看，但是发现看完之后，心里久久不能平
[机器智能与生物]研究生物智能的问题 comsci 生物
我想,人的神经网络和苍蝇的神经网络,并没有本质的区别...就是大规模拓扑系统和中小规模拓扑分析的区别.... 但是,如果去研究活体人类的神经网络和脑系统,可能会受到一些法律和道德方面的限制,而且研究结果也不一定可靠,那么希望从事生物神经网络研究的朋友,不如把
获取Android Device的信息 dai_lm android
String phoneInfo = "PRODUCT: " + android.os.Build.PRODUCT; phoneInfo += ", CPU_ABI: " + android.os.Build.CPU_ABI; phoneInfo += ", TAGS: " + android.os.Build.TAGS; ph
最佳字符串匹配算法（Damerau-Levenshtein距离算法）的Java实现 datamachine java 算法字符串匹配
原文：http://www.javacodegeeks.com/2013/11/java-implementation-of-optimal-string-alignment.html------------------------------------------------------------------------------------------------------------
小学5年级英语单词背诵第一课 dcj3sjt126com english word
long 长的 show 给...看，出示 mouth 口，嘴 write 写 use 用，使用 take 拿，带来 hand 手 clever 聪明的 often 经常 wash 洗 slow 慢的 house 房子 water 水 clean 清洁的 supper 晚餐 out 在外 face 脸，
macvim的使用实战 dcj3sjt126com mac vim
macvim用的是mac里面的vim, 只不过是一个GUI的APP, 相当于一个壳 1. 下载macvim https://code.google.com/p/macvim/ 2. 了解macvim :h vim的使用帮助信息 :h macvim
java二分法查找蕃薯耀 java二分法查找二分法 java二分法
java二分法查找 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 蕃薯耀 2015年6月23日 11:40:03 星期二 http:/
Spring Cache注解+Memcached hanqunfeng spring memcached
Spring3.1 Cache注解依赖jar包：  <dependency> <groupId>com.google.code.simple-spring-memcached</groupId> <artifactId>simple-s
apache commons io包快速入门 jackyrong apache commons
原文参考 http://www.javacodegeeks.com/2014/10/apache-commons-io-tutorial.html Apache Commons IO 包绝对是好东西，地址在http://commons.apache.org/proper/commons-io/，下面用例子分别介绍： 1）工具类 2
如何学习编程 lampcy java 编程 C++c
首先,我想说一下学习思想.学编程其实跟网络游戏有着类似的效果.开始的时候,你会对那些代码,函数等产生很大的兴趣,尤其是刚接触编程的人,刚学习第一种语言的人.可是,当你一步步深入的时候,你会发现你没有了以前那种斗志.就好象你在玩韩国泡菜网游似的,玩到一定程度,每天就是练级练级,完全是一个想冲到高级别的意志力在支持着你.而学编程就更难了,学了两个月后,总是觉得你好象全都学会了,却又什么都做不了,又没有
架构师之spring-----spring3.0新特性的bean加载控制@DependsOn和@Lazy nannan408 Spring3
1.前言。如题。 2.描述。 @DependsOn用于强制初始化其他Bean。可以修饰Bean类或方法，使用该Annotation时可以指定一个字符串数组作为参数，每个数组元素对应于一个强制初始化的Bean。 @DependsOn({"steelAxe","abc"}) @Comp
Spring4+quartz2的配置和代码方式调度 Everyday都不同代码配置 spring4 quartz2.x 定时任务
前言：这些天简直被quartz虐哭。。因为quartz 2.x版本相比quartz1.x版本的API改动太多，所以，只好自己去查阅底层API…… quartz定时任务必须搞清楚几个概念： JobDetail——处理类 Trigger——触发器，指定触发时间，必须要有JobDetail属性，即触发对象 Scheduler——调度器，组织处理类和触发器，配置方式一般只需指定触发
Hibernate入门 tntxia Hibernate
前言使用面向对象的语言和关系型的数据库，开发起来很繁琐，费时。由于现在流行的数据库都不面向对象。Hibernate 是一个Java的ORM（Object/Relational Mapping）解决方案。 Hibernte不仅关心把Java对象对应到数据库的表中，而且提供了请求和检索的方法。简化了手工进行JDBC操作的流程。如
Math类 xiaoxing598 Math
一、Java中的数字（Math）类是final类，不可继承。 1、常数 PI：double圆周率 E：double自然对数 2、截取（注意方法的返回类型） double ceil(double d) 返回不小于d的最小整数 double floor(double d) 返回不大于d的整最大数 int round(float f) 返回四舍五入后的整数 long round