Vue、layui学习记录笔记

前记

	我是做后端Java开发的,自己也偶尔写一些简答的vue,在这里记录一些vue的好用的技巧.写的不好,大佬请直接略过.

1. vue table的数据的格式转换
   当后端传的参数是一个未经转化的时间. 直接在table列中使用如下写法 .

<el-table :data="data" border stripe @selection-change="handleSelectionChange">
// 其他数据省略
<el-table-column label="生日" prop="birthday" :formatter="formatDate"></el-table-column>
</el-table>

使用vue中的 :formatter 转化参数格式
在vue的methods中定义一个 formatDate 方法
写法如下

			//时间格式化
				formatDate(row, column) {
					let date = row[column.property];
					if (date) {
						return this.transformDate(date,false)
					} else {
						return ''
					}
				},
				//标准时间格式转yyyy-MM-dd HH:mm:ss
				transformDate(date,buildHmsFlag) {
					if (date) {
						let dt = new Date(date);
						let yearAndMonthAndDate = dt.getFullYear() + '-' +
								((dt.getMonth() + 1) < 10 ? ('0' + (dt.getMonth() + 1)) : (dt.getMonth() + 1)) + '-' +
								(dt.getDate() < 10 ? ('0' + dt.getDate()) : dt.getDate());
						if (buildHmsFlag) {
							return yearAndMonthAndDate + ' ' +
									(dt.getHours() < 10 ? ('0' + dt.getHours()) : dt.getHours()) + ':' +
									(dt.getMinutes() < 10 ? ('0' + dt.getMinutes()) : dt.getMinutes()) + ':' +
									(dt.getSeconds() < 10 ? ('0' + dt.getSeconds()) : dt.getSeconds())
						}
						return yearAndMonthAndDate;
					} else {
						return ''
					}
				},

然后经过这种写法 当后端返回的数据 是 “2023-08-17T17:31:19” 时,根据自己的需要来转化想要的 时间格式.

2. vue 封装 各种http类型的请求包括 验证用户登录信息

// 基础的访问路径,不用在每个请求上加 请求前缀啦
let baseUrl='http://127.0.0.1:8080';
// 不用验证登录信息的url 比如登录接口,获取验证码接口
let passUrl='';

// 封装 axios的 基础的http请求
let baseApi=function (method,url,data){
    return  axios({
        method: method,
        url: baseUrl+url,
        data: data,
        withCredentials: true
    })
}

// 封装delete请求 delete 请求的时候,一般参数是数组对象 这时候在传递参数的时候,直接把参数用?符号拼接在url上就行 ,后面会举例示范.
let deleteApi=function (url){
    return axios({
        method: 'delete',
        url: baseUrl+url
    })
}

let postApi=function (url,data){
    return axios.post(  baseUrl+url, data, {
        withCredentials: true
    })
}

let getApi=function (url){
    return axios.get(  baseUrl+url, {
        withCredentials: true
    })
}



// 添加请求拦截器
axios.interceptors.request.use(
    function (config) {
       let targetUrl= config.url
        var loginUser = localStorage.getItem("loginUser");
        if (!loginUser &&
            !targetUrl.endsWith(loginUrl)
            &&!targetUrl.endsWith(codeUrl)) {
      		// 如果在本地没有登录用户信息 也不是要放行的url 那么可以直接在这里用window.location 进行页面跳转到登录页.
        }
        return config;
    },
    function (error) {
        // 对请求错误做些什么
        return Promise.reject(error);
    }
);

// 添加响应拦截器
axios.interceptors.response.use(
    function (response) {
        // 对响应数据做些什么
        // 可以在这里处理返回的数据、错误状态码等
        // 这里主要拦截后段返回的状态码,比如是404 或者其他自定义的状态码,如未登录 就可以直接跳转登录页.
        return response;
    },
    function (error) {
        // 对响应错误做些什么
        return Promise.reject(error);
    }
);

示范 使用自定义封装的deleteApi

点击批量删除按钮的时候需要进行删除提示 
<!-- 删除提示框 -->
			<el-dialog title="提示" :visible.sync="deleteDialogVisible" width="300px" center>
				<div class="del-dialog-cnt">删除不可恢复，是否确定删除？</div>
				<span slot="footer" class="dialog-footer">
					<el-button @click="deleteDialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="multipleDel">确 定</el-button>
				</span>
			</el-dialog>

比如在table列表中的删除/批量删除 写法如下 
// 需要引入qs和自定义的封装的api.js 
//<script src="js/qs.js"></script>
//<script src="js/api.js" type="text/javascript"></script>
// 这是一个自定义 的methods ,放在table栏数据操作按钮的点击事件
async deleteUser(id) {
					// 弹框
					const confirmResult = await this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).catch(err => err)
					// 成功删除为confirm 取消为 cancel
					if (confirmResult != 'confirm') {
						return this.$message.info("已取消删除");
					}
					var qs = Qs;
					let params = {
						ids: [id]
					};
					deleteApi('user/delete?'+qs.stringify(params, {
						indices: false
					}))
						.then(resp => {
							if (200 == resp.data.code) {
								// 提示成功 并调用刷新列表方法刷新列表 注意要设置为当前页码为1 
								this.$message.success("操作成功！！！");
							} else {
								// 提示失败及失败原因
								this.$message.error(resp.data.msg);
							}
						})
						.catch(error => {
							this.$message.error(error.response.data);
						})
				}

以上方法这样写的原因主要是后端的批量删除也和单个删除是同一个接口需要数组的参数

批量删除的写法如下

首先在页面上监听 checkbox的选中将选中的参数放在需要传递的参数里面
定义一个方法
// 监听checkbox
```xml
			handleSelectionChange: function(val) {
					let _this = this;
					_this.multipleSelection = []; //每次改动重置ID
					val.forEach((item) => {
						_this.multipleSelection.push(item.id)
					})
				},
				

使用此方法的方式也很简单直接通过@selection-change 组件

<el-table :data="list" border stripe @selection-change="handleSelectionChange">

调用批量删除方法

		multipleDel() {
					let params = {
						ids: this.multipleSelection
					};
					var qs = Qs;
					let paramsSerializer =qs.stringify(params, {indices: false});
					deleteApi('user/delete?'+paramsSerializer
					).then(resp => {
							if (200 == resp.data.code) {
								this.$message.success("操作成功！！！");
								// 调用刷新页面的接口
							} else {
							//提示报错信息
								this.$message.error(resp.data.msg);
							}
						})
						.catch(error => {
							this.$message.error(error);
						})
					this.deleteDialogVisible = false; //关闭删除提示模态框
				}

— 持续更新