Recently, the epidemic has improved a lot, and everyone’s heart has also begun to be restless, with the intention of job-hopping. Recently, I have interviewed several partners every day, just in case there is no urgent need. Read too many resumes, feel can be divided into three kinds, true false resume, false resume, true resume. Then how do I ask to wear these resumes? Here is a share for you.

First of all, I would like to make a few complaints. At the beginning of leading the team, I managed to bring a friend with me, but the friend will leave after one year. Initially will complain colleagues are not loyal enough, now very calm, the so-called loyalty is the betrayal of chip is not enough. Recently, I feel that I have enough chips, and I also move my mind to job-hopping. It coincides with the company’s annual recruitment, so NOW I am constantly being interviewed and interviewed. I have had a lot of interviews, and I would like to share my feelings with you.

The following main share, I encountered a fake resume in the interview process, want to fake partners can have a look, so as not to step on the pit.

I. Work experience

Many job seekers prefer to lie in this regard. There are two main types:

1. Extend work experience

Late last year, when the company was looking for an experienced front end to set up another r&d department, it interviewed a man it said had nine years of experience. I had been with one company for 4 years and the other company for 5 years. I felt very stable and the technology stack was very comprehensive. I was very excited, thinking that the company was finally willing to spend money to hire a big head.

The interview,

  • Me: How many years have you been using the vue.js framework?
  • He: Eight years.
  • I was confused and asked him again, “So you started using Vue in 2012?” .
  • He: Well, that’s right.
  • I still don’t give up, ask again, that what you just started to use is Vue several?
  • He: Vue2, of course.

At this point in the heart of ten thousand grass mud horse pentium, can also be reliable point, 2012 Vue has not come out. The interview was over as soon as it had begun.

Here I would like to say:

To fakery trouble to understand the development history of each front-end stack!!Copy the code

A brief history of Vue:

  • On July 28, 2013, Yubrook first submitted code for vue.js on GitHub, which was not called vue.js at the time.
  • On December 8, 2013, Yu Stream released version 0.6.0 on GitHub and officially renamed the project vue.js.
  • On October 27, 2015, Vue. Js was released in version 1.0.0.
  • On October 1, 2016, Vue. Js ushered in version 2.0.0 and entered the era of 2.

The history of other technology stacks can be found in git commit logs. Such as the Vue

2. Combine work experience

If you combine your work experience, you may change jobs frequently, which may make you feel unstable. The idea is good, indeed, under equal conditions, I will consider each job experience is longer.

But as you merge, keep in mind that your project history should be aligned with your work experience.Copy the code

In April, I just interviewed a young sister with 3 years of work experience. She is very beautiful and the first impression is very good.

Work experience:

  • 2016.05.10-2018.04.20 XX Company Web front-end engineer
  • 2018.04.24-2019.03.29 XX Company Web front-end engineer
  • August, 2019 – Present Xx Company Web front-end engineer

At that time, I was very interested in her early project experience. This project was developed with Vue and Element was used as a component library. Its main function was map application and large data screen, which was close to a project to be launched by the company. It says she did it all on her own. It asks her a lot of things. I feel quite good and reliable. Finally, I want to confirm the time limit of this project.

  • Me: When did the project start and how long did it take to complete
  • She: It started in March 2018 and took over four months.
  • March 2018, the resume says May 2018, and I’ll repeat what she said, started in March 2018 and took more than four months.
  • She: Well, the project had a lot of features. It took more than four months from development to launch. Then she described the process of the project to me.
  • I: the beginning of March, the line in July, is not very driven, midway is not very often overtime.
  • Her; I often work overtime, focusing on projects.

Ok, I have confirmed with her several times that this project experience is not in line with her work experience. Although she is very suitable, I finally passed her. I am not sure whether her work experience is true or not, whether she has changed jobs frequently before.

Ii. Project experience

When writing project experience, many friends are used to taking things done by others as their own and adding them to their own project experience, believing that this will enrich their own project experience.

If you would wear its crown, you must bear its weight. He that would hold a rose must bear its wound.

If you take possession of someone else’s property without fully understanding it, you will be hurt yourself. Here’s an interview to illustrate.

In the middle of April, I interviewed a friend with two years of work experience. I have a rich project experience. I have completed 9 projects in just two years, and I am in charge of many of them.

I began to communicate with him one by one.

1. How to configure Vue routing

He thought for a moment before answering, “Import Vue and Vue Router first, and then install the route with vue.use.”

