学习 spring boot 笔记 vue.js 开发日志2024-04-10

开发日志2024/04/10

1、根据id修改表中的状态字段

开发思路：前台点击"发货"按钮以后，触发事件将此条数据的id作为参数传递给后端，后端写api来实现根据id来修改’发货字段’为’已发货’

代码实现：

前端

class="el-icon-s-goods el-icon--right" />发货

//创建发货的触发事件

fahuo(fahuoInfo) {

this.$confirm('确定要发货吗？', '提示', {

confirmButtonText: '确定',

cancelButtonText: '取消',

type: 'warning'

}).then(() => {

//调用后台接口,将发货字段修改为'已发货'

this.$http({

url: `orders/fahuo/${this.fahuoInfo}`,

method: 'post',

}).then(res => {

console.log(res)

console.log(res.data)

console.log('发货成功');

})

console.log(fahuoInfo)

}).catch(() => {

console.log('取消发货');

});

后端

Controller.java

@RequestMapping("/fahuo/{id}")

public R fahuo(@PathVariable("id") Long id){

//TODO 根据前端传过来的id来修改所对应的数据字段

int num = ordersService.updateFaHuoById(id.toString());

if (num != 0) {

System.out.println("修改条数为：" + num);

}

return R.ok();

}

---------------------

ServiceImpl.java

@Override

public int updateFaHuoById(String id) {

return baseMapper.updateFaHuoById(id);

}

--------------------------

Dao.xml

update orders set fahuostatus='已发货' where id=#{id}

2、前端已发货订单页面修改操作—去除’发货’操作

**开发思路：**在前端Vue中的el-table中去除发货按钮

代码实现：

3、分店已发货页面将’发货’操作修改为’收货’操作，并实现点击修改字段内容

**开发思路：**和上述删除’发货’按钮类似，将’发货’按钮修改为’收货’按钮，点击’收货’按钮以后，触发事件，同时将此条数据的id传给后台，后台写api，修改完成字段为’已完成’

代码实现：

前端

class="el-icon-s-shop el-icon--right" />收货

--------

shouhuo(shouhuoInfo) {

this.$confirm('确定要收货吗？', '提示', {

confirmButtonText: '确定',

cancelButtonText: '取消',

type: 'warning'

}).then(() => {

//调用后台接口,将

//调用后台接口,将发货字段修改为'已发货'

this.$http({

url: `fendianordersfahuo/shouhuo/${shouhuoInfo}`,

method: 'post',

}).then(res => {

console.log(res)

console.log(res.data)

console.log('收货成功');

})

}).catch(() => {

console.log('取消收货');

});

后端

/**

* 后端收货按钮

@RequestMapping("/shouhuo/{id}")

public R fahuo(@PathVariable("id") Long id){

//TODO 根据前端传过来的id来修改所对应的数据字段

int num = ordersService.updateShouHuoById(id.toString());

if (num != 0) {

System.out.println("修改条数为：" + num);

}

return R.ok();

}

@Override

public int updateShouHuoById(String id) {

return baseMapper.updateShouHuoById(id);

}

--------

update orders set wanchengstatus='已完成' where id=#{id}

4、修改侧边导航栏菜单中的显示

**开发思路：**将"普通用户年消费信息管理"中的涉及到饼状图的数据复制到"普通用户月消费信息管理"中，将"普通用户年消费信息管理"改为"普通用户消费管理",在menu.js文件中修改路径，其余同理实现

代码实现：

前端

--------------

dataXiaoliang: [],

dataNianXiaoliang: [],

-----------------------

mounted() {

this.Draw();

this.$http({

url: 'yonghuyuexiaofeixinxi/xiaofei',

method: 'get'

}).then(res => {

console.log(res.data)

// 读取接口请求成功回传回来的数据

var Yonghuyuexiaofeixinxis = res.data.Yonghuyuexiaofeixinxis

// 定义数组，存放一会覆盖echarts图形的数据

var data = []

// 循环遍历数组，取出数据，转成和data一样的格式

for (var i = 0; i < Yonghuyuexiaofeixinxis.length; i++) {

var d = { name: '', value: 0 }

d.name = Yonghuyuexiaofeixinxis[i].xingming

d.value = Yonghuyuexiaofeixinxis[i].yuexiaofeie

// 往data数组中添加数据

data.push(d)

}

// 排序，b - a降序——a - b升序

data.sort((a, b) => b.value - a.value)

// 覆盖data(){}中全局变量的数据

this.dataXiaoliang = data

// 画出图形

this.Draw()

}).catch(err => {

console.log(err)

console.log("后台接口请求失败！")

})

this.DrawNian();

//绘制年销量的图

this.$http({

url: 'yonghunianxiaofeixinxi/xiaofei',

method: 'get'

}).then(res => {

console.log(res.data)

// 读取接口请求成功回传回来的数据

var Yonghunianxiaofeixins = res.data.Yonghunianxiaofeixins

// 定义数组，存放一会覆盖echarts图形的数据

var data = []

console.log(Yonghunianxiaofeixins.length)

// 循环遍历数组，取出数据，转成和data一样的格式

for (var i = 0; i < Yonghunianxiaofeixins.length; i++) {

var d = { name: '', value: 0 }

d.name = Yonghunianxiaofeixins[i].xingming

d.value = Yonghunianxiaofeixins[i].nianxiaofeie

// 往data数组中添加数据

data.push(d)

}

// 排序，b - a降序——a - b升序

data.sort((a, b) => b.value - a.value)

// 覆盖data(){}中全局变量的数据

this.dataNianXiaoliang = data

// 画出图形

this.DrawNian()

}).catch(err => {

console.log(err)

console.log("后台接口请求失败！")

})

----------------------

//绘制饼状图

Draw() {

// 基于准备好的dom，初始化echarts实例

let myChart = this.$echarts.init(document.getElementById('myChart'))

// 绘制图表

myChart.setOption({

title: {

text: '普通用户月销量统计(饼状图)',

x: 'center'

// options配置项

tooltip: {

trigger: 'item'

legend: {

top: '5%',

left: 'center'

series: [

{

name: 'Access From',

type: 'pie',

radius: ['40%', '70%'],

avoidLabelOverlap: false,

itemStyle: {

borderRadius: 10,

borderColor: '#fff',

borderWidth: 2

label: {

show: false,

position: 'center'

emphasis: {

label: {

show: true,

fontSize: 40,

fontWeight: 'bold'

}

labelLine: {

show: false

data: this.dataXiaoliang

}

]

})

DrawNian() {

// 基于准备好的dom，初始化echarts实例

let myChartNian = this.$echarts.init(document.getElementById('myChartNian'))

// 绘制图表

myChartNian.setOption({

title: {

text: '普通用户年销量统计(饼状图)',

x: 'center'

// options配置项

tooltip: {

trigger: 'item'

legend: {

top: '7%', //调整图例的位置

left: 'center'

series: [

{

center: ['50%', '60%'], // 调整饼图位置

name: 'Access From',

type: 'pie',

radius: ['40%', '70%'],

avoidLabelOverlap: false,

itemStyle: {

borderRadius: 10,

borderColor: '#fff',

borderWidth: 2

label: {

show: false,

position: 'center'

emphasis: {

label: {

show: true,

fontSize: 40,

fontWeight: 'bold'

}

labelLine: {

show: false

data: this.dataNianXiaoliang

}

]

})

}

labelLine: {

show: false

data: this.dataNianXiaoliang

}

]

})

夸智网

学习 spring boot 笔记 vue.js 开发日志2024-04-10

人工智能 AIGC 最新ChatGPT4.0工具使用教程：GPTs使用，Midjourney绘画，AI换脸，Suno-AI音乐生成大模型一站式系统使用教程

【Apache】Apache 如何使用其他端口

发表评论取消回复

夸智网

学习 spring boot 笔记 vue.js 开发日志2024-04-10

人工智能 AIGC 最新ChatGPT4.0工具使用教程：GPTs使用，Midjourney绘画，AI换脸，Suno-AI音乐生成大模型一站式系统使用教程

【Apache】Apache 如何使用其他端口

相关文章

发表评论取消回复