基于若依框架搭建商业项目

最新推荐文章于 2024-04-11 11:17:34 发布
最新推荐文章于 2024-04-11 11:17:34 发布
阅读量1.2w 收藏 59
点赞数 7
分类专栏： 若依框架前端UI 若依框架技术分享 文章标签： maven intellij-idea javascript vscode
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_28775077/article/details/125600765
版权

RuoYi 若依官方网站 |后台管理系统|权限管理系统|快速开发框架|企业管理系统|开源框架|微服务框架|前后端分离框架|开源后台系统|RuoYi|RuoYi-Vue|RuoYi-Cloud|RuoYi框架|RuoYi开源|RuoYi视频|若依视频|RuoYi开发文档|若依开发文档|Java开源框架|Java|SpringBoot|SrpingBoot2.0|SrpingCloud|Alibaba|MyBatis|Shiro|OAuth2.0|Thymeleaf|BootStrap|Vue|Element-UI||www.ruoyi.vip

大家好，我是乘风偷月。希望我的文章对您有帮助，喜欢的话，请多多关注，并点赞，谢谢！！

通过前几篇有关若依框架的文章访问量，可以知道大家都非常关注若依框架，并有兴趣去琢磨这个框架，下面我将分享一下自己搭建项目的一些心得体会。

在一些商用的项目，自己去重新造轮子，其实任务是繁重的，时间也相当有限。为了能快速把项目推出去，寻找一份开源的框架去搭建自己的业务系统，是再合适不过了。后续通过改进，优化，演变成一个美观，流畅，易用的系统。到此，直接上效果图

登录界面： 

 

主界面：

这样是不是感觉很清新呢？哈哈，下面就为大家梳理一下，改成这样的步骤。

其实，若依框架很赞，代码结构清晰，层次分明。需要改动的地方不多，相信聪明的你按着步骤一步一步操作，一定可以看到意想不到的的效果，come on , follow me!

修改登录界面：

第一、找到logo.vue页面 XX\RuoYi-Vue\ruoyi-ui\src\views\login.vue

首先是修改登录框上面的标题，改成xxx智慧管理平台

第二，再一个是修改背景

还是在这个文件修改 XX\RuoYi-Vue\ruoyi-ui\src\views\login.vue

 这里可以是图片，也可以说svg文件。具体转换可以百度在线转换一下。

最后，修改完，最底下的版本信息有可能被色彩掩盖的，需要调整，具体修改地方还是这个文件

哈哈，是不是很简单呢。这就是登录页面的修改。

下面，我们继续来修改一下主界面

第一、找到文件 xx\RuoYi-Vue\ruoyi-ui\src\layout\index.vue

注意，这里用到Navbar,SideBar,还有variables.scss文件，下面注意就这几个文件进行修改

第二、找到variables.scss文件，进行修改，具体注释已经在文件里写上，哈哈，可以随便调整，刷新看效果喔。调到满意为止！！！

 

具体代码：

// base color
$blue:#324157;
$light-blue:#3A71A8;
$red:#C03639;
$pink: #E65D6E;
$green: #30B08F;
$tiffany: #4AB7BD;
$yellow:#FEC171;
$panGreen: #30B08F;

// 默认菜单主题风格
$base-menu-color:rgba(0,0,0,.65);//#bfcbd9;//默认菜单字体颜色
$base-menu-color-active:#1890ff;//#f4f4f5;//选中菜单字体颜色
$base-menu-background:#ffffff;//#304156;//默认菜单背景颜色
$base-logo-title-color: #ffffff;
$base-logo-title-background: #1890ff;//增加logo背景颜色

$base-menu-light-color:rgba(0,0,0,.70);
$base-menu-light-background:#ffffff;
$base-logo-light-title-color: rgba(0,0,0,.65);//#001529;

$base-sub-menu-background:#ffffff;//#1f2d3d;//子菜单默认背景颜色
$base-sub-menu-hover:#e6f7ff;//#001528; //子菜单鼠标悬浮状态背景颜色

$base-sidebar-width: 200px;

:export {
  menuColor: $base-menu-color;
  menuLightColor: $base-menu-light-color;
  menuColorActive: $base-menu-color-active;
  menuBackground: $base-menu-background;
  menuLightBackground: $base-menu-light-background;
  subMenuBackground: $base-sub-menu-background;
  subMenuHover: $base-sub-menu-hover;
  sideBarWidth: $base-sidebar-width;
  logoTitleColor: $base-logo-title-color;
  logoLightTitleColor: $base-logo-light-title-color;
  logoTitleBackground: $base-logo-title-background;
}

 第三、可以看出，以上文件增加了logoTitleBackground 变量，在页面Logo.vue 上使用

 第四、需要修改左边菜单顶部的文本

