若依框架（2）使用若依框架进行二次开发

客官°小女子只卖身不卖艺 2023-10-12 14:54 37阅读 0赞

#### 一、准备工作 ####

[若依框架（一）使用若依框架从0到1快速搭建springboot + vue 项目][0_1_springboot _ vue]

#### 二、开始开发 ####

在分别启动前后端之后，登录系统默认的admin账号，进入到后台管理页面。（若依默认账号admin，密码admin123）  
然后点击左边的导航栏的系统工具，然后再点击代码生成进入到代码生成页面。  
![在这里插入图片描述][fe8e48f10d0d400bbab035cdac368cde.png]  
这里面展示的数据是你后端配置文件所连接的数据库，点击左上角的导入按钮，选择你需要生成代码的表。然后点击导入，即可在前端表格中看到你所导入的表。  
![在这里插入图片描述][7f13f34549e547d5b57cb62cc17446e0.png]  
然后在返回的页面中中选择需要生成代码的表，点击生成即可自动下载对应代码。  
![在这里插入图片描述][109d9275803d4765881f70a3d15f3ee1.png]  
![在这里插入图片描述][786d77ae81f04b13b521b29f86e0c42b.png]  
打开下载的压缩文件，可以看到里面有两个SQL文件和两个文件夹，先将两个SQL文件运行到你的数据库里面，运行SQL文件的过程我这里就不过多展示了。  
剩下的两个文件夹，我们首先关注main文件夹。main文件夹我们进去之后可以发现，它里面就是一个java项目的目录结构。我们先进入到我们常见的项目包中。  
![在这里插入图片描述][12517eab78fc4799a78925f556deb8ba.png]  
如果大家之前有去观察过若依项目的几个模块，就可以看到生成的代码·文件的后3个文件夹与ruoyi-system模块中的三个文件夹是对应的。我们将后三个文件夹里面的文件，复制到ruoyi-system模块所对应的包下面里面。  
别忘记还有resource下面的mapper.xml文件也需要复制过来哦。  
![在这里插入图片描述][d68df4b7ba8a4a65a4c02ed655147964.png]  
![在这里插入图片描述][b939660c131741b5b2a8327824ae6a69.png]  
![在这里插入图片描述][ab9ec4434c1a4ec4a1f8fb4d30eb1b9d.png]  
![在这里插入图片描述][0f707921281d4ae1966096483ae08e62.png]  
![在这里插入图片描述][92c97810dd67405395c38db9e0212180.png]  
细心的同学应该发现我这里并没有复制Controller文件，因为Controller文件并不在这个模块里面，而是在ruoyi-admin模块里面，重复刚才的动作，将Controller文件复制到ruoyi-admin的web/system下。也可以不放在system里面，可以自己再创建一个包，专门放自己的Controller文件。  
![在这里插入图片描述][9ba25b5ca3d84d699ae3787cc70faf65.png]  
到这里，后端代码的就已经弄完啦。  
**注意：复制文件到项目中会伴随着各个文件所在包的更改，会导致文件中部分import语句报错，需自己更改**

然后就是我们剩下的一个vue文件夹了，打开vue文件夹，会发现里面还有两个文件夹，一个api一个view。我们先进入api文件夹的最里面，看到生成的js文件。复制js文件，粘贴到ruoyi-ui/src/api/system里面，一样的可以在api文件夹里面创建一个包专门存放我们自己的js文件。  
![在这里插入图片描述][e5533513f61b4369b5b0377c66fdc3d8.png]  
再进入生成的views文件夹的倒数第二级目录，即index.vue的上一级  
![在这里插入图片描述][c271b6c508d946ac985a24ff52bf2299.png]  
将里面的文件夹复制到ruoyi-ui/views/system中，同理，一样可以创建一个自己的文件夹用于存放。  
![在这里插入图片描述][67418d94df4440288432a28574a3c864.png]  
到这里，前端代码也都准备完毕了。我们先分别重启前后端。看看是否有报错的地方。。  
我这里还真报错了，后端改了各个报错的地方完成启动，但是前端我忘了又有需要改import路径的地方，在我们复制进views文件夹里面两个文件夹的index.view里面，我们找到其

#### 三、使用界面 ####

将代码都放进我们的项目包中了并不代表我们就可以使用相应的界面。因为就想我们普通的vue项目，你没有在路由里面设置对应的路径，你也访问不了那个组件。在若依里面也是一样的。不过我们不需要对代码进行操作。接下来的操作全部是基于若依框架本身的管理系统进行操作，不涉及代码。

