基于Springboot+vue开发实现自行车租赁管理系统

本文涉及的产品
云数据库 RDS MySQL,集群系列 2核4GB
推荐场景:
搭建个人博客
RDS MySQL Serverless 基础系列,0.5-2RCU 50GB
云数据库 RDS MySQL,高可用系列 2核4GB
简介: 基于Springboot+vue开发实现自行车租赁管理系统

项目编号:BS-XX-156

一,项目简介


近年来随着科技技术的进步与发展,“共享”、“租车”等相关的APP陆续出现在我们的生活中。随着城市机动车数量的增加,环境污染、交通拥堵等问题日渐严重,因此,发展新的绿色出行模式,引导人们减少机动车出行成为解决这一问题的新思路。在这种背景下,“公共自行车+公共交通”的出行模式逐渐在我国发展起来,它鼓励人们更多的采用公共自行车这一出行工具。相较于机动车出行,这种方式在节能减排的同时,也能提高居民的出行效率,已经在我国许多城市流行起来。


基于这种背景,设计和开发一个功能全面,界面友好、稳定高效的自行车租赁管理系统。本文主要论述了一个基于JAVAWEB技术的自行车租赁管理系统,概述了课题研究背景、国内外发展现状,以及系统的设计原理、设计思想和具体实现过程。对在设计过程中涉及到的关键设计思想及重要作业流程做了具体分析和介绍,并对系统各个模块的设计思想及设计过程做了详细阐述。


本系统设计采用了JAVAWEB技术,使用SpringBoot框架,以Mysql5.0作为数据库支撑平台,应用到的技术包括JAVA、MyBatis、Vue、软件工程思想等


本系统使用B/S结构,配合MySql数据库开发,以IDEA开发平台为主导的系统。可实现在线管理自行车、在线选择自行车、数据分析对比等功能,让用户选择自己喜欢的自行车。系统涉及到的技术主要由Vue制作前端页面和Java作为后端主要技术,并采用SpringBoot、Mybatis后端架构。


本自行车租赁管理系统,系统主要分为用户权限和管理员权限,权限不一样对应的功能也不一样,大致分为:自行车模块、信息模块、租赁地址模块、订单模块等,各模块预计功能概述如下:


自行车管理:此模块对于系统管理员,主要可以添加自行车删除自行车等功能。对于用户,可以浏览自己喜欢的自行车查看具体自行车信息。


信息管理:此模块对于系统管理员,既可以查看修改自己的个人信息,也可以查看用户的信息,还可以对用户的权限进行修改,可以将普通用户的权限提高至系统管理员。对于用户,只能查看或者修改自己的个人信息。


订单管理:此模块对于系统管理员和用户,都可以查看订单明细,申请退单,对订单进行评价等操作。


问题反馈管理:此模块包括用户在租赁过程中出现的问题进行提交、管理员针对相关问题进行用户反馈的操作。


卡券包管理:此模块对于系统管理员,可以发放一些优惠券,对于用户可以查询自己的所有卡券,可以使用这些卡券。


地址管理:对于系统管理员,可以新添加地址和废除不使用的地址,对于用户,可以查询所有地址信息,根据自己的位置选定最适合的地址进行取车和还车。


信息统计管理:此模块对于系统管理员,对用户信息、自行车信息、地址信息等进行可视化数据分析。对于用户,对订单,历史记录、钱包等进行可视化的数据分析。

二,环境介绍


语言环境:Java:  jdk1.8

数据库:Mysql: mysql5.7

应用服务器:Tomcat:  tomcat8.5.31

开发工具:IDEA或eclipse

后台开发技术:Springboot+mybatis+springmvc+swagger

前台开发技术:Vue+ElementUI+Axios

其它:支付宝沙箱支付

三,系统展示


管理员登陆系统进行管理

image.png

用户管理

image.png

image.png

自行车管理

image.png

自行车回收

image.png

故障车维护

image.png

地址管理

image.png

优惠卷管理

image.png

image.png

用户投诉

image.png

订单管理

image.png

退款处理

image.png

用户注册登陆后进行租车

