共享车位|基于SpringBoot+vue+node共享车位平台的设计与实现

简介: 共享车位|基于SpringBoot+vue+node共享车位平台的设计与实现

项目编号:BS-PT-075

前言:


现如今,私家车辆数量越来越多,方便了人们出行的同时,也带来了很多问题。其中,停车成了最大的难题,本平台的前台帮助用户快速查找空闲车位,做到高效停车,后台帮助停车场管理员管理有限的车位资源。


本文针对上述问题,设计开发出一个B/S架构的基于SpringBoot框架技术的共享车位平台。在整个平台的开发周期中,开发选用SpringBoot框架,选用MYSQL数据库和Redis数据库来实现。主要完成以下几个方面的研究:


1.分析在SpringBoot应用程序开发过程中所采用的C/S结构和B/S结构的优缺点,提出了基于SpringBoot共享车位平台的基本实行方案;


2.对功能需求详细分析,并且也对非功能需求以及系统运行环境进行简单分析,分析各个功能模块的设计和实现,分析寻找车位流程以及实现方案。


3.实现了登录注册、用户管理、停车场管理、车位管理、车位和车辆状态监控、查看用户留言、查看附近停车场、查看车位信息、在线留言等功能。


本平台UI简洁美观,极易使用,功能完善。为用户提供停车场、车位等信息,方便用户快速寻找空闲的停车位;方便管理员高效管理车位资源,及时查看用户反馈信息,快速了解车位情况。

一,项目简介


本平台包括前台系统和后台管理系统,前台系统供用户使用,后台管理系统供管理员使用。管理员又分为超级管理员和普通管理员两个角色,超级管理员除了拥有普通管理员的所有权限外,还能对普通管理员进行管理。用户可以进行登录注册、找回密码、查看附近停车场、查看车位信息、在线留言。管理员可以进行登录注册、管理用户信息、管理停车场信息、管理停车场车位信息、状态监控、查看用户在线留言。


前台系统

用户对象:

(1)用户可以登录、通过手机验证码辅助注册账号、找回密码。

(2)用户可以在个人中心完善个人信息、修改个人信息、修改密码等操作。

(3)用户可以查看附近停车场信息。

(4)用户可以查看指定停车场内车位的信息,使用空闲车位,并支持一键快速查找空闲车位。

(5)用户可以在线留言,通过发表留言及时向管理员反馈遇到的问题。

(6)用户可以通过地图查看公司所在地理位置,以及公司地址、联系方式等信息。


后台管理系统

超级管理员对象:

(1)超级管理员对普通管理员进行管理,可以新增管理员、删除管理员、修改管理员信息、查看管理员列表、重置管理员密码。

(2)超级管理员拥有普通管理员的所有权限。

普通管理员对象(以下统称为“管理员”):

(1) 管理员可以在个人中心完善个人信息、修改个人信息、修改密码等操作。

(2) 管理员对用户信息进行管理,可以停用/启用、新增、删除、条件查询用户,修改用户信息、导出用户信息。

(3) 管理员对停车场信息进行管理,可以停用/启用、新增、删除、条件查询停车场,修改停车场信息、导出停车场信息。

(4) 管理员对停车场车位信息进行管理,可以新增、删除、条件查询车位,修改车位信息。

(5) 管理员可以监控所有的车辆状态和指定停车场内的车位状态,生成统计数据后通过饼状图和柱状图进行数据展示。

(6) 用户留言后,管理员可以在用户在线留言中查看留言内容和留言人信息,并可以调整留言处理进度。

二,环境介绍


语言环境:Java:  jdk1.8

数据库:Mysql: mysql5.7

应用服务器:Tomcat:  tomcat8.5.31

开发工具:IDEA或eclipse

后台开发技术:Springboot+Mybatis

前端开发技术:Vue+ElementUI+Nodejs

三,系统展示


5.1  用户信息管理

用户信息管理主页面如下图5-1所示,管理员登录后点击用户信息管理进入主页面,可以查看所有用户的综合信息,并可以进行禁用/停用用户账号、多条件模糊查询数据、新增用户页面如图5-2所示、修改用户信息页面如下图5-2所示、删除用户、导出用户信息等操作。

image.png

图5-1 用户信息管理主页面


29ed30042c634c14aa3b6e0ab92244e7.png

图5-2 新增用户页面


f70f9179d734444db517ef75177d45af.png

图5-3 修改用户信息页面

5.2  用户在线留言管理

