基于springboot+vue的公益慈善捐助网站(前后端分离)

简介: 本系统为前后端分离,适合选题:前后端分离、公益、慈善、捐助等,系统采用springboot+vue整合开发,前端主要使用了ElementUI框架、项目后端主要使用了springboot等一系列框架,数据层采用mybatis。

项目介绍:



本系统为前后端分离,适合选题:前后端分离、公益、慈善、捐助等,系统采用springboot+vue整合开发,前端主要使用了ElementUI框架、项目后端主要使用了springboot等一系列框架,数据层采用mybatis。


项目技术:



后端:springboot,mybatis

前端:ElementUI、js、css等

开发工具:idea/vscode

数据库:mysql 5.7

JDK版本:jdk1.8


功能概述:



前台:
登陆注册功能
首页展示新闻,公益慈善项目以及捐助列表
在首页可以发布求助
轮播图可以后台设置
新闻中心展示所有新闻,点击可查看详情
我的捐款,可以看到登陆人的捐款明细
我的求助,可以查看登陆人发布的求助信息
个人中心,可以对个人的用户名修改,或者修改密码
关于我们,查看网站介绍
管理端:
登陆功能
财务统计:可以统计所有慈善项目的捐款进度,用图标展示
用户管理:维护用户信息
新闻管理:对新闻信息进行管理
公益项目管理分为项目列表和资金募集展示,可以对项目和募集信息进行维护
捐助审批管理:可以对求助信息进行审批,以及查看捐助详情


部分功能展示:



系统首页


d31916aaa57d4f2d88c19aceac06e90e.png


登陆页面,也可以注册


8bb44ef48a63472bb844e35a123655d9.png


登陆后可以发布求助


5c24d3a1410a434ba8f6c94b7dded83f.png


可以捐助他人


8da0418382004dae98bd641ad19af0b1.png


新闻中心


f407393a10bc4ac4b5af3b7858d003d7.png


新闻详情


7446e934c2d74a6baedd40ca4b100ada.png


公益项目详情


8eb89a91d81b46608f39902e77fe5a3a.png


查看个人发布的求助


0337d0ec83ce42fe8e8c1215785fda3c.png


后台登陆


e461c6fe223f48e5914e5294e529743e.png


后台-财务统计


f2019a8c962b4a51877747678b2f581f.png


后台-用户管理


35da6b46b9424d1ca2f312aeee92fbb5.png


后台-新闻管理


977024c6717f44a9b968638aa5c03b67.png


后台-添加新闻


edb396893d234354aadd511d34673cb4.png


后台-项目维护


01f7d1a259224592bde566929f80dc49.png


后台-捐助详情


fb716100faaa41cb96291224abca62c5.png


后台-捐助详细信息


e9d314ec7e684f0a8ee717825ef660a3.png


后台-求助审批操作


4e5d36e02e2e4ba98ec33395b6e7ed78.png


部分代码:



@GetMapping("selectIndex")
    public List<Newsinfo> selectIndex() {
        List<Newsinfo> list = this.newsinfoService.queryAllByLimit(0,4);
        return list;
    }
    @RequestMapping("edit")
    public String edit(@RequestBody HashMap<String, String> map
    ) {
        Newsinfo newsinfo = new Newsinfo();
        newsinfo.setNid(Integer.valueOf(map.get("nid")));
        newsinfo.setNimg(map.get("nimg"));
        newsinfo.setNislunbo(map.get("nislunbo"));
        newsinfo.setNname(map.get("nname"));
        newsinfo.setNdetails(map.get("ndetails"));
        newsinfoService.update(newsinfo);
        return null;
    }
    @RequestMapping("add")
    public String add(@RequestBody HashMap<String, String> map
    ) {
        System.out.println(map);
        Newsinfo newsinfo = new Newsinfo();
        newsinfo.setNimg(map.get("nimg"));
        newsinfo.setNislunbo(map.get("nislunbo"));
        newsinfo.setNname(map.get("nname"));
        newsinfo.setNdetails(map.get("ndetails"));
        newsinfoService.insert(newsinfo);
        return null;
    }


以上就是部分功能展示,从整体上来看,本系统功能是十分完整的,而且也与当前的热点话题关联,界面设计简洁大方,交互友好,数据库设计也很合理,规模适中,比较适合毕业设计和课程设计的相关应用。


好了,今天就到这儿吧,小伙伴们点赞、收藏、评论,一键三连走起呀,下期见~~

相关文章
|
12天前
|
JSON JavaScript Java
从前端Vue到后端Spring Boot:接收JSON数据的正确姿势
从前端Vue到后端Spring Boot:接收JSON数据的正确姿势
23 0
|
16天前
|
JavaScript 前端开发 BI
采用前后端分离Vue,Ant-Design技术开发的(手麻系统成品源码)适用于三甲医院
开发环境 技术架构:前后端分离 开发语言:C#.net6.0 开发工具:vs2022,vscode 前端框架:Vue,Ant-Design 后端框架:百小僧开源框架 数 据 库:sqlserver2019
28 4
采用前后端分离Vue,Ant-Design技术开发的(手麻系统成品源码)适用于三甲医院
|
25天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的4S店客户管理系统的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的4S店客户管理系统的详细设计和实现
46 4
|
25天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的在线课堂微信小程序的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的在线课堂微信小程序的详细设计和实现
35 3
|
25天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的微信课堂助手小程序的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的微信课堂助手小程序的详细设计和实现
57 3
|
25天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的商品展示的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的商品展示的详细设计和实现
32 3
|
25天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的电子商城购物平台的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的电子商城购物平台的详细设计和实现
49 3
|
25天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的英语学习交流平台的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的英语学习交流平台的详细设计和实现
31 2
|
25天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的助农扶贫微信小程序的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的助农扶贫微信小程序的详细设计和实现
34 2
|
25天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的微信阅读网站小程序的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的微信阅读网站小程序的详细设计和实现
43 2