1.项目架构

2.config配置

JdbcConfig

public class JdbcConfig {

    @Value("${jdbc.driver}")
    private String driver;
    @Value("${jdbc.url}")
    private String url;
    @Value("${jdbc.username}")
    private String username;
    @Value("${jdbc.password}")
    private String password;

    @Bean
    public DataSource dataSource(){
        DruidDataSource dataSource = new DruidDataSource();
        dataSource.setDriverClassName(driver);
        dataSource.setUrl(url);
        dataSource.setUsername(username);
        dataSource.setPassword(password);
        return dataSource;
    }

    @Bean
    public PlatformTransactionManager transactionManager(DataSource dataSource){
        DataSourceTransactionManager ds = new DataSourceTransactionManager(dataSource);
        return ds;
    }

}

 MyBatisConfig

public class MyBatisConfig {

    @Bean
    public SqlSessionFactoryBean sqlSessionFactory(DataSource dataSource){
        SqlSessionFactoryBean factoryBean = new SqlSessionFactoryBean();
        factoryBean.setTypeAliasesPackage("cn.itaxu.domain");
        factoryBean.setDataSource(dataSource);
        return factoryBean;
    }

    @Bean
    public MapperScannerConfigurer mapperScannerConfigurer(){
        MapperScannerConfigurer msc = new MapperScannerConfigurer();
        msc.setBasePackage("cn.itaxu.dao");
        return msc;
    }

}

ServletConfig

public class ServletConfig extends AbstractAnnotationConfigDispatcherServletInitializer {

    // 加载spring配置
    @Override
    protected Class<?>[] getRootConfigClasses() {
        return new Class[]{SpringConfig.class};
    }

    // 加载springMVC配置
    @Override
    protected Class<?>[] getServletConfigClasses() {
        return new Class[]{SpringMvcConfig.class};
    }

    // 设置哪些方法归属springMVC处理
    @Override
    protected String[] getServletMappings() {
        return new String[]{"/"};
    }

    // 处理POST请求中文乱码问题
    @Override
    protected Filter[] getServletFilters() {
        CharacterEncodingFilter filter = new CharacterEncodingFilter("UTF-8");
        return new Filter[]{filter};
    }

}

SpringConfig

@Configuration
@ComponentScan("cn.itaxu.service")
@PropertySource("classpath:jdbc.properties")
@Import({JdbcConfig.class,MyBatisConfig.class})
@EnableTransactionManagement
public class SpringConfig {
}

SpringMvcConfig

@Configuration
@ComponentScan({"cn.itaxu.controller","cn.itaxu.config"})
@EnableWebMvc
public class SpringMvcConfig {
}

SpringMvcSupport