用户留言管理主页面如下图5-4所示,管理员登录后进入留言管理主页面,可以查看用户的留言、支持多条件模糊查询、并可以对留言的处理进度进行调整如下图5-5所示,以及删除留言等操作,主要是为了帮助管理员查看用户的留言,从而针对留言采取对应的措施。用户可以在前台发表留言,发表留言页面如图5-6所示。

349410862f3d442883fd368891b81eeb.png

图5-4 用户留言管理主页面

image.png

图5-5 调整留言状态

3bd73f485f47403b977cd07d09a13d9c.png

图5-6 前台用户发表留言页面

5.3  前台登录注册模块

如果车主还没有账号,可以通过注册一个新的账号并登录享受本平台提供的服务,注册页面如图5-7所示。用户登录成功后,会返回一个token作为身份令牌,前端再将token在请求拦截器中存进请求头信息中,后端根据token查询出对应的用户信息并返回,登录页面如图5-8所示,如果忘记了登录密码,还可以通过手机验证码找回密码,找回密码如图5-9所示。

image.png

图5-7 前台注册页面

image.png

图5-8 前台登录页面

image.png

图5-9前台找回密码页面

5.4  状态监控模块

以监控车辆状态为例,管理员登录后可以在车辆列表中查看具体的车辆信息如图5-10所示,也可以点击生成统计数据,并在ECharts提供的饼状图和柱状图上展示,如图5-11所示,可以对车辆状态进行宏观监控,主要是为了方便管理员对当前的车位、车辆状态有一个直观的认识。

image.png

图5-10 车辆信息列表页面


image.png

图5-11 统计数据展示页面

5.1 用户停放车辆实现

用户需要寻找车位停车时,登录本平台前台后,点击附近停车场,进入查看停车场列表页面如图5-12所示,选择一个停车场后进入该停车场内所有车位列表页面如图5-13所示,寻找一个空闲车位后点击使用按钮(也可以点击一键快速查找空闲车位),在弹窗中填写将要停放的车辆信息并提交后,就可以使用该车位了如图5-14所示。

image.png

图5-12 停车场列表页面

image.png

图5-13 车位列表页面


b3c6d4cab19c484b9573019b50aff1d2.png

图5-1 提交车辆信息页面

四,核心代码展示


package com.znz.web.controller.car;
import com.znz.car.domain.CarCar;
import com.znz.car.domain.vo.QueryCarListVo;
import com.znz.car.service.ICarCarService;
import com.znz.common.annotation.Log;
import com.znz.common.core.controller.BaseController;
import com.znz.common.core.domain.AjaxResult;
import com.znz.common.core.page.TableDataInfo;
import com.znz.common.enums.BusinessType;
import com.znz.common.utils.poi.ExcelUtil;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.security.access.prepost.PreAuthorize;
import org.springframework.web.bind.annotation.*;
import javax.servlet.http.HttpServletResponse;
import java.util.List;
/**
 * 车辆Controller
 *
 * @author znz
 * @date 2022-10-15
 */
