基于SSM+VUE实现毕业设计流程管理系统

简介: 基于SSM+VUE实现毕业设计流程管理系统

项目编号:BS-GX-063

一,环境介绍

语言环境:Java:  jdk1.8

数据库:Mysql: mysql5.7

应用服务器:Tomcat:  tomcat8.5.31

开发工具:IDEA或eclipse

开发技术:SSM+VUE

二,项目简介

随着现代网络技术发展,对于 毕业设计管理系统 的设计现在正处于发展的阶段,所以对的要求也是比较严格的,要从系统的功能和教师实际需求来进行对系统制定开发的发展方式,依靠网络技术的的快速发展和现代通讯技术的结合为人们带来方便,可以方便教师网上查看,还可以通过这些技术实现在线查看等过程。当今社会互联网急速发展,毕业设计管理也在国内爆炸式的发展起来。这种网络模式对长期使用互联网社会产生了深远的的影响,在这种社会环境下开发一个适用于教师都可以操作的、简单的、便捷的 毕业设计管理系统的发展前景是非常好的。

以往的毕业设计管理系统相关信息管理,都是工作人员手工统计。这种方式不但时效性低,而且需要查找和变更的时候很不方便。随着科学的进步,技术的成熟,计算机信息化也日新月异的发展,社会也已经深刻的认识,计算机功能非常的强大,计算机已经进入了人类社会发展的各个领域,并且发挥着十分重要的作用。本系统利用网络沟通、计算机信息存储管理,有着与传统的方式所无法替代的优点。比如计算检索速度特别快、可靠性特别高、存储容量特别大、保密性特别好、可保存时间特别长、成本特别低等。在工作效率上,能够得到极大地提高,延伸至服务水平也会有好的收获,有了网络, 毕业设计管理系统的各方面的管理更加科学和系统,更加规范和简便。

管理员功能:

系统中的核心教师是系统管理员,管理员登录后,通过管理员菜单来管理后台系统。主要功能有;首页、个人中心、个人信息、学生管理、教师管理、文件模板管理 、论坛管理 、系统管理、在线选题管理、开题报告管理、中期报告管理、毕业论文管理、学生提题管理、论文进度管理等功能。管理员用例如图3-7所示。

图3-7 管理员用例图

教师功能:

教师:个人中心、个人信息、文件模板管理 、在线选题管理、老师答疑管理、开题报告管理、中期报告管理、毕业论文管理、学生提题管理、论文进度管理等功能。教师用例如图3-8所示。

学生功能:

学生:个人中心、个人信息、学生提问管理、 老师答疑管理、开题报告管理、

中期报告管理、毕业论文管理、学生提题管理、论文进度管理、我的收藏等功能。学生用例如图3-8所示。

整体结构图:

三,系统展示

网站首页

网页首页电影订票系统模块如下:首页、在线选题、论坛、个人中心后台管理等功能图5-1

                 

网页前台页面效果图如图5-1所示:

网页前台在线选题效果图如图5-2所示

网页前台在线选题效果图如图5-2所示

学生在注册完个人信息后会跳转到登录界面上,输入注册的登录账号及密码后才可登录。网页前台学生注册页面如图5-3所示

                           

前台学生注册登录页面如图5-3所示

5.2  管理员功能模块

管理员输入个人的账号、密码登录系统,这时候系统的数据库就会在进行查找相关的信息,如果我们输入的账号、密码不正确,数据库就会提示出错误的信息提示,同时会提示管理员重新输入输入自己的账号、密码和验证码,直到账号密码输入成功后,会提登录成功的信息。网站管理员登录效果图如图5-4所示:

   

图5-4登录界面

5.2.1 学生信息

管理员对学生信息进行学可以进行编辑生学号、学生姓名 、密码 、性别、 年级、 班级 、身份证、 联系电话添加、删除、修改以及查看、修改密码等操作。程序成效图如下图5-5所示:

图5-5学生信息界面图

5.2.2 教师管理

管理员对教师获取教师工号 教师姓名 密码 职称 联系电话 身份证  进行添加、删除、修改以及查看等操作。程序效果图如下图5-6所示:

图5-6教师管理界面

