<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.el-table .warning-row {
background: oldlace;
}
.el-table .success-row {
background: #f0f9eb;
}
</style>
</head>
<body>
<div id="app">
<!--搜索表单-->
<el-form :inline="true" :model="brand" class="demo-form-inline">
<el-form-item label="当前状态">
<el-select v-model="brand.status" placeholder="当前状态">
<el-option label="启用" value="1"></el-option>
<el-option label="禁用" value="0"></el-option>
</el-select>
</el-form-item>
<el-form-item label="企业名称">
<el-input v-model="brand.companyName" placeholder="企业名称"></el-input>
</el-form-item>
<el-form-item label="品牌名称">
<el-input v-model="brand.brandName" placeholder="品牌名称"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">查询</el-button>
</el-form-item>
</el-form>
<!--按钮-->
<el-row>
<!--在这里绑定一个单机事件,点击了以后在下面调用这个方法-->
<el-button type="danger" plain @click="deleteByIds">批量删除</el-button>
<el-button type="primary" plain @click="dialogVisible = true">新增</el-button>
</el-row>
<!--添加数据对话框表单-->
<el-dialog
title="编辑品牌"
:visible.sync="dialogVisible"
width="30%"
>
<el-form ref="form" :model="brand" label-width="80px">
<el-form-item label="品牌名称">
<el-input v-model="brand.brandName"></el-input>
</el-form-item>
<el-form-item label="企业名称">
<el-input v-model="brand.companyName"></el-input>
</el-form-item>
<el-form-item label="排序">
<el-input v-model="brand.ordered"></el-input>
</el-form-item>
<el-form-item label="备注">
<el-input type="textarea" v-model="brand.description"></el-input>
</el-form-item>
<el-form-item label="状态">
<el-switch v-model="brand.status"
active-value="1"
inactive-value="0"
></el-switch>
</el-form-item>
<el-form-item>
<!--点击提交后会执行一个addBrand方法，我们去下面进行方法的编写-->
<el-button type="primary" @click="addBrand">提交</el-button>
<el-button @click="dialogVisible = false">取消</el-button>
</el-form-item>
</el-form>
</el-dialog>
<!--表格-->
<template>
<el-table
:data="tableData"
style="width: 100%"
:row-class-name="tableRowClassName"
@selection-change="handleSelectionChange"
>
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
type="index"
width="50">
</el-table-column>
<el-table-column
prop="brandName"
label="品牌名称"
align="center"
>
</el-table-column>
<el-table-column
prop="companyName"
label="企业名称"
align="center"
>
</el-table-column>
<el-table-column
prop="ordered"
align="center"
label="排序">
</el-table-column>
<!--这里的status直接改成statusStr用来获取状态的名称汉字而不是01-->
<el-table-column
prop="statusStr"
align="center"
label="当前状态">
</el-table-column>
<el-table-column
align="center"
label="操作">
<el-row>
<el-button type="primary">修改</el-button>
<el-button type="danger">删除</el-button>
</el-row>
</el-table-column>
</el-table>
</template>
<!--分页工具条-->
<!--每页显示条数发生变化执行handleSizeChange方法 ， 当前页码发生变化执行handleCurrentChange方法-->
<!--顺便在下面的data里面定义这个totalCount数据-->
<!--:current-page绑定在currentPage的模型上-->
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[5, 10, 15, 20]"
:page-size="5"
layout="total, sizes, prev, pager, next, jumper"
:total="totalCount">
</el-pagination>
</div>
<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<!--引入js axios-->
<script src="js/axios-0.18.0.js"></script>
<script>
new Vue({
el: "#app",
mounted(){
//当页面加载完成后，发送异步请求获取数据,要用axios,所以先引入js资源
//下面的查询所有数据复制了这一块的方法，所以这里不用在写了，调用就好了
this.selectAll();
/* var _this = this;//提高this的范围
axios({
method:"get", //查询一般用get
url:"http://localhost:8080/brand-case/selectAllServlet" //selectall这个过程中自然要写它
}).then(function (resp) { //获取响应
_this.tableData = resp.data; //resp.data就是selectallservlet传的真正的列表json数据，并且要把数据给表格的数据模型tableData上
})*/
},
methods: {
//查询所有数据 粘贴上面写的代码
selectAll(){
/* var _this = this;//提高this的范围
axios({
method:"get", //查询一般用get
url:"http://localhost:8080/brand-case/brand/selectAll" //selectall这个过程中自然要写它
}).then(function (resp) { //获取响应
_this.tableData = resp.data; //resp.data就是selectallservlet传的真正的列表json数据，并且要把数据给表格的数据模型tableData上
})*/
//查询分页数据 所以以后页面也是一页一页展示出来了，而不是上面的selectAll
/* var _this = this;
/!*以后selectall都走条件分页查询的方法*!/
axios({
method:"post",/!*下面的携带参数用？表示*!/
/!*定义了模型之后，currentPage，pageSize是从模型里面获取的数据，然后动态变化*!/
url:"http://localhost:8080/brand-case/brand/selectByPageAndCondition?currentPage="+this.currentPage+"&pageSize="+this.pageSize,
data:this.brand
/!*在then里面不能用this但是在then外面可以直接用 由于这里既携带了url又携带了data,所以请求方式改成post*!/
}).then(function (resp) {
//设置表格数据
_this.tableData = resp.data.rows; // 这是data的内容{rows:[],totalCount:100}，我们给tableData rows,给totalCount totalCount
//设置总记录数 此时已经在上面改了:total="totalCount" 下面添加了totalCount的模型
_this.totalCount = resp.data.totalCount;
})*/
/*修改前端页面部分 用箭头函数，这里就不用下划线的this了直接可以用this,这个this就可以代表vue的对象*/
axios({
method:"post",
url:"http://localhost:8080/brand-case/brand/selectByPageAndCondition?currentPage="+this.currentPage+"&pageSize="+this.pageSize,
data:this.brand
}).then(resp =>{
//设置表格数据
this.tableData = resp.data.rows; // {rows:[],totalCount:100}
//设置总记录数
this.totalCount = resp.data.totalCount;
})
},
tableRowClassName({row, rowIndex}) {
if (rowIndex === 1) {
return 'warning-row';
} else if (rowIndex === 3) {
return 'success-row';
}
return '';
},
// 复选框选中后执行的方法
//把选中的记录全部放到对应的模型里面，模型叫做multipleSelection
handleSelectionChange(val) {
this.multipleSelection = val;
console.log(this.multipleSelection)
},
// 查询方法
onSubmit() {
//console.log(this.brand);//这是控制台输出
this.selectAll();//单机进行查询，调用查询selectall里面得携带的有查询条件，查询条件就是对应的brand的实体
},
// 添加数据
addBrand(){
//console.log(this.brand);
var _this = this;
// 发送ajax请求，添加数据
axios({
method:"post", //请求方式是post,也对应了servlet里用post获取字节流
url:"http://localhost:8080/brand-case/brand/add",
data:_this.brand //axios不能直接用this,要提高域 这里把brand对象以json发出了
}).then(function (resp) {
if(resp.data == "success"){
//添加成功
//关闭窗口
_this.dialogVisible = false;// dialogVisible是data里面vue的模型属性，所以这里得用_this
//添加成功后我们想在页面上看到对应的数据，并且不用我们手动刷新，所以我们重新做一次查询
// 重新查询数据 调用上面method写的selectall方法，但是记着这里是axios所以作用域要写_this.
_this.selectAll();
//要想添加完有个提示框，我们取element官网进行查看消息提示 复制一下就行
// 弹出消息提示 记着还是得应下划线this
_this.$message({
message: '恭喜你，添加成功',
type: 'success'
});
}
})
},
//分页
handleSizeChange(val) {
// console.log(`每页 ${val} 条`);
// 重新设置每页显示的条数
this.pageSize = val;
this.selectAll();
},
handleCurrentChange(val) {
// console.log(`当前页: ${val}`);
// 重新设置当前页码 页码发生变化时
this.currentPage = val;
this.selectAll();
},
//完成批量删除的方法
deleteByIds(){
//1.创建id数组[1,2,3]
//被选中的id如何来获取，我们可以联想到之前复选框的，把选中的记录全部放到对应的模型里面，模型叫做multipleSelection，所以我们这里获取复选框数据
//这下面就是控制台打印的数据，我们在页面中进行多选的时候，点击批量删除，就会在控制台写出下面的内容
//console.log(this.multipleSelection);
/*
[
{
"brandName": "华为",
"companyName": "华为技术有限公司",
"description": "万物互联",
"id": 1,
"ordered": 100,
"status": 1,
"statusStr": "启用"
},
{
"brandName": "小米",
"companyName": "小米科技有限公司",
"description": "are you ok",
"id": 2,
"ordered": 50,
"status": 1,
"statusStr": "启用"
},
{
"brandName": "格力",
"companyName": "格力电器股份有限公司",
"description": "让世界爱上中国造",
"id": 3,
"ordered": 30,
"status": 1,
"statusStr": "启用"
}
]
*/
// 弹出确认提示框 点确定提供then的逻辑，点取消执行catch的逻辑
this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
//用户点击确认按钮
//我们此时需要的是这上面这个数组里面的id,而不是整个数组
//1. 创建id数组 [1,2,3], 从 this.multipleSelection 获取即可
for (let i = 0; i < this.multipleSelection.length; i++) {
let selectionElement = this.multipleSelection[i];
this.selectedIds[i] = selectionElement.id;//获取到勾选的数组的id值之后赋值id给我们下面定义的selectedIds数组
}
//2. 发送AJAX请求
var _this = this;
// 发送ajax请求，添加数据
axios({
method:"post", //post与brandServlet中调用字符输出流相呼应
url:"http://localhost:8080/brand-case/brand/deleteByIds",
data:_this.selectedIds
}).then(function (resp) {
if(resp.data == "success"){
//删除成功
// 重新查询数据
_this.selectAll();
// 弹出消息提示
_this.$message({
message: '恭喜你，删除成功',
type: 'success'
});
}
})
}).catch(() => {
//用户点击取消按钮
this.$message({
type: 'info',
message: '已取消删除'
});
});
}
},
data() {
return {
//每页显示的条数
pageSize:5,
//总记录数
totalCount:100,
// 当前页码
currentPage: 1, //也算是一打开页面就是默认页面1页
// 添加数据对话框是否展示的标记
dialogVisible: false,
// 品牌模型数据
brand: {
status: '',
brandName: '',
companyName: '',
id:"",
ordered:"",
description:""
},
//被选中的id数组，一旦id被选中了，这个数组也就发生变化了 最后提交数据的时候提交这个数组就可以了
selectedIds:[],
// 复选框选中数据集合
multipleSelection: [],
// 表格数据
tableData: [{
brandName: '华为',
companyName: '华为科技有限公司',
ordered: '100',
status: "1"
}, {
brandName: '华为',
companyName: '华为科技有限公司',
ordered: '100',
status: "1"
}, {
brandName: '华为',
companyName: '华为科技有限公司',
ordered: '100',
status: "1"
}, {
brandName: '华为',
companyName: '华为科技有限公司',
ordered: '100',
status: "1"
}]
}
}
})
</script>
</body>
</html>add
<template>
<div class="add">
<el-button style="color: blue; background-color: pink" @click="add">提交添加</el-button>
<el-form class="form">
<div class="f1">
<el-form-item label="姓名">
<el-input v-model="studentAdd.stuname"></el-input>
</el-form-item>
<el-form-item label="性别">
<el-input v-model="studentAdd.stugender"></el-input>
</el-form-item>
<el-form-item label="年级">
<el-input v-model="studentAdd.stugrade"></el-input>
</el-form-item>
<el-form-item label="地址">
<el-input v-model="studentAdd.stuaddess"></el-input>
</el-form-item>
</div>
<div class="f1">
<el-form-item label="专业">
<el-input v-model="studentAdd.stumajor"></el-input>
</el-form-item>
<el-form-item label="籍贯">
<el-input v-model="studentAdd.stunative"></el-input>
</el-form-item>
<el-form-item label="学号">
<el-input v-model="studentAdd.stuno"></el-input>
</el-form-item>
<el-form-item label="电话">
<el-input v-model="studentAdd.stuphone"></el-input>
</el-form-item>
</div>
</el-form>
</div>
</template>
<script>
import { AddStudent } from "../server/index";
export default {
name: "my-add",
data() {
return {
studentAdd: {},
};
},
methods: {
async add() {
if (this.studentAdd.stuno == undefined) {
alert("学号是必填项");
return;
}
const result = await AddStudent(this.studentAdd);
if (result.success) {
alert("成功添加");
this.$router.push("student");
}
},
},
};
</script>
<style lang="scss" scoped>
.add {
position: absolute;
top: 100px;
left: 100px;
color: greenyellow;
}
.form {
margin-right: 20px;
.f1 {
display: flex;
>* {
width: 150px;
margin-right: 10px;
}
color: white;
}
}
</style>change
<template>
<div class="change">
<el-button style="color: blue; background-color: pink" @click="get">提交修改</el-button>
<el-form class="form">
<div class="f1">
<el-form-item label="姓名">
<el-input v-model="studenti.stuname"></el-input>
</el-form-item>
<el-form-item label="性别">
<el-input v-model="studenti.stugender"></el-input>
</el-form-item>
<el-form-item label="年级">
<el-input v-model="studenti.stugrade"></el-input>
</el-form-item>
<el-form-item label="地址">
<el-input v-model="studenti.stuaddess"></el-input>
</el-form-item>
</div>
<div class="f1">
<el-form-item label="专业">
<el-input v-model="studenti.stumajor"></el-input>
</el-form-item>
<el-form-item label="籍贯">
<el-input v-model="studenti.stunative"></el-input>
</el-form-item>
<el-form-item label="学号">
<el-input v-model="studenti.stuno"></el-input>
</el-form-item>
<el-form-item label="电话">
<el-input v-model="studenti.stuphone"></el-input>
</el-form-item>
</div>
</el-form>
</div>
</template>
<script>
import { ChangeStudent } from '@/server';
export default {
name: 'my-change',
props: ['student'],
data() {
return {
studenti: {}
}
},
methods: {
async get() {
const result = await ChangeStudent(this.studenti)
console.log(result);
if (result.success) {
alert("修改成功,返回上一级页面！")
}
this.$router.push('student')
}
},
mounted() {
this.studenti = this.$store.state.student_item
},
}
</script>
<style lang="scss" scoped>
.change {
position: absolute;
top: 100px;
left: 100px;
color: white;
}
.form {
margin-right: 20px;
.f1 {
display: flex;
>* {
width: 150px;
margin-right: 10px;
}
}
}</style>login
<template>
<div class="login_box">
<h1>登录</h1>
<table class="inner_box">
<tr>
<td>用户名：</td>
<td><input type="text" v-model="user.username" /></td>
</tr>
<tr>
<td style="margin-right:20px">密码：</td>
<td><input type="password" v-model="user.password" /></td>
</tr>
<tr>
<td><button @click="Login">登录</button></td>
</tr>
</table>
</div>
</template>
<script>
import Cookie from "js-cookie";
import { UserLogin } from "../server/index";
export default {
name: "log-In",
data() {
return {
user: {
username: "",
password: "",
},
};
},
methods: {
async Login() {
const result = await UserLogin(this.user);
if (result.success) {
// 保存token
Cookie.set("token", result.data.token);
alert("验证成功");
this.$router.push("student");
} else {
alert("用户名或者密码错误");
}
},
},
};
</script>
<style lang="scss" scoped>
.login_box {
position: absolute;
left: 25%;
top: 25%;
background-color: pink;
border-radius: 10px;
width: 700px;
height: 350px;
h1 {
margin: 20px 0;
text-align: center;
}
.inner_box {
text-align: center;
font-size: 25px;
padding-left: 30%;
tr {
display: flex;
padding: 20px 0;
td {
input {
width: 200px;
height: 30px;
}
button {
width: 90px;
height: 50px;
margin: 0 80px;
background-color: skyblue;
border-radius: 10px;
}
}
}
}
}
</style>student
<template>
<div>
<el-button class="addBtn" @click="addStu">添加学生</el-button>
<el-table :data="stuList" class="table">
<el-table-column prop="stuid" label="ID" width="100"> </el-table-column>
<el-table-column prop="stuno" label="学号" width="120"> </el-table-column>
<el-table-column prop="stuname" label="姓名" width="100">
</el-table-column>
<el-table-column prop="stugender" label="性别" width="100">
</el-table-column>
<el-table-column prop="stumajor" label="专业" width="100">
</el-table-column>
<el-table-column prop="stugrade" label="年级" width="100">
</el-table-column>
<el-table-column prop="stuphone" label="电话" width="100">
</el-table-column>
<el-table-column prop="stunative" label="籍贯" width="100">
</el-table-column>
<el-table-column prop="stuaddess" label="地址" width="140">
</el-table-column>
<el-table-column prop="" label="操作" width="130">
<template v-slot="scope">
<button class="btn" @click="change(scope.row)">修改</button>
<button class="btn" @click="remove(scope.row.stuid)">删除</button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
import { StudentList } from "../server/index";
import { RemoveStudent } from "../server/index";
export default {
name: "Stu_List",
data() {
return {
stuList: [],
};
},
methods: {
async remove(id) {
let stu = { stuid: id };
const result = await RemoveStudent(stu);
console.log(result);
if (result.success) {
alert("删除成功");
this.$router.go(0);
}
},
change(item) {
this.$store.state.student_item = item;
this.$router.push("change");
},
addStu() {
this.$router.push("add");
},
},
async mounted() {
this.stuList = await StudentList();
},
};
</script>
<style lang="scss" scoped>
.table {
position: absolute;
top: 100px;
left: 100px;
width: 1200px;
text-align: center;
.btn {
width: 60px;
height: 30px;
margin-right: 6px;
color: red;
}
}
.addBtn {
position: absolute;
top: 60px;
left: 100px;
color: grey;
background-color: white;
}
</style>app
<template>
<router-view></router-view>
</template>
<script>
export default {
name: 'App',
components: {
},
data() {
return {
}
},
}
</script>
<style>
* {
padding: 0px;
margin: 0px;
}
html,
body,
#app {
width: 100%;
height: 100%;
background: url(./assets/logo.png);
}
</style>
扫一扫
3735
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
