一、创建两个后台项目：

1.1_ 修改项目名为renren-fast-vue-manager,其中数据源配置

  1. spring:
  2.    datasource:
  3.         type: com.alibaba.druid.pool.DruidDataSource
  4.         druid:
  5.             driver-class-name: com.mysql.cj.jdbc.Driver
  6.             url: jdbc:mysql://192.168.56.10:3306/renren_fast_manager?useUnicode=true&characterEncoding=UTF-8&serverTimezone=Asia/Shanghai
  7.             username: root
  8.             password: 123

1.2_ 用于原来一样前台的生成方式修改相关配置文件

renren-fast-vue-manager工程：

config/index.js相关配置：

  1. // 代理列表, 是否开启代理通过[./dev.env.js]配置
  2.     proxyTable: devEnv.OPEN_PROXY === false ? {} : {
  3.       '/proxyApi': {
  4.         target: 'http://zeyigou.com/m',
  5.         changeOrigin: true,
  6.         pathRewrite: {
  7.           '^/proxyApi': '/'
  8.         }
  9.       }
  10.     },
  11.     hot:true,   //加上这句才会进行热启动
  12.     // Various Dev Server settings
  13.     host: 'localhost', // can be overwritten by process.env.HOST
  14.     port: 8001,

static/config/index.js相关配置：

  1.  window.SITE_CONFIG['baseUrl'] = 'http://zeyigou.com/m';

renren-fast-vue-shop工程：

config/index.js相关配置：

  1. // 代理列表, 是否开启代理通过[./dev.env.js]配置
  2.     proxyTable: devEnv.OPEN_PROXY === false ? {} : {
  3.       '/proxyApi': {
  4.         target: 'http://zeyigou.com/s',
  5.         changeOrigin: true,
  6.         pathRewrite: {
  7.           '^/proxyApi': '/'
  8.         }
  9.       }
  10.     },
  11.     hot:true,   //加上这句才会进行热启动
  12.     // Various Dev Server settings
  13.     host: 'localhost', // can be overwritten by process.env.HOST
  14.     port: 8002,

static/config/index.js相关配置：

  1.  window.SITE_CONFIG['baseUrl'] = 'http://zeyigou.com/m';

1.3_ 修改项目名为renren-fast-vue-shop,其中数据源配置

  1. spring:
  2.    datasource:
  3.         type: com.alibaba.druid.pool.DruidDataSource
  4.         druid:
  5.             driver-class-name: com.mysql.cj.jdbc.Driver
  6.             url: jdbc:mysql://192.168.56.10:3306/renren_fast_shop?useUnicode=true&characterEncoding=UTF-8&serverTimezone=Asia/Shanghai
  7.             username: root
  8.             password: 123

1.4_ 用于原来一样前台的生成方式修改相关配置文件

renren-fast-vue-manager工程：

config/index.js相关配置：

  1. // 代理列表, 是否开启代理通过[./dev.env.js]配置
  2.     proxyTable: devEnv.OPEN_PROXY === false ? {} : {
  3.       '/proxyApi': {
  4.         target: 'http://zeyigou.com/s',
  5.         changeOrigin: true,
  6.         pathRewrite: {
  7.           '^/proxyApi': '/'
  8.         }
  9.       }
  10.     },
  11.     hot:true,   //加上这句才会进行热启动
  12.     // Various Dev Server settings
  13.     host: 'localhost', // can be overwritten by process.env.HOST
  14.     port: 8002,

static/config/index.js相关配置：

  1.  window.SITE_CONFIG['baseUrl'] = 'http://zeyigou.com/s';

1.5_ 需要完成的菜单如下效果

image.png

1.6 最后，修改nginx配置文件：

在mydata/nginx/conf下配置上游服务器地址：

  1. upstream manager{
  2.   server 192.168.56.1:9001;
  3. }

修改mydata/nginx/conf/conf.d/zeyigou.onf文件：【不建议采用】

  1. server {
  2.     listen       80;
  3.     server_name  zeyigou.com;
  5.     location /m/manager {
  6.             proxy_pass http://manager/;
  7.             proxy_set_header Host $host;
  8.     }
  9.      location /s/manager {
  10.             proxy_pass http://manager/;
  11.             proxy_set_header Host $host;
  12.     }
  14.     #运营商管理后台
  15.     location /m {
  16.             proxy_pass http://192.168.56.1:8080/renren-fast/;
  17.             proxy_set_header Host $host;
  18.     }
  20.     #商家管理后台
  21.     location /s {
  22.             proxy_pass http://192.168.56.1:8081/renren-fast/;
  23.             proxy_set_header Host $host;
  24.     }
  26. }
  1. #采用映射虚拟主机的方式：【建议采纳】,如下：/mydata/nginx/conf/conf.d/zeyigou.conf文件：
  2. #运营商管理后台
  3. server {
  4.     listen       80;
  5.     server_name  manager.zeyigou.com;
  7.     location / {
  8.        proxy_pass http://192.168.56.1:8080/renren-fast/;
  9.        proxy_set_header Host $host;
  10.     }
  12.     location /manager {
  13.     proxy_pass http://192.168.56.1:9001/manager/;
  14.     proxy_set_header Host $host;
  15.     }
  17. }
  18. #商家管理后台
  19. server {
  20.     listen       80;
  21.     server_name  shop.zeyigou.com;
  23.     location / {
  24.        proxy_pass http://192.168.56.1:8081/renren-fast/;
  25.        proxy_set_header Host $host;
  26.     }
  27.     location /shop {
  28.     proxy_pass http://192.168.56.1:9002/shop/;
  29.     proxy_set_header Host $host;
  30.     }
  32. }

1.7、将生成的后台相关的service及controller放到zyg-manager-web及zyg-sellerGoods-interface和zyg-sellergoods-service下

image.png image.png image.png

1.8 运行效果如下：

【运营商管理】后台：
image.png
【商家管理】后台：
image.png
附加说明：

1、此时有两个数据库： image.png 2、有两个后台对应： image.png 3、两个前台如上面的截图：

