ES6
-
列举常用的ES6特性：
-
箭头函数需要注意哪些地方？
-
let、const、var
-
拓展：var方式定义的变量有什么样的bug？
-
Set数据结构
-
拓展：数组去重的方法
-
箭头函数this的指向。
-
手写ES6 class继承。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
微信小程序
-
简单描述一下微信小程序的相关文件类型?
-
你是怎么封装微信小程序的数据请求？
-
有哪些参数传值的方法？
-
你使用过哪些方法，来提高微信小程序的应用速度？
-
小程序和原生App哪个好？
-
简述微信小程序原理？
-
分析微信小程序的优劣势
-
怎么解决小程序的异步请求问题？
其他知识点面试
-
webpack的原理
-
webpack的loader和plugin的区别？
-
怎么使用webpack对项目进行优化?
-
防抖、节流
-
浏览器的缓存机制
-
描述一下二叉树, 并说明二叉树的几种遍历方式?
-
项目类问题
-
笔试编程题：
最后
技术栈比较搭，基本用过的东西都是一模一样的。快手终面喜欢问智力题，校招也是终面问智力题，大家要准备一下一些经典智力题。如果排列组合、概率论这些基础忘了，建议回去补一下。
<el-button style=“width:100%;” type=“primary” @click=“submitForm(‘ruleForm’)”>提交
<el-link type=“success” @click=“toLogin”>用户登录
忘记密码
.配置路径 index.js
import Vue from ‘vue’
import Router from ‘vue-router’
import HelloWorld from ‘@/components/HelloWorld’
import Login from ‘@/views/Login’
import Reg from ‘@/views/Reg’
Vue.use(Router)
export default new Router({
routes: [{
path: ‘/’,
name: ‘Login’,
component: Login
},
{
path: ‘/Reg’,
name: ‘Reg’,
component: Reg
},
{
path: ‘/Login’,
name: ‘Login’,
component: Login
},
]
})
界面如下，点击登录会跳转到登录界面
二、实现登录功能
========
左键File，点击import，选择箭头所示Existing Maven Projects,点击Next
Browse选择要导入的项目
导入成功后，修改mysql的版本号
在db.properties中修改为自己的mysql用户名和密码，以及放置表的数据库名
运行项目如下
将api文件导入spa项目的src中
action.js
/**
-
对后台请求的地址的封装，URL格式如下：
-
模块名_实体名_操作
*/
export default {
‘SERVER’: ‘http://localhost:8080/T216_SSH’, //服务器
‘SYSTEM_USER_DOLOGIN’: ‘/vue/userAction_login.action’, //用户登陆
‘SYSTEM_USER_DOREG’: ‘/vue/userAction_reg.action’, //用户注册
‘SYSTEM_MENU_TREE’: ‘/vue/treeNodeAction.action’, //左侧树形菜单加载
‘SYSTEM_ARTICLE_LIST’: ‘/vue/articleAction_list.action’, //文章列表
‘SYSTEM_ARTICLE_ADD’: ‘/vue/articleAction_add.action’, //文章新增
‘SYSTEM_ARTICLE_EDIT’: ‘/vue/articleAction_edit.action’, //文章修改
‘SYSTEM_ARTICLE_DEL’: ‘/vue/articleAction_del.action’, //文章删除
‘SYSTEM_USER_GETASYNCDATA’: ‘/vue/userAction_getAsyncData.action’, //vuex中的异步加载数据
‘getFullPath’: k => { //获得请求的完整地址，用于mockjs测试时使用
return this.SERVER + this[k];
}
}
http.js
/**
- vue项目对axios的全局配置
*/
import axios from ‘axios’
import qs from ‘qs’
//引入action模块，并添加至axios的类属性urls上
import action from ‘@/api/action’
axios.urls = action
// axios默认配置
axios.defaults.timeout = 10000; // 超时时间
// axios.defaults.baseURL = ‘http://localhost:8080/j2ee15’; // 默认地址
axios.defaults.baseURL = action.SERVER;
//整理数据
// 只适用于 POST,PUT,PATCH，transformRequest` 允许在向服务器发送前，修改请求数据
axios.defaults.transformRequest = function(data) {
data = qs.stringify(data);
return data;
};
// 请求拦截器
axios.interceptors.request.use(function(config) {
// var jwt = window.vm.$store.getters.getJwt;
// config.headers[‘jwt’] = jwt;
return config;
}, function(error) {
return Promise.reject(error);
});
// 响应拦截器
axios.interceptors.response.use(function(response) {
// debugger;
// var jwt = response.headers[‘jwt’];
// if(jwt){
// window.vm.$store.commit(‘setJwt’,{jwt:jwt});
// }
return response;
}, function(error) {
return Promise.reject(error);
});
// // 路由请求拦截
// // http request 拦截器
// axios.interceptors.request.use(
// config => {
// //config.data = JSON.stringify(config.data);
// //config.headers[‘Content-Type’] = ‘application/json;charset=UTF-8’;
// //config.headers[‘Token’] = ‘abcxyz’;
// //判断是否存在ticket，如果存在的话，则每个http header都加上ticket
// // if (cookie.get(“token”)) {
// // //用户每次操作，都将cookie设置成2小时
// // cookie.set(“token”, cookie.get(“token”), 1 / 12)
// // cookie.set(“name”, cookie.get(“name”), 1 / 12)
// // config.headers.token = cookie.get(“token”);
// // config.headers.name = cookie.get(“name”);
// // }
// return config;
// },
// error => {
// return Promise.reject(error.response);
// });
// // 路由响应拦截
// // http response 拦截器
// axios.interceptors.response.use(
// response => {
// if (response.data.resultCode == “404”) {
// console.log(“response.data.resultCode是404”)
// // 返回 错误代码-1 清除ticket信息并跳转到登录页面
// // cookie.del(“ticket”)
// // window.location.href=‘http://login.com’
// return
// } else {
// return response;
// }
// },
// error => {
// return Promise.reject(error.response) // 返回接口返回的错误信息
// });
export default axios;
引入main.js配置
import axios from ‘@/api/http’ #vue项目对axios的全局配置
import VueAxios from ‘vue-axios’
Vue.use(VueAxios,axios)
前后端数据交互开始
src/views/Login.vue
用户登录
<el-button style=“width:100%;” type=“primary” @click=“submitForm”>提交
<el-link type=“success” @click=“toReg”>用户注册
忘记密码
submitForm() {
let url = this.axios.urls.SYSTEM_USER_DOLOGIN;
this.axios.post(url, this.ruleForm).then((resp) => {
console.log(resp);
if (resp.data.code == 1) {
this.$message({
message: resp.data.msg,
type: ‘success’
});
} else {
this.$message({
message: resp.data.msg,
type: ‘warning’
});
}
}).catch(function(error) {
console.log(error);
});
}
登录失败
登录成功
三、This 指针带来的变量污染
=====================
登录方法中用到箭头函数，由于this.message和this.axios中的this不是同一个，this的指向是由所在函数的调用方式决定的，message存在于全局中，所以引用箭头函数
submitForm() {
let url = this.axios.urls.SYSTEM_USER_DOLOGIN;
this.axios.post(url, this.ruleForm).then((resp) => {
console.log(resp);
if (resp.data.code == 1) {
this.$message({
message: resp.data.msg,
type: ‘success’
});
} else {
this.$message({
message: resp.data.msg,
type: ‘warning’
});
}
}).catch(function(error) {
console.log(error);
});
}
将this在上面定义也可以解决
四、ajax 跨域问题
===============
协议+IP+port+项目
跨域产生的原因：上面四个中有一个不同，都会产生
凡是错误中出现了CORS就是 跨域问题
解决，设置允许访问的ip，设置允许访问的请求方式
web.xml
corsFilter
com.zking.vue.util.CorsFilter
corsFilter
/*
CorsFilter.java
// Access-Control-Allow-Origin就是我们需要设置的域名
// Access-Control-Allow-Headers跨域允许包含的头。
// Access-Control-Allow-Methods是允许的请求方式
resp.setHeader(“Access-Control-Allow-Origin”, “*”);// *,任何域名
resp.setHeader(“Access-Control-Allow-Methods”, “POST, GET, PUT, DELETE”);
package com.zking.vue.util;
import java.io.IOException;
import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
-
配置tomcat允许跨域访问
-
@author Administrator
*/
public class CorsFilter implements Filter {
@Override
public void init(FilterConfig filterConfig) throws ServletException {
}
// @Override
// public void doFilter(ServletRequest servletRequest, ServletResponse
// servletResponse, FilterChain filterChain)
// throws IOException, ServletException {
// HttpServletResponse httpResponse = (HttpServletResponse) servletResponse;
//
// // Access-Control-Allow-Origin就是我们需要设置的域名
// // Access-Control-Allow-Headers跨域允许包含的头。
// // Access-Control-Allow-Methods是允许的请求方式
// httpResponse.addHeader(“Access-Control-Allow-Origin”, “*”);// *,任何域名
// httpResponse.setHeader(“Access-Control-Allow-Methods”, "POST, GET, PUT,
// DELETE");
// // httpResponse.setHeader(“Access-Control-Allow-Headers”, "Origin,
// // X-Requested-With, Content-Type, Accept");
//
// // 允许请求头Token
// httpResponse.setHeader(“Access-Control-Allow-Headers”,
// “Origin,X-Requested-With, Content-Type, Accept, Token”);
// HttpServletRequest req = (HttpServletRequest) servletRequest;
// System.out.println(“Token=” + req.getHeader(“Token”));
// if(“OPTIONS”.equals(req.getMethod())) {
// return;
// }
//
//
// filterChain.doFilter(servletRequest, servletResponse);
// }
@Override
public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain)
throws IOException, ServletException {
HttpServletResponse resp = (HttpServletResponse) servletResponse;
HttpServletRequest req = (HttpServletRequest) servletRequest;
// Access-Control-Allow-Origin就是我们需要设置的域名
// Access-Control-Allow-Headers跨域允许包含的头。
// Access-Control-Allow-Methods是允许的请求方式
resp.setHeader(“Access-Control-Allow-Origin”, “*”);// *,任何域名
resp.setHeader(“Access-Control-Allow-Methods”, “POST, GET, PUT, DELETE”);
文末
我一直觉得技术面试不是考试，考前背背题，发给你一张考卷，答完交卷等通知。
首先，技术面试是一个 认识自己 的过程，知道自己和外面世界的差距。
更重要的是，技术面试是一个双向了解的过程，要让对方发现你的闪光点，同时也要 试图去找到对方的闪光点，因为他以后可能就是你的同事或者领导，所以，面试官问你有什么问题的时候，不要说没有了，要去试图了解他的工作内容、了解这个团队的氛围。
前端面试题汇总
JavaScript
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
性能
linux
前端资料汇总
1111
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
