把上一http下的index.js封裝的地方修改成 對(duì)象解構(gòu)的方式來傳參?
這樣的話就不用考慮參數(shù)的順序問題,參數(shù)會(huì)通過key名來找到對(duì)應(yīng)的值?
而且沒有必要傳的值 比如post請(qǐng)求不需要傳params ? ? ：
/* 參數(shù)methdos默認(rèn)值是get，path表示具體路徑，post需要給data傳參默認(rèn)值是空對(duì)象，
get請(qǐng)求需要給params傳參默認(rèn)值是空對(duì)象 */
/* 這里是把傳過來的對(duì)象進(jìn)行了解構(gòu) 并給了默認(rèn)值 這樣寫不用在意參數(shù)傳遞的位置、
? ?因?yàn)樗麄兪歉鶕?jù)對(duì)象的key名稱來對(duì)應(yīng)的 */
export const httpServe = ({path='', params = {}, method = 'get', data = {}} = {}) => {
? ? return new Promise((resolve, reject) => {
? ? ? ? instance({
? ? ? ? ? ? url: path,
? ? ? ? ? ? params,
? ? ? ? ? ? method,
? ? ? ? ? ? data
? ? ? ? })
? ? ? ? ? ? .then(res => {
? ? ? ? ? ? ? ? resolve(res)
? ? ? ? ? ? })
? ? ? ? ? ? .catch(err => {
? ? ? ? ? ? ? ? reject(err)
? ? ? ? ? ? })
? ? })
}
/*這種調(diào)用的寫法 必須要按照順序 */
/* get請(qǐng)求的調(diào)用方法 */
/* httpServe('users',{name:'zhangsan'}) */
/* post請(qǐng)求的調(diào)用方法 */
/* httpServe('login',{},'post',{username:'admin',password:'123123'}) ?*/
/* 使用對(duì)象解構(gòu)的方式來傳參 */
/* 這樣的話就不用考慮參數(shù)的順序問題,參數(shù)會(huì)通過key名來找到對(duì)應(yīng)的值 */
/* 而且沒有必要傳的值 比如post請(qǐng)求不需要傳params ?*/
/* get請(qǐng)求的調(diào)用方法 */
/* httpServe({path:'users',params:{name:'zhangsan'}}) */
/* post請(qǐng)求的調(diào)用方法 */
/* httpServe({method:'post',data:{username:'admin',password:'123123'},path:'login'}) */
request.js里修改成以對(duì)象方式傳遞并添加刪除用戶
import {httpServe} from '@/http/index.js'
/* 登錄 */
export const loginPost = (path="",data={})=> httpServe({path:path,method:'post',data:data});
/* 必須以對(duì)象方式傳遞 */
/* 左側(cè)菜單列表 */
export const menusGet = (path="",params={})=> httpServe({path,params});
/* 用戶列表 */
export const usersGet = (path="",params={})=> httpServe({path,params});
/* 添加用戶 */
export const addusersPost = (path="",data={})=> httpServe({path,method:'post',data});
/* 刪除用戶 */
export const usersDelete = (path="")=> httpServe({path,method:'delete'});
之前的UsersView.vue上添加查詢和刪除功能：
<template>
? <div class="users">
? ? <el-row>
? ? ? <el-input v-model="queryName" placeholder="搜索用戶名" @keyup.native.enter="search" style="width:200px"></el-input>
? ? ? <el-button icon="el-icon-search" circle @click="search" style="margin-left:15px"></el-button>
? ? ? <el-button type="primary" round @click="drawer = true"
? ? ? ? >添加用戶</el-button
? ? ? >
? ? </el-row>
? ? <!-- :wrapperClosable="false" 表示點(diǎn)擊遮罩區(qū)域不關(guān)閉抽屜 true則可以 -->
? ? <el-drawer
? ? ? title="添加用戶"
? ? ? :visible.sync="drawer"
? ? ? :direction="direction"
? ? ? :wrapperClosable="false"
? ? >
? ? ? <add-users @addok="addok" />
? ? </el-drawer>
? ? <!-- el-table組件 需要給data屬性動(dòng)態(tài)傳遞一個(gè)數(shù)組對(duì)象tableData -->
? ? <el-table :data="tableData">
? ? ? <!-- el-table-column組件 表格中的數(shù)據(jù) 是數(shù)組對(duì)象tableData中的屬性date所對(duì)應(yīng)的值
? ? ? 比如 date屬性的值對(duì)應(yīng)的2016-05-02 -->
? ? ? <!-- 表頭標(biāo)題 是由label屬性來傳遞的 width屬性是表示表頭字段的寬度 不給寬度就自適應(yīng)表格 -->
? ? ? <el-table-column label="創(chuàng)建日期">
? ? ? ? <template slot-scope="scope">
? ? ? ? ? <div>{{ scope.row.create_time | getDate }}</div>
? ? ? ? </template>
? ? ? </el-table-column>
? ? ? <el-table-column prop="email" label="電子郵箱"></el-table-column>
? ? ? <el-table-column prop="mobile" label="手機(jī)號(hào)"></el-table-column>
? ? ? <el-table-column prop="role_name" label="角色名稱"></el-table-column>
? ? ? <el-table-column prop="username" label="用戶名"></el-table-column>
? ? ? <!-- fixed="right" 固定操作在右側(cè) -->
? ? ? ?<el-table-column fixed="right" label="操作" width="100">
? ? ? ? ? <template slot-scope="scope">
? ? ? ? ? ? <el-button type="text" size="small" @click="del(scope.row)">刪除</el-button>
? ? ? ? ? </template>
? ? ? ? ?</el-table-column>
? ? </el-table>
? ? <!-- 分頁 -->
? ? <!-- :page-sizes="[5, 10, 15, 20] 這個(gè)是用來選擇分頁的條數(shù)的 -->
? ? <!-- :page-size="5" 默認(rèn)一頁顯示5條數(shù)據(jù) -->
? ? <!-- :total="400" 總條數(shù) -->
? ? <!-- layout="total, sizes, prev, pager, next, jumper" 管理分頁展示的樣式內(nèi)容 -->
? ? <el-pagination
? ? ? @size-change="handleSizeChange"
? ? ? @current-change="handleCurrentChange"
? ? ? :current-page="currentPage"
? ? ? :page-sizes="[5, 10, 15, 20]"
? ? ? :page-size="pagesize"
? ? ? layout="total, sizes, prev, pager, next, jumper"
? ? ? :total="total"
? ? >
? ? </el-pagination>
? </div>
</template>
<script>
import { usersGet , usersDelete } from "@/http/request.js";
import AddUsers from "@/components/AddUsers.vue";
export default {
? name: "UsersView",
? components: {
? ? AddUsers,
? },
? /* 當(dāng)組件被激活的時(shí)候 , 可以為組件的菜單被點(diǎn)擊到的時(shí)候觸發(fā)*/
? activated:function(){
? console.log('我被點(diǎn)了');
? },
? /* 當(dāng)離開組件的時(shí)候觸發(fā) */
? deactivated:function(){
? ?console.log('我離開了');
? },
? data() {
? ? return {
? ? ? /* 表格數(shù)據(jù) */
? ? ? tableData: [],
? ? ? /* 抽屜打開方向從右到左 */
? ? ? direction: "rtl",
? ? ? /* 默認(rèn)抽屜是關(guān)閉的 */
? ? ? drawer: false,
? ? ? /* 默認(rèn)打開的是第一頁的數(shù)據(jù) */
? ? ? currentPage: 1,
? ? ? /* 一頁默認(rèn)展示5條 */
? ? ? pagesize: 5,
? ? ? /* 默認(rèn)總條數(shù)是0 */
? ? ? total: 0,
? ? ? /* 搜索用戶名 */
? ? ? queryName:''
? ? };
? },
? /* 局部的過濾器 */
? // filters:{
? // ? getDate(v){
? // ? ? /* 生成當(dāng)前時(shí)間戳的日期對(duì)象 */
? // ? ? let oDate = new Date(v);
? // ? ? return oDate.getFullYear()+'-'+(oDate.getMonth()+1)+'-'+oDate.getDate();
? // ? }
? // },
? created() {
? ? /* 一進(jìn)入頁面調(diào)用獲取用戶數(shù)據(jù)接口 */
? ? this.getTableDate();
? },
? methods: {
? ? /* 上面通過作用域插槽把點(diǎn)擊的一行的數(shù)據(jù)已經(jīng)傳過來了 */
? ? async del(row){
? ? ? console.log(row.id);
? ? ? try{
? ? ? ? let {data:{meta:{msg,status}}} = ?await usersDelete('users/'+row.id)
? ? ? ? if(status==200){
? ? ? ? ? this.$message.success(msg)
? ? ? ? ? /* 刪除成功之后刷新列表 */
? ? ? ? ? this.getTableDate()
? ? ? ? }else{
? ? ? ? ? this.$message.error(msg)
? ? ? ? }
? ? ? }catch(err){
? ? ? ? this.$message.error(err)
? ? ? }
? ? },
? ? /* 通過用戶名搜索 */
? ? ?search(){
? ? ? ?console.log(this.queryName);
? ? ? ?/* 點(diǎn)擊搜索 因?yàn)閝ueryName 的值通過v-model 已經(jīng)被修改
? ? ? ? ? 所以直接調(diào)取接口獲取數(shù)據(jù) */
? ? ? ?this.getTableDate()
? ? ?},
? ? /* 選擇一頁顯示多少條數(shù)據(jù) */
? ? handleSizeChange(val) {
? ? ? console.log(`每頁 ${val} 條`);
? ? ? /* 改變一頁顯示多少條 */
? ? ? this.pagesize = val;
? ? ? /* 重新獲取數(shù)據(jù)渲染表格 */
? ? ? this.getTableDate();
? ? },
? ? /* 點(diǎn)擊具體頁數(shù)、上一頁和下一頁以及輸入頁數(shù) 都會(huì)觸發(fā)下面的函數(shù) */
? ? /* 選擇當(dāng)前的是第幾頁 */
? ? handleCurrentChange(val) {
? ? ? console.log(`當(dāng)前頁: ${val}`);
? ? ? /* 改變當(dāng)前是第幾頁 */
? ? ? this.currentPage = val;
? ? ? /* 重新獲取數(shù)據(jù)渲染表格 */
? ? ? this.getTableDate();
? ? },
? ? /* 當(dāng)子組件添加數(shù)據(jù)成功的時(shí)候觸發(fā)的方法 */
? ? addok() {
? ? ? /* 重新獲取用戶數(shù)據(jù) */
? ? ? this.getTableDate();
? ? ? /* 關(guān)閉抽屜 */
? ? ? setTimeout(() => {
? ? ? ? this.drawer = false;
? ? ? }, 600);
? ? },
? ? getTableDate() {
? ? ? usersGet("users", {
? ? ? ? /* 當(dāng)前頁 */
? ? ? ? pagenum: this.currentPage,
? ? ? ? /* 一頁展示多少條 */
? ? ? ? pagesize: this.pagesize,
? ? ? ? /* 查詢參數(shù) 空字符串是查詢?nèi)?通過用戶名查詢的*/
? ? ? ? query:this.queryName
? ? ? })
? ? ? ? .then((res) => {
? ? ? ? ? let { data, meta } = res.data;
? ? ? ? ? /* 當(dāng)狀態(tài)為200表示數(shù)據(jù)獲取成功 */
? ? ? ? ? if (meta.status == 200) {
? ? ? ? ? ? /* 把數(shù)據(jù)給到tableData數(shù)組中 */
? ? ? ? ? ? this.tableData = data.users;
? ? ? ? ? ? /* 把數(shù)據(jù)中總條數(shù)給到total */
? ? ? ? ? ? this.total = data.total;
? ? ? ? ? } else {
? ? ? ? ? ? /* 如果獲取數(shù)據(jù)有誤，給出相應(yīng)提示 */
? ? ? ? ? ? this.$message.error(meta.msg);
? ? ? ? ? }
? ? ? ? })
? ? ? ? .catch((err) => {
? ? ? ? ? this.$message.error(err);
? ? ? ? });
? ? },
? },
};
</script>
效果圖:
