Forever Nore
Forever Nore

Vue组件、组件通信、路由、axios、$event、$refs、跨域代理、element-ui

文章目录

  • { { } }插值表达式
  • $event
  • v-for
  • 删除、新增
  • axios方法优化
  • 启动 Vue项目
  • Vue项目的运行流程
  • 组件的三个结构
  • 组件的使用
  • 组件之间的通信
    • 父子 组件通信
    • 兄弟组件通信
  • 操作DOM
  • 插槽 slot
  • 移除node_modules
  • 路由
    • 安装、入门
    • 嵌套路由
    • 获取路由参数
  • 跨域代理
  • element-ui
    • 表单验证
    • Message 消息提示
    • 提示组件MessageBox弹框

{ { } }插值表达式

{ { } } 插值 表达式 只能作用在内容节点，适合 拼接内容，不能作用在 属性节点
v-bind 只能 作用在属性节点

<div id="app">
    <input type="button" v-bind:placeholder="tips">
div>


<div  placeholder="{{tips}}">div> 


<div>{{tips}}div>

‘box’ 是 字符串box，index 是变量名，两者 进行字符串拼接

<div :title="'box'+index"> This a div div>

{ { } } 还可以 进行 运算以及函数、三元运算~

{{number+1}}
{{number++}}
{{show=!show}}
{{ok?'ok':'no'}}
{{message.split('').reverse().join('')}}

$event


<button @click="add(1,$event)">+Nbutton>

methods: {
   add(n, e) {
       console.log(n, e.target)
   }
}

e.target 就是 触发事件的DOM对象
在这里插入图片描述

methods: {
    add(n, e) {
        e.target.innerHTML='今天天气很好'
    }
}

点击之后：
在这里插入图片描述


<input @keyup.enter="submit">

<input @keyup.esc="clearInput">

注意：在标签中 使用this代表的是 window浏览器实例~~

<input @keyup.enter="submit(this)">

v-for





<tr v-for="(item,index) in list" :key="item.id">
    <td>{{index}}td>
    <td>{{item.id}}td>
    <td>{{item.name}}td>
tr>

删除、新增

tr 使用 必须要加

标签！！！

<div id="app">
    <table>
        <tr v-for="item in list" :key="item.id">
            <td>{{item.id}}td>
            <td>{{item.name}}td>
            <td>{{item.status}}td>
            <td>{{item.time}}td>
            <td><a href="javascript:;" @click="remove(item.id)">删除a>td>
        <tr/>
    table>


div>
<script type="application/javascript">
    var app = new Vue({
        el: '#app',
        data() {
            return {
                // 品牌的列表数据
                list: [
                    {id: 1, name: '宝马', status: true, time: new Date()},
                    {id: 2, name: '奔驰', status: true, time: new Date()},
                    {id: 3, name: '奥迪', status: true, time: new Date()}
                ]
            }
        },
        methods: {
            remove(id) {
                this.list = this.list.filter(item => item.id != id)
            }
        }
    })
script>

新增

add() {
   this.list.push({id: 4, name: '奥迪', status: true, time: new Date()})
}

axios方法优化

<div id="app">
    <table>
        <tr v-for="item in books" :key="item.id">
            <td>{{item.id}}td>
            <td>{{item.bookname}}td>
            <td>{{item.author}}td>
            <td>{{item.publisher}}td>
        <tr/>
    table>
    <input type="button" @click="getBooks" value="获取数据">


div>
<script type="application/javascript">
    var app = new Vue({
        el: '#app',
        data() {
            return {
                // 书籍
                books: []
            }
        },
        methods: {
            async getBooks() {
                let {data: res} = await axios.get('http://www.liulongbin.top:3006/api/getbooks')
                this.books = res.data
            }
        }
    })
script>

在这里插入图片描述

启动 Vue项目

npm install -g @vue/cli

链接：https://pan.baidu.com/s/10zhofYzlIY9buSxqiVRILQ
提取码：yyds
下载 demo 文件夹
在这里插入图片描述
进入 文件夹
Vue组件、组件通信、路由、axios、$event、$refs、跨域代理、element-ui_第1张图片

npm cache clear --force    # npm 缓存清除--强制
cnpm install 			   # 安装 依赖
#  如果 没有 cnpm，先安装 cnpm 
#  npm install -g cnpm --registry=https://registry.npm.taobao.org

安装 完成 多了node_modules 文件夹
在这里插入图片描述

npm run dev # 启动项目

Vue组件、组件通信、路由、axios、$event、$refs、跨域代理、element-ui_第2张图片

Vue组件、组件通信、路由、axios、$event、$refs、跨域代理、element-ui_第3张图片

Vue项目的运行流程

Vue组件、组件通信、路由、axios、$event、$refs、跨域代理、element-ui_第4张图片

相当于 使用 App.vue 组件 替换这个


Vue组件、组件通信、路由、axios、$event、$refs、跨域代理、element-ui_第5张图片
Vue组件、组件通信、路由、axios、$event、$refs、跨域代理、element-ui_第6张图片
Vue组件、组件通信、路由、axios、$event、$refs、跨域代理、element-ui_第7张图片

组件的三个结构

Vue组件、组件通信、路由、axios、$event、$refs、跨域代理、element-ui_第8张图片

<template>
  
  
  <div class="test-container">
    {{ username }}
  div>
template>