5.2.3 系统管理

管理员通过系统管理页面查看轮播图、新闻资讯等进行上传图片进行添加、删除、修改以及查看并对整个系统进行维护等操作。程序效果图如下图5-7所示:

图5-7系统管理 界面

5.2.4 在线选题管理

管理员对在线选题获取课题题目 图片 教师工号 发布时间 审核回复 审核等信息进行添加、查看、修改以及删除等操作。程序效果图如下图5-8所示:

图5-8在线选题界面

5.2.5系统管理

管理员对系统管理进行删除、修改以及查看等操作。程序效果图如下图5-9所示:

图5-9系统管理界面

5.2.6在线选题管理

管理员对在线选题管理信息进行编辑课题题目、图片 、教师工号 、发布时间 、审核回复、 审核修改、审核、删除以及查看等操作。程序效果图如下图5-10所示:

图5-10在线选题管理界面

5.2.7中期报告管理

管理员对中期报告管理信息进行修改、审核、删除以及查看等操作。程序效果图如下图5-11所示:

图5-11中期报告管理界面

5.2.8毕业论文管理

管理员对毕业论文管理信息进行修改、审核、删除以及查看等操作。程序效果图如下图5-12所示:

图5-12毕业论文管理界面

5.2.9学生提题管理

管理员对学生提题信息进行修改、审核、删除以及查看等操作。程序效果图如下图5-13所示:

图5-13学生提题管理界面

四,核心代码展示

package com.controller;
import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.Calendar;
import java.util.Map;
import java.util.HashMap;
import java.util.Iterator;
import java.util.Date;
import java.util.List;
import javax.servlet.http.HttpServletRequest;
import com.utils.ValidatorUtils;
import org.apache.commons.lang3.StringUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import com.baomidou.mybatisplus.mapper.EntityWrapper;
import com.baomidou.mybatisplus.mapper.Wrapper;
import com.annotation.IgnoreAuth;
import com.entity.BiyelunwenEntity;
import com.entity.view.BiyelunwenView;
import com.service.BiyelunwenService;
import com.service.TokenService;
import com.utils.PageUtils;
import com.utils.R;
import com.utils.MPUtil;
import com.utils.CommonUtil;
/**
 * 毕业论文
 * 后端接口
 * @author 
 * @email 
 * @date 2020-11-02 10:24:01
 */