用户注册登陆后进行租车

image.png

image.png

租车


image.png

image.png

image.png

image.png

还车

image.png

支付:注册支付宝沙箱账户进行支付

image.png

购买优惠卷


image.png

image.png

上报故障

image.png

投诉建议

image.png

四,核心代码展示


package com.wxh.bicyclerental.controller;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.wxh.bicyclerental.entity.Advise;
import com.wxh.bicyclerental.entity.User;
import com.wxh.bicyclerental.service.IAdviseService;
import com.wxh.bicyclerental.service.IUserService;
import com.wxh.bicyclerental.utils.Result;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import java.util.HashMap;
import java.util.Map;
/**
 * 投诉意见管理
 */
@Api
@RestController
@RequestMapping("/advise")
@CrossOrigin
public class AdviseController {
    @Autowired
    private IAdviseService adviseService;
    @Autowired
    private IUserService userService;
    /**
     * 添加新投诉
     */
    @PostMapping("/addAdvise")
    @ApiOperation("添加新投诉")
    public Result addAdvise(@RequestBody Advise advise,@RequestParam String username) {
        //根据用户名查询用户id
        User user = userService.selectByUserName(username);
        Integer id = user.getId();
        advise.setUserId(id);
        //设置状态为0
        advise.setState(0);
        if(adviseService.insert(advise) > 0) {
            return Result.ok().data("添加成功");
        }else {
            return Result.error().data("添加失败");
        }
    }
    /**
     * 根据状态分页查询投诉建议
     */
    @GetMapping("/findByState")
    @ApiOperation("根据状态分页查询投诉建议")
    public Result findByState(@RequestParam Integer state, @RequestParam int pageNo, @RequestParam int pageSize) {
        Map map = new HashMap<>();
        //使用PageHelper分页插件
        PageHelper.offsetPage(pageNo, pageSize);
        PageInfo<Advise> adviseList = PageInfo.of(adviseService.select(state));
        map.put("total", adviseList.getTotal());
        map.put("data", adviseList.getList());
        return Result.ok().data(map);
    }
    /**
     * 修改投诉状态
     */
    @PostMapping("/updateState")
    @ApiOperation("修改投诉状态")
    public Result updateState(@RequestBody Advise advise) {
        Integer id = advise.getId();
        if(adviseService.delete(id) > 0) {
            return Result.ok().data("修改成功");
        }else {
            return Result.error().data("修改失败");
        }
    }
}
package com.wxh.bicyclerental.controller;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.wxh.bicyclerental.entity.Bicycle;
import com.wxh.bicyclerental.service.IBicycleService;
import com.wxh.bicyclerental.utils.CodeUtil;
import com.wxh.bicyclerental.utils.Result;
import com.wxh.bicyclerental.utils.StringUtils;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import java.util.HashMap;
import java.util.Map;
/**
 * 自行车管理
 */
