自学几个月前端，为什么感觉什么都没学到？？
这种现象在很多的初学者和自学前端的同学中是比较的常见的。
因为自学走的弯路是比较的多的，会踩很多的坑，学习的过程中是比较的迷茫的。
最重要的是，在学习的过程中，不知道每个部分该学哪些知识点，学到什么程度才算好，学了能做什么。
很多自学的朋友往往都是自己去找资料学习的，资料上有的或许就学到了，资料上没有的或许就没有学到。
这就会给人一个错误的信息就是，我把资料上的学完了，估计也-就差不多的了。
但是真的是这样的吗？非也，因为很多人找的资料就是很基础的。学完了也就是掌握一点基础的东西。分享给你一份前端分析路线，你可以参考。
还有很多的同学在学习的过程中一味的追求学的速度，很快速的刷视频，写了后面忘了前面，最后什么都没有学到，什么都知道，但是什么都不懂，要具体说，也说不出个所以然。
所以学习编程一定要注重实践操作，练习敲代码的时间一定要多余看视频的时间。 开源分享：docs.qq.com/doc/DSmRnRG…
- 楼层管理
考虑到实用性，该系统需要拆分为两大子系统，一个是学生端系统，一个是后台管理端系统。学生端系统主要提供给学生使用，负责一些宿舍记录及个人信息记录的基本操作；后台管理模块则是主要负责对所有学生信息的整理，提供宿舍管理、楼层管理、数据查看等权限，提供给宿舍管理员使用的。
学生登陆
学生系统拥有以下功能：
-
创建账户
-
分配宿舍
-
填写个人信息
-
修改个人信息
-
起床打卡（用于统计懒床率）
-
归宿登记（用于统计晚归情况）
-
打扫记录（用于统计宿舍打扫频率）
-
查看宿日常数据
管理员登陆
管理系统拥有以下功能：
-
楼层管理
-
宿舍评价
-
宿舍信息管理
-
学生信息查看
-
保洁人员管理
-
统计学生早起率
-
统计学生宿舍打扫频率
-
统计学生晚归
超级管理员在享有上述管理员同等权限的同时额外拥有如下功能：
-
创建管理员
-
创建宿舍楼
-
为宿舍楼分配管理员
-
为宿舍楼分配保洁人员
前端：
-
Vue 作为基础框架
-
vue-router 控制路由（hash 模式）
-
vuex 状态管理
-
axios 接入数据
-
Vue-element-admin 作为基础框架
后台（Nodejs）：
-
Koa 作为基础框架
-
koa-router —— 服务端路由控制
-
koa-static —— 读取静态文件
-
koa-jwt —— JWT 登录校验
-
koa-body —— http body 数据处理
-
koa-compress —— Gzip 压缩
-
koa-cors —— CORS 解决跨域问题
-
sequelize —— ORM
数据库：
- MySQL
数据库设计一览：
下面展示一下系统的部分功能：
仪表盘概揽：选择不同的宿舍楼查看相关信息
管理员管理：
宿舍楼管理
楼层管理
宿舍信息
宿舍入住学生信息
查看学生起床记录
查看学生归宿信息
查看学生宿舍打扫信息
查看个人信息
学生注册
注册后登陆系统
入住宿舍
起床打卡
归宿记录
打扫记录
后端工程：
前端工程
部门核心代码：
const { Building } = require("../model")
module.exports = {
getStudents: async function(buildingId) {
const FloorController = require("./floor_controller")
let users = []
const building = await Building.findOne({ where: { id: buildingId } })
const floors = await building.getFloors()
for (let floor of floors) {
const floorId = floor.id
users = [...users, ...(await FloorController.getStudents(floorId))]
}
return users
},
delBuilding: async function(id) {
const { setStudentRoomNull } = require("./user_controller")
const students = await this.getStudents(id)
students.forEach(student => {
setStudentRoomNull(student.id)
})
return await Building.destroy({ where: { id } })
}
}
const _ = require("lodash")
const { User } = require("../model")
module.exports = {
async getEvaluatesInfo(evaluates) {
const cpEvaluates = _.cloneDeep(evaluates)
for (let evaluate of cpEvaluates) {
const creator = await evaluate.getUser()
evaluate.dataValues.userName = creator.name
}
return cpEvaluates
}
}
const { Floor } = require("../model")
module.exports = {
getStudents: async function(floorId) {
const { getStudentInfo } = require("./user_controller")
let users = []
const floor = await Floor.findOne({ where: { id: floorId } })
const rooms = await floor.getRooms()
for (let room of rooms) {
const roomUsers = await room.getUsers()
for (let user of roomUsers) {
users.push(await getStudentInfo(user.id))
}
}
return users
}
}
module.exports = {
UserController: require("./user_controller"),
RoomController: require("./room_controller"),
FloorController: require("./floor_controller"),
BuildingController: require("./building_controller"),
EvaluateController: require("./evaluate_controller"),
RecordController: require("./record_controller")
}
const {
User,
GetupRecord,
CleanRecord,
BackRecord,
Room,
Floor,
Building
} = require("../model")
const { Op } = require("sequelize")
const moment = require("moment")
const _ = require("lodash")
const getupEarlyPoint = 8
const backEarlyPoint = 22
module.exports = {
// getup 相关
async addGetupRecord(userId) {
const user = await User.findOne({ where: { id: userId } })
const todyRecord = await GetupRecord.findOne({
where: {
userId: user.id,
roomId: user.roomId,
createdAt: {
.startOf("day")
.toDate(),
.endOf("day")
.toDate()
}
}
})
if (todyRecord) {
throw new Error("当天已经有记录，记录失败!")
}
return await GetupRecord.create({ userId: user.id, roomId: user.roomId })
},
async getUserGetupRecords(userId, days, pure = false) {
days = parseInt(days)
const user = await User.findOne({ where: { id: userId } })
const roomId = user.roomId
const room = await Room.findOne({ where: { id: roomId } })
// 获取最近 days 天的记录
const startTime = moment()
.subtract(days - 1 /* -1 代表查询天数包括今天 */, "days")
.startOf("day")
.toDate()
const allRecords = []
for (let i = 0; i < days; i++) {
const todayStart = moment(startTime)
.add(i, "days")
.toDate()
const todayEnd = moment(todayStart)
.endOf("day")
.toDate()
let record = await GetupRecord.findOne({
where: {
userId,
roomId,
createdAt: {
}
},
attributes: { exclude: ["updatedAt", "deletedAt"] }
})
if (record) {
// 如果当天有记录就推入结果
record = record.toJSON()
record.time = moment(record.createdAt).format("HH:mm")
} else if (!record && !pure) {
// 如果获取的是全部数据且当前天无数据
// 就建立一条空记录
record = GetupRecord.build({
id: "fake" + i,
roomId,
userId,
createdAt: todayStart
}).toJSON()
record.time = null
} else {
continue
}
record.date = moment(record.createdAt).format("YYYY-MM-DD")
record.userName = user.name
record.roomNumber = room.number
allRecords.push(record)
}
return allRecords.reverse()
},
async getRoomGetupRecords(roomId, days, pure = false) {
days = parseInt(days)
const room = await Room.findOne({ where: { id: roomId } })
const users = await room.getUsers()
const records = {}
for (let user of users) {
records[user.name] = await this.getUserGetupRecords(user.id, days, pure)
}
return records
},
async getGetupRecordLineCharData(roomId) {
const room = await Room.findOne({ where: { id: roomId } })
const users = await room.getUsers()
const data = { columns: ["周期"], rows: [] }
const dataCount = 5 // 获取的记录条数
const dataStep = 7 // 每条记录相隔的条数
// 初始化记录值
for (let i = 0; i < dataCount; i++) {
data.rows.push({ 周期: 最近${(i + 1) * dataStep}天 })
}
// 遍历当前宿舍的用户
for (let user of users) {
data.columns.push(user.name)
for (let i = 0; i < dataCount; i++) {
const days = (i + 1) * dataStep
// 获取某学生最近 days 天的早起记录
const records = await this.getUserGetupRecords(user.id, days, true)
let earlyTimes = 0
records.forEach(record => {
// 统计这些记录中有几天是早起的
const timeHour = parseInt(moment(record.createdAt).format("HH"))
if (timeHour < getupEarlyPoint) {
earlyTimes++
}
})
// 计算早起率
const probability = (earlyTimes / days).toFixed(4)
data.rows[i][user.name] = probability
}
}
return data
},
async getGetupTableData({
current,
step,
buildingId,
floorId,
roomId,
userId,
startTime,
endTime
}) {
// 初始化时间
startTime = startTime
? moment(startTime)
.startOf("day")
.toDate()
: moment(0).toDate()
endTime = endTime
? moment(endTime)
.endOf("day")
.toDate()
: moment()
.endOf("day")
.toDate()
console.log("endTime: ", endTime)
// 开始分情况获取数据
let result
if (userId) {
result = await GetupRecord.findAndCountAll({
where: {
userId: userId,
createdAt: {
}
},
limit: step,
offset: step * (current - 1),
order: [["createdAt", "DESC"]]
})
} else if (roomId) {
result = await GetupRecord.findAndCountAll({
where: {
roomId: roomId,
createdAt: {
}
},
limit: step,
offset: step * (current - 1),
order: [["createdAt", "DESC"]]
})
} else if (floorId) {
result = await GetupRecord.findAndCountAll({
where: {
createdAt: {
}
},
include: [
{
model: Room,
where: { floorId }
}
],
limit: step,
offset: step * (current - 1),
order: [["createdAt", "DESC"]]
})
} else if (buildingId) {
result = await GetupRecord.findAndCountAll({
where: {
createdAt: {
}
},
include: [
{
model: Room,
where: { buildingId }
}
],
limit: step,
offset: step * (current - 1),
order: [["createdAt", "DESC"]]
})
} else {
result = await GetupRecord.findAndCountAll({
where: {
createdAt: {
}
},
limit: step,
offset: step * (current - 1),
order: [["createdAt", "DESC"]]
})
}
const getStudentInfo = require("./user_controller").getStudentInfo
let rows = []
for (let record of result.rows) {
record = record.toJSON()
delete record.room
const userInfo = await getStudentInfo(record.userId)
record = Object.assign(userInfo, record)
record.time = moment(record.createdAt).format("HH:mm")
record.date = moment(record.createdAt).format("YYYY-MM-DD")
if (parseInt(moment(record.createdAt).format("HH")) < getupEarlyPoint) {
record.early = true
} else {
record.early = false
}
rows.push(record)
}
result.rows = rows
return result
},
// back 相关
async addBackRecord(userId) {
const user = await User.findOne({ where: { id: userId } })
const todyRecord = await BackRecord.findOne({
where: {
userId: user.id,
roomId: user.roomId,
createdAt: {
.startOf("day")
.toDate(),
.endOf("day")
.toDate()
}
}
})
if (todyRecord) {
throw new Error("当天已经有记录，记录失败!")
}
return await BackRecord.create({ userId: user.id, roomId: user.roomId })
},
async getUserBackRecords(userId, days, pure = false) {
days = parseInt(days)
const user = await User.findOne({ where: { id: userId } })
const roomId = user.roomId
const room = await Room.findOne({ where: { id: roomId } })
// 获取最近 days 天的记录
const startTime = moment()
.subtract(days - 1 /* -1 代表查询天数包括今天 */, "days")
.startOf("day")
.toDate()
const allRecords = []
for (let i = 0; i < days; i++) {
const todayStart = moment(startTime)
.add(i, "days")
.toDate()
const todayEnd = moment(todayStart)
.endOf("day")
.toDate()
let record = await BackRecord.findOne({
where: {
userId,
roomId,
createdAt: {
}
},
attributes: { exclude: ["updatedAt", "deletedAt"] }
})
if (record) {
// 如果当天有记录就推入结果
record = record.toJSON()
record.time = moment(record.createdAt).format("HH:mm")
} else if (!record && !pure) {
// 如果获取的是全部数据且当前天无数据
// 就建立一条空记录
record = BackRecord.build({
id: "fake" + i,
roomId,
userId,
createdAt: todayStart
}).toJSON()
record.time = null
} else {
continue
}
record.date = moment(record.createdAt).format("YYYY-MM-DD")
record.userName = user.name
record.roomNumber = room.number
allRecords.push(record)
}
return allRecords.reverse()
},
async getRoomBackRecords(roomId, days, pure = false) {
days = parseInt(days)
const room = await Room.findOne({ where: { id: roomId } })
const users = await room.getUsers()
const records = {}
for (let user of users) {
records[user.name] = await this.getUserBackRecords(user.id, days, pure)
}
return records
},
async getBackRecordLineCharData(roomId) {
const room = await Room.findOne({ where: { id: roomId } })
const users = await room.getUsers()
const data = { columns: ["周期"], rows: [] }
const dataCount = 5 // 获取的记录条数
const dataStep = 7 // 每条记录相隔的条数
// 初始化记录值
for (let i = 0; i < dataCount; i++) {
data.rows.push({ 周期: 最近${(i + 1) * dataStep}天 })
}
// 遍历当前宿舍的用户
for (let user of users) {
data.columns.push(user.name)
for (let i = 0; i < dataCount; i++) {
const days = (i + 1) * dataStep
// 获取某学生最近 days 天的归宿记录
const records = await this.getUserBackRecords(user.id, days, true)
let earlyTimes = 0
records.forEach(record => {
// 统计这些记录中有几天是早归的
const timeHour = parseInt(moment(record.createdAt).format("HH"))
if (timeHour < backEarlyPoint) {
earlyTimes++
}
})
// 计算早起率
const probability = (earlyTimes / days).toFixed(4)
data.rows[i][user.name] = probability
}
}
return data
},
async getBackTableData({
current,
step,
buildingId,
floorId,
roomId,
userId,
startTime,
endTime
}) {
// 初始化时间
startTime = startTime
? moment(startTime)
.startOf("day")
.toDate()
: moment(0).toDate()
endTime = endTime
? moment(endTime)
.endOf("day")
.toDate()
: moment()
.endOf("day")
.toDate()
// 开始分情况获取数据
let result
if (userId) {
result = await BackRecord.findAndCountAll({
where: {
userId: userId,
createdAt: {
}
},
limit: step,
offset: step * (current - 1),
order: [["createdAt", "DESC"]]
})
} else if (roomId) {
result = await BackRecord.findAndCountAll({
where: {
roomId: roomId,
createdAt: {
}
},
limit: step,
offset: step * (current - 1),
order: [["createdAt", "DESC"]]
})
} else if (floorId) {
result = await BackRecord.findAndCountAll({
where: {
createdAt: {
}
},
include: [
{
model: Room,
where: { floorId }
}
],
limit: step,
offset: step * (current - 1),
order: [["createdAt", "DESC"]]
})
} else if (buildingId) {
result = await BackRecord.findAndCountAll({
where: {
createdAt: {
}
},
include: [
{
model: Room,
where: { buildingId }
}
],
limit: step,
offset: step * (current - 1),
order: [["createdAt", "DESC"]]
})
} else {
result = await BackRecord.findAndCountAll({
where: {
createdAt: {
}
},
limit: step,
offset: step * (current - 1),
order: [["createdAt", "DESC"]]
})
}
const getStudentInfo = require("./user_controller").getStudentInfo
let rows = []
for (let record of result.rows) {
record = record.toJSON()
delete record.room
const userInfo = await getStudentInfo(record.userId)
record = Object.assign(userInfo, record)
record.time = moment(record.createdAt).format("HH:mm")
record.date = moment(record.createdAt).format("YYYY-MM-DD")
if (parseInt(moment(record.createdAt).format("HH")) < backEarlyPoint) {
record.early = true
} else {
record.early = false
}
rows.push(record)
}
result.rows = rows
return result
},
// clean 相关
async addCleanRecord(userId) {
const user = await User.findOne({ where: { id: userId } })
const todyRecord = await CleanRecord.findOne({
where: {
roomId: user.roomId,
createdAt: {
.startOf("day")
.toDate(),
.endOf("day")
.toDate()
}
}
最后：
总结来说，面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气，但是我们可以在别的地方花更多时间，每个环节都提前做好准备。
面试一方面是为了找到工作，升职加薪，另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚，更重要的是在平时学习和工作中不断积累和坚持，把每个知识点、每一次项目开发、每次遇到的难点知识，做好积累，实践和总结。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
