基于SpringBoot+Vue的宠物领养饲养交流管理平台设计与实现

简介: 基于SpringBoot+Vue的宠物领养饲养交流管理平台设计与实现

系统功能结构图

具体实现

系统功能模块

宠物领养饲养交流管理平台,在系统首页可以查看首页、宠物领养、饲料购买、宠物论坛、宠物资讯、个人中心、后台管理、购物车等内容,如图5-1所示。

图5-1系统首页界面图


用户注册,在用户注册页面通过填写账号、密码、姓名、手机、邮箱、身份证等信息完成用户注册,如图5-2所示。


2aac4aceba73d8085ea781ef4ca2fc17_446fa1ec7f27cc436047c14b7742c2e0.jpeg


图5-2用户注册界面图


宠物领养,在宠物领养页面可以查看宠物编号、宠物名称、宠物种类、宠物性别、宠物年龄、账号、姓名、宠物照片等信息,进行领养,如图5-3所示。

d88026208247f1dfc40d77095283a203_e3f16f1bc515ab7640d185de3f88adc7.jpeg

图5-3宠物领养界面图


饲料购买,在饲料购买页面可以查看饲料名称、适用宠物、饲料种类、饲料配料、出厂公司、饲料图片、价格、点击次数等信息,进行添加到购物车,如图5-4所示。


24c2b750e50f1e5f8fba8d6aaee23226_a1aa992feaaef443dd2cdf907a836bb1.jpeg


图5-4饲料购买界面图


宠物论坛,在宠物论坛页面通过填写标题、类型、内容等信息进行发布帖子,如图5-5所示。

9bd7d7a06e7714fa470bd02a12175d15_13e49524660b4843751f5bcfa411c502.jpeg

图5-5宠物论坛界面图

个人中心,在个人中心页面通过填写账号、密码、姓名、性别、手机、邮箱、身份证等信息进行更新信息,根据需要对我的发布、我的订单、我的地址、我的收藏进行相对应操作,如图5-6所示。

图5-6个人中心界面图

购物车,在购物车页面可以查看购买商品、价格、数量、总价等信息,如图5-7所示。

图5-7购物车界面图


管理员功能模块

管理员登录,管理员通过输入用户、密码、角色等信息进行系统登录,如图5-8所示。

图5-8管理员登录界面图

管理员登录进入宠物领养饲养交流管理平台可以查看首页、个人中心、用户管理、宠物领养管理、宠物种类管理、领养详情管理、饲料购买管理、宠物论坛、系统管理、订单管理等内容,如图5-9所示。

图5-9管理员功能界面图

用户管理,在用户管理页面可以查看索引、账号、姓名、性别、手机、邮箱、身份证、照片等信息,并可根据需要进行修改或删除等操作,如图5-10所示。

图5-10用户管理界面图

宠物领养管理,在宠物领养管理页面可以查看索引、宠物编号、宠物名称、宠物种类、宠物性别、宠物年龄、账号、姓名、宠物照片等信息,并可根据需要进行查看评论、修改或删除等操作,如图5-12所示。

图5-12宠物领养管理界面图

宠物种类管理,在宠物种类管理页面可以查看索引、种类等信息,并可根据需要进行修改或删除等操作,如图5-13所示。

图5-13宠物种类管理界面图

领养详情管理,在领养详情管理页面可以查看索引、宠物编号、宠物名称、宠物种类、宠物年龄、账号、姓名、领养时间、领养地点、审核回复、审核状态、审核等信息,并可根据需要进行修改或删除等操作,如图5-14所示。

图5-14领养详情管理界面图

饲料购买管理,在饲料购买管理页面可以查看索引、饲料名称、适用宠物、饲料种类、饲料配料、出厂公司、饲料图片、价格等信息,并可根据需要进行查看评论、修改或删除等操作,如图5-15所示。

图5-15饲料购买管理界面图

宠物论坛,在宠物论坛页面可以查看索引、帖子标题、用户名、状态等信息,并可根据需要进行修改或删除等操作,如图5-16所示。

图5-16宠物论坛界面图

系统管理,在轮播图管理页面可以查看索引、名称、值等信息,并可根据需要对宠物资讯进行操作,如图5-17所示。

图5-17系统管理界面图

订单管理,在已支付订单页面可以查看索引、订单编号、商品名称、商品图片、购买数量、价格/积分、折扣价格、总价格/总积分、折扣总价格、支付类型、状态、地址等信息,并可根据需要对已退款订单、已完成订单、已发货订单、未支付订单、已取消订单进行相对应操作,如图5-18所示。


