这是新人入职，后台管理系统的一个综合总结，增 、删  、改 、查 、导出、觉得有用就看看，技术不是很牛，别喷。

---

 

一 数据的引入，利用.Promise的语法糖（es7）async 、await 来调用

1.1  创建调用接口，get请求方式

然后在页面中添加请求方法

1.2   把请求来的数据赋值在自己提前创建接受的值上，再利用element的表单属性：data=list（自己创建）

1.3  绑定之后，利用prop绑定数据中对应的值进行回写

1.4  接着是回写中遇到例如后台数据判断请求1是审核中2是审核失败3是审核异常，等数字情况就需要前端根据对应来变成文字方式  利用三元运算符来进行

 例如根据不同的回写加不同的颜色

ps： （里面第一个color 略过啊，当时写错了，纯属10000000近视）

接着是分页看下后台返回的字段 一般是  page:size total  cuurrent 差不多就这几个

 在element-分页中选择合适的分页，来进行操作-就是放在需要展示的页面上

接着 在下面创建分页的条件

 

 这是条件自己可以选择每页展示几条之类的

1.5  就是开始在分页器上对应的点击事件或者输入值触发获取数据的事件

 

这是对应的方式可以看看  别忘记了声明page对象！

二  增加 修改

这是接口方式

 

首先是点击时有个弹层先别纠结时加/更改

2.1  加  创建个vue文件，以子组件方式引入内部，创建方法：利用$refs来使用子组件的方法

 

使用开启或者关闭：肯定有点击方法 ：handleedit （undefined）

 为啥时undefined因为第一次点击啥也没有，后面需要判断里面有没有id来区分添加还是修改

 

别在意方法名！！

2.2点击时先得打开弹层

接着在方法内这样写

 方法就是你在子组件内，创建的方法

 

 

 这个就是

2.3  接着需要在弹层内把你需要填的内容利用表单做好，然后提交就可以---省略了表单校验了，因为第一次写不知道咋整了！

发俩图吧：

 

 

三  查看  、审核  根据对应的id，打开弹层来看、审核  （这里把查看就是把修改的那页复制进来，给查看那块表单干了个disadled ，只能让看）

 每个人去操作都得加id

 还是弹层 我把修改的弹层拉进来，加了禁止事件了

 四    审核

还是弹层子组件绑ref 然后调用

 

 

 把数据回写之后，就需要加判断审核是否通过，还有不通过的原因

用v-if判断

 判断之后就是首页界面肯定会有审核状态包括刚才查看功能里，需要出现通过，或者不通过状态就是审核失败，查看界面里必须就出现了审核不通过的原因  

ps：状态那面一开始就做了三元判断，就是看看查看界面里面

 查看界面内：

 五：  查  高级搜索查询

 还有单独的点击查

 点击搜索时就是调用获取数据的接口功能

  5.1 首先 你需要有input框，输入要查询的内容，再点击搜索按钮进行搜索 ，所以要先创建一个空

 

 接着在你获取数据里面传入

 接着是你在搜索框内

@clear  用到这个方法就是 在清空时触发，不然你搜索万情况就不会不变化

接着是高级搜索

我是利用枚举在多选框内渲染出要搜索的条件

 

 接着利用循环来渲染

 

 循环到多选框内

接着给多选框添加触发方法change 时搜索

 

六  导出 接着就是导出功能  调用后端接口

 

 

 

  exportExcelSelect() {
      const ids = this.selectData.map((item) => item.id);
      exportMessage(ids).then((res) => {
        const url = window.URL.createObjectURL(new Blob([res]));
        const link = document.createElement("a");
        link.style.display = "none";
        link.href = url;
        link.setAttribute("download", "信息库.xls");
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      });
    },

直接用，这是大佬给我的

七  ；删除 批量删除  首先就要有批量操作的功能就是element中

 接着就是在删除事件上操作

 但是先得看后台给的你删除接口里根据id还是ids来删除，我是ids

 这是就是上面删除双向绑定，就是如果你批量删除，当这个对象里内容为空时说明你没操作就禁用，而选择了删除内容就激活

 注意必须有id，而ids是后面你自己转化的map把里面每一项的id变成ids生成新的数组

行内删除

 

 七；遇到的一些小问题

假如在添加 是你选择的行业是比如是科技，制造，提交数据是'0','1','5' 而后端要求你转换成1,2,3这种就需要 。join的方法来实现  字符串操作问题

 或者把一个字符串分割成字符串数组

.split（','）通过逗号分割

 

以上呢就是进入公司一星期，学到的，还有总结的·，还是新人，前路漫漫的，一起努力吧！！！