第一章: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
$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 路由传递参数面试题
-
面试题一、路由传递参数(对象写法)path是否可以结合params写法
回答:不能
this.$router.push({ path:'/search', params:{ keywords:this.keywords }, query:{ kv:this.keywords.toUpperCase() } })
-
面试题二:如何指定params参数可传可不传
说明:配置路由的时候,占位了(params参数),但是路由跳转的时候就不传递,name就会出现问题
回答:在配置路由的时候,在占位符后面加一个问号
-
面试题三:params参数可传可不传,但是如果传递的是空串如何解决?
回答:使用undefined来解决传递、不传递的问题
-
面试题四:路由组件能不能传递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 编程式路由
路由的跳转有两种形式
- 声明式导航
- 编程式导航
编程式路由跳转到当前路由(参数不变),多次执行会抛出错误(声明式导航没有这种报错,因为vue-router底层已经处理好了)
为什么编程式导航进行路由跳转就有上面的警告错误呢?
通过给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.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) 是什么?
官方提供的插件,状态管理的
集中式管理项目中组件共用的数据
切记:并不是全部的项目都需要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矢量图