一、前期准备
1.创建脚本auth.js
作用:用来管理登录用户的token。
**token简述:**前后分离的开发模式下,客户端进行请求后台服务的一个令牌。为一串密文形式的字符串,一般在用户请求登录后,后台返回给前台。
脚本文件目录如下图所示
**代码:
**
import Cookies from 'js-cookie'const TokenKey = 'Admin-Token'export function getToken() { return Cookies.get(TokenKey)}export function setToken(token) { return Cookies.set(TokenKey, token)}export function removeToken() { return Cookies.remove(TokenKey)}
**注:
**
**js-cookie:**是一个处理cookies的js API,上述是代码仅是封装了部分我们这次项目能用到到方法,深入研究可以自行百度
安装: npm install js-cookie --save
2.创建脚本settings.js
**作用:**储存web项目中的各类配置变量,本次教程我们只用到了一个web页的title,所以我们只配置这一项。
脚本文件目录如下图所示
代码:
module.exports = { title: '后台管理'}
3.创建脚本get-page-title.js
作用:对settings.js中的title,进行赋值、调用等操作
脚本文件目录如下图所示
代码:
import defaultSettings from '@/settings'const title = defaultSettings.title || 'admintitile'export default function getPageTitle(pageTitle) { if (pageTitle) { return pageTitle+"-"+title } return title}
二、模块化
很多同学会私下问我,像上述的三个文件的代码,明明可以放到一起,为什么要分成独立的脚本进行编写。
其实这是一种编程思想趋使下的一种开发习惯,这种思想就是下面给大家描述的模块化思想
官方定义:
从项目结构看:使开发人员有更清晰的思维,提高项目的维护性。
从代码结构看:可提高对代码结构的依赖管理、可读性、重用性等。
深入了解官方的高大上,自行百度即可(哈哈~~~)
个人理解(不喜勿喷,欢迎指正):
将不同的业务功能进行分类,各自成为独立的模块。这个不仅是适用于编程中的项目结构梳理、代码编写、框架研发等。在生活中模块化思想例子也是比比皆是。
学生会将试题的难易进行分类,然后进行答题
企业会将部门进行分类,然后进行管理
老婆会将你的罪过进行分类,然后在你不听话时,进行高效率的call back(说多了哈)
最后引用一句名言
文明的建立的不是机器而是思想。——托尔斯泰
有好的思想才能创造高效率的思维模式,进而提高我们的工作效率
因为文章占用的篇幅过多,主菜会在下一篇文章中继续进行介绍。兄弟们,磨刀不误砍柴功,小伙们要有耐心哦~~~
请继续阅读:vue入门之路由守卫实现权限验证(5-2)