返回到若依的管理系统页面，打开系统管理里面的菜单管理，点击新增  
![在这里插入图片描述][72a1a91dc7914fa487174db53553e007.png]  
填写相应信息，这里路由地址建议与自己再views目录下存放页面文件的文件夹一致  
![在这里插入图片描述][8cf4340dc53f4a9aaf9d33b314785213.png]  
![在这里插入图片描述][9ad4d4e4c77e4b21abc19aa7546037f6.png]  
再点击新增菜单的新增按钮  
![在这里插入图片描述][85471c6bd5eb4edeac490162bc05a4e3.png]  
将菜单类型选择为菜单，同时填写相关组件路径和路由地址（默认从views下开始）可以仿造我这里的路径进行填写  
![在这里插入图片描述][a025b692e853458aa4186a3e1f779be9.png]  
![在这里插入图片描述][7bcd1f783bc64b2ea64b343eee778c56.png]  
添加表单完成后刷新即可正常在导航栏里面找到并访问  
![在这里插入图片描述][2b97a34dfeb84ceea66c22931ea3212d.png]  
这里展示的￥\{comment\}并不是报错，这里表的名字是根据数据库的注释来的，如果没写数据库注释，自己千万页面对应的index.vue修改即可。

[0_1_springboot _ vue]: https://blog.csdn.net/weilaaer/article/details/131009614?spm=1001.2014.3001.5501
[fe8e48f10d0d400bbab035cdac368cde.png]: https://img-blog.csdnimg.cn/fe8e48f10d0d400bbab035cdac368cde.png
[7f13f34549e547d5b57cb62cc17446e0.png]: https://img-blog.csdnimg.cn/7f13f34549e547d5b57cb62cc17446e0.png
[109d9275803d4765881f70a3d15f3ee1.png]: https://img-blog.csdnimg.cn/109d9275803d4765881f70a3d15f3ee1.png
[786d77ae81f04b13b521b29f86e0c42b.png]: https://img-blog.csdnimg.cn/786d77ae81f04b13b521b29f86e0c42b.png
[12517eab78fc4799a78925f556deb8ba.png]: https://img-blog.csdnimg.cn/12517eab78fc4799a78925f556deb8ba.png
[d68df4b7ba8a4a65a4c02ed655147964.png]: https://img-blog.csdnimg.cn/d68df4b7ba8a4a65a4c02ed655147964.png
[b939660c131741b5b2a8327824ae6a69.png]: https://img-blog.csdnimg.cn/b939660c131741b5b2a8327824ae6a69.png
[ab9ec4434c1a4ec4a1f8fb4d30eb1b9d.png]: https://img-blog.csdnimg.cn/ab9ec4434c1a4ec4a1f8fb4d30eb1b9d.png
[0f707921281d4ae1966096483ae08e62.png]: https://img-blog.csdnimg.cn/0f707921281d4ae1966096483ae08e62.png
[92c97810dd67405395c38db9e0212180.png]: https://img-blog.csdnimg.cn/92c97810dd67405395c38db9e0212180.png
[9ba25b5ca3d84d699ae3787cc70faf65.png]: https://img-blog.csdnimg.cn/9ba25b5ca3d84d699ae3787cc70faf65.png
[e5533513f61b4369b5b0377c66fdc3d8.png]: https://img-blog.csdnimg.cn/e5533513f61b4369b5b0377c66fdc3d8.png
[c271b6c508d946ac985a24ff52bf2299.png]: https://img-blog.csdnimg.cn/c271b6c508d946ac985a24ff52bf2299.png
[67418d94df4440288432a28574a3c864.png]: https://img-blog.csdnimg.cn/67418d94df4440288432a28574a3c864.png
[72a1a91dc7914fa487174db53553e007.png]: https://img-blog.csdnimg.cn/72a1a91dc7914fa487174db53553e007.png
[8cf4340dc53f4a9aaf9d33b314785213.png]: https://img-blog.csdnimg.cn/8cf4340dc53f4a9aaf9d33b314785213.png
[9ad4d4e4c77e4b21abc19aa7546037f6.png]: https://img-blog.csdnimg.cn/9ad4d4e4c77e4b21abc19aa7546037f6.png
[85471c6bd5eb4edeac490162bc05a4e3.png]: https://img-blog.csdnimg.cn/85471c6bd5eb4edeac490162bc05a4e3.png
[a025b692e853458aa4186a3e1f779be9.png]: https://img-blog.csdnimg.cn/a025b692e853458aa4186a3e1f779be9.png
[7bcd1f783bc64b2ea64b343eee778c56.png]: https://img-blog.csdnimg.cn/7bcd1f783bc64b2ea64b343eee778c56.png
[2b97a34dfeb84ceea66c22931ea3212d.png]: https://img-blog.csdnimg.cn/2b97a34dfeb84ceea66c22931ea3212d.png