main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import './plugins/element.js'
import Api from './api/index.js'
import './mock'
import { MessageBox, Message } from 'element-ui'
Vue.config.productionTip = false
Vue.prototype.$api = Api
Vue.prototype.$confirm = MessageBox.confirm
Vue.prototype.$message = Message
new Vue({
store,
router,
beforeCreate() {
Vue.prototype.$bus = this
},
render: h => h(App)
}).$mount('#app')
http.js(axios)
import Axios from 'axios'
const axios = Axios.create({
// baseURL: process.env.NODE_ENV === 'development' ? '' : '',
})
/* resful语法 */
// 添加请求拦截器
axios.interceptors.request.use(function(config) {
// 在发送请求之前做些什么
console.log(config);
return config;
});
// 添加响应拦截器
axios.interceptors.response.use(function(response) {
// 对响应数据做点什么
return response;
}, function(error) {
// 对响应错误做点什么
return Promise.reject(error);
});
/* url就是接口地址
method = 'get'默认的请求方式
data 放参数的位置 */
export default (url, method = 'get', data = {}) => {
return axios({
url,
method,
data
})
}
index.js
const context = require.context('./', false, /.js$/)
const modules = {}
context.keys().forEach(fileName => {
if (!['./index.js', './http.js'].includes(fileName)) {
Object.assign(modules, context(fileName))
}
})
export default modules
page.js
import http from './http'
export const getList = data => {
return http('/list', 'get', data)
}
export const getTotal = () => {
return http('/list/total')
}
export const getListByValue = data => {
return http('/list/value', 'get', data)
}
export const addList = data => {
return http('/list/add', 'post', data)
}
export const updateList = data => {
return http('/list/update', 'put', data)
}
export const deleteList = data => {
return http('/list/delete', 'delete', data)
}
user.js
import http from './http'
export const login = data => {
return http('/login', 'post', data)
}
TopBar.vue
<template>
<div class="top-bar">
<el-input placeholder="请输入内容,按回车键搜索..." clearable
@clear="getListdata"
@keydown.enter.native="handleSearch"
v-model="inputValue">
<template slot="append">
<span class="search" @click="handleSearch">搜索</span>
</template>
</el-input>
<el-button type="primary" @click="$emit('show')">添加商品</el-button>
</div>
</template>
<script>
export default {
data () {
return {
inputValue: ''
}
},
methods: {
handleSearch () {
this.$emit('handleSearch', this.inputValue)
},
getListdata(){
this.$emit('getdataList')
}
}
}
</script>
<style lang="less" scoped>
.top-bar {
.el-input {
width: 300px;
.search {
cursor: pointer;
color:#333;
}
}
.el-button {
margin-left: 15px;
}
}
</style>
user.vue
<template>
<div>
<top-bar @handleSearch="handlesearch" @getdataList="getdatali"></top-bar>
<el-table :data="tableData" style="width: 100%" v-loading="loading">
<el-table-column type="index" label="#" width="50">
</el-table-column>
<el-table-column prop="date" label="日期" width="180">
</el-table-column>
<el-table-column prop="name" label="姓名" width="180">
</el-table-column>
<el-table-column prop="address" label="地址">
</el-table-column>
<el-table-column prop="likes" label="爱好">
</el-table-column>
<el-table-column label="操作" width="200">
<template v-slot:default="scope">
<div class="btns">
<el-button type="primary">
<i class="el-icon-edit"></i>
</el-button>
<el-button type="danger">
<i class="el-icon-delete"></i>
</el-button>
</div>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
import TopBar from '../components/main/TopBar.vue'
export default {
name: 'User',
components: {
TopBar
},
data() {
return {
loading:false,
total:0,
page:{
size: 10,
current: 1
},
tableData: [],
search: ''
}
},
mounted() {
this.getList(this.page.current)
},
methods: {
handleEdit(index, row) {
console.log(index, row);
},
handleDelete(index, row) {
console.log(index, row);
},
getList(current){
this.loading = true
this.$api.getList({
current
}).then(res=>{
console.log(res);
this.tableData = res.data
this.loading = false
})
},
/* 搜索 */
handlesearch(value){
if(value == ''){
this.$message({
message: '警告哦,这是一条警告消息',
type: 'warning'
});
this.getList()
return
}else {
this.loading = true
this.$api.getListByValue({
value
}).then(res=>{
this.tableData = res.data.list
this.total = res.data.total
this.loading = false
})
}
},
getdatali(){
this.getList(this.page.current)
}
}
}
</script>
<style>
</style>
删除和分页
<template>
<div>
<top-bar @handleSearch="handlesearch" @getdataList="getdatali"></top-bar>
<el-table
:data="tableData.slice((currpage - 1) * pagesize, currpage * pagesize)"
v-loading="loading"
>
<el-table-column type="index" label="#" width="50"> </el-table-column>
<el-table-column prop="date" label="日期" width="180"> </el-table-column>
<el-table-column prop="name" label="姓名" width="180"> </el-table-column>
<el-table-column prop="address" label="地址"> </el-table-column>
<el-table-column prop="likes" label="爱好"> </el-table-column>
<el-table-column label="操作" width="200">
<template v-slot:default="scope">
<div class="btns">
<el-button type="primary" @click="btnDelete(scope.$index, scope.row)">
<i class="el-icon-edit"></i>
</el-button>
<!-- 删除 -->
<el-button
type="danger"
@click="btnDelete(scope.$index, scope.row)"
>
<i class="el-icon-delete"></i>
</el-button>
</div>
</template>
</el-table-column>
</el-table>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currpage"
:page-sizes="[2, 5,10]"
:page-size="100"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
>
</el-pagination>
</div>
</template>
<script>
import TopBar from "../components/main/TopBar.vue";
export default {
name: "User",
components: {
TopBar,
},
data() {
return {
loading: false,
total: 0,
page: {
size: 10,
current: 1,
},
tableData: [],
search: "",
pagesize: 2,
currpage: 1,
};
},
mounted() {
this.getList(this.page.current);
// this.getTotal()
},
methods: {
getList() {
this.$api.getList().then((res) => {
this.tableData = res.data;
});
},
btnDelete(index, row) {
this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
this.getList(this.page.current);
this.$api
.deleteList({
id: row.id,
})
.then((res) => {
console.log(res);
});
this.$message({
type: "success",
message: "删除成功!",
});
})
.catch(() => {
this.$message({
type: "info",
message: "已取消删除",
});
});
},
handleSizeChange(val) {
this.pagesize = val;
console.log(`每页 ${val} 条`);
},
handleCurrentChange(val) {
this.currpage = val;
console.log(`当前页: ${val}`);
},
// 编辑
handleEdit(index, row) {
console.log(index, row);
},
// 请求总页面数据
getList(current) {
this.loading = true;
this.$api
.getList({
current,
})
.then((res) => {
console.log(res);
this.total = res.data.length;
this.tableData = res.data;
this.loading = false;
});
},
/* 搜索 */
handlesearch(value) {
console.log(value);
if (value == "") {
this.getList(this.page.current)
}
else {
this.loading = true;
this.$api
.getListByValue({
value,
})
.then((res) => {
this.tableData = res.data.list;
this.total = res.data.total;
this.loading = false;
});
}
},
getdatali(value) {
console.log(value);
this.getList(this.page.current);
},
getTotal(){
this.$api.getTotal().then(res=>{
console.log(res);
this.total = res.data
})
}
},
};
</script>
<style>
</style>