框架相关

原生JS虽能实现绝大部分功能，但要么就是过于繁琐，要么就是存在缺陷，故绝大多数开发者都会首选框架开发方案。现阶段较热门是React、Vue两大框架，两者工作原理上存在共通点，也存在一些不同点，对于校招来说，不需要两个框架都学得特别熟，一般面试官会针对你简历中写的框架进行提问。

在框架方面，生命周期、钩子函数、虚拟DOM这些基本知识是必须要掌握的，在学习的过程可以结合框架的官方文档

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

Vue框架

知识要点：
1. vue-cli工程
2. vue核心知识点
3. vue-router
4. vuex
5. http请求
6. UI样式
7. 常用功能
8. MVVM设计模式

React框架

知识要点：
1. 基本知识
2. React 组件
3. React Redux
4. React 路由

return new Promise(resolve => {

const accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)

commit(‘SET_ROUTES’, accessedRoutes)

resolve(accessedRoutes)

})

}

}

export default {

namespaced: true,

state,

mutations,

actions

}

• 修改store/modulds/user.js

import { login, logout, getInfo } from ‘@/api/user’

import { getToken, setToken, removeToken } from ‘@/utils/auth’

import { resetRouter } from ‘@/router’

const getDefaultState = () => {

return {

token: getToken(),

name: ‘’,

avatar: ‘’,

roles: []

}

}

const state = getDefaultState()

const mutations = {

RESET_STATE: (state) => {

Object.assign(state, getDefaultState())

},

SET_TOKEN: (state, token) => {

state.token = token

},

SET_NAME: (state, name) => {

state.name = name

},

SET_AVATAR: (state, avatar) => {

state.avatar = avatar

},

SET_ROLES: (state, roles) => {

state.roles = roles

}

}

const actions = {

// user login

login({ commit }, userInfo) {

const { username, password } = userInfo

return new Promise((resolve, reject) => {

login({ username: username.trim(), password: password }).then(response => {

const { data } = response

commit(‘SET_TOKEN’, data.token)

setToken(data.token)

resolve()

}).catch(error => {

reject(error)

})

})

},

// get user info

getInfo({ commit, state }) {

return new Promise((resolve, reject) => {

getInfo(state.token).then(response => {

const { data } = response

if (!data) {

return reject(‘验证失败，请重新登录’)

}

const {roles, name, avatar } = data

commit(‘SET_ROLES’, roles)

commit(‘SET_NAME’, name)

commit(‘SET_AVATAR’, avatar)

resolve(data)

}).catch(error => {

reject(error)

})

})

},

// user logout

logout({ commit, state }) {

return new Promise((resolve, reject) => {

logout(state.token).then(() => {

removeToken() // must remove token first

resetRouter()

commit(‘RESET_STATE’)

commit(‘SET_ROLES’, [])

resolve()

}).catch(error => {

reject(error)

})

})

},

// remove token

resetToken({ commit }) {

return new Promise(resolve => {

removeToken() // must remove token first

commit(‘RESET_STATE’)

commit(‘SET_ROLES’, [])

resolve()

})

}

}

export default {

namespaced: true,

state,

mutations,

actions

}

添加roles: [] 保存权限列表 ，添加内容如下

const getDefaultState = () => {

return {

…

roles: []

}

}

const mutations = {

…

SET_ROLES: (state, roles) => {

state.roles = roles

}

}

// get user info

getInfo({ commit, state }) {

return new Promise((resolve, reject) => {

getInfo(state.token).then(response => {

…

const {roles, name, avatar } = data

commit(‘SET_ROLES’, roles)

…

}).catch(error => {

reject(error)

})

})

},

// user logout

logout({ commit, state }) {

return new Promise((resolve, reject) => {

logout(state.token).then(() => {

…

commit(‘SET_ROLES’, [])

…

}).catch(error => {

reject(error)

})

})

},

// remove token

resetToken({ commit }) {

return new Promise(resolve => {

…

commit(‘SET_ROLES’, [])

…

})

}

}

• 在store/getters.js中添加roles

const getters = {

sidebar: state => state.app.sidebar,

device: state => state.app.device,

token: state => state.user.token,

avatar: state => state.user.avatar,

name: state => state.user.name,

//添加roles

roles: state => state.user.roles,

//动态路由

permission_routes: state => state.permission.routes,

}

export default getters

• 将permission添加到store/index.js中

文末

从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。

个人将这段时间所学的知识，分为三个阶段：

第一阶段：HTML&CSS&JavaScript基础

第二阶段:移动端开发技术

第三阶段:前端常用框架

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

• 推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；

• 大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。所以对于概念的理解真的很重要。

ML&CSS&JavaScript基础

第二阶段:移动端开发技术

第三阶段:前端常用框架

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

• 推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；

• 大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。所以对于概念的理解真的很重要。