员工入职管理系统|员工管理系统|基于SpringBoot+Vue的企业新员工入职系统(二)

简介: 员工入职管理系统|员工管理系统|基于SpringBoot+Vue的企业新员工入职系统

员工入职管理系统|员工管理系统|基于SpringBoot+Vue的企业新员工入职系统(一)https://developer.aliyun.com/article/1423358


四,核心代码展示

package com.imnu.springboot.controller;
import com.baomidou.mybatisplus.core.conditions.update.UpdateWrapper;
import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.imnu.springboot.entity.Department;
import com.imnu.springboot.entity.Requirement;
import com.imnu.springboot.entity.User;
import com.imnu.springboot.exception.ServiceException;
import com.imnu.springboot.mapper.RequirementMapper;
import com.imnu.springboot.service.IDepartmentService;
import com.imnu.springboot.service.IRequirementService;
import com.imnu.springboot.service.IUserService;
import com.imnu.springboot.utils.TokenUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.mail.SimpleMailMessage;
import org.springframework.mail.javamail.JavaMailSender;
import org.springframework.web.bind.annotation.*;
import javax.annotation.Resource;
import java.util.Date;
import java.util.List;
import java.util.Objects;
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.imnu.springboot.common.Result;
import com.imnu.springboot.service.IResumeService;
import com.imnu.springboot.entity.Resume;
import org.springframework.web.bind.annotation.RestController;
/**
 * <p>
 *  前端控制器
 * </p>
 * @author 
 */
