j2ee期末考试总结

目录

一、选择题

二、填空

三、简答

四、vue经典案例

---

注：括号内为书中知识点页面。

一、选择题

1.你对vue中mvvm的模式设计有什么感想？（9）

mvvm设计模式采用的双向绑定，当view发生变化，model会跟着变化，model发生变化，view也会同步，这样的话，我们就可以更多的关注逻辑，从而减少dom的操作，代码的耦合性也更好。

2.Vue特点，优点（13）

Vue核心思想：vue两大核心思想为__数据驱动和组件化。

vue的两大特点：响应式编程，组件化

Vue的优势：

1. 双向数据绑定，组件化，数据和结构的分离，虚拟DOM ，运行速度快
2. Vue是单页面应用，页面局部刷新，不用每次跳转页面请求所有的数据和dom

3.开发工具:vscode,hbuider,subline,webstorm

4.目前三大主流框架，都有自己的路由实现：

Angular的ngRouter

React的ReactRouter

Vue的vue-router

5.修饰符作用（27，45，64-66）

事件绑定修饰符：.prevent 阻止默认事件（27）

.lazy,.number,.trim                       (45)

.stop阻止冒泡、.capture 事件捕获、.self 自身事件触发、.once 一次性绑定（64-66）

6.form表单

7.vue-router 动态路由

前端路由的核心：改变URL，但是页面不进行整体的刷新。

例：以下选项中不可以进行路由跳转的是:D

A. push()

B.replace()

C. route-link

D.jump()

例：以下获取动态路由{ path: '/user/:id' }中id的值正确的是:A

A.this.$route.params.id

B.this.route.params.id

C.this.$router.params.id

D.this.router.params.id

8.跨域（181，329）

1.前端使用代理（181）   同源策略：指协议，域名，端口都要相同，其中有一个不同便会产生跨域。

2.后端Cors跨域配置（329）

9.计算属性（95-99）

计算属性的重点突出在属性两个字上，首先它是个属性，其次这个属性有计算的能力，这里的计算就是个函数。简单点说，它就是一个能够将计算结果缓存起来的属性(将行为转化成了静态的属性)，可以想象为缓存。

说明：

methods：定义方法，调用方法需要带括号

computed：定义计算属性，因为是属性所以调用不需要带括号

结论：调用方法时，每次都需要进行计算，既然有计算过程则必定产生系统开销，那如果这个结果是不经常变化的呢?此时就可以考虑将这个结果缓存起来，采用计算属性可以很方便的做到这一点，计算属性的主要特性就是为了将不经常变化的计算结果进行缓存，以节约我们的系统开销。

10.computed和watch的区别

computed计算结果并返回，只有当计算的值发生改变时才会触发

Watch 监听某一个值，当监听的值发生变化时，执行对应的操作

与computed的区别是，watch更加适用于监听某一个值的变化并做对应的操作，比如请求后台接口等，而computed适用于计算已有的值并返回结果

11.vue的生命周期，执行顺序争取的是：D

A. beforeCreate -> init->create->mount->destory

B. mount-> init->beforeCreate->create->destory

C.beforeCreate->create->init->mount->destory

D.init->beforeCreate->create->init->destory

12.用于监听 DOM 事件的指令是:A

A.v-on B.v-model C.v-bind D.v-html

13.css和js理解

14.Vue组件理解（82）

使用组件的好处：

提高开发效率，方便重复利用，简化调试步骤，提升整个项目的可维护性，便于协同开发。

全局注册（83）和局部注册（86）

Vue组件中data值不能为对象，原因（84），data必须是函数，然后将数据利用return返回

1.组件props（89）

让子组件使用父组件的数据，需要通过子组件的props选项来实现，使用v-bind传递一个实际值。

2.$emit（100）

父传子：父组件通过v-bind绑定一个属性，子组件中通过props接受父组件中的绑定的属性

子传父：子组件通过广播的方式$emit将值传递给父组件，父组件中通过一个函数去接受子组件中传递过来的值

3.$ children/$ parent

指定已创建的实例之父实例，在两者之间建立父子关系，子实例可以用this.$ parent访问父实例，子实例被推入父实例的$ children数组中

