现今的很多网页其实可以看做是功能丰富的应用，它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度，前端社区涌现出了很多好的实践方法
WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。
在早期 Java Web 的开发中，统一把显示层、控制层、数据层的操作全部交给 JSP 或者 JavaBean 来进行处理，我们称之为 Model1：
正因为上面的种种弊端，所以很快这种方式就被 Servlet + JSP + Java Bean 所替代了，早期的 MVC 模型（Model2）就像下图这样：
首先用户的请求会到达 Servlet，然后根据请求调用相应的 Java Bean，并把所有的显示结果交给 JSP 去完成，这样的模式我们就称为 MVC 模式。
测试的方法多，不想一个个的建立测试方法那么可以使用以下方法：
package com.koshi.textjunit;
import static org.junit.Assert.*;
import org.junit.Test;
public class CalculateTest3 {
@Test
public void testAdd() {
fail("Not yet implemented");
}
@Test
public void testSubstract() {
fail("Not yet implemented");
}
@Test
public void testCheng() {
fail("Not yet implemented");
}
@Test
public void testChu() {
fail("Not yet implemented");
}
}再在这个基础上进行修改测试类方法
在测试中结果中关于Failure和error的解释
1.Failure 一般由测试单元使用断言方法判断失败引起的，这个报错，说明测试点发现了问题，即程序输出的结果和我们预期的不一样
2.error 是由代码异常引起的，它可以产生代码本身的错误，也可以是测试代码中的一个隐藏bug，测试用例不是用来证明你是对的，而是用来证明你没错。
package com.fulisha.textjunit;
import static org.junit.Assert.*;
import org.junit.After;
import org.junit.AfterClass;
import org.junit.Before;
import org.junit.BeforeClass;
import org.junit.Test;
public class JunitFlowText {
@BeforeClass
public static void setUpBeforeClass() throws Exception {
System.out.println("this is beforeClasss....");
}
@AfterClass
public static void tearDownAfterClass() throws Exception {
System.out.println("this is afterClasss....");
}
@Before
public void setUp() throws Exception {
System.out.println("this is brfore....");
}
@After
public void tearDown() throws Exception {
System.out.println("this is after....");
}
@Test
public void test1() {
System.out.println("this is test1....");
}
@Test
public void test2() {
System.out.println("this is test2....");
}
}@BeforeClass
修饰的方法会在所有方法被调用前执行，且该方法时静态的，所以当测试类被加载后就接着运行它，而且在内存中他只会存在一份实例，他比较适合加载配置文件（针对所有测试，只执行一次 ）
@AfterClass
所修饰的方法通常用来对资源管理，如关闭数据库连接（针对所有测试，只执行一次 ）
@Before和@After 会在每个测试方法前后各执行一次
@Test：测试方法，在这里可以测试期望异常和超时时间
@Ignore：忽略的测试方法
Junit是xUnit的一个子集， xUnit是一套基于测试驱动开发的测试框架
其中的断言机制：将程序预期的结果与程序运行的最终结果进行比对，确保对结果的可预知性。
新建一个工程
工程右键，点击Properties
新建一个类：Calculate
package koshiryotest;
public class Calculate {
public int add(int a,int b){
return a+b;
}
public int substract(int a , int b){
return a-b;
}
public int cheng(int a,int b){
return a*b;
}
public int chu(int a, int b){
return a/b;
}
}再新建一个测试类
package koshiryotest;
import static org.junit.Assert.assertEquals;
import org.junit.Test;
public class CalculateTest {
@Test
public void testAdd(){
assertEquals(6,new Calculate().add(3, 3));
}
@Test
public void testsubstract(){
assertEquals(2,new Calculate().substract(5, 3));
}
@Test
public void testcheng(){
assertEquals(15,new Calculate().cheng(5, 3));
}
@Test
public void testchu(){
assertEquals(2,new Calculate().chu(6, 3));
}
}在test类上运行
v-on用于绑定事件，简写为@。v-on可以绑定单个事件格式为：v-on:click="onclick",其中，onclick为自定的函数。这个函数放在method对象中，而不是data中。绑定多个事件的格式为：v-on = "{mouseenter:onenter,mouseleave:onout}"
代码如下
<div id="app">
<button v-on:click="onClick">Click me!</button>
<button v-on="{mouseenter: onEnter, mouseleave:onOut}">
Click me again!
</button>
<form @keyup.enter="onKeyup" @submit.prevent="onSubmit">
<input type="text">
<button type="submit">submit</button>
</form>
</div>var app = new Vue({
el:'#app',
methods:{
onClick:function(){
console.log("onClick");
},
onEnter:function(){
console.log("onEnter")
},
onOut:function(){
console.log('outEnter')
},
onSubmit:function(){
console.log('submitted')
},
onKeyup:function(){
console.log('Keyup')
}
}
})与上述不同的是v-bind的作用是绑定属性，比如动态修改a标签中的链接，俄日而且，v-bind能绑定类，也可以绑定条件类，条件类传入一个对象{active:isActive}，active表示要执行的类，isActive代表条件，为真时执行active类 ,v-bind可以简写直接用冒号代替
<div id="app">
<!-- v-bind是绑定属性 如下边的a标签的属性可以动态修改-->
<a v-bind:href="url" title="">
<!-- <span v-bind:class="klass"> -->
<span :class="{active:isActive}">
Click!
</span>
<img v-bind:src="img" alt="">
</a>
</div>var app = new Vue({
el:"#app",
data:{
url:"httpa://www.jiaozi1122.com",
img:"koshi.png",
klass:"pink",
isActive:true,
}
})v-for的作用格式迭代，在html中li元素中定义个v-for的属性如：
表示在foodList中迭代输出food，代码如下
<div id="app">
<ul>
<!-- v-for是一种迭代 -->
<!-- <li v-for="food in foodList">
{{food}}
</li> -->
<li v-for="food in foodList">
{{food.name}}:￥{{food.price*food.discount}}
</li>
</ul>
</div>var app = new Vue({
el:"#app",//绑定对应元素
data:{ //数据键值对
// foodList:['bread','egg','carrot'],
foodList:[
{
name:'bread',
price:2.99,
discount:2,
},
{
name:'egg',
price:0.5,
discount:0.5,
},
{
name:'carrot',
price:1.99,
discount:0,
}
]
}
})vue与html中内容建立关系的方式是绑定，在自定的js文件中定义一个Vue对象，内部元素el作为选择器绑定对应标签，如div;data是一个对象，其中的键值对对应html中v-model属性的值如data：{ name:”Jack”}。在html中将被绑定的值用双大括号保住，则的值随自定义vue对象data值中name的值改变。
v-model,v-show是vue自定义的属性，称为指令：directive.
v-model与v-show一般配合使用。v-model绑定输入标签input与vue对象变量；v-show绑定输出标签与VUE变量对象如SPAN等；
<div id="app">
<div>
<!-- v-model是vue定义的属性，称为指令：directive -->
<input type="text" v-model="name">
<span v-show="name">
My name is {{name}}
</span>
</div>
<div>
<input type="text" v-model="age">
<span v-show="age">
I am {{age}} years old.
</span>
</div>
<div>
<input type="text" v-model="sex">
<!-- v-show的作用是：如果sex属性存在，则显示此sapn
v-if,与v-show作用相同，区别是，v-show是仅仅隐藏，而v-if是当sex属性不存在时则将span从DOM中删除
-->
<span v-show="sex">
I am a {{sex}}.
</span>
</div>
</div>var app = new Vue({
el:'#app',
data:{
name:'Sophie',
age:'25,
sex:'girl'
}
})可以在console中输入app.name来查看对应的值。