1.Vue的一些技巧
—
aricle.js
//导入axios
import axios from 'asios';
//定义一个变量,记录公共前缀
const baseURL='http://localhost:8080';
const instance=axios.create({baseURL})
//获取所有文章数据的函数
export async function articleGetAllService(){
//发送异步请求
//同步等待服务器响应的结果,并返回 async await
return await instance.get('/article/getAll')
.then(result=>{
return result.data;
}).catch(err=>{
console.log(err);
})
}
//根据文章的分类和发布状态进行搜索的函数
export async function articleSearchService(){
return await instance.get('/article/search',{params:conditions})
.then(result=>{
return result.data;
}).catch(err=>{
console.log(err);
})
}
Arcicle.vue的部分改动代码
<script setup>
import {ref} from 'vue';
import {articleGetAllService,articleSearchService} from '@/api/article.js'
//获取所有文章数据
//同步获取articleGetAllService的返回结果
const getAllArticle=async function(){
let data=await articleGetAllService();
articleList.value=data;
}
getAllArticle();
//定义响应式数据
const articleList=ref([]);
const searchConditions=ref({
category:'',
state:''
})
const search=async function(){
let data=await articleSearchService({...searchConditions.value});
articleList.value=data;
}
</script>
代码
request.js
//定制请求的实例
//导入axios
import axios from 'asios';
//定义一个变量,记录公共前缀
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;
artcile.js修改后的代码
import request from '@util/request.js'
//获取所有文章数据的函数
export function articleGetAllService(){
//发送异步请求
//同步等待服务器响应的结果,并返回 async await
return request.get('/article/getAll')
}
//根据文章的分类和发布状态进行搜索的函数
export function articleSearchService(){
return request.get('/article/search',{params:conditions})
}
2.element-plus
<script lang="ts" setup>
import { ref } from 'vue'
const currentPage4 = ref(1)
const pageSize4 = ref(5)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)
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: '2000-01-02',
state:'草稿',
},
{
title: '标题2',
category: '医疗',
time: '2002-01-02',
state:'草稿',
}, {
title: '标题3',
category: '科技',
time: '2024-01-02',
state:'草稿',
},
{
title: '标题4',
category: '美食',
time: '2045-01-02',
state:'已发布',
},
{
title: '标题4',
category: '美食',
time: '2045-01-02',
state:'已发布',
},
{
title: '标题4',
category: '美食',
time: '2045-01-02',
state:'已发布',
},
]
import {
Delete,
Edit,
} from '@element-plus/icons-vue'
</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-pagination
class="el-p"
v-model:current-page="currentPage4"
v-model:page-size="pageSize4"
:page-sizes="[5,10,15,20]"
:small="small"
:disabled="disabled"
:background="background"
layout="jumper,total, sizes, prev, pager, next "
:total="20"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</template>
<style scpoed>
.el-p{
margin-top :20px;
display:flex;
justify-content: flex-end;
}
</style>
// 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元素