<script>
//  默认导出，这是 固定写法！！！
export default {
  // data 数据源
  // 组件中的数据源 必须是 data(){} 函数
  data() {
    return {
      username: 'xiaoidng'
    }
  },
  methods: {
    changeName() {
      // this 是组件的实例
      this.username = 'xiaohong'
    }

  }
}
script>

<style lang="less" scoped>

style>

Vue组件、组件通信、路由、axios、$event、$refs、跨域代理、element-ui_第9张图片

组件的使用

<script>
// 1.导入组件，在 默认导出外 进行！！
import app from '@/App.vue'

export default {
// 2.注册组件
  components: {
    app
  }
}
script>

以标签的形式使用组件，必须 在哪注册就 在哪使用！！！

<app>app>

在 main.js 全局注册

// 导入需要被 全局注册的组件
import app from  '@/App.vue'
// 注册后，在任意组件都可以使用！！！
Vue.component('MyApp',app)

props 是 只读的

<template>
  <div class="App-container">
    {{ init }}
  div>
template>

<script>

export default {
  props: ['init']
}
script>

注册 并且使用组件

<template>
  <div>
    
    <app :init="count">app>
  div>
template>

<script>
import app from '@/App.vue'

export default {
  data() {
    return {
      count: 10
    }
  },
  components: {
    app
  }
}
script>

组件之间的通信

父子 组件通信

子组件

<template>
  <div class="App-container">
    <span>子组件的值:{{ count }}span>
    <button type="button" @click="numChange">点我变化button>
  div>
template>
<script>

export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    numChange() {
      this.count = 10
      // 通知 父组件发生变化，带上 发生变化的值
      this.$emit('numChange', this.count)
    }
  }
}
script>

父组件

此时 $event，也是 子组件传过来的值

<template>
  <div>
    <span>父组件的值:{{ count }}span>
    
    <app @numChange="numChange">app>
  div>
template>

<script>

import app from '@/App.vue'

export default {

  data() {
    return {
      count: 0
    }
  },
  components: {
    app
  },
  methods: {
    // 参数值是从 子组件传过来的
    numChange(val) {
      this.count = val
    }
  }
}
script>

兄弟组件通信

Vue组件、组件通信、路由、axios、$event、$refs、跨域代理、element-ui_第10张图片

操作DOM

<template>
  <div>
    <h1 ref="myref">今天天气很好 h1>
    <button @click="change">点我改变button>
  div>
template>
<script>

export default {
  data() {
    return {}
  },
  methods: {
    change() {
      // this.$refs.myref 代表 myref 这个DOM对象
      this.$refs.myref.style.color = 'red'
    }
  }
}
script>

Vue组件、组件通信、路由、axios、$event、$refs、跨域代理、element-ui_第11张图片

插槽 slot

作用 范围：
在这里插入图片描述

<template>
  <div class="App-container">
    <span>子组件span>
    
    <slot name="page">slot>
  div>
template>

<script>

export default {
  data() {
    return {}
  }
}
script>

调用方

<template>
  <div>
    <app>
      
      
      <template #page>
        <p>今天天气很好哦！p>
      template>
    app>
  div>
template>

<script>

import app from '@/App.vue'

export default {

  data() {
    return {
      count: 0
    }
  },
  components: {
    app
  },
  methods: {}
}
script>

Vue组件、组件通信、路由、axios、$event、$refs、跨域代理、element-ui_第12张图片

移除node_modules

cnpm i -g rimraf
# 进行 移除
rimraf node_modules

路由

安装、入门

在 src目录下 新建 router文件夹，在 router文件夹下 新建 index.js 文件

// 1. 导入Vue 和VueRouter的包
import Vue from "vue";
import VueRouter from "vue-router"
// 2. 调用Vue.use()函数，把VueRouter 安装为 Vue的插件
Vue.use(VueRouter)
// 3. 创建 路由的实例对象
const vueRouter = new VueRouter()

// 4. 向外共享路由的 实例对象
export default vueRouter

<template>
  <div class="App-container">
    <h1>今天天气很好！h1>
    
    <router-link to="/movie">电影router-link>
    <br>
    <router-link to="/about">关于router-link>

    <router-view>router-view>
  div>
template>

Vue组件、组件通信、路由、axios、$event、$refs、跨域代理、element-ui_第13张图片

import movie from "@/components/movie";
import about from "@/components/about";

const vueRouter = new VueRouter({
    // routes是一个数组，定义 `hash地址` 与 组件之间的关系
    routes: [
        // 当用户访问 /时，通过redirect 跳转到 /about对应的规则
        {path: '/', redirect: '/about'},
        {path: '/about', component: about},
        {path: '/movie', component: movie},
    ]
})

嵌套路由

Vue组件、组件通信、路由、axios、$event、$refs、跨域代理、element-ui_第14张图片

<template>
  <div>
    <h1>钢铁侠h1>
    <router-link to="/movie/say">点我router-link>
    <router-view>router-view>
  div>
template>

路由 规则：

import movie from "@/components/movie";
import about from "@/components/about";
import tab from "@/components/tab";

const vueRouter = new VueRouter({
    // routes是一个数组，定义 `hash地址` 与 组件之间的关系
    routes: [
        // 当用户访问 /时，通过redirect 跳转到 /about对应的规则
        {path: '/', redirect: '/about'},
        {path: '/about', component: about},
        {
            path: '/movie',
            component: movie,
            children: [
                // 子路由规则，不加 / 线
                {path: 'say', component: tab}
            ]
        },
    ]
})

