AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

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

2023-12-23 55
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 毕业设计管理系统|基于SSM+VUE实现毕业设计管理系统

项目编号：BS-GX-063

一，环境介绍

语言环境：Java:  jdk1.8

数据库：Mysql: mysql5.7

应用服务器：Tomcat:  tomcat8.5.31

开发工具：IDEA或eclipse

开发技术：SSM+VUE  前后端分离开发模式

二，项目简介

21世纪的今天，随着社会的不断发展与进步，人们对于信息科学化的认识，已由低层次向高层次发展，由原来的感性认识向理性认识提高，管理工作的重要性已逐渐被人们所认识，科学化的管理，使信息存储达到准确、快速、完善，并能提高工作管理效率，促进其发展。

论文主要是对毕业设计管理系统,进行了介绍，包括研究的现状，还有涉及的开发背景，然后还对系统的设计目标进行了论述，还有系统的需求，以及整个的设计方案，对系统的设计以及实现，也都论述的比较细致，最后对毕业设计管理系统 进行了一些具体测试。

本文以Java为开发技术，实现了一个毕业设计管理系统 。 毕业设计管理系统的主要实现功能包括：管理员：首页、个人中心、个人信息、学生管理、教师管理、文件模板管理 、论坛管理 、系统管理、在线选题管理、开题报告管理、中期报告管理、毕业论文管理等等。，教师管理：个人中心、个人信息、文件模板管理 、在线选题管理、老师答疑管理、开题报告管理、中期报告管理、毕业论文管理、学生提题管理、论文进度管理等等。学生管理：个人中心、个人信息、学生提问管理、 、老师答疑管理、开题报告管理、中期报告管理、毕业论文管理、学生提题管理、论文进度管理、我的收藏管理等等功能。通过这些功能模块的设计，基本上实现了整个毕业设计管理系统的过程。

具体在系统设计上，采用了B/S的结构，同时，也使用Java技术在动态页面上进行了设计，后台上采用Mysql数据库，是一个非常优秀的 毕业设计管理系统 。

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

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

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

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

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

系统整体功能架构图如下图4所示。

三，系统展示

3.1 前台功能模块

网站首页

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

               

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

学生注册

学生登陆

3.1 后台管理模块

管理员登陆

学生信息管理：管理员对学生信息进行学可以进行编辑生学号、学生姓名 、密码 、性别、 年级、 班级 、身份证、 联系电话添加、删除、修改以及查看、修改密码等操作。

教师管理：管理员对教师获取教师工号 教师姓名 密码 职称 联系电话 身份证  进行添加、删除、修改以及查看等操作。

系统管理：管理员通过系统管理页面查看轮播图、新闻资讯等进行上传图片进行添加、删除、修改以及查看并对整个系统进行维护等操作

在线选题管理：管理员对在线选题获取课题题目 图片 教师工号 发布时间 审核回复 审核等信息进行添加、查看、修改以及删除等操作。

中期报告管理：管理员对中期报告管理信息进行修改、审核、删除以及查看等操作

毕业论文管理：管理员对毕业论文管理信息进行修改、审核、删除以及查看等操作

学生提题管理：管理员对学生提题信息进行修改、审核、删除以及查看等操作。

文件模板管理：教师对系统文件模板管理进行添加、查看、修改以及删除等操作查看等操作。

四，核心代码展示

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.XueshengtitiEntity;
import com.entity.view.XueshengtitiView;
import com.service.XueshengtitiService;
import com.service.TokenService;
import com.utils.PageUtils;
import com.utils.R;
import com.utils.MPUtil;
import com.utils.CommonUtil;
/**
 * 学生提题
 * 后端接口
 * @author 
 * @email 
 * @date 2023-04-02 10:24:02
 */
