Vue 3 介绍
- Vue3 于 2022 年 2 月 7 日星期一成为新的默认版本！
- Vue3 性能更高，体积更小
- Vue3 在经过一年的迭代后，越来越好用。
官方文档：
- vue3官方文档：
- vue3中文文档：
- vue3预发布版文档：
目前已支持 vue3 的UI组件库:
-
element-plus
(PC组件库)
Element Plus，一套为开发者、设计师和产品经理准备的基于 Vue 3.0 的桌面端组件库。
-
vant
轻量、可靠的移动端 Vue 组件库。
Vant 是有赞前端团队开源的移动端组件库，于 2016 年开源，已持续维护 4 年时间。
目前 Vant 已完成了对 Vue 3.0 的适配工作，并发布了 Vant 3.0 版本
-
ant-design-vue (PC组件库)
ant-design-vue 是 Ant Design 的 Vue 实现，组件的风格与 Ant Design 保持同步。
Vue3 动机 和 新特性
Vue3 设计理念
动机与目的:
-
更好的 逻辑复用 与 代码组织 (composition组合式api)
options 选项API(旧) => composition 组合API（新）, 效果: 代码组织更方便了, 逻辑复用更方便了 非常利于维护!!
-
更好的类型推导 (typescript支持)
vue3 源码用 ts 重写了, vue3 对 ts 的支持更友好了 (ts 可以让代码更加稳定, 类型检测! )
vue3 新特性：
-
数据响应式原理重新实现 (ES6 proxy 替代了 ES5 的 Object.defineProperty)
解决了: 例如数组的更新检测等bug, 大大优化了响应式监听的性能
(原来检测对象属性的变化, 需要一个个对属性递归监听) proxy 可以直接对整个对象劫持
-
虚拟DOM - 新算法 (更快 更小)
-
提供了composition api, 可以更好的逻辑复用
-
模板可以有多个根元素
-
源码用 typescript 重写, 有更好的类型推导 (类型检测更为严格, 更稳定)
...
小结： vue3 性能更高, 体积更小, 更利于复用, 代码维护更方便
vite介绍
Vite 官方中文文档：
Vite（法语意为 "快速的"，发音 /vit/，发音同 "veet")是一种新型前端构建工具
优势
- 极速的服务启动，使用原生 ESM 文件，无需打包
- ⚡️ 轻量快速的热重载，始终极快的模块热重载（HMR）
- ️丰富的功能，对 TypeScript、JSX、CSS 等支持开箱即用
- 等等
Vite的优势？
传统方式
- 基于打包器的方式启动，必须优先抓取并构建你的整个应用，然后才能提供服务。
- 更新速度会随着应用体积增长而直线下降。
image-20220212224001104.png
vite 方式
- Vite 以 方式提供源码。这实际上是让浏览器接管了打包程序的部分工作。
- Vite 只需要在浏览器请求源码时进行转换并按需提供源码。
- 根据情景动态导入代码，即只在当前屏幕上实际使用时才会被处理。
image-20220212224054798.png
Vite 的基本使用
目标：能够使用vite创建一个vue3的项目
（1）使用vite创建项目
npm create vite
yarn create vite
（2）输入项目名字，默认为vite-project
image-20220212224535365.png
（3）选择创建的项目类型，选择vue即可
image-20220212224709912.png
（4）选择创建的vue项目类型， 不选ts
image-20220212224735340.png
（5）启动项目
image-20220212224801574.png
vite快捷使用
如果想要快速创建一个vue3项目，可以使用如下命令
yarn create vite vite-demo --template vue
yarn create vite vite-demo-ts --template vue-ts
Vue3.0项目介绍
<template>
<div>我是App组件div>
template>
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
vscode插件说明
- vue2中需要安装插件
vetur，可以实现组件高亮。但是vue3的一些语法在vetur中报错。
- vue3中需要安装插件
volar，提供了更加强大的功能。
- 所以，使用功能vue3，需要禁用或卸载
vetur插件，安装 volar插件。
image-20220212230447148.png
组合式API
composition API vs options API
-
vue2 采用的就是 options API
(1) 优点:易于学习和使用, 每个代码有着明确的位置 (例如: 数据放 data 中, 方法放 methods中)
(2) 缺点: 相似的逻辑, 不容易复用, 在大项目中尤为明显
(3) 虽然 optionsAPI 可以通过mixins 提取相同的逻辑, 但是也并不是特别好维护
-
vue3 新增的就是 composition API
(1) compositionAPI 是基于 逻辑功能 组织代码的, 一个功能 api 相关放到一起
(2) 即使项目大了, 功能多了, 也能快速定位功能相关的 api
(3) 大大的提升了 代码可读性 和 可维护性
-
vue3 推荐使用 composition API, 也保留了options API
即就算不用composition API, 用 vue2 的写法也完全兼容!!
setup 函数
composition api 的使用, 需要配置一个 setup 函数
- 从生命周期角度来看, setup 会在 beforeCreate 钩子函数之前执行
- setup 中不能使用 this, this 指向 undefined
- 在模版中需要使用的数据和函数，需要在
setup 返回。
- setup 函数是一个新的组件选项, 作为组件中 compositionAPI 的起点
<div class="container">
<h1 @click="say()">{{msg}}h1>
div>
</template>
顶层的绑定会自动暴露给模板，所以定义的变量，函数和import导入的内容都可以直接在模板中直接使用
<div>
<h3>根组件h3>
<div>点击次数：{{ count }}div>
<button @click="add">点击修改button>
div>
</template>
import { ref } from 'vue'
const count = ref(0)
const add = () => {
count.value++
}
script>
计算属性 computed 函数
computed 函数调用时, 要接收一个处理函数, 处理函数中, 需要返回计算属性的值
<div>我今年的年纪 <input type="text" v-model="age" />div>
<div>我明年的年龄 {{ nextAge }}div>
<div>我后年的年龄 <input type="text" v-model="nextAge2" />div>
</template>
import { computed, ref } from 'vue'
const age = ref(10)
// 不带set的计算属性
const nextAge = computed(() => {
return +age.value + 1
})
// 带set的计算属性
const nextAge2 = computed({
get() {
return +age.value + 2
},
set(value) {
age.value = value - 2
},
})
script>
侦听器watch函数
watch监视, 接收三个参数
1. 参数1: 监视的数据源
2. 参数2: 回调函数
3. 参数3: 额外的配置
const money = ref(100)
watch(money, (value, oldValue) => {
console.log(value)
})
const money = ref(100)
const count = ref(0)
watch([money, count], (value) => {
console.log(value)
})
const user = ref({
name: 'zs',
age: 18,
})
watch(
user,
(value) => {
console.log('user变化了', value)
},
{
deep: true,
immediate: true
}
)
const user = ref({
name: 'zs',
age: 18,
})
watch(
() => user.value.name,
(value) => {
console.log(value)
}
)
钩子函数的使用
vue3 中的生命周期函数, 需要在 setup 中调用
import { onMounted, onUpdated, onUnmounted } from 'vue'
const MyComponent = {
setup() {
onMounted(() => {
console.log('mounted!')
})
onUpdated(() => {
console.log('updated!')
})
onUnmounted(() => {
console.log('unmounted!')
})
}
}
image-20220213225003030.png
组件通讯-父传子
目标：能够实现组件通讯中的父传子组件通讯
步骤：
- 父组件提供数据
- 父组件将数据传递给子组件
- 子组件通过 defineProps 进行接收
- 子组件渲染父组件传递的数据
核心代码：
父组件
import { ref } from 'vue'
import Son from './components/Son.vue'
const money = ref(100)
const car = ref('玛莎拉蒂')
</script>
我是父组件h1>
<div>金钱：{{ money }}div>
<div>车辆：{{ car }}div>
<hr />
<Son :money="money" :car="car">Son>
</div>
template>
子组件
import { computed } from 'vue'
const props = defineProps({
money: Number,
car: String,
})
const myMoney = computed(() => {
return props.money + 100
})
</script>
我是子组件h3>
<div>{{ money }} --- {{ car }}div>
</div>
template>
注意：如果使用defineProps接收数据，这个数据只能在模板中渲染，如果想要在script中也操作props属性，应该接收返回值。
组件通讯-子传父
目标：能够实现组件通讯中的子传父
步骤：
- 子组件通过 defineEmits 获取 emit 对象（setup中没有this)
- 子组件通过emit触发事件，并且传递数据
- 父组件提供方法
- 父组件通过自定义事件的方式给子组件注册事件
核心代码
子组件
父组件
依赖注入 - provide 和 inject
依赖注入, 可以非常方便的实现 跨层级的 组件通信
image-20220213110153307.png
父组件利用 provide 提供数据
import { provide, ref } from 'vue'
import Son from './components/Son.vue'
const money = ref(100)
provide('money', money)
</script>
我是父组件h1>
<div>金钱：{{ money }}div>
<hr />
<Son>Son>
</div>
template>
子组件 (子孙后代, 都可以拿到这个数据)
import { inject } from 'vue'
const money = inject('money')
</script>
我是子组件--{{ money }}h3>
<button>修改数据button>
</div>
template>
如果希望子传父, 可以 provide 传递一个方法
父组件
import { provide, ref } from 'vue'
import Son from './components/Son.vue'
const money = ref(100)
const changeMoney = (num) => {
money.value = money.value - num
}
provide('money', money)
provide('changeMoney', changeMoney)
</script>
子组件
import { inject } from 'vue'
const money = inject('money')
const changeMoney = inject('changeMoney')
</script>
模板中 ref 的使用
联想之前的 ref 和 $refs， 获取模板的元素（dom元素，组件）
1 创建 ref => const hRef = ref(null)
2 模板中建立关联 => 钩子函数-----123
3 使用 => hRef.value
import { ref } from 'vue'
const hRef = ref(null)
const clickFn = () => {
hRef.value.innerText = '我不是标题'
}
</script>
我是标题h1>
<button @click="clickFn">操作DOMbutton>
</div>
template>
ref操作组件
import { ref } from 'vue'
import Form from './components/Form.vue'
const formRef = ref(null)
const fn = () => {
console.log(formRef.value.count)
formRef.value.sayHi()
}
</script>
Form>
</template>
需要配合defineExpose
import { ref } from 'vue'
const count = ref(0)
const sayHi = () => {
console.log('表单校验方法')
}
defineExpose({
sayHi,
})
</script>
我是Form组件h3>
</template>
vue3 中废弃了过滤器
vue3.0 中不能使用过滤器，直接使用函数进行替代
<h1>ref的使用h1>
<h3>我是一个h3的内容 {{ formatTime(now) }}h3>
<h3>{{ formatTime(other) }}h3>
<hr />
</template>
你可能感兴趣的:(前端)
- 大前端-postcss安装使用指南
黑夜照亮前行的路
postcss
PostCSS是一款强大的CSS处理工具，可以用来自动添加浏览器前缀、代码合并、代码压缩等，提升代码的可读性，并支持使用最新的CSS语法。以下是一份简化的PostCSS安装使用指南：一、安装PostCSS在你的项目目录中，通过npm（NodePackageManager）来安装PostCSS。打开命令行窗口，输入以下命令：bash复制代码npminstallpostcss--save-dev这将把
- 谷歌浏览器驱动Chromedriver（114-120版本）文件以及驱动下载教程
pigerr杨
Pythonpythonchromedrivers
ChromeDriver官方网站GitHub||GoogleChromeLabs/chrome-for-testingChromeDriver113-125_JSONChromeforTestingavailability123-125zip白月黑羽Python基础|进阶|Qt图形界面|Django|自动化测试|性能测试|JS语言|JS前端|原理与安装
- 虚拟 DOM 的优缺点有哪些
咕噜签名分发
前端javascript开发语言
虚拟DOM（VirtualDOM）技术作为现代前端开发中的重要组成部分，已经成为了众多流行前端框架的核心特性。它的引入为前端开发带来了诸多优势，同时也需要我们认真思考其潜在的考量。下面简单的介绍一下虚拟DOM技术的优势与缺点，深入探讨其在实际应用中的影响。提升性能虚拟DOM的最大优势之一是提升页面性能。通过比较前后两次虚拟DOM树的差异，最小化实际DOM操作，从而减少页面重渲染时的性能消耗。这种优
- 3、JavaWeb-Ajax/Axios-前端工程化-Element
所谓远行Misnearch
#JavaWeb前端ajaxelementuijava前端框架
P34Ajax介绍Ajax:AsynchroousJavaScriptAndXML，异步的JS和XMLJS网页动作，XML一种标记语言，存储数据，作用：数据交换：通过Ajax给服务器发送请求，并获取服务器响应的数据异步交互：在不重新加载整个页面的情况下，与服务器交换数据并实现更新部分网页的技术，例如：搜索联想、用户名是否可用的校验等等。同步与异步：同步：服务器在处理中客户端要处于等待状态，输入域名
- java实体中返回前端的double类型四舍五入（格式化）
婲落ヽ紅顏誶
java
根据业务，需要通过后端给前端返回部分double类型的数值，一般需要保留两位小数，使用jackson转换对象packagecom.ruoyi.common.core.config;importcom.fasterxml.jackson.core.JsonGenerator;importcom.fasterxml.jackson.databind.JsonSerializer;importcom.f
- Django forms组件
在飞行-米龙
Djangodjangopython后端
【一】引入【1】实现登陆验证功能（1）需求分析登陆验证需要前后端交互，采用form表单提交数据对数据进行校验用户名必须以英文大写字母开头密码必须大于三位数反馈给用户错误的信息除了反馈错误的信息还有保留原始输入内容（2）后端代码使用user_info_dict字典每次刷新存储存储前端发送的信息存储后端进行验证的信息defhome(request):#每次后刷新这个信息字典user_info_dict
- Web前端Html的表单
任家伟
前端html
表单的关键字：form标签表示一个表单区域action=“后端地址”method=“提交数据方式:get/post”input单行输入框type=“text”文本name=“定义名称名字自定义”向后端提交的键readonly=“readonly”只读，不可修改，但是可以提交disabled=“disabled”禁用组件不可修改，不能提交type=“password”密码框type=“radio”单
- Thinkphp - 详细实现网站系统登录功能，附带 Mysql 数据库设置、Web 前端展示界面、信息校验等（详细代码，即设计过程）
王佳斌
+Thinkphpmysql前端数据库
前言登录功能，是我们几乎开发每个系统都必须的模块。登录功能设计思路，主要包括几个方面。用户输入网址展示登录页面用户输入用户名，密码等点击登录进行信息校验校验通过之后，记录用户登录信息，跳转指定页面用户校验失败，提示失败信息页面目录具体功能实现为了快速搭建可用、美观的页面，我们采用一个比较成熟的前端框架Bootstrap。下面我们到Bootstrap的官网Bootsrap官网下载bootstrap。
- 程序员开发技术整理
laizhixue
学习前端框架
前端技术：vue-前端框架element-前端框架bootstrap-前端框架echarts-图标组件C#后端技术：webservice：soap架构：简单的通信协议，用于服务通信ORM框架：对象关系映射，如EF：对象实体模型，是ado.net中的应用技术soap服务通讯：xml通讯ado.net：OAuth2:登录授权认证：Token认证：JWT：jsonwebtokenJava后端技术：便捷工
- 【前端学习——js篇】7.函数缓存
笔下无竹墨下有鱼
前端学习前端学习javascript
具体见：https://github.com/febobo/web-interview7.函数缓存函数缓存，就是将函数运算过的结果进行缓存本质上就是用空间（缓存存储）换时间（计算过程）常用于缓存数据计算结果和缓存对象。其实现主要通过闭包、柯里化和高阶函数。下面主要介绍下柯里化：①柯里化柯里化（currying)是一种函数式编程的概念，指的是将一个带有多个参数的函数转换成一系列只接受一个参数的函数的
- Websocket服务监听收发消息
beiback
Java服务器问题websocket网络协议网络
目录1.pom依赖坐标2.项目配置端口和项目包名2.创建处理器3.注册处理器4.前端页面1.pom依赖坐标org.springframework.bootspring-boot-starter-websocket2.项目配置端口和项目包名application.propertiesserver.port=8088//路径规范：为应用的所有servlet提供一个统一的前缀，使URL结构更加清晰和一致
- Netty服务器结合WebSocke协议监听和接收数据
beiback
服务器问题Java服务器运维netty
目录1.pom依赖2.配置属性3.创建netty服务器4.建立监听和响应5.创建启动器6.前端static下页面7.前端js8.注意异常问题9.创建netty服务器--使用守护线程1.pom依赖io.nettynetty-all4.1.86.Final2.配置属性application.properties#启动端口server.port=8088server.servlet.context-pa
- 基于SSM+Vue企业销售培训系统 企业人才培训系统 企业课程培训管理系统 企业文化培训班系统Java
计算机程序老哥
作者主页：计算机毕业设计老哥有问题可以主页问我一、开发介绍1.1开发环境开发语言：Java数据库：MySQL系统架构：B/S后端：SSM(Spring+SpringMVC+Mybatis)前端：Vue工具：IDEA或者Eclipse，JDK1.8，Maven二、系统介绍2.1图片展示注册登录页面：登陆.png前端页面功能：首页、培训班、在线学习、企业文化、交流论坛、试卷列表、系统公告、留言反馈、个
- javascript实现SM2加密解密
人生在勤，不索何获
javascript前端jquery
前提JavaWeb环境前端代码window.sm2=function(t){functioni(e){if(r[e])returnr[e].exports;varn=r[e]={i:e,l:!1,exports:{}};returnt[e].call(n.exports,n,n.exports,i),n.l=!0,n.exports}varr={};returni.m=t,i.c=r,i.d=fu
- 前端埋点解决方案
zhu_zhu_xia
前端
一、前言：基于神策数据的前端埋点解决方案JavaScript快速使用·神策分析使用手册[预览版]二、sdkgitlab下载地址https://github.com/sensorsdata/sa-sdk-javascript/releases或者npm安装npmisa-sdk-javascript三、入门3.1接入sdk以及配置(version1.17.2)，入口文件接入sdk以及添加配置(func
- 如何提出令人爱回答的好问题？
兮若耶
我们经常会遇到这样的问题，如我适合做什么？这个名词怎么解释？大部分人面对这样的问题时，要么答非所问，要么无从下手。现在的很多事物都是速成的，只是好的问题并没有那么容易被提出来。而提不好的问题，可能会拿不到想要的信息等等。所以提出一个好问题很重要。01提问的功能我们参加各种聚会、会议时，能听到很多的比喻和新观点，而这些是在书上和网上找不到的。这些新的有用的东西，都在前端被实践着，暂时来不及把知识系统
- 谈谈对前端性能监控的理解和实践
Layla_c
webjavepython前端
一、谈谈对前端性能监控的理解和实践前端性能监控是确保网页或应用高效、稳定运行的关键环节，它涉及对前端页面加载速度、资源消耗、错误率等指标的实时监控和预警。通过前端性能监控，开发者和运维团队能够及时发现并解决性能瓶颈，从而提升用户体验和系统稳定性。理解前端性能监控，首先要明确其重要性。在移动互联网时代，用户对网页和应用的响应速度有着极高的要求。如果页面加载缓慢或出现卡顿，用户可能会选择离开，这对企业
- mineadmin使用docker启动方式
qq_38812523
dockerphp容器
找个目录,git下来mineadmin代码,在根目录,创建文件名docker-compose.yml然后复制下面代码version:'3'services:#首先下载前端，https://gitee.com/mineadmin/mineadmin-vue#在后端根目录建立mine-ui目录，把前端文件复制过来。#容器内访问宿主机的地址用：host.docker.internal#宿主机也可以在ho
- 为什么需要使用版本控制工具（如Git）？它如何帮助管理前端开发项目？
智伴科技
git
版本控制工具（如Git）在前端开发项目中扮演着重要的角色，主要有以下几方面的作用：1.**版本管理**：版本控制工具可以帮助开发团队管理项目的不同版本，记录每次代码变动的历史记录，方便追踪和回溯。开发人员可以通过版本控制工具轻松地查看、对比和恢复以前的版本。2.**协同合作**：多人开发同一个项目时，版本控制工具可以协助团队成员协同工作，避免代码冲突、重复工作和混乱。开发人员可以通过版本控制工具共
- 低代码与前端开发架构：重塑软件开发的未来
快乐非自愿
低代码架构前端
随着技术的不断进步和数字化转型的深入，软件开发领域正经历着一场革命性的变革。在这场变革中，低代码开发平台和前端开发架构扮演着越来越重要的角色。本文将探讨低代码与前端开发架构之间的关系，并分析它们如何共同推动软件开发的创新与发展。低代码开发平台的崛起低代码开发平台（Low-CodeDevelopmentPlatform,LCDP）是一种新型的软件开发方式，它允许开发者通过图形化界面、预构建的模块和模
- 接口测试之测试原则、测试用例、测试流程......
程序员老鹰
测试工具功能测试测试用例测试覆盖率系统安全
一、接口的介绍软件测试中，常说的接口有两种：图形用户接口（GUI，人与程序的接口）、应用程序编程接口（API）。接口（API）是系统与系统之间，模块与模块之间或者服务与服务之间相互调用的入口。它的本质：其实就是一种约定，在开发前期，我们约定接口会接收什么数据；在处理完成后，它又会返回什么数据。开发岗位分为前端和后端，他们相互配合完成工作，会协商接口的定义方法。一般后端定义接口，前端调用接口。前后端
- 【前端】CommonJS和ES Module
Lucky小维
前端前端
区别语法差异：CommonJS：使用require()导入模块，使用module.exports或exports导出模块。ESModule：使用import导入模块，使用export导出模块。编译时vs运行时：CommonJS是在运行时加载模块，模块代码是动态执行的。ESModule是在编译时静态解析模块依赖关系，以便更好地进行优化和静态分析。异步加载：CommonJS不支持异步加载模块，只能同步
- 基于python+vue高校毕业生离校管理系统flask-django-php-nodejs
QQ511008285
pythonvue.jsflaskdjangonode.jsphp
课题主要采用Uni-weixin、django架构技术，前端以小程序页面呈现给用户，结合后台java语言使页面更加完善，后台使用MySQL数据库进行数据存储。微信小程序主要包括学生、教务人员、宿管员、图书管理员、财务人员、离校申请、物流信息、钥匙归还、图片归还、欠费信息、催缴信息等功能，从而实现智能化的管理方式，提高工作效率。关键字：高校毕业生离校管理系统；django框架；MySQL数据库语言：
- Vue项目使用process.env关键字及Vue.config.js配置解决前端跨域问题
百思不得小李
JS实战记录vue2实战记录javascript前端vue.js
1.process.env是Node.js中的一个环境1.打开命令行查看环境：2.process.env与VueCLI项目VueCli有以下三种运行模式development模式用于vue-cli-serviceservetest模式用于vue-cli-servicetest:unitproduction模式用于vue-cli-servicebuild和vue-cli-servicetest:e2
- 浅谈前端路由history和hash的理解
怂怂敲代码
前端哈希算法算法
hash和history在前端面试中是很常考的一道题目，可能很多人对于history和hash的理解差异性就是，他们两者的url字段一个没有#号一个有#号，但是有没有想过为什么这样呢，有无#号又有什么差异呢，这篇文章谈一谈我对前端路由history和hash的理解。hash和history都可以用于前后端分离项目，且两者有各自的特点和各自的使用场景。一、前端路由原理1、SPASPA，即单页面应用(
- Yarn 管理的前端项目转换为使用 npm
577wq
node.js前端npmnode.js
如果你想将一个使用Yarn管理的前端项目转换为使用npm，你需要执行一些步骤来确保成功迁移。以下是一种可能的方法：步骤：备份项目：在执行任何更改之前，确保你对项目进行了备份。这样可以防止意外的数据丢失。删除yarn.lock文件：在项目根目录中，删除yarn.lock文件。这个文件记录了使用Yarn安装的确切的依赖版本信息。修改package.json文件：打开项目的package.json文件，
- accessToken
星梦清河
javaspringboot经验分享redis
1、介绍accessToken，通常是用于身份验证和授权的令牌,它可以用于前端和后端，具体使用方式取决于应用程序的架构和需求。前端应用accessToken通常用于向后端API发送请求时进行身份验证和授权。（1）前端应用程序会在用户登录成功后获取accessToken；（2）并将accessToken存储在本地;（3）然后在每次请求API时，将accessToken作为请求头或参数发送给后端；（4
- python社区垃圾分类管理平台的设计与实现flask-django-php-nodejs
QQ_511008285
pythonflaskdjangovue.jsphpnode.js
近些年来，随着科技的飞速发展，互联网的普及逐渐延伸到各行各业中，给人们生活带来了十分的便利，社区垃圾分类管理平台利用计算机网络实现信息化管理，使整个社区垃圾分类管理的发展和服务水平有显著提升。语言：Python框架：django/flask软件版本：python3.7.7数据库：mysql数据库工具：Navicat前端框架:vue.js通过比较两个不同因素的框架，可以看出Flask和Django不
- springboot项目学习-瑞吉外卖（1）
两仪式quq
springboot学习java瑞吉外卖
第一天任务如下：建立基本架构完成登录、退出功能注意：本博客没有使用网上教程里的mybatis-plus，使用的是mybatis；数据库连接池也没有使用教程里的druid，使用的是spring自带的连接池基本架构common包：存放的通用类R，用来给前端返回Json格式的数据config包：存放配置类，在今天的任务中主要解决静态资源路径映射问题controller包entity包：存放实体类mapp
- 前端测试方法
gyqJulius_Caesar
C/C++程序设计前端可用性测试压力测试单元测试功能测试模块测试集成测试
记录一些测试方法。对于前端工程师，测试是开发过程中不可或缺的环节。而其中两种最基本、最常见的测试类型就是“冒烟测试”和“全量测试”。1.冒烟测试众所周知，冒烟这个词是源自汽车行业的。新造出来的车辆要经过“冒烟测试”，以确保所有系统（包括电池、传动系统、制动系统等）都正常运转，或者说没有什么大问题。同样地，软件开发也会进行类似的测试。在软件开发中，“冒烟测试”通常是指对代码库中的主要功能点进行快速测
- Java常用排序算法/程序员必须掌握的8大排序算法
cugfy
java
分类：
1）插入排序（直接插入排序、希尔排序）
2）交换排序（冒泡排序、快速排序）
3）选择排序（直接选择排序、堆排序）
4）归并排序
5）分配排序（基数排序）
所需辅助空间最多：归并排序
所需辅助空间最少：堆排序
平均速度最快：快速排序
不稳定：快速排序，希尔排序，堆排序。
先来看看8种排序之间的关系：
1.直接插入排序
（1
- 【Spark102】Spark存储模块BlockManager剖析
bit1129
manager
Spark围绕着BlockManager构建了存储模块，包括RDD，Shuffle，Broadcast的存储都使用了BlockManager。而BlockManager在实现上是一个针对每个应用的Master/Executor结构，即Driver上BlockManager充当了Master角色，而各个Slave上(具体到应用范围，就是Executor)的BlockManager充当了Slave角色
- linux 查看端口被占用情况详解
daizj
linux端口占用netstatlsof
经常在启动一个程序会碰到端口被占用，这里讲一下怎么查看端口是否被占用，及哪个程序占用，怎么Kill掉已占用端口的程序
1、lsof -i:port
port为端口号
[root@slave /data/spark-1.4.0-bin-cdh4]# lsof -i:8080
COMMAND PID USER FD TY
- Hosts文件使用
周凡杨
hostslocahost
一切都要从localhost说起，经常在tomcat容器起动后，访问页面时输入http://localhost:8088/index.jsp，大家都知道localhost代表本机地址，如果本机IP是10.10.134.21，那就相当于http://10.10.134.21:8088/index.jsp，有时候也会看到http: 127.0.0.1:
- java excel工具
g21121
Java excel
直接上代码，一看就懂，利用的是jxl：
import java.io.File;
import java.io.IOException;
import jxl.Cell;
import jxl.Sheet;
import jxl.Workbook;
import jxl.read.biff.BiffException;
import jxl.write.Label;
import
- web报表工具finereport常用函数的用法总结（数组函数）
老A不折腾
finereportweb报表函数总结
ADD2ARRAY
ADDARRAY(array,insertArray, start):在数组第start个位置插入insertArray中的所有元素，再返回该数组。
示例：
ADDARRAY([3,4, 1, 5, 7], [23, 43, 22], 3)返回[3, 4, 23, 43, 22, 1, 5, 7].
ADDARRAY([3,4, 1, 5, 7], "测试&q
- 游戏服务器网络带宽负载计算
墙头上一根草
服务器
家庭所安装的4M，8M宽带。其中M是指，Mbits/S
其中要提前说明的是：
8bits = 1Byte
即8位等于1字节。我们硬盘大小50G。意思是50*1024M字节，约为 50000多字节。但是网宽是以“位”为单位的，所以，8Mbits就是1M字节。是容积体积的单位。
8Mbits/s后面的S是秒。8Mbits/s意思是 每秒8M位，即每秒1M字节。
我是在计算我们网络流量时想到的
- 我的spring学习笔记2-IoC（反向控制 依赖注入）
aijuans
Spring 3 系列
IoC（反向控制 依赖注入）这是Spring提出来了，这也是Spring一大特色。这里我不用多说，我们看Spring教程就可以了解。当然我们不用Spring也可以用IoC，下面我将介绍不用Spring的IoC。
IoC不是框架，她是java的技术，如今大多数轻量级的容器都会用到IoC技术。这里我就用一个例子来说明：
如：程序中有 Mysql.calss 、Oracle.class 、SqlSe
- 高性能mysql 之 选择存储引擎(一)
annan211
mysqlInnoDBMySQL引擎存储引擎
1 没有特殊情况，应尽可能使用InnoDB存储引擎。 原因：InnoDB 和 MYIsAM 是mysql 最常用、使用最普遍的存储引擎。其中InnoDB是最重要、最广泛的存储引擎。她 被设计用来处理大量的短期事务。短期事务大部分情况下是正常提交的，很少有回滚的情况。InnoDB的性能和自动崩溃 恢复特性使得她在非事务型存储的需求中也非常流行，除非有非常
- UDP网络编程
百合不是茶
UDP编程局域网组播
UDP是基于无连接的,不可靠的传输 与TCP/IP相反
UDP实现私聊,发送方式客户端,接受方式服务器
package netUDP_sc;
import java.net.DatagramPacket;
import java.net.DatagramSocket;
import java.net.Ine
- JQuery对象的val()方法执行结果分析
bijian1013
JavaScriptjsjquery
JavaScript中，如果id对应的标签不存在（同理JAVA中，如果对象不存在），则调用它的方法会报错或抛异常。在实际开发中，发现JQuery在id对应的标签不存在时，调其val()方法不会报错，结果是undefined。
- http请求测试实例（采用json-lib解析）
bijian1013
jsonhttp
由于fastjson只支持JDK1.5版本，因些对于JDK1.4的项目，可以采用json-lib来解析JSON数据。如下是http请求的另外一种写法，仅供参考。
package com;
import java.util.HashMap;
import java.util.Map;
import
- 【RPC框架Hessian四】Hessian与Spring集成
bit1129
hessian
在【RPC框架Hessian二】Hessian 对象序列化和反序列化一文中介绍了基于Hessian的RPC服务的实现步骤，在那里使用Hessian提供的API完成基于Hessian的RPC服务开发和客户端调用，本文使用Spring对Hessian的集成来实现Hessian的RPC调用。
定义模型、接口和服务器端代码
|---Model
&nb
- 【Mahout三】基于Mahout CBayes算法的20newsgroup流程分析
bit1129
Mahout
1.Mahout环境搭建
1.下载Mahout
http://mirror.bit.edu.cn/apache/mahout/0.10.0/mahout-distribution-0.10.0.tar.gz
2.解压Mahout
3. 配置环境变量
vim /etc/profile
export HADOOP_HOME=/home
- nginx负载tomcat遇非80时的转发问题
ronin47
nginx负载后端容器是tomcat（其它容器如WAS,JBOSS暂没发现这个问题）非８０端口，遇到跳转异常问题。解决的思路是：$host:port
详细如下：
该问题是最先发现的，由于之前对nginx不是特别的熟悉所以该问题是个入门级别的：
? 1 2 3 4 5
- java-17-在一个字符串中找到第一个只出现一次的字符
bylijinnan
java
public class FirstShowOnlyOnceElement {
/**Q17.在一个字符串中找到第一个只出现一次的字符。如输入abaccdeff，则输出b
* 1.int[] count:count[i]表示i对应字符出现的次数
* 2.将26个英文字母映射：a-z <--> 0-25
* 3.假设全部字母都是小写
*/
pu
- mongoDB 复制集
开窍的石头
mongodb
mongo的复制集就像mysql的主从数据库，当你往其中的主复制集(primary)写数据的时候，副复制集(secondary)会自动同步主复制集(Primary)的数据,当主复制集挂掉以后其中的一个副复制集会自动成为主复制集。提供服务器的可用性。和防止当机问题
mo
- [宇宙与天文]宇宙时代的经济学
comsci
经济
宇宙尺度的交通工具一般都体型巨大，造价高昂。。。。。
在宇宙中进行航行，近程采用反作用力类型的发动机，需要消耗少量矿石燃料，中远程航行要采用量子或者聚变反应堆发动机，进行超空间跳跃，要消耗大量高纯度水晶体能源
以目前地球上国家的经济发展水平来讲，
- Git忽略文件
Cwind
git
有很多文件不必使用git管理。例如Eclipse或其他IDE生成的项目文件，编译生成的各种目标或临时文件等。使用git status时，会在Untracked files里面看到这些文件列表，在一次需要添加的文件比较多时（使用git add . / git add -u），会把这些所有的未跟踪文件添加进索引。
==== ==== ==== 一些牢骚
- MySQL连接数据库的必须配置
dashuaifu
mysql连接数据库配置
MySQL连接数据库的必须配置
1.driverClass：com.mysql.jdbc.Driver
2.jdbcUrl：jdbc:mysql://localhost:3306/dbname
3.user：username
4.password：password
其中1是驱动名；2是url，这里的‘dbna
- 一生要养成的60个习惯
dcj3sjt126com
习惯
一生要养成的60个习惯
第1篇 让你更受大家欢迎的习惯
1 守时，不准时赴约,让别人等,会失去很多机会。
如何做到：
①该起床时就起床，
②养成任何事情都提前15分钟的习惯。
③带本可以随时阅读的书，如果早了就拿出来读读。
④有条理，生活没条理最容易耽误时间。
⑤提前计划：将重要和不重要的事情岔开。
⑥今天就准备好明天要穿的衣服。
⑦按时睡觉，这会让按时起床更容易。
2 注重
- [介绍]Yii 是什么
dcj3sjt126com
PHPyii2
Yii 是一个高性能，基于组件的 PHP 框架，用于快速开发现代 Web 应用程序。名字 Yii （读作 易）在中文里有“极致简单与不断演变”两重含义，也可看作 Yes It Is! 的缩写。
Yii 最适合做什么？
Yii 是一个通用的 Web 编程框架，即可以用于开发各种用 PHP 构建的 Web 应用。因为基于组件的框架结构和设计精巧的缓存支持，它特别适合开发大型应
- Linux SSH常用总结
eksliang
linux sshSSHD
转载请出自出处：http://eksliang.iteye.com/blog/2186931 一、连接到远程主机
格式：
ssh name@remoteserver
例如：
ssh
[email protected]
二、连接到远程主机指定的端口
格式：
ssh name@remoteserver -p 22
例如：
ssh i
- 快速上传头像到服务端工具类FaceUtil
gundumw100
android
快速迭代用
import java.io.DataOutputStream;
import java.io.File;
import java.io.FileInputStream;
import java.io.FileNotFoundException;
import java.io.FileOutputStream;
import java.io.IOExceptio
- jQuery入门之怎么使用
ini
JavaScripthtmljqueryWebcss
jQuery的强大我何问起（个人主页：hovertree.com）就不用多说了，那么怎么使用jQuery呢？
首先，下载jquery。下载地址：http://hovertree.com/hvtart/bjae/b8627323101a4994.htm，一个是压缩版本，一个是未压缩版本，如果在开发测试阶段，可以使用未压缩版本，实际应用一般使用压缩版本(min)。然后就在页面上引用。
- 带filter的hbase查询优化
kane_xie
查询优化hbaseRandomRowFilter
问题描述
hbase scan数据缓慢，server端出现LeaseException。hbase写入缓慢。
问题原因
直接原因是： hbase client端每次和regionserver交互的时候，都会在服务器端生成一个Lease,Lease的有效期由参数hbase.regionserver.lease.period确定。如果hbase scan需
- java设计模式-单例模式
men4661273
java单例枚举反射IOC
单例模式1，饿汉模式
//饿汉式单例类.在类初始化时，已经自行实例化
public class Singleton1 {
//私有的默认构造函数
private Singleton1() {}
//已经自行实例化
private static final Singleton1 singl
- mongodb 查询某一天所有信息的3种方法，根据日期查询
qiaolevip
每天进步一点点学习永无止境mongodb纵观千象
// mongodb的查询真让人难以琢磨，就查询单天信息，都需要花费一番功夫才行。
// 第一种方式：
coll.aggregate([
{$project:{sendDate: {$substr: ['$sendTime', 0, 10]}, sendTime: 1, content:1}},
{$match:{sendDate: '2015-
- 二维数组转换成JSON
tangqi609567707
java二维数组json
原文出处：http://blog.csdn.net/springsen/article/details/7833596
public class Demo {
public static void main(String[] args) { String[][] blogL
- erlang supervisor
wudixiaotie
erlang
定义supervisor时，如果是监控celuesimple_one_for_one则删除children的时候就用supervisor:terminate_child (SupModuleName, ChildPid)，如果shutdown策略选择的是brutal_kill，那么supervisor会调用exit(ChildPid, kill)，这样的话如果Child的behavior是gen_