@RestController
@RequestMapping("/resume")
public class ResumeController {
    @Resource
    private IResumeService resumeService;
    @Resource
    private IRequirementService requirementService;
    @Resource
    private IUserService userService;
    @Resource
    private IDepartmentService departmentService;
    //从配置信息中拿去发送邮件人的信息
    @Value("${spring.mail.username}")
    private String from;
    //映入发送邮件的类
    @Autowired
    JavaMailSender javaMailSender;
    //新增或者更新
    @PostMapping
    public Result save(@RequestBody Resume resume) {
        //获取用户名,邮箱号,部门id,岗位id
        String nickname = TokenUtils.getCurrentUser().getNickname();
        String email = TokenUtils.getCurrentUser().getEmail();
        Integer id = resume.getId();
        //根据岗位id查询岗位信息
        QueryWrapper<Requirement> queryWrapper = new QueryWrapper<>();
        queryWrapper.eq("id",id);
        Requirement one = requirementService.getOne(queryWrapper);
        String post = one.getPost();
        Integer depId = one.getDepId();
        //设置用户名,邮箱号,部门id,岗位信息
        resume.setNickname(nickname);
        resume.setEmail(email);
        resume.setDepId(depId);
        resume.setId(null);
        resume.setPost(post);
        resume.setState("待审核");
        resumeService.save(resume);
        return Result.success();
    }
    //审核通过更改状态
    @PostMapping("/statePass")
    public Result saveStatePass(@RequestBody Resume resume){
        //获取申请岗位名称
        String post = resume.getPost();
        //获取岗位信息
        QueryWrapper<Requirement> queryWrapper2 = new QueryWrapper<>();
        queryWrapper2.eq("post",post);
        queryWrapper2.isNull("u_id");
        Requirement one2 = requirementService.getOne(queryWrapper2);
        //根据用户名去修改用户身份
        String nickname = resume.getNickname();
        QueryWrapper<User> queryWrapper = new QueryWrapper<>();
        queryWrapper.eq("nickname",nickname);
        //获取用户信息
        User one = userService.getOne(queryWrapper);
            //修改用户身份
            one.setRole("ROLE_DEP_USER");
            userService.updateById(one);
            //拿去部门id
        Integer depId = resume.getDepId();
        one.setDepId(depId);
        //修改用户部门id
        userService.updateById(one);
        //拿去岗位信息
        Integer id = one2.getId();
        one.setPostId(id);
        //修改用户岗位id
        userService.updateById(one);
        //拿去普通员工电话信息
        String phone = resume.getPhone();
        one.setPhone(phone);
        //修改用户电话信息
        userService.updateById(one);
        //拿去普通员工地址信息
        String address = resume.getAddress();
        one.setAddress(address);
        //修改用户岗位id
        userService.updateById(one);
        //拿去普通员工简历路径
        String resume1 = resume.getResume();
        one.setAvatarUrl(resume1);
        //修改用户岗位id
        userService.updateById(one);
        //获取部门名
            QueryWrapper<Department> queryWrapper1 = new QueryWrapper<>();
            queryWrapper1.eq("id",depId);
            Department one1 = departmentService.getOne(queryWrapper1);
            String depName = one1.getDepName();
            //发送邮件通知
            String email = resume.getEmail();
            //配置邮箱
            SimpleMailMessage message = new SimpleMailMessage();
            message.setFrom(from);
            message.setTo(email);
            Date now = new Date();
            message.setSentDate(now);
            message.setSubject("【欧世雄企业新员工入职系统】");
            message.setText(nickname+"恭喜你,你已经成功被"+depName+"录取,请尽快前来报道!");
            //进行邮件发送
            javaMailSender.send(message);
            resumeService.saveOrUpdate(resume);
            return Result.success();
        }
    //删除
    @DeleteMapping("/{id}")
    public  Result del(@PathVariable Integer id){
        //邮件通知该员工已被开除
        QueryWrapper<Resume> queryWrapper1 = new QueryWrapper<>();
        queryWrapper1.eq("id",id);
        Resume one1 = resumeService.getOne(queryWrapper1);
        String email = one1.getEmail();
        String nickname = one1.getNickname();
        Integer depId = one1.getDepId();
        QueryWrapper<Department> queryWrapper = new QueryWrapper<>();
        queryWrapper.eq("id",depId);
        Department one = departmentService.getOne(queryWrapper);
        String depName = one.getDepName();
        //通过邮件通知
        SimpleMailMessage message = new SimpleMailMessage();
        message.setFrom(from);
        message.setTo(email);
        Date now = new Date();
        message.setSentDate(now);
        message.setSubject("【欧世雄企业新员工入职系统】");
        message.setText("您好"+nickname+",您未通过"+depName+"的考核,很抱歉未能成为我公司的正式员工");
        javaMailSender.send(message);
        //更改用户表信息
        resumeService.removeById(id);
        return Result.success();
    }
    //批量删除
    @PostMapping("/del/batch")
    public Result deleteBatch(@RequestBody List<Integer> ids){
        return Result.success(resumeService.removeByIds(ids));
    }
    //查询全部
    @GetMapping
    public Result findAll(){
       return Result.success(resumeService.list());
    }
    //根据id查询
    @GetMapping("/{id}")
    public Result findOne(@PathVariable Integer id){
        return Result.success(resumeService.getById(id));
    }
    //分页查询
     @GetMapping("/page")
    public Result findPage(@RequestParam Integer pageNum,
                           @RequestParam Integer pageSize,
                           @RequestParam(defaultValue = "") String nickname){
        QueryWrapper<Resume> queryWrapper = new QueryWrapper<>();
        queryWrapper.orderByDesc("id");
        if (!"".equals(nickname)){
            queryWrapper.like("nickname",nickname);
        }
         Integer depId = Objects.requireNonNull(TokenUtils.getCurrentUser()).getDepId();
        queryWrapper.eq("dep_id",depId);
         return Result.success(resumeService.page(new Page<>(pageNum,pageSize),queryWrapper));
        }
}
package com.imnu.springboot.controller;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import io.swagger.models.auth.In;
import org.springframework.web.bind.annotation.*;
import javax.annotation.Resource;
import java.util.List;
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.imnu.springboot.common.Result;
import com.imnu.springboot.service.IRoleService;
import com.imnu.springboot.entity.Role;
import org.springframework.web.bind.annotation.RestController;
/**
 * <p>
 *  前端控制器
 * </p>
 *
 * @author
 */
