VueJS电商管理系统（Element-UI）B站学习笔记

B站地址

https://www.bilibili.com/video/av74592164?p=9
感谢老师精彩的讲解，让我受益匪浅。这个视频的系列缺少划分插槽的案例，所以略显繁琐

登录页面

后端传递一个token 传递给前端。
前端保持登录状态。

cookie session 不存在跨域

token 跨域

token 原理

客户端获得token之后存储，后续请求都携带token 。然后后端去校验就可以实现登录校验了

git 创建分支

git checkout -b login //login分支
git branch //查看所有分支

login页面的搭建

style lang="less" scoped //支持less CSS，scoped样式当前页面生效

路由占位符,根路径,
路由重定向

    path: '/',
    redirect:"/login"

CSS 居中显示
position:absolute 页面可以位移
left:50%;
top:50%;
transform:translate(-50%,-50%) //横轴数轴移动

el表单

<el-from>
    <el-form-item> asd </el-form-item>
</el-from>

form 数据绑定model,验证规则rule,prop,ref相当于ID，然后直接this.$refs去操作这个控件。validate验证

<el-from :model="form">
  <el-form-item label="活动名称">
    <el-input v-model="form.name"></el-input>
  </el-form-item>
  <el-form-item label="活动区域">
    <el-select v-model="form.region" placeholder="请选择活动区域">
      <el-option label="区域一" value="shanghai"></el-option>
      <el-option label="区域二" value="beijing"></el-option>
    </el-select>
  </el-form-item>
</el-from>
-----
formData:{
    name:'',
    region:'',
}

axios 请求，挂载在全局组件，//补充知识 await async

import axios from 'axios'
axios.default.baseURL=''//url地址
Vue.prototype.$http=axios

----
使用：this.$http.post()

token 保存到客户端的 sessionStorage中，然后跳转
保存token属性

windows.sessionStorage.setItem("token",token)
跳转

this.$router.push("/home")

登录退出功能

路由导航守卫控制。
在router.js中写

//挂载路由导航守卫
router.beforeEach((to,from,nex)=?{
//to 将要访问的路径
//from 代表从哪个路径跳转而来
//next（)放行next（/1ogin'）强制跳转
    if(to.path===‘/login')return next()
//获取token
    const tokenstr=window.sessionstorage.getItem('token')
    if(Itokenstr)return next"/login'
    next（)
})

实现退出页面。//销毁本地的token

window.sessionStorage.clear();//清空Token
this.$router.push("/1ogin"];//跳转登录页

整体布局：先上下划分，再左右划分。
<el-container>
<！--头部区域-->
<el-header></el-header>
<el-container>
<！--侧边栏区域-->
<el-aside></el-aside>
<！--右侧主体区域-->
<el-main></el-main>
</el-container>
</el-container>

App.vue充满整个页面,style

html,body,#app{
 		height: 100%;
 		width: 100%;
	}

侧边栏布局 //未实现
https://www.bilibili.com/video/av74592164?p=32

通过接口获取菜单数据
axios请求拦截器添加token。在main.js修改

