自定义模板
HTML部分
添加按钮
添加按钮
<div class="loop-action-bar">
<el-button type="primary" plain @click="addView()">添加</el-button>
</div>
数据展示列表
数据展示列表
<div class="loop-list-box">
<el-table :data="dataBody" style="width: 100%" v-loading="loading">
<el-table-column prop="data_1" label="数据一" width="120">
</el-table-column>
<el-table-column prop="data_2" label="数据二" width="120">
</el-table-column>
<el-table-column label="state" width="120">
<template slot-scope="scope">
<div v-if="scope.row.state === '1'">
<el-tag type="success">正常</el-tag>
</div>
</template>
</el-table-column>
<el-table-column prop="data_3" label="数据三"> </el-table-column>
<el-table-column label="创建时间">
<!-- 插槽用法 -->
<template slot-scope="scope">
<span v-text="formatDate(scope.row.createTime)"></span>
</template>
</el-table-column>
<el-table-column label="更新时间">
<template slot-scope="scope">
<span v-text="formatDate(scope.row.updateTime)"></span>
</template>
</el-table-column>
<el-table-column fixed="right" label="操作" width="200">
<template slot-scope="scope">
<el-button type="primary" size="mini" @click="editView(scope.row)"
>编辑</el-button
>
<el-button type="danger" size="mini" @click="deleteView(scope.row)"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
</div>
删除对话框
<!-- 删除对话框 -->
<div class="loop-dialog-box">
<el-dialog
title="删除提示"
:visible.sync="delete_show_view"
width="30%"
:before-close="handleClose"
>
<span>你确定要删除:{{ delete_body_name }}这个分类吗?</span>
<span slot="footer" class="dialog-footer">
<el-button @click="delete_show_view = false" type="danger" size="mini"
>取 消</el-button
>
<el-button type="primary" @click="doDeleteItem()" size="mini"
>确 定</el-button
>
</span>
</el-dialog>
</div>
添加或更新的对话框
<!-- 添加或更新的对话框 -->
<div class="loop-dialog-addOrUpdate-box">
<el-dialog
:title="editTitle"
:visible.sync="add_edit_show_view"
width="30%"
:before-close="handleClose"
>
<el-form
:label-position="labelPosition"
label-width="80px"
:model="dataForm"
>
<el-form-item label="表单数据一">
<el-input v-model="dataForm.data_1"></el-input>
</el-form-item>
<el-form-item label="表单数据二">
<el-input v-model="dataForm.data_2"></el-input>
</el-form-item>
<el-form-item label="表单数据三">
<el-input
type="textarea"
resize="none"
:rows="2"
v-model="dataForm.data_3"
></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="initForm()" type="danger">取 消</el-button>
<el-button type="primary" @click="doEdit()">{{
editorCommitTitle
}}</el-button>
</div>
</el-dialog>
</div>
分页部分
分页部分
<el-row :gutter="20">
<el-col :span="8" :offset="8">
<div class="navigation-bar" style="padding-top: 40px">
<!-- 分页部分 -->
<el-pagination
background
layout="total, prev, pager, next, jumper"
:hide-on-single-page="true"
:page-size="pageformData.size"
:current-page="pageformData.currentPage"
:total="pageformData.total"
@prev-click="prevPage"
@next-click="nextPage"
@current-change="currentPageChange"
>
</el-pagination>
</div>
</el-col>
</el-row>
上传图片
<el-button
type="primary"
icon="el-icon-edit"
@click="viewUpload()"
circle
></el-button>
<el-dialog
title="提示"
:visible.sync="show"
width="30%"
:before-close="handleClose"
>
<el-form :label-position="labelPosition" label-width="100px">
<el-form-item label="头像">
<el-upload
class="avatar-uploader"
action="http://localhost:8078/halfmoon/images/upload"
:http-request="uploadImg"
:show-file-list="false"
:with-credentials="true"
:before-upload="beforeAvatarUpload"
accept=".png,.jpg,.gif"
>
<img v-if="imageUrl !== ''" :src="imageUrl" class="avatar" />
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="show = false">取 消</el-button>
<el-button type="primary" @click="viewUpload()">确 定</el-button>
</span>
</el-dialog>
<el-form-item label="封面">
<el-upload
class="avatar-uploader"
action="http://localhost:8078/halfmoon/images/upload"
:http-request="uploadImg"
:show-file-list="false"
:with-credentials="true"
:before-upload="beforeAvatarUpload"
accept=".png,.jpg,.gif"
>
<img
v-if="dataForm.imageUrl !== ''"
:src="dataForm.imageUrl"
class="avatar"
/>
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item>
带跳转链接的表格 column
<el-table-column label="标题" width="120">
<template slot-scope="scope">
<el-link
:href="scope.row.targetUrl"
target="_blank"
:underline="false"
>{{ scope.row.title }}</el-link
>
</template>
</el-table-column>
带图片的表格 column
<el-table-column label="轮播图" width="250">
<template slot-scope="scope">
<el-image :src="scope.row.imageUrl" fit="contain">
<div slot="placeholder" class="image-slot">
加载中<span class="dot">...</span>
</div>
</el-image>
</template>
</el-table-column>
JS部分
data 部分
data() {
//这里存数据
return {
delete_body_name: "",
delete_body_data: "",
delete_show_view: false,
add_edit_show_view: false,
add_or_edit_view: "edit",
labelPosition: "right",
loading: true,
dataBody: [
// 这里放列表数据
],
dataForm: {
// 这里放想要修改的数据
id: "",
name: "",
logo: "",
url: "",
state: "",
createTime: "",
updateTime: "",
},
editorCommitTitle: "修改分类",
editTitle: "编辑分类",
pageformData: {
size: 5,
currentPage: 1,
total: 5,
},
imageUrl:"",
show:false,
};
},
日期转换
//日期转换
formatDate(dateStr) {
var date = new Date(dateStr);
return dateUtils.formatDate(date, "yyyy-MM-dd hh:mm:ss");
},
确认关闭对话框
//确认关闭对话框
handleClose(done) {
this.$confirm("确认关闭?")
.then((_) => {
this.initForm();
done();
})
.catch((_) => {});
},
初始化表单对象
//初始化表单对象
initForm() {
//给表单对象 this.dataForm 初始化
this.dialogVisible_addOrUpdate = false;
},
获取分类列表
//获取分类列表
getList() {
//去获取分类列表
//给 this.dataBody 赋值对象数据
this.loading = false;
},
获取分类列表 - 分页
//获取对象列表
getList(currentPage) {
let _this = this;
//去获取对象列表
this.pageformData.currentPage =
currentPage === undefined ? this.pageformData.currentPage : currentPage;
//给 this.bodyData 赋值对象数据
api.getUserList(page,size).then((resp) => {
// console.log(resp);
if (resp.code === api.success_code) {
_this.bodyData = resp.data.records;
_this.pageformData.size = resp.data.size;
_this.pageformData.total = resp.data.total;
_this.pageformData.currentPage = resp.data.current;
api.toast_succ(resp.message);
} else {
api.toast_err(resp.message);
}
});
_this.loading = false;
},
获取当前对象
//获取当前对象
getdataBody(categoryId) {
//防止多人同时修改,可以用mybatis-plus的version 乐观锁
//也就是获取当前对象 发送axios请求吧
this.dialogVisible_addOrUpdate = false;
},
删除 ,打开删除窗口
//删除 ,打开删除窗口
deleteView(item) {
//打开删除窗口,
//进行数据的获取,获取当前对象和删除的对象的名称
//为了执行删除操作可以获取到id
this.delete_show_view = true;
console.log(item);
},
执行删除操作
//执行删除操作
doDeleteItem() {
let _this = this;
//执行删除请求
//完了记得获取最新数据列表
_this.getList(1);
this.delete_show_view = false;
},
打开编辑分类 的对话框
//打开编辑分类 的对话框
editView(item) {
(this.editorCommitTitle = "修改分类"),
(this.editTitle = "编辑分类"),
(this.addOrEdit = "edit");
//调用方法获取最新的数据
this.getdataBody(item.id);
this.add_edit_show_view = true;
// console.log(item);
},
打开添加对话框
//打开添加对话框
addView() {
(this.editorCommitTitle = "添加分类"),
(this.editTitle = "添加分类"),
(this.addOrEdit = "add");
//初始化表单对象
this.initForm();
this.add_edit_show_view = true;
},
执行编辑或执行添加操作
//执行编辑或执行添加操作
doEdit() {
console.log("修改或添加分类");
if (this.addOrEdit === "edit") {
//执行修改
//完了记得获取最新数据列表
} else {
//先判断数据是否为空
//然后进行添加
//完了记得获取最新数据列表
}
this.add_edit_show_view = false;
},
下一页
//下一页
nextPage() {
this.getList(this.pageformData.currentPage + 1);
},
上一页
//上一页
prevPage() {
this.getList(this.pageformData.currentPage - 1);
},
页码改变
//currentPage 改变时会触发
currentPageChange(page) {
this.getList(page);
},
覆盖上传方法
//覆盖上传方法
uploadImg(param) {
// console.log(param);
const formData = new FormData();
formData.append("file", param.file);
formData.append("overwrite", false);
api.uploadImg(formData).then((res) => {
if (res.code === api.success_code) {
api.toast_succ(res.message);
// console.log(res.data.url);
this.imageUrl = res.data.url;
} else {
api.toast_err(res.message);
}
});
},
修改用户头像,使用上传组件
//修改用户头像,使用上传组件
viewUpload() {
this.userInfo.avatar = this.imageUrl;
this.show = !this.show;
},
上传图片前的检查
//上传图片前回调函数
beforeAvatarUpload(file) {
const isJpeg = file.type === "image/jpeg";
const isJpg = file.type === "image/jpg";
const isPng = file.type === "image/png";
const isGif = file.type === "image/gif";
const isLt5M = file.size / 1024 / 1024 < 5;
var isOkUpload = true;
if (!isLt5M) {
this.$message.error("上传头像图片大小不能超过 5MB!");
}
if (!(isJpg || isJpeg || isPng || isGif)) {
this.$message.error("上传头像图片只能是 JPG / jpeg / png / gif 格式!");
isOkUpload = false;
}
return isOkUpload && isLt5M;
},
axios返回通用模板
.then((resp) => {
if (resp.code === api.success_code) {
api.toast_succ(resp.message);
} else {
api.toast_err(resp.message);
}
});
CSS部分
.email-length {
width: 50% !important;
}
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409eff;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
line-height: 178px;
text-align: center;
}
.avatar {
width: 178px;
height: 178px;
display: block;
}
日期转换
export function formatDate(date, format) {
if (/(y+)/.test(format))
format = format.replace(
RegExp.$1,
(date.getFullYear() + "").substr(4 - RegExp.$1.length)
);
var o = {
"M+": date.getMonth() + 1, //month
"d+": date.getDate(), //day
"h+": date.getHours(), //hour
"m+": date.getMinutes(), //minute
"s+": date.getSeconds(), //second
};
for (var k in o) {
if (new RegExp("(" + k + ")").test(format))
var str = o[k] + ''
format = format.replace(
RegExp.$1,
(RegExp.$1.length === 1) ? str : padLeftZero(str)
);
}
return format;
}
function padLeftZero(str) {
return ("00" + str).substr(str.length)
}
封装axios
import axios from 'axios';
import { Message } from 'element-ui';
//携带证书
axios.defaults.withCredentials = true;
//设置超时时间
axios.defaults.timeout = 100000;
export default {
//get请求
requestGet(url, params = {}) {
return new Promise((resolve, reject) => {
axios.get(url, params).then(res => {
resolve(res.data)
}).catch(error => {
reject(error)
})
})
},
// post请求
requestPost(url, params = {}) {
return new Promise((resolve, reject) => {
axios.post(url, params).then(res => {
resolve(res.data)
}).catch(error => {
reject(error)
})
})
},
// post请求
requestPostFormData(url, params = {}) {
return new Promise((resolve, reject) => {
axios.post(url, params, {
headers: { 'Content-Type': 'multipart/form-data' }
}).then(res => {
resolve(res.data)
}).catch(error => {
reject(error)
})
})
},
// delete请求
requestDelete(url, params = {}) {
return new Promise((resolve, reject) => {
axios.delete(url, params).then(res => {
resolve(res.data)
}).catch(error => {
reject(error)
})
})
},
// put请求
requestPut(url, params = {}) {
return new Promise((resolve, reject) => {
axios.put(url, params).then(res => {
resolve(res.data)
}).catch(error => {
reject(error)
})
})
}
}
// 2.请求拦截器
axios.interceptors.request.use(config => {
//发请求前做的一些处理,数据转化,配置请求头,设置token,设置loading等,根据需求去添加
return config
}, error => {
Promise.reject(error)
})
// 3.响应拦截器
axios.interceptors.response.use(response => {
//接收到响应数据并成功后的一些共有的处理,关闭loading等
return response
}, error => {
/***** 接收到异常响应的处理开始 *****/
if (error && error.response) {
// 1.公共错误处理
// 2.根据响应码具体处理
switch (error.response.status) {
case 400:
error.message = '错误请求'
break;
case 401:
error.message = '未授权,请重新登录'
break;
case 403:
error.message = '拒绝访问'
break;
case 404:
error.message = '请求错误,未找到该资源'
// window.location.href = "/NotFound"
break;
case 405:
error.message = '请求方法未允许'
break;
case 408:
error.message = '请求超时'
break;
case 500:
error.message = '服务器端出错'
break;
case 501:
error.message = '网络未实现'
break;
case 502:
error.message = '网络错误'
break;
case 503:
error.message = '服务不可用'
break;
case 504:
error.message = '网络超时'
break;
case 505:
error.message = 'http版本不支持该请求'
break;
default:
error.message = `连接错误${error.response.status}`
}
} else {
// 超时处理
if (JSON.stringify(error).includes('timeout')) {
Message.error('服务器响应超时,请刷新当前页')
}
error.message = '连接服务器失败'
}
Message.error(error.message)
/***** 处理结束 *****/
//如果不需要错误处理,以上的处理过程都可省略
return Promise.resolve(error.response)
})