记录最好的自己

import { createApp } from 'vue'
import App from './App.vue'

// 导入路由
import Router from './components/tools/Router'
// 导入ElementPlus
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const app = createApp(App)
// 遍历ElementPlusIconsVue中的所有组件进行祖册
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    // 向应用实例中全局注册图标组件
    app.component(key, component)
}
app.use(ElementPlus) // 使用ElementPlus
app.use(Router); // 使用路由
app.mount('#app')

<el-table
            ref="multipleTable"
            :data="postList"
            tooltip-effect="dark"
            style="width: 100%"
            fit
            :pagination="pagination"
            @selection-change="handleSelectionChange" >
                <el-table-column
                type="selection"
                width="55">
                </el-table-column>
                <el-table-column
                label="ID"
                width="100"
                prop="id">
                </el-table-column>
                <el-table-column
                label="标题"
                width="450"
                prop="title">
                </el-table-column>
                <el-table-column
                label="是否置顶"
                width="100"
                prop="isTop">
                </el-table-column>
                <el-table-column
                label="热度"
                width="100"
                prop="viewsCount">
                </el-table-column>
                <el-table-column
                label="发布时间"
                width="200"
                prop="pubTime">
                </el-table-column>
                <el-table-column
                label="操作"
                >
                    <template #default="scope">
                        <el-button size="mini" type="danger" @click="deleteItem(scope.$index)">删除</el-button>         
                    </template>     
                </el-table-column>
            </el-table>

// 博客文章列表数据
postList:[],
// 分页
pagination: {
    currentPage: 1, // 当前页
    pageSize: 10, // 每页显示条数
    total: 0, // 总条数
    layout: 'total,sizes,prev, pager, next, jumper', // 分页布局
},

<el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="pagination.currentPage"
    :page-sizes="[10, 20, 30, 40]"
    :page-size="pagination.pageSize"
    layout="total, sizes, prev, pager, next, jumper"
    :total="pagination.total">
</el-pagination>

<template>
    <div class="content-container" direction="vertical">
        <!-- input -->
        <div>
            <el-container class="content-row">
                <div class="input-tip">
                    文章标题:
                </div>
                <div class="input-field" style="width: 400px;">
                    <el-input v-model="queryParam.words"></el-input>
                </div>
                <el-button type="primary" @click="getBlogList">筛选</el-button>
                <el-button type="danger" @click="clear">清空筛选</el-button>
            </el-container>
        </div>
        <!-- list -->
        <div>
            <el-tabs type="card" @tab-click="handleClick">
                <el-tab-pane label="全部"></el-tab-pane>
                <el-tab-pane v-for="(item,index) in blogCategorys"
                 :key="index"
                 :label="item.title"
                 :name="item.id">
                </el-tab-pane>
            </el-tabs>
            <el-table
            ref="multipleTable"
            :data="postList"
            tooltip-effect="dark"
            style="width: 100%"
            fit
            :pagination="pagination"
            @selection-change="handleSelectionChange" >
                <el-table-column
                type="selection"
                width="55">
                </el-table-column>
                <el-table-column
                label="ID"
                width="100"
                prop="id">
                </el-table-column>
                <el-table-column
                label="标题"
                width="450"
                prop="title">
                </el-table-column>
                <el-table-column
                label="是否置顶"
                width="100"
                prop="isTop">
                </el-table-column>
                <el-table-column
                label="热度"
                width="100"
                prop="viewsCount">
                </el-table-column>
                <el-table-column
                label="发布时间"
                width="200"
                prop="pubTime">
                </el-table-column>
                <el-table-column
                label="操作"
                >
                    <template #default="scope">
                        <el-button size="mini" type="danger" @click="deleteItem(scope.$index)">删除</el-button>         
                    </template>     
                </el-table-column>
            </el-table>
            <div class="pagination-container">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pagination.currentPage"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="pagination.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pagination.total">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<style scoped>
.pagination-container {
  margin-top: 20px;
  text-align: center;
}
</style>

<script>
import {getBlogList,getBlogCategory} from '@/api' 
export default {
    data() {
        return {
            // 博客文章列表数据
            postList:[],
            // 筛选博客的参数
            queryParam:{
                words:"",
                cateid:"",
                tag:"",
                search:"",
                page:1,
                size:10
            },
            // 分页
            pagination: {
                currentPage: 1, // 当前页
                pageSize: 10, // 每页显示条数
                total: 0, // 总条数
                layout: 'total,sizes,prev, pager, next, jumper', // 分页布局
            },
            // 博客分类
            blogCategorys:[],
            // 当前选中的博客分类
            selectCategory:"",
            // 当前选中的博客文章
            multipleSelection:[]
        }
    },
    mounted () {
        this.getBlogList();
        this.getBlogCategory();
    },
    // 路由更新时刷新数据
    beforeRouteUpdate (to) {
        this.getBlogList();
        this.getBlogCategory();
    },
    methods : {
        // 获取博客文章列表数据
        getBlogList() {
            getBlogList(this.queryParam).then(res => {
                this.postList = res.data.items
                this.pagination.total = res.data.total
                this.pagination.currentPage= res.data.page
                    console.log(res.data)
                }).catch(err => {
                    console.log(err)
                })
        },
        // 获取博客分类数据
        getBlogCategory() {
            getBlogCategory().then(res => {
                this.blogCategorys = res.data
                console.log(res)
            }).catch(err => {
                console.log(err)
            })
        },
        // 改变分页大小
        handleSizeChange(val) {
            this.pagination.pageSize = val;
            this.queryParam.size = val;
            this.getBlogList(); 
        },
        // 跳到当前页 
        handleCurrentChange(val) {
            this.pagination.currentPage = val;
            this.queryParam.page = val;
            this.getBlogList();
        },
        // 切换Tab 刷新数据
        handleClick(tab) {
            this.queryParam.cateid = tab.props.name
            this.getBlogList();
        },
        // 清空筛选项
        clear() {
            this.queryParam.words=""
            this.getBlogList();
        },
       
    }
}
</script>

