前端:
注:这里主要解释下echarts组件,需要一定的Vue基础
emmmmm
明显能看到上面写“对不起暂未开发”
是的
这个是博主自己加上去的
but
这个统计表也是类似于Element UI的小组件
Element:Element - 网站快速成型工具
(element是饿了么公司的,对,就是外卖那个)
Echarts:Examples - Apache ECharts
这边我们主要讲解echarts
打开vscode,在终端中输入
npm install echarts
进行下载echarts包
打开网站,找到饼状图,选择第一个即可
这些都是可以设置的
点开完整代码
化作cv工程师
放在刚刚的前端页面中
注意要放在div中
关于如何在前端中使用可以看前端的源码
这就涉及到一点Vue的知识
如果以后要涉及前端,可以借此学习学习
否者读懂,了解即可
下面我们从后端抓取信息到前端渲染
后端:
打开我们心爱的vscode
我们新建一个ReportController
由于我们是对员工进行统计
so
沿用emp的service,mapper即可
大大提高了代码的复用性
这就是我们三层架构的优势
后期扩展显得极为容易
将empService进行注入
启动前端,查看一下请求地址
复制这个请求路径
一个饼状图一个条形图
再进行区分一下
[HttpGet]
[Route("/report/emp-report/bie")]
public ResultModel GetBie(){
}
[HttpGet]
[Route("/report/emp-report/bar")]
public ResultModel GetBar(){
}
饼状图主要是统计男性员工和女性员工的人数
条形图主要是统计各个职业员工的人数
为了方便我这边定义一个实体类去存放
当然只有男女员工感觉没必要也可以不这样做
controller:
service:
声明:
service实现类实现:
public List<EmpReportModel> FindSex()
{
List<EmpModel> list=empMapper.FindAll();
int ManCnt=list.Where(u=>u.gender==1).Count();
int WomanCnt=list.Where(u=>u.gender==2).Count();
List<EmpReportModel> res=[new EmpReportModel("男性员工",ManCnt), new EmpReportModel("女性员工",WomanCnt)];
return res;
}
public List<int> FindJob()
{
List<EmpModel> list=empMapper.FindAll();
List<int>res=new List<int>();
for(int i=1;i<=5;i++){
int cnt=list.Where(c=>c.job==i).Count();
res.Add(cnt);
}
return res;
}
从mapper中获取到多有信息然后过滤即可
下边FindJob函数这i从1到5是由于我这边只设置了5个职业
已经定了
直接拿员工数量即可
这边就是个人发挥了
mapper:
FindAll函数就是返回Emp表中所有员工的数据
好
下面测试一下
启动后端,打开swagger
双双成功
Prefect!
打开前端查看一下
没问题!
结束语:
到此,我们课设的基本内容就完成了
不知道是否已经基本掌握了WebApi的开发
但相信你也学到了许多
本课设其实也不仅仅局限于C#后端开发
更适合于大多数的后端语言
比如Java等等
转念一想Java课设相当于完成了一半
最后的最后
可能会更新一篇扩展篇
是关于JWT令牌校验的
敬请期待把
———————————
其他文章...
关注[YM]课设专栏[YM]课设_夜喵YM的博客-CSDN博客
文章:
[YM]课设-C#-WebApi-Vue-员工管理系统 (前言)-CSDN博客
[YM]课设-C#-WebApi-Vue-员工管理系统 (一)创建webapi项目-CSDN博客
[YM]课设-C#-WebApi-Vue-员工管理系统 Api接口文档&SQL脚本-CSDN博客
[YM]课设-C#-WebApi-Vue-员工管理系统 (二)连接数据库-CSDN博客
[YM]课设-C#-WebApi-Vue-员工管理系统 (三)部门管理-CSDN博客
[YM]课设-C#-WebApi-Vue-员工管理系统 (四)员工管理-条件分页查询-CSDN博客
[YM]课设-C#-WebApi-Vue-员工管理系统 (五)登录-CSDN博客