第一步

在控制台上安装axios  npm i axios

在main.js里写

import axios from "axios";

Vue.prototype.$axios = axios;

第二

打开Element - The world's most popular Vue UI framework

在控制台上安装npm i element-ui -S

在main.js里写

import ElementUI from 'element-ui';

import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

第三步

创建俩个包 utlis 和api（不确定谁便起）再在包里创文件夹 request.js  impus.js

第四步

在 request.js把axios调过来

<code>import axios from "axios";

const request = axios.create({

baseURL:"http://localhost:8083",

timeout:5000

})

request.interceptors.request.use(

(request) => {

// let token = localStorage.getItem('token')

// if (token) {

// console.log(request.headers);

// // 请求头携带token

// request.headers.Authorization = token;

// }

return request;

},

(error) => {

Promise.reject(error);

}

);

// 响应拦截器

// request.interceptors.response.use(

// (response) => {

// return response.data

// },

// (error) => {

// Promise.reject(error);

// }

// );

export default request;

baseURL:"http://localhost:8083",自己后端的端口号

 timeout:5000后端传给前端的时间

第五

impus.js里写的是接口

import create from "../utils/request"

export function selectDisplay(data) {

return create({

url: "/api/ck",

method: "post",

changeOrigin: true,

data: data

})

}

url:路径

method:请求方式

import create from "../utils/request"把request.js调过来

第六页面

<template>

<div>

<!-- 新增按钮 -->

<el-button type="primary" @click="showAddDialog">新增用户</el-button>code>

-----------------------------------------------------------------------------------------

<!-- 新增的表单框 -->

<el-dialog title="新增用户信息" :visible.sync="addDialogVisible">code>

<el-form :model="addForm">code>

<el-form-item label="电话">code>

<el-input v-model="addForm.phone" autocomplete="off"></el-input>code>

</el-form-item>

</el-form>

<div slot="footer" class="dialog-footer">code>

<el-button @click="addDialogVisible = false">取消</el-button>code>

<el-button type="primary" @click="addUser">确定</el-button>code>

</div>

</el-dialog>

-----------------------------------------------------------------------------------------

<!-- 用户列表展示 -->

<el-table :data="tableData" style="width: 100%">code>

<el-table-column label="id" width="180">code>

<template slot-scope="scope">code>

<i class="el-icon-time"></i>code>

<span style="margin-left: 10px">{ { scope.row.id }}</span>code>

</template>

</el-table-column>

-----------------------------------------------------------------------------------------

<el-table-column label="手机号">code>

<template slot-scope="scope">code>

{ { scope.row.phone }}

</template>

</el-table-column>

-----------------------------------------------------------------------------------------

<el-table-column label="操作">code>

<template slot-scope="scope">code>

<el-button size="mini" @click="showEditDialog(scope.row)">编辑</el-button>code>

<el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>code>

</template>

</el-table-column>

</el-table>

-----------------------------------------------------------------------------------------

<!-- 编辑用户表单框 -->

<el-dialog title="编辑用户信息" :visible.sync="editDialogVisible">code>

<el-form :model="editForm">code>

<el-form-item label="电话">code>

<el-input v-model="editForm.phone" autocomplete="off"></el-input>code>

</el-form-item>

</el-form>

<div slot="footer" class="dialog-footer">code>

<el-button @click="editDialogVisible = false">取消</el-button>code>

<el-button type="primary" @click="editUser">确定</el-button>code>

</div>

</el-dialog>

--------------------------------------------------------------------------------------

</div>

</template>

<script>

import { insert, selectDisplay, updateadd,hytrht} from '@/api/impus';

export default {

data() {

return {

---------------------------------------------------------------------------------------

addForm: {//自己谁便起

phone: ''

},//新增的

-----------------------------------------------------------------------------------------

editForm: {

id: '',

phone: ''

},//修改的

----------------------------------------------------------------------------------------

htry:{

id:""

},//删除

----------------------------------------------------------------------------------------

tableData: [],//把数据库里的存在数组里

----------------------------------------------------------------------------------------

addDialogVisible: false,

editDialogVisible: false

};

},

methods: {

----------------------------------------------------------------------------------------

// 打开新增表单框

showAddDialog() {

this.addDialogVisible = true;

},

-----------------------------------------------------------------------------------------

// 打开修改表单框

showEditDialog(row) { //showEditDialog和修改那个边框对应的名字

this.editForm.id = row.id;//根据id修改

this.editForm.phone = row.phone;//页面上的数据传到表单里然后进行修改数据

this.editDialogVisible = true;// 打开表单框

},

----------------------------------------------------------------------------------------

// 新增用户

addUser() {

insert(this.addForm)//和路径对应得

.then((res) => {

console.log('新增成功');

this.addDialogVisible = false; // 关闭表单框

// this.refreshTable(); // 刷新表格数据

})

.catch((err) => {

console.log('新增失败');

});

},

----------------------------------------------------------------------------------------

// 编辑用户

editUser() {

updateadd(this.editForm)//调参数的时候要和data每个模块的一样

.then((res) => {

console.log(res);

this.editDialogVisible = false; // 关闭对话框

})

.catch((err) => {

console.log('修改失败');

});

},

----------------------------------------------------------------------------------------

// 删除用户

handleDelete(row) {

this. htry.id = row.id;

hytrht(this.htry).then((result) => {

console.log("删除成功");

}).catch((err) => {

console.log("删除失败");

});

},

----------------------------------------------------------------------------------------

// 数据库里查询的信息

refreshTable() {//自定义的名

selectDisplay({})//查询的要求//路径名

.then((res) => {

console.log(res);

this.tableData = res.data; // 渲染到页面上

})

.catch((err) => {

console.error(err);

});

}

},

-----------------------------------------------------------------------------------------

created() {//生命周期里的创造后

this.refreshTable(); //渲染到控制台上

}

}; created()和 methods: 同级

-----------------------------------------------------------------------------------------

</script>

<style>

</style>