@RestController
@RequestMapping("/xueshengtiti")
public class XueshengtitiController {
    @Autowired
    private XueshengtitiService xueshengtitiService;
    /**
     * 后端列表
     */
    @RequestMapping("/page")
    public R page(@RequestParam Map<String, Object> params,XueshengtitiEntity xueshengtiti, HttpServletRequest request){
    String tableName = request.getSession().getAttribute("tableName").toString();
    if(tableName.equals("xuesheng")) {
      xueshengtiti.setXueshengxuehao((String)request.getSession().getAttribute("username"));
    }
    if(tableName.equals("jiaoshi")) {
      xueshengtiti.setJiaoshigonghao((String)request.getSession().getAttribute("username"));
    }
        EntityWrapper<XueshengtitiEntity> ew = new EntityWrapper<XueshengtitiEntity>();
    PageUtils page = xueshengtitiService.queryPage(params, MPUtil.sort(MPUtil.between(MPUtil.likeOrEq(ew, xueshengtiti), params), params));
        return R.ok().put("data", page);
    }
    /**
     * 前端列表
     */
    @RequestMapping("/list")
    public R list(@RequestParam Map<String, Object> params,XueshengtitiEntity xueshengtiti, HttpServletRequest request){
        EntityWrapper<XueshengtitiEntity> ew = new EntityWrapper<XueshengtitiEntity>();
    PageUtils page = xueshengtitiService.queryPage(params, MPUtil.sort(MPUtil.between(MPUtil.likeOrEq(ew, xueshengtiti), params), params));
        return R.ok().put("data", page);
    }
  /**
     * 列表
     */
    @RequestMapping("/lists")
    public R list( XueshengtitiEntity xueshengtiti){
        EntityWrapper<XueshengtitiEntity> ew = new EntityWrapper<XueshengtitiEntity>();
        ew.allEq(MPUtil.allEQMapPre( xueshengtiti, "xueshengtiti")); 
        return R.ok().put("data", xueshengtitiService.selectListView(ew));
    }
   /**
     * 查询
     */
    @RequestMapping("/query")
    public R query(XueshengtitiEntity xueshengtiti){
        EntityWrapper< XueshengtitiEntity> ew = new EntityWrapper< XueshengtitiEntity>();
    ew.allEq(MPUtil.allEQMapPre( xueshengtiti, "xueshengtiti")); 
    XueshengtitiView xueshengtitiView =  xueshengtitiService.selectView(ew);
    return R.ok("查询学生提题成功").put("data", xueshengtitiView);
    }
    /**
     * 后端详情
     */
    @RequestMapping("/info/{id}")
    public R info(@PathVariable("id") String id){
        XueshengtitiEntity xueshengtiti = xueshengtitiService.selectById(id);
        return R.ok().put("data", xueshengtiti);
    }
    /**
     * 前端详情
     */
    @RequestMapping("/detail/{id}")
    public R detail(@PathVariable("id") String id){
        XueshengtitiEntity xueshengtiti = xueshengtitiService.selectById(id);
        return R.ok().put("data", xueshengtiti);
    }
    /**
     * 后端保存
     */
    @RequestMapping("/save")
    public R save(@RequestBody XueshengtitiEntity xueshengtiti, HttpServletRequest request){
      xueshengtiti.setId(new Date().getTime()+new Double(Math.floor(Math.random()*1000)).longValue());
      //ValidatorUtils.validateEntity(xueshengtiti);
        xueshengtitiService.insert(xueshengtiti);
        return R.ok();
    }
    /**
     * 前端保存
     */
    @RequestMapping("/add")
    public R add(@RequestBody XueshengtitiEntity xueshengtiti, HttpServletRequest request){
      xueshengtiti.setId(new Date().getTime()+new Double(Math.floor(Math.random()*1000)).longValue());
      //ValidatorUtils.validateEntity(xueshengtiti);
        xueshengtitiService.insert(xueshengtiti);
        return R.ok();
    }
    /**
     * 修改
     */
    @RequestMapping("/update")
    public R update(@RequestBody XueshengtitiEntity xueshengtiti, HttpServletRequest request){
        //ValidatorUtils.validateEntity(xueshengtiti);
        xueshengtitiService.updateById(xueshengtiti);//全部更新
        return R.ok();
    }
    /**
     * 删除
     */
    @RequestMapping("/delete")
    public R delete(@RequestBody Long[] ids){
        xueshengtitiService.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<XueshengtitiEntity> wrapper = new EntityWrapper<XueshengtitiEntity>();
    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 = xueshengtitiService.selectCount(wrapper);
    return R.ok().put("count", count);
  }
}
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.ZhongqibaogaoEntity;
import com.entity.view.ZhongqibaogaoView;
import com.service.ZhongqibaogaoService;
import com.service.TokenService;
import com.utils.PageUtils;
import com.utils.R;
import com.utils.MPUtil;
import com.utils.CommonUtil;
/**
 * 中期报告
 * 后端接口
 * @author 
 * @email 
 * @date 2023-04-02 10:24:01
 */
