公司网站建设费入哪个科目,网站建设与设计意义,如何在建设部网站查询获奖情况,免费的外网服务器新增菜品/套餐分类
页面原型
当我们在后台系统中添加菜品/套餐时,需要选择一个菜品/套餐分类,在移动端也会按照菜品分类和套餐分类来展示对应的菜品和套餐
第一步: 用户点击确定按钮执行submitForm函数发送Ajax请求,将新增菜品/套餐表单中输入的数据以json形式提交给服务端,…新增菜品/套餐分类
页面原型
当我们在后台系统中添加菜品/套餐时,需要选择一个菜品/套餐分类,在移动端也会按照菜品分类和套餐分类来展示对应的菜品和套餐
第一步: 用户点击确定按钮执行submitForm函数发送Ajax请求,将新增菜品/套餐表单中输入的数据以json形式提交给服务端,等待服务端响应数据后执行回调函数 !--用户在表单页面category/list.html中填写分类名称和排序数字--
el-form classdemo-form-inline label-width100pxel-form-item label分类名称el-input v-modelclassData.name placeholder请输入分类名称 maxlength14//el-form-itemel-form-item label排序el-input v-modelclassData.sort typenumber placeholder请输入排序 //el-form-item
/el-formspan slotfooter classdialog-footerel-button sizemedium clickclassData.dialogVisible false取 消/el-buttonel-button typeprimary sizemedium clicksubmitForm()确 定/el-buttonel-button v-ifaction ! edit typeprimary sizemedium classcontinue clicksubmitForm(go) 保存并继续添加 /el-buttonsubmitForm(st) {const classData this.classDataconst valid (classData.name 0 ||classData.name) (classData.sort 0 || classData.sort)if (this.action add) {if (valid) {const reg /^\d$/if (reg.test(classData.sort)) {addCategory({name: classData.name,type:this.type, sort: classData.sort}).then(res {console.log(res)if (res.code 1) {this.$message.success(分类添加成功)if (!st) {this.classData.dialogVisible false} else {this.classData.name this.classData.sort }this.handleQuery()}}}}}第二步: 服务端Controller接收页面提交的数据并通过Service调用Mapper操作数据库保存添加的菜品/套餐分类信息 数据模型
数据模型category表: id是主键name字段表示分类名称是唯一的type字段为1表示菜品分类为2表示套餐分类 后端处理请求
第一步: 创建实体类Category,对于createUser和createTime等公共字段使用自动填充功能
Data
public class Category implements Serializable {private static final long serialVersionUID 1L;private Long id;//类型 1 菜品分类 2 套餐分类private Integer type;//分类名称private String name;//顺序private Integer sort;//创建时间TableField(fill FieldFill.INSERT)private LocalDateTime createTime;//更新时间TableField(fill FieldFill.INSERT_UPDATE)private LocalDateTime updateTime;//创建人TableField(fill FieldFill.INSERT)private Long createUser;//修改人TableField(fill FieldFill.INSERT_UPDATE)private Long updateUser;
}第二步: 创建Mapper接口CategoryMapper和Service接口CategoryService及其实现类CatrgoryServiceImpl
Mapper
public interface CategoryMapper extends BaseMapperCategory {
}public interface CategoryService extends IServiceCategory {
}Service
public class CategoryServiceImpl extends ServiceImplCategoryMapper, Category implements CategoryService {
}第三步: 在CategoryController控制层中编写控制器方法,将接收到的json数据添加到数据库中并响应一个成功的提示信息
Slf4j
RestController
RequestMapping(/category)
public class CategoryController {Autowiredprivate CategoryService categoryService;PostMappingpublic ResultString save(RequestBody Category category) {log.info(category:{}, category);categoryService.save(category);return Result.success(新增分类成功);}
}分页查询所有菜品/套餐分类
页面原型
第一步:用户点击分页管理按钮时携带分页查询的相关参数page(默认1)、pageSize(默认10)发送Ajax请求到服务端去查询菜品/套餐的分类信息 第二步: 服务端Controller接受到请求之后通过Service调用Mapper操作数据库查询相关的菜品/套餐信息 第三步: Controller将查询到的所有数据和分页信息响应给前端
第四步: 前端接收到后端响应的数据后,通过ElementUI的Table组件渲染到页面上
页面加载完毕之后调用created钩子函数,在该钩子函数内又调用init函数进行初始化
created() {this.init()
}
async init () {await getCategoryPage({page: this.page, pageSize: this.pageSize}).then(res {if (String(res.code) 1) {//将服务端查询到的所有数据赋给tableData然后就能看到了this.tableData res.data.recordsthis.counts Number(res.data.total)} else {this.$message.error(res.msg || 操作失败)}}).catch(err {this.$message.error(请求出错了 err)})
}
// 查询列表接口
const getCategoryPage (params) {return $axios({url: /category/page,method: get,params})
}后端处理请求
执行categoryService提供的page方法进行分页查询并将查询到的数据和分页信息响应给前端
GetMapping(/page)
public ResultPage page(int page, int pageSize) {// 创建分页构造器PageCategory pageInfo new Page(page, pageSize);// 构造条件查询器LambdaQueryWrapperCategory queryWrapper new LambdaQueryWrapper();// 添加排序条件,根据sort属性进行排序queryWrapper.orderByDesc(Category::getSort);// 执行分页查询的语句categoryService.page(pageInfo, queryWrapper);// 将查询到的所有数据和分页相关的信息响应给前端return Result.success(pageInfo);
}删除某个分类(判断有无关联)
页面原型
第一步:在分类管理列表页面, 用户点击某个分类对应的删除按钮发送Ajax请求,请求参数就是该菜品/套餐分类单元格对应的属性Id
删除是个危险的操作,当用户点击删除按钮时先给一个提示信息防止误操作,当用户点确定后才会执行deleCategory回调函数 el-buttontypetextsizesmallclassdelBut non!--删除按钮绑定了deleteHandle函数,参数就是当前单元格的Id--clickdeleteHandle(scope.row.id)
/el-button
scriptdeleteHandle(id) {this.$confirm(此操作将永久删除该文件, 是否继续?, 提示, {confirmButtonText: 确定,cancelButtonText: 取消,type: warning}).then(() {deleCategory(id).then(res {// 服务端成功删除后提示删除成功if (res.code 1) {this.$message.success(删除成功)this.handleQuery()} else {this.$message.error(res.msg || 操作失败)}}).catch(err {this.$message.error(请求出错了 err)})})}// 发其Ajax请求删除当前行const deleCategory (id) {return $axios({url: /category,method: delete,params: {id}})}
/script第二步:服务端Controller接收页面提交的菜品/套餐分类的Id,通过Service调用Mapper根据Id删除对应的纪录,如果该分类关联了某个菜品或套餐时不允许被删除 后端处理请求(无关联)
DeleteMapping
private ResultString delete(Long id) {log.info(将被删除的id{}, id);categoryService.removeById(id);return Result.success(分类信息删除成功);
}查询菜品/套餐
删除某个分类时需要先拿着当前分类的Id值去对应的菜品/套餐表中进行查询如果能查询到数据则说明该分类关联了菜品/套餐,此时不能删除该分类 数据模型
套餐信息表setmeal 菜品信息表dish 后端处理请求
第一步: 创建菜品表和套餐表对应的模型类Dish和Stemal,对于createUser和createTime和createUser和updateUser等公共字段使用自动填充功能
/**菜品*/
Data
public class Dish implements Serializable {private static final long serialVersionUID 1L;private Long id;//菜品名称private String name;//菜品分类idprivate Long categoryId;//菜品价格private BigDecimal price;//商品码private String code;//图片private String image;//描述信息private String description;//0 停售 1 起售private Integer status;//顺序private Integer sort;TableField(fill FieldFill.INSERT)private LocalDateTime createTime;TableField(fill FieldFill.INSERT_UPDATE)private LocalDateTime updateTime;TableField(fill FieldFill.INSERT)private Long createUser;TableField(fill FieldFill.INSERT_UPDATE)private Long updateUser;
}/*** 套餐*/
Data
public class Setmeal implements Serializable {private static final long serialVersionUID 1L;private Long id;//分类idprivate Long categoryId;//套餐名称private String name;//套餐价格private BigDecimal price;//状态 0:停用 1:启用private Integer status;//编码private String code;//描述信息private String description;//图片private String image;TableField(fill FieldFill.INSERT)private LocalDateTime createTime;TableField(fill FieldFill.INSERT_UPDATE)private LocalDateTime updateTime;TableField(fill FieldFill.INSERT)private Long createUser;TableField(fill FieldFill.INSERT_UPDATE)private Long updateUser;
}第二步: 编写对应的Mapper接口和Service接口及其实现类
Mapper
public interface DishMapper extends BaseMapperDish {
}Mapper
public interface SetmealMapper extends BaseMapperSetmeal {
}public interface SetmealService extends IServiceSetmeal {
}
Service
public class SetmealServiceImpl extends ServiceImplSetmealMapper, Setmeal implements SetmealService {
}public interface DishService extends IServiceDish {
}
Service
public class DishServiceImpl extends ServiceImplDishMapper, Dish implements DishService {
}第三步: 在common包下新增CustomException异常类用于封装我们的自定义异常
public class CustomException extends RuntimeException{public CustomException(String msg){super(msg);}
}第四步: 在全局异常处理器中使用ExceptionHandler注解专门处理CustomerException类型的异常
ExceptionHandler(CustomException.class)
public ResultString exceptionHandler(CustomException exception) {log.error(exception.getMessage());return Result.error(exception.getMessage());
}第五步: CategoryService接口中新增remove方法, 在删除数据之前先根据当前菜品/套餐分类的categoryId值去dish表和setmeal表中查询是否关联了数据
如果查询到了数据: 说明存在关联的菜品/套餐数据即不能删除需要抛出一个自定义异常如果查询不到数据: 说明不存在关联的菜品/套餐数据那么可以正常删除
Service
Slf4j
public class CategoryServiceImpl extends ServiceImplCategoryMapper, Category implements CategoryService {AutowiredDishService dishService;AutowiredSetmealService setmealService;/*** 根据id删除分类删除之前需要进行判断* param id*/Overridepublic void remove(Long id) {// 根据菜品的分类id去菜品表中查询关联的菜品记录LambdaQueryWrapperDish dishLambdaQueryWrapper new LambdaQueryWrapper();dishLambdaQueryWrapper.eq(Dish::getCategoryId, id);int count1 dishService.count(dishLambdaQueryWrapper);// 判断菜品当前分类是否关联了菜品如果已经关联则抛出异常if (count1 0){throw new CustomException(当前分类下关联了菜品不能删除);}// 根据套餐的分类id去套餐表中查询关联的套餐记录LambdaQueryWrapperSetmeal setmealLambdaQueryWrapper new LambdaQueryWrapper();setmealLambdaQueryWrapper.eq(Setmeal::getCategoryId,id);// 判断当前套餐分类是否关联了套餐如果已经关联则抛出异常int count2 setmealService.count(setmealLambdaQueryWrapper);if (count2 0){throw new CustomException(当前分类下关联了套餐不能删除);}// 没有关联菜品/套餐则调用CategoryService自带的removeById方法正常删除super.removeById(id);}
}第六步: 在Controller中调用CategoryService新增的remove方法
DeleteMapping
public ResultString delete(Long id){log.info(将要删除的分类id:{},id);categoryService.remove(id);return Result.success(分类信息删除成功);
}修改分类信息
页面原型
第一步: 用户在分类管理列表页面中点击修改按钮后弹出修改窗口,此时会回显当前菜品/套餐分类的信息并等待用户修改(通过Vue的数据绑定功能实现自动回显) el-buttontypetextsizesmallclassblueBug!--回显当前分类的信息,参数就是当前单元格的信息--clickeditHandle(scope.row)修改
/el-buttonel-formclassdemo-form-inlinelabel-width100pxel-form-item label分类名称el-inputv-modelclassData.nameplaceholder请输入分类名称maxlength14//el-form-itemel-form-item label排序el-input v-modelclassData.sort typenumber placeholder请输入排序 //el-form-item
/el-formscripteditHandle(dat) {// 这里并没有从后端查数据进行回显,而是对Vue双向绑定的数据classData下的name和sort属性进行赋值实现回显效果this.classData.title 修改分类this.action editthis.classData.name dat.namethis.classData.sort dat.sortthis.classData.id dat.idthis.classData.dialogVisible true}classData: {title: 添加菜品分类,dialogVisible: false,categoryId: ,name: ,sort: }
/script第二步: 用户点击确定按钮后执行通用的submitForm函数发起Ajax请求,以json格式提交修改后的菜品/套餐分类信息
scriptsubmitForm(st) {const classData this.classDataconst valid (classData.name 0 ||classData.name) (classData.sort 0 || classData.sort)// 添加操作从这里执行if (this.action add) {if (valid) {const reg /^\d$/if (reg.test(classData.sort)) {addCategory({name: classData.name,type:this.type, sort: classData.sort}).then(res {console.log(res)if (res.code 1) {this.$message.success(分类添加成功)if (!st) {this.classData.dialogVisible false} else {this.classData.name this.classData.sort }this.handleQuery()} else {this.$message.error(res.msg || 操作失败)}}).catch(err {this.$message.error(请求出错了 err)})} else {this.$message.error(排序只能输入数字类型)}} else {this.$message.error(请输入分类名称或排序)}// 修改操作从这里执行} else if (valid) {const reg /^\d$/if (reg.test(this.classData.sort)) {// 发起ajax请求修改员工数据editCategory({id:this.classData.id,name: this.classData.name, sort: this.classData.sort}).then(res {if (res.code 1) {this.$message.success(分类修改成功)this.classData.dialogVisible falsethis.handleQuery()} else {this.$message.error(res.msg || 操作失败)}}).catch(err {this.$message.error(请求出错了 err)})} else {this.$message.error(排序只能输入数字类型)}} else {this.$message.error(请输入分类名称或排序)}}// 修改接口const editCategory (params) {return $axios({url: /category,method: put,data: { ...params }})}
/script后端处理请求
根据用户提交的json格式的菜品/套餐分类信息,去数据表中更新对应的菜品/套餐记录
PutMapping
public ResultString update(RequestBody Category category) {log.info(修改分类信息为{}, category);categoryService.updateById(category);return Result.success(修改分类信息成功);
}
