若依框架-前端二次开发快速入门简述

1.目录

如左图所示，主要分为bin,build,node_modules,public,src几个部分，我们从gitee上使用bash将项目克隆到本地后，进入项目目录，并安装好依赖后可以直接使用命令启动服务，具体命令见README.md，安装好依赖后就可以得到node_modules了。如果我们在src目录下完成了二次开发需要部署到服务器上，就可以在README.md中找到打包命令，得到dist。其中，我们可以在vue.config.js中配置后端接口，在.env.development和.env.production中配置url。一般情况下只需要研究上面几部分即可。

2.具体开发过程

具体开发首先要明确开发需求，对于前端来说，工作量主要在vue页面和接口的书写上。

2.1明确需求

开发模块、每个模块需要实现的功能（包含但不限于增删改查）、角色的权限

2.2目录添加

包含三个部分的操作，若依框架的几个模块的路由是动态操作的，即不需要额外写router。

①在系统管理-菜单管理中添加菜单

具体参数可以仿照系统管理的参数写，这里的组件路径需要和项目中模块目录所在位置保持一致。

权限字符根据功能需求而定，如果要展示数据，那就是system:user:list。不同功能参考如下：

②添加角色权限

完成菜单的添加后，我们需要让相应角色获得菜单的操作权限，如下图，对于新添加的菜单，加入到权限中即可。

③创建vue

可以按照下面的目录进行创建，system就相当于一个模块，里面的user,post,dict就是分模块，创建vue文件后进行相应需求的开发。

-src-views-system-user-index.vue-post-index.vue-dict-index.vue

2.3vue页面的功能实现

vue的结构包括三个部分：

<template><!--样式设定-->
</template><script>/**数据处理，功能实现*/
</script><style>/**样式设定*/
</style>

对于一般的页面开发，样式主要包括搜索区域、功能按钮区、数据显示区、页码区、对话框区，如下图。具体代码内容可以下载源码https://gitee.com/y_project/RuoYi。具体的数据绑定和功能实现在下篇进行详细叙述。

2.4接口书写

具体的接口在项目下api中可以找到，里面放着不同模块的不同方法的接口。

-api-system-user.js-post.js-dict.js

导入请求处理后，可以写增删改查等功能对应的接口，以不同请求方法的查询、新增为例，写法如下：

2.5请求、响应拦截的书写

在request.js中包含以下部分：请求拦截器和响应拦截器。具体内容后篇详细分析，敬请关注。

如果上面的内容有疑问或者有错误的地方，欢迎大家提问和批评！非常乐意与大家进行讨论，共同进步！