@Configuration
public class SpringMvcSupport extends WebMvcConfigurationSupport {
    @Override
    protected void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/pages/**").addResourceLocations("/pages/");
        registry.addResourceHandler("/img/**").addResourceLocations("/img/");
    }
}

3.controller控制

BrandController

@RestController
@RequestMapping("/brands")
public class BrandController {

    @Autowired
    private BrandService brandService;

    @PostMapping
    public Result save(@RequestBody Brand brand){
        boolean flag = brandService.save(brand);
        return new Result(flag ? Code.SAVE_OK:Code.SAVE_ERR,flag);
    }

    @DeleteMapping("/{id}")
    public Result deleteById(@PathVariable Integer id){
        boolean flag = brandService.deleteById(id);
        return new Result(flag ? Code.DELETE_OK:Code.DELETE_ERR,flag);
    }

    @DeleteMapping
    public Result deleteMultiply(@RequestBody int[] ids){
        boolean flag = brandService.deleteMultiply(ids);
        return new Result(flag ? Code.DELETE_OK:Code.DELETE_ERR,flag);
    }

    @PutMapping
    public Result update(@RequestBody Brand brand){
        System.out.println(brand);
        boolean flag = brandService.update(brand);
        return new Result(flag ? Code.UPDATE_OK:Code.UPDATE_ERR,flag);
    }

    @GetMapping("/{id}")
    public Result getById(@PathVariable Integer id){
        Brand brand = brandService.getById(id);
        Integer code =brand != null ? Code.GET_OK:Code.GET_ERR;
        String msg = brand != null ? "success":"fail";
        return new Result(code,brand,msg);
    }

    @GetMapping
    public Result getAll(){
        List<Brand> brandList = brandService.getAll();
        Integer code = brandList != null ? Code.GET_OK:Code.GET_ERR;
        String msg = brandList != null ? "success":"fail";
        return new Result(code,brandList,msg);
    }
    
    @PostMapping("/{currentPage}/{pageSize}")
    public Result selectByPageAndCondition(@PathVariable int currentPage,@PathVariable int pageSize,
                                           @RequestBody Brand brand) {
        PageBean<Brand> pageBean = brandService.selectByPageAndCondition(currentPage, pageSize, brand);
        Integer code = pageBean != null ? Code.GET_OK:Code.GET_ERR;
        String msg = pageBean != null ? "success":"fail";
        return new Result(code,pageBean,msg);
    }
}

Code 响应状态码

public class Code {
    public static final Integer SAVE_OK = 20011;
    public static final Integer DELETE_OK = 20021;
    public static final Integer UPDATE_OK = 20031;
    public static final Integer GET_OK = 20041;

    public static final Integer SAVE_ERR = 20010;
    public static final Integer DELETE_ERR = 20020;
    public static final Integer UPDATE_ERR = 20030;
    public static final Integer GET_ERR = 20040;

    public static final Integer SYSTEM_ERR = 50001;
    public static final Integer SYSTEM_TIMEOUT_ERR = 50002;
    public static final Integer SYSTEM_UNKNOW_ERR = 59999;

    public static final Integer BUSINESS_ERR = 60002;
}

ProjectExceptionAdvice 项目异常通知

@RestControllerAdvice
public class ProjectExceptionAdvice {
    @ExceptionHandler(SystemException.class)
    public Result doSystemException(SystemException ex){
        // 记录日志
        // 发送消息给运维
        // 发送消息给开发人员,ex对象发送给开发人员
        return new Result(ex.getCode(),"null","系统异常");
    }

    @ExceptionHandler(BusinessException.class)
    public Result doBusinessException(BusinessException ex){
        return new Result(ex.getCode(),"null","业务异常");
    }


    @ExceptionHandler(Exception.class)
    public Result doException(Exception ex){
        // 记录日志
        // 发送消息给运维
        // 发送消息给开发人员,ex对象发送给开发人员
        return new Result(Code.SYSTEM_UNKNOW_ERR,"null","系统繁忙,请稍后再试!");
    }
}

Result 统一格式数据

public class Result {
    private Object data;
    private Integer code;
    private String  msg;

    public Result() {
    }

    public Result(Integer code,Object data) {
        this.data = data;
        this.code = code;
    }

    public Result(Integer code, Object data, String msg) {
        this.data = data;
        this.code = code;
        this.msg = msg;
    }

    public Object getData() {
        return data;
    }

    public void setData(Object data) {
        this.data = data;
    }

    public Integer getCode() {
        return code;
    }

    public void setCode(Integer code) {
        this.code = code;
    }

    public String getMsg() {
        return msg;
    }

    public void setMsg(String msg) {
        this.msg = msg;
    }

}

4.exception 细化异常

BusinessException 业务异常

public class BusinessException extends RuntimeException{
    private Integer code;

    public Integer getCode() {
        return code;
    }

    public void setCode(Integer code) {
        this.code = code;
    }

    public BusinessException(Integer code, String message) {
        super(message);
        this.code = code;
    }

    public BusinessException(Integer code, String message, Throwable cause) {
        super(message, cause);
        this.code = code;
    }

}

SystemException 系统异常

public class SystemException extends RuntimeException{
    private Integer code;

    public Integer getCode() {
        return code;
    }

    public void setCode(Integer code) {
        this.code = code;
    }

    public SystemException(Integer code, String message) {
        super(message);
        this.code = code;
    }

    public SystemException(Integer code, String message, Throwable cause) {
        super(message, cause);
        this.code = code;
    }

}

5.service

BrandService接口

@Transactional
public interface BrandService {

    /**
     * 添加数据
     * @param brand
     * @return
     */
    public boolean save(Brand brand);

