Streamapi
stream特性：
- 不是数据结构，没有内部存储
- 不支持索引访问
- 延迟计算
- 支持并行
- 很容易生成数组或集合(List,Set)
- 支持过滤，查找，转换，汇总，聚合等操作
Stream的创建：
public class StreamDemo { //通过数组来生成 static void gen1(){ String[] strs={"a","b","c","d"}; Stream<String> strs1 = Stream.of(strs); strs1.forEach(System.out::println); } //通过集合来生成 static void gen2(){ List<String> list= Arrays.asList("1","2","3","4"); Stream<String> stream = list.stream(); stream.forEach(System.out::println); } //通过generate来生成 static void gen3(){ Stream<Integer> generate = Stream.generate(() -> 1); generate.limit(10).forEach(System.out::println); } //通过iterator来生成 static void gen4(){ Stream<Integer> iterate = Stream.iterate(1, x -> x + 1); iterate.limit(10).forEach(System.out::println); } //其他方式 static void gen5(){ String str="abcdefg"; IntStream chars = str.chars(); chars.forEach(System.out::println); } public static void main(String[] args) { gen1(); gen2(); gen3(); gen4(); gen5(); Arrays.asList(1,2,3,4,5).stream().filter((x)->x%2==0).forEach(System.out::println); } }
自定义注解
什么是注解？
Annontation是Java5开始引入的新特征，中文名称叫注解。
它提供了一种安全的类似注释的机制，用来将任何信息或元数据（metadata）与程序元素（类、方法、成员变量等）进行关联。
为程序的元素（类、方法、成员变量）加上更直观更明了的说明，这些说明信息是与程序的业务逻辑无关，并且供指定的工具或框架使用。
Annontation像一种修饰符一样，应用于包、类型、构造方法、方法、成员变量、参数及本地变量的声明语句中
Java注解是附加在代码中的一些元信息，用于一些工具在编译、运行时进行解析和使用，起到说明、配置的功能
注解不会也不能影响代码的实际逻辑，仅仅起到辅助性的作用。包含在java.lang.annotation包中。
@MyAnnotaion(name = "s",age=2,id=3 ) public class MetaAnnotaion { } @interface MyAnnotaion{ //定义的方式看起来像是方法，但是实际上是在使用注解的时候填写的参数的名称 String name(); int age(); int id(); } }
注解的原理： 反射，内省
异常
自定义异常：java中提供了非常多的异常类，但是在某些项目中需要自己定义独特的异常处理方式
继承Exception
编写构造方法，可以传入自己想打印的异常信息
调用的时候通过throw抛出异常
oracle简单使用
关系型数据库：
Mysql（用的最多）
Oracle(最安全)
Sql server(.net)
Db2(金融，银行)
非关系型数据库
Hbase
Redis
mongodb
数据库内置函数：
字符函数：
concat(string1,string2)：连接两个字符串
initcap(string) string中每个单词首字母大小
Lower(string)以小写形式返回string
lpad,rpad:填充字符型数据（分为在左边填充还是在右边填充）
ltrim/rtrim(string1,string2)
Substr():提取字符串的一部分
upper(string) 以大写形式返回string
Instr()字符串出现的位置
Length():字符串长度
replace()：替换操作
数字函数：
round(number,n):返回四舍五入后的值
trunc(number,n):截断的意思
mod(x,y)：求余数
ceil()上取整
floor()下取整
Vue框架
概述：前端领域当中有三大框架（都是开发单页面应用框架）
angular:诞生于2009年，是由谷歌创建出来的框架
React诞生于2013年，是由facebook公司创建出来的框架
Vue诞生于2014年，是由中国在校大学生尤雨溪创建出来的
Vue简介：Vue是一套用于构建用户界面的渐进式框架，与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。
Vue框架基本使用
注意：Vue它是属于前端当中的一个JavaScript框架，它的源码都封装在对应的一个js文件当中。
Vue简单指令：
v-text：简写为双大括号（渲染DOM文本）
v-html:可以渲染DOM文本（可以将标签形式字符串转- 换为标签）
v-if：通过标签上树、下树形式控制节点显示与隐藏
v-show：通过display这个属性，控制标签显示与隐藏
v-model：数据双向绑定（表单元素使用）
v-for:遍历
v-on：简写为@可以给元素绑定事件
v-bing：动态绑定属性值(简写为:)
引入vue文件：
html5新增的表单元素：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <form> <p> <!-- placeholder:占位符属性 --> 文本框: <input type="text" placeholder="请你输入用户名"> </p> <p> 单选按钮: <input type="radio" name="hobby">吃饭 <input type="radio" name="hobby">睡觉 <input type="radio" name="hobby">打豆豆 </p> <p> 复选按钮 <input type="checkbox">飞机 <input type="checkbox">大炮 <input type="checkbox">坦克 </p> <hr> <p> <!-- min：设置范围条最小数值 max最大数值 --> 范围条: <input type="range" min="0" max="255" value="0"> </p> <p> 颜色表单元素: <input type="color"> </p> <p> 日历表单元素： <input type="date"> </p> <p> 第几周日历:<input type="week"> </p> <p> 搜索的表单元素： <input type="search"> </p> <p> 地址格式表单元素:(表单元素输入文本务必符合URL格式) <input type="url"> </p> <p> 邮箱格式：（表单元素的文本务必符合邮箱格式） <input type="email"> </p> <p> 输入密码的表单元素 <input type="password"> </p> <p> <input type="submit"> </p> </form> </body> </html>
调色板案例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <!-- 引包 --> <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script> </head> <body> <!-- 模板 --> <div id="app"> <!-- 颜色变化元素 --> <div :style="{width:'400px',height:'100px',background:`rgb(${R},${G},${B})`}"></div> <!-- 三个范围条 --> <p> R: <input type="range" min="0" max="255" value="0" v-model="R"><span>{{R}}</span> </p> <p> G: <input type="range" min="0" max="255" value="0" v-model="G"><span>{{G}}</span> </p> <p> B: <input type="range" min="0" max="255" value="0" v-model="B"><span>{{B}}</span> </p> </div> </body> </html> <script> //创建Vue实例 var vm = new Vue({ //配置对象 // 挂载点设置[设置Vue可以管理区域] el: "#app", data: { R: 0, G: 0, B: 0 } }) </script>
微博发布框案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <!-- 引包 --> <script src="./js/vue.min.js"></script> <style> * { margin: 0; padding: 0; } .cur { animation: donghua 2s linear 0s infinite; } </style> </head> <body> <!-- 模板 --> <div id="app" class="cur"> <!-- 多行文本框 --> <textarea cols="30" rows="10" v-model="info"></textarea><span>{{info.length}}/140字</span> <p> <button :disabled='info.length==0||info.length>140'>发布</button> <button @click="clear">清除</button> </p> </div> </body> </html> <script> //创建Vue实例 var vm = new Vue({ // 配置对象 el: "#app", data: { info: '' }, methods: { //事件处理函数 clear() { this.info = ''; } }, }) </script>
animation
概述：animation是CSS3中新增的动画样式，它的使用类似于函数，分为两步：声明和调用。
Animation这个属性可以让程序员在样式当中完成动画效果。
注意：以前让元素运动一般都是需要通过JS【比如：JQ】
浏览器私有前缀：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> * { margin: 0; padding: 0; } div { position: relative; width: 300px; height: 150px; background-color: cyan; /* 调用动画 */ /* 第一个参数：动画名称 第二个参数：每一次动画执行时间（S||MS） 第三个参数：动画执行速率 第四个参数：第一次动画延迟时间 第五个参数：动画执行次数（infinite:代表动画执行无数次） */ animation: erha 3s linear 0s infinite; } /* animation动画声明部分 */ /* webkit代表谷歌浏览器私有前缀：这个动画只能在谷歌浏览器中使用 */ @-webkit-keyframes erha { from { left: 0px; background-color: cyan; border-radius: 0px 0px 0px 0px; font-size: 16px; } to { left: 600px; background-color: red; font-size: 30px; border-radius: 0px 0px 100px 0px; } } </style> </head> <body> <div>我爱你</div> </body> </html>
watch监听属性
概述：Vue框架当中给我们的配置对象当中可以进行监听属性值的变化
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <!-- 引包 --> <script src="./js/vue.min.js"></script> </head> <body> <!-- 模板 --> <div id="app"> <h1>{{msg}}</h1> <input type="text" v-model="msg"> </div> </body> </html> <script> //创建Vue实例 var vm = new Vue({ // 挂载点设置 el: "#app", data: { msg: "" }, // 监听实例属性值变化地方 watch: { //watch可以监听实例属性值变化 //watch这里书写函数名字务必和监听属性名字要统一 msg() { console.log("你发生变化了"); } }, }) </script>
百度预搜索技术
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <!-- 引包 --> <script src="./js/vue.min.js"></script> </head> <body> <div id="app"> {{url}} <h1>请你输入想搜索的内容: <input type="text" v-model="url"></h1> <ul> <li v-for="item in arr">{{item}}</li> </ul> </div> </body> </html> <script> //创建Vue实例 var vm = new Vue({ //挂载点设置 el: "#app", data: { url: "", arr: [] }, //监听url属性值变化 watch: { //函数名字务必和监听属性名字一直 url(a) { //这个函数在监听的属性值发生变化的时候回立即执行一次 //会将最新的数值给我们作为实参注入 //请求网址拼接 var path = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=" + a + "&cb=a"; //JSONP跨域拉去数据 //实现原理： //利用script标签src属性 //利用函数声明+调用放在两个不同服务器上面 //动态创建script var script = document.createElement("script"); //设置script标签的src属性值 script.src = path; //标签上树将请求发出去 document.body.appendChild(script); } }, }); //声明一个同名函数 function a(obj) { console.log(obj); //修改vue实例的arr属性值 vm.arr = obj.s; } </script>
Vue生命周期
概述：在Vue实例和模板DOM标签进行关联的时候，其实这个阶段经历很多种状态，
可以通过Vue框架提供生命周期函数，可以在不同的状态下，书写自己业务代码即可。
注意：在特定的条件下执行函数而已。（面试常问道：八个）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./js/vue.min.js"></script> </head> <body> <!-- 模板 --> <div id="app"> <h1>生命周期函数-----{{msg}}</h1> <button @click="add">单击我我加上1</button> </div> </body> </html> <script> //创建Vue实例 var vm = new Vue({ //配置对象 //挂载点 el: "#app", // 数据 data: { msg: 1 }, //事件处理函数 methods: { //事件处理函数 add() { this.msg++; } }, //监听属性地方 watch: {}, //生命周期函数 beforeCreate() { //在创建实例之前执行一次，这里访问不到实例data数据 console.log("在创建vm之前执行一次"); // console.log(this.msg); }, created() { //在实例创建完毕以后立即执行一次 console.log("在创建vm之后执行一次"); // console.log(this.msg); }, beforeMount() { //在实例创建完毕且和模板进行关联之前执行一次 console.log("我是VM即将和模板进行关联"); }, /*************************/ mounted() { //实际工作当中经常从这个生命周期函数拉去服务器数据 console.log("我是VM我已经和模板关联完毕"); // console.log(this.msg); }, beforeUpdate() { console.log("当数据发生变化时候立即执行一次"); if (this.msg % 2 == 0) { this.msg += 6; } }, updated() { console.log("当数据发生改变以后立即执行一次"); if (this.msg < 10) { this.msg = "哈哈哈"; } }, }) </script>
Vue当中AJAX技术实现
概述：AJAX：它是前端当中一门技术，客户端可以悄悄的想服务器端发起上行请求，服务器端接收到请求做出响应的响应，在页面没有重新加载的情况下实现页面局部更新。
Vue2.0版本以后，当时Vue当中AJAX技术，经常使用axios第三放实现AJAX技术（底层使用promise进行封装）。
axios:它是Vue当中经常使用第三方JavaScript函数库，它主要作用是可以向服务器端发起请求。
下载axios源码方式：
CDN：百度静态资源库（百度公司给提供网站：各种常用前端源码文件都有）
拉取服务器数据：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <!-- 引包 --> <script src="./js/axios.js"></script> <script src="./js/vue.min.js"></script> </head> <body> <div id="app"> <ul> <li v-for="item in postList">{{item.name}}</li> </ul> </div> </body> </html> <script> //创建Vue实例 var vm = new Vue({ //挂载点 el: "#app", data: { postList: [] }, //生命周期函数:实例已经和模板挂在完毕 mounted() { //向服务器拉去数据 axios.get("./jieyong.txt").then(obj => { //修改实例postList属性值 this.postList = obj.data.postList; }) }, }) </script>
组件开发
组件：component
概述：React、Vue框架开发离不开组件是开发。
到底什么是组件啊？
答：在程序当中经常出现功能类似结构且重复结构，就可以利用组件进行开发；
组件的使用：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> * { margin: 0; padding: 0; } p { float: left; width: 100px; height: 100px; background-color: cyan; margin-right: 10px; } </style> <!-- 引包 --> <script src="./js/vue.min.js"></script> </head> <body> <!-- 模板 --> <div id="app"> <!-- 用标签形式使用组件 --> <jch></jch> <gen></gen> <say-call></say-call> <go></go> </div> <hr> <!--下面这里是组件模板 --> <template id="erha"> <div> <p @click="add">{{msg}}</p> </div> </template> <template id="gen"> <div> <ul> <go></go> <li v-for="item in arr">{{item}}</li> </ul> </div> </template> <template id="memeda"> <div> <go></go> <h1>我是么么打</h1> </div> </template> <template id="go"> <div> <a href="http://www.sina.com">新浪</a> </div> </template> </body> </html> <script> //全局组件 Vue.component("go", { template: "#go" }) //创建Vue实例 var vm = new Vue({ //挂载点 el: "#app", //根组件数据 data: {}, methods: {}, watch: {}, //局部组件需要注册 components: { //组件名字 jch: { //jch组件模板 template: "#erha", //jch组件数据 data() { console.log(123); //组件数据务必要有返回值 return { msg: 1 } }, //事件处理函数地方 methods: { //jch组件事件处理函数地方 add() { this.msg++; } } }, gen: { // gen组件的模板 template: "#gen", data() { return { arr: [1, 2, 3, 4, 5] } } }, // 组件名字不能是以后标签名字 div: { template: "#gen" }, sayCall: { template: "#memeda" } } }); //Vue当中组件分为两种： //局部组件务必需要在compoents里面进行注册 //使用的时候当中一个自定义标签即可 //注意组件名字不能瞎写：不能是以后标签名字 </script>
