目录
1.引入
<!-- 引入vue的js--> <script type="text/javascript" src="./js/vue.js"></script> <!-- 引入axios的js--> <script type="text/javascript" src="./js/axios.min.js"></script> <!-- 引入element ui的js必须在引入vue之后 引入组件库--> <script type="text/javascript" src="./js/index.js"></script> <!-- 引入element ui的css 引入样式--> <link rel="stylesheet" href="./css/index.css">
2.解决Axios跨域报错
2.1什么是跨域报错
跨域请求错误:
什么是跨域: 从一个服务器请求另一个服务器。这种请求必须为ajax请求。 只要这两个服务器之间 协议 ip port有一个不一致的。则出现跨域问题。
2.2问题解决
这里有两种方案（后端）
(1) 使用@CrossOrigin----需要在每个接口类上添加
@CrossOrigin
(2) 使用一个跨域配置类
package com.funian.config; import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.CorsRegistry; import org.springframework.web.servlet.config.annotation.WebMvcConfigurer; @Configuration public class CorsConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") // 所有接口 .allowCredentials(true) // 是否发送 Cookie .allowedOrigins("*") // .allowedOriginPatterns("*") // 支持域 .allowedMethods(new String[]{"GET", "POST", "PUT", "DELETE"}) // 支持方法 .allowedHeaders("*") .exposedHeaders("*"); } }上面两种方案不能同时使用
3.使用ElementUi
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>element-ui</title>
<!-- 引入vue的js-->
<script type="text/javascript" src="./js/vue.js"></script>
<!-- 引入axios的js-->
<script type="text/javascript" src="./js/axios.min.js"></script>
<!-- 引入element ui的js必须在引入vue之后 引入组件库-->
<script type="text/javascript" src="./js/index.js"></script>
<!-- 引入element ui的css 引入样式-->
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div id="app">
<el-form :inline="true" :model="studentSearchForm" class="demo-form-inline">
<el-form-item label="学生姓名">
<el-input v-model="studentSearchForm.sname" placeholder="请输入学生姓名"></el-input>
</el-form-item>
<el-form-item label="学生年龄">
<el-input v-model="studentSearchForm.sage" placeholder="请输入学生年龄"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="initTable">查询</el-button>
<!-- :disabled="this.sels.length === 0" 如果没有数据让删除按钮失效 -->
<el-button type="danger" @click="batchDelete" :disabled="this.sels.length === 0">批量删除</el-button>
<el-button type="primary" @click="batchInsert" >添加</el-button>
</el-form-item>
</el-form>
<el-table
:data="tableData"
stripe
style="width: 100%"
border @selection-change="handleSelectionChange"
>
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
prop="sid"
label="学生编号">
</el-table-column>
<el-table-column
prop="sname"
label="学生姓名">
</el-table-column>
<el-table-column
prop="sage"
label="学生年龄">
</el-table-column>
<el-table-column
prop="classes.ccurriculum"
label="班级名称">
</el-table-column>
<el-table-column
fixed="right"
label="操作">
<template slot-scope="scope">
<el-button type="warning" size="small" icon="el-icon-delete" @click="edit(scope.row)">编辑</el-button>
<el-button type="danger" size="small" icon="el-icon-delete" @click="del(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页组件的开始-->
<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>
<!-- 编辑弹窗-->
<el-dialog
title="修改学生信息"
:visible.sync="dialogVisible"
width="30%"
>
<el-form ref="form" :model="updateStudentForm" label-width="80px">
<el-form-item label="学生id">
<el-input v-model="updateStudentForm.sid"/>
</el-form-item>
<el-form-item label="学生姓名">
<el-input v-model="updateStudentForm.sname"></el-input>
</el-form-item>
<el-form-item label="学生年龄">
<el-input v-model="updateStudentForm.sage"></el-input>
</el-form-item>
<el-form-item label="班级名称" >
<el-select v-model="updateStudentForm.classid" placeholder="请选择班级">
<el-option :label="item.ccurriculum" :value="item.cid" v-for="item in classData"></el-option>
</el-select>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="update()">确 定</el-button>
</span>
</el-dialog>
<!-- 添加弹窗-->
<el-dialog
title="添加学生信息"
:visible.sync="dialogVisible01"
width="30%"
>
<el-form ref="form" :model="insertStudentForm" label-width="80px">
<el-form-item label="学生姓名">
<el-input v-model="insertStudentForm.sname"></el-input>
</el-form-item>
<el-form-item label="学生年龄">
<el-input v-model="insertStudentForm.sage"></el-input>
</el-form-item>
<el-form-item label="班级名称" >
<el-select v-model="insertStudentForm.classid" placeholder="请选择班级">
<el-option :key="item.cid" :label="item.ccurriculum" :value="item.cid" v-for="item in classData"></el-option>
</el-select>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="ins()">确 定</el-button>
</span>
</el-dialog>
</div>
</body>
<script>
let app = new Vue({
el: "#app",
data: {
tableData:[],//表格数据
studentSearchForm:{},//查询出的学生信息
currentPage: 1,//当前页码 默认为1
pageSize: 5,//每页最多显示数据条数 默认为5
total: 0,//查询出的数据总条数
dialogVisible:false, //修改
updateStudentForm:{},//更新的学生信息
classData: [],//查询出的班级信息
sels: [], //当前选框选中的值
dialogVisible01:false, //添加
insertStudentForm:{},//插入的学生信息
},
//页面加载完毕自动执行
created(){
this.initTable();
this.selectCl();
},
methods: {
initTable() {
axios.post("http://localhost:8080/student/selectByPage/" + this.currentPage + "/" + this.pageSize, this.studentSearchForm).then(result => {
this.tableData = result.data.data.records;
this.total = result.data.data.total;
})
},
//改变每页的条数触发
handleSizeChange(val) {
this.pageSize = val;
this.initTable();
},
//改变当前页码触发
handleCurrentChange(val) {
this.currentPage = val;
this.initTable();
},
//删除学生
del(row) {
let sid = row.sid;
axios.delete("http://localhost:8080/student/deleteStudent/" + sid).then(result => {
if (result.data.code === 200) {
this.$message.success(result.data.msg);
this.initTable();
}
})
},
//修改学生信息
edit(row) {
this.dialogVisible = true;
console.log(row);
this.updateStudentForm = row;
},
update() {
axios.put("http://localhost:8080/student/updateStudent", this.updateStudentForm).then(result => {
if (result.data.code === 200) {
this.$message.success(result.data.msg);
this.dialogVisible = false;
this.initTable();
}
})
},
selectCl() {
axios.get("http://localhost:8080/classes/selectList").then(result => {
this.classData = result.data.data;
})
},
//批量删除
//获取选中的值
//每当有页面选中即触发
handleSelectionChange(sels) {
this.sels = sels;
},
//批量删除执行操作
batchDelete() {
// 删除前的提示
this.$confirm("确认删除记录吗?", "提示", {
type: "warning",
}).then(() => {
let ids = this.sels.map((item) => item.sid);
// 根据后台想要的参数格式选择
// console.log(ids.join(",")); //1,2,3,4
// console.log(ids); //[1,2,3,4]
// 请求接口
axios.post("http://localhost:8080/student/deleteStudentVyIds",ids).then(result=>{
if(result.data.code == "200"){
this.$message.success(result.data.msg);
this.initTable();
}
})
});
},
//添加学生信息
batchInsert(){
this.dialogVisible01=true;
},
ins(){
axios.post("http://localhost:8080/student/insertStudent",this.insertStudentForm).then(result=>{
if (result.data.code == "200") {
this.$message({
message: result.data.msg,
type: "success",
});
this.dialogVisible01=false;
this.initTable();
}
})
},
}
})
</script>3.1Table表格+多选
实现多选非常简单: 手动添加一个
el-table-column，设type属性为selection即可；默认情况下若内容过多会折行显示，若需要单行显示可以使用show-overflow-tooltip属性，它接受一个Boolean，为true时多余的内容会在 hover 时以 tooltip 的形式显示出来。
<template>
<el-table
ref="multipleTable"
:data="tableData"
tooltip-effect="dark"
style="width: 100%"
@selection-change="handleSelectionChange">
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
label="日期"
width="120">
<template slot-scope="scope">{{ scope.row.date }}</template>
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="120">
</el-table-column>
<el-table-column
prop="address"
label="地址"
show-overflow-tooltip>
</el-table-column>
</el-table>
<div style="margin-top: 20px">
<el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button>
<el-button @click="toggleSelection()">取消选择</el-button>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-08',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-06',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-07',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}],
multipleSelection: []
}
},
methods: {
toggleSelection(rows) {
if (rows) {
rows.forEach(row => {
this.$refs.multipleTable.toggleRowSelection(row);
});
} else {
this.$refs.multipleTable.clearSelection();
}
},
handleSelectionChange(val) {
this.multipleSelection = val;
}
}
}
</script>3.2Pagination 分页
此例是一个完整的用例，使用了
size-change和current-change事件来处理页码大小和当前页变动时候触发的事件。page-sizes接受一个整型数组，数组元素为展示的选择每页显示个数的选项，[100, 200, 300, 400]表示四个选项，每页显示 100 个，200 个，300 个或者 400 个。
<template>
<div class="block">
<span class="demonstration">显示总数</span>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="currentPage1"
:page-size="100"
layout="total, prev, pager, next"
:total="1000">
</el-pagination>
</div>
<div class="block">
<span class="demonstration">调整每页显示条数</span>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="currentPage2"
:page-sizes="[100, 200, 300, 400]"
:page-size="100"
layout="sizes, prev, pager, next"
:total="1000">
</el-pagination>
</div>
<div class="block">
<span class="demonstration">直接前往</span>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="currentPage3"
:page-size="100"
layout="prev, pager, next, jumper"
:total="1000">
</el-pagination>
</div>
<div class="block">
<span class="demonstration">完整功能</span>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage4"
:page-sizes="[100, 200, 300, 400]"
:page-size="100"
layout="total, sizes, prev, pager, next, jumper"
:total="400">
</el-pagination>
</div>
</template>
<script>
export default {
methods: {
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
}
},
data() {
return {
currentPage1: 5,
currentPage2: 5,
currentPage3: 5,
currentPage4: 4
};
}
}
</script>3.3Form表单(顶部元素)
设置
inline属性可以让表单域变为行内的表单域
<el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item label="审批人">
<el-input v-model="formInline.user" placeholder="审批人"></el-input>
</el-form-item>
<el-form-item label="活动区域">
<el-select v-model="formInline.region" placeholder="活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">查询</el-button>
</el-form-item>
</el-form>
<script>
export default {
data() {
return {
formInline: {
user: '',
region: ''
}
}
},
methods: {
onSubmit() {
console.log('submit!');
}
}
}
</script>3.4Dialog对话框
需要设置
visible属性，它接收Boolean，当为true时显示 Dialog。Dialog 分为两个部分：body和footer，footer需要具名为footer的slot。title属性用于定义标题，它是可选的，默认值为空。最后，本例还展示了before-close的用法。
<el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>
<el-dialog
title="提示"
:visible.sync="dialogVisible"
width="30%"
:before-close="handleClose">
<span>这是一段信息</span>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
</span>
</el-dialog>
<script>
export default {
data() {
return {
dialogVisible: false
};
},
methods: {
handleClose(done) {
this.$confirm('确认关闭？')
.then(_ => {
done();
})
.catch(_ => {});
}
}
};
</script>
1526
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
