服務(wù)詳情修改優(yōu)化
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
顯示新增界面清除頁(yè)面緩存
//顯示新增界面
handleAdd: function () {
this.fileList = [];//清楚頁(yè)面緩存數(shù)據(jù)
this.productFormVisible = true;//顯示新增彈出框
this.productForm = {
id: null,
name: '',
resources: '',
saleprice: 0,
costprice: 0,
detail:{
id:null,
intro:'',
orderNotice:''
}
};
},
詳情數(shù)據(jù)-富文本-vue-quill-editor
使用步驟
見文檔
測(cè)試
圖片的訪問方式
1.鏈接訪問，
2.頁(yè)面本地存儲(chǔ)二進(jìn)制字節(jié)碼，base64加密，長(zhǎng)度很長(zhǎng)不好保存到數(shù)據(jù)庫(kù)，
富文本集成fastDfs
修改頁(yè)面本地存儲(chǔ)為鏈接存儲(chǔ)，步驟見文檔
結(jié)果：
后臺(tái)服務(wù)上下架（批量）
前端開始
頁(yè)面加兩個(gè)按鈕，未選置灰，綁定事件，傳id數(shù)組到后端，
<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: '老鐵，你不選中數(shù)據(jù)，臣妾上架不了啊....',type: 'error'});
return;
}
this.$confirm('確認(rèn)上架選中記錄嗎？', '溫馨提示', {
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: '老鐵，你不選中數(shù)據(jù)，臣妾下架不了啊....',type: 'error'});
return;
}
this.$confirm('確認(rèn)下架選中記錄嗎？', '提示', {
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 調(diào)整狀態(tài)
//1.2時(shí)間
map.put("onSaleTime",new Date());
productMapper.onSale(map);
}else{
//1.1 調(diào)整狀態(tài)
//1.2時(shí)間
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>
前臺(tái)展示上架
前端開始
index修改欄目名稱，拷貝search為product，修改引入路徑，index支持跳轉(zhuǎn)到product，product修改欄目名稱并支持跳轉(zhuǎn)到index，
拷貝success為adoutUs，修改引入路徑，index支持跳轉(zhuǎn)到adoutUs，adoutUs修改頁(yè)面內(nèi)容，
product引入vue和axios，用div包住body里的內(nèi)容，寫vue實(shí)例，
后端完成
ProductQuery
@Data
public class ProductQuery extends BaseQuery {
//查詢上下架的標(biāo)識(shí)
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>
測(cè)試
注釋掉攔截器，然后可以免登錄用swagger測(cè)試
前端展示列表和圖片
調(diào)整入?yún)@取數(shù)據(jù)，遍歷，按照規(guī)格渲染到頁(yè)面
fastDfs傳800×800可以自定轉(zhuǎn)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("系統(tǒng)錯(cuò)誤！");
})
}
},
mounted() {
this.getProducts();
}
})
</script>
服務(wù)高級(jí)查詢
元素綁定
<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;//定為到第一頁(yè)
this.getProducts();
},
分頁(yè)
頁(yè)數(shù)計(jì)算與展示，不同頁(yè)查詢，左右箭頭分頁(yè)查詢并限制不超過第一頁(yè)和最后頁(yè)，文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-602993.html
<!--分頁(yè) -->
<ul class="am-pagination am-pagination-right">
<!--class="am-disabled"-->
<li>
<a href="javascript:;" @click="handCurrentPage(queryParams.currentPage -1)">«</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)">»</a></li>
</ul>
computed: {
countPage() {
//向上取整
return Math.ceil(this.pageList.total / this.queryParams.pageSize);
}
},
handCurrentPage(page) {//動(dòng)態(tài)分頁(yè)
if (page == 0) {
this.queryParams.currentPage = 1;//定位到第一頁(yè)
} else if (page >= this.countPage) {
this.queryParams.currentPage = this.countPage;//定位到最后頁(yè)
} else {
this.queryParams.currentPage = page;//定位到所選頁(yè)
}
this.getProducts();
},
查看詳情
跳轉(zhuǎn)詳情頁(yè)
<li v-for="product in pageList.rows" @click="goDetail(product.id)">
goDetail(productId) {//跳轉(zhuǎn)到詳情頁(yè)
//當(dāng)前窗體打開
//location.href = "http://localhost/productDetail.html?productId=" + productId;
window.open("http://localhost/productDetail.html?productId=" + productId);
},
數(shù)據(jù)展示后臺(tái)接口
ProductController
@GetMapping("/{id}")
@ApiOperation(value = "查詢一條服務(wù)數(shù)據(jù)",notes = "需要傳入id")
public Product getById(@PathVariable("id") Long id){
return productService.getById(id);
}
ProductMapper
<resultMap id="ProductMap" type="Product">
<!--基礎(chǔ)屬性-->
<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>
前臺(tái)展示
導(dǎo)入vue和axios
獲取數(shù)據(jù).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("系統(tǒng)錯(cuò)誤");
})
}
});
</script>
展示數(shù)據(jù)
圖片展示
<div class="tb-booth tb-pic tb-s310">
<a :href="fastDfsUrl+resources[0]">
<img :src="fastDfsUrl+resources[0]+midimgSuffix" alt="細(xì)節(jié)展示放大鏡特效" :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>服務(wù)簡(jiǎn)介：</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>預(yù)定須知</h4>
</div>
<div class="twlistNews">
<div v-html="product.detail.orderNotice" v-if="product.detail">
</div>
</div>
</div>
<div class="clear"></div>
</div>
名稱，售價(jià)，原價(jià)，銷量
略文章來(lái)源地址http://www.zghlxwxcb.cn/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>
到了這里，關(guān)于B074-詳情富文本 服務(wù)上下架 高級(jí)查詢 分頁(yè) 查看詳情的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
