springboot+vue实现简单的分类功能
分类： springboot vue 专栏： springboot vue 常用功能 标签： springboot+vue实现简单的分类功能
2025-02-19 22:04:01 305浏览
springboot+vue实现简单的分类功能
分类 管理
sql
DROP TABLE IF EXISTS `xl_type`; CREATE TABLE `xl_type` ( `id` int(0) NOT NULL AUTO_INCREMENT, `tname` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci DEFAULT NULL, `cts` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci DEFAULT NULL, `tsort` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci DEFAULT NULL, `timg` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci DEFAULT NULL, `ttype` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci DEFAULT NULL, PRIMARY KEY (`id`) USING BTREE ) ENGINE = InnoDB AUTO_INCREMENT = 4 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_0900_ai_ci ROW_FORMAT = Dynamic; SET FOREIGN_KEY_CHECKS = 1;
bean
package com.jff.xinli.bean;
import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableField;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import lombok.Data;
/*分类
*/
@Data
@TableName("xl_type")
public class XlType {
@TableId(type = IdType.AUTO)
Integer id;
Integer tsort;
String cts;
String tname;
String timg;
String ttype;//article,forum
@TableField(exist = false)
String orderby;
@TableField(exist = false)
String keywords;
}
dao
package com.jff.xinli.dao;
import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.jff.xinli.bean.XlType;
import org.apache.ibatis.annotations.Mapper;
import org.springframework.stereotype.Component;
@Component
@Mapper
public interface XlTypeMapper extends BaseMapper<XlType> {
}
service
package com.jff.xinli.service;
import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
import com.baomidou.mybatisplus.core.toolkit.Wrappers;
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.jff.xinli.bean.XlType;
import com.jff.xinli.bean.XlUsers;
import com.jff.xinli.dao.XlTypeMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;
@Service
public class XlTypeService extends ServiceImpl<XlTypeMapper, XlType> {
@Autowired
XlTypeMapper typeMapper;
public List<XlType> getlist (XlType o){
LambdaQueryWrapper<XlType> lambdaQueryWrapper = Wrappers.lambdaQuery();
if(o!=null) {
if ( o.getKeywords()!=null && o.getKeywords().trim().length()>0 ) {
lambdaQueryWrapper .and(wq -> wq
.like(XlType::getTname, o.getKeywords())
.or()
.like(XlType::getTtype,o.getKeywords())
);
}
if(o.getTtype()!=null&&o.getTtype().trim().length() > 0 ){
lambdaQueryWrapper.eq(XlType::getTtype,o.getTtype());
}
if(o.getOrderby()!=null&&o.getOrderby().equals("tsort_asc") ){
lambdaQueryWrapper.orderByAsc(XlType::getTsort );
}
}
List<XlType> li = typeMapper.selectList(lambdaQueryWrapper);
return li;
}
}
controller
package com.jff.xinli.control.api;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.jff.xinli.bean.XlQuestions;
import com.jff.xinli.bean.XlQuestionsItems;
import com.jff.xinli.bean.XlTest;
import com.jff.xinli.bean.XlTestLevel;
import com.jff.xinli.service.XlQuestionsItemsService;
import com.jff.xinli.service.XlQuestionsService;
import com.jff.xinli.service.XlTestLevelService;
import com.jff.xinli.service.XlTestService;
import com.jff.xinli.util.DateUtils;
import com.jff.xinli.util.MessUntil;
import com.jff.xinli.util.Sys;
import com.jff.xinli.util.UploadFile;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import java.util.List;
@CrossOrigin
@RestController
@RequestMapping("/test")
public class XlTestController {
@Autowired
XlTestService testService;
@Autowired
XlTestLevelService testLevelService;
@Autowired
XlQuestionsService questionsService;
@Autowired
XlQuestionsItemsService questionsItemsService;
@RequestMapping("/page")
public MessUntil page(@RequestParam(value="pageNo",defaultValue="1")int pageNo,
@RequestParam(value="pageSize",defaultValue="10")int pageSize, XlTest u ) {
MessUntil mess=new MessUntil();
PageHelper.startPage(pageNo,pageSize," id desc ");
List<XlTest> li=testService.getListJoin(u);
PageInfo<XlTest> pageInfo = new PageInfo(li,pageSize);
return mess.succ(pageInfo);
}
@RequestMapping("/save")
public MessUntil save(XlTest o) {
MessUntil mess=new MessUntil();
if(o.getId()==null){
o.setCts(DateUtils.getNowDateTsString());
o.setTimg(Sys.Upimg.noimg);
}
o.setSh("0");
testService.saveOrUpdate(o);
return mess.succ(o);
}
@RequestMapping("info")
public MessUntil info(Integer id ) {
MessUntil mess=new MessUntil();
if(id==null )return mess.error( "参数错误");
XlTest o=testService.getIdJoin(id);
List<XlTestLevel> levelli=testLevelService.getListByTestId(id);
o.setLevelli(levelli);
List<XlQuestions> qli=questionsService.getListByTestId(id);
for(XlQuestions q:qli){
List<XlQuestionsItems> ili=questionsItemsService.getListByQid(q.getId());
q.setIli(ili);
}
o.setQli(qli);
return mess.succ( o );
}
@RequestMapping("detail")
public MessUntil detail(Integer id ) {
MessUntil mess=new MessUntil();
if(id==null )return mess.error( "参数错误");
XlTest o=testService.getIdJoin(id);
if(o!=null && o.getSh()!=null&& o.getSh().equals("1")) {
List<XlTestLevel> levelli=testLevelService.getListByTestId(id);
o.setLevelli(levelli);
List<XlQuestions> qli=questionsService.getListByTestId(id);
for(XlQuestions q:qli){
List<XlQuestionsItems> ili=questionsItemsService.getListByQid(q.getId());
q.setIli(ili);
}
o.setQli(qli);
return mess.succ( o );
}
return mess.error("该数据不存在或待审核");
}
@RequestMapping("update")
public MessUntil update(XlTest o ) {
MessUntil mess=new MessUntil();
testService.updateById(o);
return mess.succ( );
}
@RequestMapping("del")
public MessUntil del(Integer id ) {
MessUntil mess=new MessUntil();
XlTest ol=testService.getById(id);
if(id==null )return mess.error( "参数错误");
try{
testService.removeById(id);
}catch (Exception e){
return mess.error( "删除失败，请先删除关联数据");
}
UploadFile.deleteFile(ol.getTimg());
return mess.succ( );
}
}
vue
<template>
<div class="about">
<v-header />
<v-sidebar />
<div class="content-box" >
<div class="content">
<div>
<div class="crumbs">
<el-breadcrumb separator="/">
<el-breadcrumb-item>
<i class="el-icon-paperclip"></i> 分类管理
</el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="container">
<div class="handle-box">
<el-input v-model="query.keywords" placeholder="名称" class="handle-input mr10"></el-input>
<el-select v-model="query.ttype" placeholder="请选择" class="handle-select mr10">
<el-option label="" value=""></el-option>
<el-option
v-for="item in types"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
<el-button type="danger" icon="el-icon-plus" @click="handleAdd">添加</el-button>
</div>
<el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
<el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>
<el-table-column label="图标" align="center" width="110px">
<template #default="scope">
<img :src=" FILE_URL+scope.row.timg" style="width: 100px;height: 100px;">
<el-button @click="uploadimghandle(scope.row)" type="primary" size="mini">上传图片</el-button>
</template>
</el-table-column>
<el-table-column label="信息" align="left">
<template #default="scope">
<p>
名称：{{scope.row.tname}}
</p>
<p>
类型： <span v-if="scope.row.ttype=='article'">文章</span>
<span v-if="scope.row.ttype=='forum'">论坛</span>
</p>
<p>排序字段:{{scope.row.tsort}}</p>
<p>创建时间：{{scope.row.cts}}</p>
</template>
</el-table-column>
<el-table-column label="操作" width="180" align="center">
<template #default="scope">
<el-dropdown>
<el-button type="primary">
操作<i class="el-icon-arrow-down el-icon--right"></i>
</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item @click.native="handleEdit(scope.$index, scope.row)">编辑</el-dropdown-item>
<el-dropdown-item @click.native="handleDelete(scope.$index, scope.row)">删除</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</template>
</el-table-column>
</el-table>
<div class="pagination">
<el-pagination background layout="total, prev, pager, next" :current-page="query.pageNo"
:page-size="query.pageSize" :total="pageTotal" @current-change="handlePageChange"></el-pagination>
</div>
</div>
<!-- 添加或者编辑弹出框 -->
<el-dialog title="添加或编辑" :visible.sync="editVisible" >
<el-form
label-width="120px"
:model="dataForm"
:rules="dataFormRule"
ref="dataForm"
>
<el-form-item label="分类名称" prop="tname">
<el-input v-model="dataForm.tname"></el-input>
</el-form-item>
<el-form-item label="类型" prop="ttype">
<el-select v-model="dataForm.ttype" placeholder="请选择">
<el-option
v-for="item in types"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="排序" prop="tsort">
<el-input v-model="dataForm.tsort" type="number"></el-input>
<p>越小越靠前</p>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="editVisible = false">取 消</el-button>
<el-button type="primary" @click="saveEdit">确 定</el-button>
</span>
</template>
</el-dialog>
<!-- 上传图片弹出框 -->
<el-dialog title="上传图片" :visible.sync="uploadimgVisible" width="400px">
<el-upload
drag
:before-upload="beforeUploadFile"
:show-file-list="false"
:action=FILE_ACTION
:on-success="handleFileSuccess"
accept="image/*"
:multiple="false">
<img :src="FILE_URL+seeimg" style="width: 100px;height: 100px;border-radius:5%">
</el-upload>
<p>长宽： 200 * 200 px</p>
</el-dialog>
</div>
</div>
</div>
</div>
</template>
<script>
import vHeader from "./Header.vue";
import vSidebar from "./Sidebar.vue";
import {type_page, type_add, type_del } from '../../api';
export default {
name: "System",
components: {
vHeader,
vSidebar,
},
data() {
return {
FILE_URL:'',
types:[
{key:'article',value:'article',label:'文章'},
{key:'forum',value:'forum',label:'论坛'},
],
FILE_ACTION:'',
seeimg:'',
uploadimgVisible:false,
lander:{},
tableData: [],
query :{
ttype: '',
keywords: '',
pageNo: 1,
pageSize: 10,
},
pageTotal: 0,
editVisible: false,
dataForm :{
id :'',
tname : '',
tsort : '',
ttype : '',
},
dataFormRule: {
tname: [{required: true, message: '不能为空', trigger: 'blur'}],
tsort: [{required: true, message: '不能为空', trigger: 'blur'}],
ttype: [{required: true, message: '不能为空', trigger: 'blur'}],
},
};
},
methods:{
//上传图片
beforeUploadFile(){
this.loading = this.$loading({
lock: true,
text: "上传中，请稍等,,,,",
spinner: "el-icon-loading",
background: "rgba(0, 0, 0, 0.5)",
});
},
handleFileSuccess(res) {
this.loading.close();
console.log(res)
if( res.status==1){
this.$message.success( '上传成功' );
this.uploadimgVisible=false;
this.getPage();
}else{
this.$message.error( '上传失败' );
}
},
uploadimghandle(row){
this.uploadimgVisible=true;
this.seeimg=row.timg;
this.FILE_ACTION=process.env.VUE_APP_API_ROOT+'/common/upimg?type=type&id='+row.id ;
},
// 查询操作
handleSearch (){
console.log(this.query)
this.query.pageNo = 1;
this.getPage();
},
// 分页导航
handlePageChange (val) {
this.query.pageNo = val;
this.getPage();
},
//弹出添加操作弹框
handleAdd(){
this.dataForm={}
this.editVisible = true;
},
//弹出修改操作弹框
handleEdit (index, row) {
this.dataForm.id = row.id
this.dataForm.tname = row.tname
this.dataForm.tsort = row.tsort
this.dataForm.ttype = row.ttype
this.editVisible = true;
},
//保存操作
saveEdit(){
this.$refs.dataForm.validate(valid => {
//表单验证失败
if (!valid) {
//提示语
this.$message.error("请按提示填写表单");
this.editVisible = true;
return false;
} else {
type_add(this.dataForm).then((res) => {
this.editVisible = false;
this.getPage();
})
}
})
},
//删除操作
handleDelete(index,row){
// 二次确认删除
this.$confirm("确定要删除吗？", "提示", {
type: "warning",
})
.then(() => {
type_del({id:row.id }).then((res) => {
if(res.data.status==1){
this.$message.success("删除成功");
this.tableData.splice(index, 1);
this.getPage();
}else{
this.$notify({
title: '提示',
message: res.data.msg,
duration: 0
});
}
})
})
.catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
},
//获取列表数据
getPage(){
type_page(this.query).then((res) => {
this.tableData = res.data.obj.list
this.pageTotal = res.data.obj.total//该页总共多少条记录
})
},
},
mounted() {
this.lander=JSON.parse(localStorage.loginUser)
this.FILE_URL=process.env.VUE_APP_API_ROOT
//去后端查询所有的用户给tableData赋值
this.getPage();
}
}
</script>
<style scoped>
.handle-box {
margin-bottom: 20px;
}
.handle-select {
width: 120px;
}
.handle-input {
width: 120px;
display: inline-block;
}
.table {
width: 100%;
font-size: 14px;
}
.red {
color: #ff0000;
}
.mr10 {
margin-right: 10px;
}
/*滚动条的宽度*/
/deep/ .el-table__body-wrapper::-webkit-scrollbar {
width: 6px;
height: 6px;
}
/*滚动条滑块*/
/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
background-color: #409eff;
/*border-radius: 3px;*/
}
</style>
好博客就要一起分享哦！分享海报
此处可发布评论
评论（0）展开评论
暂无评论，快来写一下吧
展开评论
他的专栏
java 
vue 
springboot 
Mysql 
ssm 
小程序 
uniapp 
js和jquery 他感兴趣的技术
