time|hutool时间开发
hutool时间操作类;获取当前时间；字符串和时间戳的格式转换等操作
admin 发布的文章
element ui 同时提交表单数据和多张图片
前端相关
// 图片数量限制
limit: 1,
//页面上存的暂时图片地址List
fileList: [{url: ""}],
//图片地址
imageUrl: "",
dialogVisible: false,
imgUpload: {
// 设置上传的请求头部
headers: {
Authorization: "Bearer " + getToken()
},
// 图片上传的方法地址:
url: process.env.VUE_APP_BASE_API + "/system/articles/upload",
}
<!--:action里面放图片上传调取的后台方法 :headers设置上传的请求头部,使请求携带自定义token，获取访问权限 -->
<!--:on-success图片上传成功后的回调方法，用于拿到图片存储路径等信息-->
<!--:before-upload图片上传前的逻辑判断，例如判断图片大小，格式等-->
<!--:on-preview图片预览方法 :on-remove图片删除方法 list-type代表文件列表的类型 -->
<!--file-list存放成功上传图片列表，这里此属性用于修改功能时页面已有图片的显示-->
<el-form-item label="预览缩略图" prop="articleImg" label-width="40">
<el-upload
:action="imgUpload.url"
:headers="imgUpload.headers"
list-type="picture-card"
:limit="limit"
:on-exceed="handleExceed"
:on-success="handlePictureSuccess"
:before-upload="beforeAvatarUpload"
:on-preview="handlePictureCardPreview"
:file-list="fileList"
>
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" v-if="imageUrl" :src="imageUrl" alt="">
</el-dialog></el-form-item>
图片上传地址:ip/upload
@Log(title = "文章图片上传", businessType = BusinessType.UPDATE)
@PostMapping("/upload")
public AjaxResult avatar(@RequestParam("fileimg") MultipartFile file) throws IOException
{
if (!file.isEmpty())
{
LoginUser loginUser = tokenService.getLoginUser(ServletUtils.getRequest());
String imgurl = FileUploadUtils.upload(XJConfig.getUploadPath(), file);
AjaxResult ajax = AjaxResult.success();
ajax.put("imgUrl", imgurl.substring(1));
return ajax;
}
return AjaxResult.error("上传图片异常，请联系管理员");
}
返回信息
msg: "操作成功", imgUrl: "profile/upload/2022/05/15/3b59f532-e6f3-4396-a478-895b86750777.png", code: 200}
code: 200
imgUrl: "profile/upload/2022/05/15/3b59f532-e6f3-4396-a478-895b86750777.png"
msg: "操作成功"
图片上传前的相关判断
beforeAvatarUpload(file) {
const isJPG = file.type === 'image/jpeg' || file.type == 'image/png';
const isLt2M = file.size / 1024 / 1024 < 5;
if (!isJPG) {
this.$message.error('上传头像图片只能是 JPG/PNG 格式!');
}
if (!isLt2M) {
this.$message.error('上传头像图片大小不能超过 5MB!');
}
return isJPG && isLt2M;
},
//图片预览
handlePictureCardPreview(file) {
console.log("444444444444",file);
this.imageUrl= file.url;
this.dialogVisible = true;
},
//图片上传成功后的回调, file
handlePictureSuccess(res) {
//设置图片访问路径 （articleImg 后台传过来的的上传地址）
console.log("111",res.imgUrl);
this.$forceUpdate();
this.imageUrl= process.env.VUE_APP_BASE_API +res.imgUrl;
},// 文件个数超出
handleExceed() {
this.$modal.msgError(`上传链接LOGO图片数量不能超过 ${this.limit} 个!`);
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.id != null) {
updateGoods(this.form).then(response => {
this.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addGoods(this.form).then(response => {
this.msgSuccess("新增成功");
this.open = false;
this.getList();
});
}
}
});
},
https://www.cnblogs.com/springclout/p/16066242.html
https://blog.csdn.net/qq_44872773/article/details/124232965
mybatis系列教程：一对多数据操作
技术依赖:如无特殊说明;所有配置和技术选型均采用Ruoyi-vue快速开发框架
SpringBoot
Mybatis
Mysql
vue-element ui说明:一个订单中有多种商品;所以有一个订单表有一个订单详情表
说明问题:
表结构设计:
订单表:order
order_id 订单表ID
订单详情表:order_items
id ：详情表ID
order_id：订单表ID
goods_id：商品ID增加订单:
Controller层代码:
mybatis xml的写法
collection主要是应对表关系是一对多的情况
property:属性
javaType:
<resultMap>
<result property="orderId" column="order_id" />
<result property="goodsAmount" column="goods_amount" />
<collection property="orderItems" column="dept_id" javaType="java.util.List" resultMap="orderItemsResult" />
</resultMap>
<resultMap id="YshopOrderItemsResult" type="orderItems">
<id property="id" column="id" />
<result property="goodsId" column="goods_id"/>
<result property="price" column="price"/>
</resultMap>
也可以这样写
<resultMap type="YshopGoodsType" id="YshopGoodsTypeResult">
<result property="id" column="id" />
<result property="name" column="name" />
<result property="params" column="params" />
<collection property="students" ofType="Student">
<result property="id" column="sid"/>
<result property="name" column="sname"/>
<result property="tid" column="tid"/>
</collection>
<collection property=""></collection>
</resultMap>
SQL语句
前端返回一条详情信息
/*java代码*/
public Order selectById()
select * from order left join order_items on order.id=order_items.order_id where order.id=100;
方式二:mybatis 一对多查询方式二
相关文章:
《事务的处理》
https://blog.csdn.net/weixin_46645338/article/details/123987406
https://blog.csdn.net/weixin_45877245/article/details/119821218
[1]:
element ui select el-select
el-select select下拉选择框常用使用说明。
SpringBoot+Hutool Excel数据库导入
开发环境:
RuoYi-Vue
jdk1.8
SpringBoot 2.0
Hutool
Vue+Element UI文件上传导入
1.文件上传:(element-upload)
1.1 界面展示
前端代码【完整代码】
<el-dialog :title="upload.title" :visible.sync="upload.open" :close-on-click-modal="false" width="400px" append-to-body>
<el-upload
ref="upload"
:limit="1"
accept=".xlsx, .xls"
:headers="upload.headers"
:action="upload.url + '?updateSupport=' + upload.updateSupport"
:disabled="upload.isUploading"
:on-progress="handleFileUploadProgress"
:on-success="handleFileSuccess"
:auto-upload="false"
drag
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">
将文件拖到此处，或
<em>点击上传</em>
</div>
<div class="el-upload__tip" slot="tip">
<el-checkbox v-model="upload.updateSupport" />是否更新已经存在的代表品数据
<el-link type="info" style="font-size:12px" @click="importTemplate">下载模板</el-link>
</div>
<div class="el-upload__tip" style="color:#ff0000" slot="tip">提示：仅允许导入“xls”或“xlsx”格式文件！</div>
</el-upload>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitFileForm">确 定</el-button>
<el-button @click="upload.open = false">取 消</el-button>
</div>
</el-dialog>
1.2 导入前夕
1:文件格式判断 例如 仅允许导入doc,excel或者其他文件格式
2:数据是否为空 例如:那一列可以为空 哪一列不可以为空
3:数据是否 例如:该用字典的用字典 该咋样的该咋样
1.3 导入数据
2.Excel文件解析(Hutool中的poi封装类ExcelReader)
@Log(title = "", businessType = BusinessType.EXPORT)
@PostMapping("/imports")
public AjaxResult imports(MultipartFile file, boolean updateSupport) throws Exception
{
//Workbook wb= WorkbookFactory.create(file.getInputStream());
InputStream inputStream = null;
try{
inputStream = file.getInputStream();}catch (Exception e){
return ResponseData.fail(ResponseCodeEnum.ERROR_PARAM_INVALID);}
ExcelReader excelReader = ExcelUtil.getReader(inputStream, "导入材料清单");
}
携带多个参数的文件上传
相关文档:
1.文件是如何上传的。
2.文件上传原理。