海上捞火锅

海上捞火锅


编辑员工

<p>[TOC]</p> <h5>简要描述</h5> <ul> <li>编辑员工</li> </ul> <h5>前端页面和服务端交互过程</h5> <ul> <li>点击编辑按钮时,页面跳转到add.html,并在url中携带参数[员工id]</li> <li>在add.html页面获取url中的参数[员工id]</li> <li>发送ajax请求,请求服务端,同时提交员工id参数</li> <li>服务端接收请求,根据员工id查询员工信息,将员工信息以json形式响应给页面</li> <li>页面接收服务端响应的json数据,通过VUE的数据绑定进行员工信息回显</li> <li>点击保存按钮,发送ajax请求,将页面中的员工信息以json方式提交给服务端</li> <li>服务端接收员工信息,并进行处理,完成后给页面响应</li> <li>页面接收到服务端响应信息后进行相应处理</li> </ul> <h5>触发事件</h5> <pre><code>&lt;el-button type="text" size="small" class="blueBug" @click="addMemberHandle(scope.row.id)" :class="{notAdmin:user !== 'admin'}" &gt; 编辑 &lt;/el-button&gt;</code></pre> <h5>接口调用</h5> <pre><code>editEmployee(params).then(res =&gt; { if (res.code === 1) { this.$message.success('员工信息修改成功!') this.goBack() } else { this.$message.error(res.msg || '操作失败') } }).catch(err =&gt; { this.$message.error('请求出错了:' + err) })</code></pre> <h5>请求URL</h5> <ul> <li><code>[context/path]/employee</code></li> </ul> <h5>请求方式</h5> <ul> <li>PUT </li> </ul> <h5>API接口</h5> <pre><code>function enableOrDisableEmployee (params) { return $axios({ url: '/employee', method: 'put', data: { ...params } }) } </code></pre> <h5>参数</h5> <table> <thead> <tr> <th style="text-align: left;">参数名</th> <th style="text-align: left;">必选</th> <th style="text-align: left;">类型</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td style="text-align: left;">createTime</td> <td style="text-align: left;">是</td> <td style="text-align: left;">datetime</td> <td>创建时间</td> </tr> <tr> <td style="text-align: left;">createUser</td> <td style="text-align: left;">是</td> <td style="text-align: left;">bigint</td> <td>创建人</td> </tr> <tr> <td style="text-align: left;">id</td> <td style="text-align: left;">是</td> <td style="text-align: left;">bigint</td> <td>编号</td> </tr> <tr> <td style="text-align: left;">idNumber</td> <td style="text-align: left;">是</td> <td style="text-align: left;">varchar(18)</td> <td>身份证号</td> </tr> <tr> <td style="text-align: left;">name</td> <td style="text-align: left;">是</td> <td style="text-align: left;">varchar(32)</td> <td>姓名</td> </tr> <tr> <td style="text-align: left;">password</td> <td style="text-align: left;">是</td> <td style="text-align: left;">varchar(64)</td> <td>密码</td> </tr> <tr> <td style="text-align: left;">phone</td> <td style="text-align: left;">是</td> <td style="text-align: left;">varchar(11)</td> <td>手机号</td> </tr> <tr> <td style="text-align: left;">sex</td> <td style="text-align: left;">是</td> <td style="text-align: left;">varchar(2)</td> <td>性别</td> </tr> <tr> <td style="text-align: left;">status</td> <td style="text-align: left;">是</td> <td style="text-align: left;">int</td> <td>状态</td> </tr> <tr> <td style="text-align: left;">updateTime</td> <td style="text-align: left;">是</td> <td style="text-align: left;">datetime</td> <td>更新时间</td> </tr> <tr> <td style="text-align: left;">updateUser</td> <td style="text-align: left;">是</td> <td style="text-align: left;">bigint</td> <td>修改人</td> </tr> <tr> <td style="text-align: left;">username</td> <td style="text-align: left;">是</td> <td style="text-align: left;">varchar(32)</td> <td>用户名</td> </tr> </tbody> </table> <h5>返回示例</h5> <pre><code>code: 1 data: "员工信息修改成功" map: {} msg: null</code></pre> <h5>返回参数说明</h5> <table> <thead> <tr> <th style="text-align: left;">参数名</th> <th style="text-align: left;">类型</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td style="text-align: left;">code</td> <td style="text-align: left;">int</td> <td>返回码:1:成功 0或其他:失败</td> </tr> <tr> <td style="text-align: left;">data</td> <td style="text-align: left;">object</td> <td>返回数据</td> </tr> <tr> <td style="text-align: left;">map</td> <td style="text-align: left;">map</td> <td>动态数据</td> </tr> <tr> <td style="text-align: left;">msg</td> <td style="text-align: left;">string</td> <td>错误信息</td> </tr> </tbody> </table> <h5>备注</h5> <ul> <li>data有两种返回结果</li> </ul> <pre><code>public static &lt;T&gt; R&lt;T&gt; success(T object) { R&lt;T&gt; r = new R&lt;T&gt;(); r.data = object; r.code = 1; return r; } public static &lt;T&gt; R&lt;T&gt; error(String msg) { R r = new R(); r.msg = msg; r.code = 0; return r; }</code></pre> <h4>后端接口请求参数</h4> <ul> <li>@RequestBody 接收前端传递给后端的json字符串中的数据(请求体Employee中的数据)</li> </ul> <h5>后端代码</h5> <pre><code>@PutMapping public R&lt;String&gt; update(@RequestBody Employee employee){ log.info("正在通过ID修改员工信息..."); long id = Thread.currentThread().getId(); log.info("本次线程的id为{}",id); employeeService.updateById(employee); return R.success("员工信息修改成功"); }</code></pre>

页面列表

ITEM_HTML