二、前端规格列表

  1. <template>
  2.   <div class="mod-config">
  3.     <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
  4.       <el-form-item>
  5.         <el-input v-model="dataForm.key" placeholder="参数名" clearable></el-input>
  6.       </el-form-item>
  7.       <el-form-item>
  8.         <el-button @click="getDataList()">查询</el-button>
  9.         <el-button v-if="isAuth('manager:specification:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
  10.         <el-button v-if="isAuth('manager:specification:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
  11.       </el-form-item>
  12.     </el-form>
  13.     <el-table
  14.       :data="dataList"
  15.       border
  16.       v-loading="dataListLoading"
  17.       @selection-change="selectionChangeHandle"
  18.       style="width: 100%;">
  19.       <el-table-column
  20.         type="selection"
  21.         header-align="center"
  22.         align="center"
  23.         width="50">
  24.       </el-table-column>
  25.       <el-table-column
  26.         prop="id"
  27.         header-align="center"
  28.         align="center"
  29.         label="规格id">
  30.       </el-table-column>
  31.       <el-table-column
  32.         prop="specName"
  33.         header-align="center"
  34.         align="center"
  35.         label="名称">
  36.       </el-table-column>
  37.       <el-table-column
  38.         fixed="right"
  39.         header-align="center"
  40.         align="center"
  41.         width="150"
  42.         label="操作">
  43.         <template slot-scope="scope">
  44.           <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">修改</el-button>
  45.           <el-button type="text" size="small" @click="deleteHandle(scope.row.id)">删除</el-button>
  46.         </template>
  47.       </el-table-column>
  48.     </el-table>
  49.     <el-pagination
  50.       @size-change="sizeChangeHandle"
  51.       @current-change="currentChangeHandle"
  52.       :current-page="pageIndex"
  53.       :page-sizes="[10, 20, 50, 100]"
  54.       :page-size="pageSize"
  55.       :total="totalPage"
  56.       layout="total, sizes, prev, pager, next, jumper">
  57.     </el-pagination>
  58.     <!-- 弹窗, 新增 / 修改 -->
  59.     <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
  60.   </div>
  61. </template>
  63. <script>
  64.   import AddOrUpdate from './specification-add-or-update'
  65.   export default {
  66.     data () {
  67.       return {
  68.         dataForm: {
  69.           key: ''
  70.         },
  71.         dataList: [],
  72.         pageIndex: 1,
  73.         pageSize: 10,
  74.         totalPage: 0,
  75.         dataListLoading: false,
  76.         dataListSelections: [],
  77.         addOrUpdateVisible: false
  78.       }
  79.     },
  80.     components: {
  81.       AddOrUpdate
  82.     },
  83.     activated () {
  84.       this.getDataList()
  85.     },
  86.     methods: {
  87.       // 获取数据列表
  88.       getDataList () {
  89.         this.dataListLoading = true
  90.         this.$http({
  91.           url: this.$http.adornUrl('/manager/specification/list'),
  92.           method: 'get',
  93.           params: this.$http.adornParams({
  94.             'page': this.pageIndex,
  95.             'limit': this.pageSize,
  96.             'key': this.dataForm.key
  97.           })
  98.         }).then(({data}) => {
  99.           if (data && data.code === 0) {
  100.             this.dataList = data.page.list
  101.             this.totalPage = data.page.totalCount
  102.           } else {
  103.             this.dataList = []
  104.             this.totalPage = 0
  105.           }
  106.           this.dataListLoading = false
  107.         })
  108.       },
  109.       // 每页数
  110.       sizeChangeHandle (val) {
  111.         this.pageSize = val
  112.         this.pageIndex = 1
  113.         this.getDataList()
  114.       },
  115.       // 当前页
  116.       currentChangeHandle (val) {
  117.         this.pageIndex = val
  118.         this.getDataList()
  119.       },
  120.       // 多选
  121.       selectionChangeHandle (val) {
  122.         this.dataListSelections = val
  123.       },
  124.       // 新增 / 修改
  125.       addOrUpdateHandle (id) {
  126.         this.addOrUpdateVisible = true
  127.         this.$nextTick(() => {
  128.           this.$refs.addOrUpdate.init(id)
  129.         })
  130.       },
  131.       // 删除
  132.       deleteHandle (id) {
  133.         console.log("---------->",this.dataListSelections);
  134.         var ids = id ? [id] : this.dataListSelections.map(item => {
  135.           return item.id
  136.         })
  137.         this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
  138.           confirmButtonText: '确定',
  139.           cancelButtonText: '取消',
  140.           type: 'warning'
  141.         }).then(() => {
  142.           this.$http({
  143.             url: this.$http.adornUrl('/manager/specification/delete'),
  144.             method: 'post',
  145.             data: this.$http.adornData(ids, false)
  146.           }).then(({data}) => {
  147.             if (data && data.code === 0) {
  148.               this.$message({
  149.                 message: '操作成功',
  150.                 type: 'success',
  151.                 duration: 1500,
  152.                 onClose: () => {
  153.                   this.getDataList()
  154.                 }
  155.               })
  156.             } else {
  157.               this.$message.error(data.msg)
  158.             }
  159.           })
  160.         })
  161.       }
  162.     }
  163.   }
  164. </script>