获取路由参数

在组件中 获取 路由参数的值

// 根据id 的值，获取对应电影的信息
{path: '/movie/:mid', component: movie, props: true}

开启 props传参

在 movie 组件 添加一个 mid属性

<script>
export default {
  props: ['mid']
}
script>

在 movie 组件 获取参数值

{{ this.$route.params.mid }}

在这里插入图片描述
Vue组件、组件通信、路由、axios、$event、$refs、跨域代理、element-ui_第15张图片

跨域代理

线上 需要 开启 API接口服务器的 CORS 跨域允许
Vue组件、组件通信、路由、axios、$event、$refs、跨域代理、element-ui_第16张图片

element-ui

访问地址：点击

// 导入Vue 构造
import Vue from 'vue'
// 按需导入 element-ui组件
import {Button, Input} from 'element-ui'

// 注册需要的组件
Vue.use(Button)
Vue.use(Input)


 "plugins": [
        [
            "component",
            {
                "libraryName": "element-ui",
                "styleLibraryName": "theme-chalk"
            }
        ]
    ]

Vue组件、组件通信、路由、axios、$event、$refs、跨域代理、element-ui_第17张图片

Vue组件、组件通信、路由、axios、$event、$refs、跨域代理、element-ui_第18张图片

scope.row 代表这一行的数据

<el-table :data="tableData" style="width: 100%">
  <el-table-column prop="date" label="日期" width="180">el-table-column>
  <el-table-column prop="name" label="姓名" width="180">el-table-column>
  <el-table-column prop="address" abel="地址">el-table-column>
  <el-table-column prop="创建时间" label="创建时间">
	    <template v-slot:default="scope">
	      {{ scope.row.date }}
	    template>
  el-table-column>
el-table>

表单验证

<template>
  <div>
    <el-form :model="form" status-icon :rules="formRules" ref="form" label-width="80px" >
      
      <el-form-item label="用户姓名" prop="name">
        <el-input v-model="form.name" autocomplete="off">el-input>
      el-form-item>
      
      <el-form-item label="用户年龄" prop="age">
        <el-input v-model.number="form.age" autocomplete="off">el-input>
      el-form-item>

      <el-form-item label="用户头衔" prop="position">
        <el-input v-model="form.position">el-input>
      el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm('form')">提交el-button>
        <el-button @click="resetForm('form')">重置el-button>
      el-form-item>
    el-form>
  div>

template>

