devbox
笔触狂放9
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Vue3学习(三)前后端数据交互_vue3前后端数据交互

作者：笔触狂放9 | 2024-03-21 09:21:42

赞

踩

vue3前后端数据交互

一、前后端分离

        IDEA软件、JDK1.8、Mysql5.7+、Navicat、SpringBoot2.x

 

         pom配置阿里云仓库

  1. <repositories>
  2.  
  3. 	<repository>
  4. 		<id>nexus-aliyun</id>
  5. 		<name>nexus-aliyun</name>
  6. 		<url>http://maven.aliyun.com/nexus/content/groups/public/</url>
  7. 		<releases>
  8. 			<enabled>true</enabled>
  9. 		</releases>
  10. 		<snapshots>
  11. 			<enabled>false</enabled>
  12. 		</snapshots>
  13. 	</repository>
  14. 	
  15. 	<pluginRepositories>
  16. 		<pluginRepository>
  17. 			<id>public</id>
  18. 			<name>aliyun nexus</name>
  19. 			<url>http://maven.aliyun.com/nexus/content/groups/public/</url>
  20. 			<releases>
  21. 				<enabled>true</enabled>
  22. 			</releases>
  23. 			<snapshots>
  24. 				<enabled>false</enabled>
  25. 			</snapshots>
  26. 		</pluginRepository>
  27. 	</pluginRepositories>
  28.  
  29. </repositories>

