【SpringBoot3+Vue3】四【实战篇】-前端（vue基础）

目录

一、项目前置知识

二、使用vscode创建

三、vue介绍

四、局部使用vue

1、快速入门

1.1 需求

1.2 准备工作

 1.3 操作

1.3.1 创建html

1.3.2 创建初始html代码

1.3.3 参照官网import  vue

1.3.4 创建vue应用实例

1.3.5 准备div

1.3.6 准备用户数据 

1.3.7 通过插值表达式渲染页面

1.3.8 保存（ctrl+s）运行

2、常用指令

2.1 v-for 遍历

​编辑 2.2 v-bind动态为html标签绑定属性值

2.3 v-if & v-show 用来控制元素的显示与隐藏

2.4 v-on为html标签绑定事件

2.5 v-model双向数据绑定

3、生命周期

4、Axios

4.1 介绍

4.2 使用步骤

4.3 别名方式

4.4 实践

4.4.1 导入后端

4.4.2 前端

5、综合案例

五、整站使用vue（工程化）

1、环境准备

2、VUE项目创建和启动

2.1 创建vue3项目

2.2 使用vscode 打开vue项目

2.3 vue项目目录结构

2.4 vue项目启动

3、vue项目开发流程

4、API风格

4.1 组合式API

5、案例

 5.1 启动后台程序

5.2 安装axios

5.3 App.vue代码

 5.4 Article.vue代码

5.5 代码优化1

5.5.1 新增api文件夹

5.5.2 新增article.js文件

5.5.3 修改Article.vue代码

5.6 代码优化2（拦截器使用）

5.6.1 新建文件夹util

 5.6.2 新建request.js文件

5.6.3 优化article.js

六、Element-plus

1、快速入门

1.1 步骤

1.2 实操

 1.2.1 创建vue3项目

1.2.2 进入项目目录安装vue依赖

1.2.3 使用vs studio打开项目

1.2.4 安装Element Plus

1.2.5 项目引用Element Plus

1.2.6 src下新建Button.vue文件

1.2.7 修改 App.vue

2、常用组件

2.1 表格组件

2.1.1 src新增Article.vue文件

2.1.2 修改App.vue

2.2 分页组件 

2.2.1 main.js修改

2.2.2 Article.vue文件导入分页组件

2.3 表单组件

2.3.1 Article.vue文件导入表单组件

2.4 卡片组件

2.4.1 Article.vue文件导入卡片组件

前言：学习vue基础知识，为项目实战铺垫

一、项目前置知识

二、使用vscode创建

创建目录spring3boot3，在文件目录里cmd，输入


# 输入 
code .

打开vscode

三、vue介绍

四、局部使用vue

1、快速入门

1.1 需求

1.2 准备工作

 1.3 操作

1.3.1 创建html

1.3.2 创建初始html代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body></body>
</html>
1.3.3 参照官网import  vue

快速上手 | Vue.js

 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- 引入vue模块--><script type="module">import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';</script></body>
</html>
1.3.4 创建vue应用实例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- 引入vue模块--><script type="module">import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';/* 创建vue应用实例 */createApp({})</script></body>
</html>
1.3.5 准备div
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"></div><!-- 引入vue模块--><script type="module">import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';/* 创建vue应用实例 */createApp({}).mount("#app");</script></body>
</html>
1.3.6 准备用户数据 
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"></div><!-- 引入vue模块--><script type="module">import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';/* 创建vue应用实例 */createApp({data(){return{//定义数据msg: 'hello bocai'}}}).mount("#app");</script></body>
</html>
1.3.7 通过插值表达式渲染页面
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><h1>{{msg}}</h1></div><!-- 引入vue模块--><script type="module">import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';/* 创建vue应用实例 */createApp({data(){return{//定义数据msg:'hello bocai'}}}).mount("#app");</script></body>
</html>
1.3.8 保存（ctrl+s）运行

保存 保存 保存

2、常用指令

2.1 v-for 遍历

语法：

02指令v-for.html 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><table border="1 solid" colspa="0" cellspacing="0"><tr><th>文章标题</th><th>分类</th><th>发表时间</th><th>状态</th><th>操作</th></tr><!-- 哪个元素要出现多次,v-for指令就添加到哪个元素上 --><tr v-for="(article,index) in articleList"><td>{{article.title}}</td><td>{{article.category}}</td><td>{{article.time}}</td><td>{{article.state}}</td><td><button>编辑</button><button>删除</button></td></tr><!-- <tr><td>标题2</td><td>分类2</td><td>2000-01-01</td><td>已发布</td><td><button>编辑</button><button>删除</button></td></tr><tr><td>标题3</td><td>分类3</td><td>2000-01-01</td><td>已发布</td><td><button>编辑</button><button>删除</button></td></tr> --></table></div><script type="module">//导入vue模块import { createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'//创建应用实例createApp({data() {return {//定义数据articleList:[{title:"医疗反腐绝非砍医护收入",category:"时事",time:"2023-09-5",state:"已发布"},{title:"中国男篮缘何一败涂地？",category:"篮球",time:"2023-09-5",state:"草稿"},{title:"华山景区已受大风影响阵风达7-8级，未来24小时将持续",category:"旅游",time:"2023-09-5",state:"已发布"}]  }}}).mount("#app")//控制页面元素</script>
</body>
</html>

 2.2 v-bind动态为html标签绑定属性值

语法：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><!-- <a v-bind:href="url">百度一下</a> --><a :href="url">百度一下</a></div><script type="module">//引入vue模块import { createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'//创建vue应用实例createApp({data() {return {url: 'https://www.baidu.com'}}}).mount("#app")//控制html元素</script>
</body>
</html>

