一. 做一个前后端分离的电商项目(技术栈 : springboot+mybatis-plus+vue) 的前期准备

最新推荐文章于 2024-07-19 17:18:18 发布
最新推荐文章于 2024-07-19 17:18:18 发布
阅读量667 收藏 16
点赞数 24
分类专栏： springboot+vue小项目 文章标签： spring boot mybatis vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_67466364/article/details/139331720
版权

前期准备 ---- 项目创建和配置

一.创建springboot项目

可以在idea中直接创建 , 也可在官网创建一个springboot项目

  • idea中创建一个springboot项目
    在这里插入图片描述

在这里插入图片描述

  • 在官网中创建一个springboot项目
    项目创建网址 : https://start.spring.io/

在这里插入图片描述

二.项目前期准备工作

1. 修改springboot和jdk版本号

(修改为自己常用的版本即可)
在这里插入图片描述

2.Web请求处理

(1) 添加web依赖

  • 在pom.xml文件中添加web依赖
    //我们要做前后端的电商项目---->所以需要web
<dependency>
	<groupId>org.springframework.boot</groupId>
	<artifactId>spring-boot-starter-web</artifactId>
</dependency>

(2) 测试是否能够成功访问

这时 , 要做个测试 , 看看项目能否成功启动

  • 创建一个web包 , 在web包中创建一个UserWeb.java文件

//路径如下 :
src/main/java/com/example/end_termtest/web/UserWeb.java
在这里插入图片描述

//内容如下 :
@RestController 注解 : 标记一个控制器类 , 并直接返回数据
@RequestMapping 注解 : 映射http请求

package com.example.end_termtest.web;

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@RequestMapping("/back")
public class UserWeb {
    @RequestMapping("/user")
    public String user(){
        return "test data";
    }
}
  • 访问一下 , 如图既是springboot项目启动正常
    在这里插入图片描述

(3) 修改端口号

为什么要修改端口号 ?
因为 , 前端默认端口号也是8080 , 所以在这把后端的端口号改了 , 前端就不用改了

//application.properties
server.port=9090

(4) 创建数据库

  • 创建数据库
    在这里插入图片描述
  • 建表