$ children 的值是数组，而$ parent是个对象

vue组件封装优点：

组件是vue.js最强的功能之一，组件可以扩展HTML元素封装可重用代码，组件是可复用的vue实例组件可以提升整个项目的开发效率。

能够把页面抽象成多个相对独立的模块，解决了我们传统项目开发：效率低、难维护、复用性低等问题。

15.vuex5个核心概念

state：存储数据

mutations：更新数据方法

actions：调用mutations方法，更新state数据

getters：对state中的数据进行预处理

modules：模块化vuex

例.以下选项中不属于vuex中的属性？D

A. state

B.getters

C.actions

D.init

16.vue生命周期阶段

beforeCreate创建之前 created创建完成

beforeMount渲染之前 mounted渲染完成

beforeUpdate数据更新前 update更新完毕

beforeDestory 实例销毁之前 Destory实例销毁后

17.计算属性和watch的区别

computed计算属性是用来声明式的描述一个值依赖了其它的值。当你在模板里把数据绑定到一个计算属性上时，Vue 会在其依赖的任何值导致该计算属性改变时更新 DOM。这个功能非常强大，它可以让你的代码更加声明式、数据驱动并且易于维护。 

watch监听的是你定义的变量,当你定义的变量的值发生变化时，调用对应的方法。

就好在div写一个表达式name，data里写入num和lastname,firstname,在watch里当num的值发生变化时，就会调用num的方法，方法里面的形参对应的是num的新值和旧值，

而计算属性computed,计算的是Name依赖的值,它不能计算在data中已经定义过的变量。

---

二、填空

1. 脚手架理解作用安装（141）

脚手架与SPA：vue脚手架写法为vue-cli，工程化项目时使用的模板为webpack。

2.路由懒加载使用（158）

懒加载也叫延迟加载，即在需要的时候进行加载，随用随载在单页应用中，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，延时过长，不利于用户体验。

运用懒加载可以将页面进行划分，按需加载页面，可以分担首页所承担的加载压力，减少加载用时。

懒加载的方式：

（1）结合Vue的异步组件和Webpack的代码分析。

（2）AMD写法

（3）在ES6中，可以有更加简单的写法来组织Vue异步组件和Webpack的代码分割。

3.springboot配置文件yml文件和properties作用（235）

在springboot项目中我们经常看到默认生成的application.properties文件，其实yml文件作用和它一样，他们都是用来修改一些默认的配置值。如Mysql的用户名，密码等。

yml写法：

1）每一个等级用冒号分隔，然后空行，以空格的缩进程度来控制层级关系，空格个数不重要，注意不能使用Tab符号。properties文件每一个点为一级。

2）冒号后面为值时，需要用一个空格隔开。

 1. yml通过缩进来控制父子关系  

 2. 属性和值之间通过半角的冒号 + 空格 来间隔（每个k的冒号后面一定都要加一个空格；）

 3. 在properties文件中是以”.”进行分割的， 在yml中是用”:”进行分割;

例子：

application.properties

eureka.instance.hostname=localhost

eureka.client.registerWithEureka=false

eureka.client.fetchRegistry=false

application.yml

eureka:

    client:

        fetchRegistry: false

        registerWithEureka: false

    instance:

        hostname: localhost

读取顺序：Springboot项目中properites和yml都存在情况下,优先读取properties文件。

正常的情况是先加载yml，接下来加载properties文件。如果相同的配置存在于两个文件中。最后会使用properties中的配置。最后读取的优先集最高。

两个配置文件中的端口号不一样会读取properties中的端口号。

 加载顺序yml>yaml>properties,优先级properties>yaml>yml，就是properties会覆盖其他两个

加载顺序和优先级是相反的，正常的加载顺序是yml>properties，但是由于后加载的会覆盖先加载的，所以当两种文件都有的时候我们看到的是properties的执行了和yml的被覆盖了，所以优先级是properties>yml

4.Springboot异常处理（250-255）

使用@ExceptionHandler注解处理局部异常

使用@ControllerAdvice注解处理全局异常

配置SimpleMappingExceptionResolver类处理异常

5.Spring boot 安全框架（333-350）