@Api
@RestController
@RequestMapping("/bicycle")
@CrossOrigin
public class BicycleController {
    @Autowired
    private IBicycleService bicycleService;
    /**
     * 新车录入
     */
    @PostMapping("/addBicycle")
    @ApiOperation("新车录入")
    public Result addBicycle(@RequestBody Bicycle bicycle) {
        //设置状态为1
        bicycle.setState(1);
        //生成16位id
        Long id = CodeUtil.RundCode();
        bicycle.setBicycleCode(id);
        if(bicycleService.insert(bicycle) > 0) {
            return Result.ok().data("添加成功");
        }else {
            return Result.error().data("添加失败");
        }
    }
    /**
     * 查询所有自行车信息
     */
    @GetMapping("/findAll")
    @ApiOperation("查询所有自行车信息")
    public Result findAll() {
        return Result.ok().data(bicycleService.select());
    }
    /**
     * 分页查询自行车信息
     */
    @GetMapping("/pageQueryBicycle")
    @ApiOperation("分页查询自行车信息")
    public Result pageQueryBicycle(@RequestParam int pageNo, @RequestParam int pageSize) {
        Map map = new HashMap<>();
        //使用PageHelper分页插件
        PageHelper.offsetPage(pageNo, pageSize);
        PageInfo<Bicycle> bicycleList = PageInfo.of(bicycleService.select());
        map.put("total", bicycleList.getTotal());
        map.put("data", bicycleList.getList());
        return Result.ok().data(map);
    }
    /**
     * 根据自行车编码查询自行车信息
     */
    @PostMapping("/findByCode")
    @ApiOperation("根据自行车编码查询自行车信息")
    public Result findByCode(@RequestBody Bicycle bicycle) {
        if(StringUtils.isNull(bicycle)) {
            return Result.error().data("失败");
        }else {
            Long bicycleCode = bicycle.getBicycleCode();
            return Result.ok().data(bicycleService.selectOne(bicycleCode));
        }
    }
    /**
     * 将自行车状态设为2(报废)删除操作
     */
    @GetMapping("/removeBicycle")
    @ApiOperation("删除自行车")
    public Result removeBicycle(@RequestParam Long bicycleCode) {
        if(bicycleService.removeBicycle(bicycleCode) > 0) {
            return Result.ok().data("删除成功");
        }else {
            return Result.error().data("删除失败");
        }
    }
}
package com.wxh.bicyclerental.controller;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.wxh.bicyclerental.entity.Coupon;
import com.wxh.bicyclerental.entity.Order;
import com.wxh.bicyclerental.entity.User;
import com.wxh.bicyclerental.entity.UserCoupon;
import com.wxh.bicyclerental.service.ICouponService;
import com.wxh.bicyclerental.service.IUserCouponService;
import com.wxh.bicyclerental.service.IUserService;
import com.wxh.bicyclerental.utils.CodeUtil;
import com.wxh.bicyclerental.utils.Result;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import java.util.HashMap;
import java.util.Map;
/**
 * 优惠券管理
 */
@Api
@RestController
@RequestMapping("/coupon")
@CrossOrigin
public class CouponController {
    @Autowired
    private ICouponService couponService;
    @Autowired
    private IUserService userService;
    @Autowired
    private IUserCouponService userCouponService;
    /**
     * 发布新优惠券
     */
    @PostMapping("/addCoupon")
    @ApiOperation("发布新优惠券")
    public Result addCoupon(@RequestBody Coupon coupon) {
        //设置状态为1
        coupon.setState(1);
        //生成16位id
        Long id = CodeUtil.RundCode();
        coupon.setCouponId(id);
        if (couponService.insert(coupon) > 0) {
            return Result.ok().data("添加成功");
        } else {
            return Result.error().data("添加失败");
        }
    }
    /**
     * 分页查询所有优惠券
     */
    @GetMapping("/findAllCoupon")
    @ApiOperation("分页查询所有优惠券")
    public Result findAllCoupon(@RequestParam Integer state, @RequestParam int pageNo, @RequestParam int pageSize) {
        Map map = new HashMap<>();
        //使用PageHelper分页插件
        PageHelper.offsetPage(pageNo, pageSize);
        PageInfo<Coupon> couponList = PageInfo.of(couponService.selectByState(state));
        map.put("total", couponList.getTotal());
        map.put("data", couponList.getList());
        return Result.ok().data(map);
    }
    /**
     * 查询所有优惠券
     */
    @GetMapping("/findAll")
    @ApiOperation("查询所有优惠券")
    public Result findAll() {
        return Result.ok().data(couponService.select());
    }
    /**
     * 根据id查询优惠券
     */
    @PostMapping("/findByCouponId")
    @ApiOperation("根据id查询优惠券")
    public Result findByCouponId(@RequestBody Coupon coupon) {
        Long couponId = coupon.getCouponId();
        return Result.ok().data(couponService.selectOne(couponId));
    }
    /**
     * 更改优惠券状态
     */
    @PostMapping("/updateCouponState")
    @ApiOperation("更改优惠券状态")
    public Result updateCouponState(@RequestBody Coupon coupon) {
        if (couponService.update(coupon) > 0) {
            return Result.ok().data("修改成功");
        } else {
            return Result.error().data("修改失败");
        }
    }
    /**
     * 购买优惠券
     */
    @PostMapping("/buyCoupon")
    @ApiOperation("购买优惠券")
    public Result buyCoupon(@RequestBody Coupon coupon,@RequestParam String username) {
        //向中间表中插入数据
        UserCoupon userCoupon = new UserCoupon();
        //根据用户名查询用户id
        User user = userService.selectByUserName(username);
        Integer userId = user.getId();
        Long couponId = coupon.getCouponId();
        userCoupon.setCouponId(couponId);
        userCoupon.setUserId(userId);
        //将状态设置成未支付
        userCoupon.setState(2);
        int result = userCouponService.insert(userCoupon);
        if(result>0){
            return Result.ok().data("成功");
        }else {
            return Result.error().data("失败");
        }
    }
}
package com.wxh.bicyclerental.controller;
import com.alibaba.fastjson.JSONArray;
import com.alibaba.fastjson.JSONObject;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.wxh.bicyclerental.entity.User;
import com.wxh.bicyclerental.service.IUserService;
import com.wxh.bicyclerental.utils.JwtUtils;
import com.wxh.bicyclerental.utils.Result;
import com.wxh.bicyclerental.utils.StringUtils;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import javax.servlet.http.HttpServletRequest;
import java.util.*;
/**
 * 用户管理
 */