三、前端规格修改及添加

  1. <template>
  2.   <el-dialog
  3.     :title="!dataForm.spec.id ? '新增' : '修改'"
  4.     :close-on-click-modal="false"
  5.     :visible.sync="visible">
  6.     <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
  7.     {{dataForm}}
  8.       <el-form-item label="名称" prop="spec.specName">
  9.       <el-input v-model="dataForm.spec.specName" placeholder="名称" ></el-input>
  10.     </el-form-item>
  11.       <el-button @click="dataForm.options.push({})" type="success">新增规格选项</el-button>
  12.     </el-form>
  13.     <el-table
  14.       :data="dataForm.options"
  15.       style="width: 100%;margin-top: 20px;">
  16.       <el-table-column
  17.         header-align="center"
  18.         align="center"
  19.         prop="optionName"
  20.         label="规格名称">
  21.         <template slot-scope="scope">
  22.           <el-input type="text" v-model="scope.row.optionName" size="small" />
  23.         </template>
  24.       </el-table-column>
  25.       <el-table-column
  26.         header-align="center"
  27.         align="center"
  28.         prop="orders"
  29.         label="顺序">
  30.         <template slot-scope="scope">
  31.           <el-input type="text" size="small"  v-model="scope.row.orders" />
  32.         </template>
  33.       </el-table-column>
  34.       <el-table-column
  35.         fixed="right"
  36.         header-align="center"
  37.         align="center"
  38.         width="150"
  39.         label="操作">
  40.         <template slot-scope="scope">
  41.           <el-button type="text" size="small" @click="dataForm.options.splice(scope.$index,1)">删除</el-button>
  42.         </template>
  43.       </el-table-column>
  44.     </el-table>
  45.     <span slot="footer" class="dialog-footer">
  46.       <el-button @click="visible = false">取消</el-button>
  47.       <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
  48.     </span>
  49.   </el-dialog>
  50. </template>
  52. <script>
  53.   export default {
  54.     data () {
  55.       return {
  56.         visible: false,
  57.         dataForm: {
  58.           spec:{
  59.             id:undefined,
  60.             specName: ''
  61.           },
  62.           options:[],
  63.         },
  64.         dataRule: {
  65.           spec:{
  66.             specName: [
  67.               { required: true, message: '名称不能为空', trigger: 'blur' }
  68.             ]
  69.           }
  71.         }
  72.       }
  73.     },
  74.     methods: {
  75.       init (id) {
  77.         this.dataForm.spec.id = id || 0
  78.         this.visible = true
  79.         this.$nextTick(() => {
  80.           this.$refs['dataForm'].resetFields()
  81.           if (this.dataForm.spec.id) {
  83.             this.$http({
  84.               url: this.$http.adornUrl(`/manager/specification/info/${this.dataForm.spec.id}`),
  85.               method: 'get',
  86.               params: this.$http.adornParams()
  87.             }).then(({data}) => {
  88.               if (data && data.code === 0) {
  89.                 this.dataForm = data.specification;
  90.               }
  91.             })
  92.           }
  93.           else{
  94.             this.dataForm.spec={};
  95.             this.dataForm.options=[];
  96.           }
  97.         })
  98.       },
  99.       // 表单提交
  100.       dataFormSubmit () {
  101.         this.$refs['dataForm'].validate((valid) => {
  102.           if (valid) {
  103.             this.$http({
  104.               url: this.$http.adornUrl(`/manager/specification/${!this.dataForm.spec.id ? 'save' : 'update'}`),
  105.               method: 'post',
  106.               data:this.dataForm
  107.               // data: this.$http.adornData({
  108.               //   'id': this.dataForm.spec.id || undefined,
  109.               //   'specName': this.dataForm.spec.specName
  110.               // })
  111.             }).then(({data}) => {
  112.               if (data && data.code === 0) {
  113.                 this.$message({
  114.                   message: '操作成功',
  115.                   type: 'success',
  116.                   duration: 1500,
  117.                   onClose: () => {
  118.                     this.visible = false
  119.                     this.$emit('refreshDataList')
  120.                   }
  121.                 })
  122.               } else {
  123.                 this.$message.error(data.msg)
  124.               }
  125.             })
  126.           }
  127.         })
  128.       }
  129.     }
  130.   }
  131. </script>

四、后端规格服务层修改及添加、删除

  1. /**
  2.      * 功能: 添加规格及期规格选项
  3.      * 参数:
  4.      * 返回值: void
  5.      * 时间: 2021/7/26 15:52
  6.      */
  7.     @Override
  8.     public void add(Specification specification) {
  9.         //1. 添加规格对象
  10.         SpecificationEntity spec = specification.getSpec();
  11.         baseMapper.insert(spec);
  12.         System.out.println("spec = " + spec);
  14.         //2. 添加规格选项
  15.         List<SpecificationOptionEntity> options = specification.getOptions();
  16.         for (SpecificationOptionEntity option : options) {
  17.             //2.1 为规格选项指定外键
  18.             option.setSpecId(spec.getId());
  19.             //2.2 添加规格选项
  20.             optionService.save(option);
  21.         }
  23.     }
  25.     /**
  26.      * 功能: 根据id查询规格及其规格选项
  27.      * 参数:
  28.      * 返回值: com.zelin.entity.group.Specification
  29.      * 时间: 2021/7/26 16:17
  30.      */
  31.     @Override
  32.     public Specification findById(Long id) {
  33.         //1. 根据规格id查询规格
  34.         SpecificationEntity specificationEntity = baseMapper.selectById(id);
  35.         //2. 根据规格id在规格选项表中查询出此规格对应的规格选项列表
  36.         //2.1 定义查询条件
  37.         QueryWrapper<SpecificationOptionEntity> queryWrapper = new QueryWrapper<>();
  38.         queryWrapper.eq("spec_id",id);
  39.         //2.2 根据条件查询出规格选项列表
  40.         List<SpecificationOptionEntity> list = optionService.list(queryWrapper);
  41.         //3. 定义规格的组合对象
  42.         Specification specification = new Specification();
  43.         specification.setSpec(specificationEntity);
  44.         specification.setOptions(list);
  45.         return specification;
  46.     }
  48.     /**
  49.      * 功能: 修改规格及其规格选项
  50.      * 参数:
  51.      * 返回值: void
  52.      * 时间: 2021/7/26 16:27
  53.      * 注意：
  54.      *   一对多及多对多修改：
  55.      *   ① 根据外键删除多的一方表中的所有数据
  56.      *   ② 再添加到多的一方
  57.      *   ③ 一方直接修改
  58.      */
  59.     @Override
  60.     public void update2(Specification specification) {
  61.         //1. 修改规格表(根据id修改规格表)
  62.         this.updateById(specification.getSpec());
  64.         //2. 根据规格id在多的表中删除数据(根据外键删除多的一方)
  65.         QueryWrapper<SpecificationOptionEntity> deleteWrapper = new QueryWrapper<>();
  66.         deleteWrapper.eq("spec_id",specification.getSpec().getId());
  67.         optionService.remove(deleteWrapper);
  69.         //3. 再添加新的数据到多的表中
  70.         //3.1 得到规格选项的值
  71.         List<SpecificationOptionEntity> options = specification.getOptions();
  72.         for (SpecificationOptionEntity option : options) {
  73.             //3.2 设置关联的外键
  74.             option.setSpecId(specification.getSpec().getId());
  75.             //3.2 添加规格选项到规格选项表中
  76.             optionService.save(option);
  77.         }
  79.     }
  81.     /**
  82.      * 功能: 根据传入的多个规格id，删除规格及规格选项
  83.      * 参数:
  84.      * 返回值: void
  85.      * 时间: 2021/7/26 16:48
  86.      */
  87.     @Override
  88.     public void batchDelete(List<Long> ids) {
  89.         for (Long id : ids) {
  90.             //1. 删除主表规格表
  91.             this.removeById(id);
  93.             //2. 规格选项表
  94.             QueryWrapper<SpecificationOptionEntity> deleteWrapper = new QueryWrapper<>();
  95.             deleteWrapper.eq("spec_id",id);
  96.             optionService.remove(deleteWrapper);
  97.         }
  98.     }