@RestController
@RequestMapping("/zhongqibaogao")
public class ZhongqibaogaoController {
    @Autowired
    private ZhongqibaogaoService zhongqibaogaoService;
    /**
     * 后端列表
     */
    @RequestMapping("/page")
    public R page(@RequestParam Map<String, Object> params,ZhongqibaogaoEntity zhongqibaogao, HttpServletRequest request){
    String tableName = request.getSession().getAttribute("tableName").toString();
    if(tableName.equals("xuesheng")) {
      zhongqibaogao.setXueshengxuehao((String)request.getSession().getAttribute("username"));
    }
    if(tableName.equals("jiaoshi")) {
      zhongqibaogao.setJiaoshigonghao((String)request.getSession().getAttribute("username"));
    }
        EntityWrapper<ZhongqibaogaoEntity> ew = new EntityWrapper<ZhongqibaogaoEntity>();
    PageUtils page = zhongqibaogaoService.queryPage(params, MPUtil.sort(MPUtil.between(MPUtil.likeOrEq(ew, zhongqibaogao), params), params));
        return R.ok().put("data", page);
    }
    /**
     * 前端列表
     */
    @RequestMapping("/list")
    public R list(@RequestParam Map<String, Object> params,ZhongqibaogaoEntity zhongqibaogao, HttpServletRequest request){
        EntityWrapper<ZhongqibaogaoEntity> ew = new EntityWrapper<ZhongqibaogaoEntity>();
    PageUtils page = zhongqibaogaoService.queryPage(params, MPUtil.sort(MPUtil.between(MPUtil.likeOrEq(ew, zhongqibaogao), params), params));
        return R.ok().put("data", page);
    }
  /**
     * 列表
     */
    @RequestMapping("/lists")
    public R list( ZhongqibaogaoEntity zhongqibaogao){
        EntityWrapper<ZhongqibaogaoEntity> ew = new EntityWrapper<ZhongqibaogaoEntity>();
        ew.allEq(MPUtil.allEQMapPre( zhongqibaogao, "zhongqibaogao")); 
        return R.ok().put("data", zhongqibaogaoService.selectListView(ew));
    }
   /**
     * 查询
     */
    @RequestMapping("/query")
    public R query(ZhongqibaogaoEntity zhongqibaogao){
        EntityWrapper< ZhongqibaogaoEntity> ew = new EntityWrapper< ZhongqibaogaoEntity>();
    ew.allEq(MPUtil.allEQMapPre( zhongqibaogao, "zhongqibaogao")); 
    ZhongqibaogaoView zhongqibaogaoView =  zhongqibaogaoService.selectView(ew);
    return R.ok("查询中期报告成功").put("data", zhongqibaogaoView);
    }
    /**
     * 后端详情
     */
    @RequestMapping("/info/{id}")
    public R info(@PathVariable("id") String id){
        ZhongqibaogaoEntity zhongqibaogao = zhongqibaogaoService.selectById(id);
        return R.ok().put("data", zhongqibaogao);
    }
    /**
     * 前端详情
     */
    @RequestMapping("/detail/{id}")
    public R detail(@PathVariable("id") String id){
        ZhongqibaogaoEntity zhongqibaogao = zhongqibaogaoService.selectById(id);
        return R.ok().put("data", zhongqibaogao);
    }
    /**
     * 后端保存
     */
    @RequestMapping("/save")
    public R save(@RequestBody ZhongqibaogaoEntity zhongqibaogao, HttpServletRequest request){
      zhongqibaogao.setId(new Date().getTime()+new Double(Math.floor(Math.random()*1000)).longValue());
      //ValidatorUtils.validateEntity(zhongqibaogao);
        zhongqibaogaoService.insert(zhongqibaogao);
        return R.ok();
    }
    /**
     * 前端保存
     */
    @RequestMapping("/add")
    public R add(@RequestBody ZhongqibaogaoEntity zhongqibaogao, HttpServletRequest request){
      zhongqibaogao.setId(new Date().getTime()+new Double(Math.floor(Math.random()*1000)).longValue());
      //ValidatorUtils.validateEntity(zhongqibaogao);
        zhongqibaogaoService.insert(zhongqibaogao);
        return R.ok();
    }
    /**
     * 修改
     */
    @RequestMapping("/update")
    public R update(@RequestBody ZhongqibaogaoEntity zhongqibaogao, HttpServletRequest request){
        //ValidatorUtils.validateEntity(zhongqibaogao);
        zhongqibaogaoService.updateById(zhongqibaogao);//全部更新
        return R.ok();
    }
    /**
     * 删除
     */
    @RequestMapping("/delete")
    public R delete(@RequestBody Long[] ids){
        zhongqibaogaoService.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<ZhongqibaogaoEntity> wrapper = new EntityWrapper<ZhongqibaogaoEntity>();
    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 = zhongqibaogaoService.selectCount(wrapper);
    return R.ok().put("count", count);
  }
}