@RestController
@RequestMapping("/role")
public class RoleController {
    @Resource
    private IRoleService roleService;
    //新增或者更新
    @PostMapping
    public Result save(@RequestBody Role role) {
        return Result.success( roleService.saveOrUpdate(role));
    }
    //删除
    @DeleteMapping("/{id}")
    public Result delete(@PathVariable Integer id){
        return Result.success(roleService.removeById(id));
    }
    //批量删除
    @PostMapping("/del/batch")
    public Result deleteBatch(@RequestBody List<Integer> ids){
        return Result.success(roleService.removeByIds(ids));
    }
    //查询全部
    @GetMapping
    public Result findAll(){
       return Result.success(roleService.list());
    }
    //根据id查询
    @GetMapping("/{id}")
    public Result findOne(@PathVariable Integer id){
        return Result.success(roleService.getById(id));
    }
    //分页查询
     @GetMapping("/page")
    public Result findPage(@RequestParam Integer pageNum,
                           @RequestParam Integer pageSize,
                           @RequestParam(defaultValue = "") String name){
        QueryWrapper< Role> queryWrapper = new QueryWrapper<>();
        if (!"".equals(name)){
            queryWrapper.like("name",name);
        }
        return Result.success(roleService.page(new Page<>(pageNum,pageSize),queryWrapper));
        }
    /**
     * 绑定角色和菜单的关系
      * @param roleId   角色id
     * @param menuIds   菜单id数组
     * @return
     */
    @PostMapping("/roleMenu/{roleId}")
     public Result roleMenu(@PathVariable Integer roleId, @RequestBody List<Integer> menuIds){
            roleService.setRoleMenu(roleId,menuIds);
            return Result.success();
    }
    @GetMapping("/roleMenu/{roleId}")
    public Result getRoleMenu(@PathVariable Integer roleId){
        return Result.success(roleService.getRoleMenu(roleId));
    }
}
package com.imnu.springboot.controller;
import cn.hutool.core.collection.CollUtil;
import cn.hutool.core.util.StrUtil;
import cn.hutool.poi.excel.ExcelReader;
import cn.hutool.poi.excel.ExcelUtil;
import cn.hutool.poi.excel.ExcelWriter;
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.core.metadata.IPage;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.imnu.springboot.common.Constants;
import com.imnu.springboot.common.Result;
import com.imnu.springboot.config.AuthAccess;
import com.imnu.springboot.controller.dto.UserDto;
import com.imnu.springboot.controller.dto.UserPasswordDto;
import com.imnu.springboot.entity.*;
import com.imnu.springboot.exception.ServiceException;
import com.imnu.springboot.mapper.DepartmentMapper;
import com.imnu.springboot.service.IRequirementService;
import com.imnu.springboot.service.impl.UserServiceImpl;
import com.imnu.springboot.service.impl.ValidationServiceImpl;
import com.imnu.springboot.utils.TokenUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.mail.SimpleMailMessage;
import org.springframework.mail.javamail.JavaMailSender;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;
import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.io.InputStream;
import java.net.URLEncoder;
import java.util.Date;
import java.util.HashMap;
import java.util.List;
@RestController
@RequestMapping("/user")
public class UserController {
    @Autowired
    private UserServiceImpl userService;
    @Autowired
    private ValidationServiceImpl validationService;
    @Autowired
    private IRequirementService requirementService;
    //从配置信息中拿去发送邮件人的信息
    @Value("${spring.mail.username}")
    private String from;
    //映入发送邮件的类
    @Autowired
    JavaMailSender javaMailSender;
    //账号密码登录
    @PostMapping("/loginAccount")
    public Result loginAccount(@RequestBody UserDto userDto){
        String username = userDto.getUsername();
        String password = userDto.getPassword();
        if (StrUtil.isBlank(username) || StrUtil.isBlank(password)){   //检验用户名是否为空(用户名或密码为空)
            return Result.error(Constants.CODE_400,"参数错误");
        }
        UserDto dto = userService.login(userDto);
        return Result.success(dto);
    }
    //邮箱验证码登录
    @PostMapping("/loginEmail")
    public Result loginEmail(@RequestBody UserDto userDto){
        String email = userDto.getEmail();
        String code = userDto.getCode();
        if (StrUtil.isBlank(email) || StrUtil.isBlank(code)){   //检验用户名是否为空(用户名或密码为空)
            return Result.error(Constants.CODE_400,"参数错误");
        }
        UserDto dto = userService.loginEmail(userDto);
        return Result.success(dto);
    }
    //邮箱获取验证码,获取登录和重密码的验证码
    @AuthAccess
    @GetMapping("/email/{email}/{type}")
    public Result sendEmailCode(@PathVariable String email,@PathVariable Integer type){
        if (StrUtil.isBlank(email)){
            throw new ServiceException(Constants.CODE_400,"参数错误");
        }
        if (type==null){
            throw new ServiceException(Constants.CODE_400,"参数错误");
        }
        userService.sendEmailCode(email,type);
        return Result.success();
    }
    //重置密码
    @AuthAccess
    @PutMapping("/reset")
    public Result reset(@RequestBody UserPasswordDto userPasswordDto){
        if (StrUtil.isBlank(userPasswordDto.getEmail()) || StrUtil.isBlank(userPasswordDto.getCode())){
            throw new ServiceException(Constants.CODE_500,"参数异常");
        }
        QueryWrapper<Validation> queryWrapper = new QueryWrapper<>();
        queryWrapper.eq("email",userPasswordDto.getEmail());
        queryWrapper.eq("code",userPasswordDto.getCode());
        queryWrapper.ge("time",new Date());
        Validation one = validationService.getOne(queryWrapper);
        if (one ==null){
            throw new ServiceException(Constants.CODE_500,"验证码过期,请重新获取验证码");
        }
        //如果验证通过的话
        QueryWrapper<User> queryWrapper1 = new QueryWrapper<>();
        queryWrapper1.eq("email",userPasswordDto.getEmail());
        User user = userService.getOne(queryWrapper1);
        //重置密码
        user.setPassword("123");
        userService.updateById(user);
        return Result.success();
    }
    //修改密码
    @PostMapping("/password")
    public Result password(@RequestBody UserPasswordDto userPasswordDto){
        userPasswordDto.setPassword(userPasswordDto.getPassword());
        userPasswordDto.setNewPassword(userPasswordDto.getNewPassword());
        userService.updatePassword(userPasswordDto);
        return Result.success();
    }
    //注册
    @PostMapping("/register")
    public Result register(@RequestBody UserDto userDto){
        String username = userDto.getUsername();
        String password = userDto.getPassword();
        if (StrUtil.isBlank(username) || StrUtil.isBlank(password)){  //检验前端用户输入的内容是否为空
            return Result.error(Constants.CODE_400,"参数错误");
        }
        User register = userService.register(userDto);
        return Result.success(register);
    }
    //查询所有数据
    @GetMapping
    public Result findAll(){
        return Result.success(userService.list()) ;
    }
    //根据用户姓名查询用户内容
    @GetMapping("/username/{username}")
    public Result selectUsername(@PathVariable String username){
        QueryWrapper<User> queryWrapper = new QueryWrapper<>();
        queryWrapper.eq("username",username);
        User one = userService.getOne(queryWrapper);
        return Result.success(one);
    }
    //新增和修改
    @PostMapping
    public Result save(@RequestBody User user){
        //新增或者更新
        if (user.getId()==null){
            user.setPassword("123456");
        }
        return Result.success(userService.saveOrUpdate(user));
    }
    //根据部门id去查询岗位信息
    @PostMapping("/selectPost")
    public Result selectPost(@RequestBody Requirement requirement){
        Integer depId = requirement.getDepId();
        QueryWrapper<Requirement> queryWrapper1 = new QueryWrapper<>();
        queryWrapper1.eq("dep_id",depId);
        List<Requirement> list = requirementService.list(queryWrapper1);
        HashMap<String, Object> map = new HashMap<>();
        map.put("list",list);
        return Result.success(map);
    }
    //为用户增加岗位信息并且修改岗位表中的信息
    @PostMapping("/userRequirement")
    public Result saveUserRequirement(@RequestBody User user){
        userService.saveOrUpdate(user);
        //获取用户id
        Integer id = user.getId();
        //获取岗位id
        Integer postId = user.getPostId();
        //根据岗位id去查询岗位信息
        QueryWrapper<Requirement> queryWrapper = new QueryWrapper<>();
        queryWrapper.eq("id",postId);
        Requirement one = requirementService.getOne(queryWrapper);
        //修改岗位表中用户id
        one.setUId(id);
        one.setState(true);
        requirementService.updateById(one);
        return Result.success();
    }
    @PostMapping("/noticeByEmail")
    public Result NoticeByEmail(@RequestBody User user){
        //获取用户的用户名,密码和邮箱
        String email = user.getEmail();
        String password = user.getPassword();
        String username = user.getUsername();
        String nickname = user.getNickname();
        //通过邮件通知
        SimpleMailMessage message = new SimpleMailMessage();
        message.setFrom(from);
        message.setTo(email);
        Date now = new Date();
        message.setSentDate(now);
        message.setSubject("【欧世雄企业新员工入职系统】");
        message.setText("您好"+nickname+",请使用以下账户密码登录公司系统:\n"+
                "账号:"+username+"\n密码:"+password+"\n登录地址:http://localhost:8080/login");
        javaMailSender.send(message);
        return Result.success();
    }
    //删除
    @DeleteMapping("/{id}")
    public  Result delete(@PathVariable Integer id){
        //更改用户表信息
        userService.removeById(id);
        return Result.success();
    }
    //批量删除
    @PostMapping("/del/batch")
    public  Result deleteBatch(@RequestBody List<Integer> ids){
        return Result.success(userService.removeByIds(ids));
    }
    //分页查询
    @GetMapping("/page")
    public Result findPage(@RequestParam Integer pageNum,
                           @RequestParam Integer pageSize,
                           @RequestParam(defaultValue = "") String username,
                           @RequestParam(defaultValue = "") String email,
                           @RequestParam(defaultValue = "") String address){
        IPage<User> page = new Page<>(pageNum,pageSize);
        QueryWrapper<User> queryWrapper = new QueryWrapper<>();
        if (!"".equals(username)){
            queryWrapper.like("username",username);
        }
        if (!"".equals(email)){
            queryWrapper.like("email",email);
        }
        if (!"".equals(address)){
            queryWrapper.like("address",address);
        }
        return Result.success( userService.page(page,queryWrapper));
    }
    /**
     * 导出
     */
    @GetMapping("/export")
    public Result export (HttpServletResponse response) throws Exception {
        //从数据库查询到所有的数据
        List<User> list = userService.list();
        //在内存操作,写出到浏览器
        ExcelWriter writer = ExcelUtil.getWriter(true);
        //自定义标题别名
        writer.addHeaderAlias("username","用户名");
        writer.addHeaderAlias("password","密码");
        writer.addHeaderAlias("nickname","昵称");
        writer.addHeaderAlias("email","邮箱");
        writer.addHeaderAlias("phone","电话");
        writer.addHeaderAlias("address","地址");
        writer.addHeaderAlias("createTime","创建时间");
        writer.addHeaderAlias("avatarUrl","头像");
        //一次性的写出list内的对象到excel,使用默认样式,强制输出标题
        writer.write(list,true);
        //设置浏览器响应的格式
        response.setContentType("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8");
        String fileName = URLEncoder.encode("用户信息","UTF-8");
        response.setHeader("Content-Disposition", "attachment;filename=" + fileName + ".xlsx");
        ServletOutputStream outputStream = response.getOutputStream();
        writer.flush(outputStream,true);
        outputStream.close();
        writer.close();
        return Result.success();
    }
}

