该项目是一个在线填写个人信息等相关简历信息,然后根据用户填写的这些信息,在线生成一份
PDF文档
的个人简历,提供给用户预览以及下载这份填写好的个人简历
请思考一下,以下的几个问题,有什么解决方案,需要用到什么技术,即便日后你把这个项目写在简历上作为自己初学 Vue 框架的一个个人的实践项目,相信面试官对你有所青睐。
- markdown 编辑器的原理,怎么去实现一个 markdown 编辑器的组件?
- markdown 编辑器组件怎么实现图片上传功能?
- 怎么实现的下载文档功能,以及如何生成 PDF 格式的简历文件?
- 项目中是怎么封装组件的,有什么思路或者步骤?
- 该项目为单纯的前端项目,是如何实现数据持久化的?
- 项目的即时渲染技术,也就是数据双向绑定,使用了观察者模式
- HTML 页面如何转换为 Canvas 画像, canvas 怎么装换成 pdf 文件
- Vue 的自定以
v-model
以及自定义事件v-on
、自定义指令v-directive
- localStorage 与 sessionStorage、Cookie 的使用
-
VueRoute 以及相关技术
-
路由过渡动画效果是怎么实现的?
-
路由组件的懒加载是怎么实现的,以及为什么要懒加载?
- Vue 的异步组件
import()
加上 Webpack 的代码分割code split
功能
- Vue 的异步组件
-
基于导航守卫进行项目权限路由拦截功能?
- 全局的
router.beforeEach()
- 全局的
-
VueRouter的导航守卫分为全局守卫钩子与**局部(组件)**守卫钩子,所谓的钩子就是项目运行到一个相应的我阶段可以调用的方法来实现某些功能。通常在 VueRouter 项目中我们用的相对较多的守卫钩子就是beforeEach
、beforeRouteUpdate
,在这里我就不教大家去一一学习对应的守卫钩子,倘若自己对这一快知识比较模糊的话,可以去 VueRouter 官方网站进行充电 ➡️ https://router.vuejs.org/zh/
-
功能点:基于 Vue 的全局前置守卫钩子
beforeEach
实现登录鉴权-
项目知识的单纯的前端项目, 在无后端以及无服务器无数据库的情况下只能单纯基于
js-cookies
这个库来简单实现登录鉴权功能。 -
思路
- 使用
js-cookies
存储一个 userInfo 对象,该对象为当前登录改系统的用户信息,userInfo 有记录用户名与密码 - 用户每次登录系统,都从 Cookies 里面读取个人 userInfo,倘若 userInfo 这个对象存在而且用户名和密码都不为空,用户成功登录系统
- 倘若 userInfo 或用户名或密码为空,则无论用户在改系统进行什么页面跳转都重定向至登录界面
- 使用
-
具体代码
-
定义路由
import Vue from 'vue' import Router from 'vue-router' import Cookies from 'js-cookies' Vue.use(Router) const router = new Router({ mode: 'history', base: '/', routes: [ { path: '/', name: 'home', redirect: '/base', component: Home, children: [] }, { path: '/login', name: 'login', component: () => import('./views/Login') } ] }) // 路由权限验证 有权限进入系统 无权限则跳转登录页 // to.name: 当前路由的名字,'login'为登录界面组件的name router.beforeEach((to, from, next) => { const userInfo = JSON.parse(Cookies.getItem('userInfo')) if (to.name !== 'login' && !userInfo) { next({ path: '/login', name: 'login' }) } else next() }) export default router
Login.vue <script> import Cookies from 'js-cookies' import bgImgOne from '@/assets/images/banner1.png' import bgImgTwo from '@/assets/images/banner2.png' export default { data() { return { bgImgArr: [bgImgOne, bgImgTwo], form: { name: '', password: '' }, btnLoading: false, btnDisabled: true, loginBtnDisabled: true } }, methods: { onSave(name) { this.$refs[name].validate(valid => { if (valid) { this.btnLoading = true setTimeout(() => { this.btnLoading = false // 每次登录把最新的用户信息存入Cookies Cookies.setItem('userInfo', JSON.stringify(this.form), { expires: 3 }) this.$message.success('登录成功!') this.$router.push('/') }, 500) } }) } } } </script>
-
-
技术 | 说明 | 官网 |
---|---|---|
Vue 2.x | 前端框架 | https://vuejs.org/ |
Vue-router | 前端路由框架 | https://router.vuejs.org/ |
Vuex | 全局状态管理框架 | https://vuex.vuejs.org/ |
Vue-cli 3.x | 项目脚手架 | https://cli.vuejs.org/zh/ |
element-ui | 前端 UI 框架 | https://element.eleme.io/ |
mavon-editor | vue 插件 markdown 编辑器 | https://github.com/hinesboy/mavonEditor |
html2canvas | 将 html 生成图片 | https://github.com/niklasvh/html2canvas |
jspdf | 将图片转换成 PDF 文档 | https://mozilla.github.io/pdf.js/examples/ |
观察者模式(发布-订阅模式)观察者们监听对象 Subject 属性的变化,若有变化则 Subject 则触发 notify()方法;这个方法就触发 Observer 的 update()监听回调方法,取完成某些操作。
- Observer 观察者
- 属性: name(自身名字) subject(被观察者)
- 方法: update()
- Subject 被观察者
- 属性: state(状态) obervers(观察者们, 数组)
- 方法:getState() setState() attach() notify()
待续。。。。
⚠ 以下是该项目的安装运行步骤
git clone [email protected]:ZhengMaster2020/vue-reume-online.git
cd vue-resume-online
建议: 淘宝镜像
cnpm i
或
npm install
npm run dev
node ./server
账号密码随便填写
npm run build