vue day14 项目打包、优化、UI框架及拦截器

day14天笔记

一、项目打包问题

1.1什么时候遇见打包问题

当整个项目结束

1.2优化（某几个 ,懒加载减少与后端交互）

1、图片懒加载
借助了插件vue-lazyload
2、数据未请求到的时候，出现loading或者骨架屏

3、分页（pc端）
加载更多或者是上拉加载下来刷新
pageNum(页码) 1 pageSize 20（当页面渲染的条数）
举例：当前调数据一共38数据，这个时候有几个分页，2个

axios({
    url:'',
    params:{//带分页的数据一定有pageNum(页码) 1 pageSize 20（当页面渲染的条数）这两个参数
    pageNum:1,
    pageSize:20
    }
})
.then(res=>{
    //得到响应数据是20条

})
.catch(err=>{})
//点下一页再次调取接口 pageNum++（2）
//后端只剩18条，全部返回给你

4、路由懒加载
两种使用方式
1、const hotSong = ()=>import('../components/view/hotSong.vue')
2、const Search = ()=> Promise.resolve(import('@/components/view/search'))

1.3路由模式

• 路由模式有两种：hash和history
• 模式的设置,在路由文件中 mode:'history'
• hash和history有什么区别

一个带#号，一个不带#（这种回答方式，过于low）

1.4项目打包

• 命令 npm run build

//本地搭建一个以express为基础的node服务器
//引入express依赖
const express = require('express')
//创建一个app
const app = express()
//静态资源加载
app.use(express.static('./static'))
//get方法 node路由
app.get('/oh',(req,res)=>{
    res.send('这么神奇吗')
})
app.get('/play',(req,res)=>{
    res.send('刷新，优先走服务器路由，再走这个前端路由')
})
//打印信息
console.log('就问你神奇不，服务器启动了是3000端口')
//端口号
app.listen('3002')
//在www文件夹下面创建一个static文件
//把前端打包好成的dist文件夹里面的内容放置到static文件文件夹中
// 直接访问服务器地址即可前端项目 
// http://localhost:3002

---

二、移动端的UI框架（热门）

• elementUI (pc端推荐，如果用vue)
• viewUI (pc端的，不推荐)

官网：https://www.iviewui.com/

• vantUI

小程序官网： https://youzan.github.io/vant-weapp/#/intro
vue移动端官网： https://youzan.github.io/vant/#/zh-CN/
vantUI基于vue的移动端开发工具
轻量、可靠的移动端 Vue 组件库
特性
60+ 高质量组件
90% 单元测试覆盖率
完善的中英文文档和示例
支持按需引入
支持主题定制
支持国际化
支持 TS
支持 SSR
安装方式： npm install vant

• uniapp(一套代码生成8个终端)

官网地址：https://uniapp.dcloud.io/

• MintUI(移动端，以前很热)

官网： http://mint-ui.github.io/#!/zh-cn

三、axios拦截器（请求拦截，响应拦截）

• 第一种方法 放在main.js中