2.3 v-if & v-show 用来控制元素的显示与隐藏

语法：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="app">手链价格为:  <span v-if="customer.level>=0 && customer.level<=1">9.9</span>  <span v-else-if="customer.level>=2 && customer.level<=4">19.9</span> <span v-else>29.9</span><br/>手链价格为:  <span v-show="customer.level>=0 && customer.level<=1">9.9</span>  <span v-show="customer.level>=2 && customer.level<=4">19.9</span> <span v-show="customer.level>=5">29.9</span></div><script type="module">//导入vue模块import { createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'//创建vue应用实例createApp({data() {return {customer:{name:'张三',level:2}}}}).mount("#app")//控制html元素</script>
</body></html>

2.4 v-on为html标签绑定事件

语法：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><button v-on:click="money">点我有惊喜</button> &nbsp;<button @click="love">再点更惊喜</button></div><script type="module">//导入vue模块import { createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'//创建vue应用实例createApp({data() {return {//定义数据}},methods:{money: function(){alert('送你钱100')},love: function(){alert('爱你一万年')}}}).mount("#app");//控制html元素</script>
</body>
</html>

2.5 v-model双向数据绑定

语法：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="app">文章分类: <input type="text" v-model="searchConditions.category"/> <span>{{searchConditions.category}}</span>发布状态: <input type="text" v-model="searchConditions.state"/> <span>{{searchConditions.state}}</span><button>搜索</button><button v-on:click="clear">重置</button><br /><br /><table border="1 solid" colspa="0" cellspacing="0"><tr><th>文章标题</th><th>分类</th><th>发表时间</th><th>状态</th><th>操作</th></tr><tr v-for="(article,index) in articleList"><td>{{article.title}}</td><td>{{article.category}}</td><td>{{article.time}}</td><td>{{article.state}}</td><td><button>编辑</button><button>删除</button></td></tr></table></div><script type="module">//导入vue模块import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'//创建vue应用实例createApp({data() {return {//定义数据searchConditions:{category:'',state:''},articleList: [{title: "医疗反腐绝非砍医护收入",category: "时事",time: "2023-09-5",state: "已发布"},{title: "中国男篮缘何一败涂地？",category: "篮球",time: "2023-09-5",state: "草稿"},{title: "华山景区已受大风影响阵风达7-8级，未来24小时将持续",category: "旅游",time: "2023-09-5",state: "已发布"}]}},methods:{clear:function(){//清空category以及state的数据//在methods对应的方法里面,使用this就代表的是vue实例,可以使用this获取到vue实例中准备的数据this.searchConditions.category='';this.searchConditions.state='';}}}).mount("#app")//控制html元素</script>
</body></html>

3、生命周期

mounted 最频繁 

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="app">文章分类: <input type="text" v-model="searchConditions.category"/> <span>{{searchConditions.category}}</span>发布状态: <input type="text" v-model="searchConditions.state"/> <span>{{searchConditions.state}}</span><button>搜索</button><button v-on:click="clear">重置</button><br /><br /><table border="1 solid" colspa="0" cellspacing="0"><tr><th>文章标题</th><th>分类</th><th>发表时间</th><th>状态</th><th>操作</th></tr><tr v-for="(article,index) in articleList"><td>{{article.title}}</td><td>{{article.category}}</td><td>{{article.time}}</td><td>{{article.state}}</td><td><button>编辑</button><button>删除</button></td></tr></table></div><script type="module">//导入vue模块import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'//创建vue应用实例createApp({data() {return {//定义数据searchConditions:{category:'',state:''},articleList: [{title: "医疗反腐绝非砍医护收入",category: "时事",time: "2023-09-5",state: "已发布"},{title: "中国男篮缘何一败涂地？",category: "篮球",time: "2023-09-5",state: "草稿"},{title: "华山景区已受大风影响阵风达7-8级，未来24小时将持续",category: "旅游",time: "2023-09-5",state: "已发布"}]}},methods:{clear:function(){//清空category以及state的数据//在methods对应的方法里面,使用this就代表的是vue实例,可以使用this获取到vue实例中准备的数据this.searchConditions.category='';this.searchConditions.state='';}},mounted:function(){console.log('Vue挂载完毕,发送请求获取数据')}}).mount("#app")//控制html元素</script>
</body></html>

4、Axios

4.1 介绍

 

4.2 使用步骤

4.3 别名方式

4.4 实践

4.4.1 导入后端

前面课程的存在token，不好处理

后端代码：

链接：https://pan.baidu.com/s/1H2kd77Brg8zblMj7fnMuoQ 
提取码：关注联系我，私信我，发本文链接

我下载下来pom做了一些改变，主要是springboot版本等与前面后端的课程保存一致性

<?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 https://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>3.1.5</version><relativePath/> <!-- lookup parent from repository --></parent><groupId>com.itheima</groupId><artifactId>axios_demo</artifactId><version>0.0.1-SNAPSHOT</version><name>axios_demo</name><description>axios_demo</description><properties><java.version>17</java.version></properties><dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-test</artifactId><scope>test</scope></dependency><dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId></dependency></dependencies><build><plugins><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId></plugin></plugins></build></project>

 导入的时候卡主，注意自己的maven配置

不知道跟.idea里面这个是否有关 workspace.xml，导致卡主。修改这个maven估计就好了

4.4.2 前端

