自学实前后端践项目3 Spring Cloud微服务 8

2023-12-23 11:23:04

九。后台管理系统

1.前面基本上的功能都已经实现了，最后就行优化和界面管理!

1)过滤器接口实现直接访问主页面的时候需要先登录的功能

在client里面创建filter创建UserFilter 类然后引入Filter重写方法

package com.redhat.filter;

import com.redhat.entity.User;
import org.springframework.stereotype.Component;

import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.io.IOException;
@Component
@WebFilter(urlPatterns ={"/index.html"},filterName = "userFilter")
public class UserFilter implements Filter {

    @Override
    public void init(FilterConfig filterConfig) throws ServletException {

    }

    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        HttpServletRequest request = (HttpServletRequest) servletRequest;
        HttpServletResponse response = (HttpServletResponse)servletResponse;
        HttpSession session = request.getSession();
        User user = (User)session.getAttribute("user");
        if (user==null){
            response.sendRedirect("login.html");
        }else{
            filterChain.doFilter(servletRequest,servletResponse);
        }
    }

    @Override
    public void destroy() {

    }
}
在client的启动类添加注解@ServletComponentScan

测试当输入index.html直接跳转到登录页面

2.添加admin的前端页面并实现相关操作和数据封装显示

1)前端页面main

链接：https://pan.baidu.com/s/1sN5ncNRDkFXH5Y3s3lWzlw
提取码：foq1

2)对应图片放在client的static里面

链接：https://pan.baidu.com/s/1AzLjsJUak7LzGjwAk6KBqA
提取码：k55q

3）修改clinet 的accounthandler下的完成剩下功能

case "admin":
    Admin admin =new Admin();
    idStr = hashMap.get("id")+"";
    id = Long.parseLong(idStr);
    String username2 = (String)hashMap.get("username");
    admin.setId(id);
    admin.setUsername(username2);
    session.setAttribute("admin",admin);
    result = "main";
    break;

测试登录admin1管理员如下

修改路径测试

client前端页面main 中将<iframe src="/account/redirect/menu_manage"改为

<!-- 主体开始 -->
<div class="layui-body">

    <iframe src="/menu/redirect/menu_manage" style="width: 100%;height: 100%;border: 0px"></iframe>

</div>

client中userhandler主要将返回路径变成 return "redirect:/menu/redirect/menu_manage";

package com.redhat.controller;

import com.redhat.entity.User;
import com.redhat.entity.UserVO;
import com.redhat.feign.UserFeign;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;

import java.util.Date;
import java.util.List;

@Controller
@RequestMapping("/user")
public class UserHandler {
    @Autowired
    private UserFeign userFeign;

    @GetMapping("/findAll")
    @ResponseBody
    public UserVO findAll(@RequestParam("page")int page, @RequestParam("limit")int limit){
       int index = (page-1)*limit;
       UserVO userVO = new UserVO();
       userVO.setCode(0);
       userVO.setMsg("");
       userVO.setCount(userFeign.count());
       userVO.setData(userFeign.findAll(index,limit));
        return userVO;
    }

//    @GetMapping("/redirect/{location}")
//    public String redirect(@PathVariable("location") String location){
//        return location;
//    }

    @GetMapping("/count")
    public int count(){
        return userFeign.count();
    }

    @PostMapping("/save")
    public String save(User user){
        user.setRegisterdate(new Date());
        userFeign.save(user);
        return "redirect:/menu/redirect/user_manage";
    }

    @GetMapping("/deleteById/{id}")
    public String deleteById(@PathVariable("id") long id) {
        userFeign.deleteById(id);
        return "redirect:/menu/redirect/user_manage";
    }
}

结果测试

修改client，menuhandler实现编辑删除return "redirect:/menu/redirect/menu_manage";

package com.redhat.controller;

import com.redhat.entity.Menu;
import com.redhat.entity.MenuVO;
import com.redhat.feign.MenuFeign;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.servlet.ModelAndView;


@Controller
@RequestMapping("/menu")
public class MenuHandler {
    @Autowired
    private MenuFeign menuFeign;
    @GetMapping("/findAll")
    @ResponseBody
    public MenuVO findAll(@RequestParam("page") int page, @RequestParam("limit") int limit
    ){
        int index=(page-1)*limit;
        return menuFeign.findAll(index,limit);
    }
    @GetMapping("/redirect/{location}")
    public String redirect(@PathVariable("location") String location){
return location;
    }