07586fac5d9ce2e8bb4adac141952818_a84b4bb2596e92e25e227e00f4b85dc1.jpeg


图5-18订单管理界面图


用户后台功能模块

用户登录进入宠物领养饲养交流管理平台可以查看首页、个人中心、宠物领养管理、领养详情管理、订单管理等内容,如图5-19所示。

图5-19用户后台功能界面图


个人中心,在个人中心页面通过填写账号、姓名、性别、手机、邮箱、身份证、照片等信息进行修改,如图5-20所示。

图5-20个人中心界面图

宠物领养管理,在宠物领养管理页面可以查看索引、宠物编号、宠物名称、宠物种类、宠物性别、宠物年龄、账号、姓名、宠物照片等信息,并可根据需要进行修改或删除等操作,如图5-21所示。

图5-21宠物领养管理界面图


订单管理,在已完成订单页面可以查看索引、订单编号、商品名称、商品图片、购买数量、价格/积分、折扣价格、总价格/总积分、折扣总价格、支付类型、状态、地址等信息,并可根据需要对已退款订单、已发货订单、未支付订单、已取消订单、已支付订单进行相对应操作,如图5-22所示。


693b59af15d280f8f1584fc1e9cad629_a5a0edd088ed1cad3599e16ad7b2d040.jpeg


图5-22订单管理界面图


代码参考

@IgnoreAuth
@PostMapping(value = "/login")
public R login(String username, String password, String captcha, HttpServletRequest request) {
   UsersEntity user = userService.selectOne(new EntityWrapper<UsersEntity>().eq("username", username));
   if(user==null || !user.getPassword().equals(password)) {
      return R.error("账号或密码不正确");
   }
   String token = tokenService.generateToken(user.getId(),username, "users", user.getRole());
   return R.ok().put("token", token);
}
  @Override
  public String generateToken(Long userid,String username, String tableName, String role) {
    TokenEntity tokenEntity = this.selectOne(new EntityWrapper<TokenEntity>().eq("userid", userid).eq("role", role));
    String token = CommonUtil.getRandomString(32);
    Calendar cal = Calendar.getInstance();   
      cal.setTime(new Date());   
      cal.add(Calendar.HOUR_OF_DAY, 1);
    if(tokenEntity!=null) {
      tokenEntity.setToken(token);
      tokenEntity.setExpiratedtime(cal.getTime());
      this.updateById(tokenEntity);
    } else {
      this.insert(new TokenEntity(userid,username, tableName, role, token, cal.getTime()));
    }
    return token;
  }
/**
 * 权限(Token)验证
 */
@Component
public class AuthorizationInterceptor implements HandlerInterceptor {
    public static final String LOGIN_TOKEN_KEY = "Token";
    @Autowired
    private TokenService tokenService;
  @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
    //支持跨域请求
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Credentials", "true");
        response.setHeader("Access-Control-Allow-Headers", "x-requested-with,request-source,Token, Origin,imgType, Content-Type, cache-control,postman-token,Cookie, Accept,authorization");
        response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin"));
  // 跨域时会首先发送一个OPTIONS请求,这里我们给OPTIONS请求直接返回正常状态
  if (request.getMethod().equals(RequestMethod.OPTIONS.name())) {
          response.setStatus(HttpStatus.OK.value());
            return false;
        }
        IgnoreAuth annotation;
        if (handler instanceof HandlerMethod) {
            annotation = ((HandlerMethod) handler).getMethodAnnotation(IgnoreAuth.class);
        } else {
            return true;
        }
        //从header中获取token
        String token = request.getHeader(LOGIN_TOKEN_KEY);
        /**
         * 不需要验证权限的方法直接放过
         */
        if(annotation!=null) {
          return true;
        }
        TokenEntity tokenEntity = null;
        if(StringUtils.isNotBlank(token)) {
          tokenEntity = tokenService.getTokenEntity(token);
        }
        if(tokenEntity != null) {
          request.getSession().setAttribute("userId", tokenEntity.getUserid());
          request.getSession().setAttribute("role", tokenEntity.getRole());
          request.getSession().setAttribute("tableName", tokenEntity.getTablename());
          request.getSession().setAttribute("username", tokenEntity.getUsername());
          return true;
        }
    PrintWriter writer = null;
    response.setCharacterEncoding("UTF-8");
    response.setContentType("application/json; charset=utf-8");
    try {
        writer = response.getWriter();
        writer.print(JSONObject.toJSONString(R.error(401, "请先登录")));
    } finally {
        if(writer != null){
            writer.close();
        }
    }
//        throw new EIException("请先登录", 401);
    return false;
    }
}