默认方式与别名方式

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><!-- 引入axios的js文件 --><script src="https://unpkg.com/axios/dist/axios.min.js"></script><script>/* 发送请求 *//* axios({method:'get',url:'http://localhost:8080/article/getAll'}).then(result=>{//成功的回调//result代表服务器响应的所有的数据,包含了响应头,响应体. result.data 代表的是接口响应的核心数据console.log(result.data);}).catch(err=>{//失败的回调console.log(err);}); */let article = {title: '明天会更好',category: '生活',time: '2000-01-01',state: '草稿'}/*  axios({method:'post',url:'http://localhost:8080/article/add',data:article}).then(result=>{//成功的回调//result代表服务器响应的所有的数据,包含了响应头,响应体. result.data 代表的是接口响应的核心数据console.log(result.data);}).catch(err=>{//失败的回调console.log(err);}); *///别名的方式发送请求/* axios.get('http://localhost:8080/article/getAll').then(result => {//成功的回调//result代表服务器响应的所有的数据,包含了响应头,响应体. result.data 代表的是接口响应的核心数据console.log(result.data);}).catch(err => {//失败的回调console.log(err);}); */axios.post('http://localhost:8080/article/add', article).then(result => {//成功的回调//result代表服务器响应的所有的数据,包含了响应头,响应体. result.data 代表的是接口响应的核心数据console.log(result.data);}).catch(err => {//失败的回调console.log(err);});</script>
</body></html>

5、综合案例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="app">文章分类: <input type="text" v-model="searchConditions.category">发布状态: <input type="text"  v-model="searchConditions.state"><button v-on:click="search">搜索</button><button v-on:click="clear">重置</button><br /><br /><table border="1 solid" colspa="0" cellspacing="0"><tr><th>文章标题</th><th>分类</th><th>发表时间</th><th>状态</th><th>操作</th></tr><tr v-for="(article,index) in articleList"><td>{{article.title}}</td><td>{{article.category}}</td><td>{{article.time}}</td><td>{{article.state}}</td><td><button>编辑</button><button>删除</button></td></tr><!-- <tr><td>标题2</td><td>分类2</td><td>2000-01-01</td><td>已发布</td><td><button>编辑</button><button>删除</button></td></tr><tr><td>标题3</td><td>分类3</td><td>2000-01-01</td><td>已发布</td><td> --><button>编辑</button><button>删除</button></td></tr></table></div><!-- 引入axios的js文件 --><script src="https://unpkg.com/axios/dist/axios.min.js"></script><script type="module">//导入vue模块import {createApp} from  'https://unpkg.com/vue@3/dist/vue.esm-browser.js'// 创建vue应用实例createApp({data(){return{articleList:[],searchConditions:{category:'',state:''}}},methods:{//声明方法search:function(){//发送请求,完成搜索,携带搜索条件axios.get('http://localhost:8080/article/search?category='+this.searchConditions.category+'&state='+this.searchConditions.state).then(result=>{//成功回调 result.data//把得到的数据赋值给articleListthis.articleList=result.data}).catch(err=>{console.log(err);});},clear:function(){//清空category以及state的数据//在methods对应的方法里面,使用this就代表的是vue实例,可以使用this获取到vue实例中准备的数据this.searchConditions.category='';this.searchConditions.state='';}},mounted:function(){//发送异步请求 axiosaxios.get('http://localhost:8080/article/getAll').then(result =>{//成功回调// console.log(result.data);this.articleList = result.data}).catch(err =>{//失败回调console.log(err);})}}).mount('#app'); // 控制html元素</script></body></html>

五、整站使用vue（工程化）

1、环境准备

看这个也行《nodejs》

2、VUE项目创建和启动

2.1 创建vue3项目

npm init vue@latest

 

 实际操作

npm init vue@latest

# 输入项目名称，然后全部默认

# 进到项目目录
cd vue3-project

# 输入命令   安装项目vue依赖
npm install

2.2 使用vscode 打开vue项目

在项目目录输入命令code .

code .

 

2.3 vue项目目录结构

2.4 vue项目启动

下图有两种方式启动 1与2

 

3、vue项目开发流程

 

4、API风格

4.1 组合式API

 App.vue

<!-- <script>
//写数据
export default{data(){return{msg: '上海'}}
}
</script> --><script setup>import {ref} from 'vue';//调用ref函数，定义响应式数据const msg = ref('西安');//导入Api.vue文件 vs 开发工具显示下面一句有问题 是开发工具问题import ApiVue from './Api.vue'
</script> <template><!-- html-->  <h1>{{ msg }}</h1>  <ApiVue/></template><style scoped>
/* 样式 */
h1{color: red;
}</style>

Api.vue

<script setup>import {onMounted, ref} from 'vue';//声明响应式数据 ref  响应式对象有一个内部的属性valueconst count = ref(0);// 声明函数increment
function increment(){count.value++;
}//声明钩子函数onMountedonMounted(()=>{console.log('vue已经挂载完毕！')});</script><template><button @click="increment">点击+1 count:{{ count }}</button></template>

5、案例

 5.1 启动后台程序

后台程序与局部的那个案例相同

5.2 安装axios

项目目录下执行

npm install axios

5.3 App.vue代码

<!-- <script>
//写数据
export default{data(){return{msg: '上海'}}
}
</script> --><script setup>import {ref} from 'vue';//调用ref函数，定义响应式数据const msg = ref('西安');//导入Api.vue文件 vs 开发工具显示下面一句有问题 是开发工具问题import ApiVue from './Api.vue'//Article.vue文件 vs 开发工具显示下面一句有问题 是开发工具问题import Article from './Article.vue'
</script> <template><!-- html-->  <!-- <h1>{{ msg }}</h1>   <br><ApiVue/> --><Article/></template><style scoped>
/* 样式 */
h1{color: red;
}</style>

 5.4 Article.vue代码

