springBoot+vue基础项目【项目初始化】

lanjian0_0

于 2024-04-29 08:39:51 发布

阅读量964

点赞数 7

本文链接：https://blog.csdn.net/lanjian0_0/article/details/138300397

版权

本文档详细介绍了如何使用SpringBoot和Vue.js搭建一个基础项目，包括前端初始化，集成ElementUI，后端创建表及实现增删改查功能，分页查询，前后端对接，整合Mybatis-Plus和Swagger。在后端部分，强调了Java版本要求，跨域问题的解决以及Swagger的配置和注解使用。

摘要由CSDN通过智能技术生成

前端初始化

使用vue create 项目名来创建vue项目，然后通过npm install来初始化项目依赖，使用npm run serve启动项目
注意：直接使用默认方式创建没有vue-router

集成elementUI

npm i element-ui -S安装element-ui
在main.js中引入组件

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
// 后面的配置项可以不写
Vue.use(ElementUI, {
   size:"small"})

new Vue({
   
  el: '#app',
  render: h => h(App)
});

启动项目，然后随便使用一个element组件测试。
之后就是完善静态页面，完善样式。

后端

通过idea创建spring项目，
注意：2022之后的spring只能使用java11以后的版本，想要使用java创建项目需要更改server url

依赖包

配置数据库
注意：新创建的项目如果配置了mybatis，配置文件中会有一些信息，要改格式

# 数据库连接
spring:
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://localhost:3306/test?serverTimezone=GMT%2b8
    username: root
    password: LANjian829.

创建表

字段：ID，username，password，nickname，email，phone，address，create_time，update_time
添加数据
创建实体类
创建mybatis的mapper接口，并添加注解
编写查询user的方法，同时定义sql
编写controller类，编写查询user的接口并测试。

后端实现增删改查

编写对应的接口并且测试
注意：在controller中定义请求前缀需要使用@RequestMapping
**insert into tablename (columnName...) values (value...)**
update tablename set columnName = value ... where columnName = value
delete from tableName where 条件

分页查询

手动实现分页查询，计算页码值，拼接在sql后面

前后端对接

前端请求目标地址

    fetch(`http://localhost:8081/user/page?pageNum=${
     this.pageNum}&pageSize=${
     this.pageSize}&username=${
     this.username}&email=${
     this.email}&address=${
     this.address}`)
        .then(res => res.json(