@Api(tags = "车辆状态")
@RestController
@RequestMapping("/car/car")
public class CarCarController extends BaseController {
    @Autowired
    private ICarCarService carCarService;
    /**
     * 查询车辆列表
     */
    @ApiOperation("查询车辆列表")
    @PreAuthorize("@ss.hasPermi('car:carSta:list')")
    @GetMapping("/list")
    public TableDataInfo list(CarCar carCar) {
        startPage();
        List<QueryCarListVo> list = carCarService.selectCarCarList(carCar);
        return getDataTable(list);
    }
    /**
     * 导出车辆列表
     */
    @PreAuthorize("@ss.hasPermi('car:carSta:export')")
    @Log(title = "车辆", businessType = BusinessType.EXPORT)
    @PostMapping("/export")
    public void export(HttpServletResponse response, CarCar carCar) {
        List<QueryCarListVo> list = carCarService.selectCarCarList(carCar);
        ExcelUtil<QueryCarListVo> util = new ExcelUtil<QueryCarListVo>(QueryCarListVo.class);
        util.exportExcel(response, list, "车辆数据");
    }
    /**
     * 获取车辆详细信息
     */
    @PreAuthorize("@ss.hasPermi('car:carSta:query')")
    @GetMapping(value = "/{carId}")
    public AjaxResult getInfo(@PathVariable("carId") Long carId) {
        return AjaxResult.success(carCarService.selectCarCarByCarId(carId));
    }
    /**
     * 新增车辆
     */
    @PreAuthorize("@ss.hasPermi('car:carSta:add')")
    @Log(title = "车辆", businessType = BusinessType.INSERT)
    @PostMapping
    public AjaxResult add(@RequestBody CarCar carCar) {
        return toAjax(carCarService.insertCarCar(carCar));
    }
    /**
     * 修改车辆状态
     */
    @PreAuthorize("@ss.hasPermi('car:carSta:edit')")
    @Log(title = "车辆", businessType = BusinessType.UPDATE)
    @PutMapping
    public AjaxResult edit(@RequestParam("carId") Long carId,@RequestParam("carStatus")String carStatus) {
        CarCar carCar = new CarCar();
        carCar.setCarId(carId);
        carCar.setStatus(carStatus);
        return toAjax(carCarService.updateCarCar(carCar));
    }
    /**
     * 删除车辆
     */
    @PreAuthorize("@ss.hasPermi('car:carSta:remove')")
    @Log(title = "车辆", businessType = BusinessType.DELETE)
    @DeleteMapping("/{carIds}")
    public AjaxResult remove(@PathVariable Long[] carIds) {
        return toAjax(carCarService.deleteCarCarByCarIds(carIds));
    }
}
package com.znz.web.controller.car;
import com.znz.car.domain.CarCarpark;
import com.znz.car.service.ICarCarparkService;
import com.znz.common.annotation.Log;
import com.znz.common.constant.Constants;
import com.znz.common.core.controller.BaseController;
import com.znz.common.core.domain.AjaxResult;
import com.znz.common.core.page.TableDataInfo;
import com.znz.common.enums.BusinessType;
import com.znz.common.utils.poi.ExcelUtil;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.security.access.prepost.PreAuthorize;
import org.springframework.web.bind.annotation.*;
import javax.servlet.http.HttpServletResponse;
import java.util.List;
/**
 * 停车场Controller
 *
 * @author znz
 * @date 2022-10-14
 */
@Api(tags = "停车场表")
@RestController
@RequestMapping("/car/carpark")
public class CarCarparkController extends BaseController {
    @Autowired
    private ICarCarparkService carCarparkService;
    /**
     * 查询所有数据
     */
    @ApiOperation("查询所有停车场数据")
    @GetMapping("/getAll")
    public AjaxResult getAll() {
        List<CarCarpark> carParkList = carCarparkService.getAll();
        for (CarCarpark carCarpark : carParkList) {
            String photo = carCarpark.getPhoto();
            photo = Constants.PHOTO_PREFIX + photo;
            carCarpark.setPhoto(photo);
        }
        return AjaxResult.success().put("carParkList", carParkList);
    }
    /**
     * 查询停车场列表(带分页-后台)
     */
    @PreAuthorize("@ss.hasPermi('car:carpark:list')")
    @GetMapping("/list")
    public TableDataInfo list(CarCarpark carCarpark) {
        startPage();
        List<CarCarpark> list = carCarparkService.selectCarCarparkList(carCarpark);
        return getDataTable(list);
    }
    /**
     * 导出停车场列表
     */
    @PreAuthorize("@ss.hasPermi('car:carpark:export')")
    @Log(title = "停车场", businessType = BusinessType.EXPORT)
    @PostMapping("/export")
    public void export(HttpServletResponse response, CarCarpark carCarpark) {
        List<CarCarpark> list = carCarparkService.selectCarCarparkList(carCarpark);
        ExcelUtil<CarCarpark> util = new ExcelUtil<CarCarpark>(CarCarpark.class);
        util.exportExcel(response, list, "停车场数据");
    }
    /**
     * 获取停车场详细信息
     */
    @PreAuthorize("@ss.hasPermi('car:carpark:query')")
    @GetMapping(value = "/{carparkId}")
    public AjaxResult getInfo(@PathVariable("carparkId") Long carparkId) {
        return AjaxResult.success(carCarparkService.selectCarCarparkByCarparkId(carparkId));
    }
    /**
     * 新增停车场
     */
    @PreAuthorize("@ss.hasPermi('car:carpark:add')")
    @Log(title = "停车场", businessType = BusinessType.INSERT)
    @PostMapping
    public AjaxResult add(@RequestBody CarCarpark carCarpark) {
        return toAjax(carCarparkService.insertCarCarpark(carCarpark));
    }
    /**
     * 修改停车场
     */
    @PreAuthorize("@ss.hasPermi('car:carpark:edit')")
    @Log(title = "停车场", businessType = BusinessType.UPDATE)
    @PutMapping
    public AjaxResult edit(@RequestBody CarCarpark carCarpark) {
        return toAjax(carCarparkService.updateCarCarpark(carCarpark));
    }
    /**
     * 删除停车场
     */
    @PreAuthorize("@ss.hasPermi('car:carpark:remove')")
    @Log(title = "停车场", businessType = BusinessType.DELETE)
    @DeleteMapping("/{carparkIds}")
    public AjaxResult remove(@PathVariable Long[] carparkIds) {
        return toAjax(carCarparkService.deleteCarCarparkByCarparkIds(carparkIds));
    }
    /**
     *  分页查询停车场数据(前台)
     */
    @ApiOperation("前台-分页查询停车场列表")
    @GetMapping("/pageList")
    public TableDataInfo pageList(CarCarpark carCarpark) {
        startPage();
        List<CarCarpark> list = carCarparkService.selectCarCarparkList(carCarpark);
        for (CarCarpark carpark : list) {
            String photo = carpark.getPhoto();
            photo = Constants.PHOTO_PREFIX + photo;
            carpark.setPhoto(photo);
        }
        return getDataTable(list);
    }
}
package com.znz.web.controller.car;
import com.znz.car.domain.CarCarpark;
import com.znz.car.service.ICarCarparkService;
import com.znz.common.annotation.Log;
import com.znz.common.constant.Constants;
import com.znz.common.core.controller.BaseController;
import com.znz.common.core.domain.AjaxResult;
import com.znz.common.core.page.TableDataInfo;
import com.znz.common.enums.BusinessType;
import com.znz.common.utils.poi.ExcelUtil;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.security.access.prepost.PreAuthorize;
import org.springframework.web.bind.annotation.*;
import javax.servlet.http.HttpServletResponse;
import java.util.List;
/**
 * 停车场Controller
 *
 * @author znz
 * @date 2022-10-14
 */
