java前端面试知识 java前端开发面试

转载

mob64ca14089531 2023-08-16 04:20:44

文章标签 java前端面试知识 easyui javascript jquery Vue 文章分类 Java 后端开发

一、jQuery时代

二、前后端分离

今天给大家稍微整理了一下，前端的知识有vue组件传参、vuex作用与配置、jquery常用方法、easyui表单组件等...，以及相关的面试题，希望即将面试的朋友们看了后能有帮助。

一、jQuery时代

1.HTML 网页结构

2.css 网页样式

3.JavaScript 网页特效（请参照官方文档）

4.nodejs前端运行环境
4.1 nodejs介绍
Node.js是一个基于Chrome V8引擎的[JavaScript运行环境]。 Node.js使用了一个事件驱动、非阻塞式I/O 的模型。
Node.js是一个让JavaScript运行在服务端的开发平台，它让JavaScript成为与PHP、Python、Perl、Ruby等服务端语言平起平坐的脚本语言。nodejs让javascript不再局限于放在html的嵌入式脚本，同时可以作为服务端开发的语言。
javascript和java除了在名称上优点类型，没有半毛钱关系
nodejs是JavaScript运行时环境，JEE是java的运行时环境。
4.2 npm是什么
npm作用很类似与maven的作用
简单的说，npm就是nodejs的包管理工具，是nodejs package manager的简称。
通俗的讲述npm的作用：
为啥我们需要一个包管理工具呢？因为我们在Node.js上开发时，会用到很多别人写的JavaScript代码。如果我们需要使用别人写的某个包，每次都根据名称搜索一下官方网站，下载代码，解压，再使用，非常繁琐。于是一个集中管理的工具应运而生：大家都把自己开发的模块打包后放到npm官网上，如果要使用，直接通过npm安装就可以直接用，不用管代码存在哪，应该从哪下载。
更重要的是，如果我们要使用模块A，而模块A又依赖于模块B，模块B又依赖于模块X和模块Y，npm可以根据依赖关系，把所有依赖的包都下载下来并管理起来。否则，靠我们自己手动管理，肯定既麻烦又容易出错。

问题一：你的前端功底如何？

答：整体还行。大部分样式能写，盒子模型中上下边距、左右浮动浮动、定位问题基本上能解决。但是浏览器兼容等样式就有所欠缺了。

问题二：jQuery js库 ajax如何设置同步？属性设置有哪些？

可以通过ayanc：false设置同步；ayanc这个单词是异步的意思，默认值为ture（异步的），如果把它改为false就代表是同步。

例：

最终弹出num结果为6

var num = 0;
$.ajax({
    url:
    async:false,//同步
    success:function(data){
        ....
        num = data.num; //6


    },
    data:
    datatype:
})
alert(num);

5.jQuery常用的方法：
1、show()；显示标签体
2、hide()；隐藏标签体
2、text()；获取和设置文本节点
3、css()；获取和设置样式
4、val()；获取和设置value属性
5、attr()；获取和设置属性值，例如src
6、get（index）取得其中一个匹配的元素。index表示取得第几个匹配的元素。
7、append（content）向每个匹配的元素内部追加内容。
8、html（）/html（var）取得或设置匹配元素的html内容。
9、find("选择器") 搜索所有与指定表达式匹配的元素。
10、ajax（[options]）通过http请求加载远程数据。
11、get（url，[data]，[callback]，[type]）通过远程http get请求载入信息。
12、post（url,[data],[callback],[type]）通过远程http post请求载入信息。

6.Bootstrap 前端快速布局框架

7.easyui 后端管理界面组件式开发框架

8.layui 后端管理界面组件式开发框架（请参照官方文档）

常用组件：
1.布局组件（请参照官方文档）
2.表单控件
easyui表单处理提交响应
$('#ff').form('submit', { success: function(data){ var data = eval（data); if(data.success){ alert(data.message) } } });
layui触发submit提交
form.on('submit(*)', function(data){ console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象 console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回 console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value} return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。 });
3.tree控件（展示菜单）4.tabs控件（选项卡） 5.table控件（数据表格）6.window窗体控件（以上内容省略，请参照官方文档）

二、前后端分离

1.vue+Elementui

概念：渐进式框架 mvvm模型：model，view，ViewModel(虚拟dom)

