前言

最近秋招提前批已经开始了，所谓金九银十，现在要招实习，找工作的童鞋们在面试时该怎么介绍你的全栈项目呢？这里给大家做一份全过程示例，希望对大家有帮助。这里以我过去的一个项目作为示例介绍。

Part1——开始的介绍

面试官：“我看你简历上有一个全栈项目，介绍一下你的这个项目吧。”

“好的，面试官。我的这个项目名叫做生活笔记本。这个项目的业务目标在于能够帮客户记录生活中的想要随手记录的事情。然后我的前端页面使用的是Vue 3框架与JavaScript进行开发的，后端使用的是Node.js与koa框架布局的。”

面试官：“你为什么选择这些技术栈？”

“Vue 3 作为前端框架，对开发者十分友好，它的Composition API 和新的响应式系统，使得状态管理更加灵活高效。并且Vue 3的生态非常庞大，有许多高质量的插件和库可使用，比如在这个项目中使用的是Vue-Router 用于路由管理，vant作为组件UI库。

对于后端，Node.js 也是基于 Chrome V8 引擎的语言，允许使用JavaScript编写后端代码，前后端一致有利于我的开发效率。而Koa 是 Express 的作者团队推出的新一代轻量级且灵活的框架，省去了Express框架身上一些不常用的API，而且Koa 提供了强大的中间件支持，可以方便地扩展应用功能。”

如果同学们能把这个流程记住，面试官在前面的介绍对你就有了大概的判断，对你接下来的项目介绍一定会认真听了，因为前面你给他的感觉就是：你就是他在等的人！

Part2——项目功能介绍

面试官：“项目中有哪些主要的功能模块？（你项目的功能介绍）”

“我的这个项目主要分成 登录模块Login 分类模块Class 发布笔记模块Pulish 和查看发布的笔记List，路由模块Router。”

面试官：“分别介绍一下这些模块吧（说说这些模块的开发过程 或者 是说说这些模块开发过程中遇到了什么难点吧）”

当面试官说了这句时你要知道这才是你表现的主场，因为此时面试官已经把主动权全部交到你手中了，一定把握好时间控制，把项目重点要都说出来，把她想问你的考点自己口径可能多说出来。

登录模块Login

“好的面试官：在进入项目前，我设置了一个登入注册页面，整个页面是使用Vant组件库来做ui框架的(介绍你使用ui框架的优点的)因为Vant组件库对于移动端的适配非常优秀，而且它的体积比较小，对项目的运行不会造成什么负担。

然后在样式上我整个项目使用的是less而不是css，因为它可以帮助我们更好地组织和维护样式。LESS 的变量功能让我们可以定义颜色、字体大小等常用值，这样当我们需要更改全局的颜色方案时，只需要修改一次变量即可。其次，嵌套规则让我们的 CSS 代码更加清晰和简洁，同时避免了选择器过长的问题。

然后在校验处理上，我项目全局使用的都是axios作为网络请求库，因为它作用于node.js 和浏览器中。可以让我在编写前后端更加顺畅。除此之外，主要还是aioxs的功能十分强大，我在前端并没有做很多请求数据逻辑处理，都是放在后端进行处理的。使用axios设定baseURL与请求头的post['Content-Type']

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/json';

然后设定了请求拦截与响应拦截两个拦截器。请求拦截在登入页面并没有被使用到，它主要是为了后面页面数据的请求申请时需要添加jwtToken进去一并返回给后端。响应拦截时防止后端数据返回错误时导致页面崩溃让用户体验感非常差的。

然后前端登录成功之后,我是将jwtToken存在localStorage内，后续的请求都会自定到localStorage去取出这个token使用。这里差不多就是登录页面的内容了

然后在登录模块里面里面我还有注册模块，大概的内容是与登录模块差不多的，区别是在后端一个是在数据库中搜索，一个是在数据库中建表”

当你讲完这里的时候就记得停顿一下，看看面试官需要问你问题吗，她没说话，你就继续介绍。

分类模块Class

“分类模块，主要是在后端请求数据后的卡片的渲染，然后我给卡片加上VueDraggablePlus了一个拖拽排列的功能，提升一下用户体验，当用户将某个卡片拖拽到某个位置时，页面将会发送请求到后端改变数据库的数据排列。然后个人主页界面是也放在分类界面里的右边，把他隐藏起来了，使用transform将它平移出来的，优化一下用户体验感，然后这个页面其他的就是绑定一些点击事件和父子传值。”

重要的功能一定要数清楚来，让面试官知道你的能力，后面的简单的逻辑方法可以简要的说一些。

查看发布的笔记List

“查看发布的笔记这个界面就是，分类点击页面标签进入的时onMounted()发送请求，里面使用两栏布局将后端存储的数据分类展示这里在这个目录中只展示笔记的图片，日期和标题，然后点击整个卡片进入详细的笔记记 录，也是在onMounted()发送接口请求后端，将用户提交的那份完整笔记提取出来是展示。

发布笔记模块

“为了实现一个功能丰富的发布笔记模块，我选择了 vue-quill 作为富文本编辑器。由于富文本内容的处理较为复杂，vue-quill 提供了一个强大且易于集成的解决方案，使得我可以专注于其他核心功能的开发，而不必担心编辑器的细节。如字体样式、颜色、对齐方式等，同时还支持插入图片和视频等多媒体内容。”

这就是我前端实现的大概的功能了”

PS你也可以加上一个路由守卫跳转说明，比如：“通过设定白名单来控制未登入用户可访问的界面”

这个时候面试官可能会提问你一些你这里面用到的知识，所以你要对你的项目用到的相关知识十分了解。

Part3——后端的功能的实现

对于全栈项目，面试官是一点会问你后端功能的实现的，这里我们更要用更专业术语来博得面试官的青睐了。后端的功能由于有着连续性在介绍这里的时要从头到尾一起介绍，并且需要逻辑梳理顺畅。

先总后分，介绍你用到了哪些工具包和他的作用，再串联起来

面试官：“那你介绍一下你的后端吧”

“项目的后端因为使用的koa框架，然后后端路由我使用的是@koa/router后端路由管理包，使用jsonwebtoken来加密生成唯一校验jwtToken, 使用@koa/body-parser作为中间件解析 HTTP 请求体中的数据，使用@koa/cors来允许放开前端的跨域请求，使用mysql2包和mysql插件来对我们建立的MySQL进行修改，和数据库的查询的。

然后在主文件中将这个包都引入根据文档说明use掉它们，然后我在创建两个路由文件分别用来接受和返回用户登录toekn认证和数据返回，笔记获取的token认证和返回。

然后我根据文档分装了签发 token的函数与验证 token函数，在签发 token函数中使用传入的用户信息在加盐一下，并设置token的有效时长，再返回出去，而验证 token函数中我再请求头中的authorization的得到返回的token然后使用加盐时的字段一并验证token的合法性，如果合法将返回，我将请求体中的用户id和nickname挂载在ctx对象上作为后面数据库查询数据的字段。如果不合法，那么立马返回，不再进行后续操作 然后又根据mysql2文档”处理数据库数据操作的函数封装。”

当你这样介绍完你的项目之后，面试官将都不知道这个项目还有什么可以问你的内容了，要么问你其他内容，要么就是为难你问你文档里面的内容了，如果你不知道，一定要假装害羞的微笑向面试官请教。

Last

面试讲究的就是一个吹字，你敢吹，人家就敢给你offer的，当然还是的先把基本的执行弄清楚的哈，冲吧童鞋们。