@Api(tags = "停车场表")
@RestController
@RequestMapping("/car/carpark")
public class CarCarparkController extends BaseController {
    @Autowired
    private ICarCarparkService carCarparkService;
    /**
     * 查询所有数据
     */
    @ApiOperation("查询所有停车场数据")
    @GetMapping("/getAll")
    public AjaxResult getAll() {
        List<CarCarpark> carParkList = carCarparkService.getAll();
        for (CarCarpark carCarpark : carParkList) {
            String photo = carCarpark.getPhoto();
            photo = Constants.PHOTO_PREFIX + photo;
            carCarpark.setPhoto(photo);
        }
        return AjaxResult.success().put("carParkList", carParkList);
    }
    /**
     * 查询停车场列表(带分页-后台)
     */
    @PreAuthorize("@ss.hasPermi('car:carpark:list')")
    @GetMapping("/list")
    public TableDataInfo list(CarCarpark carCarpark) {
        startPage();
        List<CarCarpark> list = carCarparkService.selectCarCarparkList(carCarpark);
        return getDataTable(list);
    }
    /**
     * 导出停车场列表
     */
    @PreAuthorize("@ss.hasPermi('car:carpark:export')")
    @Log(title = "停车场", businessType = BusinessType.EXPORT)
    @PostMapping("/export")
    public void export(HttpServletResponse response, CarCarpark carCarpark) {
        List<CarCarpark> list = carCarparkService.selectCarCarparkList(carCarpark);
        ExcelUtil<CarCarpark> util = new ExcelUtil<CarCarpark>(CarCarpark.class);
        util.exportExcel(response, list, "停车场数据");
    }
    /**
     * 获取停车场详细信息
     */
    @PreAuthorize("@ss.hasPermi('car:carpark:query')")
    @GetMapping(value = "/{carparkId}")
    public AjaxResult getInfo(@PathVariable("carparkId") Long carparkId) {
        return AjaxResult.success(carCarparkService.selectCarCarparkByCarparkId(carparkId));
    }
    /**
     * 新增停车场
     */
    @PreAuthorize("@ss.hasPermi('car:carpark:add')")
    @Log(title = "停车场", businessType = BusinessType.INSERT)
    @PostMapping
    public AjaxResult add(@RequestBody CarCarpark carCarpark) {
        return toAjax(carCarparkService.insertCarCarpark(carCarpark));
    }
    /**
     * 修改停车场
     */
    @PreAuthorize("@ss.hasPermi('car:carpark:edit')")
    @Log(title = "停车场", businessType = BusinessType.UPDATE)
    @PutMapping
    public AjaxResult edit(@RequestBody CarCarpark carCarpark) {
        return toAjax(carCarparkService.updateCarCarpark(carCarpark));
    }
    /**
     * 删除停车场
     */
    @PreAuthorize("@ss.hasPermi('car:carpark:remove')")
    @Log(title = "停车场", businessType = BusinessType.DELETE)
    @DeleteMapping("/{carparkIds}")
    public AjaxResult remove(@PathVariable Long[] carparkIds) {
        return toAjax(carCarparkService.deleteCarCarparkByCarparkIds(carparkIds));
    }
    /**
     *  分页查询停车场数据(前台)
     */
    @ApiOperation("前台-分页查询停车场列表")
    @GetMapping("/pageList")
    public TableDataInfo pageList(CarCarpark carCarpark) {
        startPage();
        List<CarCarpark> list = carCarparkService.selectCarCarparkList(carCarpark);
        for (CarCarpark carpark : list) {
            String photo = carpark.getPhoto();
            photo = Constants.PHOTO_PREFIX + photo;
            carpark.setPhoto(photo);
        }
        return getDataTable(list);
    }
}
package com.znz.web.controller.car;
import com.znz.car.domain.CarMessage;
import com.znz.car.service.ICarMessageService;
import com.znz.common.annotation.Log;
import com.znz.common.core.controller.BaseController;
import com.znz.common.core.domain.AjaxResult;
import com.znz.common.core.page.TableDataInfo;
import com.znz.common.enums.BusinessType;
import com.znz.common.utils.poi.ExcelUtil;
import io.swagger.annotations.ApiOperation;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.security.access.prepost.PreAuthorize;
import org.springframework.web.bind.annotation.*;
import javax.servlet.http.HttpServletResponse;
import java.util.List;
/**
 * 留言Controller
 *
 * @author znz
 * @date 2022-10-17
 */