五、后端规格控制层

  1. /**
  2.  * @author WF
  3.  * @email 2568783935@qq.com
  4.  * @date 2021-07-23 21:10:35
  5.  */
  6. @RestController
  7. @RequestMapping("/specification")
  8. public class SpecificationController {
  9.     @Autowired
  10.     private SpecificationService specificationService;
  12.     /**
  13.      * 列表
  14.      */
  15.     @RequestMapping("/list")
  16.     //@RequiresPermissions("manager:specification:list")
  17.     public R list(@RequestParam Map<String, Object> params){
  18.         PageUtils page = specificationService.queryPage(params);
  19.         return R.ok().put("page", page);
  20.     }
  22.     /**
  23.      * 功能: 显示所有规格列表
  24.      * 参数:
  25.      * 返回值: com.zelin.utils.R
  26.      * 时间: 2021/7/27 11:57
  27.      */
  28.     @RequestMapping("/findAll")
  29.     public R findAll(){
  30.         //1. 查询所有规格列表
  31.         List<SpecificationEntity> list = specificationService.list();
  32.         //2. 收集数据转换为SpecificationVoEntity对象
  33.         List<SpecificationVoEntity> collect = list.stream()
  34.                                                   .map(m -> new SpecificationVoEntity(m.getId(), m.getSpecName()))
  35.                                                   .collect(Collectors.toList());
  36.         //3. 返回分页对象
  37.         return R.ok().put("list", collect);
  38.     }
  40.     /**
  41.      * 信息(根据id查询规格)
  42.      */
  43.     @RequestMapping("/info/{id}")
  44.     //@RequiresPermissions("manager:specification:info")
  45.     public R info(@PathVariable("id") Long id){
  46.         Specification specification = specificationService.findById(id);
  48.         return R.ok().put("specification", specification);
  49.     }
  51.     /**
  52.      * 保存(添加)
  53.      */
  54.     @RequestMapping("/save")
  55.     //@RequiresPermissions("manager:specification:save")
  56.     public R save(@RequestBody Specification specification){
  57.         System.out.println("specification--->add = " + specification);
  58.         specificationService.add(specification);
  60.         return R.ok();
  61.     }
  63.     /**
  64.      * 修改
  65.      */
  66.     @RequestMapping("/update")
  67.     //@RequiresPermissions("manager:specification:update")
  68.     public R update(@RequestBody Specification specification){
  69.         specificationService.update2(specification);
  71.         return R.ok();
  72.     }
  74.     /**
  75.      * 删除
  76.      */
  77.     @RequestMapping("/delete")
  78.     //@RequiresPermissions("manager:specification:delete")
  79.     public R delete(@RequestBody Long[] ids){
  80.         specificationService.batchDelete(Arrays.asList(ids));
  82.         return R.ok();
  83.     }
  85. }

六、后端品牌控制层：

  1. /**
  2.  * @author WF
  3.  * @email 2568783935@qq.com
  4.  * @date 2021-07-23 21:10:35
  5.  */
  6. @RestController
  7. @RequestMapping("/brand")
  8. public class BrandController {
  9.     @Autowired
  10.     private BrandService brandService;
  12.     /**
  13.      * 列表cd
  14.      */
  15.     @RequestMapping("/list")
  16.     //@RequiresPermissions("manager:brand:list")
  17.     public R list(@RequestParam Map<String, Object> params){
  18.         PageUtils page = brandService.queryPage(params);
  19.         System.out.println("page = " + page.getList());
  20.         return R.ok().put("page", page);
  21.     }
  22.     /**
  23.      * 显示所有品牌
  24.      */
  25.     @RequestMapping("/findAll")
  26.     public R findAll(){
  27.         //1. 查询所有品牌
  28.         List<BrandEntity> list = brandService.list();
  29.         //2. 将当前页集合中的对象更改为BrandVoEntity对象，因为这个对象是模板表中的brandIds[{id:1,text:'aa'}]中某一条记录
  30.         List<BrandVoEntity> collect = list.stream()
  31.                                           .map(m -> new BrandVoEntity(m.getId(), m.getName()))
  32.                                           .collect(Collectors.toList());
  33.         //2. 返回结果
  34.         return R.ok().put("list", collect);
  35.     }
  37.     /**
  38.      * 信息
  39.      */
  40.     @RequestMapping("/info/{id}")
  41.     //@RequiresPermissions("manager:brand:info")
  42.     public R info(@PathVariable("id") Long id){
  43.         BrandEntity brand = brandService.getById(id);
  45.         return R.ok().put("brand", brand);
  46.     }
  48.     /**
  49.      * 保存
  50.      */
  51.     @RequestMapping("/save")
  52.     //@RequiresPermissions("manager:brand:save")
  53.     public R save(@RequestBody BrandEntity brand){
  54.         System.out.println("brand = " + brand);
  55.         brandService.save(brand);
  57.         return R.ok();
  58.     }
  60.     /**
  61.      * 修改
  62.      */
  63.     @RequestMapping("/update")
  64.     //@RequiresPermissions("manager:brand:update")
  65.     public R update(@RequestBody BrandEntity brand){
  66.         brandService.updateById(brand);
  68.         return R.ok();
  69.     }
  71.     /**
  72.      * 删除
  73.      */
  74.     @RequestMapping("/delete")
  75.     //@RequiresPermissions("manager:brand:delete")
  76.     public R delete(@RequestBody Long[] ids){
  77.         brandService.removeByIds(Arrays.asList(ids));
  79.         return R.ok();
  80.     }
  82. }

七、运行效果如下：

image.png
image.png
image.png