虚拟dom的好处：让开发人员只需要关注数据，而不需要关注页面元素的渲染

vue的生命周期
初始化默认调用的钩子函数：beforeCreate、created、beforeMount，mounted
//初始化时调用 new Vue( ele:'el', data(){ return {}; } )
完整的生命周期：beforeCreate、created、beforeMount，mounted，beforeUpdate，updated，beforeDestroy，destroyed
四个带before的：beforeCreate创建前、beforeMount挂载、beforeUpdate修改前、beforeDestroy销毁前
四个带不带before的：created初始化时、mounted点击时、updated修改、destroyed销毁
常用指令
数据数据双向绑定：v-model：数据名属性绑定：v-bind:属性事件定义：v-on:事件名

问题一：v-if与v-show的区别？

v-if没有网页结构，打开浏览器页面的f12看不到；v-show有网页结构，看不到的原因是因为display:none

组件传参父 -> 子

注意：props定义属性时采用的是驼峰命名法，而在html中使用时需要对应的变为短横线命名法！!

<div id="app">
     <!--子组件到父组件-->
     <div>
             <!-- 注意此处将定义props时的驼峰命名法，变为了短横线命名法 !!! -->
             <button-counter title-desc="测试" />
     </div>
</div>
var vm = new Vue({
    el: '#app', 
    data: {
        ts: new Date().getTime()
    },

    //对于自定义的button-counter组件, Vue实例为父组件
    //在父组件中定义一个test方法,子组件调用该方法
    methods: {
        clickTest: function(msg) {
            console.log("test: "+ msg);
        }
    },

    //局部自定义组件
    components: {

        //组件名: {配置项}
        'button-counter':  {

            //用来传值的自定义属性
            //注意此处使用驼峰命名法 !!!
            props:['titleDesc'],

            //模板,模板中写的html代码,在其中可以使用{{}},及指令等vue元素
            template: '<button @click="doClick">{{titleDesc}}：局部组件，计数:{{count}}</button>',

            //注意：在自定义的组件中需要使用函数来定义data
            data: function() {
                return {
                    count: 0
                }
            },

            //定义响应事件函数
            methods: {
                doClick: function() {
                    //注意此处this的作用返回是自定义组件,而不是上面声明的vue实例.
                    //注意事件名使用短横线命名方式
                    this.count ++;
                    console.log(this.titleDesc);
                }
            }
        }
    }
});

当一个值被传递给 prop 时，它将成为该组件实例上的一个属性。该属性的值可以像其他组件属性一样，在模板和组件的 this 上下文中访问。

子 -> 父

触发事件：$emit(eventName, 参数...) 注意：事件名必须用短横线命名方式。

<div id="app">
     <!--子组件到父组件-->
     <div>
         <button-counter v-on:click-test="clickTest"/>
     </div>
</div>
var vm = new Vue({
    el: '#app',
    data: {
        ts: new Date().getTime()
    },

    //对于自定义的button-counter组件, Vue实例为父组件
    //在父组件中定义一个test方法,子组件调用该方法
    methods: {
        clickTest: function(msg) {
            console.log("test: "+ msg);
        }
    },

    //局部自定义组件
    components: {

        //组件名: {配置项}
        'button-counter':  {

            //用来传值的自定义属性
            props:['title'],

            //模板,模板中写的html代码,在其中可以使用{{}},及指令等vue元素
            template: '<button @click="doClick">{{title}}：局部组件，计数:{{count}}</button>',

            //注意：在自定义的组件中需要使用函数来定义data
            data: function() {
                return {
                    count: 0
                }
            },

            //定义响应事件函数
            methods: {
                doClick: function() {
                    //注意此处this的作用返回是自定义组件,而不是上面声明的vue实例.
                    //注意事件名使用短横线命名方式
                    this.$emit("click-test","hello vue");
                }
            }
        }
    }
});

组件路由

1.定义组件 Vue.component(组件名, 配置选项)

<div id="app">
    <div>
        <button-counter title="测试"/>
    </div>
</div>