    @GetMapping("/deleteById/{id}")
    public String deleteById(@PathVariable("id") long id){
         menuFeign.deleteById(id);
         return "redirect:/menu/redirect/menu_manage";
    }
    @GetMapping("/findTypes")
    public ModelAndView findTypes(){
        ModelAndView modelAndView=new ModelAndView();
        modelAndView.setViewName("menu_add");
        modelAndView.addObject("list",menuFeign.findTypes());
        return modelAndView;
    }
    @PostMapping("/save")
    public String save(Menu menu){
       menuFeign.save(menu);
       return  "redirect:/menu/redirect/menu_manage";
    }
    @GetMapping("/findById/{id}")
    public ModelAndView findById(@PathVariable("id") long id){
         ModelAndView modelAndView = new ModelAndView();
         modelAndView.setViewName("menu_update");
         modelAndView.addObject("menu",menuFeign.findById(id));
         modelAndView.addObject("list",menuFeign.findTypes());
         return modelAndView;
    }
    @PostMapping("/update")
    public String update(Menu menu){
        menuFeign.update(menu);
        return "redirect:/menu/redirect/menu_manage";
    }
}

1）修改

2）删除

2.增加添加菜品的页面

mian页面中页面改为对应编写的页面跳转即可

$("#menu_add").click(function(){
    $("iframe").attr("src","/menu/findTypes");
});

将main里面的都写成menu跳转对象因为我们写的时候在menu里面可以直接跳转

<script type="text/javascript">
    $(function () {
        $("#menu_manage").click(function(){
            $("iframe").attr("src","/account/redirect/menu_manage");
        });
        $("#menu_add").click(function(){
            $("iframe").attr("src","/menu/findTypes");
        });
        $("#order_handler").click(function(){
            $("iframe").attr("src","/menu/redirect/order_handler");
        });
        $("#user_manage").click(function(){
            $("iframe").attr("src","/menu/redirect/user_manage");
        });
        $("#user_add").click(function(){
            $("iframe").attr("src","/menu/redirect/user_add");
        });
    })

测试查询用户

测试添加用户

添加成功

3.加一个后台管理器的过滤器

没有加之前直接访问会出现

clinet模块下filter文件夹中创建AdminFilter

package com.redhat.filter;


import com.redhat.entity.Admin;
import org.springframework.stereotype.Component;

import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.io.IOException;

@Component
@WebFilter(urlPatterns = {"/main.html"},filterName = "adminFilter")
public class AdminFilter implements Filter {
    @Override
    public void init(FilterConfig filterConfig) throws ServletException {
    }

    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        HttpServletRequest request = (HttpServletRequest) servletRequest;
        HttpServletResponse response = (HttpServletResponse)servletResponse;
        HttpSession session = request.getSession();
        Admin admin = (Admin)session.getAttribute("admin");
        if (admin==null){
            response.sendRedirect("login.html");
        }else{
            filterChain.doFilter(servletRequest,servletResponse);
        }
    }

    @Override
    public void destroy() {

    }
}

添加完成后直接跳转页面到登录

3.最后增加一个订单处理功能！

1)order模块下OrderRepository接口增加查找，统计，更新处理订单的方法接口

package com.redhat.repository;

import com.redhat.entity.Order;

import java.util.List;

public interface OrderRepository {
    public void save(Order order);
    public List<Order> findAllByUid(int index,int limit,long uid);
    public int countByUid(long uid);
    public List<Order> findAll(int index,int limit);
    public void updateState(long id);
    public int count();
}

2）order模块下OrderHandler类增加查找，更新处理订单的方法访问路径已经设置数据

@GetMapping("/findAll/{index}/{limit}")
public OrderVO findAll(@PathVariable("index") int index,@PathVariable("limit") int limit){
    OrderVO orderVO = new OrderVO();
    orderVO.setMsg("");
    orderVO.setCount(orderRepository.count());
    orderVO.setData(orderRepository.findAll(index,limit));
    return orderVO;
}

@PutMapping("/update/{id}")
public void update(@PathVariable("id")long id){
   orderRepository.updateState(id);
}

3）order模块下mapping orderrepository.xml中加入需要的对应三个sql语句

 <select id="findAll" resultMap="orderMap">
   select id,mid,date,state  from t_order where state = 0 limit #{param1},#{param2}
</select>

<select id="updateState"  parameterType="long">
   update  t_order set state = 1 where id = #{id}
</select>

<select id="count"  resultType="int">
   select count(*) from t_order where state=0
</select>

测试查找功能

postman中测试更新功能

更新状态前

执行更新

更新成功

4.全部测通以后最后一步就是在client中使用这两个接口方法

1）添加order的前端页面这些前端代码都是官网找的，加到client的static中进行存储备用，接口测试方法可以了以后直接调用页面就行了

链接：https://pan.baidu.com/s/1T3ywYAPdBa1yijRolCYGSg
提取码：p9wd

2）对应前端需要对应的数据进行查询

order模块下mapping orderrepository.xml中加入需要的对应三个sql语句

