spring boot基础学习之(八)在前端网页中获取后端信息并显示出来

本次项目所有能够使用的静态资源可以免费进行下载

静态资源

在本篇代码DAO层将通过Java文件去实现,在这里就不连接数据,然后通过jdbc将数据库内容的内容显示出来

案例:员工管理系统

创建DAO层

创建储存用户属性信息的工具类

package com.example.demo2.pojo;import lombok.AllArgsConstructor;import lombok.Data;import lombok.NoArgsConstructor;import java.util.Date;@Data //生成属性的set和get方法@NoArgsConstructor//注解:自动化自己主动生成无参构造方法public class Employee {private Integer id;private String lastname;private String Email;private Integer gender;private department department;private Date date;public Employee(Integer id, String lastname, String email, Integer gender, com.example.demo2.pojo.department department) {this.id = id;this.lastname = lastname;Email = email;this.gender = gender;this.department = department;this.date = new Date();}}

看方法是否生成

实现employee类的DAO层

package com.example.demo2.DAO;import com.example.demo2.pojo.Employee;import com.example.demo2.pojo.department;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.stereotype.Repository;import java.util.Collection;import java.util.HashMap;import java.util.Map;@Repository //能够被扫描到public class employeeDAO {private static Map employees = null;@Autowiredprivate departmentDAO departmentDAO;static{employees = new HashMap();employees.put(1001,new Employee(1001,"AA","2602499389@AA.com",1,new department(01,"教学部")));employees.put(1002,new Employee(1002,"BB","2602499389@BB.com",0,new department(02,"市场部")));employees.put(1003,new Employee(1003,"CC","2602499389@CC.com",1,new department(03,"教研部")));employees.put(1004,new Employee(1004,"DD","2602499389@DD.com",0,new department(04,"运营部")));employees.put(1005,new Employee(1005,"EE","2602499389@EE.com",1,new department(05,"后勤部")));}private static Integer ininid = 1006;public void save(Employee employee){ //添加员工方法,为后期实现完整体系做准备if(employee.getId() == null){employee.setId(ininid);}employee.setDepartment(departmentDAO.getDepartmentbyid(employee.getDepartment().getId()));employees.put(employee.getId(),employee);ininid++;}public Collection getall(){//获取全部的用户信息return employees.values();}public Employee getemployeeid(Integer id){//获取员工的id信息return employees.get(id);}public void delete(Integer id){//通过id删除指定员工信息employees.remove(id);}}

创建department类

实现department的DAO层(信息就不通过连接数据库来实现了:主要讲解的是方法)

package com.example.demo2.DAO;import com.example.demo2.pojo.department;import org.springframework.stereotype.Repository;import java.util.Collection;import java.util.HashMap;import java.util.Map;@Repositorypublic class departmentDAO {private static Map departments = null;static{departments = new HashMap();departments.put(01,new department(01,"教学部"));departments.put(02,new department(02,"市场部"));departments.put(03,new department(03,"教研部"));departments.put(04,new department(04,"运营部"));departments.put(05,new department(05,"后勤部"));}public Collection getdepartments(){ //获取department类中的值return departments.values();}public department getDepartmentbyid(Integer id){ //获取指定员工信息的idreturn departments.get(id);}}

在索引网页进行跳转到用户详细信息页面

当前网页代码有这样一行代码:一个超链接实现网页的跳转

但是这并不是具体的网页,而是一个域名,访问到后端设置value值与它一致的控制类

控制器源代码

@Controllerpublic class EmployeeController {@AutowiredemployeeDAO employeeDAO;@AutowireddepartmentDAO departmentDAO;@RequestMapping("/emps")public String list(Model model){ Collection getall = employeeDAO.getall();//调用DAO层的方法获取到员工的全部信息,并把这些信息封装Model设置的属性中,传递给list网页model.addAttribute("emps",getall);return "list";}}

list网页:用户的信息全部在这个网页进行显示

Dashboard Template for Bootstrap/* Chart.js */@-webkit-keyframes chartjs-render-animation {from {opacity: 0.99}to {opacity: 1}}@keyframes chartjs-render-animation {from {opacity: 0.99}to {opacity: 1}}.chartjs-render-monitor {-webkit-animation: chartjs-render-animation 0.001s;animation: chartjs-render-animation 0.001s;}

添加用户

idlastnameEmailgenderdepartmentdate操作
编辑
@{feather.replace()var ctx = document.getElementById("myChart");var myChart = new Chart(ctx, {type: 'line',data: {labels: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],datasets: [{data: [15339, 21345, 18483, 24003, 23489, 24092, 12034],lineTension: 0,backgroundColor: 'transparent',borderColor: '#007bff',borderWidth: 4,pointBackgroundColor: '#007bff'}]},options: {scales: {yAxes: [{ticks: {beginAtZero: false}}]},legend: {display: false,}}});

上面网页代码很多但其实对我们有用就是这几行

idlastnameEmailgenderdepartmentdate操作
编辑

前面在控制器类中传递到此类有一个封装着用户全部信息的属性emps

获取emps的值,并遍历输出

输出按照下面代码进行遍历输出

编辑

代码部分完成,运行项目

1:登陆界面

二:登录到Dashboard界面:查看用户信息点击Customer

三:跳转到list界面

用户信息展示成功