@RestController
@RequestMapping("/biyelunwen")
public class BiyelunwenController {
    @Autowired
    private BiyelunwenService biyelunwenService;
    /**
     * 后端列表
     */
    @RequestMapping("/page")
    public R page(@RequestParam Map<String, Object> params,BiyelunwenEntity biyelunwen, HttpServletRequest request){
    String tableName = request.getSession().getAttribute("tableName").toString();
    if(tableName.equals("xuesheng")) {
      biyelunwen.setXueshengxuehao((String)request.getSession().getAttribute("username"));
    }
    if(tableName.equals("jiaoshi")) {
      biyelunwen.setJiaoshigonghao((String)request.getSession().getAttribute("username"));
    }
        EntityWrapper<BiyelunwenEntity> ew = new EntityWrapper<BiyelunwenEntity>();
    PageUtils page = biyelunwenService.queryPage(params, MPUtil.sort(MPUtil.between(MPUtil.likeOrEq(ew, biyelunwen), params), params));
        return R.ok().put("data", page);
    }
    /**
     * 前端列表
     */
    @RequestMapping("/list")
    public R list(@RequestParam Map<String, Object> params,BiyelunwenEntity biyelunwen, HttpServletRequest request){
        EntityWrapper<BiyelunwenEntity> ew = new EntityWrapper<BiyelunwenEntity>();
    PageUtils page = biyelunwenService.queryPage(params, MPUtil.sort(MPUtil.between(MPUtil.likeOrEq(ew, biyelunwen), params), params));
        return R.ok().put("data", page);
    }
  /**
     * 列表
     */
    @RequestMapping("/lists")
    public R list( BiyelunwenEntity biyelunwen){
        EntityWrapper<BiyelunwenEntity> ew = new EntityWrapper<BiyelunwenEntity>();
        ew.allEq(MPUtil.allEQMapPre( biyelunwen, "biyelunwen")); 
        return R.ok().put("data", biyelunwenService.selectListView(ew));
    }
   /**
     * 查询
     */
    @RequestMapping("/query")
    public R query(BiyelunwenEntity biyelunwen){
        EntityWrapper< BiyelunwenEntity> ew = new EntityWrapper< BiyelunwenEntity>();
    ew.allEq(MPUtil.allEQMapPre( biyelunwen, "biyelunwen")); 
    BiyelunwenView biyelunwenView =  biyelunwenService.selectView(ew);
    return R.ok("查询毕业论文成功").put("data", biyelunwenView);
    }
    /**
     * 后端详情
     */
    @RequestMapping("/info/{id}")
    public R info(@PathVariable("id") String id){
        BiyelunwenEntity biyelunwen = biyelunwenService.selectById(id);
        return R.ok().put("data", biyelunwen);
    }
    /**
     * 前端详情
     */
    @RequestMapping("/detail/{id}")
    public R detail(@PathVariable("id") String id){
        BiyelunwenEntity biyelunwen = biyelunwenService.selectById(id);
        return R.ok().put("data", biyelunwen);
    }
    /**
     * 后端保存
     */
    @RequestMapping("/save")
    public R save(@RequestBody BiyelunwenEntity biyelunwen, HttpServletRequest request){
      biyelunwen.setId(new Date().getTime()+new Double(Math.floor(Math.random()*1000)).longValue());
      //ValidatorUtils.validateEntity(biyelunwen);
        biyelunwenService.insert(biyelunwen);
        return R.ok();
    }
    /**
     * 前端保存
     */
    @RequestMapping("/add")
    public R add(@RequestBody BiyelunwenEntity biyelunwen, HttpServletRequest request){
      biyelunwen.setId(new Date().getTime()+new Double(Math.floor(Math.random()*1000)).longValue());
      //ValidatorUtils.validateEntity(biyelunwen);
        biyelunwenService.insert(biyelunwen);
        return R.ok();
    }
    /**
     * 修改
     */
    @RequestMapping("/update")
    public R update(@RequestBody BiyelunwenEntity biyelunwen, HttpServletRequest request){
        //ValidatorUtils.validateEntity(biyelunwen);
        biyelunwenService.updateById(biyelunwen);//全部更新
        return R.ok();
    }
    /**
     * 删除
     */
    @RequestMapping("/delete")
    public R delete(@RequestBody Long[] ids){
        biyelunwenService.deleteBatchIds(Arrays.asList(ids));
        return R.ok();
    }
    /**
     * 提醒接口
     */
  @RequestMapping("/remind/{columnName}/{type}")
  public R remindCount(@PathVariable("columnName") String columnName, HttpServletRequest request, 
             @PathVariable("type") String type,@RequestParam Map<String, Object> map) {
    map.put("column", columnName);
    map.put("type", type);
    if(type.equals("2")) {
      SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
      Calendar c = Calendar.getInstance();
      Date remindStartDate = null;
      Date remindEndDate = null;
      if(map.get("remindstart")!=null && !map.get("remindstart").toString().equals("")) {
        Integer remindStart = Integer.parseInt(map.get("remindstart").toString());
        c.setTime(new Date()); 
        c.add(Calendar.DAY_OF_MONTH,remindStart);
        remindStartDate = c.getTime();
        map.put("remindstart", sdf.format(remindStartDate));
      }
      if(map.get("remindend")!=null && !map.get("remindend").toString().equals("")) {
        Integer remindEnd = Integer.parseInt(map.get("remindend").toString());
        c.setTime(new Date());
        c.add(Calendar.DAY_OF_MONTH,remindEnd);
        remindEndDate = c.getTime();
        map.put("remindend", sdf.format(remindEndDate));
      }
    }
    Wrapper<BiyelunwenEntity> wrapper = new EntityWrapper<BiyelunwenEntity>();
    if(map.get("remindstart")!=null && !map.get("remindstart").toString().equals("")) {
      wrapper.ge(columnName, map.get("remindstart"));
    }
    if(map.get("remindend")!=null && !map.get("remindend").toString().equals("")) {
      wrapper.le(columnName, map.get("remindend"));
    }
    String tableName = request.getSession().getAttribute("tableName").toString();
    if(tableName.equals("xuesheng")) {
      wrapper.eq("xueshengxuehao", (String)request.getSession().getAttribute("username"));
    }
    if(tableName.equals("jiaoshi")) {
      wrapper.eq("jiaoshigonghao", (String)request.getSession().getAttribute("username"));
    }
    int count = biyelunwenService.selectCount(wrapper);
    return R.ok().put("count", count);
  }
}
package com.controller;
import java.io.File;
import java.io.FileNotFoundException;
import java.io.IOException;
import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Calendar;
import java.util.Date;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import javax.servlet.http.HttpServletRequest;
import org.apache.commons.lang3.StringUtils;
import org.json.JSONObject;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.util.ResourceUtils;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import com.annotation.IgnoreAuth;
import com.baidu.aip.face.AipFace;
import com.baidu.aip.face.MatchRequest;
import com.baidu.aip.util.Base64Util;
import com.baomidou.mybatisplus.mapper.EntityWrapper;
import com.baomidou.mybatisplus.mapper.Wrapper;
import com.entity.ConfigEntity;
import com.service.CommonService;
import com.service.ConfigService;
import com.utils.BaiduUtil;
import com.utils.FileUtil;
import com.utils.R;
/**
 * 通用接口
 */