@RestController
@RequestMapping("/car/message")
public class CarMessageController extends BaseController {
    @Autowired
    private ICarMessageService carMessageService;
    /**
     * 查询留言列表
     */
    @PreAuthorize("@ss.hasPermi('car:message:list')")
    @GetMapping("/list")
    public TableDataInfo list(CarMessage carMessage) {
        startPage();
        List<CarMessage> list = carMessageService.selectCarMessageList(carMessage);
        return getDataTable(list);
    }
    /**
     * 导出留言列表
     */
    @ApiOperation("导出留言列表")
    @PreAuthorize("@ss.hasPermi('car:message:export')")
    @Log(title = "留言", businessType = BusinessType.EXPORT)
    @PostMapping("/export")
    public void export(HttpServletResponse response, CarMessage carMessage) {
        List<CarMessage> list = carMessageService.selectCarMessageList(carMessage);
        ExcelUtil<CarMessage> util = new ExcelUtil<CarMessage>(CarMessage.class);
        util.exportExcel(response, list, "留言数据");
    }
    /**
     * 获取留言详细信息
     */
    @PreAuthorize("@ss.hasPermi('car:message:query')")
    @GetMapping(value = "/{messageId}")
    public AjaxResult getInfo(@PathVariable("messageId") Long messageId) {
        return AjaxResult.success(carMessageService.selectCarMessageByMessageId(messageId));
    }
    /**
     * 新增留言
     */
    @PreAuthorize("@ss.hasPermi('car:message:add')")
    @Log(title = "留言", businessType = BusinessType.INSERT)
    @PostMapping
    public AjaxResult add(@RequestBody CarMessage carMessage) {
        return toAjax(carMessageService.insertCarMessage(carMessage));
    }
    /**
     * 修改留言
     */
    @PreAuthorize("@ss.hasPermi('car:message:edit')")
    @Log(title = "留言", businessType = BusinessType.UPDATE)
    @PutMapping
    public AjaxResult edit(@RequestBody CarMessage carMessage) {
        return toAjax(carMessageService.updateCarMessage(carMessage));
    }
    /**
     * 删除留言
     */
    @PreAuthorize("@ss.hasPermi('car:message:remove')")
    @Log(title = "留言", businessType = BusinessType.DELETE)
    @DeleteMapping("/{messageIds}")
    public AjaxResult remove(@PathVariable Long[] messageIds) {
        return toAjax(carMessageService.deleteCarMessageByMessageIds(messageIds));
    }
}

五,项目总结