八、模板前端开发-列表展示：

  1. <template>
  2.   <div class="mod-config">
  3.     <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
  4.       <el-form-item>
  5.         <el-input v-model="dataForm.key" placeholder="参数名" clearable></el-input>
  6.       </el-form-item>
  7.       <el-form-item>
  8.         <el-button @click="getDataList()">查询</el-button>
  9.         <el-button v-if="isAuth('manager:typetemplate:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
  10.         <el-button v-if="isAuth('manager:typetemplate:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
  11.       </el-form-item>
  12.     </el-form>
  13.     <el-table
  14.       :data="dataList"
  15.       border
  16.       v-loading="dataListLoading"
  17.       @selection-change="selectionChangeHandle"
  18.       style="width: 100%;">
  19.       <el-table-column
  20.         type="selection"
  21.         header-align="center"
  22.         align="center"
  23.         width="50">
  24.       </el-table-column>
  25.       <el-table-column
  26.         prop="id"
  27.         header-align="center"
  28.         align="center"
  29.         label="">
  30.       </el-table-column>
  31.       <el-table-column
  32.         prop="name"
  33.         header-align="center"
  34.         align="center"
  35.         label="模板名称">
  36.       </el-table-column>
  37.       <el-table-column
  39.         header-align="center"
  40.         align="center"
  41.         label="关联规格">
  42.         <template slot-scope="scope">
  43.           <span style="margin-left: 10px">{{handleDataList(scope.row.specIds,"text") }}</span>
  44.         </template>
  45.       </el-table-column>
  46.       <el-table-column
  47.         header-align="center"
  48.         align="center"
  49.         label="关联品牌">
  50.         <template slot-scope="scope">
  51.           <span style="margin-left: 10px">{{handleDataList(scope.row.brandIds,"text")  }}</span>
  52.         </template>
  53.       </el-table-column>
  54.       <el-table-column
  55.         header-align="center"
  56.         align="center"
  57.         label="自定义属性">
  58.         <template slot-scope="scope">
  59.           <span style="margin-left: 10px">{{handleDataList(scope.row.customAttributeItems,"text")  }}</span>
  60.         </template>
  61.       </el-table-column>
  62.       <el-table-column
  63.         fixed="right"
  64.         header-align="center"
  65.         align="center"
  66.         width="150"
  67.         label="操作">
  68.         <template slot-scope="scope">
  69.           <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">修改</el-button>
  70.           <el-button type="text" size="small" @click="deleteHandle(scope.row.id)">删除</el-button>
  71.         </template>
  72.       </el-table-column>
  73.     </el-table>
  74.     <el-pagination
  75.       @size-change="sizeChangeHandle"
  76.       @current-change="currentChangeHandle"
  77.       :current-page="pageIndex"
  78.       :page-sizes="[10, 20, 50, 100]"
  79.       :page-size="pageSize"
  80.       :total="totalPage"
  81.       layout="total, sizes, prev, pager, next, jumper">
  82.     </el-pagination>
  83.     <!-- 弹窗, 新增 / 修改 -->
  84.     <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
  85.   </div>
  86. </template>
  88. <script>
  89.   import AddOrUpdate from './typetemplate-add-or-update'
  90.   export default {
  91.     data () {
  92.       return {
  93.         dataForm: {
  94.           key: ''
  95.         },
  96.         dataList: [],
  97.         pageIndex: 1,
  98.         pageSize: 10,
  99.         totalPage: 0,
  100.         dataListLoading: false,
  101.         dataListSelections: [],
  102.         addOrUpdateVisible: false
  103.       }
  104.     },
  105.     components: {
  106.       AddOrUpdate
  107.     },
  108.     activated () {
  109.       this.getDataList()
  110.     },
  111.     methods: {
  112.       // 获取数据列表
  113.       getDataList () {
  114.         this.dataListLoading = true
  115.         this.$http({
  116.           url: this.$http.adornUrl('/manager/typetemplate/list'),
  117.           method: 'get',
  118.           params: this.$http.adornParams({
  119.             'page': this.pageIndex,
  120.             'limit': this.pageSize,
  121.             'key': this.dataForm.key
  122.           })
  123.         }).then(({data}) => {
  124.           if (data && data.code === 0) {
  125.             this.dataList = data.page.list
  126.             this.totalPage = data.page.totalCount
  128.             //处理一下dataList
  129.             // this.handleDataList(this.dataList.brandIds,"text");
  131.           } else {
  132.             this.dataList = []
  133.             this.totalPage = 0
  134.           }
  135.           this.dataListLoading = false
  136.         })
  137.       },
  138.       //将传入的集合只根据对应key得到数据并返回
  139.       handleDataList(list,key){
  140.         list = JSON.parse(list);
  141.         //最终连接成的文本
  142.         let info = "";
  143.         list.forEach(item=>{
  144.           info += item[key] + ","
  145.         })
  146.         return info;
  147.       },
  148.       // 每页数
  149.       sizeChangeHandle (val) {
  150.         this.pageSize = val
  151.         this.pageIndex = 1
  152.         this.getDataList()
  153.       },
  154.       // 当前页
  155.       currentChangeHandle (val) {
  156.         this.pageIndex = val
  157.         this.getDataList()
  158.       },
  159.       // 多选
  160.       selectionChangeHandle (val) {
  161.         this.dataListSelections = val
  162.       },
  163.       // 新增 / 修改
  164.       addOrUpdateHandle (id) {
  165.         this.addOrUpdateVisible = true
  166.         this.$nextTick(() => {
  167.           this.$refs.addOrUpdate.init(id)
  168.         })
  169.       },
  170.       // 删除
  171.       deleteHandle (id) {
  172.         var ids = id ? [id] : this.dataListSelections.map(item => {
  173.           return item.id
  174.         })
  175.         this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
  176.           confirmButtonText: '确定',
  177.           cancelButtonText: '取消',
  178.           type: 'warning'
  179.         }).then(() => {
  180.           this.$http({
  181.             url: this.$http.adornUrl('/manager/typetemplate/delete'),
  182.             method: 'post',
  183.             data: this.$http.adornData(ids, false)
  184.           }).then(({data}) => {
  185.             if (data && data.code === 0) {
  186.               this.$message({
  187.                 message: '操作成功',
  188.                 type: 'success',
  189.                 duration: 1500,
  190.                 onClose: () => {
  191.                   this.getDataList()
  192.                 }
  193.               })
  194.             } else {
  195.               this.$message.error(data.msg)
  196.             }
  197.           })
  198.         })
  199.       }
  200.     }
  201.   }
  202. </script>