五，项目总结

数据库的表信息属于设计的一部分，下面介绍数据库中的各个表的详细信息。

表 guanliyuanxinxi表

列名

数据类型

长度

约束

id

int

11

PRIMARY KEY

username

varchar

50

DEFAULT NULL

pwd

varchar

50

DEFAULT NULL

cx

varchar

50

DEFAULT NULL

表3 xuesheng表

列名

数据类型

长度

约束

id

int

10

PRIMARY KEY

xueshengxuehao

int

50

DEFAULT NULL

xueshengxingming

varchar

50

DEFAULT NULL

xingbie

varchar

50

DEFAULT NULL

nianji

varchar

50

DEFAULT NULL

banji

varchar

50

DEFAULT NULL

shenfenzheng

varchar

50

DEFAULT NULL

lianxidianhua

varchar

50

DEFAULT NULL

表5 jiaoshi数据表

列名

数据类型

长度

约束

id

int

11

PRIMARY KEY

jiaoshigonghao

varchar

50

DEFAULT NULL

jiaoshixingming

varchar

50

DEFAULT NULL

mima

varchar

50

DEFAULT NULL

zhicheng

varchar

50

DEFAULT NULL

lianxidianhua

int

10

DEFAULT NULL

shenfenzheng

int

500

DEFAULT NULL

表6`zaixianxuanti数据表

列名

数据类型

长度

约束

id

int

11

PRIMARY KEY

ketitimu

varchar

10

DEFAULT NULL

tupian

varchar

500

DEFAULT NULL

jianjie

varchar

20

DEFAULT NULL

jiaoshigonghao

varchar

4

DEFAULT NULL

fabushijian

varchar

20

DEFAULT NULL

sfsh

varchar

20

DEFAULT NULL

shhf

varchar

20

DEFAULT NULL

表6`xueshengtiwen数据表

列名

数据类型

长度

约束

id

int

11

PRIMARY KEY

woyaotiwen

varchar

10

DEFAULT NULL

xueshengxuehao

varchar

500

DEFAULT NULL

xueshengxingming

varchar

20

DEFAULT NULL

jiaoshigonghao

varchar

4

DEFAULT NULL

jiaoshixingming

varchar

20

DEFAULT NULL

tiwenshijian

varchar

20