五,项目总结

在进行用户界面设计时需要充分考虑布局的合理化问题,遵循用户从上而下,自左向右浏览、操作习惯,避免常用业务功能按键排列过于分散,以造成用户鼠标移动距离过长的弊端。多做“减法”运算,将不常用的功能区块隐藏,以保持界面的简洁,使用户专注于主要业务操作流程,有利于提高平台的易用性及可用性。

1) 保持菜单简洁性及分类的准确性,避免菜单深度超过3层。

2) 未完成功能必须隐藏处理,不要置于页面内容中,以免引起误会。

3) 所有文字内容排版避免贴边显示(页面边缘),尽量保持10-20像素的      间距并在垂直方向上居中对齐;各控件元素间也保持至少 10 像素以上     的间距,并确保控件元素不紧贴于页面边沿。

4) 字符型数据保持左对齐,数值型右对齐(方便阅读对比),并根据要求,    统一显示小数位位数。

5) 页面布局设计时应避免出现横向滚动条。

6) 在页面显眼位置应该出现面包屑导航栏,让用户知道当前所在页面的       位置,并明确导航结构。

7) 信息提示窗口应位于当前页面的居中位置,并适当弱化背景层以减少       信息干扰,让用户把注意力集中在当前的信息提示窗口。一般做法是在     信息提示窗口的背面加一个半透明颜色填充的遮罩层。