application.yml

  1. server:
  2.   port: 9090
  3.  
  4. spring:
  5.   datasource:
  6.     url: jdbc://mysql//localhost:3306/springboot-vue3
  7.     driver-class-name: com.mysql.jdbc.Driver
  8.     username: root
  9.     password: root

         启动成功

        创建数据库表t_user

  1. CREATE TABLE `user` (
  2.   `id` int(11) NOT NULL AUTO_INCREMENT,
  3.   `name` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '姓名',
  4.   `date` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '日期',
  5.   `address` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '地址',
  6.   PRIMARY KEY (`id`)
  7. ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

        实现增删改查sql语句

        新增：

INSERT INTO `t_user`(name, date, address) VALUES('张三', '2023-06-25', '江苏省南京市');

        修改：

UPDATE t_user SET name = "李四" WHERE id = 1;

        删除：

DELETE FROM t_user WHERE id = 1;

        查询：

SELECT * FROM t_user WHERE name LIKE '%张%'

        分页查询：

SELECT * FROM t_user WHERE address LIKE '%南京%' LIMIT 0,2;

        SQL语句打印：        

  1. logging:
  2.   level:
  3.     com.example.springboot.mapper: debug

        Mybatis开启下划线自动转驼峰

  1. mybatis:
  2.   configuration:
  3.     map-underscore-to-camel-case: true  #  开启下划线自动转驼峰

        统一包装类Result

  1. /**
  2.  * Controller统一返回的包装类
  3.  */
  4. public class Result {
  5.     private static final String SUCCESS_CODE = "200";
  6.     private static final String ERROR_CODE = "500";
  7.  
  8.     private String code;   // 返回的状态码。告诉前端这次请求成功还是失败
  9.     private String msg;    // 错误信息
  10.     private Object data;   // 包装的数据
  11.  
  12.     public Result(String code, String msg, Object data) {
  13.         this.code = code;
  14.         this.msg = msg;
  15.         this.data = data;
  16.     }
  17.  
  18.     public Result(String code, String msg) {
  19.         this.code = code;
  20.         this.msg = msg;
  21.     }
  22.  
  23.     public Result() {
  24.     }
  25.  
  26.     public String getCode() {
  27.         return code;
  28.     }
  29.  
  30.     public void setCode(String code) {
  31.         this.code = code;
  32.     }
  33.  
  34.     public String getMsg() {
  35.         return msg;
  36.     }
  37.  
  38.     public void setMsg(String msg) {
  39.         this.msg = msg;
  40.     }
  41.  
  42.     public Object getData() {
  43.         return data;
  44.     }
  45.  
  46.     public void setData(Object data) {
  47.         this.data = data;
  48.     }
  49.  
  50.     public static Result success(Object data) {
  51.         return new Result(SUCCESS_CODE, "", data);
  52.     }
  53.  
  54.     public static Result success() {
  55.         return new Result(SUCCESS_CODE, "");
  56.     }
  57.  
  58.     public static Result error(String msg) {
  59.         return new Result(SUCCESS_CODE, msg);
  60.     }
  61. }

二、Vue配置

        安装axios 1.4.0:

npm i axios

        配置环境变量

        .env.dev

  1. VITE_ENV = dev
  2. VITE_BASE_URL = 'http://localhost:9090'

        utils/request.js

  1. import axios from "axios";
  2.  
  3. const request = axios.create({
  4.     baseURL: 'http://localhost:9091',
  5.     timeout: 30000
  6. })
  7.  
  8. request.interceptors.request.use(config => {
  9.     config.headers['Content-Type'] = 'application/json;charset=utf-8';
  10.     return config
  11. }, error => {
  12.     console.log('request error:' + error)//for error debug
  13.     return Promise.reject(error)
  14. })
  15.  
  16. request.interceptors.response.use(response =>{
  17.     let res = response.data
  18.     // res.code
  19.     return res
  20. },error => {
  21.     console.log('response error:' +error)
  22.     return Promise.reject(error)
  23.     })
  24.  
  25. export default request

                导入request对象

import request from "../../utils/request";

         因为没有返回request的config

         跨域错误

         在后端修改配置即可

        1.在controller加个注解@CrossOrigin解决

        2.在全局配置跨域

  1. import org.springframework.context.annotation.Bean;
  2. import org.springframework.context.annotation.Configuration;
  3. import org.springframework.web.cors.CorsConfiguration;
  4. import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
  5. import org.springframework.web.filter.CorsFilter;
  6.  
  7. @Configuration
  8. public class CrossOriginConfig {
  9.  
  10.     // 当前跨域请求最大有效时长。这里默认1天
  11.     private static final long MAX_AGE = 24 * 60 * 60;
  12.  
  13.     @Bean
  14.     public CorsFilter corsFilter() {
  15.         UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
  16.         CorsConfiguration corsConfiguration = new CorsConfiguration();
  17.         corsConfiguration.addAllowedOrigin("*"); // 1 设置访问源地址
  18.         corsConfiguration.addAllowedHeader("*"); // 2 设置访问源请求头
  19.         corsConfiguration.addAllowedMethod("*"); // 3 设置访问源请求方法
  20.         corsConfiguration.setMaxAge(MAX_AGE);
  21.         source.registerCorsConfiguration("/**", corsConfiguration); // 4 对接口配置跨域设置
  22.         return new CorsFilter(source);
  23.     }
  24. }

查询数据：

  1. <el-button type="primary" @click="load" style="margin-left: 5px">查询数据</el-button>
  2.  
  3.  
  4.  
  5. const state = reactive({
  6.          tableData: [],
  7.          form:{}
  8.     })
  9.  
  10.  
  11.  
  12. //请求后台数据 load去加载表格里
  13.     const load = () =>{
  14.         request.get('/user/selectAll?name='+name.value).then(res =>{
  15.             //res.data就是后台返回的数组
  16.             state.tableData = res.data
  17.             
  18.         })
  19.     }
  20.     load();

重置数据：

  1. <el-button type="info" @click="reset">重置数据</el-button>
  2.  
  3.  
  4.  
  5. const reset = () =>{
  6.         name.value = '';
  7.         load();
  8.     }

User

  1. package com.example.springboot.entity;
  2.  
  3. /**
  4.  * author: zx
  5.  * time: 2023-06-25
  6.  */
  7. public class User {
  8.  
  9.     private Integer id;
  10.  
  11.     private String name;
  12.  
  13.     private String date;
  14.  
  15.     private String address;
  16.  
  17.     private String userNo;
  18.  
  19.     public Integer getId() {
  20.         return id;
  21.     }
  22.  
  23.     public void setId(Integer id) {
  24.         this.id = id;
  25.     }
  26.  
  27.     public String getName() {
  28.         return name;
  29.     }
  30.  
  31.     public void setName(String name) {
  32.         this.name = name;
  33.     }
  34.  
  35.     public String getDate() {
  36.         return date;
  37.     }
  38.  
  39.     public void setDate(String date) {
  40.         this.date = date;
  41.     }
  42.  
  43.     public String getAddress() {
  44.         return address;
  45.     }
  46.  
  47.     public void setAddress(String address) {
  48.         this.address = address;
  49.     }
  50.  
  51.     public String getUserNo() {
  52.         return userNo;
  53.     }
  54.  
  55.     public void setUserNo(String userNo) {
  56.         this.userNo = userNo;
  57.     }
  58. }

UserController

  1. @RestController
  2. @RequestMapping("/user")
  3. public class UserController {
  4.  
  5.     @Resource
  6.     private UserMapper userMapper;
  7.  
  8.     @GetMapping("/selectAll")
  9.     //user/selectAll?name=xxx
  10.     public Result selectAll(@RequestParam String name){
  11.         List<User> userList =  userMapper.selectAll(name);
  12.         return Result.success(userList);
  13.     }
  14. }

UserMapper

  1. @Mapper
  2. public interface UserMapper {
  3.  
  4.     @Select("select * from t_user where name like concat('%',#{name},'%') or date like concat('%',#{name},'%') or address like concat('%',#{name},'%') or user_no like concat('%',#{name},'%')  ")
  5.     List<User> selectAll(String name);
  6. }

分页查询

国际化

  1. import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
  2.  
  3.  
  4. app.use(ElementPlus, {
  5.     locale: zhCn,
  6. })

UserController

  1. //分页查询
  2.     @GetMapping("/selectPage")
  3.     //user/selectAll?name=xxx
  4.     public Result selectPage(@RequestParam String name, @RequestParam Integer start, @RequestParam Integer pageSize){
  5.         List<User> userList =  userMapper.selectPage(name,start,pageSize);
  6.         Integer total = userMapper.selectTotal(name);
  7.         Map<String,Object> map = new HashMap<>();
  8.         map.put("list",userList);
  9.         map.put("total",total);
  10.         return Result.success(map);
  11.     }

UserMapper

  1. @Select("select * from t_user where name like concat('%',#{name},'%') or date like concat('%',#{name},'%') or address like concat('%',#{name},'%') or user_no like concat('%',#{name},'%') order by id desc limit #{start},#{pageSize}  ")
  2.     List<User> selectPage(@Param("name") String name, @Param("start") Integer start, @Param("pageSize") Integer pageSize);
  3.  
  4.     @Select("select count(id) from t_user where name like concat('%',#{name},'%') or date like concat('%',#{name},'%') or address like concat('%',#{name},'%') or user_no like concat('%',#{name},'%')")
  5.     Integer selectTotal(@Param("name") String name);
  1. <div style="margin: 10px">
  2.                 <el-pagination background layout=" prev, pager, next,total,sizes"
  3.                                v-model:current-page="pageNum"
  4.                                v-model:page-size="pageSize"
  5.                                :page-sizes="[1, 2,5]"
  6.                                @size-change="load"
  7.                                @current-change="load"
  8.                                :total="total"/>
  9.             </div>
  10.  
  11.  
  12.  
  13.  const total = ref(0)
  14.     const pageNum = ref(1)
  15.     const pageSize = ref(1)
  16.  
  17.  
  18. //请求后台数据 load去加载表格里
  19.     const load = () => {
  20.         //pageNum => start
  21.         let start = (pageNum.value - 1) * pageSize.value
  22.         request.get('/user/selectPage?name=' + name.value + '&start=' + start + '&pageSize=' + pageSize.value).then(res => {
  23.             //res.data就是后台返回的数组
  24.             state.tableData = res.data.list
  25.             total.value = res.data.total
  26.         })
  27.     }
  28.     load();

新增数据

UserController

  1. @PostMapping("save")
  2.     public Result save(@RequestBody User user){
  3.         userMapper.save(user);
  4.         return Result.success();
  5.     }

UserMapper

  1. @Insert("insert into t_user(name,date,address,user_no) values(#{name},#{date},#{address},#{userNo})")
  2.     void save(User user);
  1. <el-button type="primary" @click="handleAdd">新增数据</el-button>
  2.  
  3.  
  4.  
  5. <!--弹窗-->
  6.         <el-dialog v-model="dialogFormVisible" title="信息" width="40%">
  7.             <el-form :model="state.form" label-width="100px" style="padding-right:30px ">
  8.                 <el-form-item label="日期">
  9.                     <el-date-picker v-model="state.form.date" type="date" placeholder="选择日期" value-format="YYYY-MM-DD" style="width:100%"/>
  10.                 </el-form-item>
  11.                 <el-form-item label="姓名">
  12.                     <el-input v-model="state.form.name" autocomplete="off"/>
  13.                 </el-form-item>
  14.                 <el-form-item label="地址">
  15.                     <el-input v-model="state.form.address" autocomplete="off"/>
  16.                 </el-form-item>
  17.                 <el-form-item label="编号">
  18.                     <el-input v-model="state.form.userNo" autocomplete="off"/>
  19.                 </el-form-item>
  20.             </el-form>
  21.             <template #footer>
  22.       <span class="dialog-footer">
  23.         <el-button @click="dialogFormVisible = false">取消</el-button>
  24.         <el-button type="primary" @click="save">确认</el-button>
  25.       </span>
  26.             </template>
  27.         </el-dialog>
  28.  
  29.  
  30. import {ElMessage} from "element-plus";
  31.  
  32.  
  33. //新增数据 设置新的空的绑值对象 打开弹窗
  34.     const handleAdd = () => {
  35.         state.form = {}
  36.         //打开弹窗
  37.         dialogFormVisible.value = true
  38.     }
  39.  
  40.  
  41.  
  42.  
  43. //保存数据，把数据插入到tableData中，并刷新页面，弹窗关闭
  44.     const save = () => {
  45.         request.post('/user/save', state.form).then(res => {
  46.             if (res.code === '200') {
  47.                 ElMessage.success('操作成功')
  48.                 dialogFormVisible.value = false
  49.             } else {
  50.                 ElMessage.error(res.msg)
  51.             }
  52.         })
  53.     }

编辑数据

UserController

  1. @PutMapping("/update")
  2.     public Result update(@RequestBody User user){
  3.         userMapper.update(user);
  4.         return Result.success();
  5.     }

UserMapper

  1.  @Update("update t_user set name = #{name},date = #{date},address = #{address},user_no = #{userNo} where id = #{id}")
  2.     void update(User user);
  1. //保存数据，把数据插入到tableData中，并刷新页面，弹窗关闭
  2.     const save = () => {
  3.         request({
  4.             url: state.form.id ? '/user/update' : '/user/save',
  5.             method: state.form.id ? 'PUT' : 'POST',
  6.             data: state.form
  7.         }).then(res => {
  8.             if (res.code === '200') {
  9.                 ElMessage.success('操作成功')
  10.                 //调用查询方法，更新表格数据
  11.                 load()
  12.                 dialogFormVisible.value = false
  13.             } else {
  14.                 ElMessage.error(res.msg)
  15.             }
  16.         })
  17.     }

删除数据

UserController

  1. @DeleteMapping("/delete")
  2.     public Result delete(@RequestParam Integer id){
  3.         userMapper.delete(id);
  4.         return Result.success();
  5.     }

UserMapper

  1.     @Delete("delete from t_user where id = #{id}")
  2.     void delete(Integer id);
  1.  <el-button link type="danger" size="default" @click.prevent="remove(scope.row.id)">删除</el-button>
  2.  
  3.  
  4.  
  5. //删除数据 从index位置开始，删除一行即可
  6.     const remove = (id) => {
  7.         request.delete('/user/delete?id=' + id).then(res => {
  8.             if (res.code === '200') {
  9.                 ElMessage.success('操作成功')
  10.                 //调用查询方法，更新表格数据
  11.                 load()
  12.                 dialogFormVisible.value = false
  13.             } else {
  14.                 ElMessage.error(res.msg)
  15.             }
  16.         })
  17.     }

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/笔触狂放9/article/detail/280009?site
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号