DEFAULT NULL

  表6`laoshidayi数据表

列名

数据类型

长度

约束

id

int

11

PRIMARY KEY

laoshidayi

varchar

10

DEFAULT NULL

xueshengxuehao

varchar

500

DEFAULT NULL

xueshengxingming

varchar

20

DEFAULT NULL

jiaoshigonghao

varchar

4

DEFAULT NULL

jiaoshixingming

varchar

20

DEFAULT NULL

dayishijian

varchar

20

DEFAULT NULL

 

文章标签：
数据库
Java
测试技术
数据安全/隐私保护
存储
关键词：
VUE.js管理系统
ssm vue
ssm管理系统
管理系统ssm
ssm毕业设计
编程指南针
目录
相关文章
我是快乐的嘟嘟
|
13天前
|
数据采集 监控 JavaScript
在 Vue 项目中使用预渲染技术
【10月更文挑战第23天】在 Vue 项目中使用预渲染技术是提升 SEO 效果的有效途径之一。通过选择合适的预渲染工具，正确配置和运行预渲染操作，结合其他 SEO 策略，可以实现更好的搜索引擎优化效果。同时，需要不断地监控和优化预渲染效果，以适应不断变化的搜索引擎环境和用户需求。
我是快乐的嘟嘟
108 63
游客zi3qmblbcdexu
|
5天前
|
JavaScript
Vue基础知识总结 4：vue组件化开发
Vue基础知识总结 4：vue组件化开发
游客zi3qmblbcdexu
22 6
德国都芳最好
|
15天前
|
JavaScript
Vue 指令速查表
【10月更文挑战第12天】Vue 指令速查表
德国都芳最好
33 16
游客zi3qmblbcdexu
|
5天前
|
存储 JavaScript
Vue 状态管理工具vuex
Vue 状态管理工具vuex
游客zi3qmblbcdexu
23 5
dufadayang
|
13天前
|
缓存 JavaScript 搜索推荐
Vue SSR（服务端渲染）预渲染的工作原理
【10月更文挑战第23天】Vue SSR 预渲染通过一系列复杂的步骤和机制，实现了在服务器端生成静态 HTML 页面的目标。它为提升 Vue 应用的性能、SEO 效果以及用户体验提供了有力的支持。随着技术的不断发展，Vue SSR 预渲染技术也将不断完善和创新，以适应不断变化的互联网环境和用户需求。
dufadayang
31 9
大树营养快线
|
12天前
|
缓存 JavaScript UED
Vue 中实现组件的懒加载
【10月更文挑战第23天】组件的懒加载是 Vue 应用中提高性能的重要手段之一。通过合理运用动态导入、路由配置等方式，可以实现组件的按需加载，减少资源浪费，提高应用的响应速度和用户体验。在实际应用中，需要根据具体情况选择合适的懒加载方式，并结合性能优化的其他措施，以打造更高效、更优质的 Vue 应用。
大树营养快线
46 4
dufadayang
|
11天前
|
JavaScript
如何在 Vue 中使用具名插槽
【10月更文挑战第25天】通过使用具名插槽，你可以更好地组织和定制组件的模板结构，使组件更具灵活性和可复用性。同时，具名插槽也有助于提高代码的可读性和可维护性。
dufadayang
15 2
dufadayang
|
11天前
|
JavaScript
Vue 中的插槽
【10月更文挑战第25天】插槽的使用可以大大提高组件的复用性和灵活性，使你能够根据具体需求在组件中插入不同的内容，同时保持组件的结构和样式的一致性。
dufadayang
14 2
我是快乐的嘟嘟
|
11天前
|
前端开发 JavaScript 容器
在 vite+vue 中使用@originjs/vite-plugin-federation 模块联邦
【10月更文挑战第25天】模块联邦是一种强大的技术，它允许将不同的微前端模块组合在一起，形成一个统一的应用。在 vite+vue 项目中，使用@originjs/vite-plugin-federation 模块联邦可以实现高效的模块共享和组合。通过本文的介绍，相信你已经了解了如何在 vite+vue 项目中使用@originjs/vite-plugin-federation 模块联邦，包括安装、配置和使用等方面。在实际开发中，你可以根据自己的需求和项目的特点，灵活地使用模块联邦，提高项目的可维护性和扩展性。
我是快乐的嘟嘟
35 1
大树营养快线
|
12天前
|
JavaScript 前端开发 UED
vue 提高 tree shaking 的效果
【10月更文挑战第23天】提高 Vue 中 Tree shaking 的效果需要综合考虑多个因素，包括模块的导出和引用方式、打包工具配置、代码结构等。通过不断地优化和调整，可以最大限度地发挥 Tree shaking 的优势，为 Vue 项目带来更好的性能和用户体验。
大树营养快线
14 2

热门文章

最新文章

  • 1
    vite 如何做到让 vue 本地开发更快速？
  • 2
    VS Code书写vue项目配置 eslint+prettier 统一代码风格
  • 3
    Chrome插件vue-devtools是如何把VSCode中对应的组件文件打开的
  • 4
    vue基于 input 实现密码的显示与隐藏功能
  • 5
    VUE element-ui 之table表格勾选复选框动态带出（将某列的值赋值给指定列）对应列的数据
  • 6
    前端常见Vue2.0面试题
  • 7
    自制简单的range（Vue）
  • 8
    Vue 3和Element组件库的分页功能实现
  • 9
    Vue $watch监听对象属性，数组内对象属性改变
  • 10
    vite原理之解析.vue文件
  • 1
    【spring（五）】SpringMvc总结 SSM整合流程
    65
  • 2
    JAVA Web项目开发SSM框架搭建（第一天）
    67
  • 3
    ssm226基于jsp的快递管理系统的开发
    60
  • 4
    ssm637教材管理系统
    103
  • 5
    ssm666社区流浪动物救助领养系统的设计与开发
    140
  • 6
    ssm703学生考勤管理系统的设计与实现
    110
  • 7
    ssm701基于JavaWeb的个人健康信息管理系统
    102
  • 8
    ssm656基于JAVA的校园失物招领平台的设计与实现
    120
  • 9
    ssm274办公自动化管理系统
    81
  • 10
    544基于SSM的蛋糕甜品店管理系统的设计与开发
    202

    • 相关课程

    更多
  • Spring Boot+Vue.js+FastDFS实现分布式图片服务器
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程
  • 前端开发框架Bootstrap使用教程

    • 相关电子书

    更多
  • 基于VUE的单页面性能优化实践
  • Vue.js 在前端服务化上的探索与实践
  • Vue.js在前端服务化上的实践与探索

    • 相关实验场景

    更多
  • 搭建微信小程序
    • 下一篇
    无影云桌面