B074-详情富文本 服务上下架 高级查询 分页 查看详情

这篇具有很好参考价值的文章主要介绍了B074-详情富文本 服务上下架 高级查询 分页 查看详情。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

服务详情修改优化

B074-详情富文本 服务上下架 高级查询 分页 查看详情,笔记总结,前端,后端,java,es6

ProductServiceImpl

product后端保存操作修改

    @Override
    public 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

使用步骤

见文档

测试

B074-详情富文本 服务上下架 高级查询 分页 查看详情,笔记总结,前端,后端,java,es6
B074-详情富文本 服务上下架 高级查询 分页 查看详情,笔记总结,前端,后端,java,es6

图片的访问方式

1.链接访问,
2.页面本地存储二进制字节码,base64加密,长度很长不好保存到数据库,

富文本集成fastDfs

修改页面本地存储为链接存储,步骤见文档
结果:
B074-详情富文本 服务上下架 高级查询 分页 查看详情,笔记总结,前端,后端,java,es6

后台服务上下架(批量)

前端开始

页面加两个按钮,未选置灰,绑定事件,传id数组到后端,

<el-form-item>
	<el-button type="success" @click="onsale" :disabled="this.sels.length===0">上架</el-button>
</el-form-item>
<el-form-item>
	<el-button type="warning" @click="offsale" :disabled="this.sels.length===0">下架</el-button>
</el-form-item>
		sels: [],//列表选中行
		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 List<Long> ids){
        try {
            productService.onOrOffSale(ids,1);//flag:0下架 1上架
            return AjaxResult.me();
        } catch (Exception e) {
            e.printStackTrace();
            return AjaxResult.me().setMessage("上架失败!"+e.getMessage());
        }
    }

    /**
     * 批量下架
     */
    @PostMapping("/offsale")
    public AjaxResult offsale(@RequestBody List<Long> ids){
        try {
            productService.onOrOffSale(ids,0);//flag:0下架 1上架
            return AjaxResult.me();
        } catch (Exception e) {
            e.printStackTrace();
            return AjaxResult.me().setMessage("下架失败!"+e.getMessage());
        }
    }
ProductServiceImpl
    @Override
    public void onOrOffSale(List<Long> ids, int flag) {
        //1.判断是上架还是下架
        Map<String,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(Map<String, Object> map);-->
    <update id="onSale" >
        UPDATE t_product set state=1, onsaletime=#{onSaleTime} where id in
        <foreach collection="ids" item="id" open="(" close=")" separator=",">
            #{id}
        </foreach>
    </update>


    <!--void offSale(Map<String, Object> map);-->
    <update id="offSale" >
        UPDATE t_product set state=0, offsaletime=#{offSaleTime} where id in
        <foreach collection="ids" item="id" open="(" close=")" separator=",">
            #{id}
        </foreach>
    </update>

前台展示上架

前端开始

index修改栏目名称,拷贝search为product,修改引入路径,index支持跳转到product,product修改栏目名称并支持跳转到index,
拷贝success为adoutUs,修改引入路径,index支持跳转到adoutUs,adoutUs修改页面内容,

product引入vue和axios,用div包住body里的内容,写vue实例,

后端完成
ProductQuery
@Data
public class ProductQuery extends BaseQuery {
    //查询上下架的标识
    private Integer state;
}
ProductController
    /**
     * 前端主站使用的接口,只查询上架的
     */
    @PostMapping("/list")
    public PageList<Product> queryWebPage(@RequestBody ProductQuery productQuery){
        productQuery.setState(1);
        return productService.queryPage(productQuery);
    }
ProductMapper
    <!--Integer queryCount(ProductQuery productQuery);-->
    <select id="queryCount" parameterType="ProductQuery" resultType="integer">
        SELECT count(*) FROM t_product
        <include refid="whereSql"/>
    </select>

    <!--List<Product> queryData(ProductQuery productQuery)-->
    <select id="queryData" resultType="Product" parameterType="ProductQuery">
        SELECT * FROM t_product
        <include refid="whereSql"/>
        limit #{start},#{pageSize}
    </select>

    <!--Where条件-->
    <sql id="whereSql">
        <where>
            <if test="keyword != null and keyword != ''">
                AND name LIKE concat("%",#{keyword},"%")
            </if>
            <if test="state != null">
                AND state = #{state}
            </if>
        </where>
    </sql>
测试

注释掉拦截器,然后可以免登录用swagger测试

前端展示列表和图片

调整入参获取数据,遍历,按照规格渲染到页面

fastDfs传800×800可以自定转430×430,350×350,60×60,

product.html
<ul class="am-avg-sm-2 am-avg-md-3 am-avg-lg-4 boxes">
	<li v-for="product in pageList.rows">
		<div class="i-pic limit">
			<img :src="baseFastUrl + product.resources.split(',')[0] + imgSuffix" />
			<p class="title fl">【官方旗舰店】{{product.name}}</p>
			<p class="price fl">
				<b>¥</b>
				<strong>{{product.saleprice}}</strong>
			</p>
			<p class="number fl">
				销量<span>{{product.salecount}}</span>
			</p>
		</div>
	</li>
</ul>
<script type="text/javascript">
    new 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  total
                        console.log(result);
                        if (result) {
                            this.pageList = result;
                        }
                    })
                    .catch(result => {
                        console.log(result);
                        alert("系统错误!");
                    })
            }
        },
        mounted() {
            this.getProducts();
        }
    })
