尚硅谷-项目实战知识点汇总

183

第一章:Vue前台项目

一、项目介绍

1.1 技术架构

 vue+weback+vuex+vue-router+axios+less
 
 封装通用组件
 登录注册
 token
 守卫
 购物车
 支付
 项目性能优化...
 

1.2 环境搭建

1、利用vue-cli脚手架初始化项目

node+webpack

    node_modules文件夹:项目依赖
    public:静态资源,webpack打包的时候回原封不动的打包到dist文件夹
    src文件夹:程序源码
       assets文件夹:静态资源,webpack打包的时候会把静态资源当做有个模块,打包到js文件中        
       components文件夹:一般放置非路由组件(全局组件)
       App.vue:唯一的根组件,vue中的组件都是(.vue)
       main.js:程序的入口文件
       
    babel.config.js:配置文件(babel相关)
    package.json文件:(认为是项目身份证),记录项目信息、有哪些依赖、项目怎么运行
    package-lock.json:缓存性文件
    READ.md:说明性文件
       

2、配置项目

   2.1 项目运行起来,浏览器自动打开  "serve": "vue-cli-service serve --open",
   2.2 eslint关闭:根目录下创建vue.config.js
   
           module.exports = {
             lintOnSave:false
          }
   2.3 src文件夹简写,配置别名,@
   

3、项目路由的分析

vue-router

前端路由:kv键值对
key:URL(地址栏中的路径)
value:相应的路由组件

路由组件:home路由组件、search路由组件
非路由组件:
  Header 在四个路由中都有
  Footer【在首页、搜索页】,在登录页是没有的

1.3 路由相关

1.3.1 路由组件搭建
在上面的分析的时候,路由组件应该有4个:Home、Searc、Login、Register

搭建路由组件需要安装插件vue-router
components文件夹:放置非路由组件
pages|views文件夹:放置路由组件

1 配置路由

   位置:一般放在router文件夹中

2 区别

  路由组件一般放置在pages|views文件夹
  非路由组件一般放置在components文件夹中
   
  路由组件一般需要放在router文件夹中需要注册(使用的即为组件的名字)
  非路由组件在使用的时候,一般都是以标签的形式使用
   
  注册完路由,不管是路由组件还是非路由组件,身上都有$route$router
   

image.png

   $route:一般是获取路由信息的【路径、query、params等等】
   $router:一般进行编程式导航进行路由跳转【push、replace】
   

3 路由的跳转

   两种:
   
   声明式导航  router-link,可以进行路由的跳转
   编程式导航  push|replace 可以进行路由的跳转
   
   声明式能做的,编程式导航都能做
   编程式导航除了可以进行路由的跳转,还可以进行其他的业务逻辑

4 Footer组件的显示和隐藏(路由元信息)

    Footer组件:在Home、Search显示Footer组件
               在login、register隐藏Footer组件

    显示或者隐藏组件:v-if、v-show
    我们可以根据组件身上的$route获取当前路由信息,通过路由的路径去判断Footer的显示和隐藏
    
    我们可以通过路由的元信息控制组件是否展示
     {
        path:"/home",
        component:Home,
        meta:{
            footershow:true
        }
    },
     <Footer v-if="$route.meta.footershow"/>
    

5 路由的跳转有几种方式?

  (1)声明式导航,<router-link  to="XXXX">,务必要有to属性,可以实现路由的跳转
  (2)编程式导航:利用组件实例的$router.push|replace方法,可以实现路由的跳转
  

