当前位置: 首页 > Web前端 > vue.js

基于vuecli脚手架和vueElementAdmin前端框架实现东巴旅游后台管理系统前后端分离(二)

时间:2023-03-31 22:28:51 vue.js

部门管理实现1.API设计说明部门业务后台API分层架构及调用关系如图2所示。客户端实现2.1新建部门管理模板,在src/components/viewsdept-control/index下新建目录。这里需要用vue去树表,所以引入vxe-table官网。安装成功后,数据渲染模板部分我们选择这张表

脚本部分2.2配置axios获取dept数据在src/api/article.js中添加如下代码exportfunctiongetDeptList(){returnrequest({url:'http://localhost:8843/dept/doFindObjects',method:'post'})}2.3配置路由在src/router/index.js文件中添加新的路由对象{path:'/deptControl',component:Layout,redirect:'dept-control/index',children:[{path:'index',component:()=>import('@/views/dept-control/index'),name:'DeptControl',meta:{title:'部门管理',icon:'table',noCache:true}}]}3.服务端实现公共数据处理类JsonResult。在springbootApplication主方法类所在目录下新建目录(以下简称根目录!!!)新建目录common/vo/JsonResult.java,写入如下代码包com.tsuki。common.vo;importlombok.Data;importjava.io.Serializable;@DatapublicclassJsonResultimplementsSerializable{publicstaticfinallongserialVersionUID=1L;私有int状态=1;//状态码,1代表成功,0代表错误私有eStringmessage="ok";//状态消息;私有对象数据;//正确的数据;privateintcode=20000;//vue-element-admin的状态码/**Constructors*/publicJsonResult(){}/***设置期望{@codeJsonResult}返回的消息*@parammessage消息*/publicJsonResult(Stringmessage){this.message=message;}/***通常在需要打包对象到{@codeJsonResult}时执行*@paramdata对象*/publicJsonResult(Objectdata){this.data=data;}/***通常在遇到异常时执行*@paramt{@codejava.lang.Throwable}*例如:*if(!correct){*newJsonResult(Throwablet);*}*/publicJsonResult(Throwablet){this.code=20001;这个.state=0;this.message=t.getMessage();}}3.1创建pojo对象在springbootApplication主方法类所在目录下新建目录(以下简称根目录!!!)新建目录pojo/Dept.java,写入如下代码@Datapublic类部门实现可序列化{privatestaticfinallongserialVersionUID=6997118400003373008L;私有整数id;私有字符串名称;私有整数parentId;私有整数排序;私人字符串注释;私有日期创建时间;私有日期修改时间;私有字符串创建用户;私有字符串修改用户;私人名单<部门>childDept;//subdepartmentprivateStringparentName;}其中@Data是Lombok插件提供的注解,用于自动构建getset和toString()等方法3.2Dao部分在根目录dao/下新建目录DeptDao.java并编写如下代码ListfindObjects();3.3Mapper部分在src/main/resources/下新建目录mappers/sys/DeptMapper.xml并写入如下代码,其中namespacedepartment自定义成自己的包结构选择child.idcid,child.namecname,parent.nameparentName,child.sortcsort,parent.id,parent.name,parent.sortfromsys_deptschildleftjoinsys_deptsparentonchild.parentId=parent.id3.4Service部分在根目录新建service/DeptService.java,编写代码包com.tsuki.service;importcom.tsuki.common.bo.PageObject;importcom.tsuki.pojo。部门;importjava.util.List;publicinterfaceDeptService{/***查询所有记录*@return{@linkDept}*/ListfindObjects();}在其目录下创建实现类impl/DeptServiceImpl.java3.5Controller部分在根目录下新建controller/DeptController.javapackagecom.tsuki.controller;importcom.tsuki.common.vo.JsonResult;importcom.tsuki.pojo.Dept;importcom.tsuki.service.DeptService;importorg.springframework.beans.factory.annotation.Autowired;导入org.springframework.web.bind.annotation.CrossOrigin;导入org.springframework.web.bind.annotation.RequestMapping;导入org.springframework.web.bind.annotation.RestController;@RestController@RequestMapping("dept")@CrossOriginpublicclassDeptController{@AutowiredprivateDeptServicedeptService;@RequestMapping("doFindObjects")publicJsonResultdoFindObjects(Stringname){try{returnnewJsonResult(deptService.findObjects());}catch(Throwablee){返回新的JsonResult(e);}}}