则修改Logo.vue 文件的title 文本即可。

 

第五、需要修改显示区域顶部的背景颜色，及文本内容，如下：

修改背景颜色，找到Navbar.vue文件，修改成自己喜欢的颜色，即可：

background: #1890ff;//#fff;//修改背景颜色，保存和左边菜单栏颜色一致

 另外，文本内容修改Navbar.vue

 

<!-- <breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!topNav"/> -->
    <span style="height:50px;line-height:50px;color:#fff;">欢迎进入 XXXX慧管理平台</span>

 到目前为止，有关若依框架改造的前端UI就分享到这里，谢谢大家阅读，如有疑问，可以一起探讨。别忘了，喜欢的朋友们，关注+点赞喔。谢谢朋友们

 

 

 

 

乘风偷月
关注
  • 7
    点赞
  • 踩
  • 59
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
基于若依开源框架开发的供货商城系统源码（包括小程序+API+管理后台）
11-16
基于若依开源框架开发的供货商城系统源码（包括小程序+API+管理后台）
开源项目推荐ruoyi
llllanlovePay的博客
02-07 695
本人最喜欢使用的javaweb开发框架： RuoYi RuoYi v4.7.2 基于SpringBoot开发的轻量级Java快速开发框架 平台简介 一直想做一款后台管理系统，看了很多优秀的开源项目但是发现没有合适的。于是利用空闲休息时间开始自己写了一套后台系统。如此有了若依。她可以用于所有的Web应用程序，如网站管理后台，网站会员中心，CMS，CRM，OA。所有前端后台代码封装过后十分精简易上手，出错概率低。同时支持移动客户端访问。系统会陆续更新一些实用功能。 性别男，若依是给女儿取
若依框架使用mars3d的环境配置,地球构建
song_song0927的博客
03-01 502
若依框架使用火星科技mars3d,环境配置与地球构建
若依框架（前后端分离）——代码生成器使用详细教程（24年新版）
最新发布
weixin_45715650的博客
04-11 3319
在使用若依框架系统自带的代码生成器时，试了很多教程多多少少都运行不成功，花了大量的功夫找bug，可能是若依版本的限制，也可能是其他因素，所以在此写下这篇详细的搭建教程。一方面是为了帮助大家，一方面也是形成笔记，若是自己忘了，可以回来翻阅，更快上手。↓ ↓ ↓ 正文开始 ↓ ↓ ↓。
[若依框架 + Mars3d] 集成问题
m0_53584457的博客
02-20 435
使用deep进行css设定即可；把mars3d官网示例的代码拉下来，将其lib下的 mars3d.css中所需要的拷贝过来，进行了deep设置就解决了；vue.config.js 的 publicPath:/ 改成 publicPath: ./ 加载地图出来了。1、使用后，地图的控件横排显示，使用css改成竖排，也会像右边那样，打开的子控件向下排列；2、集成mars3d时，地图不出现，使用的是下面的集成方式；希望大家的项目都顺利，bug-1-1。
开源若依+uniapp商城支持微信小程序/H5/微信支付/商品管理/订单管理/会员管理
字节叔叔
08-22 3184
若依（Ruoyi）是一个基于Java开发的快速开发脚手架（框架），旨在帮助开发者更轻松地构建企业级应用程序。它提供了许多常用的功能和模块，以加快开发过程，同时也注重代码的质量和可维护性。若依采用了模块化的设计，可以根据项目需求选择性地引入不同的模块，如系统管理、代码生成、权限管理等，以避免不必要的复杂性。若依提供了强大的代码生成器，可以根据数据库表结构自动生成基本的增删改查功能的代码，减少重复的劳动和代码编写时间。
若依框架使用
热门推荐
琉和四月的博客
07-19 6万+
老板要求用若依框架 分享自己所知道的代码自动生成 第一步 创建数据库表 表一定要加注释 表一定要加注释 表一定要加注释 若依框架代码生成是根据数据库表的注释 创建完表之后 登录若依框架后台 点开代码生成 就能看到你创建的表了 点击代码生成 解压缩 下面就是把生成的代码文件放进对应的项目里了 对应项目里ruoyi—admin 文件夹复制粘贴放进去就好了 其他的也是如此 剩下就是...
若依可以商用吗_2019年，最全免费可商用字体大集合（附字体包）
weixin_39834154的博客
12-17 498
版权的重要性相信不用再和大家赘述一番乱用字体被罚款上百万的事情也比比皆是先自查几个题目看看你对字体的敏感程度高不高问题一：微软雅黑可以免费商用吗？ ▼不可以！微软雅黑是微软委托北大方正公司设计的一套字体，商用需购买版权。问题二：宋体、仿宋、楷体、黑体等字体需要商用授权吗？▼不需要这些字体属于超出版权保护期的国家非物质文化遗产，因此不需要商用授权，可以放心使用。无论你这两道题目回答的正确与否，这个免...
GITHUB开源SpringBoot2.0权限管理系统
qq_35086451的博客
04-03 4615
基于SpringBoot2.0的权限管理系统 易读易懂、界面简洁美观。 核心技术采用Spring、MyBatis、Shiro没有任何其它重度依赖。直接运行即可用 用户管理：用户是系统操作者，该功能主要完成系统用户配置。 部门管理：配置系统组织机构（公司、部门、小组），树结构展现支持数据权限。 岗位管理：配置系统用户所属担任职务。 菜单管理：配置系统菜单，操作权限...
基于若依框架（分离版）开发志愿填报指导系统（中）
yxl219的专栏
03-18 2508
基于若依框架（分离版）开发高考填报系统经验分享，了解若依框架开发流程，vue组件开发等。
若依可以商用吗_商用中央空调适用于哪些场所？
weixin_39604276的博客
12-06 277
又到了炎热的夏季，想要度过这个夏季，那必不可少的就是空调、雪糕、西瓜了。不管走到哪里我们都可以感受到空调的存在，还是比较凉爽的。空调也已经成为了我们生活中的一部分，不管是夏天还是冬天，都需要空调带给我们舒适的温度。很多人对于空调适用的场所不太清楚，自家用的空调和外面是一样的吗？带着这个疑问小编就给大家说一下，什么是“商用中央空调”商用中央空调一直被认为制冷空调市场的一个细分子行业，可以纳入商用空调...
基于RuoYi（若依）的移动商城payshop
01-06
RuoYi（若依）是一个优秀的基于Spring Boot 和多平台的应用框架，payshop是基于RuoYi的优秀的移动商城系统。
Java基于若依框架开发的证照查询系统源码.zip
05-23
Java基于若依框架开发的证照查询系统源码.zip
Java基于若依框架的企业OA办公系统，知识产权管理系统源码.zip
06-06
Java基于若依框架的企业OA办公系统，知识产权管理系统源码.zip
Java基于若依的简单知识问答社区源码.zip
06-15
Java基于若依的简单知识问答社区源码.zip
RuoYi若依管理系统 v4.5.1
11-24
为您提供RuoYi若依管理系统下载，RuoYi若依管理系统是一个基于SpringBoot的权限管理系统，代码易读易懂、界面简洁美观。 核心技术采用Spring、MyBatis、Shiro没有任何其它重度依赖。直接运行即可用。RuoYi若依管理系统功能：1、用户管理：用户是系统操作者，该功能主要完成系统用户配置。2、部门管理：配置系统组织机构（公司、部门、小组），树结构展现支持权限。3、岗位管理：配置系统用户所属担任职务。4、菜单管理
基于ssm框架搭建的个人博客.zip
11-12
1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习，也适合...
基于SSM框架搭建的工会系统.zip
11-12
1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习，也适合...
基于SSM框架搭建的后台管理系统.zip
11-12
1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习，也适合...
使用vue3搭建一个BI框架，给出相关代码
08-03
### 回答1： Vue3 是一个用于构建用户界面的框架，它可以帮助你快速的搭建BI框架。下面是一个简单的BI框架的例子：<template> <div id="app"> <bi-container> <bi-header> <h1>BI 框架</h1> </bi-header> <bi-body> <bi-dashboard> <bi-chart :data="chartData"/> </bi-dashboard> </bi-body> </bi-container> </div> </template><script> import { BiContainer, BiHeader, BiBody, BiDashboard, BiChart } from 'vue3-bi-framework';export default { name: 'App', components: { BiContainer, BiHeader, BiBody, BiDashboard, BiChart, }, data: () => ({ chartData: [], }), }; </script> ### 回答2： 使用Vue 3搭建一个BI（商业智能）框架可以通过以下步骤实现： 1. 创建一个基于Vue 3的项目： 使用以下命令创建一个新的Vue项目： ```bash vue create bi-framework ``` 2. 添加需要的依赖项： 安装一些常用的依赖项，例如vue-router、axios和element-plus（用于UI组件）： ```bash cd bi-framework npm install vue-router axios element-plus ``` 3. 设置路由： 在src目录下创建一个router.js文件，并配置路由： ```javascript import { createRouter, createWebHistory } from 'vue-router'; import Dashboard from '@/views/Dashboard.vue'; const routes = [ { path: '/', name: 'Dashboard', component: Dashboard, }, // 添加其他路由路径和对应的组件 ]; const router = createRouter({ history: createWebHistory(), routes, }); export default router; ``` 4. 创建Dashboard页面： 在src/views目录下创建Dashboard.vue文件，并添加以下代码： ```vue <template> <div> <h1>BI框架 - 仪表盘</h1> <!-- 添加其他组件和布局 --> </div> </template> <script> export default { name: 'Dashboard', // 添加其他逻辑代码 } </script> ``` 5. 在main.js中引入路由和创建Vue实例： ```javascript import { createApp } from 'vue'; import App from './App.vue'; import router from './router'; createApp(App) .use(router) .mount('#app'); ``` 6. 创建其他组件和页面： 通过创建其他Vue组件和页面文件来构建BI框架的其他功能和视图。 7. 运行项目： 最后，通过以下命令运行项目： ```bash npm run serve ``` 以上是使用Vue 3搭建一个简单的BI框架的基本步骤。根据具体需求，可以根据需要进行进一步开发和调整。 ### 回答3： 要使用Vue 3搭建一个BI框架，首先你需要创建一个Vue项目，并安装相关的依赖项。 1. 首先，使用Vue CLI工具创建一个Vue项目： ``` vue create bi-framework ``` 2. 进入项目目录并安装相关依赖项： ``` cd bi-framework npm install --save vue-router axios vuex ``` 3. 创建一个主组件，例如App.vue，用于展示BI框架的主要内容： ```html <template> <div> <Header /> <Sidebar /> <Content /> </div> </template> <script> import Header from './components/Header.vue'; import Sidebar from './components/Sidebar.vue'; import Content from './components/Content.vue'; export default { name: 'App', components: { Header, Sidebar, Content } } </script> ``` 4. 创建Header.vue、Sidebar.vue和Content.vue组件，并在主组件中引入它们： ```html <!-- Header.vue --> <template> <header> <!-- 头部内容 --> </header> </template> <script> export default { name: 'Header' } </script> <!-- Sidebar.vue --> <template> <aside> <!-- 侧边栏内容 --> </aside> </template> <script> export default { name: 'Sidebar' } </script> <!-- Content.vue --> <template> <main> <!-- 内容区域 --> </main> </template> <script> export default { name: 'Content' } </script> ``` 5. 创建路由文件，并配置路由信息： ```javascript // router.js import { createRouter, createWebHistory } from 'vue-router'; const router = createRouter({ history: createWebHistory(), routes: [ { path: '/', component: Home }, // 其他路由配置 ] }); export default router; ``` 6. 在主组件中使用router-view来展示具体的页面内容： ```html <template> <div> <Header /> <Sidebar /> <router-view /> </div> </template> <script> import Header from './components/Header.vue'; import Sidebar from './components/Sidebar.vue'; export default { name: 'App', components: { Header, Sidebar } } </script> ``` 7. 在入口文件main.js中引入路由和Vuex，并创建Vue实例： ```javascript import { createApp } from 'vue'; import App from './App.vue'; import router from './router'; import store from './store'; createApp(App) .use(router) .use(store) .mount('#app'); ``` 8. 最后，在项目的根目录下创建store.js文件，用于管理状态： ```javascript // store.js import { createStore } from 'vuex'; const store = createStore({ state() { return { // 状态 } }, mutations: { // 修改状态的方法 }, actions: { // 异步操作 } }); export default store; ``` 以上是使用Vue 3搭建一个简单的BI框架的相关代码，具体根据实际需求可以进行扩展和修改。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

乘风偷月

如果觉得有用，请打赏一杯奶茶

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值