I heard it and then I said well, you write it down first.

import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router);
Copy the code

I looked at it and said, “This is installing the Vue Router. You go on writing.” This time he was thinking a little too long, so I said, “I’ll give you three minutes to think.” He wrote with some stumbling

const router = new Router({
    mode: 'history',
    routes:[
        {
            path: '/a',
            component: () =>import('page/a'),
        }
    ]
});
Copy the code

Okay, it’s like squeezing toothpaste. I reassured him, “Why introduce component A with () =>import(‘page/a’)?”

“Write this to load the component lazily.”

“What is lazy loading, what are the benefits, where is it reflected?”

“Lazy loading is the process of loading a component’s resources only when it is about to be displayed, which reduces the first screen load time.”

Ok, I would have gone on to ask, “Why is it possible to write a component that loads its resources only when it is displayed?” Forget it, webpack is involved.

I continued, “If my project is deployed under xxx.com/test/. How should the route be configured?”

After hesitating for a long time, I reminded him: “Have you ever used the base option? How do you usually configure this option?”

“It is automatically generated when you build a project with the Vue Cli. It is generally the default.”

Okay, I’ll just give him the answer; “Set base to /test/.” I have nothing to do this afternoon anyway, so let’s keep talking. Continue to ask: “Then after configuring the route, how to import into the project use?”

He went on writing on the paper

const router = new Router({
    mode: 'history',
    routes:[
        {
            path: '/a',
            component: () =>import('page/a'),
        }
    ]
});
const  vm = new Vue({
    el:"#app",
    router:router,
    render: h => h(App)
})
Copy the code

“Do you normally configure routes in main.js? Configure routing in a separate file.

“Write the route to the index.js file in the SRC /router folder and export it.”

export default router
Copy the code

Then write to main.js

import router from 'src/router'
const  vm = new Vue({
    el:"#app",
    router:router,
    render: h => h(App)
})
Copy the code

“In index.js, why import router from ‘SRC /router’ instead of import router from’ SRC /router/index’?” I asked.

He’s prevaricating again. Okay, I admit I’m being a little tricky.

I just told him the answer; “Since webpack’s resolve configuration has mainFiles, which configures the file name to use when resolving the directory, the default is [“index”], do not write index.”

digression

As an aside, why import Vue from ‘Vue ‘; import Router from ‘vue-router’; This introduces Vue and Vue Router. Aren’t they in node_modules?

The modules option in Webpack’s resolve configuration tells Webpack which directory to search for when parsing modules. The default is [“node_modules”], so node_modules is used directly.

The resolve.mainFields configuration tells us that when importing modules from node_modules, this option will determine which fields to use in package.json to import the module. The default is [“module”, “main”].

In the Vue source code, package.json, there is this configuration

"main": "dist/vue.runtime.common.js",
 "module": "dist/vue.runtime.esm.js",
Copy the code

So import Vue from ‘Vue ‘, and actually load dist/vue.runtime.esm.js, which has export default Vue at the end; “, which brings Vue into our project.

Back to the topic

“It doesn’t matter. You need to configure the router option in a separate file. How do you do that?”

He wrote it quickly this time, so it looks like he knows how to do it. Create a routes file in the SRC /router folder.

const routes=[
    {
        path: '/a',
        component: () =>import('page/a'),
    }
]
export default routes
Copy the code

Then in the index.js file

import routes from './routes'
const router = new Router({
    mode: 'history',
    routes: routes
});
Copy the code

It seems that the basic configuration of the routing of the elder brother will still be able to ask further: “how to configure the address whitelist and blacklist through routing?”

He thinks for a moment, “configure in beforeEach hook.” I nod and he continues, “Write it down.”

router.beforeEach((to,from,next) =>{ const passurl = []; const nopassurl = []; let ispass = true; if(passurl.indexOf(to.path) > -1){ ispass = true; } if(nopassurl.indexOf(to.path) > -1){ ispass = true; } if(ispass){ next(); }})Copy the code

Also ok, so-so, “that set routine by can use?”

“Yes.”

“Give you a scene, menu A under the submenu A1, submenu A2, you write the routing configuration and menu page file directory construction and
to write where.”

 - a
    - layout.vue
    - a1
        -index.vue
    -a2
        -index.vue
//layout.vue
<template>
    <router-view/>