</script>

服务高级查询

元素绑定

<div class="search-bar pr">
	<a name="index_none_header_sysc" href="#"></a>
	<form>
		<input id="searchInput" name="index_none_header_sysc" v-model="queryParams.keyword" type="text" placeholder="搜索" autocomplete="off">
		<input id="ai-topsearch" class="submit am-btn" @click="search" value="搜索" index="1" type="button">
	</form>
</div>

方法绑定

search() {
		this.queryParams.currentPage = 1;//定为到第一页
		this.getProducts();
	},

分页

页数计算与展示,不同页查询,左右箭头分页查询并限制不超过第一页和最后页,

<!--分页 -->
<ul class="am-pagination am-pagination-right">
	<!--class="am-disabled"-->
	<li>
		<a href="javascript:;" @click="handCurrentPage(queryParams.currentPage -1)">&laquo;</a>
	</li>

	<li v-for="page in countPage">
		<a href="javascript:;" @click="handCurrentPage(page)">
			{{page}}
		</a>
	</li>

	<li><a href="javascript:;" @click="handCurrentPage(queryParams.currentPage +1)">&raquo;</a></li>
</ul>
	computed: {
		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-for="product in pageList.rows" @click="goDetail(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 id="ProductMap" type="Product">
        <!--基础属性-->
        <id column="id" property="id"/>
        <result column="name" property="name"/>
        <result column="resources" property="resources"/>
        <result column="saleprice" property="saleprice"/>
        <result column="costprice" property="costprice"/>
        <result column="offsaletime" property="offsaletime"/>
        <result column="onsaletime" property="onsaletime"/>
        <result column="state" property="state"/>
        <result column="createtime" property="createtime"/>
        <result column="salecount" property="salecount"/>

        <association property="detail" javaType="ProductDetail">
            <id column="did" property="id"/>
            <result column="intro" property="intro"/>
            <result column="orderNotice" property="orderNotice"/>
        </association>
    </resultMap>

    <!--Product loadById(Long id);-->
    <select id="loadById" resultMap="ProductMap">
        SELECT
            p.*, d.id did,
            d.intro,
            d.orderNotice
        FROM
            t_product p
        LEFT JOIN t_product_detail d ON p.id = d.product_id
        WHERE
            p.id =  #{id}
    </select>
前台展示
导入vue和axios
获取数据.js
<script type="text/javascript">
    new 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 class="tb-booth tb-pic tb-s310">
			<a :href="fastDfsUrl+resources[0]">
				<img :src="fastDfsUrl+resources[0]+midimgSuffix" alt="细节展示放大镜特效" :rel="fastDfsUrl+resources[0]" class="jqzoom" />
			</a>
		</div>
		<ul class="tb-thumb" id="thumblist">
			<li v-for="(resource,index) in resources">
				<div class="tb-pic tb-s40 tb-selected" v-if="index==0">
					<a href="#"><img :src="fastDfsUrl+resource+smallimgSuffix" :mid="fastDfsUrl+resource+midimgSuffix" :big="fastDfsUrl+resource"></a>
				</div>
				<div class="tb-pic tb-s40" v-else>
					<a href="#"><img :src="fastDfsUrl+resource+smallimgSuffix" :mid="fastDfsUrl+resource+midimgSuffix" :big="fastDfsUrl+resource"></a>
				</div>
			</li>
		</ul>
详情
		<div class="am-tab-panel am-fade am-in am-active">
			<div class="J_Brand">
				<div class="attr-list-hd tm-clear">
					<h4>服务简介:</h4></div>
				<div class="clear"></div>
				<div v-html="product.detail.intro" v-if="product.detail">
				</div>
				<div class="clear"></div>
			</div>
			<div class="details">
				<div class="attr-list-hd after-market-hd">
					<h4>预定须知</h4>
				</div>
				<div class="twlistNews">
					<div v-html="product.detail.orderNotice" v-if="product.detail">
					</div>
				</div>
			</div>
			<div class="clear"></div>
		</div>
名称,售价,原价,销量

文章来源地址https://www.toymoban.com/news/detail-602993.html

切换图片js
<script type="text/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>

到了这里,关于B074-详情富文本 服务上下架 高级查询 分页 查看详情的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • linux--top命令查看系统所有详情

    Linux系统可以通过 top 命令查看系统的CPU、内存、运行时间、交换分区、执行的线程等信息。通过top命令可以有效的发现系统的缺陷出在哪里。是内存不够、CPU处理能力不够、IO读写过高。 一、top命令的第一行“top - 19:56:47 up 39 min, 3 users, load average: 0.00, 0.00, 0.00”显示的内容依

    2024年02月16日
    浏览(43)
  • 【 文本到上下文 #4】NLP 与 ML

            欢迎回到我们的 NLP 博客系列!当我们进入第四部分时,焦点转移到机器学习 (ML) 和自然语言处理 (NLP) 之间的动态相互作用上。在本章中,我们将深入探讨 ML 和 NLP 的迷人协同作用,解开理论概念和实际应用。         AI、ML 和 NLP 虽然经常互换使用,但

    2024年01月20日
    浏览(44)
  • C# 纯text文本字符添加上下角标

    工作的需求,需要在GridView列HeaderText中插入带入带有上标和下标的字符串,比如这样的一个字符串:。。 解决办法:使用转义字符加Unicode的NumEntity就可以实现了。定义字符串如下:\\\"O#8322;\\\"。其中O#8322;为 。 实现:     效果:     一些常用字符如下: Common Arithmetic Alebgra C

    2024年02月03日
    浏览(30)
  • 【文本到上下文 #5】:RNN、LSTM 和 GRU

            欢迎来到“完整的 NLP 指南:文本到上下文 #5”,这是我们对自然语言处理 (NLP) 和深度学习的持续探索。从NLP的基础知识到机器学习应用程序,我们现在深入研究了神经网络的复杂世界及其处理语言的深刻能力。         在本期中,我们将重点介绍顺序数据

    2024年01月16日
    浏览(38)
  • 6.6.6、查看 SELinux 安全上下文

    关注公众号 “融码一生”,领取全套 PDF / 电子书 SELinux 管理过程中,进程是否可以正确地访问文件资源取决于它们的安全上下文。进程和文件都有自己的安全上下文,SELinux 会为进程和文件添加安全信息标签(比如 SELinux 用户、角色、类型、类别等),当运行 SELinux 后所有这

    2024年04月28日
    浏览(31)
  • Python高级语法:with语句和上下文管理器

    1.文件操作说明: ①文件使用完后必须关闭。 ②因文件对象会占用操作系统的资源,并且操作系统同一时间能打开的文件数量也是有限的。 例如:  2. 存在的安全隐患: ① 由于文件读写时都有可能产生IOError,一旦出错,后面的f.close()就不会调用。 例如: 运行结果: 3.try…except…

    2024年02月04日
    浏览(59)
  • 【文本到上下文 #2】:NLP 的数据预处理步骤

            欢迎阅读此文,NLP 爱好者!当我们继续探索自然语言处理 (NLP) 的广阔前景时,我们已经在最初的博客中探讨了它的历史、应用和挑战。今天,我们更深入地探讨 NLP 的核心——数据预处理的复杂世界。         这篇文章是我们的“完整 NLP 指南:文本到上下文

    2024年01月18日
    浏览(36)
  • RabbitMQ查询队列使用情况和消费者详情实现

    spring-boot-starter-amqp 是Spring Boot框架中与AMQP(高级消息队列协议)相关的自动配置启动器。它提供了使用AMQP进行消息传递和异步通信的功能。 以下是 spring-boot-starter-amqp 的主要特性和功能: 自动配置: spring-boot-starter-amqp 通过自动配置功能简化了与AMQP相关的组件的集成。它根

    2024年02月12日
    浏览(35)
  • 【Django | 开发】面试招聘信息网站(美化admin站点&添加查看简历详情链接)

    🤵‍♂️ 个人主页: @计算机魔术师 👨‍💻 作者简介:CSDN内容合伙人,全栈领域优质创作者。 🌐 推荐一款找工作神器网站: 宝藏网站 |笔试题库|面试经验|实习招聘内推| 该文章收录专栏 ✨—【Django | 项目开发】从入门到上线 专栏—✨ 由于前文所开发的简历投递,并将简

    2023年04月20日
    浏览(49)
  • 高级网络技术ENSP(1-2章原理详情和配置)手敲有误请私信修正

    第一章 1.企业网体系结构 1.1接入层 (Access layer):为终端设备提供接入和转发。 汇聚层(aggregation Layer):这一层的交换机需要将接入层各个交换机发来的流量进行汇聚。 核心层 (Core Layer):使用高性能的核心层交换机提供流量快速转发。 2.网络可靠性 2.1 BFD(Bidirectional Forwarding

    2024年01月16日
    浏览(35)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包