@RestController
public class CommonController{
  @Autowired
  private CommonService commonService;
  @Autowired
  private ConfigService configService;
  private static AipFace client = null;
  private static String BAIDU_DITU_AK = null;
  @RequestMapping("/location")
  public R location(String lng,String lat) {
    if(BAIDU_DITU_AK==null) {
      BAIDU_DITU_AK = configService.selectOne(new EntityWrapper<ConfigEntity>().eq("name", "baidu_ditu_ak")).getValue();
      if(BAIDU_DITU_AK==null) {
        return R.error("请在配置管理中正确配置baidu_ditu_ak");
      }
    }
    Map<String, String> map = BaiduUtil.getCityByLonLat(BAIDU_DITU_AK, lng, lat);
    return R.ok().put("data", map);
  }
  /**
   * 人脸比对
   * 
   * @param face1 人脸1
   * @param face2 人脸2
   * @return
   */
  @RequestMapping("/matchFace")
  public R matchFace(String face1, String face2,HttpServletRequest request) {
    if(client==null) {
      /*String AppID = configService.selectOne(new EntityWrapper<ConfigEntity>().eq("name", "AppID")).getValue();*/
      String APIKey = configService.selectOne(new EntityWrapper<ConfigEntity>().eq("name", "APIKey")).getValue();
      String SecretKey = configService.selectOne(new EntityWrapper<ConfigEntity>().eq("name", "SecretKey")).getValue();
      String token = BaiduUtil.getAuth(APIKey, SecretKey);
      if(token==null) {
        return R.error("请在配置管理中正确配置APIKey和SecretKey");
      }
      client = new AipFace(null, APIKey, SecretKey);
      client.setConnectionTimeoutInMillis(2000);
      client.setSocketTimeoutInMillis(60000);
    }
    JSONObject res = null;
    try {
      File file1 = new File(request.getSession().getServletContext().getRealPath("/upload")+"/"+face1);
      File file2 = new File(request.getSession().getServletContext().getRealPath("/upload")+"/"+face2);
      String img1 = Base64Util.encode(FileUtil.FileToByte(file1));
      String img2 = Base64Util.encode(FileUtil.FileToByte(file2));
      MatchRequest req1 = new MatchRequest(img1, "BASE64");
      MatchRequest req2 = new MatchRequest(img2, "BASE64");
      ArrayList<MatchRequest> requests = new ArrayList<MatchRequest>();
      requests.add(req1);
      requests.add(req2);
      res = client.match(requests);
      System.out.println(res.get("result"));
    } catch (FileNotFoundException e) {
      e.printStackTrace();
      return R.error("文件不存在");
    } catch (IOException e) {
      e.printStackTrace();
    } 
    return R.ok().put("data", com.alibaba.fastjson.JSONObject.parse(res.get("result").toString()));
  }
  /**
   * 获取table表中的column列表(联动接口)
   * @param table
   * @param column
   * @return
   */
  @IgnoreAuth
  @RequestMapping("/option/{tableName}/{columnName}")
  public R getOption(@PathVariable("tableName") String tableName, @PathVariable("columnName") String columnName,String level,String parent) {
    Map<String, Object> params = new HashMap<String, Object>();
    params.put("table", tableName);
    params.put("column", columnName);
    if(StringUtils.isNotBlank(level)) {
      params.put("level", level);
    }
    if(StringUtils.isNotBlank(parent)) {
      params.put("parent", parent);
    }
    List<String> data = commonService.getOption(params);
    return R.ok().put("data", data);
  }
  /**
   * 根据table中的column获取单条记录
   * @param table
   * @param column
   * @return
   */
  @IgnoreAuth
  @RequestMapping("/follow/{tableName}/{columnName}")
  public R getFollowByOption(@PathVariable("tableName") String tableName, @PathVariable("columnName") String columnName, @RequestParam String columnValue) {
    Map<String, Object> params = new HashMap<String, Object>();
    params.put("table", tableName);
    params.put("column", columnName);
    params.put("columnValue", columnValue);
    Map<String, Object> result = commonService.getFollowByOption(params);
    return R.ok().put("data", result);
  }
  /**
   * 修改table表的sfsh状态
   * @param table
   * @param map
   * @return
   */
  @RequestMapping("/sh/{tableName}")
  public R sh(@PathVariable("tableName") String tableName, @RequestBody Map<String, Object> map) {
    map.put("table", tableName);
    commonService.sh(map);
    return R.ok();
  }
  /**
   * 获取需要提醒的记录数
   * @param tableName
   * @param columnName
   * @param type 1:数字 2:日期
   * @param map
   * @return
   */
  @IgnoreAuth
  @RequestMapping("/remind/{tableName}/{columnName}/{type}")
  public R remindCount(@PathVariable("tableName") String tableName, @PathVariable("columnName") String columnName, 
             @PathVariable("type") String type,@RequestParam Map<String, Object> map) {
    map.put("table", tableName);
    map.put("column", columnName);
    map.put("type", type);
    if(type.equals("2")) {
      SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
      Calendar c = Calendar.getInstance();
      Date remindStartDate = null;
      Date remindEndDate = null;
      if(map.get("remindstart")!=null) {
        Integer remindStart = Integer.parseInt(map.get("remindstart").toString());
        c.setTime(new Date()); 
        c.add(Calendar.DAY_OF_MONTH,remindStart);
        remindStartDate = c.getTime();
        map.put("remindstart", sdf.format(remindStartDate));
      }
      if(map.get("remindend")!=null) {
        Integer remindEnd = Integer.parseInt(map.get("remindend").toString());
        c.setTime(new Date());
        c.add(Calendar.DAY_OF_MONTH,remindEnd);
        remindEndDate = c.getTime();
        map.put("remindend", sdf.format(remindEndDate));
      }
    }
    int count = commonService.remindCount(map);
    return R.ok().put("count", count);
  }
  /**
   * 单列求和
   */
  @IgnoreAuth
  @RequestMapping("/cal/{tableName}/{columnName}")
  public R cal(@PathVariable("tableName") String tableName, @PathVariable("columnName") String columnName) {
    Map<String, Object> params = new HashMap<String, Object>();
    params.put("table", tableName);
    params.put("column", columnName);
    Map<String, Object> result = commonService.selectCal(params);
    return R.ok().put("data", result);
  }
  /**
   * 分组统计
   */
  @IgnoreAuth
  @RequestMapping("/group/{tableName}/{columnName}")
  public R group(@PathVariable("tableName") String tableName, @PathVariable("columnName") String columnName) {
    Map<String, Object> params = new HashMap<String, Object>();
    params.put("table", tableName);
    params.put("column", columnName);
    List<Map<String, Object>> result = commonService.selectGroup(params);
    return R.ok().put("data", result);
  }
  /**
   * (按值统计)
   */
  @IgnoreAuth
  @RequestMapping("/value/{tableName}/{xColumnName}/{yColumnName}")
  public R value(@PathVariable("tableName") String tableName, @PathVariable("yColumnName") String yColumnName, @PathVariable("xColumnName") String xColumnName) {
    Map<String, Object> params = new HashMap<String, Object>();
    params.put("table", tableName);
    params.put("xColumn", xColumnName);
    params.put("yColumn", yColumnName);
    List<Map<String, Object>> result = commonService.selectValue(params);
    return R.ok().put("data", result);
  }
}