@Api
@RestController
@RequestMapping("/user")
@CrossOrigin
public class UserController {
    @Autowired
    private IUserService userService;
    /**
     * 新用户注册
     */
    @PostMapping("/register")
    @ApiOperation("注册")
    public Result registerUser(@RequestBody User user) {
        if (StringUtils.isNull(userService.selectByUserName(user.getUsername()))) {
            //默认是用户注册
            user.setIdentity("user");
            userService.insert(user);
            return Result.ok().data("注册成功");
        }
        return Result.error().data("该用户已存在");
    }
    /**
     * 用户登录
     */
    @PostMapping("/login")
    @ApiOperation("登录")
    public Result login(@RequestBody User requestUser) {
        String username = requestUser.getUsername();
        String password = requestUser.getPassword();
        User user = userService.selectByUserName(username);
        if (StringUtils.isNotNull(user)) {
            String id = user.getId().toString();
            String psw = user.getPassword();
            if (password.equals(psw)) {
                String token = JwtUtils.getJwtToken(id, username);
                Map map = new HashMap(16);
                map.put("token", token);
                return Result.ok().data(map);
            } else {
                return Result.error().data("密码错误");
            }
        }
        return Result.error().data("用户名输入错误");
    }
    /**
     * 获取用户信息
     *
     * @return
     */
    @GetMapping("info")
    @ApiOperation("获取用户信息")
    public Result getInfo(HttpServletRequest request) {
        // 获取jwt解析的信息(用户的id)
        Integer memberIdByJwtToken = Integer.parseInt(JwtUtils.getMemberIdByJwtToken(request));
        // 根据id,查询用户的信息,并将他放入data数据中
        User user = userService.selectOne(memberIdByJwtToken);
        Map map = new HashMap<>();
        ArrayList<String> rolesList = new ArrayList<String>();
        if (StringUtils.isNotNull(user)) {
            rolesList.add(user.getIdentity());
            map.put("roles", JSONArray.parseArray(JSONObject.toJSONString(rolesList)));
            map.put("password", user.getPassword());
            map.put("name", user.getUsername());
            map.put("avatar", "https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif");
            return Result.ok().data(map);
        }
        return Result.error();
    }
    /**
     * 授权为系统管理员或取消管理员权限
     */
    @PostMapping("/updateIdentity")
    @ApiOperation("授权或取消权限")
    public Result updateIdentity(@RequestBody User params) {
        Integer id = params.getId();
        String identity = params.getIdentity();
        User user = new User();
        user.setId(id);
        user.setIdentity(identity);
        if (userService.updateIdentity(user) != 0) {
            return Result.ok().data("更新成功");
        }
        return Result.error();
    }
    /**
     * 分页查询指定权限用户信息
     */
    @GetMapping("/pageQueryUser")
    @ApiOperation("分页查询指定权限用户信息")
    public Result pageQueryUser(@RequestParam int pageNo, @RequestParam int pageSize, @RequestParam String identity) {
        Map map = new HashMap<>();
        //使用PageHelper分页插件
        PageHelper.offsetPage(pageNo, pageSize);
        PageInfo<User> userList = PageInfo.of(userService.selectUserByIdentity(identity));
        map.put("total", userList.getTotal());
        map.put("data", userList.getList());
        return Result.ok().data(map);
    }
    /**
     * 查询所有用户信息
     */
    @GetMapping("/queryUser")
    @ApiOperation("查询所有用户信息")
    public Result queryUser() {
        List<User> userList = userService.select();
        if (null == userList || userList.size() == 0) {
            return Result.error().data("查询失败");
        } else {
            return Result.ok().data(userList);
        }
    }
    /**
     * 根据用户名查询用户信息
     */
    @GetMapping("/queryUserByUserName")
    @ApiOperation("根据用户名查询用户信息")
    public Result queryUserByUserName(@RequestParam String username) {
        User user = userService.selectByUserName(username);
        if(StringUtils.isNotNull(user)) {
            return Result.ok().data(user);
        }else {
            return Result.error().data("查询失败");
        }
    }
    /**
     * 更新用户信息
     */
    @PostMapping("/updateUser")
    @ApiOperation("更新用户信息")
    public Result updateUser(@RequestBody User params) {
       if(userService.update(params)>0) {
           return Result.ok().data("更新成功");
       }else {
           return Result.error().data("更新失败");
       }
    }
}

