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 文件夹

进入文件夹
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项目的运行流程
相当于使用 App.vue 组件替换这个

组件的三个结构
<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>
组件的使用
<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>
兄弟组件通信
操作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>
插槽 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>
移除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>
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},
    ]
})
嵌套路由
<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 }}
跨域代理
线上需要 开启 API接口服务器的 CORS 跨域允许

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"
            }
        ]
    ]
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)

OC语言多界面传值五大方式 Magnetic_h ios ui 学习 objective-c 开发语言
前言在完成暑假仿写项目时，遇到了许多需要用到多界面传值的地方，这篇博客来总结一下比较常用的五种多界面传值的方式。属性传值属性传值一般用前一个界面向后一个界面传值，简单地说就是通过访问后一个视图控制器的属性来为它赋值，通过这个属性来做到从前一个界面向后一个界面传值。首先在后一个界面中定义属性@interfaceBViewController:UIViewController@propertyNSSt

UI学习——cell的复用和自定义cell Magnetic_h ui 学习
目录cell的复用手动（非注册）自动（注册）自定义cellcell的复用在iOS开发中，单元格复用是一种提高表格（UITableView）和集合视图（UICollectionView）滚动性能的技术。当一个UITableViewCell或UICollectionViewCell首次需要显示时，如果没有可复用的单元格，则视图会创建一个新的单元格。一旦这个单元格滚动出屏幕，它就不会被销毁。相反，它被添

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位的整数。为了解决这个问

swagger访问路径 igotyback swagger
Swagger2.x版本访问地址：http://{ip}:{port}/{context-path}/swagger-ui.html{ip}是你的服务器IP地址。{port}是你的应用服务端口，通常为8080。{context-path}是你的应用上下文路径，如果应用部署在根路径下，则为空。Swagger3.x版本对于Swagger3.x版本（也称为OpenAPI3）访问地址：http://{ip

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的运行

你可能遗漏的一些C#/.NET/.NET Core知识点追逐时光者 C#.NET DotNetGuide编程指南 c#.net .netcore microsoft
前言在这个快速发展的技术世界中，时常会有一些重要的知识点、信息或细节被忽略或遗漏。《C#/.NET/.NETCore拾遗补漏》专栏我们将探讨一些可能被忽略或遗漏的重要知识点、信息或细节，以帮助大家更全面地了解这些技术栈的特性和发展方向。拾遗补漏GitHub开源地址https://github.com/YSGStudyHards/DotNetGuide/blob/main/docs/DotNet/D

linux 发展史种树的猴子内核 java 操作系统 linux 大数据
linux发展史说明此前对linux认识模糊一知半解，近期通过学习将自己对于linux的发展总结一下方便大家日后的学习。那Linux是目前一款非常火热的开源操作系统，可是linux是什么时候出现的，又是因为什么样的原因被开发出来的呢。以下将对linux的发展历程进行详细的讲解。目录一、Linux发展背景二、UINIX的诞生三、UNIX的重要分支-BSD的诞生四、Minix的诞生五、GNU与Free

spring如何整合druid连接池？惜.己 spring spring junit 数据库 java idea 后端 xml
目录spring整合druid连接池1.新建maven项目2.新建mavenModule3.导入相关依赖4.配置log4j2.xml5.配置druid.xml1)xml中如何引入properties2)下面是配置文件6.准备jdbc.propertiesJDBC配置项解释7.配置druid8.测试spring整合druid连接池1.新建maven项目打开IDE（比如IntelliJIDEA,Ecl

esp32开发快速入门 8 : MQTT 的快速入门，基于esp32实现MQTT通信 z755924843 ESP32开发快速入门服务器网络运维
MQTT介绍简介MQTT（MessageQueuingTelemetryTransport，消息队列遥测传输协议），是一种基于发布/订阅（publish/subscribe）模式的"轻量级"通讯协议，该协议构建于TCP/IP协议上，由IBM在1999年发布。MQTT最大优点在于，可以以极少的代码和有限的带宽，为连接远程设备提供实时可靠的消息服务。作为一种低开销、低带宽占用的即时通讯协议，使其在物联

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:'

android 更改窗口的层次,浮窗开发之窗口层级 Ms.Bu android 更改窗口的层次
最近在项目中遇到了这样的需求：需要在特定的其他应用之上悬浮自己的UI交互(拖动、输入等复杂的UI交互)，和九游的浮窗类似，不过我们的比九游的体验更好，我们越过了很多授权的限制。浮窗效果很多人都知道如何去实现一个简单的浮窗，但是却很少有人去深入的研究背后的流程机制，由于项目中浮窗交互比较复杂，遇到了些坑查看了很多资料，故总结浮窗涉及到的知识点：窗口层级关系(浮窗是如何“浮”的)？浮窗有哪些限制，如何

