ruoyi 前后台不分离 项目如何添加前端页面
时间: 2023-12-25 10:03:42 浏览: 148
如果你的 ruoyi 项目是前后台不分离的,你可以按照以下步骤来添加前端页面:
1. 在 ruoyi-admin 模块下的 resources/static 目录下创建一个新的文件夹,用于存放你的前端页面和相关资源文件。
2. 在创建好的文件夹中编写你的前端页面代码,该页面可以是一个 HTML 文件或者是 Vue/React 等前端框架的代码。
3. 如果你使用了 Vue/React 等前端框架,可以通过修改 webpack.config.js 等配置文件,将编译后的前端代码打包到 resources/static 目录下。
4. 在 ruoyi-admin 模块下的 controller 包中创建一个新的 Controller 类,用于处理前端页面的请求。
5. 在 Controller 类中添加一个方法,该方法用于返回前端页面的视图。可以使用 @GetMapping 注解来映射该方法的请求路径。
6. 在方法中使用 ModelAndView 对象来指定前端页面的视图名称和模型数据。
7. 在 ruoyi-admin 模块下的 resources/templates 目录下创建一个与前端页面名称相同的 Thymeleaf 模板文件,该文件用于渲染前端页面。
8. 在 Thymeleaf 模板文件中使用 Thymeleaf 模板语法来引入前端页面的资源文件,例如 CSS 文件、JavaScript 文件等。
完成以上步骤后,你就可以在 ruoyi 中添加自己的前端页面了。需要注意的是,在前后台不分离的情况下,前端页面和后端代码是在同一个项目中,因此在开发时需要注意代码的组织和管理。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)