スプリングブック+vueに基づいてごみ分類管理システムを実現します。
本論文の例では、springboot+vueのごみ分類管理システムを実現する具体的なコードを共有します。参考にしてください。具体的な内容は以下の通りです。
一、プロジェクト概要
1.プロジェクトの内容
本プロジェクトはIDEA、Visual Studio Code開発ツールを利用して、Mysql、Navicat for MySQLツールを利用して、springboot+vueに基づくごみ分類管理システムを実現しました。システムは、2つのタイプのユーザにサービスを提供し、ユーザと管理者。
2.実現機能
（1）ログイン機能
データベースと連絡を取ったら、データベース内のユーザーと管理者はログインページでアカウントとパスワードを入力してウェブサイトに登録することができます。
（2）データの増加、調査、修正、削除機能
①ゴミの増加、検査、添削、削除
②管理者の増加、検査、改変、削除
③ユーザーの増加、調査、修正、削除
（3）円グラフを通じて、ヒストグラムはユーザーの性別比率、入庫ごみの数量情報、ユーザー総数、管理者総数、入庫ごみ数、調査回数などを表示することができます。
二、具体的な実現
1.フロントエンドログイン画面
（1）管理者情報の添削チェック：
1.フロントエンドのURLに従ってウェブページにアクセスする
2.ホームページに登録する
3.ゴミ情報を確認する
4.ユーザ管理ページ
5.管理者管理ページ
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。
一、プロジェクト概要
1.プロジェクトの内容
本プロジェクトはIDEA、Visual Studio Code開発ツールを利用して、Mysql、Navicat for MySQLツールを利用して、springboot+vueに基づくごみ分類管理システムを実現しました。システムは、2つのタイプのユーザにサービスを提供し、ユーザと管理者。
2.実現機能
（1）ログイン機能
データベースと連絡を取ったら、データベース内のユーザーと管理者はログインページでアカウントとパスワードを入力してウェブサイトに登録することができます。
（2）データの増加、調査、修正、削除機能
①ゴミの増加、検査、添削、削除
②管理者の増加、検査、改変、削除
③ユーザーの増加、調査、修正、削除
（3）円グラフを通じて、ヒストグラムはユーザーの性別比率、入庫ごみの数量情報、ユーザー総数、管理者総数、入庫ごみ数、調査回数などを表示することができます。
二、具体的な実現
1.フロントエンドログイン画面
<template>
<div class="login-wrap">
<div class="ms-title"> </div>
<div class="ms-login">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm">
<el-form-item prop="username">
<el-input v-model="ruleForm.username" placeholder=" "></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input type="password" v-model="ruleForm.password" placeholder=" "></el-input>
</el-form-item>
<div class="login-btn">
<el-button type="primary" @click="submitForm"> </el-button>
</div>
</el-form>
</div>
</div>
</template>
<script>
import {mixin} from "../mixins/index";
import {getLoginStatus} from "../api/index";
export default {
mixins:[mixin],
data: function(){
return {
ruleForm:{
username: "admin",
password: "123"
},
rules:{
username:[
{required:true,message:" ",trigger:"blur"}
],
password:[
{required:true,message:" ",trigger:"blur"}
]
}
};
},
methods:{
submitForm(){
let params = new URLSearchParams();
params.append("name",this.ruleForm.username);
params.append("password",this.ruleForm.password);
getLoginStatus(params)
.then((res) =>{
if(res.code == 1){
this.$router.push("/Info");
this.notify(" ","success");
}else{
this.notify(" ","error");
}
});
}
}
}
</script>（1）管理者情報の添削チェック：
/**
*
**/
@RequestMapping(value = "/add",method = RequestMethod.POST)
public Object addAdminGuanli(HttpServletRequest request){
JSONObject jsonObject = new JSONObject();
String name = request.getParameter("name").trim();
String username = request.getParameter("username").trim();
String password = request.getParameter("password").trim();
String pic = request.getParameter("pic").trim();
String location = request.getParameter("location").trim();
String introduction = request.getParameter("introduction").trim();
//
AdminGuanli adminGuanli = new AdminGuanli();
adminGuanli.setName(name);
adminGuanli.setUsername(username);
adminGuanli.setPassword(password);
adminGuanli.setPic(pic);
adminGuanli.setLocation(location);
adminGuanli.setIntroduction(introduction);
boolean flag = AdminGuanliService.insert(adminGuanli);
if(flag){
jsonObject.put(Consts.CODE,1);
jsonObject.put(Consts.MSG," ");
return jsonObject;
}
jsonObject.put(Consts.CODE,0);
jsonObject.put(Consts.MSG," ");
return jsonObject;
}
/**
*
**/
@RequestMapping(value ="/update",method = RequestMethod.POST)
public Object updateAdminGuanli(HttpServletRequest request){
JSONObject jsonObject = new JSONObject();
String id = request.getParameter("id").trim();
String name = request.getParameter("name").trim();
String username = request.getParameter("username").trim();
String password = request.getParameter("password").trim();
String location = request.getParameter("location").trim();
String introduction = request.getParameter("introduction").trim();
//
AdminGuanli adminGuanli = new AdminGuanli();
adminGuanli.setId(Integer.parseInt(id));
adminGuanli.setName(name);
adminGuanli.setUsername(username);
adminGuanli.setPassword(password);
adminGuanli.setLocation(location);
adminGuanli.setIntroduction(introduction);
boolean flag = AdminGuanliService.update(adminGuanli);
if(flag){
jsonObject.put(Consts.CODE,1);
jsonObject.put(Consts.MSG," ");
System.out.println("11111111111111111");
return jsonObject;
}
jsonObject.put(Consts.CODE,0);
jsonObject.put(Consts.MSG," ");
return jsonObject;
}
/**
*
**/
@RequestMapping(value ="/delete",method = RequestMethod.GET)
public Object deleteAdminGuanli(HttpServletRequest request){
String id = request.getParameter("id").trim();
boolean flag = AdminGuanliService.delete(Integer.parseInt(id));
return flag;
}
/**
*
**/
@RequestMapping(value ="/selectByPrimaryKey",method = RequestMethod.GET)
public Object selectByPrimaryKey(HttpServletRequest request){
String id = request.getParameter("id").trim();
return AdminGuanliService.selectByPrimaryKey(Integer.parseInt(id));
}
@RequestMapping(value ="/allAdminGuanli",method = RequestMethod.GET)
public Object allAdminGuanli(HttpServletRequest request){
return AdminGuanliService.allAdminGuanli();
}
@RequestMapping(value ="/AdminGuanliOfName",method = RequestMethod.GET)
public Object AdminGuanliOfName(HttpServletRequest request){
String name = request.getParameter("name").trim();
return AdminGuanliService.AdminGuanliOfName("%"+name+"#");
}
/**
*
**/
@RequestMapping(value ="/updateAdminPic",method = RequestMethod.POST)
public Object updateAdminPic(@RequestParam("file") MultipartFile avatorFile, @RequestParam("id")int id){
JSONObject jsonObject = new JSONObject();
if(avatorFile.isEmpty()){
jsonObject.put(Consts.CODE,0);
jsonObject.put(Consts.MSG," ");
return jsonObject;
}
// = +
String fileName = System.currentTimeMillis()+avatorFile.getOriginalFilename();
//
String filePath = System.getProperty("user.dir")+System.getProperty("file.separator")+"img"
+System.getProperty("file.separator")+"AdminPic";
// ，
File file1 = new File(filePath);
if(file1.exists()){
file1.mkdir();
}
//
File dest = new File(filePath+System.getProperty("file.separator")+fileName);
//
String storeAvatorPath = "/img/AdminPic/"+fileName;
try {
avatorFile.transferTo(dest);
AdminGuanli adminGuanli = new AdminGuanli();
adminGuanli.setId(id);
adminGuanli.setPic(storeAvatorPath);
boolean flag = AdminGuanliService.update(adminGuanli);
if(flag){
jsonObject.put(Consts.CODE,1);
jsonObject.put(Consts.MSG," ");
jsonObject.put("pic",storeAvatorPath);
return jsonObject;
}
jsonObject.put(Consts.CODE,0);
jsonObject.put(Consts.MSG," ");
return jsonObject;
} catch (IOException e) {
jsonObject.put(Consts.CODE,0);
jsonObject.put(Consts.MSG," "+e.getMessage());
}finally {
return jsonObject;
}
}
}
/**
*
**/
@RequestMapping(value="/add",method= RequestMethod.POST)
public Object addGarbage(HttpServletRequest request){
JSONObject jsonObject=new JSONObject();
String name=request.getParameter("name").trim();
String type=request.getParameter("type").trim();
String introduction=request.getParameter("introduction").trim();
//
Garbage garbage=new Garbage();
garbage.setName(name);
garbage.setType(type);
garbage.setIntroduction(introduction);
boolean flag=GarbageService.insert(garbage);
if(flag){
jsonObject.put(Consts.CODE,1);
jsonObject.put(Consts.MSG," ");
return jsonObject;
}
jsonObject.put(Consts.CODE,0);
jsonObject.put(Consts.MSG," ");
return jsonObject;
}
/**
*
**/
@RequestMapping(value = "/update",method = RequestMethod.POST)
public Object updateGarbage(HttpServletRequest request){
JSONObject jsonObject=new JSONObject();
String id=request.getParameter("id").trim();
String name=request.getParameter("name").trim();
String type=request.getParameter("type").trim();
String introduction=request.getParameter("introduction");
//
Garbage garbage=new Garbage();
garbage.setId(Integer.parseInt(id));
garbage.setName(name);
garbage.setType(type);
garbage.setIntroduction(introduction);
boolean flag=GarbageService.update(garbage);
if(flag){
jsonObject.put(Consts.CODE,1);
jsonObject.put(Consts.MSG," ");
return jsonObject;
}
jsonObject.put(Consts.CODE,0);
jsonObject.put(Consts.MSG," ");
return jsonObject;
}
/**
*
**/
@RequestMapping(value = "/delete",method = RequestMethod.GET)
public Object deleteGarbage(HttpServletRequest request){
String id=request.getParameter("id").trim();
boolean flag=GarbageService.delete(Integer.parseInt(id));
return flag;
}
/**
*
**/
@RequestMapping(value = "/allGarbage",method = RequestMethod.GET)
public Object allGarbage(HttpServletRequest request){
return GarbageService.allGarbage();
}
}
/**
*
**/
@RequestMapping(value = "/add",method = RequestMethod.POST)
public Object addUser(HttpServletRequest request){
JSONObject jsonObject = new JSONObject();
String name = request.getParameter("name").trim();
String username = request.getParameter("username").trim();
String password = request.getParameter("password").trim();
String sex = request.getParameter("sex").trim();
String pic = request.getParameter("pic").trim();
String birth = request.getParameter("birth").trim();
String location = request.getParameter("location").trim();
String contact = request.getParameter("contact").trim();
DateFormat dateFormat = new SimpleDateFormat("yyyy-MM-dd");
Date birthDate = new Date();
try {
birthDate = dateFormat.parse(birth);
} catch (ParseException e) {
e.printStackTrace();
}
System.out.println(name);
//
User user=new User();
user.setName(name);
user.setUsername(username);
user.setPassword(password);
user.setSex(new Byte(sex));
user.setPic(pic);
user.setBirth(birthDate);
user.setLocation(location);
user.setContact(contact);
boolean flag = UserService.insert(user);
if(flag){
jsonObject.put(Consts.CODE,1);
jsonObject.put(Consts.MSG," ");
return jsonObject;
}
jsonObject.put(Consts.CODE,0);
jsonObject.put(Consts.MSG," ");
return jsonObject;
}
/**
*
**/
@RequestMapping(value ="/update",method = RequestMethod.POST)
public Object updateUser(HttpServletRequest request){
JSONObject jsonObject = new JSONObject();
String id = request.getParameter("id").trim();
String name = request.getParameter("name").trim();
String username = request.getParameter("username").trim();
String password = request.getParameter("password").trim();
String sex = request.getParameter("sex").trim();
String pic = request.getParameter("pic").trim();
String birth = request.getParameter("birth").trim();
String location = request.getParameter("location").trim();
String contact = request.getParameter("contact").trim();
DateFormat dateFormat = new SimpleDateFormat("yyyy-MM-dd");
Date birthDate = new Date();
try {
birthDate = dateFormat.parse(birth);
} catch (ParseException e) {
e.printStackTrace();
}
//
User user=new User();
user.setId(Integer.parseInt(id));
user.setName(name);
user.setPassword(password);
user.setSex(new Byte(sex));
user.setPic(pic);
user.setBirth(birthDate);
user.setLocation(location);
user.setContact(contact);
boolean flag = UserService.update(user);
if(flag){
jsonObject.put(Consts.CODE,1);
jsonObject.put(Consts.MSG," ");
System.out.println("11111111111111111");
return jsonObject;
}
jsonObject.put(Consts.CODE,0);
jsonObject.put(Consts.MSG," ");
return jsonObject;
}
/**
*
**/
@RequestMapping(value ="/delete",method = RequestMethod.GET)
public Object deleteUser(HttpServletRequest request){
String id = request.getParameter("id").trim();
boolean flag = UserService.delete(Integer.parseInt(id));
return flag;
}
/**
*
**/
@RequestMapping(value ="/selectByPrimaryKey",method = RequestMethod.GET)
public Object selectByPrimaryKey(HttpServletRequest request){
String id = request.getParameter("id").trim();
return UserService.selectByPrimaryKey(Integer.parseInt(id));
}
@RequestMapping(value ="/allUser",method = RequestMethod.GET)
public Object allUser(HttpServletRequest request){
return UserService.allUser();
}
@RequestMapping(value ="/UserOfName",method = RequestMethod.GET)
public Object UserOfName(HttpServletRequest request){
String name = request.getParameter("name").trim();
return UserService.userOfName("%"+name+"#");
}
/**
*
**/
@RequestMapping(value ="/updateUserPic",method = RequestMethod.POST)
public Object updateUserPic(@RequestParam("file") MultipartFile avatorFile, @RequestParam("id")int id){
JSONObject jsonObject = new JSONObject();
if(avatorFile.isEmpty()){
jsonObject.put(Consts.CODE,0);
jsonObject.put(Consts.MSG," ");
return jsonObject;
}
// = +
String fileName = System.currentTimeMillis()+avatorFile.getOriginalFilename();
//
String filePath = System.getProperty("user.dir")+System.getProperty("file.separator")+"img"
+System.getProperty("file.separator")+"userPic";
// ，
File file1 = new File(filePath);
if(file1.exists()){
file1.mkdir();
}
//
File dest = new File(filePath+System.getProperty("file.separator")+fileName);
//
String storeAvatorPath = "/img/userPic/"+fileName;
try {
avatorFile.transferTo(dest);
User user = new User();
user.setId(id);
user.setPic(storeAvatorPath);
boolean flag = UserService.update(user);
if(flag){
jsonObject.put(Consts.CODE,1);
jsonObject.put(Consts.MSG," ");
jsonObject.put("pic",storeAvatorPath);
return jsonObject;
}
jsonObject.put(Consts.CODE,0);
jsonObject.put(Consts.MSG," ");
return jsonObject;
} catch (IOException e) {
jsonObject.put(Consts.CODE,0);
jsonObject.put(Consts.MSG," "+e.getMessage());
}finally {
return jsonObject;
}
}
}
public class WebMvcConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowCredentials(true) /* */
.allowedOriginPatterns("*")
.allowedMethods("*");
}
}1.フロントエンドのURLに従ってウェブページにアクセスする
2.ホームページに登録する
3.ゴミ情報を確認する
4.ユーザ管理ページ
5.管理者管理ページ
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。