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

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

  • 一.创建springboot项目
  • 二.项目前期准备工作
    • 1. 修改springboot和jdk版本号
    • 2.Web请求处理
      • (1) 添加web依赖
      • (2) 测试是否能够成功访问
      • (3) 修改端口号
      • (4) 创建数据库
    • 3. 连接数据库
      • (1) 添加依赖
      • (2)配置application.properties文件
      • (3)添加包扫描 @MapperScan
      • (4)编写Dao包的Mapper接口文件
      • (5) 编写Pojo类---->User
      • (6) 编写UserWeb文件 , 测试数据库是否连接成功
  • 三. 创建前端vue项目
    • 1. 进入命令行(cmd)页面 , 创建并配置一个vue项目
      • (1) 创建一个vue项目
      • (3) 整理一下
      • (4) 尝试在idea中启动vue项目
  • 四. 引入Element
    • 1. 安装element
      • (1) 方法一
      • (2) 方法二(这种方法 在安装时不用将项目停下来--->后面用的都是这种方法)
      • (3) 在 main.js 中写入以下内容
      • (4) 测试是否引入element成功
  • 五. 前端配置
    • 1. 整理一下文件内容
      • (1) 改名
    • 2. 让数据库中的user表内容显示到页面上
      • (1) 直接引入element的表格
      • (2) 测试访问
  • *设置 访问的主页面 ---> 修改main.js文件*
      • (3) user表数据引入
        • ① 添加axios
        • ②解决跨域问题
  • 一些问题
    • springboot的Application.java文件(主程序启动类)运行不了