九、模板前端开发-新增修改模板：

  1. <template>
  2.   <el-dialog
  3.     :title="!dataForm.id ? '新增' : '修改'"
  4.     :close-on-click-modal="false"
  5.     :visible.sync="visible">
  6.     {{dataForm}}
  7.     <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="120px">
  8.     <el-form-item label="模板名称" prop="name">
  9.       <el-input v-model="dataForm.name" placeholder="模板名称"></el-input>
  10.     </el-form-item>
  11.     <el-form-item label="关联规格">
  12.       <el-select v-model="dataForm.specIds" value-key="id" multiple placeholder="请选择">
  13.         <el-option
  14.           v-for="item in specs"
  15.           :key="item.id"
  16.           :label="item.text"
  17.           :value="item">
  18.         </el-option>
  19.       </el-select>
  20.     </el-form-item>
  21.     <el-form-item label="关联品牌" prop="brandIds">
  22.       <el-select v-model="dataForm.brandIds" value-key="id" multiple placeholder="请选择">
  23.         <el-option
  24.           v-for="item in brands"
  25.           :key="item.id"
  26.           :label="item.text"
  27.           :value="item">
  28.         </el-option>
  29.       </el-select>
  31.     </el-form-item>
  32.     <el-form-item label="自定义扩展属性" >
  33.       <el-button @click="dataForm.customAttributeItems.push({})" type="primary" plain>新增扩展属性</el-button>
  34.       <el-table
  35.         :data="dataForm.customAttributeItems"
  36.         style="width: 100%;margin-top: 20px;">
  37.         <el-table-column
  38.           header-align="center"
  39.           align="center"
  40.           label="属性名称">
  41.           <template slot-scope="scope">
  42.             <el-input type="text" v-model="scope.row.text" size="small" />
  43.           </template>
  44.         </el-table-column>
  46.         <el-table-column
  47.           fixed="right"
  48.           header-align="center"
  49.           align="center"
  50.           width="150"
  51.           label="操作">
  52.           <template slot-scope="scope">
  53.             <el-button type="text" size="small" @click="dataForm.options.splice(scope.$index,1)">删除</el-button>
  54.           </template>
  55.         </el-table-column>
  56.       </el-table>
  57.     </el-form-item>
  58.     </el-form>
  59.     <span slot="footer" class="dialog-footer">
  60.       <el-button @click="visible = false">取消</el-button>
  61.       <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
  62.     </span>
  63.   </el-dialog>
  64. </template>
  66. <script>
  67.   export default {
  68.     data () {
  69.       return {
  70.         visible: false,
  71.         specs:[],
  72.         brands:[],
  73.         dataForm: {
  74.           name: '',
  75.           specIds: [],
  76.           brandIds: [],
  77.           customAttributeItems: []
  78.         },
  79.         dataRule: {
  80.           name: [
  81.             { required: true, message: '模板名称不能为空', trigger: 'blur' }
  82.           ],
  83.           specIds: [
  84.             { required: true, message: '关联规格不能为空', trigger: 'blur' }
  85.           ],
  86.           brandIds: [
  87.             { required: true, message: '关联品牌不能为空', trigger: 'blur' }
  88.           ],
  89.           customAttributeItems: [
  90.             { required: true, message: '自定义属性不能为空', trigger: 'blur' }
  91.           ]
  92.         }
  93.       }
  94.     },
  95.     created() {
  96.      this.getSpecs();
  97.      this.getBrands();
  98.     },
  99.     methods: {
  100.       getKey(row){
  101.         return row.id;
  102.       },
  103.       //1. 获取规格列表
  104.       getSpecs(){
  105.         this.$http({
  106.           url: this.$http.adornUrl(`/manager/specification/findAll`),
  107.           method: 'get',
  108.           params: this.$http.adornParams()
  109.         }).then(({data}) => {
  110.           if (data && data.code === 0) {
  111.             console.log("xxx----",data);
  112.             // this.specs = data.page.list.map(m=>{
  113.             //   return {"id":m.id,"text":m.specName}
  114.             // })
  115.             this.specs = data.list;
  116.           }
  117.         })
  118.       },
  119.       //2. 获取所有的品牌列表
  120.       getBrands(){
  121.         this.$http({
  122.           url: this.$http.adornUrl(`/manager/brand/findAll`),
  123.           method: 'get',
  124.           params: this.$http.adornParams()
  125.         }).then(({data}) => {
  126.           if (data && data.code === 0) {
  127.             console.log("xxx----",data);
  128.             this.brands = data.list
  129.             // this.brands = data.page.list;
  130.           }
  131.         })
  132.       },
  133.       converToStr(str,key){
  134.          //1. 转换字符串为对象
  135.          let obj = JSON.parse(str);
  136.          //2. 再处理其中的id为字符串类型
  137.         return obj.map(m=>{
  138.           return {"id":m.id+"","text":m[key]};
  139.         })
  140.       },
  141.       init (id) {
  142.         this.dataForm.id = id || 0
  143.         this.visible = true
  144.         this.$nextTick(() => {
  145.           this.$refs['dataForm'].resetFields()
  146.           if (this.dataForm.id) {
  147.             this.$http({
  148.               url: this.$http.adornUrl(`/manager/typetemplate/info/${this.dataForm.id}`),
  149.               method: 'get',
  150.               params: this.$http.adornParams()
  151.             }).then(({data}) => {
  152.               if (data && data.code === 0) {
  154.                 this.dataForm.name = data.typeTemplate.name
  155.                 //this.dataForm.specIds = JSON.parse(data.typeTemplate.specIds)
  156.                 this.dataForm.specIds = this.converToStr(data.typeTemplate.specIds,"text");
  157.                 this.dataForm.brandIds = this.converToStr(data.typeTemplate.brandIds,"text")
  158.                 this.dataForm.customAttributeItems = JSON.parse(data.typeTemplate.customAttributeItems)
  161.                 // this.dataForm.specIds = this.dataForm.specIds.map(m=>{
  162.                 //   return {"id":m.id,"text":m.specName};
  163.                 // })
  164.                 console.log("dataForm---->",this.dataForm);
  165.               }
  166.             })
  167.           }else{
  168.             this.dataForm.specIds = [];
  169.             this.dataForm.brandIds = [];
  170.             this.dataForm.customAttributeItems = [];
  171.           }
  172.         })
  173.       },
  174.       // 表单提交
  175.       dataFormSubmit () {
  176.         this.$refs['dataForm'].validate((valid) => {
  177.           if (valid) {
  178.             this.$http({
  179.               url: this.$http.adornUrl(`/manager/typetemplate/${!this.dataForm.id ? 'save' : 'update'}`),
  180.               method: 'post',
  181.               data: this.$http.adornData({
  182.                 'id': this.dataForm.id || undefined,
  183.                 'name': this.dataForm.name,
  184.                 'specIds': this.dataForm.specIds,
  185.                 'brandIds': this.dataForm.brandIds,
  186.                 'customAttributeItems': this.dataForm.customAttributeItems
  187.               })
  188.             }).then(({data}) => {
  189.               if (data && data.code === 0) {
  190.                 this.$message({
  191.                   message: '操作成功',
  192.                   type: 'success',
  193.                   duration: 1500,
  194.                   onClose: () => {
  195.                     this.visible = false
  196.                     this.$emit('refreshDataList')
  197.                   }
  198.                 })
  199.               } else {
  200.                 this.$message.error(data.msg)
  201.               }
  202.             })
  203.           }
  204.         })
  205.       }
  206.     }
  207.   }
  208. </script>