还需要加uid

 <select id="findAll" resultMap="orderMap">
   select id,mid,uid,date,state  from t_order where state = 0 limit #{param1},#{param2}
</select>

这里得加上user的信息查询 <association property="user" select="com.redhat.repository.UserRepository.findById" column="uid"></association>

<resultMap id="orderMap" type="com.redhat.entity.Order">
   <id column="id" property="id"></id>
   <result column="date" property="date"></result>
   <result column="state" property="state"></result>
   <association property="menu" select="com.redhat.repository.MenuRepository.findById" column="mid"></association>
    <association property="user" select="com.redhat.repository.UserRepository.findById" column="uid"></association>
</resultMap>

3）复制对应的user接口到client模块下和sql语句只留findById

package com.redhat.repository;

import com.redhat.entity.User;

import java.util.List;

public interface UserRepository {
    public User findById(long id);
}

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.redhat.repository.UserRepository">

   <select id="findById" parameterType="long" resultType="com.redhat.entity.User">
      select * from t_user where id = #{id}
   </select>

</mapper>

其余client的接口和sql语句也只留需要的即可

测试

最后调用页面

client中的OrderFeign注意对比修改

package com.redhat.feign;

import com.redhat.entity.MenuVO;
import com.redhat.entity.Order;
import com.redhat.entity.OrderVO;
import org.springframework.cloud.openfeign.FeignClient;
import org.springframework.web.bind.annotation.*;

@FeignClient(value = "order")
public interface OrderFeign {

    @PostMapping("/order/save")
    public void save(@RequestBody Order order);

    @GetMapping("/order/findAllByUid/{index}/{limit}/{uid}")
    public OrderVO findAllByUid(@PathVariable("index") int index,
                                @PathVariable("limit") int limit,
                                @PathVariable("uid") long uid
                               );

    @GetMapping("/order/findAll/{index}/{limit}")
    public OrderVO findAll(@PathVariable("index")int index,@PathVariable("limit")int limit);

    @GetMapping("/order/updateState/{id}")
    public void updateState(@PathVariable("id") long id);
}

Order模块下的OrderHandler需要修改如下

    @GetMapping("/updateState/{id}")
    public void updateState(@PathVariable("id")long id){
       orderRepository.updateState(id);
    }
}

Client模块下的OrderHandler需要修改如下

@GetMapping("/updateState/{id}")
public String updateState(@PathVariable("id") long id){
    orderFeign.updateState(id);
    return "redirect:/menu/redirect/order_handler";

}

最后前端页面修改

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all">
</head>
<body class="layui-layout-body">
<div class="layui-container" style="margin-top: 50px;width: 750px;width: 1070px">

    <table class="layui-hide" id="test" style="width: 300px" lay-filter="test"></table>
    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="send">已派送</a>
    </script>
    <script th:src="@{/layui/layui.js}" charset="utf-8"></script>
    <script>
        layui.use('table', function(){
            var table = layui.table;

            table.render({
                elem: '#test'
                ,url:'/order/findAll'
                ,title: '订单列表'
                ,cols: [
                    [
                        {field:'id', width:80, title: '编号', sort: true}
                        , {
                        field: 'name', width: 160, title: '菜品', templet: function (data) {
                                return data.menu.name
                            }
                        }
                        , {
                        field: 'price', width: 80, title: '单价', templet: function (data) {
                                return data.menu.price
                            }
                        }
                        ,{field:'flavor', width:80, title: '口味',templet:function(data){
                                return data.menu.flavor
                            }
                        }
                        ,{field:'nickname', width:80, title: '用户',templet:function(data){
                                return data.user.nickname
                            }
                        }
                        ,{field:'telephone', width:140, title: '联系电话',templet:function(data){
                                return data.user.telephone
                            }
                        }
                        ,{field:'address', width:140, title: '地址',templet:function(data){
                                return data.user.address
                            }
                        }
                        ,{field:'date',width:220,  title: '下单时间'}
                        ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:90}
                ]
                ]
                ,page: true
            });

            //监听行工具事件
            table.on('tool(test)', function(obj){
                var data = obj.data;
                if(obj.event === 'send'){
                    window.location.href="/order/updateState/"+data.id;
                }
            });
        });
    </script>

</div>
<script>
    //二级菜单联动
    layui.use('element', function(){
        var element = layui.element;

    });
</script>
</body>
</html>

最后登录更改状态测试

查找出未派送

操作【已派送】

数据库结果

登录张三客户端查看

到此所有的系统整合完成！修整一下进行下面的一个实战项目的学习。希望大家一起学习进步，如果有那些地方没有写对的希望大家批判指正，我边学习边记下自己的流程和相关理解知识，希望大家一起进步！

码农公寓

相关文章