一.创建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.`就可以了@Resourceprivate 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"borderstyle="width: 100%"><el-table-columnfixedprop="date"label="日期"width="150"></el-table-column><el-table-columnprop="name"label="姓名"width="120"></el-table-column><el-table-columnprop="province"label="省份"width="120"></el-table-column><el-table-columnprop="city"label="市区"width="120"></el-table-column><el-table-columnprop="address"label="地址"width="300"></el-table-column><el-table-columnprop="zip"label="邮编"width="120"></el-table-column><el-table-columnfixed="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 {@Resourceprivate 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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/web/28089.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Validation校验

Validation校验

文章目录 Validation校验作用依赖坐标UserController接收客户端注册用户请求的方法请求参数封装实体User的结构校验分组 Validation校验 作用 服务端接收前端传递的请求从参数的时候&#xff0c;可以对请求参数进行自动校验。 场景&#xff1a;通过postman向服务端发送一个注…
阅读更多...
《检索技术核心20讲》进阶篇之LSM树

《检索技术核心20讲》进阶篇之LSM树

背景 学习极客实践课程《检索技术核心20讲》https://time.geekbang.org/column/article/215243&#xff0c;文档形式记录笔记。 内容 磁盘和内存数据读取特点 工业界中数据量往往很庞大&#xff0c;比如数据无法全部加载进内存&#xff0c;无法支持索引的高效实时更新&…
阅读更多...
视频格式转换avi格式怎么弄？分享视频转换方法

视频格式转换avi格式怎么弄？分享视频转换方法

视频格式转换avi格式怎么弄&#xff1f;AVI作为一种广泛支持的视频格式&#xff0c;能够在多种设备和播放器上顺畅播放&#xff0c;确保我们的视频内容能够无障碍地分享给朋友或上传至各大平台。其次&#xff0c;AVI格式通常具有较好的兼容性&#xff0c;能够避免格式转换过程中…
阅读更多...
修改yarn、npm、pnpm为国内镜像源

修改yarn、npm、pnpm为国内镜像源

国内由于网络的原因&#xff0c;使用官方的npm、yarn、pnpm访问下载依赖库会很慢&#xff0c;有时候还会出现无法访问的情况&#xff0c;这时候就需要我们给npm、yarn、pnpm换一个国内的镜像源的&#xff0c;一般的我们可以将镜像换成淘宝的源&#xff0c;由于平时比较常用到的…
阅读更多...
用飞书写博客,并自动部署

用飞书写博客,并自动部署

feishu-vitepress 用飞书写博客,并自动部署 目前的静态博客如vitepress&#xff0c;主要是用markdown来写内容。markdown虽然可读性比较好&#xff0c;但是在文章中贴图片有点麻烦&#xff0c;需要先保存图片到asset目录下&#xff0c;再在markdown中写图片地址。 平时工作主要…
阅读更多...
优化查询性能：DolphinDB 时间类型数据比较规则详解

优化查询性能：DolphinDB 时间类型数据比较规则详解

在数据库中&#xff0c;时间是一种常见的数据类型。在处理时间数据时&#xff0c;比较操作是非常常见的需求。然而&#xff0c;在不同的场景下&#xff0c;对时间类型数据进行比较时应用的规则不同。本文将从 DolphinDB 支持的时间类型开始&#xff0c;由浅入深分别介绍时间类型…
阅读更多...
47.PyCharm P版突然无法启动

47.PyCharm P版突然无法启动

目录 1.启动cmd.exe&#xff0c;进到pycharm\bin目录&#xff0c;启动.\pycharm.bat&#xff0c;如果正常&#xff0c;就像下面这个样子&#xff0c;如果不正常&#xff0c;则会报错&#xff0c; 2.用记事本打开pycharm.bat文件&#xff0c;加上以下代码后 今晨&#xff0c;无…
阅读更多...
《C++ Primer》导学系列：第 3 章 - 字符串、向量和数组

《C++ Primer》导学系列：第 3 章 - 字符串、向量和数组

3.1 命名空间的使用 概述 命名空间是C中的一种机制&#xff0c;用于组织代码并避免名字冲突。通过使用命名空间&#xff0c;可以将全局作用域中的标识符组织到逻辑分组中&#xff0c;从而提高代码的可读性和可维护性。命名空间在大型项目中尤为重要&#xff0c;因为它们可以防…
阅读更多...
关于C#导出Word时报错“{00020970-0000-0000-C000-000000000046}加载类型库/DLL 时出错”的解决办法

关于C#导出Word时报错“{00020970-0000-0000-C000-000000000046}加载类型库/DLL 时出错”的解决办法

之前还运行正常的程序&#xff0c;突然发现导出Word的时候会报错&#xff0c;报错内容&#xff1a; System.InvalidCastException:“Unable to cast COM object of type ‘Microsoft.Office.Interop.Word.ApplicationClass’ to interface type ‘Microsoft.Office.Interop.Wor…
阅读更多...
ubuntu18.04 配置 mid360并测试fast_lio

ubuntu18.04 配置 mid360并测试fast_lio

1.在买到Mid360之后&#xff0c;我们可以看到mid360延伸出来了三组线。 第一组线是电源线&#xff0c;包含了红色线正极&#xff0c;和黑色线负极。一般可以用来接9-27v的电源&#xff0c;推荐接12v的电源转换器&#xff0c;或者接14.4v的电源转换器。 第二组线是信号线&#x…
阅读更多...
CSS概述

CSS概述

CSS是一种样式表语言&#xff0c;用于为HTML文档控制外观&#xff0c;定义布局。例如&#xff0c; CSS涉及字体、颜色、边距、高度、宽度、背景图像、高级定位等方面 。 ● 可将页面的内容与表现形式分离&#xff0c;页面内容存放在HTML文档中&#xff0c;而用 于定义表现形式…
阅读更多...
本学期嵌入式期末考试的综合项目，我是这么出题的

本学期嵌入式期末考试的综合项目，我是这么出题的

时间过得真快&#xff0c;临近期末&#xff0c;又到了老师出卷的时候。作为《嵌入式开发及应用》这门课的主讲教师&#xff0c;今年给学生出的题目有一点点难度&#xff0c;最后的综合项目要求如下所示&#xff0c;各位学生朋友和教师同行可以评论一下难度如何&#xff0c;单片…
阅读更多...
【推荐算法】召回模型总结

【推荐算法】召回模型总结

文章目录 1、传统召回算法2、向量化召回统一建模架构2.1、如何定义正样本2.2、重点关注负样本2.3、召回生成Embedding&#xff1a;要求用户、物料解耦2.4、如何定义优化目标2.4.1、Softmax Loss、NCE Loss、NEG Loss2.4.2、Sampled Softmax Loss2.4.3、Pairwise Loss 3、Word2V…
阅读更多...
量化交易入门——盘口

量化交易入门——盘口

今天接着上一期讲解开盘定势的种类&#xff0c;在讲之前&#xff0c;科普一下“盘口五档”的成交知识。 每个炒股软件上&#xff0c;都会有某只个股的成交信息&#xff0c;在其中会出现一个五档的行情列表&#xff0c;里面列出了买家和卖家各五个价格及其对应的数量。这五档价…
阅读更多...
Docker 基础使用（5）Compose

Docker 基础使用（5）Compose

文章目录 Docker Compose 基础认识Docker Compose 基础语法Docker Compose 基础指令Docker Compose 使用实例 Docker 基础使用(0&#xff09;基础认识 Docker 基础使用(1&#xff09;使用流程概览 Docker 基础使用(2&#xff09;镜像与容器 Docker 基础使用(3&#xff09;存储卷…
阅读更多...
【教程】使用立创EDA打开JSON格式的PCB及原理图

【教程】使用立创EDA打开JSON格式的PCB及原理图

这里写目录标题 一、将PCB和原理图放同一文件夹二、打开嘉立创EDA并导入.zip文件三、选择.zip文件并选择 “导入文件并提取库” 一、将PCB和原理图放同一文件夹 并打包成.zip文件 二、打开嘉立创EDA并导入.zip文件 嘉立创 我这里用的网页端&#xff0c;客户端下载页面拉到…
阅读更多...
FreeRTOS简单内核实现6 优先级

FreeRTOS简单内核实现6 优先级

文章目录 0、思考与回答0.1、思考一 1、就绪链表1.1、创建1.2、初始化1.3、添加任务1.3.1、prvAddNewTaskToReadyList( )1.3.2、prvAddTaskToReadyList( ) 1.4、寻找最高优先级任务 2、修改内核程序2.1、TCB2.2、xTaskCreateStatic( )2.3、prvInitialiseNewTask( )2.4、vTaskSt…
阅读更多...
[Qt的学习日常]--常用控件1

[Qt的学习日常]--常用控件1

前言 作者&#xff1a;小蜗牛向前冲 名言&#xff1a;我可以接受失败&#xff0c;但我不能接受放弃 如果觉的博主的文章还不错的话&#xff0c;还请点赞&#xff0c;收藏&#xff0c;关注&#x1f440;支持博主。如果发现有问题的地方欢迎❀大家在评论区指正 目录 一、什么是控…
阅读更多...
运算符与表达式

运算符与表达式

运算符和表达式是C语言编程的基础构建块&#xff0c;它们共同构成了C语言程序的核心逻辑和计算。理解和掌握运算符和表达式的相关知识&#xff0c;对于编写高效、易读的C语言代码至关重要。 一、运算符概述 运算符是C语言中用于执行各种操作的符号&#xff0c;它们可以对变量、…
阅读更多...
python错题（1）

python错题（1）

字典中min&#xff0c;max最后比较的是键&#xff0c;输出的是键
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023