matlab mle 优化,MLE+: Matlab Toolbox for Integrated Modeling, Control and Optimization for Buildings... Simon Zhong matlab mle 优化
摘要：FollowingunilateralopticnervesectioninadultPVGhoodedrat,theaxonguidancecueephrin-A2isup-regulatedincaudalbutnotrostralsuperiorcolliculus(SC)andtheEphA5receptorisdown-regulatedinaxotomisedretinalgan

springboot+vue项目实战一-创建SpringBoot简单项目苹果酱0567 面试题汇总与解析 spring boot 后端 java 中间件开发语言
这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一

JavaScript 中，深拷贝（Deep Copy）和浅拷贝（Shallow Copy）跳房子的前端前端面试 javascript 开发语言 ecmascript
在JavaScript中，深拷贝（DeepCopy）和浅拷贝（ShallowCopy）是用于复制对象或数组的两种不同方法。了解它们的区别和应用场景对于避免潜在的bugs和高效地处理数据非常重要。以下是对深拷贝和浅拷贝的详细解释，包括它们的概念、用途、优缺点以及实现方式。1.浅拷贝（ShallowCopy）概念定义：浅拷贝是指创建一个新的对象或数组，其中包含了原对象或数组的基本数据类型的值和对引用数

TextFiled 中输入金额宁梓茞
要求:输入的金额不能超过六位,小数点后面只能输入两位小数如果textFIled中第一位输入的是0,后面必须输入小数点,否则禁止输入用到textfiled代理方法#pragmamark----textFiledDelegate-----(BOOL)textField:(UITextField*)textFieldshouldChangeCharactersInRange:(NSRange)range

JAVA·一个简单的登录窗口 MortalTom java 开发语言学习
文章目录概要整体架构流程技术名词解释技术细节资源概要JavaSwing是Java基础类库的一部分，主要用于开发图形用户界面（GUI）程序整体架构流程新建项目，导入sql.jar包（链接放在了文末），编译项目并运行技术名词解释一、特点丰富的组件提供了多种可视化组件，如按钮（JButton）、文本框（JTextField）、标签（JLabel）、下拉列表（JComboBox）等，可以满足不同的界面设计

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 + 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

GenVisR 基因组数据可视化实战(三) 11的雾
3.genCov画每个突变位点附件的coverage，跟igv有点相似。这个操作起来很复杂，但是图还是挺有用的。可以考虑。由于我的referencegenomebuild是hg38BiocManager::install(c("TxDb.Hsapiens.UCSC.hg38.knownGene","BSgenome.Hsapiens.UCSC.hg38"))library(TxDb.Hsapien

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）是两种常用的前端性能优化技术，它们的主要区别在于如何处理高频事件的触发。以下是防抖和节流的区别和应用场景的详细说明：防抖和节流的定义防抖：在一段时间内，多次执行变为只执行最后一次。防抖的原理是，当事件被触发后，设置一个延迟定时器。如果在这个延迟时间内事件再次被触发，则重

【自动化测试】UI自动化的分类、如何选择合适的自动化测试工具以及其中appium的设计理念、引擎和引擎如何工作 Lossya ui 自动化测试工具自动化测试 appium
引言UI自动化测试主要针对软件的用户界面进行测试，以确保用户界面元素的交互和功能符合预期文章目录引言一、UI自动化的分类1.1基于代码的自动化测试1.2基于录制/回放的自动化测试1.3基于框架的自动化测试1.4按测试对象分类1.5按测试层次分类1.6按测试执行方式分类1.7按测试目的分类二、如何选择合适的自动化测试工具2.1项目需求分析2.2工具特性评估2.3成本考虑2.4团队技能2.5试用和评估

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 编程 jsp Web 浏览器
   最近想写个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 java spring
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 netstat linux uname linux uptime linux 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 java Web
这篇日志是我写的第三次了前两次都发布失败！郁闷极了！由于在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 spark sparksql sparksql读取hbase sparksql外部数据源
关键字：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

按字母分类： A B C D E F G H I J K L M N O P Q R S T U V W X Y Z 其他

首页 - 关于我们 - 站内搜索 - Sitemap - 侵权投诉

版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.