首页 前端知识 j2ee期末考试总结

j2ee期末考试总结

2024-05-06 09:05:49 前端知识 前端哥 363 464 我要收藏

目录

一、选择题

二、填空

三、简答

四、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分)

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

转载请注明出处或者链接地址:https://www.qianduange.cn//article/7137.html
标签
j2ee
评论
发布的文章

HTML5-新增表单元素

2024-05-10 08:05:59

Dayjs 的一些常用方法

2024-05-10 08:05:59

Howler.js HTML5声音引擎

2024-05-10 08:05:59

前端攻城狮HTML5自查手册

2024-05-10 08:05:51

JavaScript 基础入门

2024-05-10 08:05:41

HTML5新手入门指南

2024-05-08 10:05:28

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!