import axios from 'axios'
const api_rul = import.meta.env.VITE_APP_API_URL
// create an axios instance
const service = axios.create({
    baseURL: api_rul,
    timeout: 5000 // request timeout
})
export default service

import './assets/main.css'
import { createApp } from 'vue'
import App from './App.vue'

console.log('环境变量：', import.meta.env);

createApp(App).mount('#app')

{
  "name": "mocktest",
  "version": "0.0.0",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "vite",
    "test": "vite --mode test",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "axios": "^1.7.5",
    "vue": "^3.4.29"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.0.5",
    "mockjs": "^1.1.0",
    "vite": "^5.3.1",
    "vite-plugin-mock": "^3.0.2"
  }
}

package.json
{
  "name": "mocktest",
  "version": "0.0.0",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "vite",
    "test": "vite --mode test",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "axios": "^1.7.5",
    "vue": "^3.4.29"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.0.5",
    "mockjs": "^1.1.0",
    "vite": "^5.3.1",
    "vite-plugin-mock": "^3.0.2"
  }
}

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { viteMockServe } from 'vite-plugin-mock'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    // mock 数据的 dev环境
    viteMockServe({
      // supportTs: true, // 是否开启支持ts
      mockPath: 'mock', // 设置mockPath为根目录下的mock目录
      localEnabled: true, // 设置是否监视mockPath对应的文件夹内文件中的更改
      prodEnabled: false, // 设置是否启用生产环境的mock服务
      watchFiles: true, // 是否监视文件更改
      logger: true  //是否在控制台显示请求日志
    }),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

export default [{
    url: '/mock/api/getApiInfo',
    method: 'get',
    response: () => {
      return {
        code: 200,
        title: 'mock api test.'
      }
    }
  },
  {
    url: '/api/category',
    type: 'get',
    response: () => {
        return {
            code: 200,
            data: [
                {
                    id: 1,
                    title: 'JAVA',
                    href: '/category/java'
                },
                {
                    id: 2,
                    title: 'SpringBoot',
                    href: '/category/SpringBoot',
                },
                {
                    id: 3,
                    title: 'MySql',
                    href: '/category/MySql'
                },
                {
                    id: 4,
                    title: '随笔',
                    href: '/category/live'
                }
            ]
        }
    }
  }
]

import Mock from 'mockjs';

// 通过Mock生成模拟数据
const userdata = Mock.mock({
  'list|10': [
    {
      'id|+1': 1,
      'name': '@cname',
      'age|18-60': 1,
      'email': '@email',
    },
  ],
}); 

export default [
  {
    url: '/mock/api/getUserInfo',
    method: 'get',
    response: () => {
      return {
        code: 200,
        data: userdata
      }
    }
  },
]

import axios from 'axios'

async getData() {
         await axios.get('/mock/api/getApiInfo').then(res =>{
          console.log(res.data)
          this.msg = res.data.title
        }
      )
    },

import axios from 'axios'
const api_rul = ''  //mock 接口地址可以为空字符串，真实接口配置为真实的接口地址。
// create an axios instance
const service = axios.create({
    baseURL: api_rul,
    timeout: 5000 // request timeout
})

export default service

import service from '@/utils/service'

export function  getCategory() {
    return service({
        url: '/api/category',
        method: 'get',
        params: {}
    })
}

export function  getUserInfo() {
    return service({
        url: '/mock/api/getUserInfo',
        method: 'get',
        params: {}
    })
}

// 方法二：通过封装后的get方法获取数据
    getUserInfo()
    {
      getUserInfo().then(res =>{
          console.log(res.data)
          this.userinfo = res.data.data
        }
      )
    },
    getCategory()
    {
      getCategory().then(res =>{
          console.log(res.data)
          this.categorys = res.data.data
        }
      )
    }

<template>
  <h1>{{ msg }}</h1>
  <div>
    人员列表
  </div>
  <div>
    <ul>
      <li v-for="(user) in userinfo.list" :key="index">
        {{ user.id }} : {{ user.name }}  {{ user.age }}  {{ user.email }}
      </li>
    </ul>
  </div>
  <div>
    目录
  </div>
  <div>
    <ul>
      <li v-for="(category) in categorys" :key="index">
        {{ category.id }} : {{ category.title }}  {{ category.href }} 
      </li>
    </ul>
  </div>
</template>
<script >
import axios from 'axios'
import { getCategory,getUserInfo } from '../api/mockapi'

export default {
  data() {
    return {
      msg: 'Welcome to Your Vue.js App',
      userinfo: {},
      categorys: []
    };
  },
  mounted() {
    this.getData()
    this.getUserInfo()
    this.getCategory()
  },
  methods: {
    // 方法一：直接axios请求调用获取mock数据
    async getData() {
         await axios.get('/mock/api/getApiInfo').then(res =>{
          console.log(res.data)
          this.msg = res.data.title
        }
      )
    },
    // 方法二：通过封装后的get方法获取数据
    getUserInfo()
    {
      getUserInfo().then(res =>{
          console.log(res.data)
          this.userinfo = res.data.data
        }
      )
    },
    getCategory()
    {
      getCategory().then(res =>{
          console.log(res.data)
          this.categorys = res.data.data
        }
      )
    }
  }
}
</script>