十、模板页面运行效果：

image.png
image.png

十一、模板表中的id一定要带引号，否则，修改回显数据出错

  1. CREATE TABLE `tb_type_template` (
  2.   `id` bigint(11) NOT NULL AUTO_INCREMENT,
  3.   `name` varchar(80) DEFAULT NULL COMMENT '模板名称',
  4.   `spec_ids` varchar(1000) DEFAULT NULL COMMENT '关联规格',
  5.   `brand_ids` varchar(1000) DEFAULT NULL COMMENT '关联品牌',
  6.   `custom_attribute_items` varchar(2000) DEFAULT NULL COMMENT '自定义属性',
  7.   PRIMARY KEY (`id`)
  8. ) ENGINE=InnoDB AUTO_INCREMENT=1419912706006802434 DEFAULT CHARSET=utf8;
  10. /*Data for the table `tb_type_template` */
  12. insert  into `tb_type_template`(`id`,`name`,`spec_ids`,`brand_ids`,`custom_attribute_items`) values 
  13. (35,'手机','[{\"id\":\"27\",\"text\":\"网络\"},{\"id\":\"32\",\"text\":\"机身内存\"}]','[{\"id\":\"1\",\"text\":\"联想\"},{\"id\":\"3\",\"text\":\"三星\"},{\"id\":\"2\",\"text\":\"华为\"},{\"id\":\"5\",\"text\":\"OPPO\"},{\"id\":\"4\",\"text\":\"小米\"},{\"id\":\"9\",\"text\":\"苹果\"},{\"id\":\"8\",\"text\":\"魅族\"},{\"id\":\"6\",\"text\":\"360\"},{\"id\":\"10\",\"text\":\"VIVO\"},{\"id\":\"11\",\"text\":\"诺基亚\"},{\"id\":\"12\",\"text\":\"锤子\"}]','[{\"text\":\"内存大小\"},{\"text\":\"颜色\"}]'),
  14. (37,'电视','[{\"id\":\"33\",\"text\":\"电视屏幕尺寸\"}]','[{\"id\":\"16\",\"text\":\"TCL\"},{\"id\":\"13\",\"text\":\"长虹\"},{\"id\":\"14\",\"text\":\"海尔\"},{\"id\":\"19\",\"text\":\"创维\"},{\"id\":\"21\",\"text\":\"康佳\"},{\"id\":\"18\",\"text\":\"夏普\"},{\"id\":\"17\",\"text\":\"海信\"},{\"id\":\"20\",\"text\":\"东芝\"},{\"id\":\"15\",\"text\":\"飞利浦\"},{\"id\":\"22\",\"text\":\"LG\"}]','[{\"text\":\"机身内存\"},{\"text\":\"颜色\"}]'),
  15. (38,'移动电源','[{\"id\":\"26\",\"text\":\"尺码\"},{\"id\":\"28\",\"text\":\"手机屏幕尺寸\"}]','[{\"id\":\"1\",\"text\":\"联想\"},{\"id\":\"2\",\"text\":\"华为\"},{\"id\":\"5\",\"text\":\"OPPO\"}]','[{\"text\":\"aaa\"},{\"text\":\"ccc\"},{\"text\":\"ddd\"}]'),
  16. (1419912706006802433,'京东电视','[{\"id\":\"26\",\"text\":\"尺码\"},{\"id\":\"27\",\"text\":\"网络\"}]','[{\"id\":\"7\",\"text\":\"中兴\"},{\"id\":\"3\",\"text\":\"三星\"},{\"id\":\"11\",\"text\":\"诺基亚\"}]','[{\"text\":\"cc\"},{\"text\":\"eee\"}]');

十二：商家审核

业务需求：
商家申请入驻后，需要网站运营人员在运营商后台进行审核，审核后商家才可以登陆系统。
状态值： 0：未审核 1：已审核 2：审核未通过 3：关闭

