ruoyi框架添加页面

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档

一、ruoyi官网

本文代码使用的是ruoyi分离版:http://doc.ruoyi.vip/ruoyi-vue/

二、使用步骤

1.导入表(销售合同为例)

1. 1 查看数据库表:

在这里插入图片描述

1.2 使用后台代码生成模块

在这里插入图片描述
在这里插入图片描述

2. 编辑表信息

在这里插入图片描述

2.1 编辑展示字段:

在这里插入图片描述
需要哪些字段就勾选哪些.

2.2 编辑表格信息:

在这里插入图片描述
在这里插入图片描述

3. 生成代码,并导入

3.1 代码下载

在这里插入图片描述

3.2 后端代码导入

将代码分别复制到各自文件夹
在这里插入图片描述
controller要复制到后端接口模块那
在这里插入图片描述
最后导入xml文件
在这里插入图片描述

3.3 前端代码导入

改以下两个文件夹:
在这里插入图片描述
前端接口:
在这里插入图片描述
前端界面:
在这里插入图片描述

4. 菜单生成

首先可以通过新增生成销售管理主目录,然后在主目录下添加销售合同菜单
在这里插入图片描述
这里对销售合同进行编辑
在这里插入图片描述

5. 重启

重启后台,刷新前端。

在这里插入图片描述

三、总结

介绍了ruoyi如何生成界面,具体后端业务模块(本篇文章是job模块)生成之类的可以自己百度下

  • 10
    点赞
  • 32
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
1. 引入echarts 在`pom.xml`文件中添加echarts的依赖: ```xml <dependency> <groupId>com.github.abel533</groupId> <artifactId>echarts</artifactId> <version>4.9.0</version> </dependency> ``` 2. 编写前端页面 在需要显示echarts的页面中,添加一个`div`元素作为容器,如下所示: ```html <div id="chart" style="height: 400px;"></div> ``` 3. 编写js代码 在页面底部添加以下js代码: ```javascript $(function () { // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('chart')); // 指定图表的配置项和数据 var option = { title: { text: '某站点用户访问来源', subtext: '纯属虚构', left: 'center' }, tooltip: { trigger: 'item' }, legend: { orient: 'vertical', left: 'left', data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'] }, series: [ { name: '访问来源', type: 'pie', radius: '50%', data: [ {value: 335, name: '直接访问'}, {value: 310, name: '邮件营销'}, {value: 234, name: '联盟广告'}, {value: 135, name: '视频广告'}, {value: 1548, name: '搜索引擎'} ], emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); }); ``` 4. 效果展示 最终效果如下图所示: ![echarts效果展示](https://img-blog.csdn.net/20180607102104603?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhcnJpbmdfMTk5NjY3ODg3/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/q/80)
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值