通过社会调查发现,目前市面上的共享车位平台并不多,传统的人力管理模式仍是市场的主流,这样的管理模式存在着许多的问题,例如停车场管理员无法及时知晓车位出现损坏或者车辆出现故障等情况而造成车位资源长时间无法得到有效利用、车主无法及时获取停车场和停车场车位信息、出现故障还需要亲自去寻找停车场管理员反映故障情况。


开发本平台的目的就是解决上述诸多问题,用户只需要借助互联网就可以快速获取附近停车场、车位的综合信息,实现快速寻找空闲车位,解决了到达目的地后还需要盲目地寻找停车位置等问题。用户发现车辆或者设施出现故障后,可以在本平台的在线留言一栏进行留言,大大简化了寻找停车场管理员反映故障情况的过程。

相关文章
|
3月前
|
JavaScript 前端开发 开发者
VUE 开发——Node.js学习(一)
VUE 开发——Node.js学习(一)
97 2
|
17天前
|
JavaScript 关系型数据库 MySQL
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统,提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性,实现用户友好的界面,方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构,确保稳定性和多功能模块设计,涵盖管理员和用户功能模块,促进物品循环使用,降低开销,提升环保意识,助力绿色校园文化建设。
|
2月前
|
JavaScript 前端开发 持续交付
构建现代Web应用:Vue.js与Node.js的完美结合
【10月更文挑战第22天】随着互联网技术的快速发展,Web应用已经成为了人们日常生活和工作的重要组成部分。前端技术和后端技术的不断创新,为Web应用的构建提供了更多可能。在本篇文章中,我们将探讨Vue.js和Node.js这两大热门技术如何完美结合,构建现代Web应用。
45 4
|
3月前
|
JavaScript API
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
73 1
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
|
3月前
|
JavaScript Java PHP
快速对比:Django、Spring Boot、Node.js 和 PHP
快速对比:Django、Spring Boot、Node.js 和 PHP
119 7
|
4月前
|
JavaScript 前端开发
Vue、ElementUI配合Node、multiparty模块实现图片上传并反显_小demo
如何使用Vue和Element UI配合Node.js及multiparty模块实现图片上传并反显的功能,包括前端的Element UI组件配置和后端的Node.js服务端代码实现。
67 1
|
4月前
|
JavaScript 应用服务中间件 Linux
宝塔面板部署Vue项目、服务端Node___配置域名
本文介绍了如何使用宝塔面板在阿里云服务器上部署Vue项目和Node服务端项目,并配置域名。文章详细解释了安装宝塔面板、上传项目文件、使用pm2启动Node项目、Vue项目打包上传、以及通过Nginx配置域名和反向代理的步骤。
725 0
宝塔面板部署Vue项目、服务端Node___配置域名
|
4月前
|
JavaScript 前端开发
vue配合axios连接express搭建的node服务器接口_简单案例
文章介绍了如何使用Express框架搭建一个简单的Node服务器,并使用Vue结合Axios进行前端开发和接口调用,同时讨论了开发过程中遇到的跨域问题及其解决方案。
74 0
vue配合axios连接express搭建的node服务器接口_简单案例
|
5月前
|
JavaScript 前端开发 API
全栈开发革命来临!Vue.js与Node.js联手,打造前后端无缝对接的奇迹之作!
【8月更文挑战第30天】在Web开发领域,前后端分离与协作至关重要。Vue.js以其轻量级和易用性深受前端开发者喜爱,而Node.js则以高性能和事件驱动特性在后端领域崭露头角。二者结合开启了全栈开发新篇章,通过RESTful API或GraphQL实现高效稳定通信。本文以示例说明如何使用Vue.js和Node.js构建全栈应用,从前端Vue组件到后端Express服务器,展示了数据获取与展示的全过程。这种组合提供了一种高效简洁的全栈开发方案,使开发者能更专注于业务逻辑实现。
306 1
|
5月前
|
JavaScript
成功解决node、node-sass和sass-loader版本冲突问题、不需要降低node版本。如何在vue项目中安装node-sass,以及安装node-sass可能遇到的版本冲突问题
这篇文章介绍了在Vue项目中安装node-sass和sass-loader时遇到的版本冲突问题,并提供了解决这些问题的方法,包括在不降低node版本的情况下成功安装node-sass。
成功解决node、node-sass和sass-loader版本冲突问题、不需要降低node版本。如何在vue项目中安装node-sass,以及安装node-sass可能遇到的版本冲突问题