    /**
     * 根据id删除
     * @param id
     * @return
     */
    public boolean deleteById(Integer id);

    /**
     * 根据ids批量删除
     * @param ids
     * @return
     */
    public boolean deleteMultiply(@Param("ids") int[] ids);

    /**
     * 修改数据
     * @param brand
     * @return
     */
    public boolean update(Brand brand);

    /**
     * 查询单条
     * @param id
     * @return
     */
    public Brand getById(Integer id);

    /**
     * 查询所有
     * @return
     */
    public List<Brand> getAll();

    /**
     * 分页查询
      * @param currentPage
     * @param pageSize
     * @return
     */
    PageBean<Brand> selectByPage(int currentPage, int pageSize);

    /**
     * 分页条件查询
     * @param currentPage
     * @param pageSize
     * @param brand
     * @return
     */
    PageBean<Brand> selectByPageAndCondition(int currentPage, int pageSize, Brand brand);
}

BrandServiceImpl

@Service
public class BrandServiceImpl implements BrandService {
    @Autowired
    private BrandDao brandDao;
    
    @Override
    public boolean save(Brand brand) {
        return brandDao.save(brand) > 0;
    }

    @Override
    public boolean deleteById(Integer id) {
        return brandDao.deleteById(id) > 0;
    }

    @Override
    public boolean deleteMultiply(int[] ids) {
        return brandDao.deleteMultiply(ids) > 0;
    }

    @Override
    public boolean update(Brand brand) {
        return brandDao.update(brand) > 0;
    }

    @Override
    public Brand getById(Integer id) {
        return brandDao.getById(id);
    }

    @Override
    public List<Brand> getAll() {
        return brandDao.getAll();
    }

    @Override
    public PageBean<Brand> selectByPage(int currentPage, int pageSize) {
        int begin = (currentPage-1) * pageSize;
        int size = pageSize;
        List<Brand> rows = brandDao.selectByPage(begin, size);
        int totalCount = brandDao.selectTotalCount();
        PageBean<Brand> pageBean = new PageBean<Brand>();
        pageBean.setRows(rows);
        pageBean.setTotalCount(totalCount);
        return pageBean;
    }

    @Override
    public PageBean<Brand> selectByPageAndCondition(int currentPage, int pageSize, Brand brand) {
        int begin = (currentPage-1) * pageSize;
        int size = pageSize;

        // 处理模糊查询
        String brandName = brand.getBrandName();
        if (brandName!=null&&brandName.length()>0){
            brand.setBrandName("%"+brandName+"%");
        }
        String companyName = brand.getCompanyName();
        if (companyName!=null&&companyName.length()>0){
            brand.setCompanyName("%"+companyName+"%");
        }

        // 查询当前页数据
        List<Brand> brandList = brandDao.selectByPageAndCondition(begin, size, brand);
        // 查询当前页总记录条数
        int totalCount = brandDao.selectTotalCountByCondition(brand);

        // 封装PageBean
        PageBean<Brand> pageBean = new PageBean<>(brandList,totalCount);
        return pageBean;
    }

}

6.前端代码

<div id="app">
        <!--    导航菜单-->
        <el-menu
                :default-active="activeIndex2"
                class="el-menu-demo"
                mode="horizontal"
                @select="handleSelect"
                background-color="#545c64"
                text-color="#fff"
                active-text-color="#ffd04b">
            <template>
                <h3 align="center"><img src="../img/E-commerce.png" width="50" height="50" align="center">
                    电商后台数据模型
                </h3>
            </template>
            <el-menu-item index="1">处理中心</el-menu-item>
            <el-submenu index="2">
                <template slot="title">我的工作台</template>
                <el-menu-item index="2-1">后台品牌模型</el-menu-item>
            </el-submenu>
            <el-menu-item index="3" disabled>消息中心</el-menu-item>
            <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
        </el-menu>