<script setup>//导入axiosimport axios from 'axios'; import {ref} from 'vue';//定义响应式数据 refconst articleList = ref([])//发送异步请求，获取所有文章数据axios.get('http://localhost:8080/article/getAll').then(result=>{//把服务器相应的数据保存起来articleList.value = result.data;}).catch(err=>{console.log(err)});//定义响应式数据searchConditionsconst searchConditions = ref({category:'',state:''});//声明search函数const search=function(){//发送请求完成搜索axios.get('http://localhost:8080/article/search',{params:{...searchConditions.value}}).then(result=>{articleList.value = result.data;}).catch(err=>{console.log(err)});}</script><template><!--  html元素--><div>文章分类: <input type="text" v-model="searchConditions.category">发布状态: <input type="text" v-model="searchConditions.state"><button v-on:click="search">搜索</button><br />
<br />
<table border="1 solid" colspa="0" cellspacing="0"><tr><th>文章标题</th><th>分类</th><th>发表时间</th><th>状态</th><th>操作</th></tr><tr v-for="(article,index) in articleList"><td>{{article.title}}</td><td>{{article.category}}</td><td>{{article.time}}</td><td>{{article.state}}</td><td><button>编辑</button><button>删除</button></td></tr><!-- <tr><td>标题2</td><td>分类2</td><td>2000-01-01</td><td>已发布</td><td><button>编辑</button><button>删除</button></td></tr><tr><td>标题3</td><td>分类3</td><td>2000-01-01</td><td>已发布</td><td><button>编辑</button><button>删除</button></td></tr> -->
</table>
</div></template>

5.5 代码优化1

问题：

5.5.1 新增api文件夹

5.5.2 新增article.js文件