1.6 路由传参,参数有几种写法

   (1)params参数:属于路径当的一部分,需要注意的是,在配置路由的时候占位
   (2 query参数:不属于路径当中的一部分,类似于ajax的queryString      /home?k=v&kv=

第一种:字符串形式

 this.$router.push('/search/'+this.keywords+'?kv='+this.keywords.toUpperCase())

第二种:模板字符串

this.$router.push(`/search/${this.keywords}?kv=${this.keywords.toUpperCase()}`)

第三种:对象的写法(常用),需要给路由定义name

     this.$router.push({
            name:'Search',
            params:{
                keywords:this.keywords
            },
            query:{
                kv:this.keywords.toUpperCase()
            }
        })
  
1.3.2 路由传递参数面试题
  1. 面试题一、路由传递参数(对象写法)path是否可以结合params写法

    回答:不能

     this.$router.push({
            path:'/search',
            params:{
                keywords:this.keywords
            },
            query:{
                kv:this.keywords.toUpperCase()
            }
        })
    
  2. 面试题二:如何指定params参数可传可不传

    说明:配置路由的时候,占位了(params参数),但是路由跳转的时候就不传递,name就会出现问题

    回答:在配置路由的时候,在占位符后面加一个问号

image.png

  1. 面试题三:params参数可传可不传,但是如果传递的是空串如何解决?

    回答:使用undefined来解决传递、不传递的问题

  2. 面试题四:路由组件能不能传递props数据?

    回答:

    三种写法

    路由组件可以传递参数,但是我们一般获取路由参数里面的属性都是通过$route.params.XXX,但是我们得知道,路由组件可以传递props参数。

    第一种:布尔值

     {   
        path:"/search/:keywords?",
        component:Search,
        meta:{
            footershow:true
        },
        name:'Search',
        //第一种:布尔类型,这样可以把params参数作为路由组件身上的属性(只有params)
        props:true,
    },
    
    路由组件中接受keywords
    
    export default{
        name:'search',
        // 路由组件可以传递props
        props:['keywords']
    }
    

第二种:对象写法

    {   
        path:"/search/:keywords?",
        component:Search,
        meta:{
            footershow:true
        },
        name:'Search',
        // 第二种,额外的给路由组件传递一些props
        props:{a:1,b:2}
    },

第三种:函数写法

    {
        path:"/search/:keywords?",
        component:Search,
        meta:{
            footershow:true
        },
        name:'Search',
        // 第三种:最常用,函数写法,可以把params参数,query参数,通过props传递给路由组件
        props:($route)=>{
            return {keywords:$route.params.keywords,k:$route.query}
        }
    },
1.3.3 编程式路由

路由的跳转有两种形式

  1. 声明式导航
  2. 编程式导航

编程式路由跳转到当前路由(参数不变),多次执行会抛出错误(声明式导航没有这种报错,因为vue-router底层已经处理好了)

image.png

为什么编程式导航进行路由跳转就有上面的警告错误呢?

  通过给push方法,传入响应的成功或者错误回调函数,可以捕获到当前的错误,可以解决。

this.$router.push({name:'Search',params:{keywords:''||undefined},query:{kv:this.keywords.toUpperCase()}},()=>{},()=>{})

 但是这种写法“治标不治本”。我们在别的组件中,push、replace编程式导航还是有类似的错误。

push方法是Vue类的一个实例

 原型对象的方法
 VueRouter.prototype.push=function(){
    //函数的上下文为VueRouter类的一个实例

}
$router实际上就是VueRouter的一个实例
let $router=new VueRouter()
//$router是VueRouter类的实例,类的实例可以直接调用类的原型方法,所以对原型方法push进行修改,修改结果会作用于组件实例的$router实例
$router.push(xxx) 

$router是VueRouter类的实例,类的实例可以直接调用类的原型方法,所以对原型方法push进行修改,修改结果会作用于组件实例的$router实例

//重写push方法,先把VueRouter原型对象上的方法,先保存一份
let originPush=VueRouter.prototype.push;
console.log(originPush)
// push方法接受参数:第一个参数是告诉用户你要往哪里跳
VueRouter.prototype.push=function(Location,resolve,reject){
     //分两种情况
     if(resolve&&reject){
         originPush.call(this,Location)
     }else{
         originPush.call(this,Location,()=>{},()=>{})
     }
}

1.4 home页面

由于三级联动在home、search、detail,把三级联动注册为全局组件

  1. 好处:只需要注册一次
  2. 注意:使用的时候无需引入

image.png

1.5 axios二次封装

(1) 为什么要二次封装?

请求拦截器:可以在发请求之前处理一些业务,
响应拦截器,当服务器返回以后,可以处理一些事情

(2) 步骤

  安装axios
  新建文件夹api
  

1.6 接口统一管理

项目很小: 完全可以在组件的生命周期函数中发送请求,获取到服务器的数据,存储在data中


项目很大:

1.7 跨域

如果出现协议、域名、端口号不同的请求,称之为跨域

后台服务器  http://39.98.123.211 
前端项目本地服务器:http://localhost:8080

两者协议相同、域名和端口不通

解决办法:

  JSONP、CROS、代理
  

1.8 进度条 nprogress进度条使用

(1) import nprogress from 'nprogress'

    start:进度条开始   done:进度条结束

(2) 引入进度条的样式

  import "nprogress/nprogress.css"
  进度条的颜色可以修改
  
  

1.9 Vuex

(1) 是什么?

      官方提供的插件,状态管理的
      集中式管理项目中组件共用的数据
      
      

image.png

      切记:并不是全部的项目都需要vuex。如果项目很小,完全不需要Vuex,如果项目很大,数据很多,组件很多,维护很费劲,Vuex
      
      

(2) vuex几大核心概念

    state
    mutations
    actions
    getters
    modules
      

(3) 基本使用

1)第一步:安装
      
      npm install --save vuex
      
  (2) 第二步:使用
      在项目中创建store文件夹
      
      
import Vue from 'vue'
import vuex from 'vuex'

//需要使用插件一次
Vue.use(vuex)


const state={
   count:1,
   age:32
}
//mutations 修改state的唯一手段
const mutations= {
   ADD(state,count){
       state.count++
   },
   MINUS(state){
        state.count--
   }
}
// action:处理action。可以书写自己的业务逻辑,也可以处理异步

const actions={
   add({commit}){
      //这里可以书写业务逻辑,但是不能修改state,唯一能修改state的地方就是mutations
       //所以提交mutations
       commit('ADD')
   },
   minus({commit}){
       commit('MINUS')
   }
}
//getters:可以理解为计算属性,简化仓库数据,让组件获取仓库的数据更加方便
const getters={}

//对外暴露一个Store类实例
export default new vuex.Store({
    state,
    mutations,
    actions,
    getters,

})

第二章:Vue后台管理系统

一、项目介绍

1.1 技术架构

 vue+weback+vuex+vue-router+axios+scss+elementUI
 
 elementUI
 菜单权限
 按钮权限
 数据可视化
 

第三章: 数据可视化

1.1 技术架构

 echarts数据可视化开源库
 canvas画布
 svg矢量图