今日目标

1.能够说出什么是路由
2.能够说出前端路由的实现原理
3.能够使用Vue-Router实现前端路由
4.能够实现嵌套路由，动态路由
5.能够实现命名路由以及编程式导航
6.理解并实现后台管理案例

1. 电商管理后台 API 接口文档

1.1. API V1 接口说明

• 接口基准地址：http://127.0.0.1:8888/api/private/v1/
• 服务端已开启 CORS 跨域支持
• API V1 认证统一使用 Token 认证
• 需要授权的 API ，必须在请求头中使用 Authorization 字段提供 token 令牌
• 使用 HTTP Status Code 标识状态
• 数据返回格式统一使用 JSON
  阅读全文 »

插件和依赖的区别

依赖

运行时开发时都需要用到的jar包，比如项目中需要一个json的jar包，就需要一个依赖，这个依赖在项目运行时也需要，因此在项目打包时需要把这些依赖也打包进项目里

插件

在项目的开发时需要，但是在项目运行时不需要，因此在项目开发完成后就不需要把插件打包进项目中。

基本用法

Vue脚手架用于快速生成Vue项目基础架构，其官网为：(https://cli.vuejs.org/zh/) 用于让程序员直接上手写代码，而不用去管项目的配置。相当于省去了哪些配置项目插件的步骤。

使用步骤

• 安装3.x的vue脚手架npm install -g @vue/cli
  • 输入vue -V查看是否安装成功

创建步骤：

1
2
3
4
5
6
7
8
9

//1、基于交互式命令行的方式，创建新版vue项目
vue create my-project

//2、基于图形化界面的方式，创建新版vue项目
vue ui

//3、基于2.x堵塞旧模板，创建旧版vue项目
npm i -g @vue/cli-init
vue init webpack my-project

webpack

• 文件依赖关系复杂
• 静态资源请求效率低
• 模块化支持并不友好
• 浏览器对高级js特性兼容程度低

在项目中安装webpack

• 项目初始化：npm init -y
• 运行npm i webpack webpack-cli -D命令，安装webpack相关的包
• 在项目根目录创建名为webpack.config.js的webpack配置文件
• 在webpack配置文件中初始化如下基本配置：
  阅读全文 »

路由

概念：路由是一个比较广义和抽象的概念，路由的本质就是对应关系

• 后端路由
  • 概念：根据不同的用户url请求，返回不同的内容
  • 本质：url请求地址域服务器资源之间的对应关系
  • 根据不同的url地址分发不同的资源
• SPA
  • 后端渲染（存在渲染问题）
  • Ajax前端渲染（前端渲染提高性能，但是不支持浏览器的前进后退操作）
    阅读全文 »

组件

注意事项：

• data必须返回一个函数（保证每个组件的数据是相互独立的）
• 组件的模板必须是只有一个根元素
• 组件模板内容可以是模板字符串（内容复杂，增强代码可读性）
• 组件命名方式：驼峰式和中间-式如果使用驼峰式命名组件，那么在使用的时候，只能在字符串模中（定义的时候）用驼峰的方式使用组件，但是在普通的标签模板中（使用的时候），必须使用短横线的方式使用组件
• 全局组件中不能使用局部组件，局部注册的组件只能在它注册了的父组件中使用
  阅读全文 »

数组的扩展

Array.from()

Array.from()方法用于将两类对象转为真正的数组：类似数组的对象和可遍历的对象（包括ES6新增的数据结构set和map）

1
2
3
4
5
6
7
8
9
10
11

let arrayLike = {
	'0': 'a',
	'1': 'b',
	'2': 'c',
	length: 3
}

//ES5的写法
var arr1 = [].slice.call(arrayLike); //['a','b','c']
//ES6的写法
var arr2 = Array.from(arrayLike);//['a','b','c']

数值的扩展方法

Number.isFinite()、Number.isNaN()

• 在数值上提供这两种方法来检查infinite和NaN这两个特殊值。
• 它们和传统的全局方法isFinite和isNaN方法的区别在于，传统方法先调用Number将非数值的值转为数值，再进行判断，而这两个新方法只对数值有效，非数值一律返回false。

Number.parseInt()、Number.parseFloat()

• ES将全局方法parseInt和parseFloat移植到Number对象上面，行为完全保持不变。
• 这样做的目的是逐步减少全局性方法，使得语言逐步模块化。
  阅读全文 »

字符串的扩展

确定字符串是否在另一个字符串中

• includes（）：返回布尔值，表示是否找到了参数字符串
• startsWith（）： 返回布尔值，表示参数字符串是否在源字符串的头部
• endsWith（）：返回布尔值，表示参数字符串是否在源字符串的尾部

注意：使用第二个参数n时，endsWith的行为和其他两个不一样，endsWith针对前n个字符，而其他两个方法针对从第n个位置直到字符串结束

repeat()

该方法返回一个新的字符串，表示将原字符串重复n次