<!--    搜索表单-->
    <el-form :inline="true" :model="brand" class="demo-form-inline">

        <el-form-item label="当前状态">
            <el-select v-model="brand.status" placeholder="当前状态">
                <el-option label="启用" value="1"></el-option>
                <el-option label="禁用" value="0"></el-option>
            </el-select>
        </el-form-item>

        <el-form-item label="企业名称">
            <el-input v-model="brand.companyName" placeholder="企业名称"></el-input>
        </el-form-item>

        <el-form-item label="品牌名称">
            <el-input v-model="brand.brandName" placeholder="品牌名称"></el-input>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
    </el-form>

<!--    按钮-->
    <el-row style="margin-left: 20%">
        <el-button type="danger" plain @click="deleteBrandByIds">批量删除</el-button>
        <el-button type="primary" plain @click="dialogVisible = true">新增</el-button>
    </el-row>

<!--    添加数据的对话框表单-->
    <el-dialog
            title="编辑品牌"
            :visible.sync="dialogVisible"
            width="30%"
    >

        <el-form ref="form" :model="brand_add" label-width="80px">
            <el-form-item label="品牌名称">
                <el-input v-model="brand_add.brandName"></el-input>
            </el-form-item>

            <el-form-item label="企业名称">
                <el-input v-model="brand_add.companyName"></el-input>
            </el-form-item>

            <el-form-item label="排序">
                <el-input v-model="brand_add.ordered"></el-input>
            </el-form-item>

            <el-form-item label="备注">
                <el-input type="textarea" v-model="brand_add.description"></el-input>
            </el-form-item>

            <el-form-item label="状态">
                <el-switch
                        v-model="brand_add.status"
                        active-value="1"
                        inactive-value="0"
                >
                </el-switch>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="addBrand">提交</el-button>
                <el-button @click="cancelAdd">取消</el-button>
            </el-form-item>
        </el-form>

    </el-dialog>

<!--    修改数据的对话框表单-->
    <el-dialog
            title="修改数据"
            :visible.sync="updateDialogVisible"
            width="30%">
   <el-form ref="form" :model="update" label-width="80px">
  <el-form-item label="品牌名称">
    <el-input v-model="update.brandName"></el-input>
  </el-form-item>
  <el-form-item label="企业名称">
       <el-input v-model="update.companyName"></el-input>
  </el-form-item>
  <el-form-item label="排序">
    <el-input v-model="update.ordered"></el-input>
  </el-form-item>
  <el-form-item label="备注">
    <el-input type="textarea" v-model="update.description"></el-input>
  </el-form-item>
  <el-form-item label="状态">
      <el-switch
              v-model="update.status"
              active-value="1"
              inactive-value="0">
      </el-switch>
  </el-form-item>
       <el-form-item>
           <el-button type="primary" @click="updateBrand">提交</el-button>
           <el-button @click="cancel">取消</el-button>
       </el-form-item>
  </el-form>

    </el-dialog>

    <h4 align="center"><img src="../img/product.png" width="50" height="50" align="center"><font color="gray">产品列表
    </font></h4>

    <!--    表格-->
    <template>
    <el-table
            :data="tableData"
            style="width: 100%"
            :row-class-name="tableRowClassName"
            @selection-change="handleSelectionChange"
    >
        <el-table-column
                type="selection"
                width="55"
        >
        </el-table-column>
        <el-table-column
                type="index"
                width="50">
        </el-table-column>
        <el-table-column
                prop="brandName"
                label="品牌名称"
                align="center"
                >
        </el-table-column>
        <el-table-column
                prop="companyName"
                label="企业名称"
                align="center"
                >
        </el-table-column>
        <el-table-column
                prop="ordered"
                label="排序"
                align="center"
        >
        </el-table-column>
        <el-table-column
                prop="description"
                label="备注"
                align="center"
        >
        </el-table-column>
        <el-table-column
                prop="statusStr"
                label="当前状态"
                align="center"
        >
        </el-table-column>
        <el-table-column
                prop="address"
                label="操作"
                align="center"
        >
            <el-row>
                <el-button type="primary" @click="modify">修改</el-button>
                <el-button type="danger" @click="deleteById">删除</el-button>
            </el-row>
        </el-table-column>
    </el-table>
    </template>

