ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

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

2021-11-24 17:02:17  阅读:145  来源: 互联网

标签:redirect Spring public menu import 端践 com id Cloud


九。后台管理系统

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"改为

<iframe src="/menu/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>

最后登录更改状态测试

 查找出未派送

 操作【已派送】

 数据库结果

 登录张三客户端查看

 

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

标签:redirect,Spring,public,menu,import,端践,com,id,Cloud
来源: https://blog.csdn.net/weixin_40518706/article/details/121498543

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有