DROP TABLE IF EXISTS `user`;
CREATE TABLE `user` (
  `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '用户表id',
  `username` varchar(50) NOT NULL COMMENT '用户名',
  `password` varchar(50) NOT NULL COMMENT '用户密码',
  `email` varchar(50) DEFAULT NULL COMMENT '邮箱',
  `phone` varchar(20) DEFAULT NULL COMMENT '电话',
	`r_id` int,
	`status` int,
  `create_time` timestamp NULL DEFAULT NULL COMMENT '创建时间',
  `update_time` timestamp NULL DEFAULT NULL COMMENT '最后一次更新时间',
  PRIMARY KEY (`id`),
  KEY `username` (`username`) USING BTREE
) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=utf8;

3. 连接数据库

(1) 添加依赖

//mybatis plus
用mybatis plus 实现数据操作(如 : 增删改查)

<!-- https://mvnrepository.com/artifact/com.baomidou/mybatis-plus-boot-starter -->
	<dependency>
	<groupId>com.baomidou</groupId>
	<artifactId>mybatis-plus-boot-starter</artifactId>
	<version>3.5.2</version>
</dependency>

//mysql

<!-- https://mvnrepository.com/artifact/mysql/mysql-connector-java -->
<dependency>
	<groupId>mysql</groupId>
	<artifactId>mysql-connector-java</artifactId>
	<version>5.1.47</version>
</dependency>

//lombok

<!-- https://mvnrepository.com/artifact/org.projectlombok/lombok -->
<dependency>
	<groupId>org.projectlombok</groupId>
	<artifactId>lombok</artifactId>
	<version>1.18.24</version>
	<scope>provided</scope>
</dependency>

(2)配置application.properties文件

spring.datasource.driver-class-name=com.mysql.jdbc.Driver
#jdbc:mysql://127.0.0.1:3306/要连接数据库的名称?useUnicode=true&characterEncoding=utf8&useSSL=false
spring.datasource.url=jdbc:mysql://127.0.0.1:3306/shop?useUnicode=true&characterEncoding=utf8&useSSL=false
#自己数据库的用户名
spring.datasource.username=root
#自己数据库的密码
spring.datasource.password=1234
#实体类的路径
mybatis-plus.type-aliases-package=com.example.end_termtest.pojo
#进行sql语句的打印
logging.level.com.example.end_termtest.dao:debug

(3)添加包扫描 @MapperScan

在主启动类中标注@MapperScan包扫描 , 将需要加入到spring容器中的接口的路径写在@MapperScan("")中(一般这些Mapper接口都在一个包中 , 所以直接写包路径即可)

//在…Application.java文件中添加下面代码

//com.example.end_termtest.dao 是Mapper类的包路径(也就是你要扫描的包--->Mapper接口所在的包的路径)
@MapperScan("com.example.end_termtest.dao")

//…Applicaion.java文件的全部代码如下 :
//我的是 EndTermTestApplication.java

package com.example.end_termtest;

import org.mybatis.spring.annotation.MapperScan;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication	//标识一个主程序启动类(里面内嵌了很多功能注解)
@MapperScan("com.example.end_termtest.dao")
public class EndTermTestApplication {

    public static void main(String[] args) {
        SpringApplication.run(EndTermTestApplication.class, args);
    }

}

(4)编写Dao包的Mapper接口文件

package com.example.end_termtest.dao;

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.example.end_termtest.pojo.User;

//接口继承BaseMapper---->里面有我们做数据操作的方法--->继承了 直接用即可
//<User> ---->User是实体类---->由我们自己编写(就是与数据库中user表相映射的类)
public interface UserDao extends BaseMapper<User> {
}

(5) 编写Pojo类---->User

package com.example.end_termtest.pojo;

import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableField;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import com.fasterxml.jackson.annotation.JsonFormat;
import lombok.Data;

import java.time.LocalDateTime;

@Data
@TableName("user")
public class User {
//	 @TableId用来标识主键
//		value映射主键字段的名字
//		type 设置主键类型、主键的生成策略
    @TableId(value = "id",type = IdType.AUTO)
    private Integer id;
    private String username;
    private String password;
    private String email;
    private String phone;
    @TableField("r_id")
    private Integer rId;
    private Integer status;
//	  @TableField注解 如果数据库和实体类的字段名不一致，可以使用@TableField注解指定数据库表中字段名。
    @TableField("create_time")
//	  @JsonFormat 时间格式化注解---->让时间输出为pattern指定的格式 (如果不用@JsonFormat注解,输出的时间就不是yyyy-mm-dd HH:mm:ss这个格式 , 可能是英文格式的时间)
//    pattern用来是定时间模式
    @JsonFormat(pattern = "yyyy-mm-dd HH:mm:ss")
    private LocalDateTime createTime;
    @TableField("update_time")
    @JsonFormat(pattern = "yyyy-mm-dd HH:mm:ss")
    private LocalDateTime updateTime;
}

(6) 编写UserWeb文件 , 测试数据库是否连接成功

@Resource 自动装配到spring容器中

package com.example.end_termtest.web;

import com.example.end_termtest.dao.UserDao;
import com.example.end_termtest.pojo.User;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;

import javax.annotation.Resource;
import java.util.List;

@RestController
@RequestMapping("/back")
public class UserWeb {

//	比如这个 , 会将UserDao接口自动装配到spring容器中 , 然后下面要用UserDao中的方法 直接`dao.`就可以了
    @Resource
    private UserDao dao;
    
    @RequestMapping("/user")
    public List<User> user(){
    	//selectList是BaseMapper接口中的方法
        return dao.selectList(null);
    }
}
  • 运行 , 能查询到数据库user表中的内容 , 证明连接数据库成功
    在这里插入图片描述

三. 创建前端vue项目

1. 进入命令行(cmd)页面 , 创建并配置一个vue项目

(1) 创建一个vue项目

vue create 项目名称
在这里插入图片描述

  • 按 回车 进行确定
    在这里插入图片描述

  • 只选择下面三项 , 千万不要选linter在这里插入图片描述

  • 选版本 vue2
    在这里插入图片描述

  • 选 in package.json
    在这里插入图片描述

  • 创建成功
    在这里插入图片描述

  • 运行完成之后 , 可以看到有两条命令
    cd demo002
    npm run serve
    输入这两行命令 , 即可运行vue项目

(3) 整理一下

在这里插入图片描述

  • 我就是把两个项目文件 一整个 移到了空项目文件下
    在这里插入图片描述

(4) 尝试在idea中启动vue项目

在这里插入图片描述

  • 启动成功
    在这里插入图片描述

四. 引入Element

1. 安装element

(1) 方法一

在这里插入图片描述

(2) 方法二(这种方法 在安装时不用将项目停下来—>后面用的都是这种方法)

  • 在命令行界面(win+R—>cmd) 输入 vue ui命令(在进行下面操作的时候不要把命令行界面关上!!!)
  • 点击左下角的小房子
    在这里插入图片描述
  • 导入vue文件
    在这里插入图片描述
  • 安装element ui
    在这里插入图片描述

在这里插入图片描述

(3) 在 main.js 中写入以下内容

element官网—快速上手 : https://element.eleme.cn/#/zh-CN/component/quickstart
在这里插入图片描述

(4) 测试是否引入element成功

在这里插入图片描述
在这里插入图片描述

五. 前端配置

1. 整理一下文件内容

  • App.vue
<template>
  <div id="app">
    <router-view/>
  </div>
</template>

(1) 改名

  • HomeView.vue ----> 改名为UserView.vue
<template>

</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'UserView',
  components: {
  }
}
</script>
  • 路由修改 vue/src/router/index.js
    在这里插入图片描述

2. 让数据库中的user表内容显示到页面上

(1) 直接引入element的表格

  • 我用的是这个(用哪个都行) —> 找到喜欢的 , 点击显示代码 , 把需要的代码 粘贴到idea中即可
    在这里插入图片描述

  • 引入到idea中的 UserView.vue文件内容如下 :

<template>
  <el-table
      :data="tableData"
      border
      style="width: 100%">
    <el-table-column
        fixed
        prop="date"
        label="日期"
        width="150">
    </el-table-column>
    <el-table-column
        prop="name"
        label="姓名"
        width="120">
    </el-table-column>
    <el-table-column
        prop="province"
        label="省份"
        width="120">
    </el-table-column>
    <el-table-column
        prop="city"
        label="市区"
        width="120">
    </el-table-column>
    <el-table-column
        prop="address"
        label="地址"
        width="300">
    </el-table-column>
    <el-table-column
        prop="zip"
        label="邮编"
        width="120">
    </el-table-column>
    <el-table-column
        fixed="right"
        label="操作"
        width="100">
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
        <el-button type="text" size="small">编辑</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'UserView',
  components: {
  },
  methods: {
    handleClick(row) {
      console.log(row);
    }
  },
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-04',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1517 弄',
        zip: 200333
      }, {
        date: '2016-05-01',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1519 弄',
        zip: 200333
      }, {
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1516 弄',
        zip: 200333
      }]
    }
  },

}
</script>

(2) 测试访问

  • 方法一 : 修改路由 (推荐)
    http://localhost:8080/user

修改index.js文件 ----> 添加路由在这里插入图片描述

  • 方法二 : 也可以修改主页面 , 让程序运行之后 , 直接跳转到UserView页面(也就是用UserView代替App.view)

修改main.js文件

设置 访问的主页面 —> 修改main.js文件

怎么做?
main.js文件做一点修改即可 注意 : 这是在main.js文件中直接进行挂载 ----> 非主页面 , 通常使用的是修改router(路由)的方法 ----> 这里只是介绍一个挂载页面的方法
在这里插入图片描述
在这里插入图片描述

(3) user表数据引入

① 添加axios

在这里插入图片描述

  • 添加axios插件
    下载安装—>完成安装
    在这里插入图片描述
  • 添加 axios 依赖

在这里插入图片描述

②解决跨域问题
  • UserView.vue中添加如下代码
    在这里插入图片描述
created() {
    axios.get("http://127.0.0.1:9090/back/user").then(e=>{
      console.log(e)
    })
  },
  • 问题
    运行之后 , 会有报错
    因为我们之前将后端的端口号设为了9090
    而前端的端口号为8080
    所以会有跨域问题的出现

在这里插入图片描述

  • 解决

在 UserDao文件中 添加 @CrossOrigin("*") 注解

package com.example.end_termtest.web;

import com.example.end_termtest.dao.UserDao;
import com.example.end_termtest.pojo.User;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;

import javax.annotation.Resource;
import java.util.List;

@RestController
@CrossOrigin("*")
@RequestMapping("/back")
public class UserWeb {
    @Resource
    private UserDao dao;
    @RequestMapping("/user")
    public List<User> user(){
        return dao.selectList(null);
    }
}

之后 , 重新运行springboot和vue项目 —> 即可成功将数据库中的数据放到页面显示
在这里插入图片描述

至此 , springboot和vue都可以运行成功 , 且mysql上的数据可以显示到页面上了

一些问题

springboot的Application.java文件(主程序启动类)运行不了

在这里插入图片描述

问题 : 我发现我没有maven插件没有安装
解决 : ctrl+shift+A —> maven —> add maven projects —>选择对应的pom.xml

_小杜小杜_
关注
  • 24
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
外卖点餐系统，后端：springboot+mybatis+mybatis-plus 前端：vue+elmen
05-08
后端使用Spring Boot作为开发框架，Spring Boot是一个轻量级的框架，易于学习和使用，可以快速搭建项目。它提供了自动配置、快速开发、易于部署等特点，特别适合于构建微服务架构。Spring Boot支持多种数据库，包括...
毕设项目：基于SpringBoot+MyBatis-Plus 前后端分离的影院选座购票系统.zip
06-28
资源项目的难度比较适中，内容都是经过助教老师审定过的，应该能够满足学习、使用需求，如果有需要的话可以放心下载使用。有任何问题也可以随时私信博主，博主会第一时间给您解答！！！ 本资源中的源码都是经过本地...
SpringBoot+SpringCloud+Mybatis+Vue电商项目实战，附视频+源码+文档，包含所有主流技术栈...
架构文摘
07-25 1058
今天给大家分享一个电商项目--- 畅购商城。项目采用前后端分离的技术架构。采用SpringBoot+SpringCloud+Mybatis+Vue为主要技术栈，包括了大型商城的主要功能、难点功能以及复杂业务功能，涉及到了Oauth2、JWT令牌、MQ的可靠性投递、流量削峰、秒杀、支付、集群、redis哨兵、lua脚本、缓存击穿&雪崩，分布式文件存储等内容。采用Do...
Spring boot +Vue3.x +Element Plus 前后分离管理项目
目不识丁
12-26 935
​ 项目介绍 mooding-boot 是一个轻量级的，前后端分离的J2EE快速开发平台，致力于做更简洁的快速开发平台。 每次做项目都要去找很久适合自己的项目，有时候找到的项目技术相对比较滞后，有时候前端后和后端项目不是同时让自己满意，因此利用休息日自己撸了一个比较简洁的项目，供自己和想自己的小伙伴参考使用。 该项目前端采用时比较新颖的vue3.x和element plus去做的，至少最近三年vue3.x是使用比较多的前端框架，项目实现的功能比较简单，学习和理解都比较容易，方便后续实现不同项目的业.
推荐一款基于 SpringBoot + Vue 的前后端分离实战项目！技术主流，文档很全！
Java后端技术
01-08 772
往期热门文章：1、告别丑陋判空，一个Optional类就能搞定！ 2、慎用BeanUtils，性能真的拉跨！ 3、千万不要把 Request 传递到异步线程里面！有坑！ 4、新来的CTO规定所有接口都用POST请求... 5、Java枚举意外触发了Mybatis Plus的BUG最近无意间发现了一个有意思的开源项目，基于 SpringBoot + Vue实现，技术栈很主流，文档也很全，这里给大家分...
springboot+vue前后端分离实战
羽``空的博客
01-23 995
一 简述 现在公司开发的模式普遍都是前后端分离的模式了，网上也有许许多多前后端的开源项目，但是毕竟不是自己写的，许多知识点也不清楚，每个知识点在项目中怎么用，了解的也不是很清楚，so，笔者决定自己写一套前后端分离的项目，也算是对自己知识的一个阶段性总结吧。 二 项目技术栈 vue emement-ui axios vuex js-cookie springboot spring security redis druid mybatis plus 三 项目截图 四
基于SpringBoot+MyBatis-Plus+Vue+element ui的前后端分离的影院选座购票系统源码.zip
05-27
本项目是一个完整的影院选座购票系统，采用现代技术栈实现，包括后端的SpringBoot、MyBatis-Plus，以及前端的Vue.js和Element UI。下面将分别介绍这些技术及其在系统中的应用。 1. **SpringBoot**： SpringBoot是...
Spring Boot 实现统一异常处理：构建健壮的应用
心猿意码
07-12 540
首先，定义一些自定义异常类，以便在业务逻辑中抛出特定类型的异常。例如：Java深色版本5 }6}为了使前端能够更好地理解和处理后端返回的错误信息，可以定义一个统一的错误响应对象：Java深色版本4 // 构造函数、getters和setters省略5}并在异常处理方法中返回此格式的对象：Java深色版本4712 }1314 // 其他异常处理方法...15}如果你想在发生错误时返回自定义的HTML页面，可以将页面放在目录下。
Spring Boot项目中使用MyBatis Generator (MBG) 自动生成Mapper文件
最新发布
zuihongyan518的博客
07-19 380
Spring Boot项目中使用MyBatis Generator (MBG) 自动生成Mapper文件可以很大程度上减少编码。本文着重介绍如何在实战中使用MGB自动生成Mapper文件
自己动手写一个滑动验证码组件（后端为Spring Boot项目）
左直拳的马桶_日用桶
07-13 878
近期参加的项目，主管丢给我一个任务，说要支持滑动验证码。我身为50岁的软件攻城狮，当时正背着双手，好像一个受训的保安似的，中规中矩地参加每日站会，心想滑动验证码在今时今日已经是标配了，司空见惯，想必网上一搜一大把，岂非手到擒来。so easy，妈妈再也不用担心我的工作与学习。孰料在网上寻寻觅觅点点击击，结果就是凄凄惨惨戚戚。好像提的最多的就是AJ-Captcha，但居然貌似下线了，文档打不开，demo也不见。还有一个声称可能是最好的滑动验证码，但好像很复杂，并且日本少女漫画风，跟我有代沟。
spring boot实现短信验证码功能
德乐懿的博客
07-11 757
请注意，上述代码是一个简化的示例，你可能需要根据你的具体需求进行调整。你需要将SDK添加到你的Spring Boot项目中，并配置好相应的参数，如API密钥、签名名称等。在发送短信和验证验证码的过程中，可能会遇到各种错误和异常情况，如网络错误、短信发送失败等。在你的Spring Boot应用中，你需要创建一个接口来处理短信验证码的发送请求。你需要选择一个可靠的短信服务提供商，如阿里云的短信服务、腾讯云的短信服务等。在发送接口中，你需要调用短信服务提供商的API来发送包含验证码的短信到用户的手机上。
解决宝塔Spring Boot项目获取不到环境变量的问题
Takumilove的博客
07-16 225
文件中设置的Linux环境变量的问题。虽然在SSH终端中可以正常获取，但在通过宝塔面板启动的Spring Boot项目中，环境变量却无法被读取。文件，只需要在宝塔面板中配置项目的执行命令时，增加环境变量设置即可。这是一种较为直接和简便的方法，能够迅速解决环境变量无法获取的问题。通过直接设置环境变量，可以有效解决Spring Boot项目无法获取环境变量的问题，这种方法简单直接。找到你要修改的Spring Boot项目，点击项目右侧的“设置”按钮。在项目启动命令中，添加环境变量的设置。
【Spring Boot 自定义配置项详解】
武帝为此的博客
07-19 307
除了使用@Value和注解外，还可以通过自定义配置类的方式来管理配置项。
Spring Boot 注解 @PostConstruct 介绍
訾博（ZiBo）的博客
07-17 920
注解用于标注在方法上，这个方法会在依赖注入完成后自动执行。它通常用于执行一些初始化操作，比如设置一些初始值、启动定时任务、初始化数据库连接等。使用方法不能有参数；方法返回类型必须是void；方法不能抛出受检异常（checked exceptions）；方法可以是public、protected、package-private或者private；方法可以是static，但通常不推荐使用static方法，因为静态方法无法被容器管理。这是一个很好的问题。让我们深入探讨一下的执行时机。
Spring Boot app: Failed to determine a suitable driver class
Keven_6的博客
07-16 336
我尝试连接springboot；当我运行时，出现错误“Failed to configure a DataSource: ‘url’ attribute is not specified and no embedded datasource could be configured."”application.yml 应用程序.yml。删除application.yml中的druid。
Django+vue自动化测试平台（28）-- ADB获取设备信息
测试小老弟的博客
07-17 250
adb的全称为Android Debug Bridge，就是起到调试桥的作用。通过adb可以在Eclipse中通过DDMS来调试Android程序，说白了就是调试工具。adb的工作方式比较特殊，采用监听Socket TCP 5554等端口的方式让IDE和Qemu通讯，默认情况下adb会daemon相关的网络端口，所以当我们运行Eclipse时adb进程就会自动运行。
使用Vue实现点击页面触发特效
qq_45569925的博客
07-19 597
在页面上的指定区域内进行点击，则会在页面上显示设置好的随机文本，此文本出现后会执行动画，动画效果为节点在1s之内向右上方移动并在移动的过程中完成180°翻转，最后消失。
基于vue2+element+springboot+mybatis-plus+mysql做一个商城 免费源码
07-24
很抱歉，我无法提供具体的免费源码。但是，我可以为你提供一些指导来帮助你搭建基于Vue2、Element、Spring Boot、MyBatis-Plus和MySQL的商城系统。 首先，你可以按照以下步骤进行开发： 1. 设置前端项目：使用Vue CLI创建一个新的Vue项目并安装Element UI库，这将为你提供用户界面组件和样式。 2. 开发前端页面：根据商城的需求，设计和开发前端页面，包括商品列表、购物车、订单等功能。使用Element UI的组件和样式来构建用户友好的界面。 3. 创建后端项目：使用Spring Initializr创建一个新的Spring Boot项目，并添加必要的依赖，如Spring Web、MyBatis-Plus和MySQL驱动程序。 4. 配置数据库：在MySQL中创建一个数据库，并配置Spring Boot应用程序的数据库连接。使用MyBatis-Plus来简化数据库操作，包括数据表映射、CRUD操作等。 5. 开发后端接口：根据商城的需求，设计和开发后端接口，包括商品查询、购物车管理、订单处理等功能。使用Spring Boot的注解来定义RESTful API，并调用MyBatis-Plus进行数据库操作。 6. 前后端交互：通过HTTP请求将前端页面与后端接口连接起来。在Vue项目中使用Axios库来发送和接收数据，并处理响应结果。 7. 测试和部署：对商城系统进行测试，确保功能正常运行。使用适当的工具和平台，将前端和后端部署到生产环境中。 请注意，这只是一个大致的指导，具体的实现细节可能会因项目需求和个人偏好而有所不同。你需要根据自己的情况进行适当的调整和扩展。如果你在具体实现中遇到问题，可以随时向我提问，我会尽力帮助你。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值