<script>
var vm = new Vue({
    el: '#app',
    data: {
        ts: new Date().getTime()
    }
    
//全局组件
Vue.component('button-counter', {

    //用来传值的自定义属性
    props:['title'],
    
    //模板,模板中写的html代码,在其中可以使用{{}},及指令等vue元素
    template: '<button @click="doClick">{{title}}: 全局组件，点击计数器:{{count}}</button>',

    //注意：在自定义的组件中需要使用函数来定义data
    data: function() {
        return {
            count: 0
        }
    },
    
    //定义响应事件函数
    methods: {
        doClick: function() {
            //注意此处this的作用返回是自定义组件,而不是上面声明
            //的vue实例.
            this.count++;
        }
    }
    });

}); 
</script>

2.定义路由关系

//定义路由，"/"代表根路径，路由中可以使用name属性，一遍情况不建议使用
var routes = [
    {path: '/home',component: Home},
    {path: '/about',component: About}
];

3.获取路由对象

//创建路由器实例
const router = new VueRouter({
    routes: routes
});

4.挂载vue实例

//创建和挂载根实例 new Vue(router)
var vm = new Vue({
    //el: '#app',
    //将路由放入vue实例
    router: router,
    data: {
        ts: new Date().getTime()
    }
}).$mount("#app");

5.router-link 触发事件

<router-link to="跳转到目标路由"></router-link>

6.router-view 定义锚点跳转到当前页面中指定的位置

<router-view></router-view>

问题二：前端与后端的区别
nodejs：前端的运行环境，相当于后端tomcat npm：前端的包管理工具，相当于后台maven
axios：get/post的区别
传参形式不一样
//get传参 this.get(url,{param:from}).then(e=>{ }).catch(e=>{ }); //post传参 this.post(url,form)

vuex的作用相当于前端的数据库

java前端面试知识 java前端开发面试_Vue

mutations.js 同步修改变量值

const mutations = {

  //state，即state.js中定义的state，借此可以访问state中定义的全局变量
  //payload: 载荷,保存传递参数的容器
  setLeftAsideState: (state, payload) => {
    //通过载荷为全局参数赋值，相当于setter
    state.LeftAsideState = payload.LeftAsideState;
  },

  //设置人员名称，用于演示异步
  setPersonName: (state, payload) => {
    state.PersonName = payload.PersonName;
  },


  setJwtToken: (state, payload) => {
    state.jwt = payload.jwt;
  }

}
export default mutations

state.js 存储变量

const state = {
  LeftAsideState: 'open',
  
  PersonName:'张飞',
  
  jwt:null //存储变量
}
export default state

actions.js 异步修改变量值

const actions = {
//异步修改Asyn
  setPersonNameAsyn: function(context, payload) {
    setTimeout(function() {
      context.commit('setPersonName', payload);
    }, 3000);

  },

  /*
   * 在actions.js中无法直接获取vue实例的this对象，但需要该对象来获取axios
   * 对象，以便于发送ajax请求，可以通过payload参数由调用者传入vue实例的this
   * 对象。
   */
  getDataFromApiAsyn: function(context,payload) {

    let url = window.vm.axios.urls.VUE_ASYN_REQ;

    window.vm.axios.post(url, {
      name: payload.PersonName
    }).then(resp => {

      //通过resp响应对象获取返回的数据，并赋予payload
      payload.PersonName = resp.data.data;

      //提交一个mutation，用于设置state中的参数。
      context.commit('setPersonName', payload);
    }).catch(error => {

    })
  }

}
export default actions

getters.js 获取变量值

const getters = {

  //参数state即为stroe中存放的state，在state.js定义
  getLeftAsideState: function(state) {
    return state.LeftAsideState;
  },

  //定义获取人员名称的方法
  getPersonName: function(state) {
    return state.PersonName;
  },

  getJwtToken: function(state) {
    return state.jwt;
  }

}
export default getters

#问题三：jwt令牌的运行流程
概念：管理token令牌的解决方案
1.用户发送登录请求，前端Nginx跨域访问后端，后端进行用户的身份认证后，将用户名密码转换成jwt串；将jwt串放入响应头 response header中，响应给前端。
2.前端vue项目有响应拦截器，拦截jwt串，将内容存储到vuex；
3.第二次发送请求，会被请求拦截器所拦截；从vuex中获取到jwt串，放入到请求头 request header中，带到后台服务器中。
4.后台服务器中有过滤器能够获取并且解析jwt串，会得到用户信息。 5.判断用户信息，如果用户信息有效就放行；反之则拦截；

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。