小知识点
创建分支
在login分支中开发当前项目vue_shop:
打开vue_shop终端,使用git status
确定当前项目状态。
确定当前工作目录是干净的之后,创建一个分支进行开发,开发完毕之后将其合并到master。git checkout -b login
查看新创建的分支:git branch
确定我们正在使用login分支进行开发
提交分支
将代码提交到码云
新建一个项目终端,输入命令git status
查看修改过的与新增的文件内容
将所有文件添加到暂存区:git add .
将所有代码提交到本地仓库:git commit -m
“添加登录功能以及/home的基本结构”
查看分支: git branch
发现所有代码都被提交到了login分支
将login分支代码合并到master主分支,先切换到master:git checkout master
在master分支进行代码合并:git merge login
将本地的master推送到远端的码云:git push
推送本地的子分支到码云,先切换到子分支:git checkout
分支名
然后推送到码云:git push -u origin
远端分支名
token原理分析
客户端 (登录页面输入用户名和密码进行登录)—–> 服务器
<—–(服务器验证通过之后生成该用户的token并返回)
-----|(客户端存储该token)
<----|
(后续所有的请求都携带该token发送请求)------>
(服务器验证token是否通过) |-------
|------>
利用confirm删除文件
首先根据api中的接口创造一个函数包括弹窗组件
1 | <script> |
获取更新页面数据
- 定义getXXXXXXXList()函数
getXXXXXXXList()函数的作用是获取页面数据并在每次打开页面在created()生命周期函数中重新更新整个页面的值
在methods中在生命周期函数中1
2
3
4
5
6
7
8
9
10
11
12
13methods: {
async getCateList() {
const { data: res } = await this.$http.get('categories', { params: this.querInfo })
console.log(res)
if (res.meta.status !== 200) {
return this.$message.error('获取商品分类失败!')
}
console.log(res)
// 把数据列表,赋值给catesult
this.cateList = res.data.result
// 为总数据条数赋值
this.total = res.data.total
}}1
2
3created() {
this.getCateList()
} - 在其他函数调用时有时也需要调用函数
vue中的.then()与.catch()
- .then()
在axios请求完成后执行的下一步操作(异步执行),包括两个参数1
2
3
4
5
6
7axios.post(url, data)
.then(res => {
console.log(res);//第一个参数:成功后返回结果
}, error => {
console.log(error);//第二个参数:请求失败后返回值
}) - .catch()
在.then()中代码逻辑出错、请求失败等的回调函数,防止因代码造成程序崩溃,这里的方法类似于try{}.catch(e){},省略了try{}1
2
3
4
5
6
7
8axios.post(url, data)
.then(data => {
console.log(data)
})
.catch(err => {
console.log(err)//代码错误、请求失败捕获
})
vue中$ref的三种用法
- ref加在普通元素上,用this.$refs.(ref值)获取的是dom元素
- ref加在子组件上,用this.$refs.(ref值)获取到的是组件实例,可以使用组件所有的方法
- 利用v-for和ref获取一组数组或者dom节点
注:- 如果通过v-for遍历相加不同的ref时记得加:号,即:ref=某变量;
- ref需要在dom渲染完成后才会有,在使用的时候确保dom已经渲染完成
添加ref属性获取ref组件及元素1
2
3
4<div id="app">
<h1 ref="h1ele">这是h1</h1>
<hello ref="ho"></hello>
</div>1
2
3
4
5nethods:{
getref(){
this.$refs.h1ele.color='red'
}
}
element ui
Form表单验证
- 需通过rules属性传入约定的验证规则,并将Form-Item的prop属性设置为需校验的字段名。
- 验证规则是加给item的,不是加给文本框的
1
2
3
4
5<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="活动名称" prop="name">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
</el-form>1
2
3
4
5
6
7
8export default {
data() {
rules: {
name: [
{ required: true, message: '请输入活动名称', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
],
}}}
表单的重置
resetFields:对整个表单进行重置,将所有字段值重置为初始值并移除校验结果
1 | <el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules" label-width="0px" class="login_form"> |
表单的预验证
1 | login(){ |
Storage.getItem()的用法
定义
getItem() 作为 Storage 接口的方法,接受一个键名(key name)作为参数,并返回对应键名的值(key’s value)。
- 语法
1
2var aValue = storage.getItem(keyName);
- 返回值
一个 DOMString,键名对应的值。如果键名不存在于存储中,则返回 null。
Storage.setItem()的用法
定义
Storage 接口的 setItem() 方法,接受一个键名和值作为参数,将会把键名添加到给定的 Storage 对象中,如果键名已存在,则更新其对应的值
- 语法
1
storage.setItem(keyName, keyValue);
- 示例
下面函数在本地存储中创建三个数据项1
2
3
4
5
6function populateStorage() {
localStorage.setItem('bgcolor', 'red');
localStorage.setItem('font', 'Helvetica');
localStorage.setItem('image', 'myCat.png');
}
vue使用this.$http.get和this.$http.post传参
get传参方式
1 | this.$http.get('http://localhost:8080/testApi', { |
post传参方式
1 | this.$http.get('http://localhost:8080/testApi', { |
${}
的用法
可以代替 ‘’ 和 “” 在 `` 中可以使用 ${} 直接把变量和字符串拼接起来
- 用法
1
2
3
4
5
6
7
8
9
10
11
12
13
let name = '彭于晏'
console.log( '名字为:'+ name )
console.log( `名字为:${name} ` )
let a='Karry Wang';
let str=`I love ${a}, because he is handsome.`;
//注意:这行代码是用返单号引起来的
alert(str);
自定义校验规则的使用
示例
data()中所需要的数据为一个函数
1 | <script> |
data()中return所需的数据
1 | addFormRules: { |
与服务器api建立联系
若在一个函数中,并要与后台数据库保持同步则需调用axios异步操作
注:async与await为简化promise 函数
示例
1 | async userStateChanged(userinfo) { |
forEach基本用法
定义
forEach() 方法对数组的每个元素执行一次给定的函数。
语法
1 | // 箭头函数 |
示例
1 | const array1 = ['a', 'b', 'c']; |
Vue中ref属性使用的注意事项
- 在vue中为HTML标签设置ref属性,主要是为了一些需要进行操作DOM才能完成的功能而设置的。
- ref属性相当于给标签设置了一个ID,可以使用该特殊标识来进行一些DOM的操作,但是使用的时候有如下几个注意事项:
注: - 使用时不是直接this.ref值进行访问DOM节点,而是需要通过this.$refs.ref值 进行访问DOM节点,因为vue会将实例中所有的ref属性值都保存到vue实例的,$refs属性内。
1
this.$refs.treeRef.getCheckedKeys()
- 所有的ref属性进行的操作都不是响应式的,所以避免在计算属性(Computed),和模板()中使用ref属性。
- ref属性值绑定元素都是唯一的,如果一个ref属性绑定了多个dom节点,那么这个ref属性将会默认绑定到最后设置该ref属性值的DOM节点。
filter的用法
定义
filter()创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素
语法
1 | array.filter(function(currentValue,index,arr),thisValue) |
示例
1 | const array=[14,17,18,32,33,16,40]; |
注意事项
- filter不会对空数组进行检测
- filter不会改变原始数组
vue-table-with-tree-grid
使用
a.先在Vue UI中安装依赖
b.在main.js中引用
1 | import TreeTable from 'vue-table-with-tree-grid' |
c.在子组件中应用
1 | <tree-table :data="cateList" :columns="columns" :selection-type="false" :expand-type="false" show-index index-text="#" border> |
d.配合模板列使用
模板列的使用方法
html内写入
1 | <template slot="isok" slot-scope="scope"> |
scrpt写入
1 | columns: [ |
- 树形结构基本api
具体api看网站
设置分页区域
- 首先引入element ui
1
2
3
4
5
6
7
8
9
10<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="querInfo.pagenum"
:page-sizes="[3, 5, 10, 15]"
:page-size="querInfo.pagesize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
>
</el-pagination> - 在methods中调用函数具体参数见
1
2
3
4
5
6
7
8
9handleCurrentChange(newPage) {
this.querInfo.pagenum = newPage
this.getCateList()
},
handleSizeChange(newSize) {
this.querInfo.pagesize = newSize
this.getCateList()
},
// newSize与newPage为需要更新的值,赋值给data中的对应数据
确定与取消按钮
一般存在于对话框内
- 首先引入element ui中的按钮组件
注:必要时修改点击事件中的函数名1
2
3
4<span slot="footer" class="dialog-footer">
<el-button @click="addCateDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="addCateDialogVisible = false">确 定</el-button>
</span> - 在data中存放addCateDialogVisible将值修改为false
1
addCateDialogVisible: false,
- 在methods中定义函数
1
运用树形结构
- 首先运用element ui引入el-tree
el-tree中有prop属性,prop属性绑定需要引入的内容
data中1
2
3
4
5treeProps: {
label: 'authName',
// label为api中返回的数据名字
children: 'children'
}
el-upload上传头像
- 引入组件el-upload
- 调用多个回调函数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<el-upload
class="avatar-uploader"
ref="uploadRef"
action // 由于自定义上传,所以此值为空
:auto-upload="false" // 是否在选取文件后立即进行上传
:show-file-list="false" // 是否显示已上传文件列表
accept=".jpg,.jpeg,.png,.bmp" // 接受上传的文件类型
:on-change="imgChange" // 图片改变时触发
:file-list="imgList" // 上传的文件列表
:before-upload="beforeUpload" // 上传文件之前的钩子,参数为上传的文件
:limit="1" // 最大长度1
:http-request="uploadImg" // 自定义上传覆盖默认上传
>
// 为展示模块
<img v-if="imageUrl" :src="'********' + imageUrl" class="avatar" /> // ****为后端接口
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload> - 根据需求添加
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59export default {
data() {
return {
imgList: [], // 图片上传列表,已限制最大长度为1
imageUrl: '' // 头像图片链接(图片上传成狗后除了让他返回200,还让他把图片路径发过来,你存在这里)
}
},
methods: {
// 图片改变的钩子
imgChange(img, imgList) {
console.log('文件状态改变')
console.log('当前图片上传列表长度' + imgList.length) // 图片上传列表
// console.log(img.raw) // 这里拿到图片文件
// 再上传前检查文件是否合规
const res = this.beforeUpload(img.raw)
console.log(res)
if (res === true) {
// 上传图片
this.uploadImg(img.raw)
} else {
// 清空上传列表
this.imgList = []
}
},
// 上传前的函数(用于检查图片是否合规)
beforeUpload(file) {
console.log('上传图片前的函数')
// console.log(file)
// 定义要接收的文件类型
const isJPG = file.type === 'image/jpeg' || 'image/png' || 'image/jpg' || 'image/bmp'
// 定义要接受的文件大小限制
const isLt2M = file.size / 1024 / 1024 < 2
if (!isJPG) {
this.$message.error('抱歉,不支持该格式的图片!')
}
if (!isLt2M) {
this.$message.error('请选择2MB以下大小的图片')
}
return isJPG && isLt2M // 只要有一个是false,该函数返回值就是false
},
// 头像自定义上传行为
async uploadImg(img) {
console.log('自定义上传行为')
// console.log(img) // 拿到图片文件
// const { data: res } = await this.$http.post('/Person/touxiang', { avater: img })
// 定义一个formdata对象
const formData = new FormData()
// 通过 append 函数往formdata对象里传参,这里传的是后端需求的接口信息
formData.append('avater', img)
const { data: res } = await this.$http.post('/Person/touxiang', formData)
console.log(res)
console.log(this.imageUrl)
this.imageUrl = res.avater
}
}
}
</script>
element-ui更改表头背景颜色和字体颜色
根据elementui官网的说法,header-cell-style
是表头单元格的 style 的回调方法!!!
1 | <template> |
用/deep/深度监听
1 | <template> |
简述const {data:res}=this.$http.post的作用
const{data} = await login(XXX) 就是es6中的解构赋值,将login(XXX)的data属性取出来。
const {data:res} = await login(XXX)就是将data重命名为res。