//拦截器是全局的
//main.js中实现的
//工作中token要求你携带在请求头中，请求头还会有哪些内容，加密信息（md5）,各个端的信息（用来区分，ios、安卓、小程序、pc、移动端），密钥
//创建一个请求拦截器
axios.interceptors.request.use((config)=>{
  console.log(config,'我是请求拦截')
  //config.params.token = 123568
  //把token存储到header中
 // config.headers.token = 3567912566
  return config
})
//创建一个响应拦截
axios.interceptors.response.use(response=>{
  console.log(response,'拦截器的响应')
  //在响应拦截中我们会全局拦截错误 
  //还有token失效的判断
  if(response.status==-100){
    router.push('/login')
    return
  }else{
    return response.data
  }

• 第二种方法、创建公共的模块config.js和api.js

//config.js文件
//这个文件是axios的配置文件
import axios from 'axios'
//引入路由文件
import router from 'vue-router'
//设置http把axios所有属性和方法赋值
let http = axios.create()

//创建请求拦截器
http.interceptors.request.use(config=>{
    //往请求头中添加token
    //工作中这个token从哪里取，登录之后获取token，存到存储中，在这再获取一下
  //  config.headers.token = 1234567
    return config
})

//创建响应拦截器
http.interceptors.response.use(response=>{
    //全局拦截错误
    //token失效跳转到登录
    if(response.status==-100){
        router.push('/login')
    }
    return response
})

export default http

//api.js
//这里面是共通的接口
//引入axios配置文件
import http from './config'
let baseUrl = 'http://localhost:3000'
//设置一个接口对象
let getData={}
//banner接口
getData.getBanner = (data)=>{
    console.log(data,'你是谁111')
  return  http.get(baseUrl+'/banner',data)
}
//推荐歌单接口
getData.getSong = (data)=>{
    console.log(data,'你是谁2222')
    return http.get(baseUrl + '/personalized',data)
}

//暴露出这个接口对象
export default getData

//组件内
import url from '../common/api'
    //banner
    url.getBanner()
    .then(res=>{
      console.log(res,'等到banner数据')
    })
    .catch(err=>{

    })
    //推荐歌单
    url.getSong({
      params:{
        limit:6
      }
    })
    .then(res=>{
      console.log(res,'我是接口数据')
    })
    .catch(err=>{

    }) 

---

四、路由的滚动行为

• 需求跳转list页面的时候，回退，还会定位到之前的位置

//路由出口区 利用keep-alive进行缓存，路由中在调用滚动行为
    <!-- 用来缓存页面 -->
        <keep-alive>
        <!-- 控制一级路由的出口 -->
    <router-view></router-view>
    </keep-alive>
      //滚动行为(路由)
  scrollBehavior(to,from,savePosition){
    if(savePosition){
      return savePosition
    }else{
      return{
        x:0,
        y:0
      }
    }

  },

• 滚动行为会造成其他页面缓存，如何解决，不利用mounted(){} 而是利用activated函数

activated() {
    console.log("!!!!!!!!!我是activated！！！！！");
    //把路由携带的id进行缓存与我下一次的id进行对比
    //如果一样，啥也不干如果不一样，把之前的数据this.list 清空，再调取接口
    if (localStorage.getItem("id") !== this.$route.query.id) {
      //把id进行存储
      localStorage.setItem("id", this.$route.query.id);
      this.list = [];
      //调取接口
      //获取歌单详情
      this.getList();
    }
  },

---

作业

• 整理笔记（两个版本）交
• 完善网易云项目 交

---

面试题

• hash模式和history模式

区别：
hash模式：
1.采用的是window.onhashchange事件实现。
2.可以实现前进 后退 刷新。
3.比如这个URL：http://www.zhenbang.com/#/index, hash 为#/index。
它的特点在于：hash 虽然出现URL中，但不会被包含在HTT求中，
对后端完全没有影响，因此改变hash不会重新加载页面
history模式：
1.采用的是利用了HTML5 History Interface 中新pushState() 和replaceState() 方法。
2.可以前进、后退，但是刷新有可能会出现404的报错
3.前端的url必须和实际向后端发起请求的url 一致http://www.haha.com/niu/id 。
如果后端缺少对/niu/id 的路由处理，将返回404错误。
不过这种模式要玩好，还需要后台配置支持。因为我 用是个单页客户端应用，
如果后台没有正确的配置，当用户在浏览器直接访问 http://oursite.com/user/id，这就不好看
所以呢，你要在服务端增加一个覆盖所有情况的候选 如果 URL 匹配不到任何静态资源，
则应该返回同一个 index.html 页面，这个页面就 app 依赖的页面。

• token(令牌)概念

1、token的引入：Token是在客户端频繁向服务端请求数据，服务端频繁的去数据库查询用户名和密码并进行对比，判断用户名和密码正确与否，并作出相应提示，在这样的背景下，Token便应运而生。
2、Token的定义：Token是服务端生成的一串字符串，以作客户端进行请求的一个令牌，当第一次登录后，服务器生成一个Token便将此Token返回给客户端，以后客户端只需带上这个Token前来请求数据即可，无需再次带上用户名和密码。
3、使用Token的目的：Token的目的是为了减轻服务器的压力，减少频繁的查询数据库，使服务器更加健壮。