Spring Security默认的用户名是user,Spring Security启动的时候会生成默认密码，在启动日志中可以看到

6.Springboot 整合数据库（288）

Redis可以通过配置文件中的databases修改默认数据库个数，Redis不支持自定义数据库名，Redis的多个数据库之间不是完全隔离的，flushall命令会清空所有数据库的数据。

7.接口测试工具postman（285）

8.定时器（266）

简单的定时任务可以直接通过Spring自带的task来实现，复杂的定时任务则可以通过集成的Quartz来实现。

9.Springboot整合mysql（310）

JdbcTemplate:JDBC连接数据库的工具类。

10springboot打包：项目部署，打包成jar,war（351）

Spring Boot项目可以内嵌Servlet容器，因此部署极为方便，可以直接打包成可执行Jar包部署在有Java运行环境的服务器上，也可以打包成War包并部署到外部Tomcat服务器上等。

11.前后端分离

核心思想是前端HTML页面通过Ajax调用后端的RESTful API并使用JSON数据进行交互。（354）

热部署就是在项目正在运行的时候修改代码，却不用重新启动项目。（282）4

前后端对于后端来说，不用考虑前端的布局，只需要考虑后端数据的正确性，那么在后端测试返回的JSON数据的正确性就离不开Postman工具。（282）

前后端分离：

将一个应用的前端代码和后端代码分开写；

前端只需要独立编写客户端代码，后端只需要独立编写服务端代码提供数据接口；

前端通过Ajax请求来访问后端的数据接口，将Model展示到View中；

前后端开发者，只需要提前约定好接口文档（URL、参数、数据类型...），然后分别独立开发，前端可以造假数据进行测试，完全不依赖于后端，最后完成前与后端集成即可；实现了前后端应用的解耦合，极大的提升了开发效率；

单体：前端应用+后端应用，前端写HTML，通过Ajax请求后端RESTful数据接口；

前端应用：负责数据展示，用户交互；

后端应用：负责提供数据处理接口；

不使用前后端分离的方式，会有哪些问题？

传统的Java Web开发中，前端使用JSP开发，JSP不是由后端开发者独立完成的；

前端开发写HTML静态页面，后端开发写JSP，这种开发方式效率极低；

实现技术：Spring Boot + Vue，使用Spring Boot进行后端应用开发，使用Vue进行前端应用开发

---

三、简答

1. 热部署原理（283）

深层原理是使用了两个ClassLoader，一个Classloader加载那些不会改变的类（第三方Jar包），另一个ClassLoader加载会更改的类，称为restart ClassLoader,这样在有代码更改的时候，原来的restart ClassLoader 被丢弃，重新创建一个restart ClassLoader，由于需要加载的类相比较少，所以实现了较快的重启时间。

2.vue路由（158）

SPA(single page application):单一页面应用程序，只有一个完整的页面；它在加载页面时，不会加载整个页面，而是只更新某个指定的容器中内容。 单页面应用(SPA)的核心之一是: 更新视图而不重新请求页面 ;vue-router在实现单页面前端路由时，提供了两种模式,根据mode参数来决定采用哪一种方式

3.条件渲染指令包含哪些，两者区别是什么？（56）

v-if v-show

实质本质方法的区别：vue-show本质就直标签display设为none，控制隐藏；vue-if是动态的向DOM树向添加或者删除DOM元素

编译的区别：v-show就是在控制css；v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件。

编译的条件：v-show都会编译，初始值为false，只是将display设为none，但它也编译了。v-if初始值设为false就不会编译了。

性能：v-show只能编译一次，后面其实就是控制css，而v-if不停的销毁和创建，如果需要频繁的使用，则使用v-show较好，如果在运行时，条件很少改变，如果使用v-if比较好。

4.Vue 单项数据流（95-99）

单向数据流：父级 prop 的更新会向下流动到子组件中，每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值，数据是单向的，父组件的数据传递给子组件，只能单项绑定，不可以在子组件修改父组件的数据； 双向数据绑定：数据和页面进行双向绑定，相互影响。

5.为什么在使用v-for的时候需要添加key属性？

因为vue在更新渲染dom的时候是根据新旧dom数进行对比的，使用key来给每个节点做一个唯一标识，