<!--    分页工具条-->
    <div class="block">
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="totalCount">
        </el-pagination>
    </div>
</div>

js

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.13/dist/vue.js"></script>
<script src="https://cdn.staticfile.org/axios/1.1.3/axios.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.10/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://cdn.staticfile.org/element-ui/2.15.10/index.js"></script>
<script>
    new Vue({
        el:"#app",
        mounted(){
            //当页面加载完毕后,发送异步请求
           this.selectAll();
        },
        methods: {
            // 查询所有品牌数据
            selectAll(){
               axios({
                   method:"post",
                   url:`/brands/${this.currentPage}/${this.pageSize}`,
                   data:this.brand,
                   headers: {
                       'Content-Type': 'application/json;charset=UTF-8'
                   }
               }).then((resp)=>{
                   if (resp.data.code == 20041) {
                       this.tableData = resp.data.data.rows;
                       this.totalCount = resp.data.data.totalCount
                   }else if (resp.data.code == 20040){
                       this.$message.error('获取数据失败!').center = true;
                   }else {
                       this.$message.error(resp.data.msg).center = true;
                   }
               })
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            cancelAdd(){
                this.dialogVisible = false;
                // 用户点击了取消按钮
                this.$message({
                    showClose: true,
                    message: '您取消了添加数据!',
                    center:true
                });
            },
            modify(){
                for (let i = 0; i < this.multipleSelection.length; i++) {
                    var selectionElement = this.multipleSelection[i];
                    this.update.id = selectionElement.id;
                }
                if (this.update.id == '' || this.update.id == null){
                        this.$message({
                            showClose: true,
                            message: '请选中您要修改的数据!',
                            type: 'error',
                            center:true,
                        });
                        return;
                }
                  axios.get(`/brands/${this.update.id}`).then((resp)=>{
                     if (resp.data.code==20041){
                         this.update = resp.data.data;
                         this.updateDialogVisible = true;
                     }
                  });
                },
            cancel(){
                this.updateDialogVisible = false;
                this.$message({
                    showClose: true,
                    message: '您已取消修改',
                    center:true
                });
            },

            tableRowClassName({row, rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },
            // 复选框选中后执行的方法
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            // 查询的方法
            onSubmit() {
                this.selectAll();
            },
            // 添加数据
            addBrand(){
                axios({
                    method:'post',
                    url:'/brands',
                    data:this.brand_add,
                    headers:{
                        'Content-Type':'application/json;charset=UTF-8'
                    }
                }).then( (resp) => {
                    if (resp.data.code==20011){
                        // 关闭添加数据对话框表单
                        this.dialogVisible = false;
                        // 弹出提示信息
                        this.$message({
                            message: '添加数据成功!',
                            type: 'success',
                            center: true
                        });
                    }else if (resp.data.code==20010){
                        this.$message.error("添加数据失败!").center = true;
                    }else {
                        this.$message.error(resp.data.msg).center = true;
                    }
                }).finally(()=>{
                    // 重新查询数据
                    this.selectAll();
                    this.resetForm(this.brand_add)
                })
            },
            // 更新数据
            updateBrand(){
                axios.put("/brands",this.update).then(resp=>{
                    if (resp.data.code == 20031) {
                        this.updateDialogVisible = false;
                        this.$message({
                            showClose: true,
                            message: '更新数据成功!',
                            type: 'success',
                            center: true
                        });
                    }else if (resp.data.code == 20030){
                        this.$message.error("更新数据失败!").center = true
                    }else {
                        this.$message.error(resp.data.msg).center = true
                    }
                }).finally(()=>{
                    this.selectAll();
                });
                this.update.id = '';
            },
            // 批量删除
            deleteBrandByIds(){
                // 弹出确认提示框
                this.$confirm('此操作将永久删除数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {

                    // 1.创建id数组,从this.multipleSelection中获取
                    for (let i = 0; i < this.multipleSelection.length; i++) {
                        let selectionElement = this.multipleSelection[i];
                        this.selectedIds[i] = selectionElement.id
                    }
                  if (this.selectedIds.length < 1){
                      this.$message({
                          showClose: true,
                          message: '请选中您要删除的数据!',
                          type: 'error',
                          center:true,
                      });
                      return;
                  }
                    // 2.发送ajax请求
                    axios({
                        method: 'delete',
                        url: '/brands',
                        data:this.selectedIds,
                        headers:{
                            'Content-Type':'application/json;charset=utf-8'
                        }
                    }).then( (resp) => {
                        if (resp.data.code == 20021) {
                            // 重新查询数据
                            this.selectAll();
                            this.$message({
                                type: 'success',
                                message: '删除成功!',
                                center: true
                            });
                        }else if (resp.data.code == 20020){
                            this.$message.error("删除失败!").center = true
                        }else {
                            this.$message.error(resp.data.msg).center = true
                        }
                    });
                }).catch(() => {
                    // 用户点击取消按钮
                    this.$message({
                        type: 'info',
                        message: '您已取消删除',
                        center:true
                    });
                });
                // 清除数组
                this.selectedIds = [];
            },


            // 删除单条数据
            deleteById(){
                for (let i = 0; i < this.multipleSelection.length; i++) {
                    var selectionElement = this.multipleSelection[i];
                    this.selectedId = selectionElement.id;
                }
                if (this.selectedId == '' || this.selectedId == null){
                    this.$message({
                        showClose: true,
                        message: '请选中您要删除的数据!',
                        type: 'error',
                        center:true,
                    });
                    return;
                }
                axios.delete(`/brands/${this.selectedId}`)
                    .then(resp=>{
                            this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                                confirmButtonText: '确定',
                                cancelButtonText: '取消',
                                type: 'warning'
                            }).then(() => {
                                if (resp.data.code == 20021) {
                                    this.$message({
                                        type: 'success',
                                        message: '删除成功!',
                                        center: true
                                    });
                                }else if (resp.data.code == 20020){
                                    this.$message.error("删除失败!").center = true
                                }else {
                                    this.$message.error(resp.data.msg).center = true
                                }
                            }).catch(() => {
                                this.$message({
                                    type: 'info',
                                    message: '您已取消删除',
                                    center:true,
                                });
                            });
                    }).finally(()=>{
                    // 重新查询数据
                    this.selectAll();
                });
                // 清空selectedId
                this.selectedId = ''
            },
            // 分页
            handleSizeChange(val) {
                // 重新设置每页显示条数
                this.pageSize = val;
                this.selectAll();
            },
            handleCurrentChange(val) {
                // 重新设置当前页码
                this.currentPage = val;
                this.selectAll();
            }
        },
        data() {
            return {
                // 被选中的单个id
                selectedId:'',
                // 总记录条数
                totalCount:'',
                // 每页显示条数
                pageSize:10,
                // 修改数据表单显示状态
                updateDialogVisible:false,
                // 当前页码
                currentPage:1,
                // 控制添加数据对话框表单是否显示
                dialogVisible: false,
                // 品牌模型数据
                brand: {
                    companyName: '',
                    status: '',
                    brandName:'',
                    id:'',
                    ordered:'',
                    description:'',
                },
                // 更新模型数据
                update: {
                    companyName: '',
                    status: '',
                    brandName:'',
                    id:'',
                    ordered:'',
                    description:'',
                },
                // 添加模型数据
                 brand_add: {
                    companyName: '',
                    status: '',
                    brandName:'',
                    id:'',
                    ordered:'',
                    description:'',
                },
                // 复选框选中数据集合
                multipleSelection:[],
                // 被选中的id数组
                selectedIds:[],
                // 表格数据
                tableData: []
            }
        },

    })
</script>

7.页面展示

 

 

 

结语：

希望这些能够帮助到你的学习!!! 如果有需要源码的私信我