java+vue+SpringBoo机器人门户网站(程序+数据库+报告+部署教程+答辩指导)

源代码+数据库+LW文档(1万字以上)+开题报告+答辩稿ppt+部署教程+代码讲解+代码时间修改工具

技术实现

  1. 开发语言:后端:Java 前端:vue
  2. 框架:springboot
  3. 数据库:mysql

开发工具

JDK版本:JDK1.8

数据库:mysql 数据库工具:Navicat

开发软件:idea

主要角色及功能介绍

本系统采用自上往下的方法开发,基本定位如下功能:

本课题要求实现一套协作机器人门户网站,系统主要包括管理员模块和用户的功能模块;

(1)管理员用例图如下所示:

图2-1管理员用例图

(2)用户用例图如下所示:

图2-2用户用例图

系统结构图可以把杂乱无章的模块按照设计者的思维方式进行调整排序,可以让设计者在之后的添加,修改程序内容的过程中有一个很明显的思维方向。同时结构图还可以让设计者以外的其他人更直观的看出整个系统的设计理论和设计过程。让系统的设计变的更直观。该系统的功能架构图如图3-1所示:

图3-1 协作机器人门户网站功能结构图

数据库

从系统运行完整的角度出发,设置相应的实体,明确各实体之间的联系。下面列举整个系统中涉及核心功能的实体:

1、用户信息E-R图

图3-2用户信息E-R图

2、资讯信息E-R图

图3-3 资讯信息E-R图

3、问题反馈E-R图

图3-4问题反馈E-R图

4、产品展示E-R图

图3-5 产品展示E-R图

5、交流中心E-R图

图3-6 交流中心E-R图

6、协作机器人门户网站总体E-R图

图3-6 协作机器人门户网站总体E-R图
系统功能实现及截图

4.1登录模块设计

这个功能模块用来让工作人员进行后端登录。管理人员通过网站。在输入自己的用户名和密码、角色进行登录,登录后管理人员就可以对后台的信息相关的操作。

首先,设计后端管理的登陆页面。对页面的各个板块进行详细的设计,规划它们的字体大小,背景颜色,字体颜色和板块大小等。还要加上图片,让页面被设计的更加美观。以便让以后需要登陆的管理员可以直观的使用。

4.2 前台用户功能模块

当游客打开系统的网址后,首先看到的就是首页界面。在这里,游客能够看到协作机器人门户网站的导航条显示首页、产品展示、资讯信息、问题反馈。系统首页界面如图4-1所示:

图4-1系统首页界面

在注册流程中,用户在Vue前端填写必要信息(如用户名、密码等)并提交。前端将这些信息通过HTTP请求发送到Java后端。后端处理这些信息,检查用户名是否唯一,并将新用户数据存入MySQL数据库。完成后,后端向前端发送注册成功的确认,前端随后通知用户完成注册。这个过程实现了新用户的数据收集、验证和存储。如图4-2所示:

图4-2用户注册界面

用户注册实现关键代码如下:

java 复制代码
/**
    * 注册
    */
@IgnoreAuth
   @RequestMapping("/register")
   public R register(@RequestBody YonghuEntity yonghu){
       //ValidatorUtils.validateEntity(yonghu);
       YonghuEntity u = yonghuService.selectOne(new EntityWrapper<YonghuEntity>().eq("yonghuzhanghao", yonghu.getYonghuzhanghao()));
   if(u!=null) {
      return R.error("注册用户已存在");
   }
   Long uId = new Date().getTime();
   yonghu.setId(uId);
       yonghuService.insert(yonghu);
       return R.ok();
   }

在登录流程中,用户首先在Vue前端界面输入用户名和密码。这些信息通过HTTP请求发送到Java后端。后端接收请求,通过与MySQL数据库交互验证用户凭证。如果认证成功,后端会返回给前端,允许用户访问系统。这个过程涵盖了从用户输入到系统验证和响应的全过程。如图4-3所示:

图4-3 用户登录界面

用户登陆关键代码如下:

java 复制代码
/**
 * 登录
 */
@IgnoreAuth
@RequestMapping(value = "/login")
public R login(String username, String password, String captcha, HttpServletRequest request) {
   YonghuEntity u = yonghuService.selectOne(new EntityWrapper<YonghuEntity>().eq("yonghuzhanghao", username));
   if(u==null || !u.getMima().equals(password)) {
      return R.error("账号或密码不正确");
   }
   
   String token = tokenService.generateToken(u.getId(), username,"yonghu",  "用户" );
   return R.ok().put("token", token);
}

用户点击产品详情,可以查看产品标题、产品文案、用户账号、用户姓名、产品类别、发布时间、点赞次数、点踩次数、收藏数等信息;还可以进行收藏或者评论等操作;如图4-4所示:

图4-4产品详情页面

产品详情关键代码如下:

java 复制代码
 /**
    * 前端详情
    */
@IgnoreAuth
   @RequestMapping("/detail/{id}")
   public R detail(@PathVariable("id") Long id){
       chanpingleibieEntity chanpingleibie = chanpingleibieService.selectById(id);
       return R.ok().put("data", chanpingleibie);
   }

用户点击资讯信息,在公告资讯页面的输入栏填写标题,进行搜索,然后查看标题、分类名称、发布人、点击次数、收藏数、图等信息,还可以可以点击收藏或者点赞等操作;如图4-5所示:

图4-5资讯信息页面

资讯信息关键代码如下:

java 复制代码
/**
    * 前端列表
    */