6.vue的router-link和a的区别

a标签：点击a标签从当前页面跳转到另一个页面，页面会重新加载，相当于打开了一个网页

router-link：不会跳转到新的页面，不会重新渲染，不像a标签一样需要重新渲染，减少了DOM性能的损耗

7.Vue 父子组件间的参数传递是如何做到的？

 父组件向子组件传值：

    1）子组件在props中创建一个属性，用来接收父组件传过来的值；

    2）在父组件中注册子组件；

    3）在子组件标签中添加子组件props中创建的属性；

    4）把需要传给子组件的值赋给该属性

  子组件向父组件传值：

    1）子组件中需要以某种方式（如点击事件）的方法来触发一个自定义的事件；

    2）将需要传的值作为$emit的第二个参数，该值将作为实参传给响应事件的方法；

    3）在父组件中注册子组件并在子组件标签上绑定自定义事件的监听。

---

四、vue经典案例

1、⾛马灯

<body>
<div id='app'>
 <button @click="start">浪起来</button>
 <button @click="stop">低调</button>
 <h3>{{title}}</h3>
</div>
</body>

<script>
const vm = new Vue({
 el:"#app",
 data:{
 title:"不要浪，别团",
 Interva: null
 },
 methods: {

 start(){
 clearInterval(this.Interva)
 console.log(this.title.substr(0,1));
 console.log(this.title.substring(0, 1));
 this.Interva = setInterval(()=>{
 this.title = this.title.substr(1) + this.title.substring(0,1);
 },300)
 },

 stop(){
 clearInterval(this.Interva);
 }
 }
 })
</script>

2、简单计算器

<body>

 <div id="app">

 <input type="text" v-model='num1'>

 <select v-model='opration'>

 <option value="+">+</option>

 <option value="-" selected>-</option>

 <option value="*">*</option>

 <option value="/">/</option>

 </select>

 <input type="text" v-model="num2">

 <button @click="calc">=</button>

 <span style="background-color: aqua;">{{sum}}</span>

 </div>

</body>

<script>

 const vm = new Vue({

 el: '#app',

 data: {

 num1: 0,

 opration: "-",

 num2: 0,

 sum: 0

 },

 methods: {

 calc() {

 this.num1 = Number(this.num1);

 switch (this.opration) {

 case "+":

 this.sum = this.num1 + this.num2;

 break;

 case "-":

 this.sum = this.num1 - this.num2;

 break;

 case "*":

 this.sum = this.num1 * this.num2;

 break;

 case "/":

 this.sum = this.num1 / this.num2;

 break; }

 } }

 })

</script>

3、循环渲染下列数据，展⽰数据的名字。点击这--⾏能够alert出数据的名字。顶部有搜索框，后⾯有个搜索按钮，点击搜索按钮可以按照输⼊的内容检索列表。 

<div id="app">

 {{title}}

 <ul>

 <!-- i为索引 item为内容 -->

 <input type="text" v-model="item1">

 <button @click="search">检索</button>

 <li v-for="(item,i) in list" @click="show(item.name)" v-show="flag">id：{{item.id}} ----值：{{item.name}}</li>

 </ul>

 <ul>

 <li v-for="(item,i) in list1">id：{{item.id}} ----值：{{item.name}} </li>

 </ul>

 </div>

</body>

<script>

 const vm = new Vue({

 el: "#app",

 data: {

 list: [{ id: 3, name: "张三丰" },

 { id: 5, name: "张⽆忌" },

 { id: 13, name: "杨逍" },

 { id: 33, name: "殷天正" },

 { id: 12, name: "赵敏" },

 { id: 97, name: "周芷若" }],

 list1: [],

 item1: null,

 flag:true

 },

 methods: {

 show(name) {

 alert(name);

 },

 search() {

 this.list1 = this.list.filter(item => {

 return item.name == this.item1;

 })

 if(this.list1.length==0){

 this.flag = true;

 }else{

 this.flag = false; }

 } }

 })

</script>

---

开卷，单选20（30分），填空26（26分），问答3（18分），编程1（26分）

记录一下开卷考完小结知识点，不太全面。