<script>
export default {
  data() {
    // 声明 校验年龄的函数
    // value 填写的值
    // cb回调函数  cb(new new Error()) 代表出错
    // cb() 代表验证通过
    let checkAge = (rule, value, cb) => {
      if (!Number.isInteger(value)) {
        return cb(new Error('请填写整数'))
      }
      if (value > 100 || value < 1) {
        return cb(new Error('年龄必须在1到100岁之间！'))
      }
      cb()
    }
    return {

      // 要采集的用户的 信息对象
      form: {
        name: '',
        age: '',
        position: ''
      },
      // 表单的验证规则~
      formRules: {
        name: [
          {required: true, message: '姓名是必填项', trigger: 'blur'},
          {min: 1, max: 15, message: '长度在1到15个字符', trigger: 'blur'}
        ],
        age: [
          {required: true, message: '年龄是必填项', trigger: 'blur'},
          //validator 校验规则,trigger 触发时机
          {validator: checkAge, trigger: 'blur'}
        ],
        position: [
          {required: true, message: '头衔是必填项', trigger: 'blur'},
          {min: 1, max: 10, message: '长度在1到10个字符', trigger: 'blur'}
        ],
      }
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
}
script>

Message 消息提示

通过 main.js ，给原型加个 $message对象

import {Message} from "element-ui";

Vue.prototype.$message = Message

submitForm(formName) {
  this.$refs[formName].validate(async valid => {
    // 验证 没通过 直接返回，不发送请求
    if (!valid) return;
    // 需要 执行 添加的业务处理
    const {data: res} = await this.$http.post('/api/users', this.form)
    // this.$message 优化提示效果: Message消息提示
    if (res.status != 0) return this.$message.error("操作失败")
    this.$message.success("操作成功！")

  });
},
resetForm(formName) {
  this.$refs[formName].resetFields();
  this.$message.success("重置成功！")
}

提示组件MessageBox弹框

通过 main.js ，给原型加个 $confirm 对象

import {Message, MessageBox} from "element-ui";

Vue.prototype.$message = Message
Vue.prototype.$confirm = MessageBox

async resetForm(formName) {
  const confirmResult = await this.$confirm('此操作将重置表单, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).catch(err => err)
  if (confirmResult != 'confirm') return this.$message.info('取消重置')
  this.$refs[formName].resetFields();
  this.$message.success('重置成功')
}

你可能感兴趣的:(前端,vue.js,ui,javascript)

  • 移动端城市区县二级联动选择功能实现包 good2know
    本文还有配套的精品资源，点击获取简介：本项目是一套为移动端设计的jQuery实现方案，用于简化用户在选择城市和区县时的流程。它包括所有必需文件：HTML、JavaScript、CSS及图片资源。通过动态更新下拉菜单选项，实现城市到区县的联动效果，支持数据异步加载。开发者可以轻松集成此功能到移动网站或应用，并可基于需求进行扩展和优化。1.jQuery移动端解决方案概述jQuery技术简介jQuery
  • day15｜前端框架学习和算法 universe_01 前端算法笔记
    T22括号生成先把所有情况都画出来，然后（在满足什么情况下）把不符合条件的删除。T78子集要画树状图，把思路清晰。可以用暴力法、回溯法和DFS做这个题DFS深度搜索：每个边都走完，再回溯应用：二叉树搜索，图搜索回溯算法=DFS+剪枝T200岛屿数量（非常经典BFS宽度把树状转化成队列形式，lambda匿名函数“一次性的小函数，没有名字”setup语法糖：让代码更简洁好写的语法ref创建：基本类型的
  • 旧系统UI焕新陷阱：保留业务习惯与引入新交互的平衡点把控 贝格前端工场 ui交互
    摘要**想给老旧系统换上“高颜值新衣”，却遭遇员工集体吐槽“不会用”？满心期待新交互能提升效率，结果用户操作频频出错，业务进度反而被拖慢？旧系统UI焕新本是优化体验的好机会，可在保留多年养成的业务操作习惯，与引入更先进便捷的新交互方式之间，却横亘着巨大鸿沟。稍有不慎，就会陷入“改了不如不改”的尴尬境地。这场关于“守旧”与“创新”的博弈，究竟该如何破局？一、旧系统UI焕新：一场甜蜜又棘手的改造工程旧
  • Selenium 特殊控件操作与 ActionChains 实践详解 小馋喵知识杂货铺 selenium测试工具
    1.下拉框单选操作(a)使用SeleniumSelect类（标准HTML标签）Selenium提供了内置的Select类用于操作标准下拉框，这种方式简单且直观。fromselenium.webdriver.support.uiimportSelect#定位下拉框dropdown=Select(driver.find_element("id","dropdown_id"))#通过以下三种方式选择单个
  • Unity学习笔记1 zy_777
    通过一个星期的简单学习，初步了解了下unity，unity的使用，以及场景的布局，UI，以及用C#做一些简单的逻辑。好记性不如烂笔头，一些关键帧还是记起来比较好，哈哈，不然可能转瞬即逝了，（PS:纯小白观点，unity大神可以直接忽略了）一：MonoBehaviour类的初始化1，Instantiate()创建GameObject2，通过Awake()和Start()来做初始化3，Update、L
  • 用代码生成艺术字：设计个性化海报的秘密
    本文围绕“用代码生成艺术字：设计个性化海报的秘密”展开，先概述代码生成艺术字在海报设计中的独特价值，接着介绍常用的代码工具（如HTML、CSS、JavaScript等），详细阐述从构思到实现的完整流程，包括字体样式设计、动态效果添加等，还分享了提升艺术字质感的技巧及实际案例。最后总结代码生成艺术字的优势，为设计师提供打造个性化海报的实用指南，助力提升海报设计的独特性与吸引力，符合搜索引擎SEO标准
  • vue element 封装表单 影子信息 vuevue.jsjavascript前端
    背景：在前端系统开发中，系统页面涉及到的表单组件比较多，所以进行了简单的封装。封装的包括一些Form表单组件，如下：input输入框、select下拉框、等实现效果：理论知识：表单组件官方链接：点击跳转封装组件：封装组件的思路：不封装element组件，每一个input组件绑定一个form对象，例如官网。简单封装element组件，利用for循环生成form表单的每一项el-form-item。进
  • 前端面试每日 3+1 —— 第39天 浪子神剑
    今天的面试题(2019.05.25)——第39天[html]title与h1、b与strong、i与em的区别分别是什么？[css]写出你知道的CSS水平和垂直居中的方法[js]说说你对模块化的理解[软技能]公钥加密和私钥加密是什么？《论语》，曾子曰：“吾日三省吾身”（我每天多次反省自己）。前端面试每日3+1题，以面试题来驱动学习，每天进步一点！让努力成为一种习惯，让奋斗成为一种享受！欢迎在Iss
  • 前端数据库：IndexedDB从基础到高级使用指南
    文章目录前端数据库：IndexedDB从基础到高级使用指南引言一、IndexedDB概述1.1什么是IndexedDB1.2与其他存储方案的比较二、基础使用2.1打开/创建数据库2.2基本CRUD操作添加数据读取数据更新数据删除数据三、高级特性3.1复杂查询与游标3.2事务高级用法3.3性能优化技巧四、实战案例：构建离线优先的待办事项应用4.1数据库设计4.2同步策略实现五、常见问题与解决方案5.
  • 深入剖析 boost::unique_lock＜boost::mutex＞ 程序员乐逍遥 C++Boost库C/C++多线程编程专题C++boost线程锁
    在高并发的C++程序中，线程安全是永恒的主题。而boost::unique_lock作为Boost.Thread库中的核心组件，为开发者提供了强大、灵活且异常安全的互斥量管理机制。它不仅是RAII（ResourceAcquisitionIsInitialization）设计模式的典范，更是实现复杂线程同步逻辑的基石。一、从lock_guard的说起在介绍unique_lock之前，我们先回顾其“简
  • .net平台的跨平台桌面应用开发的技术方案总结对比 yuanpan .net
    目前，.NET平台提供了多种跨平台桌面应用开发的技术方案，主要包括.NETMAUI、AvaloniaUI、UnoPlatform、Eto.Forms等。以下是它们的核心特点及优缺点对比：1..NETMAUI（.NETMulti-platformAppUI）支持平台：Windows、macOS、iOS、Android核心特点：微软官方维护，继承自Xamarin.Forms，支持XAML和C#开发。提
  • 【Java Web实战】从零到一打造企业级网上购书网站系统 | 完整开发实录（三） 笙囧同学 java前端状态模式
    核心功能设计用户管理系统用户管理是整个系统的基础，我设计了完整的用户生命周期管理：用户注册流程验证失败验证通过验证失败验证通过用户名已存在用户名可用失败成功用户访问注册页面填写注册信息前端表单验证显示错误提示提交到后端后端数据验证返回错误信息用户名唯一性检查提示用户名重复密码加密处理保存用户信息保存成功?显示系统错误注册成功跳转登录页面登录认证机制深度解析我实现了一套企业级的多层次安全认证机制：认
  • 从零到一：打造基于GigaChat AI的艺术创作平台 | 笙囧同学的全栈开发实战
    作者简介：笙囧同学，中科院计算机大模型方向硕士，全栈开发爱好者联系方式：[email protected]各大平台账号：笙囧同学座右铭：偷懒是人生进步的阶梯前言在AI技术飞速发展的今天，如何将前沿的大模型技术与实际应用相结合，一直是我们开发者关注的焦点。今天，笙囧同学将带大家从零开始，构建一个基于GigaChatAI的艺术创作平台，实现React前端+Django后端的完整全栈解决方案。这不仅仅是
  • qt报错说no suitable kits found
    看起来你的QtCreator在试图找一个"kit"来编译你的程序,但是没有找到合适的kit.Kit是QtCreator中用来配置编译环境的一种东西,它包含了编译器、编译选项、以及所要使用的Qt库等信息.当QtCreator试图找一个kit来编译你的程序时,如果没有找到合适的kit,就会出现这个错误.要解决这个问题,你需要在QtCreator中配置一个合适的kit.具体来说,你需要安装Qt库和编译器
  • 14.tornado操作之应用Websocket协议实现聊天室功能 孤寒者 Tornado框架从入门到实战websockettornado聊天室功能实现python
    目录：每篇前言：1.什么是WebSocket（1）定义（2）优点（3）和HTTP对比（4）适用场景2.WebSocket关键方法3.本tornado项目中使用WebSocket（1）准备一个聊天室的页面：第一步：编写视图：第二步：编写接口：（app.py中加入以下接口！）第三步：编写前端页面：测试接口——响应OK！（2）使用WebSocket：（3）聊天室的聊天功能的最终实现：第一步：战前准备第二
  • c#分层设计介绍 努力吧_少年 C#javac#asp.net
    领域驱动分层介绍UI（表示层）最容易理解，这一层负责显示信息给用户，并解释用户的命令。有时，用户不是人，而是另一个系统。应用层用于协调领域模型对象的动作。不建议这一层包含业务规则或领域知识，即使是维护状态也不行——这是领域模型做的事情。应用层对于协调任务和把动作委托给领域模型非常有用。虽然不用于维护业务实体的状态，单应用层可以维护跟踪用户或者系统所执行的当前任务的状态。应用层不干涉阻碍领域模型，这
  • Spring Boot 2整合Druid的两种方式 玩代码 springboot后端javaDruid
    一、自定义整合Druid（非Starter方式）适用于需要完全手动控制配置的场景添加依赖（pom.xml）com.alibabadruid1.2.8org.springframework.bootspring-boot-starter-jdbc创建配置类@ConfigurationpublicclassDruidConfig{@Bean@ConfigurationProperties(prefix
  • iOS 12.1 tabbar 在pop的时候偏移问题 符大大
    iOS12.1从bate版到上线版本都存在一个问题，在navigation返回首页的时候，底部tabbar会有一个抖动偏移的现象。苹果真的坑，这种问题存在还敢上线。解决方法：1.新建一个继承UITabbar的的子类，实现以下两个方法2.在tabbarController的viewdidload中添加一下代码。运行之后就解决了12.1的抖动问题了。
  • ubuntu qt环境下出现No suitable kits found解决方案
    1.清理QtCreator缓存QtCreator会缓存项目配置、索引等数据，可能导致某些异常。清理方法：(1)删除QtCreator配置目录bashrm-rf~/.config/QtProject/（Ubuntu/Linux）或Windows：cmdrmdir/s/q"%APPDATA%\QtProject"(2)清除QtCreator的编译缓存bashrm-rf~/.cache/QtProjec
  • 【Druid】学习笔记 fixAllenSun 学习笔记oracle
    【Druid】学习笔记【一】简介【1】简介【2】数据库连接池（1）能解决的问题（2）使用数据库连接池的好处【3】监控（1）监控信息采集的StatFilter（2）监控不影响性能（3）SQL参数化合并监控（4）执行次数、返回行数、更新行数和并发监控（5）慢查监控（6）Exception监控（7）区间分布（8）内置监控DEMO【4】Druid基本配置参数介绍【5】Druid相比于其他数据库连接池的优点
  • 为什么学习Web前端一定要掌握JavaScript？ web前端学习指南
    为什么学习Web前端一定要掌握JavaScript？在前端的世界里，没有什么是JavaScript实现不了的，关于JS有一句话：凡是可以用JavaScript来写的应用，最终都会用JavaScript，JavaScript可运行在所有主要平台的所有主流浏览器上，也可运行在每一个主流操作系统的服务器端上。现如今我们在为网站写任何一个主要功能的时候都需要有懂能够用JavaScript写前端的开发人员。
  • 小架构step系列25：错误码 秋千码途 架构java
    1概述一个系统中，可能产生各种各样的错误，对这些错误进行编码。当错误发生时，通过这个错误码就有可能快速判断是什么错误，不一定需要查看代码就可以进行处理，提高问题处理效率。有了统一的错误码，还可以标准化错误信息，方便把错误信息纳入文档管理和对错误信息进行国际化等。没有错误码的管理，开发人员就会按自己的理解处理这些错误。有些直接把堆栈直接反馈到前端页面上，使用看不懂这些信息体验很差，也暴露了堆栈信息有
  • Java朴实无华按天计划从入门到实战（强化速战版-66天） 岫珩 Java后端java开发语言学习Java时间安排学习计划
    致敬读者感谢阅读笑口常开生日快乐⬛早点睡觉博主相关博主信息博客首页专栏推荐活动信息文章目录Java朴实无华按天计划从入门到实战（强化速战版-66天）1.基础（18）1.1JavaSE核心（5天）1.2数据库与SQL（5天）1.3前端基础（8天）2.进阶（17天）2.1JavaWeb核心（5天）2.2Mybatis与Spring全家桶（6天）2.3中间件入门（4天）2.4实践项目（2天）3.高阶（1
  • Docker部署Minio YiShuoChen666 eureka云原生dockerminio
    一、拉取镜像dockerpullminio/minio:RELEASE.2025-04-22T22-12-26Z注：这里使用的版本是RELEASE.2025-04-22T22-12-26Z，最新的版本Web-UI界面没有管理bucket和其它的操作按钮，需要通过mc命令来实现，这对于新手很不友好二、创建目录，来存放minio的配置和将来放的文件mkdir-p/home/minio/configmk
  • 《跨域资源共享CORS的深层逻辑与前端实践精要》
    不同源头的资源交互已成为常态，而跨域资源共享（CORS）正是支撑这种交互的隐形架构。现代Web安全体系中平衡开放与防护的精妙设计。理解CORS的深层逻辑，不仅能解决实际开发中的跨域难题，更能触及网络安全与资源流通的核心矛盾，为前端工程师构建稳健的应用提供底层认知支撑。跨域资源共享的诞生，源于网络安全与应用发展的必然冲突。浏览器的同源策略，作为早期网络安全的基石，通过限制不同源文档的交互，有效阻挡了
  • 深入了解 Kubernetes（k8s）：从概念到实践
    目录一、k8s核心概念二、k8s的优势三、k8s架构组件控制平面组件节点组件四、k8s+docker运行前后端分离项目的例子1.准备前端项目2.准备后端项目3.创建k8s部署配置文件4.部署应用到k8s集群在当今云计算和容器化技术飞速发展的时代，Kubernetes（简称k8s）已成为容器编排领域的事实标准。无论是互联网巨头、传统企业还是初创公司，都在广泛采用k8s来管理和部署容器化应用。本文将带
  • Vue CSR 到 Nuxt 3 SSR 迁移：技术实现与问题解决实录 二倍速播放 前端vue.js
    1.迁移动机与技术选型1.1CSR架构的局限性基于Vue3和Vite构建的客户端渲染(CSR)单页应用(SPA)提供了良好的开发体验和用户交互流畅性。但是其核心局限在于：搜索引擎优化(SEO)：初始HTML响应仅包含一个根div元素，实际内容由JavaScript在浏览器端动态生成。虽然主流搜索引擎（如Google）能够执行部分JavaScript，但其抓取效率和稳定性不如直接获取完整HTML。非
  • vue项目 阿什么名字不会重复呢 vue.js前端javascript
    vue进行配置创建vue项目vuecreateone//one就是项目名字npmielement-ui--Snpmiaxios--savenpmiecharts--save配置main.jsimportVuefrom'vue'importAppfrom'./App.vue'importrouterfrom'./router'importstorefrom'./store'importElement
  • 构建基于Android Studio开发天气预报应用 策划加强小乔 Androidstudioandroid
    AndroidStudio开发天气预报应用需要完成API调用、UI设计、数据解析等步骤。以下是基于OpenWeatherMapAPI的实现方法，包含关键代码片段和详细说明。环境准备与项目创建确保已安装AndroidStudio最新版本，创建新项目选择EmptyActivity模板。在build.gradle模块文件中添加必要依赖：dependencies{implementation'com.sq
  • native.js设置可缩放的webview并隐藏缩放控件 Nanayai
    需求明确:webview页面可以手指缩放,并且不要那个原生控件;实现思路:1.使用h5+封装好的方法:设置scalable属性,并在html中设置meta标签:user-scalable=yes或不设置,minimum-scale和maximum-scale需要注意不要都设为1:mui.openWindow({url:"someThing",id:"someThing",styles:{scala
  • mondb入手 木zi_鸣 mongodb
    windows 启动mongodb  编写bat文件， mongod --dbpath D:\software\MongoDBDATA mongod --help  查询各种配置 配置在mongob 打开批处理，即可启动，27017原生端口，shell操作监控端口  扩展28017，web端操作端口 启动配置文件配置， 数据更灵活 
  • 大型高并发高负载网站的系统架构 bijian1013 高并发负载均衡
            扩展Web应用程序 一.概念         简单的来说，如果一个系统可扩展，那么你可以通过扩展来提供系统的性能。这代表着系统能够容纳更高的负载、更大的数据集，并且系统是可维护的。扩展和语言、某项具体的技术都是无关的。扩展可以分为两种：         1.
  • DISPLAY变量和xhost(原创) czmmiao display
    DISPLAY 在Linux/Unix类操作系统上, DISPLAY用来设置将图形显示到何处. 直接登陆图形界面或者登陆命令行界面后使用startx启动图形, DISPLAY环境变量将自动设置为:0:0, 此时可以打开终端, 输出图形程序的名称(比如xclock)来启动程序, 图形将显示在本地窗口上, 在终端上输入printenv查看当前环境变量, 输出结果中有如下内容:DISPLAY=:0.0
  • 获取B/S客户端IP 周凡杨 java编程jspWeb浏览器
       最近想写个B/S架构的聊天系统，因为以前做过C/S架构的QQ聊天系统，所以对于Socket通信编程只是一个巩固。对于C/S架构的聊天系统，由于存在客户端Java应用，所以直接在代码中获取客户端的IP，应用的方法为：    String ip = InetAddress.getLocalHost().getHostAddress(); 然而对于WEB
  • 浅谈类和对象 朱辉辉33 编程
        类是对一类事物的总称，对象是描述一个物体的特征，类是对象的抽象。简单来说，类是抽象的，不占用内存，对象是具体的， 占用存储空间。     类是由属性和方法构成的，基本格式是public  class 类名{ //定义属性 private/public 数据类型 属性名； //定义方法 publ
  • android activity与viewpager+fragment的生命周期问题 肆无忌惮_ viewpager
    有一个Activity里面是ViewPager，ViewPager里面放了两个Fragment。 第一次进入这个Activity。开启了服务，并在onResume方法中绑定服务后，对Service进行了一定的初始化，其中调用了Fragment中的一个属性。 super.onResume(); bindService(intent, conn, BIND_AUTO_CREATE);
  • base64Encode对图片进行编码 843977358 base64图片encoder
    /** * 对图片进行base64encoder编码 * * @author mrZhang * @param path * @return */ public static String encodeImage(String path) { BASE64Encoder encoder = null; byte[] b = null; I
  • Request Header简介 aigo servlet
    当一个客户端(通常是浏览器)向Web服务器发送一个请求是，它要发送一个请求的命令行，一般是GET或POST命令，当发送POST命令时，它还必须向服务器发送一个叫“Content-Length”的请求头(Request   Header)   用以指明请求数据的长度，除了Content-Length之外，它还可以向服务器发送其它一些Headers，如：    
  • HttpClient4.3 创建SSL协议的HttpClient对象 alleni123 httpclient爬虫ssl
    public class HttpClientUtils { public static CloseableHttpClient createSSLClientDefault(CookieStore cookies){ SSLContext sslContext=null; try { sslContext=new SSLContextBuilder().l
  • java取反 -右移-左移-无符号右移的探讨 百合不是茶 位运算符 位移
    取反： 在二进制中第一位，1表示符数，0表示正数 byte a = -1; 原码：10000001 反码：11111110 补码：11111111 //异或: 00000000 byte b = -2; 原码：10000010 反码：11111101 补码：11111110 //异或: 00000001
  • java多线程join的作用与用法 bijian1013 java多线程
            对于JAVA的join，JDK 是这样说的：join public final void join （long millis ）throws InterruptedException Waits at most millis milliseconds for this thread to die. A timeout of 0 means t
  • Java发送http请求(get 与post方法请求) bijian1013 javaspring
    PostRequest.java package com.bijian.study; import java.io.BufferedReader; import java.io.DataOutputStream; import java.io.IOException; import java.io.InputStreamReader; import java.net.HttpURL
  • 【Struts2二】struts.xml中package下的action配置项默认值 bit1129 struts.xml
    在第一部份，定义了struts.xml文件，如下所示：   <!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.3//EN" "http://struts.apache.org/dtds/struts
  • 【Kafka十三】Kafka Simple Consumer bit1129 simple
    代码中关于Host和Port是割裂开的，这会导致单机环境下的伪分布式Kafka集群环境下，这个例子没法运行。 实际情况是需要将host和port绑定到一起，   package kafka.examples.lowlevel; import kafka.api.FetchRequest; import kafka.api.FetchRequestBuilder; impo
  • nodejs学习api ronin47 nodejs api
    NodeJS基础 什么是NodeJS JS是脚本语言，脚本语言都需要一个解析器才能运行。对于写在HTML页面里的JS，浏览器充当了解析器的角色。而对于需要独立运行的JS，NodeJS就是一个解析器。 每一种解析器都是一个运行环境，不但允许JS定义各种数据结构，进行各种计算，还允许JS使用运行环境提供的内置对象和方法做一些事情。例如运行在浏览器中的JS的用途是操作DOM，浏览器就提供了docum
  • java-64.寻找第N个丑数 bylijinnan java
    public class UglyNumber { /** * 64.查找第N个丑数 具体思路可参考 [url] http://zhedahht.blog.163.com/blog/static/2541117420094245366965/[/url] * 题目：我们把只包含因子 2、3和5的数称作丑数（Ugly Number）。例如6、8都是丑数，但14
  • 二维数组（矩阵）对角线输出 bylijinnan 二维数组
    /** 二维数组 对角线输出 两个方向 例如对于数组： { 1, 2, 3, 4 }, { 5, 6, 7, 8 }, { 9, 10, 11, 12 }, { 13, 14, 15, 16 }, slash方向输出： 1 5 2 9 6 3 13 10 7 4 14 11 8 15 12 16 backslash输出： 4 3
  • [JWFD开源工作流设计]工作流跳跃模式开发关键点(今日更新) comsci 工作流
       既然是做开源软件的,我们的宗旨就是给大家分享设计和代码,那么现在我就用很简单扼要的语言来透露这个跳跃模式的设计原理    大家如果用过JWFD的ARC-自动运行控制器,或者看过代码,应该知道在ARC算法模块中有一个函数叫做SAN(),这个函数就是ARC的核心控制器,要实现跳跃模式,在SAN函数中一定要对LN链表数据结构进行操作,首先写一段代码,把
  • redis常见使用 cuityang redis常见使用
    redis 通常被认为是一个数据结构服务器，主要是因为其有着丰富的数据结构 strings、map、 list、sets、 sorted sets 引入jar包 jedis-2.1.0.jar  (本文下方提供下载) package redistest; import redis.clients.jedis.Jedis; public class Listtest
  • 配置多个redis dalan_123 redis
    配置多个redis客户端 <?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.springframework.org/schema/beans"       xmlns:xsi=&quo
  • attrib命令 dcj3sjt126com attr
      attrib指令用于修改文件的属性.文件的常见属性有:只读.存档.隐藏和系统.    只读属性是指文件只可以做读的操作.不能对文件进行写的操作.就是文件的写保护.    存档属性是用来标记文件改动的.即在上一次备份后文件有所改动.一些备份软件在备份的时候会只去备份带有存档属性的文件. 
  • Yii使用公共函数 dcj3sjt126com yii
    在网站项目中，没必要把公用的函数写成一个工具类，有时候面向过程其实更方便。 在入口文件index.php里添加 require_once('protected/function.php'); 即可对其引用，成为公用的函数集合。 function.php如下：   <?php /**   * This is the shortcut to D
  • linux 系统资源的查看（free、uname、uptime、netstat） eksliang netstatlinux unamelinux uptimelinux free
    linux 系统资源的查看 转载请出自出处：http://eksliang.iteye.com/blog/2167081   http://eksliang.iteye.com 一、free查看内存的使用情况 语法如下：   free [-b][-k][-m][-g] [-t] 参数含义 -b:直接输入free时，显示的单位是kb我们可以使用b(bytes),m
  • JAVA的位操作符 greemranqq 位运算JAVA位移<<>>>
    最近几种进制，加上各种位操作符，发现都比较模糊，不能完全掌握，这里就再熟悉熟悉。   1.按位操作符 ：    按位操作符是用来操作基本数据类型中的单个bit,即二进制位，会对两个参数执行布尔代数运算，获得结果。    与（&）运算：    1&1 = 1, 1&0 = 0, 0&0 &
  • Web前段学习网站 ihuning Web
      Web前段学习网站 菜鸟学习：http://www.w3cschool.cc/   JQuery中文网：http://www.jquerycn.cn/   内存溢出：http://outofmemory.cn/#csdn.blog   http://www.icoolxue.com/   http://www.jikexue
  • 强强联合：FluxBB 作者加盟 Flarum justjavac r
    原文：FluxBB Joins Forces With Flarum作者：Toby Zerner译文：强强联合：FluxBB 作者加盟 Flarum译者：justjavac FluxBB 是一个快速、轻量级论坛软件，它的开发者是一名德国的 PHP 天才 Franz Liedke。FluxBB 的下一个版本(2.0)将被完全重写，并已经开发了一段时间。FluxBB 看起来非常有前途的，
  • java统计在线人数（session存储信息的） macroli javaWeb
    这篇日志是我写的第三次了 前两次都发布失败！郁闷极了！   由于在web开发中常常用到这一部分所以在此记录一下，呵呵，就到备忘录了！ 我对于登录信息时使用session存储的，所以我这里是通过实现HttpSessionAttributeListener这个接口完成的。 1、实现接口类，在web.xml文件中配置监听类，从而可以使该类完成其工作。 public class Ses
  • bootstrp carousel初体验 快速构建图片播放 qiaolevip 每天进步一点点学习永无止境bootstrap纵观千象
    img{ border: 1px solid white; box-shadow: 2px 2px 12px #333; _width: expression(this.width > 600 ? "600px" : this.width + "px"); _height: expression(this.width &
  • SparkSQL读取HBase数据，通过自定义外部数据源 superlxw1234 sparksparksqlsparksql读取hbasesparksql外部数据源
    关键字：SparkSQL读取HBase、SparkSQL自定义外部数据源     前面文章介绍了SparSQL通过Hive操作HBase表。   SparkSQL从1.2开始支持自定义外部数据源(External DataSource)，这样就可以通过API接口来实现自己的外部数据源。这里基于Spark1.4.0，简单介绍SparkSQL自定义外部数据源，访
  • Spring Boot 1.3.0.M1发布 wiselyman spring boot
        Spring Boot 1.3.0.M1于6.12日发布，现在可以从Spring milestone repository下载。这个版本是基于Spring Framework 4.2.0.RC1,并在Spring Boot 1.2之上提供了大量的新特性improvements and new features。主要包含以下：   1.提供一个新的sprin