五,相关作品展示

基于Java开发、Python开发、PHP开发、C#开发等相关语言开发的实战项目

基于Nodejs、Vue等前端技术开发的前端实战项目

基于微信小程序和安卓APP应用开发的相关作品

基于51单片机等嵌入式物联网开发应用

基于各类算法实现的AI智能应用

基于大数据实现的各类数据管理和推荐系统

相关文章
|
20天前
|
数据采集 监控 JavaScript
在 Vue 项目中使用预渲染技术
【10月更文挑战第23天】在 Vue 项目中使用预渲染技术是提升 SEO 效果的有效途径之一。通过选择合适的预渲染工具,正确配置和运行预渲染操作,结合其他 SEO 策略,可以实现更好的搜索引擎优化效果。同时,需要不断地监控和优化预渲染效果,以适应不断变化的搜索引擎环境和用户需求。
|
7天前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking?
通过以上针对 Webpack 或 Rollup 的配置方法,就可以在 Vue 项目中有效地启用 Tree Shaking,从而优化项目的打包体积,提高项目的性能和加载速度。在实际配置过程中,需要根据项目的具体情况和需求,对配置进行适当的调整和优化。
|
7天前
|
存储 缓存 JavaScript
在 Vue 中使用 computed 和 watch 时,性能问题探讨
本文探讨了在 Vue.js 中使用 computed 计算属性和 watch 监听器时可能遇到的性能问题,并提供了优化建议,帮助开发者提高应用性能。
|
7天前
|
存储 缓存 JavaScript
如何在大型 Vue 应用中有效地管理计算属性和侦听器
在大型 Vue 应用中,合理管理计算属性和侦听器是优化性能和维护性的关键。本文介绍了如何通过模块化、状态管理和避免冗余计算等方法,有效提升应用的响应性和可维护性。
|
7天前
|
存储 缓存 JavaScript
Vue 中 computed 和 watch 的差异
Vue 中的 `computed` 和 `watch` 都用于处理数据变化,但使用场景不同。`computed` 用于计算属性,依赖于其他数据自动更新;`watch` 用于监听数据变化,执行异步或复杂操作。
|
6天前
|
JavaScript 前端开发 UED
vue学习第二章
欢迎来到我的博客!我是一名自学了2年半前端的大一学生,熟悉JavaScript与Vue,目前正在向全栈方向发展。如果你从我的博客中有所收获,欢迎关注我,我将持续更新更多优质文章。你的支持是我最大的动力!🎉🎉🎉
|
8天前
|
存储 JavaScript 开发者
Vue 组件间通信的最佳实践
本文总结了 Vue.js 中组件间通信的多种方法,包括 props、事件、Vuex 状态管理等,帮助开发者选择最适合项目需求的通信方式,提高开发效率和代码可维护性。
|
6天前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客!我是瑞雨溪,一名热爱JavaScript和Vue的大一学生。自学前端2年半,熟悉JavaScript与Vue,正向全栈方向发展。博客内容涵盖Vue基础、列表展示及计数器案例等,希望能对你有所帮助。关注我,持续更新中!🎉🎉🎉
|
8天前
|
存储 JavaScript
Vue 组件间如何通信
Vue组件间通信是指在Vue应用中,不同组件之间传递数据和事件的方法。常用的方式有:props、自定义事件、$emit、$attrs、$refs、provide/inject、Vuex等。掌握这些方法可以实现父子组件、兄弟组件及跨级组件间的高效通信。
|
13天前
|
JavaScript
Vue基础知识总结 4:vue组件化开发
Vue基础知识总结 4:vue组件化开发