整站使用Vue(工程化)

一、Vue项目创建和启动

1.1 Vue项目-创建：

创建一个工程化的Vue项目，执行命令：npm init vue@latest

我这个全部选择的NO，做的一个简单VUE项目

注：执行上述指令，将会安装并执行 create-vue ，他是Vue官方的项目脚手架工具

1.2 Vue项目-安装依赖-安装依赖：

进入项目目录，执行命令安装当前项目的依赖：npm install

1.3 Vue项目-目录结构

(我是用我之前已经创建好的项目作为演示，都是一样的，就是名字不同)

二、Vue单文件

三、API风格

Vue的组件有俩种不同的风格：组合式API 和 选项式API

组合式API

setup:是一个标识，告诉Vue需要进行一些处理，让我们可以更加简洁的使用组合式API。

ref():接受一个内部值，返回一个响应式的ref对象，此对象只有一个只想内部值的属性value。

onMounted():在组合式API中的钩子方法中，注册一个回调函数，在组件挂载完成后执行。

选项式API,可以用包含多个选项的对象来描述组件的逻辑，如：data,methods,mounted等

上述俩种API，推荐使用组合式API风格

四、案例

后端的代码在前面那一篇文章里面，没有变化，主要式前端写的方式变了

（前端代码最后写出来）

之间js中的代码只能在单个文件中使用，后面如果还有其他的文件要进行相同的操作，就必须重新写一次，所以为了代码的复用性，我们把js代码封装到一个js文件中，并且以函数的形式暴露给外部；

但是我们的操作是异步请求，可以使用asnyc...await同步接受网络请求的结果

同时，在js文件中也有重复的操作就是端口号重复了，在后期想要求改就必须全部修改，也可以把这种重复的部分再次提取出来。

但是这并不是最优的，在每一次放送请求的时候都需要.then() .catch() 为了优化我们通常会使用拦截器来实现,并放在request.js文件中

在请求和响应被 then 或 catch 处理前拦截他们

request.js代码：

javascript 复制代码

//定制请求的示例

//导入axios文件 npm install 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;

article.js代码：

javascript 复制代码

import request from "@/util/request.js";

//获取所有文章数据的函数

export  function articleGetAllSearch() {
    //发送异步请求，获取所有文章数据
    //需要同步等待服务器相应的结果，并返回，async,await
    return  request.get("/article/getAll");
}
//根据文章分类和发布状态搜索的函数
export  function articleSearchService(conditions) {
    //发送请求，完成搜索
    return  request.get('/article/search', { params: conditions });

Article.vue代码：

html 复制代码

<script setup>
import { articleGetAllSearch, articleSearchService } from '@/api/article.js';
import { ref } from 'vue';
//定义响应式数据
const articleList = ref([]);

//获取所有文章数据
//同步获取/articleGetAllService的返回结果 async await
const getAllArticle = async function () {
    let data = await articleGetAllSearch();
    articleList.value = data;
}

getAllArticle();

//定义响应式数据
const searchConditions = ref({
    category: '',
    state: ''
});

//文章搜索
const search = async function () {
    let data = await articleSearchService({ ...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>
        </table>
    </div>

</template>