//导入axios
import axios from 'axios'; //定义一个变量，记录公共的前缀baseURL
const baseURL = 'http://localhost:8080'
const instance = axios.create({baseURL})//获取所有文件的数据函数
export async function articleGetAllService(){//发送异步请求，获取所有文章数据//同步等待服务器相应的结果，并返回async,await//  return await axios.get('/article/getAll')return await instance.get('/article/getAll').then(result=>{//把服务器相应的数据保存起来//  articleList.value = result.data;return result.data;}).catch(err=>{console.log(err)});}//根据文章分类和发包状态搜索的函数
export async function articleGetSearchService(conditions){//发送请求完成搜索// return await axios.get('/article/search',{params : conditions})return await instance.get('/article/search',{params : conditions}).then(result=>{// articleList.value = result.data;return result.data;}).catch(err=>{console.log(err)});}
5.5.3 修改Article.vue代码
<script setup>import {articleGetAllService,articleGetSearchService} from '@/api/article.js'import {ref} from 'vue';//定义响应式数据 refconst articleList = ref([])//获取所有文章数据//同步获取articleGetAllService的返回结果 async awaitconst  getAllArticle = async function(){let data = await  articleGetAllService()articleList.value = data;}getAllArticle();//定义响应式数据searchConditionsconst searchConditions = ref({category:'',state:''});//声明search函数const search= async function(){//文章搜索let data = await articleGetSearchService({...searchConditions.value});articleList.value = data;}</script><template><!--  html元素--><div>文章分类: <input type="text" v-model="searchConditions.category">发布状态: <input type="text" v-model="searchConditions.state"><button v-on:click="search">搜索</button><br />
<br />
<table border="1 solid" colspa="0" cellspacing="0"><tr><th>文章标题</th><th>分类</th><th>发表时间</th><th>状态</th><th>操作</th></tr><tr v-for="(article,index) in articleList"><td>{{article.title}}</td><td>{{article.category}}</td><td>{{article.time}}</td><td>{{article.state}}</td><td><button>编辑</button><button>删除</button></td></tr><!-- <tr><td>标题2</td><td>分类2</td><td>2000-01-01</td><td>已发布</td><td><button>编辑</button><button>删除</button></td></tr><tr><td>标题3</td><td>分类3</td><td>2000-01-01</td><td>已发布</td><td><button>编辑</button><button>删除</button></td></tr> -->
</table>
</div></template>

5.6 代码优化2（拦截器使用）

问题

 

5.6.1 新建文件夹util

 5.6.2 新建request.js文件
// 定制请求实例//导入axios
import axios from 'axios'; //定义一个变量，记录公共的前缀baseURL
const baseURL = 'http://localhost:8080'
const instance = axios.create({baseURL})// 添加响应拦截器
instance.interceptors.response.use(result=>{return result.data;},err=>{alert('服务异常')return Promise.reject(err);//异步的状态转化成失败的状态}
)export default instance;
5.6.3 优化article.js
/*
//导入axios
import axios from 'axios'; //定义一个变量，记录公共的前缀baseURL
const baseURL = 'http://localhost:8080'
const instance = axios.create({baseURL}) */
import request from '@/util/request.js'//获取所有文件的数据函数
export async function articleGetAllService(){//发送异步请求，获取所有文章数据//同步等待服务器相应的结果，并返回async,await//  return await axios.get('/article/getAll')return request.get('/article/getAll');}//根据文章分类和发包状态搜索的函数
export async function articleGetSearchService(conditions){//发送请求完成搜索// return await axios.get('/article/search',{params : conditions})return  request.get('/article/search',{params : conditions});}

六、Element-plus

1、快速入门

1.1 步骤

1.2 实操

 1.2.1 创建vue3项目
npm init vue@latest

 

1.2.2 进入项目目录安装vue依赖
cd 项目目录
npm install

1.2.3 使用vs studio打开项目
code .

1.2.4 安装Element Plus
npm install element-plus --save

1.2.5 项目引用Element Plus

复制替换main.js文件内容

// main.ts
import { createApp } from 'vue'  //导入vue
import ElementPlus from 'element-plus'  //导入element-plus
import 'element-plus/dist/index.css'  //导入element-plus的样式
import App from './App.vue'  //导入app.vueconst app = createApp(App)  //创建应用实例app.use(ElementPlus) //使用element-plus
app.mount('#app')  //控制html元素
1.2.6 src下新建Button.vue文件
<script lang="ts" setup>import {Check,Delete,Edit,Message,Search,Star,} from '@element-plus/icons-vue'</script><template><el-row class="mb-4"><el-button>Default</el-button><el-button type="primary">Primary</el-button><el-button type="success">Success</el-button><el-button type="info">Info</el-button><el-button type="warning">Warning</el-button><el-button type="danger">Danger</el-button></el-row><el-row class="mb-4"><el-button plain>Plain</el-button><el-button type="primary" plain>Primary</el-button><el-button type="success" plain>Success</el-button><el-button type="info" plain>Info</el-button><el-button type="warning" plain>Warning</el-button><el-button type="danger" plain>Danger</el-button></el-row><el-row class="mb-4"><el-button round>Round</el-button><el-button type="primary" round>Primary</el-button><el-button type="success" round>Success</el-button><el-button type="info" round>Info</el-button><el-button type="warning" round>Warning</el-button><el-button type="danger" round>Danger</el-button></el-row><el-row><el-button :icon="Search" circle /><el-button type="primary" :icon="Edit" circle /><el-button type="success" :icon="Check" circle /><el-button type="info" :icon="Message" circle /><el-button type="warning" :icon="Star" circle /><el-button type="danger" :icon="Delete" circle /></el-row></template>
1.2.7 修改 App.vue
<script setup>
import ButtonVue from './Button.vue';</script><template><ButtonVue/>
</template>

# 启动项目
npm run dev

 

优化代码

<script lang="ts" setup>
import {Check,Delete,Edit,Message,Search,Star,
} from '@element-plus/icons-vue'
</script><template><el-row class="mb-4"><el-button>Default</el-button><el-button type="primary" disabled = "true">编辑</el-button>   <!--disabled = "true" 禁用--><el-button type="success" loading = "true">查看</el-button>     <!--loading = "true" 加载中--></el-row><el-row class="mb-4">  <el-button type="info" plain>Info</el-button><el-button type="warning" plain>Warning</el-button><el-button type="danger" plain>Danger</el-button></el-row><!--  初始化的<el-row class="mb-4"><el-button>Default</el-button><el-button type="primary">Primary</el-button><el-button type="success">Success</el-button><el-button type="info">Info</el-button><el-button type="warning">Warning</el-button><el-button type="danger">Danger</el-button></el-row><el-row class="mb-4"><el-button plain>Plain</el-button><el-button type="primary" plain>Primary</el-button><el-button type="success" plain>Success</el-button><el-button type="info" plain>Info</el-button><el-button type="warning" plain>Warning</el-button><el-button type="danger" plain>Danger</el-button></el-row><el-row class="mb-4"><el-button round>Round</el-button><el-button type="primary" round>Primary</el-button><el-button type="success" round>Success</el-button><el-button type="info" round>Info</el-button><el-button type="warning" round>Warning</el-button><el-button type="danger" round>Danger</el-button></el-row><el-row><el-button :icon="Search" circle /><el-button type="primary" :icon="Edit" circle /><el-button type="success" :icon="Check" circle /><el-button type="info" :icon="Message" circle /><el-button type="warning" :icon="Star" circle /><el-button type="danger" :icon="Delete" circle /></el-row> --></template>

2、常用组件

2.1 表格组件

2.1.1 src新增Article.vue文件
<script lang="ts" setup>
import { Delete,Edit,  
} from '@element-plus/icons-vue'
const tableData = [{title: '标题1',category: '时事',time: '2023-01-02',state: '已发布',},{title: '标题1',category: '时事',time: '2023-01-02',state: '已发布',},{title: '标题1',category: '时事',time: '2023-01-02',state: '已发布',},{title: '标题1',category: '时事',time: '2023-01-02',state: '已发布',}]
</script>
<template><el-table :data="tableData" style="width: 100%"><el-table-column prop="title" label="文章标题"/><el-table-column prop="category" label="分类"/><el-table-column prop="time" label="发表时间" /><el-table-column prop="state" label="状态" /><el-table-column  label="操作"  width="180" ><el-row><el-button type="primary" :icon="Edit" circle />    <el-button type="danger" :icon="Delete" circle /></el-row></el-table-column></el-table></template>
2.1.2 修改App.vue
<script setup>
import ButtonVue from './Button.vue';
import ArticleVue from './Article.vue';</script><template><!-- <ButtonVue/> --><ArticleVue/>
</template>

2.2 分页组件 

2.2.1 main.js修改

支持分页控件中文显示

// main.ts
import { createApp } from 'vue'  //导入vue
import ElementPlus from 'element-plus'  //导入element-plus
import 'element-plus/dist/index.css'  //导入element-plus的样式
import App from './App.vue'  //导入app.vue
import locale from 'element-plus/dist/locale/zh-cn.js'  //调整分页控件中文显示const app = createApp(App)  //创建应用实例app.use(ElementPlus,{locale}) //使用element-plus
app.mount('#app')  //控制html元素
2.2.2 Article.vue文件导入分页组件
<script lang="ts" setup>
// 按钮icon
import { Delete,Edit,  
} from '@element-plus/icons-vue'// 分页
import { ref } from 'vue'const currentPage4 = ref(4)
const pageSize4 = ref(5)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)
const total = ref(20)const handleSizeChange = (val: number) => {console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {console.log(`current page: ${val}`)
}const tableData = [{title: '标题1',category: '时事',time: '2023-01-02',state: '已发布',},{title: '标题1',category: '时事',time: '2023-01-02',state: '已发布',},{title: '标题1',category: '时事',time: '2023-01-02',state: '已发布',},{title: '标题1',category: '时事',time: '2023-01-02',state: '已发布',}]
</script>
<template><!-- 表格组件 --><el-table :data="tableData" style="width: 100%"><el-table-column prop="title" label="文章标题"/><el-table-column prop="category" label="分类"/><el-table-column prop="time" label="发表时间" /><el-table-column prop="state" label="状态" /><el-table-column  label="操作"  width="180" ><el-row><el-button type="primary" :icon="Edit" circle />    <el-button type="danger" :icon="Delete" circle /></el-row></el-table-column></el-table><!-- 分页组件 --><el-paginationclass="el-p"v-model:current-page="currentPage4"v-model:page-size="pageSize4":page-sizes="[5, 10, 15, 40200]":small="small":disabled="disabled":background="background"layout="jumper, total, sizes, prev, pager, next":total="total"@size-change="handleSizeChange"@current-change="handleCurrentChange"/></template><style scoped>.el-p{margin-top: 20px;display: flex;justify-content: flex-end;}</style>

2.3 表单组件

这里使用的是行内表单

2.3.1 Article.vue文件导入表单组件
<script lang="ts" setup>
// 按钮icon
import { Delete,Edit,  
} from '@element-plus/icons-vue'// 分页组件导入
import { ref } from 'vue'// 表单组件 行内表单
import { reactive } from 'vue'
const formInline = reactive({user: '',region: '',date: '',
})const onSubmit = () => {console.log('submit!')
}// 分页 组件
const currentPage4 = ref(4)
const pageSize4 = ref(5)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)
const total = ref(20)const handleSizeChange = (val: number) => {console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {console.log(`current page: ${val}`)
}const tableData = [{title: '标题1',category: '时事',time: '2023-01-02',state: '已发布',},{title: '标题1',category: '时事',time: '2023-01-02',state: '已发布',},{title: '标题1',category: '时事',time: '2023-01-02',state: '已发布',},{title: '标题1',category: '时事',time: '2023-01-02',state: '已发布',}]
</script>
<template><!-- 表单组件  行内表单 --><el-form :inline="true" :model="formInline" class="demo-form-inline"><!-- 查询条件1 --><el-form-item label="文章分类："><el-selectv-model="formInline.region"placeholder="请选择"clearable><el-option label="时事" value="时事" /><el-option label="篮球" value="篮球" /></el-select></el-form-item><!-- 查询条件2 --><el-form-item label="发布状态："><el-selectv-model="formInline.region"placeholder="请选择"clearable><el-option label="已发布" value="已发布" /><el-option label="草稿" value="草稿" /></el-select></el-form-item><!-- 查询按钮--><el-form-item><el-button type="primary" @click="onSubmit">查询</el-button>  </el-form-item><!-- 重置按钮 --><el-form-item>      <el-button type="default" @click="onSubmit">重置</el-button></el-form-item></el-form><!-- 表格组件 --><el-table :data="tableData" style="width: 100%"><el-table-column prop="title" label="文章标题"/><el-table-column prop="category" label="分类"/><el-table-column prop="time" label="发表时间" /><el-table-column prop="state" label="状态" /><el-table-column  label="操作"  width="180" ><el-row><el-button type="primary" :icon="Edit" circle />    <el-button type="danger" :icon="Delete" circle /></el-row></el-table-column></el-table><!-- 分页组件 --><el-paginationclass="el-p"v-model:current-page="currentPage4"v-model:page-size="pageSize4":page-sizes="[5, 10, 15, 40200]":small="small":disabled="disabled":background="background"layout="jumper, total, sizes, prev, pager, next":total="total"@size-change="handleSizeChange"@current-change="handleCurrentChange"/></template><style scoped>.el-p{margin-top: 20px;display: flex;justify-content: flex-end;}</style>

2.4 卡片组件

2.4.1 Article.vue文件导入卡片组件

导入卡片组件，将之前的组件放放在卡片组件内

<script lang="ts" setup>
// 按钮icon
import { Delete,Edit,  
} from '@element-plus/icons-vue'// 分页组件导入
import { ref } from 'vue'// 表单组件 行内表单
import { reactive } from 'vue'
const formInline = reactive({user: '',region: '',date: '',
})const onSubmit = () => {console.log('submit!')
}// 分页 组件
const currentPage4 = ref(4)
const pageSize4 = ref(5)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)
const total = ref(20)const handleSizeChange = (val: number) => {console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {console.log(`current page: ${val}`)
}const tableData = [{title: '标题1',category: '时事',time: '2023-01-02',state: '已发布',},{title: '标题1',category: '时事',time: '2023-01-02',state: '已发布',},{title: '标题1',category: '时事',time: '2023-01-02',state: '已发布',},{title: '标题1',category: '时事',time: '2023-01-02',state: '已发布',}]
</script>
<template><!-- 卡片组件 --><el-card class="box-card">   <div class="card-header"><span>文章管理</span><el-button type="primary">发布文章</el-button>      </div> <div style="margin-top: 20px;"><hr></div><!-- 表单组件  行内表单 --><el-form :inline="true" :model="formInline" class="demo-form-inline"><!-- 查询条件1 --><el-form-item label="文章分类："><el-selectv-model="formInline.region"placeholder="请选择"clearable><el-option label="时事" value="时事" /><el-option label="篮球" value="篮球" /></el-select></el-form-item><!-- 查询条件2 --><el-form-item label="发布状态："><el-selectv-model="formInline.region"placeholder="请选择"clearable><el-option label="已发布" value="已发布" /><el-option label="草稿" value="草稿" /></el-select></el-form-item><!-- 查询按钮--><el-form-item><el-button type="primary" @click="onSubmit">查询</el-button>  </el-form-item><!-- 重置按钮 --><el-form-item>      <el-button type="default" @click="onSubmit">重置</el-button></el-form-item></el-form><!-- 表格组件 --><el-table :data="tableData" style="width: 100%"><el-table-column prop="title" label="文章标题"/><el-table-column prop="category" label="分类"/><el-table-column prop="time" label="发表时间" /><el-table-column prop="state" label="状态" /><el-table-column  label="操作"  width="180" ><el-row><el-button type="primary" :icon="Edit" circle />    <el-button type="danger" :icon="Delete" circle /></el-row></el-table-column></el-table><!-- 分页组件 --><el-paginationclass="el-p"v-model:current-page="currentPage4"v-model:page-size="pageSize4":page-sizes="[5, 10, 15, 40200]":small="small":disabled="disabled":background="background"layout="jumper, total, sizes, prev, pager, next":total="total"@size-change="handleSizeChange"@current-change="handleCurrentChange"/></el-card>    </template><style scoped>.el-p{margin-top: 20px;display: flex;justify-content: flex-end;}.card-header{display: flex;justify-content: space-between;}</style>

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

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【Linux网络】详解使用http和ftp搭建yum仓库，以及yum网络源优化

【Linux网络】详解使用http和ftp搭建yum仓库，以及yum网络源优化

目录 一、回顾yum的原理 1.1yum简介 yum安装的底层原理&#xff1a; yum的好处&#xff1a; 二、学习yum的配置文件及命令 1、yum的配置文件 2、yum的相关命令详解 3、yum的命令相关案例 三、搭建yum仓库的方式 1、本地yum仓库建立 2、通过http搭建内网的yum仓库 3、…
阅读更多...
RabbitMQ消息的可靠性

RabbitMQ消息的可靠性

RabbitMQ消息的可靠性 一 生产者的可靠性 生产者重试 有时候由于网络问题&#xff0c;会出现连接MQ失败的情况&#xff0c;可以配置重连机制 注意&#xff1a;SpringAMQP的重试机制是阻塞式的&#xff0c;重试等待的时候&#xff0c;当前线程会等待。 spring:rabbitmq:conne…
阅读更多...
Java读写Jar

Java读写Jar

Java提供了读写jar的类库Java.util.jar&#xff0c;Java获取解析jar包的工具类如下&#xff1a; import java.io.File; import java.io.IOException; import java.net.URL; import java.net.URLClassLoader; import java.util.Enumeration; import java.util.HashMap; import …
阅读更多...
你知道什么是SaaS吗？

你知道什么是SaaS吗？

你知道什么是SaaS吗&#xff1f; 云服务架构的三个概念 PaaS 英文就是 Platform-as-a-Service&#xff08;平台即服务&#xff09;PaaS&#xff0c;某些时候也叫做中间件。就是把客户采用提供的开发语言和工具&#xff08;例如Java&#xff0c;python, .Net等&#xff09;开…
阅读更多...
我叫：选择排序【JAVA】

我叫：选择排序【JAVA】

1.我是个啥子&#xff1f;&#xff1f; 选择式排序&#xff1a;属于内部排序法,从欲排序的数据中,按指定的规则选出某一元素&#xff0c;再依规定交换位置后达到排序的目的。 2.我的思想 基本思想:第一次从arr[0]~arr[n-1]中选取最小值&#xff0c;与arr[0]交换&#xff0c;第…
阅读更多...
单张图像3D重建：原理与PyTorch实现

单张图像3D重建：原理与PyTorch实现

近年来&#xff0c;深度学习&#xff08;DL&#xff09;在解决图像分类、目标检测、语义分割等 2D 图像任务方面表现出了出色的能力。DL 也不例外&#xff0c;在将其应用于 3D 图形问题方面也取得了巨大进展。 在这篇文章中&#xff0c;我们将探讨最近将深度学习扩展到单图像 3…
阅读更多...
Transformer中WordPiece/BPE等不同编码方式详解以及优缺点

Transformer中WordPiece/BPE等不同编码方式详解以及优缺点

❤️觉得内容不错的话&#xff0c;欢迎点赞收藏加关注&#x1f60a;&#x1f60a;&#x1f60a;&#xff0c;后续会继续输入更多优质内容❤️ &#x1f449;有问题欢迎大家加关注私戳或者评论&#xff08;包括但不限于NLP算法相关&#xff0c;linux学习相关&#xff0c;读研读博…
阅读更多...
C++基础从0到1入门编程（三）

C++基础从0到1入门编程（三）

系统学习C 方便自己日后复习&#xff0c;错误的地方希望积极指正 往期文章&#xff1a; C基础从0到1入门编程&#xff08;一&#xff09; C基础从0到1入门编程&#xff08;二&#xff09; 参考视频&#xff1a; 1.黑马程序员匠心之作|C教程从0到1入门编程,学习编程不再难 2.系统…
阅读更多...
ubuntu下载conda

ubuntu下载conda

系统&#xff1a;Ubuntu18.04 &#xff08;1&#xff09;下载安装包 wget https://mirrors.tuna.tsinghua.edu.cn/anaconda/archive/Anaconda3-2021.11-Linux-x86_64.sh 报错错误 403&#xff1a;Forbidden 解决方法 wget -U NoSuchBrowser/1.0 https://mirrors.tuna.tsingh…
阅读更多...
Jmeter做接口测试

Jmeter做接口测试

1.Jmeter的安装以及环境变量的配置 Jmeter是基于java语法开发的接口测试以及性能测试的工具。 jdk&#xff1a;17 (最新的Jeknins&#xff0c;只能支持到17) jmeter&#xff1a;5.6 官网&#xff1a;http://jmeter.apache.org/download_jmeter.cgi 认识JMeter的目录&#xff1…
阅读更多...
【Web】Ctfshow SSRF刷题记录1

【Web】Ctfshow SSRF刷题记录1

核心代码解读 <?php $url$_POST[url]; $chcurl_init($url); curl_setopt($ch, CURLOPT_HEADER, 0); curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); $resultcurl_exec($ch); curl_close($ch); ?> curl_init()&#xff1a;初始curl会话 curl_setopt()&#xff1a;会…
阅读更多...
【力扣面试经典150题】（链表）K 个一组翻转链表

【力扣面试经典150题】（链表）K 个一组翻转链表

题目描述 力扣原文链接 给你链表的头节点 head &#xff0c;每 k 个节点一组进行翻转&#xff0c;请你返回修改后的链表。 k 是一个正整数&#xff0c;它的值小于或等于链表的长度。如果节点总数不是 k 的整数倍&#xff0c;那么请将最后剩余的节点保持原有顺序。 你不能只…
阅读更多...
【Python数据结构与算法】——(线性结构)精选好题分享,不挂科必看系列

【Python数据结构与算法】——(线性结构)精选好题分享,不挂科必看系列

&#x1f308;个人主页: Aileen_0v0&#x1f525;系列专栏:<<Python数据结构与算法专栏>>&#x1f4ab;个人格言:"没有罗马,那就自己创造罗马~" 时间复杂度大小比较 1.time complexity of algorithm A is O(n^3) while algorithm B is O(2^n). Which o…
阅读更多...
CentOS 7 安装CMake指定版本3.21.2

CentOS 7 安装CMake指定版本3.21.2

背景&#xff1a;今天在CentOS 7 电脑上安装C 日志框架SpdLog-1.12.0&#xff0c;提示如下错误信息&#xff1a; [rootlocalhost build]# cmake .. && make -j CMake Error at CMakeLists.txt:3 (cmake_minimum_required):CMake 3.10...3.21 or higher is required. …
阅读更多...
OSI参考模型

OSI参考模型

目录 一. OSI参考模型的各层功能二. 网络排错三. 网络安全四. 实体、协议、服务和服务访问点SAP五. TCP IP体系结构 一. OSI参考模型的各层功能 \quad \quad \quad \quad 我们首先来看应用层实现的功能 每个字段的各种取值所代表的意思 \quad \quad 比如要保存的文件内容是ab…
阅读更多...
DAC实验(DAC 输出三角波实验)(DAC 输出正弦波实验)

DAC实验(DAC 输出三角波实验)(DAC 输出正弦波实验)

DAC 输出三角波实验 本实验我们来学习使用如何让 DAC 输出三角波&#xff0c;DAC 初始化部分还是用 DAC 输出实验 的&#xff0c;所以做本实验的前提是先学习 DAC 输出实验。 使用 DAC 输出三角波&#xff0c;通过 KEY0/KEY1 两个按键&#xff0c;控制 DAC1 的通道 1 输出两种…
阅读更多...
论文速览 Arxiv 2023 | DMV3D: 单阶段3D生成方法

论文速览 Arxiv 2023 | DMV3D: 单阶段3D生成方法

注1:本文系“最新论文速览”系列之一,致力于简洁清晰地介绍、解读最新的顶会/顶刊论文 论文速览 Arxiv 2023 | DMV3D: DENOISING MULTI-VIEW DIFFUSION USING 3D LARGE RECONSTRUCTION MODEL 使用3D大重建模型来去噪多视图扩散 论文原文：https://arxiv.org/pdf/2311.09217.pdf…
阅读更多...
SQL SERVER 2008安装教程

SQL SERVER 2008安装教程

SQL SERVER 2008安装教程 本篇文章介绍了安装SQL Server 2008企业版的软硬件配置要求&#xff0c;安装过程的详细步骤&#xff0c;以及需要注意的事项。 安装步骤 (1). 在安装文件setup.exe上&#xff0c;单击鼠标右键选择“以管理员的身份运行”&#xff0c;如下图所示&#…
阅读更多...
某60区块链安全之不安全的随机数实战一

某60区块链安全之不安全的随机数实战一

区块链安全 文章目录 区块链安全不安全的随机数实战一实验目的实验环境实验工具实验原理实验内容攻击过程分析合约源代码漏洞EXP利用 不安全的随机数实战一 实验目的 学会使用python3的web3模块 学会以太坊不安全的随机数漏洞分析及利用 实验环境 Ubuntu18.04操作机 实验工…
阅读更多...
基于深度学习的恶意软件检测

基于深度学习的恶意软件检测

恶意软件是指恶意软件犯罪者用来感染个人计算机或整个组织的网络的软件。 它利用目标系统漏洞&#xff0c;例如可以被劫持的合法软件&#xff08;例如浏览器或 Web 应用程序插件&#xff09;中的错误。 恶意软件渗透可能会造成灾难性的后果&#xff0c;包括数据被盗、勒索或网…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发