</template>
const routes:[
    {
        path:'/a',
        component:() =>import('page/a/layout'),
        redirect: '/a/a1',
        children:[
            {
                path:'/a/a1',
                component:() =>import('page/a/a1')
            },
            {
                path:'/a/a2',
                component:() =>import('page/a/a2')
            }
        ]
    }
]
Copy the code

Well, the basic configuration does, and the last question is: “How do I configure route 404?”

The man was stunned and asked me what was: “What is route 404?”

Ok, “is to enter an address, but this address is not configured in the route, can not find the corresponding page, this case how to handle?”

He thought about it. “I don’t know. I haven’t.” I didn’t say the answer this time.

{
    path: '*',
    redirect: '/home'
}
Copy the code

* indicates the wildcard, and matches any path. Note that routes containing wildcards should be placed last, otherwise any address will jump to /home.

2. About the functions of the header menu and the sidebar menu in the home page

Usually the system menu will have multi-level menu, and the rendering data of the menu is generally from the system menu permission data, which is usually a tree structure data, of course, some back-end is lazy, directly return array structure data, you have to construct the tree structure data, how to construct can poke here.

This will involve two aspects, one is the processing of tree structure data, involving recursive functions, and the other is the use of recursive components.

And I started to ask, “Well, you’ve used recursive functions before, write one that handles tree structure data and constructs a JSON that takes the node ID as the key and value as the URL value of the node.”

After five minutes of writing, he gave up and said no.

function getUrl(data,result={}){
    data.forEach(item =>{
        result[item.id] = item.url;
        if(item.children && Array.isArray(item.children) && item.children.length){
            getUrl(item.children,result)
        }
    })
}
Copy the code

I asked again, “How about writing a method that gets the URL of the first child of the first item in the tree structure, if that node has children and continues until that node has no children?”

Write for 10 minutes, then give up.

function getUrl(data) {
    let item = data[0];
    if (item && Array.isArray(item.children) && item.children.length) {
        return getFirstUrl(item.children)
    } else {
        return item.url
    }
};
Copy the code

That’s not going to happen. I’ll just give up asking him about recursive functions.

He forced a smile to explain: “this meeting, just a little nervous now?”

I consoled him and asked, “Is the recursive component used, how it works, and what should be noticed?”

He thought for a long time, and I saw his hands shaking. He said, “Don’t be nervous. Take your time.”

“Should a recursive component be a component calling itself?

“How does that call itself?”

He said, “I forgot.”

All right, take it.

Recursive components call themselves with the name option of the component, and care should be taken to ensure that recursive calls are conditional (such as using a V-if that eventually returns false), otherwise you will get stuck in an infinite loop.

I can tell from this that he didn’t do the header menu or the sidebar menu. Some of these project experiences are probably fake.

I had nothing to do in the afternoon, so I went on to see how fake his project experience was.

3. Questions about configuring package AXIOS

“What is Axios and how is it different from Ajax?” I asked directly.

“Axios is an HTTP library based on Promises. Ajax does not support Promises, and if multiple requests are sequential, there will be callback hell.”

“How do I install Axios? How do I import Axios?”

NPM instal axios –save install, import axios from ‘axios’

“How do you encapsulate Axios? Write it down.”

import axios from 'axios'
const service = axios.create({
    timeout:3*60*1000,
    baseURL:'xxx',
})
export default service
Copy the code
import service from './axios'
export function xxx(data){
    return service.post('xxxx',data)
}
export function xxx(data){
    retruan service.get('xxxx',{params:data})
}
Copy the code

I looked at it. It was so simple. “Anything else?” he asked.

He gave me a look. Thought about it, then shook his head.

“When you log in, how do you tell the backend that you have logged in?”

“Useful Tokens and Cookies”

“How did you configure the token?”

He thought for a long time. “Put it on request.”

“Write down how to put it.”

import axios from 'axios'
const service = axios.create({
    timeout:3*60*1000,
    baseURL:'xxx',
    headers:{
        token:xxx
    }
})
export default service
Copy the code

“That login interface does not need to set the token on the request head, how do you deal with.”

Wait a minute, he shakes his head. Do you “use Axios’ blocker?”

Yes, request and Response interceptors.

“Tell me what the interceptor intercepts.”

“Request is intercepted before a request, and Response is intercepted after a request.”

“A response is intercepted after a request by then or before a catch.” I added. “Then use the request interceptor implementation to add a token to the request header. Let me write that.”

After a few strokes, he put down his pen and said, “I’ve forgotten how to write.”