@IgnoreAuth
   @RequestMapping("/list")
   public R list(@RequestParam Map<String, Object> params,NewsEntity news, 
   HttpServletRequest request){
       EntityWrapper<NewsEntity> ew = new EntityWrapper<NewsEntity>();

   PageUtils page = newsService.queryPage(params, MPUtil.sort(MPUtil.between(MPUtil.likeOrEq(ew, news), params), params));
       return R.ok().put("data", page);
   }

用户点击个人中心,在个人中心页面可以更新个人详细信息,还可以对修改密码、我的收藏、修改姓名进行详细操作,如图4-6所示:

图4-6个人中心界面

个人中心关键代码如下:

java 复制代码
/**
    * 前端详情
    */
@IgnoreAuth
   @RequestMapping("/detail/{id}")
   public R detail(@PathVariable("id") Long id){
       YonghuEntity yonghu = yonghuService.selectById(id);
       return R.ok().put("data", yonghu);
   }

4.3后台管理员功能模块

管理员通过登录页面填账号和密码,完成后进行登录,如图4-7所示。

图4-7管理员登录页面

管理员登陆关键代码:

java 复制代码
/**
 * 登录
 */
@IgnoreAuth
@RequestMapping(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);
}

管理员登录进入协作机器人门户网站后台可以查看系统首页、用户管理、产品类别、产品展示管理、系统管理、问题反馈、用户信息等信息,如图4-8所示。

图4-8管理员功能界面图

问题反馈功能在视图层(view层)进行交互,比如点击"新增"按钮或填写问题反馈表单。这些反馈信息动作被视图层捕获并作为请求发送给相应的控制器层(control1er层)。控制器接收到这些请求后,调用服务层(service层)以执行相关的业务逻辑,例如验证输入数据的有效性和与数据库的交互。服务层处理完这些逻辑后,进一步与数据访问对象层(DAO层)交互,后者负责具体的数据操作如搜索、新增、更新或删除问题反馈,并将操作结果返回给控制器。最终,控制器根据这些结果更新视图层,以便问题反馈功能可以看到最新的信息或相应的操作反馈。问题反馈页面的输入栏中输入用户名进行搜索,可以查看到用户发送的反馈详细信息,并根据需要进行修改、回复或者删除等操作;如图4-9所示。

图4-9问题反馈界面图

问题反馈关键代码如下:

java 复制代码
@RequestMapping("/page")
  public R page(@RequestParam Map<String, Object> params,MessagesEntity messages,
HttpServletRequest request){
      if(!request.getSession().getAttribute("role").toString().equals("管理员")) {
          messages.setUserid((Long)request.getSession().getAttribute("userId"));
      }
      EntityWrapper<MessagesEntity> ew = new EntityWrapper<MessagesEntity>();

PageUtils page = messagesService.queryPage(params, MPUtil.sort(MPUtil.between(MPUtil.likeOrEq(ew, messages), params), params));

      return R.ok().put("data", page);
  }

产品类别功能在视图层(view层)进行交互,比如点击"新增"按钮或填写产品类别表单。这些产品类别动作被视图层捕获并作为请求发送给相应的控制器层(control1er层)。控制器接收到这些请求后,调用服务层(service层)以执行相关的业务逻辑,例如验证输入数据的有效性和与数据库的交互。服务层处理完这些逻辑后,进一步与数据访问对象层(DAO层)交互,后者负责具体的数据操作如搜索、新增、更新或删除产品类别,并将操作结果返回给控制器。最终,控制器根据这些结果更新视图层,以便产品类别功能可以看到最新的信息或相应的操作反馈。在产品类别页面的输入栏中输入产品类别进行搜索,可以查看到产品类别详细信息,并根据需要进行修改或者删除等操作;如图4-10所示。

图4-10产品类别界面图

产品类别关键代码如下:

java 复制代码
/**
    * 列表
    */
   @RequestMapping("/lists")
   public R list( chanpingleibieEntity chanpingleibie){
       EntityWrapper<chanpingleibieEntity> ew = new EntityWrapper<chanpingleibieEntity>();
       ew.allEq(MPUtil.allEQMapPre( chanpingleibie, "chanpingleibie")); 
       return R.ok().put("data", chanpingleibieService.selectListView(ew));
   }

管理员点击产品展示管理;在产品展示页面对产品名称、产品类别、产品标题、发布人、点击次数、评论数、收藏等信息,进行搜索、新增、修改或删除产品等操作;如图4-11所示。

图4-11资讯信息界面图

资讯信息关键代码如下:

java 复制代码
@RequestMapping("/page")
  public R page(@RequestParam Map<String, Object> params,NewsEntity news,
HttpServletRequest request){
      EntityWrapper<NewsEntity> ew = new EntityWrapper<NewsEntity>();

PageUtils page = newsService.queryPage(params, MPUtil.sort(MPUtil.between(MPUtil.likeOrEq(ew, news), params), params));

      return R.ok().put("data", page);
  }

管理员点击系统管理;在系统管理页面对资讯信息、资讯分类、轮播图管理等信息,进行搜索、新增或删除系统信息等操作;如图4-12所示。

图4-12系统管理界面图

系统管理关键代码如下:

java 复制代码
/**
    * 列表
    */
   @RequestMapping("/page")
   public R page(@RequestParam Map<String, Object> params,ConfigEntity config){
       EntityWrapper<ConfigEntity> ew = new EntityWrapper<ConfigEntity>();
       PageUtils page = configService.queryPage(params, MPUtil.sort(MPUtil.between(MPUtil.likeOrEq(ew, config), params), params));
       return R.ok().put("data", page);