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

news2024/10/6 2:17:57

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

  • 一.创建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.`就可以了
    @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

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【R语言】数据可视化分析和统计检验——线性和线性混合效应模型

R语言数据可视化分析和统计检验 写在前面1、数据读取及分析2、组间均值和标准差统计分析3、图像数据探索3.1 图像绘制&#xff08;查看是否存在极端数据&#xff0c;以及数据分布情况&#xff09;3. 2 数据标准化&#xff08;Z-scores&#xff09;3.3 绘制数据相关性 4、ggplot…

使用 Python 进行测试(4)为什么要测试?测什么?

总结 要知道测试的内容&#xff0c;首先要知道测试的原因。下面是测试的几个主要目的&#xff1a; 避免回归质量管理匹配规格淡化责任让你放心学习测试选中一个框 你为什么要测试&#xff1f; 要决定测试什么、测试多少以及以什么顺序测试&#xff0c;您需要首先弄清楚测试的…

Docker部署Nginx下载站点服务

1、下载镜像 由于docker官方镜像站点被封了&#xff0c;所以我把镜像上传到阿里云镜像仓库了 docker pull registry.cn-hangzhou.aliyuncs.com/qinzt-tools/file-nginx:1.18.02、运行容器实例 运行变量解释&#xff1a; 变量名称默认值解释USERhyadmin访问下载站点的认证用…

Java--Arrays类

1.数组的工具java.util.Arrays 2.由于数组对象本身并没有什么方法可以供我们调用&#xff0c;但API中提供了一个工具类Arrays供我们使用&#xff0c;从而可以对数据对象进行一些基本的操作。 3.查看JDK帮助文档 4.Arrays类中的方法都是static修饰静态的静态方法&…

Java高频面试题整理(几万字)

&#x1f469;&#x1f3fb; 作者&#xff1a;一只IT攻城狮 &#xff0c;关注我不迷路 ❤️《java面试核心知识》突击系列&#xff0c;持续更新… &#x1f490; 面试必知必会学习路线&#xff1a;Java技术栈面试系列SpringCloud项目实战学习路线 &#x1f4dd;再小的收获x365天…

Golang: 依赖注入与wire —— 构建高效模块化应用的秘诀

&#x1f49d;&#x1f49d;&#x1f49d;欢迎莅临我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:「stormsha的主页」…

【AI基础】第六步:纯天然保姆喂饭级-安装并运行qwen2-7b

整体步骤类似于 【AI基础】第五步&#xff1a;纯天然保姆喂饭级-安装并运行chatglm3-6b-CSDN博客。 此系列文章列表&#xff1a; 【AI基础】概览 【AI基础】第一步&#xff1a;安装python开发环境-windows篇_下载安装ai环境python 【AI基础】第一步&#xff1a;安装python开发环…

Java17 --- SpringSecurity之前后端分离处理

目录 一、实现前后端分离 1.1、导入pom依赖 1.2、认证成功处理 1.3、认证失败处理 1.4、用户注销处理 1.5、请求未认证处理 1.6、跨域处理 1.7、用户认证信息处理 1.8、会话并发处理 一、实现前后端分离 1.1、导入pom依赖 <dependency><groupId>co…

ComfyUI

文章目录 一、关于 ComfyUI特点快捷键QA你为什么做这个&#xff1f;这是给谁的&#xff1f; 二、安装1、Windows直接链接下载如何在另一个UI和ComfyUI之间共享模型&#xff1f; 2、Jupyter Notebook3、手动安装&#xff08;Windows、Linux&#xff09;AMD GPU&#xff08;仅Lin…

MEMS:Lecture 18 Feedback

讲义 Linear feedback MEMS热板 Hotplate MEMS&#xff08;微机电系统&#xff09;热板是现代气体传感器的重要组成部分。它们通过加热一种活性材料来工作&#xff0c;这种材料与气体发生反应&#xff0c;从而改变其电阻。电阻的变化可以用来检测和测量特定气体的存在和浓度。…

讨论C++模板

讨论C模板 函数重载和泛型编程模板分类函数模板语法原理函数模板的实例化隐式实例化显示实例化 匹配原则 类模板语法类模板的实例化 C支持了函数重载&#xff0c;通过函数名相同&#xff0c;参数列表不同来构成函数重载&#xff0c;以达到方便程序员调用。但还是没有改变代码大…

软考初级网络管理员__操作系统单选题

1.使用Windows提供的网络管理命令(请作答此空)可以查看本机的路由表&#xff0c;()可以修改本机的路由表。 tracert arp ipconfig netstat 2.在Windows 的命令行窗口中键入命令C:\>nslookupset type MX>202.30.192.2这个命令序列的作用是查询()。 邮件服务器信息 …

【鸿蒙 HarmonyOS】Swiper组件

一、背景 项目中通常会遇到图片轮播&#xff0c;内容轮播的场景&#xff1b;如&#xff1a;在一些应用首页显示推荐的内容时&#xff0c;需要用到轮播显示的能力。 二、源码地址 ✍Gitee开源项目地址&#x1f449;&#xff1a;https://gitee.com/cheinlu/harmony-os-next-swi…

【Linux】进程_5

文章目录 五、进程6. 进程的调度和转换7. 环境变量 未完待续 五、进程 6. 进程的调度和转换 进程在运行过程中&#xff0c;要产生大量的临时数据&#xff0c;存放在CPU的寄存器中&#xff0c;CPU内部的所有临时数据我们叫做进程的 硬件上下文。当进程的时间片到了时&#xff…

用LoRA微调 Llama 2:定制大型语言模型进行问答

Fine-tune Llama 2 with LoRA: Customizing a large language model for question-answering — ROCm Blogs (amd.com) 在这篇博客中&#xff0c;我们将展示如何在AMD GPU上使用ROCm对Llama 2进行微调。我们采用了低秩适配大型语言模型(LoRA)来克服内存和计算限制&#xff0c;…

【百度之星】题目练手

BD202301公园 码题集OJ-公园 (matiji.net) 看到之后就想到之前没写出来的一道cf题目&#xff0c;因为不敢打暴力导致没写出来hhh~ 首先&#xff0c;这个问题贪心必有反例&#xff08;贪心两个人尽早相遇&#xff09; 数据范围40000&#xff0c; 直接暴力枚举两个人在哪个点相遇…

云原生技术实现Devops自动化运维

云原生技术实现Devops自动化运维 随着云计算和DevOps理念的普及&#xff0c;云原生技术在自动化运维中的应用日益广泛。本文将探讨云原生技术如何通过容器化、微服务架构、CI/CD流水线等手段&#xff0c;提升DevOps自动化运维的效率和灵活性&#xff0c;并通过案例分析具体应用…

Linux screen命令使用

文章目录 1. 前言2. screen是什么?3. screen使用场景描述3. screen常用命令4. 小结5. 参考 1. 前言 实际开发中用到的云服务器&#xff0c;如果项目使用的是python&#xff0c;需要利用项目运行一些时间较长的项目程序脚本的话&#xff0c;由于我们通过ssh连接远端服务器&…

【面经总结】Java集合 - Map

Map 概述 Map 架构 HashMap 要点 以 散列(哈希表) 方式存储键值对&#xff0c;访问速度快没有顺序性允许使用空值和空键有两个影响其性能的参数&#xff1a;初始容量和负载因子。 初始容量&#xff1a;哈希表创建时的容量负载因子&#xff1a;其容量自动扩容之前被允许的最大…

2024年【山东省安全员A证】考试资料及山东省安全员A证试题及解析

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 山东省安全员A证考试资料是安全生产模拟考试一点通总题库中生成的一套山东省安全员A证试题及解析&#xff0c;安全生产模拟考试一点通上山东省安全员A证作业手机同步练习。2024年【山东省安全员A证】考试资料及山东省…