All right, looks like he’s got a pretty good track record. I told him the answer.

service.interceptors.request.use(function(config){ const token = getToken(); // To get the token, if there is a setting in the request header. if (token) { config.headers.token = token; } return config; })Copy the code

He looked at it, pointed to the word interceptors, and said, “I can’t write it. That’s why I can’t.”

“Oh, that you write, how to request back data pretreatment.”

service.interceptors.response.use(function(res){
    const data = res.data;
    if (res.status == 200) {
        return data
    }
})
Copy the code

Could it be that I have forgotten the word, so I can’t write it. I’m asking, “How do you intercept a request for error?”

service.interceptors.response.use(
    function(res){
        const data = res.data;
        if (res.status == 200) {
            return data
        }
    },
    function(err){
        this.$message({
            message: err.data.msg,
            type: 'error',
            showClose: true,
        })
        return err
    }
)
Copy the code

I looked at his code and was already convinced that his project experience was bogus. “What does this mean?” I asked.

“This is a Vue instance.”

Hearing this, I did not want to continue to ask, politely said to him: “go back and wait for the news, within 2 days to give you a reply.”

Are there really only so many questions about axios configuration? Of course not. Here’s how I interviewed another candidate

Familiar with AXIos, can further encapsulate AXIOS, such as pre-request interception processing request headers, request return interception processing returning data, setting up proxies, etc.

I asked him the same question one by one and the answer was good. I quickly asked him: “How do you intercept requests on return? Write it down.” (PS: My company will require the interview on the computer)

const showErrorMessage = function(message){ vm.$message.close(); vm.$message({ message: message, type: 'error', showClose: true, }) } const response = function(res){ if(res.status == 200){ const data = res.data; const message = data.msg ? Data. MSG: 'unknown error '; If (data. Code = = 518 | | data. Code = = 519) {/ / login failure if (vm) $route. Query. Redirect) {vm. $router. Push ({path: '/ login', query:{ redirect:vm.$route.query.redirect } }) }else{ vm.$router.push({ path:'/login', query:{ redirect:encodeURIComponent(vm.$route.fullPath) } }) } }else if(data.code && data.code ! = 200){ showErrorMessage(message) } return data } } const response_err = function(){ if(err.response){ const response = err.response; const status = response.status; const message = response.data.msg ? Response.data. MSG: 'Unknown error '; Switch (status) {case 400: showErrorMessage(' Request error '); break; Case 403: showErrorMessage(' Access denied '); break; Case 404: showErrorMessage(' Resource does not exist '); break; Case 405: showErrorMessage(' request method not allowed '); break; Case 500: showErrorMessage(' Server internal error '); break; Case 503: showErrorMessage(' Failed to access server '); break; default: showErrorMessage(message); } } return Promise.reject(err); } service.interceptors.response.use(response,response_err);Copy the code

I looked at his answers, and I think they all do. Ask about the header configuration aspect.

“What does the request header need to configure in addition to token?”

“You also have to configure the Content-Type to tell the server what format I’m passing the parameter to you in, which is usually defined by the back-end interface.”

“What are the general types?”

“There are three types that are commonly used in projects.”

  • application/x-www-form-urlencodedThe default form submission format is requirednew URLSearchParamsProcess data and pass it to the back end.
  • application/jsonJSON data format, requirednew ObjectProcess data and pass it to the back end.
  • multipart/form-dataFormat used to upload files in the formnew FormDataProcess data and pass it to the back end.

“So when configuring the Content-Type, what should the back end do?”

He thought for a moment and then said, “I don’t think so.”

I continued, “What does the back end need to do if the token is configured in the header?”

“I don’t know. I don’t know.” I wonder if you configure it yourself, you should encounter these problems and the result will be cross-domain.

I continued, “Do you know what CORS cross-domain is?”

“I don’t know.”

“That you usually encounter cross domain how deal with?”

“It’s all handled by the back end.”

That’s a nice back end. Access-control-allow-headers on the backend requires “Content-Type,token”.

“So if the backend is going to be authenticated by cookies, how should it be configured?”

axios.defaults.withCredentials=true;

In fact, I really want to ask him how to configure the corresponding backend, if there is actual configuration, there is a high probability of problems. There are two back-end configurations

  • theAccess-Control-Allow-CredentialsIf this parameter is set to true, the server agrees to accept cookies.
  • Access-Control-Allow-OriginCannot be set to*, must specify an explicit domain name consistent with the requested page. Such asAccess-Control-Allow-Origin: "localhost:8037".

“What is the role of baseURL and the merging rules?”

“BaseURL is the base path to the requested address and will automatically precede the URL unless the URL is an absolute url with http:// or https://.”

“If the back end returns binary stream type data, how do you configure it to receive it? Write down”

service.post('xxx',data,{responseType:'blob'});
service.get('xxx',{params:data, responseType:'blob'})
Copy the code

“If the id returned by the back end is Number type, the accuracy is distorted, how to solve the problem?”

“Precision distortion, this backend should handle well, haven’t encountered?”

Okay? In fact, this problem will be encountered after more and more functional modules of the project. But this interviewee was a little better at axios than the previous interviewee.

This question examines many knowledge points.

  • What is precision distortion? The Number type of js has a maximum (safe value). So 2 to the 53 is 9007199254740992. If this value is exceeded, js will have inaccurate problems. This value is 16 bits.
  • How did the accuracy distortion occur? The value returned from the back end to the front end is a JSON string. By default, AXIos uses json. parse to convert the parser to JSON objects, and precision distortion occurs when json. parse parses more than 16 bits.
  • To solve this problem, use axios’s transformResponse configuration option, which allows the response data to be modified before passing it to then/catch. We can start with regular sumsreplace()Parse () to replace any value in the returned data that exceeds 16 bits into a string, which is then converted to a JSON object using json.parse ().
transformResponse: function (data) {
    data = data.replace(/"\w+":\s*\d{16,}/g, function (longVal) {
        let split = longVal.split(":");
        return split[0] + ':' + '"' + split[1].trim() + '"';
    });
    return JSON.parse(data)
}
Copy the code

4. Questions about business aspects of the project

The business aspect of the project is very general, and I usually ask questions in the following three ways.

  • If the project experience in the resume is in line with the business of the company, I will directly evaluate the business in the project experience
  • If the project experience in the resume is not very compatible with the business of the company, I will first ask you what difficulties you have encountered in these projects, and then how to solve these difficulties. Then, based on your answers, I will find a breakthrough point to ask and assess whether you meet the needs of the company.
  • If the description of the project experience in the resume is too simple to obtain effective information from it, I will simulate several scenarios based on the company’s business.

Let me give you an example of the third case. The candidate reported that he had completed several complex back-end system projects independently using Vue buckets.

Since it is a complex back-end system project, there must be a complex form. Test his ability to use data to drive page presentation.

The basic package type is determined by the package combination type. If the package combination type is regular, the basic package type is basic package. If the package combination type is one-time, the basic package type is optional. Package types include renewal package, refueling package, optional package and additional package.

The drop-down options for plan names are determined by carrier and plan type. You can add multiple package types and package names.

The format of the parameters received by the backend is

Data :{type: ",// operators: ",// packagelist:[{packageType: ",// packageName: ",// packageName IsMain: ",// whether the basic package,1 yes,0 no.}]}Copy the code

So let me write down how this works. This business scenario is very specific in the form and should be very simple if you are really doing multiple back-end system projects. I’m not going to write the answer, but you can figure out how to do that.

Third, skills

I personally think there are four levels of skill proficiency.

  • Understand: Have heard of this skill, know the concept of this technology, what it is used to achieve.
  • Familiarity: It can be used with skill documentation.
  • Proficiency: Can move away from document development and encapsulate it further.
  • Mastery: Know how this skill works and can adapt and optimize it.

These four levels, which are covered in many articles, are not much to say.

And what I want to emphasize here is,

  • Don’t use this skill without using it extensively on your projectskilledTo describe your proficiency in this skill.
  • Use cautionProficient inDescribe your proficiency in the skill, and when you use it, be sure to ask why you use it, not just how.

Write at the end

While a resume is a stepping stone, the stronger it is, the more doors it will open. But have you ever wondered how long you can hold it up during an interview if it’s too hard? I ended up shooting myself in the foot.

In my opinion, a resume is not only a stepping stone, but also a plan for your confrontation with the interviewer. Be responsible for every sentence in the resume and figure out if you can handle it. If you can’t handle it, you will expose your shortcomings to the interviewer.

Individuals do not reject fake resumes. As long as they are willing to fake, they will know all about each fake project experience and fake skills, and fake resumes will become true.

Of course, it’s best not to lie about your employment history, because it can be seen in your contributions to the Medicare system.