12.1 前端实现

  1. <template>
  2.   <div class="mod-config">
  3.     <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
  4.       <el-form-item>
  5.         <el-input v-model="dataForm.key" placeholder="参数名" clearable></el-input>
  6.       </el-form-item>
  7.       <el-form-item>
  8.         <el-button @click="getDataList()">查询</el-button>
  9.         <el-button v-if="isAuth('manager:seller:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
  10.         <el-button v-if="isAuth('manager:seller:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
  11.       </el-form-item>
  12.     </el-form>
  13.     <el-table
  14.       :data="dataList"
  15.       border
  16.       v-loading="dataListLoading"
  17.       @selection-change="selectionChangeHandle"
  18.       style="width: 100%;">
  19.       <el-table-column
  20.         type="selection"
  21.         header-align="center"
  22.         align="center"
  23.         width="50">
  24.       </el-table-column>
  25.       <el-table-column
  26.         prop="sellerId"
  27.         header-align="center"
  28.         align="center"
  29.         label="商家ID">
  30.       </el-table-column>
  31.       <el-table-column
  32.         prop="name"
  33.         header-align="center"
  34.         align="center"
  35.         label="公司名">
  36.       </el-table-column>
  37.       <el-table-column
  38.         prop="nickName"
  39.         header-align="center"
  40.         align="center"
  41.         label="店铺名称">
  42.       </el-table-column>
  44.       <el-table-column
  45.         prop="telephone"
  46.         header-align="center"
  47.         align="center"
  48.         label="公司电话">
  49.       </el-table-column>
  50.       <el-table-column
  51.         fixed="right"
  52.         header-align="center"
  53.         align="center"
  54.         width="300"
  55.         label="操作">
  56.         <template slot-scope="scope">
  57.           <el-button type="text" size="small" @click="updateStatus(scope.row.sellerId,'1')">审核通过</el-button>
  58.           <el-button type="text" size="small" @click="updateStatus(scope.row.sellerId,'2')">审核未通过</el-button>
  59.           <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.sellerId)">修改</el-button>
  60.           <el-button type="text" size="small" @click="deleteHandle(scope.row.sellerId)">删除</el-button>
  61.         </template>
  62.       </el-table-column>
  63.     </el-table>
  64.     <el-pagination
  65.       @size-change="sizeChangeHandle"
  66.       @current-change="currentChangeHandle"
  67.       :current-page="pageIndex"
  68.       :page-sizes="[10, 20, 50, 100]"
  69.       :page-size="pageSize"
  70.       :total="totalPage"
  71.       layout="total, sizes, prev, pager, next, jumper">
  72.     </el-pagination>
  73.     <!-- 弹窗, 新增 / 修改 -->
  74.     <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
  75.   </div>
  76. </template>
  78. <script>
  79.   import AddOrUpdate from './seller-add-or-update'
  80.   export default {
  81.     data () {
  82.       return {
  83.         dataForm: {
  84.           key: ''
  85.         },
  86.         dataList: [],
  87.         pageIndex: 1,
  88.         pageSize: 10,
  89.         totalPage: 0,
  90.         dataListLoading: false,
  91.         dataListSelections: [],
  92.         addOrUpdateVisible: false
  93.       }
  94.     },
  95.     components: {
  96.       AddOrUpdate
  97.     },
  98.     activated () {
  99.       this.getDataList()
  100.     },
  101.     methods: {
  102.       //商家审核
  103.       updateStatus(sellerId,status){
  104.         this.$http({
  105.           url: this.$http.adornUrl(`/manager/seller/updateStatus/${sellerId}/${status}`),
  106.           method: 'get'
  107.         }).then(({data}) => {
  108.           if (data && data.code === 0) {
  109.              this.getDataList();
  110.           } else {
  111.             this.dataList = []
  112.             this.totalPage = 0
  113.           }
  114.         })
  115.       },
  116.       // 获取数据列表
  117.       getDataList () {
  118.         this.dataListLoading = true
  119.         this.$http({
  120.           url: this.$http.adornUrl('/manager/seller/list'),
  121.           method: 'get',
  122.           params: this.$http.adornParams({
  123.             'page': this.pageIndex,
  124.             'limit': this.pageSize,
  125.             'key': this.dataForm.key
  126.           })
  127.         }).then(({data}) => {
  128.           if (data && data.code === 0) {
  129.             this.dataList = data.page.list
  130.             this.totalPage = data.page.totalCount
  131.           } else {
  132.             this.dataList = []
  133.             this.totalPage = 0
  134.           }
  135.           this.dataListLoading = false
  136.         })
  137.       },
  138.       // 每页数
  139.       sizeChangeHandle (val) {
  140.         this.pageSize = val
  141.         this.pageIndex = 1
  142.         this.getDataList()
  143.       },
  144.       // 当前页
  145.       currentChangeHandle (val) {
  146.         this.pageIndex = val
  147.         this.getDataList()
  148.       },
  149.       // 多选
  150.       selectionChangeHandle (val) {
  151.         this.dataListSelections = val
  152.       },
  153.       // 新增 / 修改
  154.       addOrUpdateHandle (id) {
  155.         this.addOrUpdateVisible = true
  156.         this.$nextTick(() => {
  157.           this.$refs.addOrUpdate.init(id)
  158.         })
  159.       },
  160.       // 删除
  161.       deleteHandle (id) {
  162.         var ids = id ? [id] : this.dataListSelections.map(item => {
  163.           return item.sellerId
  164.         })
  165.         this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
  166.           confirmButtonText: '确定',
  167.           cancelButtonText: '取消',
  168.           type: 'warning'
  169.         }).then(() => {
  170.           this.$http({
  171.             url: this.$http.adornUrl('/manager/seller/delete'),
  172.             method: 'post',
  173.             data: this.$http.adornData(ids, false)
  174.           }).then(({data}) => {
  175.             if (data && data.code === 0) {
  176.               this.$message({
  177.                 message: '操作成功',
  178.                 type: 'success',
  179.                 duration: 1500,
  180.                 onClose: () => {
  181.                   this.getDataList()
  182.                 }
  183.               })
  184.             } else {
  185.               this.$message.error(data.msg)
  186.             }
  187.           })
  188.         })
  189.       }
  190.     }
  191.   }
  192. </script>

12.2 后端实现

12.2.1 服务层

  1.  /**
  2.      * 功能: 商家审核
  3.      * 参数:
  4.      * 返回值:
  5.      * 时间: 2021/7/27 15:33
  6.      */
  7.     @Override
  8.     public void updateStatus(String sellerId, String status) {
  9.         SellerEntity entity = new SellerEntity();
  10.         entity.setSellerId(sellerId);
  11.         entity.setStatus(status);
  12.         updateById(entity);
  13.     }

12.2.2 控制层

  1.     /**
  2.      * 功能: 商家审核
  3.      * 参数:
  4.      * 返回值:
  5.      * 时间: 2021/7/27 15:32
  6.      */
  7.     @RequestMapping("/updateStatus/{sellerId}/{status}")
  8.     public R updateStatus(@PathVariable String sellerId,@PathVariable String status){
  9.         sellerService.updateStatus(sellerId,status);
  10.         return R.ok();
  11.     }

12.3 最张效果

image.png