沈阳建设网站公司,软件界面设计的基本原则,北京核心词优化市场,建工类培训机构目录 服务详情修改优化ProductServiceImplProduct.vue 详情数据-富文本-vue-quill-editor使用步骤测试图片的访问方式富文本集成fastDfs 后台服务上下架#xff08;批量#xff09;前端开始后端完成ProductControllerProductServiceImplProductMapper 前台展示上架前端开始后… 目录 服务详情修改优化ProductServiceImplProduct.vue 详情数据-富文本-vue-quill-editor使用步骤测试图片的访问方式富文本集成fastDfs 后台服务上下架批量前端开始后端完成ProductControllerProductServiceImplProductMapper 前台展示上架前端开始后端完成ProductQueryProductControllerProductMapper测试 前端展示列表和图片product.html 服务高级查询分页查看详情跳转详情页数据展示后台接口ProductControllerProductMapper 前台展示导入vue和axios获取数据.js展示数据图片展示详情名称售价原价销量切换图片js 服务详情修改优化 ProductServiceImpl
product后端保存操作修改 Overridepublic void update(Product product) {ProductDetail detail product.getDetail();if(detail !null){if(detail.getId() !null){productDetailMapper.update(detail);}else{productDetailMapper.save(detail);}}productMapper.update(product);}Product.vue
显示新增界面清除页面缓存 //显示新增界面handleAdd: function () {this.fileList [];//清楚页面缓存数据this.productFormVisible true;//显示新增弹出框this.productForm {id: null,name: ,resources: ,saleprice: 0,costprice: 0,detail:{id:null,intro:,orderNotice:}};},详情数据-富文本-vue-quill-editor
使用步骤
见文档
测试 图片的访问方式
1.链接访问 2.页面本地存储二进制字节码base64加密长度很长不好保存到数据库
富文本集成fastDfs
修改页面本地存储为链接存储步骤见文档 结果
后台服务上下架批量
前端开始
页面加两个按钮未选置灰绑定事件传id数组到后端
el-form-itemel-button typesuccess clickonsale :disabledthis.sels.length0上架/el-button
/el-form-item
el-form-itemel-button typewarning clickoffsale :disabledthis.sels.length0下架/el-button
/el-form-itemsels: [],//列表选中行onsale(){var ids this.sels.map(item item.id);//获取选中的行if(!this.sels || this.sels.length 1){this.$message({ message: 老铁你不选中数据臣妾上架不了啊....,type: error});return;}this.$confirm(确认上架选中记录吗, 温馨提示, {type: warning}).then(() {this.listLoading true;this.$http.post(/product/onsale,ids).then((res) {this.listLoading false;if(res.data.success){this.$message({message: 上架成功,type: success});}else{this.$message({message: res.data.message,type: error});}this.getProducts();});}).catch(() {});},offsale(){var ids this.sels.map(item item.id);//获取选中的行if(!this.sels || this.sels.length 1){this.$message({ message: 老铁你不选中数据臣妾下架不了啊....,type: error});return;}this.$confirm(确认下架选中记录吗, 提示, {type: warning}).then(() {this.listLoading true;this.$http.post(/product/offsale,ids).then((res) {this.listLoading false;if(res.data.success){this.$message({message: 下架成功,type: success});}else{this.$message({message: res.data.message,type: error});}this.getProducts();});}).catch(() {});}后端完成
ProductController /*** 批量上架*/PostMapping(/onsale)public AjaxResult onsale(RequestBody ListLong ids){try {productService.onOrOffSale(ids,1);//flag0下架 1上架return AjaxResult.me();} catch (Exception e) {e.printStackTrace();return AjaxResult.me().setMessage(上架失败e.getMessage());}}/*** 批量下架*/PostMapping(/offsale)public AjaxResult offsale(RequestBody ListLong ids){try {productService.onOrOffSale(ids,0);//flag0下架 1上架return AjaxResult.me();} catch (Exception e) {e.printStackTrace();return AjaxResult.me().setMessage(下架失败e.getMessage());}}ProductServiceImpl Overridepublic void onOrOffSale(ListLong ids, int flag) {//1.判断是上架还是下架MapString,Object map new HashMap();map.put(ids, ids);if(flag 1){//1.1 调整状态//1.2时间map.put(onSaleTime,new Date());productMapper.onSale(map);}else{//1.1 调整状态//1.2时间map.put(offSaleTime,new Date());productMapper.offSale(map);}}ProductMapper !--void onSale(MapString, Object map);--update idonSale UPDATE t_product set state1, onsaletime#{onSaleTime} where id inforeach collectionids itemid open( close) separator,#{id}/foreach/update!--void offSale(MapString, Object map);--update idoffSale UPDATE t_product set state0, offsaletime#{offSaleTime} where id inforeach collectionids itemid open( close) separator,#{id}/foreach/update前台展示上架
前端开始
index修改栏目名称拷贝search为product修改引入路径index支持跳转到productproduct修改栏目名称并支持跳转到index 拷贝success为adoutUs修改引入路径index支持跳转到adoutUsadoutUs修改页面内容
product引入vue和axios用div包住body里的内容写vue实例
后端完成
ProductQuery
Data
public class ProductQuery extends BaseQuery {//查询上下架的标识private Integer state;
}ProductController /*** 前端主站使用的接口,只查询上架的*/PostMapping(/list)public PageListProduct queryWebPage(RequestBody ProductQuery productQuery){productQuery.setState(1);return productService.queryPage(productQuery);}ProductMapper !--Integer queryCount(ProductQuery productQuery);--select idqueryCount parameterTypeProductQuery resultTypeintegerSELECT count(*) FROM t_productinclude refidwhereSql//select!--ListProduct queryData(ProductQuery productQuery)--select idqueryData resultTypeProduct parameterTypeProductQuerySELECT * FROM t_productinclude refidwhereSql/limit #{start},#{pageSize}/select!--Where条件--sql idwhereSqlwhereif testkeyword ! null and keyword ! AND name LIKE concat(%,#{keyword},%)/ifif teststate ! nullAND state #{state}/if/where/sql测试
注释掉拦截器然后可以免登录用swagger测试
前端展示列表和图片
调整入参获取数据遍历按照规格渲染到页面
fastDfs传800×800可以自定转430×430350×35060×60
product.html
ul classam-avg-sm-2 am-avg-md-3 am-avg-lg-4 boxesli v-forproduct in pageList.rowsdiv classi-pic limitimg :srcbaseFastUrl product.resources.split(,)[0] imgSuffix /p classtitle fl【官方旗舰店】{{product.name}}/pp classprice flb¥/bstrong{{product.saleprice}}/strong/pp classnumber fl销量span{{product.salecount}}/span/p/div/li
/ulscript typetext/javascriptnew Vue({el: #productDiv,data: {baseFastUrl: http://115.159.217.249:8888/,imgSuffix: _350x350.jpg,pageList: {total: 0,rows: []},queryParams: {pageSize: 12,currentPage: 1,keyword: ,}},methods: {getProducts() {this.$http.post(/product/list, this.queryParams).then(result {result result.data;//pageList rows totalconsole.log(result);if (result) {this.pageList result;}}).catch(result {console.log(result);alert(系统错误);})}},mounted() {this.getProducts();}})
/script服务高级查询
元素绑定
div classsearch-bar pra nameindex_none_header_sysc href#/aforminput idsearchInput nameindex_none_header_sysc v-modelqueryParams.keyword typetext placeholder搜索 autocompleteoffinput idai-topsearch classsubmit am-btn clicksearch value搜索 index1 typebutton/form
/div方法绑定
search() {this.queryParams.currentPage 1;//定为到第一页this.getProducts();},分页
页数计算与展示不同页查询左右箭头分页查询并限制不超过第一页和最后页
!--分页 --
ul classam-pagination am-pagination-right!--classam-disabled--lia hrefjavascript:; clickhandCurrentPage(queryParams.currentPage -1)laquo;/a/lili v-forpage in countPagea hrefjavascript:; clickhandCurrentPage(page){{page}}/a/lilia hrefjavascript:; clickhandCurrentPage(queryParams.currentPage 1)raquo;/a/li
/ulcomputed: {countPage() {//向上取整return Math.ceil(this.pageList.total / this.queryParams.pageSize);}},handCurrentPage(page) {//动态分页if (page 0) {this.queryParams.currentPage 1;//定位到第一页} else if (page this.countPage) {this.queryParams.currentPage this.countPage;//定位到最后页} else {this.queryParams.currentPage page;//定位到所选页}this.getProducts();},查看详情
跳转详情页
li v-forproduct in pageList.rows clickgoDetail(product.id)goDetail(productId) {//跳转到详情页//当前窗体打开//location.href http://localhost/productDetail.html?productId productId;window.open(http://localhost/productDetail.html?productId productId);},数据展示后台接口
ProductController GetMapping(/{id})ApiOperation(value 查询一条服务数据,notes 需要传入id)public Product getById(PathVariable(id) Long id){return productService.getById(id);}ProductMapper resultMap idProductMap typeProduct!--基础属性--id columnid propertyid/result columnname propertyname/result columnresources propertyresources/result columnsaleprice propertysaleprice/result columncostprice propertycostprice/result columnoffsaletime propertyoffsaletime/result columnonsaletime propertyonsaletime/result columnstate propertystate/result columncreatetime propertycreatetime/result columnsalecount propertysalecount/association propertydetail javaTypeProductDetailid columndid propertyid/result columnintro propertyintro/result columnorderNotice propertyorderNotice//association/resultMap!--Product loadById(Long id);--select idloadById resultMapProductMapSELECTp.*, d.id did,d.intro,d.orderNoticeFROMt_product pLEFT JOIN t_product_detail d ON p.id d.product_idWHEREp.id #{id}/select前台展示
导入vue和axios
获取数据.js
script typetext/javascriptnew Vue({el:#productDetailDiv,data:{product:{},fastDfsUrl:http://115.159.217.249:8888,midimgSuffix:_350x350.jpg,smallimgSuffix:_60x60.jpg,resources:[]},mounted(){let productId parseUrlParams2Obj(location.href).productId;this.$http.get(/product/productId).then(result{this.product result.data;if(this.product.resources){this.resources this.product.resources.split(,);}}).catch(result{console.log(result);alert(系统错误);})}});
/script展示数据
图片展示 div classtb-booth tb-pic tb-s310a :hreffastDfsUrlresources[0]img :srcfastDfsUrlresources[0]midimgSuffix alt细节展示放大镜特效 :relfastDfsUrlresources[0] classjqzoom //a/divul classtb-thumb idthumblistli v-for(resource,index) in resourcesdiv classtb-pic tb-s40 tb-selected v-ifindex0a href#img :srcfastDfsUrlresourcesmallimgSuffix :midfastDfsUrlresourcemidimgSuffix :bigfastDfsUrlresource/a/divdiv classtb-pic tb-s40 v-elsea href#img :srcfastDfsUrlresourcesmallimgSuffix :midfastDfsUrlresourcemidimgSuffix :bigfastDfsUrlresource/a/div/li/ul详情 div classam-tab-panel am-fade am-in am-activediv classJ_Branddiv classattr-list-hd tm-clearh4服务简介/h4/divdiv classclear/divdiv v-htmlproduct.detail.intro v-ifproduct.detail/divdiv classclear/div/divdiv classdetailsdiv classattr-list-hd after-market-hdh4预定须知/h4/divdiv classtwlistNewsdiv v-htmlproduct.detail.orderNotice v-ifproduct.detail/div/div/divdiv classclear/div/div名称售价原价销量
略
切换图片js
script typetext/javascript// 切换图片js$(document).ready(function() {$(.jqzoom).imagezoom();$(#thumblist).on(click,#thumblist li a, function() {$(this).parents(li).addClass(tb-selected).siblings().removeClass(tb-selected);$(.jqzoom).attr(src, $(this).find(img).attr(mid));$(.jqzoom).attr(rel, $(this).find(img).attr(big));});/*$(#thumblist li a).click(function() {$(this).parents(li).addClass(tb-selected).siblings().removeClass(tb-selected);$(.jqzoom).attr(src, $(this).find(img).attr(mid));$(.jqzoom).attr(rel, $(this).find(img).attr(big));});*/});
/script
