2024年最全学生信息管理系统 —— 前端篇(2)，2024年最新前端面试项目应该怎么说

最后

面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

Vue

===================================================================

采用 Vue-CLi创建的项目的结构（有后期项目的更新，可能具体文件与实际不符，但结构基本不变）。

├── App.vue

├── assets

│ └── logo.png

├── components

│ ├── BottomBar.vue

│ ├── HeadBar.vue

│ ├── SiderBar.vue

│ ├── UpLoad.vue

│ ├── UpLoadImages.vue

│ ├── UpLoadSingleImage.vue

│ ├── achievement

│ │ ├── AddAchievement.vue

│ │ └── DisplayAchievement.vue

│ ├── course

│ │ ├── AddCourses.vue

│ │ └── DisplayCourses.vue

│ ├── score

│ │ ├── AddScoreByCourse.vue

│ │ ├── QueryScoreByCourse.vue

│ │ └── QueryScoreByStudent.vue

│ └── students

│ ├── AddAmountOfStudents.vue

│ ├── AddSingleStudent.vue

│ ├── DisplayAllStudents.vue

│ └── SearchStudent.vue

├── main.js

├── router

│ └── index.js

├── store

│ └── index.js

├── utils

│ └── api.js

└── views

├── AddScore.vue

├── AddStudents.vue

├── DisplayScore.vue

├── DisplayStudent.vue

├── Home.vue

└── Login.vue

……

└── vue.config.js （与src同级的配置文件）

单文件组件结构

---

举一个简单的例子。

反向代理配置

---

在vue.config.js文件下

module.exports={

devServer:{

proxy:{

“/api”:{

target:‘http://localhost:8088’,//访问的服务器地址

changeOrigin:true,//true为开启代理

//secure: true, // 如果是https接口，需要配置这个参数

pathRewrite:{

‘^/api’: ‘’//路径的替换规则

/*

*这里的配置是正则表达式，以/api开头的路径将会被‘/'替换掉

*假如后台文档的接口是 “https://www.cyclv.com/admin/login”

*前端调取API接口应写：axios.get(‘/api/admin/login’)

*/

}

}

}

}

}

axios

---

在api.js下简单封装了与后端交互的代码，主要考虑到如果以后交互技术的变化以方便拓展。

import axios from ‘axios’

export const postRequest = (url,data) => {

return axios.post(url,data);

}

export const getRequest = (url)=> {

return axios.get(url);

}

export const deleteRequest = (url)=> {

return axios.delete(url);

}

export const putRequest = (url,data)=> {

return axios.put(url,data);

}

具体代码片段，如：

const api = ‘api/login’;

postRequest(api, {

aid: this.loginForm.aid,

pwd: this.loginForm.pwd

})

.then(response => {

if (response.status == 201) {

// 在 store 的 state存储 状态

this.$store.commit(‘login’, this.loginForm);

this.$router.replace({path: ‘/home’});

} else {

alert(“密码错误！”);

}

})

.catch(res => {

this.console.log(“内部错误”);

})

路由

---

//import …………

Vue.use(VueRouter)

const routes = [

{

path:‘/login’,

name:‘Login’,

component:Login

},

{

path: ‘/home’,

name:‘Home’,

component: Home,

meta:{
最后

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

最后写上我自己一直喜欢的一句名言：世界上只有一种真正的英雄主义就是在认清生活真相之后仍然热爱它

me’,

component: Home,

meta:{
最后

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

最后写上我自己一直喜欢的一句名言：世界上只有一种真正的英雄主义就是在认清生活真相之后仍然热爱它