整站使用Vue(工程化)

学习目标:

• 环境准备
• Vue项目创建和启动
• Vue项目开发流程
• API风格
• 案例

环境准备

Vue项目 - 创建

案例

<script setup>
//发送异步请求 ,获取所有文章数据
//导入axios 
import axios from 'axios';
//定义响应数据
import { ref } from 'vue';
const articleList = ref([])
axios.get('http://localhost:8080/article/getAll')
  .then(result => {
    //把服务器响应的数据保存起来
    articleList.value = result.data;

  }).catch(err => {
    console.log(err)
  })

//定义响应式数据 searchConditions
const searchConditions = ref({
  category: '',
  state: ''
})
//声明seach函数
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>

    </table>
  </div>

</template>

注意: async … await 同步接受网络请求的结果

优化1:

//导入axios 
import axios from 'axios';
// 定义一个变量 记录公共的前缀
const baseURL = 'http://localhost:8080';
const instance = axios.create({ baseURL })

//获取所有文章数据的函数
export async function articleGetAllService() {
  //同步等待服务器响应相关的结果并返回 asyn await
  return await instance.get('/article/getAll')
    .then(result => {
      // //把服务器响应的数据保存起来
      // articleList.value = result.data;
      return result.data;
    }).catch(err => {
      console.log(err)
    })

}
//根据文章分类和发布状态搜索的函数
export async function articleSearchService(conditions) {
  return await instance.get("/article/search", { params: conditions })
    .then(result => {
      return result.data;
    }).catch(err => {
      console.log(err);
    })
}

优化2:

在src中新建一个util文件夹

//定制请求的实例

//导入axios 
import axios from 'axios';
// 定义一个变量 记录公共的前缀
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;

// //导入axios 
// import axios from 'axios';
// // 定义一个变量 记录公共的前缀
// const baseURL = 'http://localhost:8080';
// const instance = axios.create({ baseURL })
import request from '@/util/request.js'
//获取所有文章数据的函数
export function articleGetAllService() {
  //同步等待服务器响应相关的结果并返回 asyn await
  return request.get('/article/getAll');
}
//根据文章分类和发布状态搜索的函数
export function articleSearchService(conditions) {
  return request.get("/article/search", { params: conditions });
}
//可以把async 和 wait删除了 因为搬来函数方法不是异步的,所以要加
//现在引入拦截器 默认就是异步的所以可以不写这两个