论文参考

相关文章
|
3月前
|
JavaScript 安全 Java
如何使用 Spring Boot 和 Ant Design Pro Vue 实现动态路由和菜单功能,快速搭建前后端分离的应用框架
本文介绍了如何使用 Spring Boot 和 Ant Design Pro Vue 实现动态路由和菜单功能,快速搭建前后端分离的应用框架。首先,确保开发环境已安装必要的工具,然后创建并配置 Spring Boot 项目,包括添加依赖和配置 Spring Security。接着,创建后端 API 和前端项目,配置动态路由和菜单。最后,运行项目并分享实践心得,包括版本兼容性、安全性、性能调优等方面。
198 1
|
2月前
|
JavaScript 安全 Java
如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个具有动态路由和菜单功能的前后端分离应用。
本文介绍了如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个具有动态路由和菜单功能的前后端分离应用。首先,创建并配置 Spring Boot 项目,实现后端 API;然后,使用 Ant Design Pro Vue 创建前端项目,配置动态路由和菜单。通过具体案例,展示了如何快速搭建高效、易维护的项目框架。
128 62
|
19天前
|
存储 JavaScript 前端开发
基于 SpringBoot 和 Vue 开发校园点餐订餐外卖跑腿Java源码
一个非常实用的校园外卖系统,基于 SpringBoot 和 Vue 的开发。这一系统源于黑马的外卖案例项目 经过站长的进一步改进和优化,提供了更丰富的功能和更高的可用性。 这个项目的架构设计非常有趣。虽然它采用了SpringBoot和Vue的组合,但并不是一个完全分离的项目。 前端视图通过JS的方式引入了Vue和Element UI,既能利用Vue的快速开发优势,
101 13
|
27天前
|
JavaScript 安全 Java
java版药品不良反应智能监测系统源码,采用SpringBoot、Vue、MySQL技术开发
基于B/S架构,采用Java、SpringBoot、Vue、MySQL等技术自主研发的ADR智能监测系统,适用于三甲医院,支持二次开发。该系统能自动监测全院患者药物不良反应,通过移动端和PC端实时反馈,提升用药安全。系统涵盖规则管理、监测报告、系统管理三大模块,确保精准、高效地处理ADR事件。
|
2月前
|
JavaScript 安全 Java
如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个前后端分离的应用框架,实现动态路由和菜单功能
本文介绍了如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个前后端分离的应用框架,实现动态路由和菜单功能。首先,确保开发环境已安装必要的工具,然后创建并配置 Spring Boot 项目,包括添加依赖和配置 Spring Security。接着,创建后端 API 和前端项目,配置动态路由和菜单。最后,运行项目并分享实践心得,帮助开发者提高开发效率和应用的可维护性。
120 2
|
2月前
|
JavaScript Java 项目管理
Java毕设学习 基于SpringBoot + Vue 的医院管理系统 持续给大家寻找Java毕设学习项目(附源码)
基于SpringBoot + Vue的医院管理系统,涵盖医院、患者、挂号、药物、检查、病床、排班管理和数据分析等功能。开发工具为IDEA和HBuilder X,环境需配置jdk8、Node.js14、MySQL8。文末提供源码下载链接。
|
2月前
|
JavaScript NoSQL Java
CC-ADMIN后台简介一个基于 Spring Boot 2.1.3 、SpringBootMybatis plus、JWT、Shiro、Redis、Vue quasar 的前后端分离的后台管理系统
CC-ADMIN后台简介一个基于 Spring Boot 2.1.3 、SpringBootMybatis plus、JWT、Shiro、Redis、Vue quasar 的前后端分离的后台管理系统
52 0
|
3天前
|
JavaScript
vue使用iconfont图标
vue使用iconfont图标
34 1
|
14天前
|
JavaScript 关系型数据库 MySQL
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统,提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性,实现用户友好的界面,方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构,确保稳定性和多功能模块设计,涵盖管理员和用户功能模块,促进物品循环使用,降低开销,提升环保意识,助力绿色校园文化建设。
|
2月前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客!我是瑞雨溪,一名热爱前端的大一学生,专注于JavaScript与Vue,正向全栈进发。博客分享Vue学习心得、命令式与声明式编程对比、列表展示及计数器案例等。关注我,持续更新中!🎉🎉🎉
45 1
vue学习第一章