五,项目总结


首先,原有单个区域自行车租赁管理系统在跨区域网点的管理能力上相对薄弱。由于不同自行车租赁区域的计费方式往往是不同的,原有系统经常会发生计费规则混用,导致扣款(或扣诚信分)错误,因此,用户投诉也比较多。除此之外,对于一些完全独立的小型自行车租赁区域,采用原有系统过于庞大和显得累赘。因此,迫切需要一套在运营规模上具有较大伸缩性,既可用于完全独立的小型自行车租赁区域的运营管理,又可以用于将相对独立的各运营区域租赁子系统组合起来集中管理的应用平台。


目前市面上虽然出现了很多共享单车的app,骑车租赁的系统,但是关于自行车租赁的系统还很少。其次,现有存在的系统技术相对落后,在当前大数据的时代,分布式,微服务的开发架构中,这些系统技术落后,对于一些复杂的、高并发的场景并不能很好的处理。本文主要研究的内容是,开发一个技术较新、扩展性更好、综合性更强、业务较为完善的自行车租赁管理系统,一方面方便人们的出行,为城市节能减排做更多的贡献,另一方面,提高自行车租赁管理系统的管理效率和服务水平。


本文主要完成自行车租赁管理系统的设计与开发工作,站在用户和管理员的角度,根据真实的用户使用体验,采用模块化和层次化的设计思想,结合计算机软件、计算机网络、信息安全、数据库等先进技术,开发一个功能全面、界面友好、稳定高效的综合业务租赁管理系统,为自行车租赁系统运营提供强健的业务管理支撑。

