涉及知識(shí)點(diǎn)
1.springboot項(xiàng)目啟動(dòng)創(chuàng)建? 配置yml文件
2.mybatisplus的使用
3.vue的vite文件配置
4.vue springboot 前后端數(shù)據(jù)交互
后端
1.建立項(xiàng)目的配置文件
src/main/resources/application.ymlspring: datasource: type: com.alibaba.druid.pool.DruidDataSource druid: username: root password: url: jdbc:mysql:/dbwx driver-class-name: com.mysql.cj.jdbc.Driver
2.建立項(xiàng)目
pom.xml
<?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>2.7.15</version> <relativePath/> <!-- lookup parent from repository --> </parent> <groupId>org.example</groupId> <artifactId>ch10vuecrudapi</artifactId> <version>1.0</version> <properties> <java.version>17</java.version> <maven.compiler.source>17</maven.compiler.source> <maven.compiler.target>17</maven.compiler.target> <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding> </properties> <dependencies> <!-- mybatis-plus-boot-starter --> <dependency> <groupId>com.baomidou</groupId> <artifactId>mybatis-plus-boot-starter</artifactId> <version>3.5.3.2</version> <exclusions> <exclusion> <groupId>com.zaxxer</groupId> <artifactId>HikariCP</artifactId> </exclusion> </exclusions> </dependency> <!-- hmysql/mysql-connector-java --> <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> <version>8.0.33</version> </dependency> <!-- com.alibaba/druid-spring-boot-starter --> <dependency> <groupId>com.alibaba</groupId> <artifactId>druid-spring-boot-starter</artifactId> <version>1.2.19</version> </dependency> <!-- org.yaml/snakeyaml --> <dependency> <groupId>org.yaml</groupId> <artifactId>snakeyaml</artifactId> <version>2.0</version> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-devtools</artifactId> <scope>runtime</scope> <optional>true</optional> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-configuration-processor</artifactId> <optional>true</optional> </dependency> <dependency> <groupId>org.projectlombok</groupId> <artifactId>lombok</artifactId> <optional>true</optional> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-test</artifactId> <scope>test</scope> </dependency> </dependencies> <build> <plugins> <plugin> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-maven-plugin</artifactId> <configuration> <excludes> <exclude> <groupId>org.projectlombok</groupId> <artifactId>lombok</artifactId> </exclude> </excludes> </configuration> </plugin> </plugins> </build> </project>
3.建立數(shù)據(jù)庫表
CREATE DATABASE `dbwx` DEFAULT CHARACTER SET utf8mb3; use dbwx; CREATE TABLE `t_user` ( `id` bigint NOT NULL, `account` varchar(50) DEFAULT NULL, `passwd` varchar(32) DEFAULT NULL, `name` varchar(50) DEFAULT NULL, `birthday` date DEFAULT NULL, PRIMARY KEY (`id`), UNIQUE KEY `account` (`account`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb3;
4.建立實(shí)體類
cn.webrx.pojo.User
package cn.webrx.pojo; import com.baomidou.mybatisplus.annotation.TableField; import com.baomidou.mybatisplus.annotation.TableId; import com.baomidou.mybatisplus.annotation.TableName; import lombok.Data; import java.time.LocalDate; @Data @TableName("t_user") public class User { @TableId private Long id; private String account; @TableField("passwd") private String password; private String name; private LocalDate birthday; }
5.建立項(xiàng)目入口程序App
cn.webrx.App
package cn.webrx; import cn.webrx.mapper.DbMapper; import cn.webrx.pojo.User; import cn.webrx.mapper.UserMapper; import cn.webrx.service.UserService; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.RestController; import javax.annotation.Resource; import java.util.List; import java.util.Set; @SpringBootApplication @RestController public class App { @Resource DbMapper dm; @Resource UserService us; @GetMapping("/dbs") public Set<String> dbs(){ return dm.dbs(); } @GetMapping("/list") public List<User> list(){ return us.list(); } @GetMapping("/users") public cn.webrx.beans.User getUser() { return new cn.webrx.beans.User(199, "李四六"); } public static void main(String[] args) { SpringApplication.run(App.class, args); } }
6.建立sevices
//cn.webrx.mapper @Mapper public interface UserMapper extends BaseMapper<User> {} //cn.webrx.service public interface UserService extends IService<User> {} //cn.webrx.service @Service public class UserServiceImpl extends ServiceImpl<UserMapper, User> implements UserService { }
前端
axios攔截器封裝
/src/lib/http.js文章來源：http://www.zghlxwxcb.cn/news/detail-731724.html
//http.js request.js //1 導(dǎo)入 import axios from 'axios' //2 配置 axios.defaults.baseURL = '/api' axios.defaults.timeout = 5000 //3 請(qǐng)求攔截器 - 添加請(qǐng)求攔截器 axios.interceptors.request.use(config => { // 在發(fā)送請(qǐng)求之前做些什么 config.headers.token = '11111111111111111111' return config; }, function (error) { // 對(duì)請(qǐng)求錯(cuò)誤做些什么 return Promise.reject(error); }); //4 添加響應(yīng)攔截器 axios.interceptors.response.use(response => { // 對(duì)響應(yīng)數(shù)據(jù)做點(diǎn)什么 return response.data; }, function (error) { // 對(duì)響應(yīng)錯(cuò)誤做點(diǎn)什么 ElMessage({ type: 'error', message: '響應(yīng)失敗' }) return Promise.reject(error) }) export default axios./src/lib/user.js文章來源地址http://www.zghlxwxcb.cn/news/detail-731724.html
import axios from './http' //添加 export const addUser = async function (url, d, callback) { const data = await axios.post(url,d) await callback(data) } //刪除 //顯示 url,data //修改 export const getUsers = async function (url, params, callback) { const data = await axios.get(url,params) await callback(data) }
APP.vue
<script setup> import {getUsers,addUser} from '@/lib/user' import {ref} from 'vue' import {ElMessage} from "element-plus"; const msg = ref({id: 0, name: ''}) function abc(){ getUsers('/users',{},d=>{ ElMessage(d.name) console.log(d) }) } const form = ref({ name: '李四', account: 'admin', password: '123', birthday: '2013-10-25' }) function add() { addUser("/addUser", form.value, data => { if (data.code === 200) { ElMessage({type: 'success', message: data.msg}) } else { ElMessage({type: 'error', message: data.msg}) } }) } </script> <template> <h3>{{ msg.name }}</h3> <el-button @click="abc">get</el-button> <!-- 添加用戶 --> <el-row> <el-col :span="20" :offset="2"> <el-form :model="form" label-width="120px"> <el-form-item label="姓名"> <el-input v-model="form.name"/> </el-form-item> <el-form-item label="賬號(hào)"> <el-input type="text" v-model="form.account"/> </el-form-item> <el-form-item label="密碼"> <el-input type="password" v-model="form.password"/> </el-form-item> <el-form-item label="出生日期"> <el-col :span="11"> <el-date-picker v-model="form.birthday" type="date" placeholder="請(qǐng)選擇出生日期" style="width: 100%"/> </el-col> </el-form-item> <el-form-item> <el-button type="primary" @click="add">添加新用戶</el-button> <el-button>取消</el-button> </el-form-item> </el-form> </el-col> </el-row> </template> <style scoped> </style>
到了這里，關(guān)于整合vue elementui springboot mybatisplus前后端分離的 簡單增加功能 刪改查未實(shí)現(xiàn)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