相关文章
|
4月前
|
JavaScript 前端开发 Java
制造业ERP源码,工厂ERP管理系统,前端框架:Vue,后端框架:SpringBoot
这是一套基于SpringBoot+Vue技术栈开发的ERP企业管理系统,采用Java语言与vscode工具。系统涵盖采购/销售、出入库、生产、品质管理等功能,整合客户与供应商数据,支持在线协同和业务全流程管控。同时提供主数据管理、权限控制、工作流审批、报表自定义及打印、在线报表开发和自定义表单功能,助力企业实现高效自动化管理,并通过UniAPP实现移动端支持,满足多场景应用需求。
408 1
|
5月前
|
前端开发 Java 关系型数据库
基于Java+Springboot+Vue开发的鲜花商城管理系统源码+运行
基于Java+Springboot+Vue开发的鲜花商城管理系统(前后端分离),这是一项为大学生课程设计作业而开发的项目。该系统旨在帮助大学生学习并掌握Java编程技能,同时锻炼他们的项目设计与开发能力。通过学习基于Java的鲜花商城管理系统项目,大学生可以在实践中学习和提升自己的能力,为以后的职业发展打下坚实基础。技术学习共同进步
404 7
|
4月前
|
供应链 JavaScript BI
ERP系统源码,基于SpringBoot+Vue+ElementUI+UniAPP开发
这是一款专为小微企业打造的 SaaS ERP 管理系统,基于 SpringBoot+Vue+ElementUI+UniAPP 技术栈开发,帮助企业轻松上云。系统覆盖进销存、采购、销售、生产、财务、品质、OA 办公及 CRM 等核心功能,业务流程清晰且操作简便。支持二次开发与商用,提供自定义界面、审批流配置及灵活报表设计,助力企业高效管理与数字化转型。
424 2
ERP系统源码,基于SpringBoot+Vue+ElementUI+UniAPP开发
|
5月前
|
JavaScript 前端开发 Java
Spring Boot 与 Vue.js 前后端分离中的数据交互机制
本文深入探讨了Spring Boot与Vue.js在前后端分离架构下的数据交互机制。通过对比传统`model.addAttribute()`方法与RESTful API的设计,分析了两者在耦合性、灵活性及可扩展性方面的差异。Spring Boot以RESTful API提供数据服务,Vue.js借助Axios消费API并动态渲染页面,实现了职责分明的解耦架构。该模式显著提升了系统的灵活性和维护性,适用于复杂应用场景如论坛、商城系统等,为现代Web开发提供了重要参考。
431 0
|
8月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue实现的留守儿童爱心网站设计与实现(计算机毕设项目实战+源码+文档)
博主是一位全网粉丝超过100万的CSDN特邀作者、博客专家,专注于Java、Python、PHP等技术领域。提供SpringBoot、Vue、HTML、Uniapp、PHP、Python、NodeJS、爬虫、数据可视化等技术服务,涵盖免费选题、功能设计、开题报告、论文辅导、答辩PPT等。系统采用SpringBoot后端框架和Vue前端框架,确保高效开发与良好用户体验。所有代码由博主亲自开发,并提供全程录音录屏讲解服务,保障学习效果。欢迎点赞、收藏、关注、评论,获取更多精品案例源码。
|
3月前
|
人工智能 JavaScript 算法
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
500 0
|
3月前
|
JavaScript UED
用组件懒加载优化Vue应用性能
用组件懒加载优化Vue应用性能
|
5月前
|
JavaScript
vue实现任务周期cron表达式选择组件
vue实现任务周期cron表达式选择组件
693 4
|
4月前
|
JavaScript 数据可视化 前端开发
基于 Vue 与 D3 的可拖拽拓扑图技术方案及应用案例解析
本文介绍了基于Vue和D3实现可拖拽拓扑图的技术方案与应用实例。通过Vue构建用户界面和交互逻辑,结合D3强大的数据可视化能力,实现了力导向布局、节点拖拽、交互事件等功能。文章详细讲解了数据模型设计、拖拽功能实现、组件封装及高级扩展(如节点类型定制、连接样式优化等),并提供了性能优化方案以应对大数据量场景。最终,展示了基础网络拓扑、实时更新拓扑等应用实例,为开发者提供了一套完整的实现思路和实践经验。
506 77
|
5月前
|
缓存 JavaScript 前端开发
Vue 基础语法介绍
Vue 基础语法介绍