相关实践学习
如何快速连接云数据库RDS MySQL
本场景介绍如何通过阿里云数据管理服务DMS快速连接云数据库RDS MySQL,然后进行数据表的CRUD操作。
全面了解阿里云能为你做什么
阿里云在全球各地部署高效节能的绿色数据中心,利用清洁计算为万物互联的新世界提供源源不断的能源动力,目前开服的区域包括中国(华北、华东、华南、香港)、新加坡、美国(美东、美西)、欧洲、中东、澳大利亚、日本。目前阿里云的产品涵盖弹性计算、数据库、存储与CDN、分析与搜索、云通信、网络、管理与监控、应用服务、互联网中间件、移动服务、视频服务等。通过本课程,来了解阿里云能够为你的业务带来哪些帮助 &nbsp; &nbsp; 相关的阿里云产品:云服务器ECS 云服务器 ECS(Elastic Compute Service)是一种弹性可伸缩的计算服务,助您降低 IT 成本,提升运维效率,使您更专注于核心业务创新。产品详情: https://www.aliyun.com/product/ecs
相关文章
|
22天前
|
存储 JavaScript 前端开发
基于 SpringBoot 和 Vue 开发校园点餐订餐外卖跑腿Java源码
一个非常实用的校园外卖系统,基于 SpringBoot 和 Vue 的开发。这一系统源于黑马的外卖案例项目 经过站长的进一步改进和优化,提供了更丰富的功能和更高的可用性。 这个项目的架构设计非常有趣。虽然它采用了SpringBoot和Vue的组合,但并不是一个完全分离的项目。 前端视图通过JS的方式引入了Vue和Element UI,既能利用Vue的快速开发优势,
107 13
|
30天前
|
JavaScript 安全 Java
java版药品不良反应智能监测系统源码,采用SpringBoot、Vue、MySQL技术开发
基于B/S架构,采用Java、SpringBoot、Vue、MySQL等技术自主研发的ADR智能监测系统,适用于三甲医院,支持二次开发。该系统能自动监测全院患者药物不良反应,通过移动端和PC端实时反馈,提升用药安全。系统涵盖规则管理、监测报告、系统管理三大模块,确保精准、高效地处理ADR事件。
|
2月前
|
XML Java 数据库连接
SpringBoot集成Flowable:打造强大的工作流管理系统
在企业级应用开发中,工作流管理是一个核心组件,它能够帮助我们定义、执行和管理业务流程。Flowable是一个开源的工作流和业务流程管理(BPM)平台,它提供了强大的工作流引擎和建模工具。结合SpringBoot,我们可以快速构建一个高效、灵活的工作流管理系统。本文将探讨如何将Flowable集成到SpringBoot应用中,并展示其强大的功能。
351 1
|
2月前
|
JavaScript NoSQL Java
CC-ADMIN后台简介一个基于 Spring Boot 2.1.3 、SpringBootMybatis plus、JWT、Shiro、Redis、Vue quasar 的前后端分离的后台管理系统
CC-ADMIN后台简介一个基于 Spring Boot 2.1.3 、SpringBootMybatis plus、JWT、Shiro、Redis、Vue quasar 的前后端分离的后台管理系统
53 0
|
6天前
|
JavaScript
vue使用iconfont图标
vue使用iconfont图标
51 1
|
17天前
|
JavaScript 关系型数据库 MySQL
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统,提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性,实现用户友好的界面,方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构,确保稳定性和多功能模块设计,涵盖管理员和用户功能模块,促进物品循环使用,降低开销,提升环保意识,助力绿色校园文化建设。
|
2月前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客!我是瑞雨溪,一名热爱前端的大一学生,专注于JavaScript与Vue,正向全栈进发。博客分享Vue学习心得、命令式与声明式编程对比、列表展示及计数器案例等。关注我,持续更新中!🎉🎉🎉
48 1
vue学习第一章
|
2月前
|
JavaScript 前端开发 索引
vue学习第三章
欢迎来到瑞雨溪的博客,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中的v-bind指令,包括基本使用、动态绑定class及style等,希望能为你的前端学习之路提供帮助。持续关注,更多精彩内容即将呈现!🎉🎉🎉
34 1
|
2月前
|
缓存 JavaScript 前端开发
vue学习第四章
欢迎来到我的博客!我是瑞雨溪,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中计算属性的基本与复杂使用、setter/getter、与methods的对比及与侦听器的总结。如果你觉得有用,请关注我,将持续更新更多优质内容!🎉🎉🎉
40 1
vue学习第四章
|
2月前
|
JavaScript 前端开发 算法
vue学习第7章(循环)
欢迎来到瑞雨溪的博客,一名热爱JavaScript和Vue的大一学生。本文介绍了Vue中的v-for指令,包括遍历数组和对象、使用key以及数组的响应式方法等内容,并附有综合练习实例。关注我,将持续更新更多优质文章!🎉🎉🎉
32 1
vue学习第7章(循环)