ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

小小白的前后端分离之路——vue + springboot + mybatis(二)

2021-08-23 21:33:19  阅读:173  来源: 互联网

标签:slot el axios springboot menu 可以 vue mybatis 格式


上一篇介绍了一些基本的概念,本篇记录一些自己遇到的坑

一、element-plus

(1)引用

上一篇也提到了,vue3中引用element的方式不同于vue2,应该在main.js中加入

import ElementPlus from 'element-plus' import 'element-plus/lib/theme-chalk/index.css'

然后在原来的 .use 后面加上 .use(ElementPlus),即随便哪个use后面都可以,比如我的是 

.use(store).use(router).use(ElementPlus).mount('#app');

(2)container

vue2.0官方例程中有如下语句

<template slot="title"><i class="el-icon-message"></i>导航一</template>

而在vue3中,slot不能这样用,会报类似下面的错误:

[vue/no-deprecated-slot-attribute] 'slot' attributes are deprecated

所以可以改成

<template v-slot:title>计算器</template>

这样就可以了

(3)menu格式修改

一般为了防止一个文档的style影响到其它文件,会在设置style时加上scoped,如:

<style scoped lang="scss">

但是设置了scoped后就不能修改element组件的样式了。这个问题也困扰了我好久,最终翻了很多帖子后才知道有个东西叫做样式穿透,很多帖子用 /deep/,但我这里会报错,最终我采用的方式是

  :deep(.el-menu, .el-menu-item-group, .el-menu-item) {     background-color: #c0fce1;   }

括号里有多个组件,这样可以一次性把它们的背景颜色都改了。

如果要进一步修改submenu的样式,比如鼠标移过去时字体加粗同时颜色和大小改变,可以这样设置

el-submenu__title这里是双下划线,这就是设置el-submenu下面的v-slot:title的样式。这个我也不太懂,就是这样用,,挺不好查的查了好多帖才知道。。。。

如果点击el-menu-item时想改变字体样式,可以这样

运行程序可以看到 el-menu-item 是包含在 submenu 中的,是那种子菜单的形式,即 “简单运算”和“复杂运算”是包含在“计算器”中的,假如我想让“复杂运算”与计算器同级,该怎么办呢?

简单地把“复杂运算”设置成submenu是不行的,因为即使submenu没有子选项它右边也会有一个箭头

那怎么办呢,这个时候可以自己写一个style样式,然后覆盖el-menu-item原有的样式,比如

然后再

<el-menu-item index="/list" class="SingleItem"><template v-slot:title>复杂运算</template></el-menu-item>

就可以啦,

整体的菜单大概最后这样

里面的 index 是用来跳转页面的,不过需要在 el-menu 中指定 router 关键字才可以触发。

(4)popover引用

popover可以实现鼠标悬停时弹出提示的功能,vue官方案例是这样的


可以看到用到了 slot,是的,直接在vue3中用会报错,怎么办嘞,用template封装一下

就可以啦,我这个代码是嵌入了一个图标,鼠标移动到图标上的效果如图

 

 以此类推,遇到slot就用template封装,比如输入框的官方案例

可以这样封装

 

二、axios

axios是干啥用的呢,是用来与后端传输数据的,它可以向后台发起get或post请求,然后服务器响应返回数据,所以它很关键啦,不过用起来挺简单的,,这里提一下是因为有一个坑,对咱小小白来说是个大坑啦

(1)引用

最简单无脑的方法就是在每个需要用到 axios 的页面脚本中直接引用,即在相应页面的 script 里面 添加 

import axios from 'axios'

然后就可以调用 axios.get 或者 axios.post 了。

另外一种方法就是在main.js中作为全局变量引用,然后每个页面无需再 import。上一篇也提到了vue3中的全局变量设置与vue2有所不同,要通过 globalProperties 来设置,如图

可以看到上面 import 了 axios,然后把 createApp 语句和 mount 语句分开了,为的是得到一个中间变量 app,在通过 app 的 globalProperties 来设定,然后在需要引用的页面的 script 中直接

就可以啦,this.axios 就等同于 main.js 中设置的全局变量 app.config.globalProperties.axios。这一句话是发起了一个get请求,然后把响应得到的数据赋值给变量 tableData(我程序中的一个变量)

(2)数据格式

Duang! 前面说的大坑就是这个了!!

因为我之前从没研究过这个东西,无论我怎么修改代码,后台都接不到数据,,,因为它根本不是axios调用的问题,而是数据格式的问题!其实直接搜axios数据格式相关的东西是可以出来的,但是因为当时不懂,所以根本想不到这个方向。。。

上面的那个axios应用的截图中只是发送了一个get请求,不包含任何数据,所以不会涉及到这个问题,但是如果发送请求的时候包含了数据,比如向后台查询某个人的电话号码,就要在发送请求时将这个人的名字一并给后台,然后后台才能去查询他的电话,这个时候就会涉及到数据格式的问题。

axios默认的格式是json格式,即application/json。而如果springboot的controller中啥也不设置(比如RequestBody)的话默认格式是表单(form)格式,即x-www-form-urlencoded。加上RequestBody标注的话程序才会认为接受到的数据是json格式。

那么怎么完成格式转换呢,两种方法,一种是改axios代码转表单格式,一种是改controller代码转json格式,我采用的前者,因为懒得在java代码中增加一个用于解析数据的类。

在vue中可以用qs工具完成格式转换,首先在main.js中引用,然后设置全局变量方便调用,截图上面已经贴过啦就不再来一遍咯,调用时这样

这里发送请求时一并发送了两个数据,一个是姓名一个是性别,这两个数据本是json格式,然后通过qs.stringify就可以转换成表单格式,是不是很简单呢!

关于vue的大概就这么多了,主要是vue3和vue2的一些特性更改造成的问题,以及网络请求数据格式的问题,下一篇记录后台相关的一些东西啦~

 

标签:slot,el,axios,springboot,menu,可以,vue,mybatis,格式
来源: https://www.cnblogs.com/hxzkh/p/15177804.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有