//axios请求拦截
axios.interceptors.request.use(config=>{
//为请求头对象，添加Token验证的Authorization字段
config.headers.Authorization =window.sessionstorage.getItem('token')
return config
}）

获取到菜单数据后，将菜单添加到左侧。

data(){
return{
//左侧菜单数据
menulist：[]
}，
created（){
this.getMenuList()
}，
methods：{
1ogout（){//退出
window.sessionStorage.clear()
this.$router.push("/1ogin')
}，
//获取所有的菜单
async getMenulist(){
const { data:res}=await this.$http.get('menus') //将data数据给变量res
if(res.meta.status !==200)return this.$message.error(res.meta.msg)
this.menulist=res.data
console.1og(res)
}
}

循环渲染左侧菜单栏

<！--一级菜单-->
<el-submenu :index="item.id+''" v-for="item in menulist" :key="item.id"> // 只接受字符串
<！--一级菜单的模板区域-->
<template slot="title">
<！--图标-->
<iclass="el-icon-location"></i>
<！--文本-->
<span>{{item.authName}}</span>
</template>

二级菜单

<！--二级菜单-->
<el-menu-item :index="subItem.id+''" v-for="subItem in item.children" :key="subItem.id">
<template slot="title">
<！--图标-->
<i class="el-icon-location"></i>
<！--文本-->
<span>{[sdbrtem.authName}}</span>
</template>
</el-menu-item>

当前激活菜单高亮颜色。
active-text-color 高亮颜色
el-ico 图标

for 循环，渲染不同的图标呢
增加一个data,类型为对象，根据菜单的ID绑定不同的ico。然后再渲染的时候根据ID转成key值，根据对象的key值获取到ico,动态绑定ico

多个菜单可以同时展开
unique-opened 属性 //这个等于true 每次只能展开一个

去除二级导航突出的问题 //通过CSS样式调整
https://www.bilibili.com/video/av74592164?p=37

侧边栏折叠展开
1.增加一个 toggle-button 来控制 //本质上div来绑定点击事件
2.将侧边栏 width绑定，跟着ico变化
https://www.bilibili.com/video/av74592164?p=38

右边中心内容如何去做

https://www.bilibili.com/video/av74592164?p=39
1.添加子路由,router.js
children
2.添加路由占位符

3.批量绑定，通过 index绑定path

二级菜单点击高亮保持显示 //保存链接的激活状态
https://www.bilibili.com/video/av74592164?p=42
定义属性放在sessionstorage，全局调用

面包屑导航区域
https://www.bilibili.com/video/av74592164?p=43

表格添加按钮显示，通过状态域插槽实现
https://www.bilibili.com/video/av74592164?p=47
element https://element.eleme.cn/#/zh-CN/component/table 搜索 scope

表格添加操作显示，通过状态域插槽实现
https://www.bilibili.com/video/av74592164?p=48

表格增加分页显示
https://www.bilibili.com/video/av74592164?p=49

表格通过单个操作调用api方法
https://www.bilibili.com/video/av74592164?p=50

在单页面增加一个页面添加用户 //本质上是通过一个对话框来控制iframe嵌套？？？？？
https://www.bilibili.com/video/av74592164?p=53
在Dialog 添加一个form页面去实现，这是真牛逼，真没想到是这样做的

自定义校验规则，可以采用正则表达式来定义，奇怪的是是在data里面直接 var 定义
https://element.eleme.cn/#/zh-CN/component/form

表单重置 resetFields
先定义ref ,在通过$refs
https://www.bilibili.com/video/av74592164?p=55

修改用户，操作的步骤有点繁琐
https://www.bilibili.com/video/av74592164?p=63
先校验表单，然后发送请求。请求为成功的话，更新绑定的数值，关闭对话框，刷新数据列表，提示修改成功

Message 消息提示
https://www.bilibili.com/video/av74592164?p=64

table 展开行，行里面的某个状态要变化，也就是每一行的一个值都不一样。视频中是采用获取到这个参数，在这个参数里面添加属性，然后v-model绑定这个就行
https://www.bilibili.com/video/av74592164?p=133

文本框自动获得焦点
https://www.bilibili.com/video/av74592164?p=134

全局过滤器，案例过滤时间戳，显示正确的时间
https://www.bilibili.com/video/av74592164?p=145

通过编程式导航跳转页面。不再是在一个页面添加一个消息框了，而是直接跳转页面了
https://www.bilibili.com/video/av74592164?p=149

如何阻止标签页的切换
https://www.bilibili.com/video/av74592164?p=159

uoload上传组件的使用
https://www.bilibili.com/video/av74592164?p=165

uoload上传附带token
https://www.bilibili.com/video/av74592164?p=166

数组查询元素所在数组的索引值
var a= this.arr.findIndex(i=>i.pic===file)
https://www.bilibili.com/video/av74592164?p=168

图片预览功能=对话框+url
https://www.bilibili.com/video/av74592164?p=169

富文本编辑器
https://www.bilibili.com/video/av74592164?p=170

对象的深拷贝。
用插件，lodash,方法cloneDeep(obj)
提交表单的时候，格式与当前表单的格式不一致，并且当前绑定了v-model。所以需要深拷贝出一个对象，再把拷贝的对象修改上传
https://www.bilibili.com/video/av74592164?p=172

时间线的使用
https://www.bilibili.com/video/av74592164?p=183

echarts使用
https://www.bilibili.com/video/av74592164?p=187

echarts 合并对象
https://www.bilibili.com/video/av74592164?p=188

添加首部展示网络进度条的样子
https://www.bilibili.com/video/av74592164?p=192

打包发布的时候自动去除console.log
插件：babel-plugin-transfrom-remove-console
https://www.bilibili.com/video/av74592164?p=194

项目分调试环境与发布环境
因为发布环境要去除一些东西，而这些东西在调试时期是需要的
https://www.bilibili.com/video/av74592164?p=195

vue.config.js
https://www.bilibili.com/video/av74592164?p=198

优化正式项目
加载外部CDN资源
https://www.bilibili.com/video/av74592164?p=200

渲染测试和正式环境的区别
有些值只在测试环境显示，有些值只在生产环境显示
https://www.bilibili.com/video/av74592164?p=203

路由懒加载
import
https://www.bilibili.com/video/av74592164?p=204

开启Gzip压缩
https://www.bilibili.com/video/av74592164?p=206

https证书
https://www.bilibili.com/video/av74592164?p=207

pm2管理应用
https://www.bilibili.com/video/av74592164?p=207

完结撒花

posted @ 2020-03-19 19:52 Alex_Mercer 阅读(683) 评论(0) 编辑收藏举报

刷新页面返回顶部

Alex_Mercer