基于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智能应用

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

相关文章
|
1月前
|
JavaScript API 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
|
7天前
|
JavaScript 关系型数据库 MySQL
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统,提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性,实现用户友好的界面,方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构,确保稳定性和多功能模块设计,涵盖管理员和用户功能模块,促进物品循环使用,降低开销,提升环保意识,助力绿色校园文化建设。
|
1月前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客!我是瑞雨溪,一名热爱前端的大一学生,专注于JavaScript与Vue,正向全栈进发。博客分享Vue学习心得、命令式与声明式编程对比、列表展示及计数器案例等。关注我,持续更新中!🎉🎉🎉
41 1
vue学习第一章
|
1月前
|
JavaScript 前端开发 索引
vue学习第三章
欢迎来到瑞雨溪的博客,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中的v-bind指令,包括基本使用、动态绑定class及style等,希望能为你的前端学习之路提供帮助。持续关注,更多精彩内容即将呈现!🎉🎉🎉
30 1
|
1月前
|
缓存 JavaScript 前端开发
vue学习第四章
欢迎来到我的博客!我是瑞雨溪,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中计算属性的基本与复杂使用、setter/getter、与methods的对比及与侦听器的总结。如果你觉得有用,请关注我,将持续更新更多优质内容!🎉🎉🎉
38 1
vue学习第四章
|
1月前
|
JavaScript 前端开发 算法
vue学习第7章(循环)
欢迎来到瑞雨溪的博客,一名热爱JavaScript和Vue的大一学生。本文介绍了Vue中的v-for指令,包括遍历数组和对象、使用key以及数组的响应式方法等内容,并附有综合练习实例。关注我,将持续更新更多优质文章!🎉🎉🎉
25 1
vue学习第7章(循环)
|
1月前
|
JavaScript 前端开发
vue学习第九章(v-model)
欢迎来到我的博客,我是瑞雨溪,一名热爱JavaScript与Vue的大一学生,自学前端2年半,正向全栈进发。此篇介绍v-model在不同表单元素中的应用及修饰符的使用,希望能对你有所帮助。关注我,持续更新中!🎉🎉🎉
30 1
vue学习第九章(v-model)
|
1月前
|
JavaScript 前端开发 开发者
vue学习第十章(组件开发)
欢迎来到瑞雨溪的博客,一名热爱JavaScript与Vue的大一学生。本文深入讲解Vue组件的基本使用、全局与局部组件、父子组件通信及数据传递等内容,适合前端开发者学习参考。持续更新中,期待您的关注!🎉🎉🎉
44 1
vue学习第十章(组件开发)
|
1月前
|
JavaScript 前端开发
vue学习第十一章(组件开发2)
欢迎来到我的博客,我是瑞雨溪,一名自学前端两年半的大一学生,专注于JavaScript与Vue。本文介绍Vue中的插槽(slot)使用方法,包括基本插槽、具名插槽及作用域插槽,帮助你在组件开发中实现内容的灵活定制。如果你觉得有帮助,请关注我,持续更新中!🎉🎉🎉
23 1
vue学习第十一章(组件开发2)
|
1月前
|
监控 JavaScript 前端开发
vue学习第十二章(生命周期)
欢迎来到我的博客,我是瑞雨溪,一名热爱JavaScript和Vue的大一学生。本文深入探讨了Vue实例的生命周期,从初始化到销毁各阶段的关键钩子函数及其应用场景,帮助你更好地理解Vue的工作原理。如果你觉得有帮助,欢迎关注我,将持续分享更多优质内容!🎉🎉🎉
29 1
vue学习第十二章(生命周期)