微服务 教程
1085个小节阅读:196.5k
C语言快速入门
JAVA全系列 教程
面向对象的程序设计语言
Python全系列 教程
Python3.x版本,未来主流的版本
人工智能 教程
顺势而为,AI创新未来
大厂算法 教程
算法,程序员自我提升必经之路
C++ 教程
一门通用计算机编程语言
微服务 教程
目前业界流行的框架组合
web前端全系列 教程
通向WEB技术世界的钥匙
大数据全系列 教程
站在云端操控万千数据
AIGC全能工具班
A A
White Night
编写ProductMapper
xxxxxxxxxx
Product findOne(int pid);
编写ProductMapper.xml
xxxxxxxxxx
<select id="findOne" resultMap="productMapper">
SELECT *
FROM product
LEFT JOIN category ON product.cid = category.`cid`
where pid = #{pid}
</select>
编写ProductService
xxxxxxxxxx
public Product findOne(int pid){
Product product = productMapper.findOne(pid);
return product;
}
public void update(Product product){
productMapper.updateById(product);
}
编写ProductController
xxxxxxxxxx
"/edit") (
public ModelAndView edit(Integer pid) {
// 查询被修改的产品
Product product = productService.findOne(pid);
// 查询所有产品类别
List<Category> categoryList = categoryService.findAll();
ModelAndView modelAndView = new ModelAndView();
modelAndView.addObject("product", product);
modelAndView.addObject("categoryList", categoryList);
modelAndView.setViewName("/backstage/product_edit");
return modelAndView;
}
"/update") (
public String update(Product product) {
productService.update(product);
return "redirect:/backstage/product/all";
}
编写页面product_edit.html
xxxxxxxxxx
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>修改旅游产品</title>
<th:block th:replace="/backstage/common_resources::common_css"></th:block>
<th:block th:replace="/backstage/common_resources::common_js"></th:block>
</head>
<body class="hold-transition skin-purple sidebar-mini">
<header th:replace="~{/backstage/common_header::header}"></header>
<aside th:replace="~{/backstage/common_aside::aside}"></aside>
<div class="wrapper">
<div class="content-wrapper">
<!-- 内容头部 -->
<section class="content-header">
<h1>
旅游产品管理
<small>修改旅游产品</small>
</h1>
<ol class="breadcrumb">
<li><a href="@{/backstage/index}"><i class="fa fa-dashboard"></i> 首页</a></li>
<li><a href="@{/backstage/product/all}">旅游产品管理</a></li>
<li class="active">修改旅游产品</li>
</ol>
</section>
<!-- 内容头部 /-->
<!-- 正文区域 -->
<section class="content">
<div class="row data-type">
<div class="col-md-2 title" style="height: 110px">产品图片</div>
<div class="col-md-8 data" style="height: 110px">
<form id="uploadPImage" enctype="multipart/form-data">
<input type="file" name="file" id="pImageFile">
</form>
</div>
<script>
$(function (){
$("#pImageFile").change(function (){
// 异步提交表单
$("#uploadPImage").ajaxSubmit({
url:"/backstage/product/upload",
type: "post",
success:function (result){
// 上传成功后,图片回显到pImage上
$("#pImage").attr("src",result.data[0]);
// 上传成功后,图片地址放入产品表单的隐藏域中
$("#hiddenPImage").val(result.data[0]);
}
})
})
})
</script>
<div class="col-md-2 data" style="height: 110px">
<img height="100" th:src="${product.pImage}" id="pImage">
</div>
<form th:action="@{/backstage/product/update}" method="post">
<input type="hidden" name="pImage" id="hiddenPImage">
<input type="hidden" name="pid" th:value="${product.pid}">
<div class="col-md-2 title">产品名称</div>
<div class="col-md-4 data">
<input type="text" class="form-control" th:value="${product.productName}" name="productName">
</div>
<div class="col-md-2 title">产品类型</div>
<div class="col-md-4 data">
<select class="form-control" name="cid">
<option th:each="category:${categoryList}"
th:value="${category.cid}"
th:text="${category.cname}"
th:selected="${category.cid eq product.cid}"></option>
</select>
</div>
<div class="col-md-2 title">价格</div>
<div class="col-md-4 data">
<input type="number" class="form-control" th:value="${product.price}" name="price">
</div>
<div class="col-md-2 title">热线电话</div>
<div class="col-md-4 data">
<input type="text" class="form-control" th:value="${product.hotline}" name="hotline" value="">
</div>
<div class="col-md-2 title">状态</div>
<div class="col-md-4 data">
<select class="form-control" name="status">
<option value="true">开启</option>
<option value="false">关闭</option>
</select>
</div>
<div class="col-md-6 data"></div>
<div class="col-md-2 title" style="height: 350px">产品详情</div>
<div class="col-md-10 data" style="height: 350px">
<div id="div1" th:utext="${product.productDesc}"></div>
<textarea id="text1" name="productDesc" style="width:100%; height:200px;" hidden></textarea>
<script>
var E = window.wangEditor
var editor = new E('#div1')
var $text1 = $('#text1')
editor.customConfig.onchange = function (html) {
// 监控变化,同步更新到 textarea
$text1.val(html)
}
// 自定义菜单配置
editor.customConfig.menus = [
'head', // 标题
'bold', // 粗体
'fontSize', // 字号
'fontName', // 字体
'italic', // 斜体
'underline', // 下划线
'foreColor', // 文字颜色
'backColor', // 背景颜色
'justify', // 对齐方式
'image', // 插入图片
'undo', // 撤销
]
// 配置上传图片服务器端地址
editor.customConfig.uploadImgServer = '/backstage/product/upload';
// 配置上传图片的参数名
editor.customConfig.uploadFileName = 'file';
editor.create()
// 初始化 textarea 的值
$text1.val(editor.txt.html())
</script>
</div>
<div class="col-md-2 title"></div>
<div class="col-md-10 data text-center">
<button type="submit" class="btn bg-maroon">保存</button>
<button type="button" class="btn bg-default" onclick="history.back(-1);">返回</button>
</div>
</form>
</div>
</section>
<!-- 正文区域 /-->
</div>
</div>
<footer th:replace="~{/backstage/common_footer::footer}"></footer>
</body>
</html>
启动项目,测试方法