本系统主要针对于初学javaweb的博友们，拿来练手的。
由于本系统是后台管理所以没有注册功能，需要的博友们可以自行添加。我会把这个系统的源代码的百度网盘链接放到评论下方，需要的可以自取。
该系统的功能：1对所有品牌的增删改查；2可以批量删除品牌信息；3可以条件查询品牌，模糊查询品牌，根据状态查询品牌；
该系统的小彩蛋：1将鼠标放在登录后的用户头像上可以显示用户的信息；2鼠标点击页面会出现小心心
1.开发环境：jdk11+win11+mysql 8.0.25+IDEA+tomcat 8.5.77+maven 3.6.3+mybatis(直接maven添加依赖)
2.maven项目下（pom.xml）所导入的依赖和插件：
<dependencies>
<!--Servlet-->
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
<version>3.1.0</version>
<scope>provided</scope>
</dependency>
<!--MyBatis-->
<dependency>
<groupId>org.mybatis</groupId>
<artifactId>mybatis</artifactId>
<version>3.5.5</version>
</dependency>
<!--MySQL-->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>8.0.25</version>
</dependency>
<!--fastjson-->
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.62</version>
</dependency>
</dependencies>
<build>
<finalName>brand-case</finalName>
<plugins>
<plugin>
<groupId>org.apache.tomcat.maven</groupId>
<artifactId>tomcat7-maven-plugin</artifactId>
<version>2.2</version>
</plugin>
</plugins>
</build>3.数据库设计
（1）tb_brand_user表
（2）tb_brand表
4.登录页面
当输入账号密码并且点击登录后，会通过vue技术向web服务器的servlet发送请求，然后servlet容器在访问数据库，如果有这个用户的信息，然后把这个用户的信息写入session，以便后面的注销，最后把数据在响应给vue ，然后进行页面跳转到品牌页面。
login.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>登录</title>
<link rel="stylesheet" type="text/css" href="css/index.css" />
</head>
<body>
<div id="app">
<img class="bgone" src="img/1.jpg" />
<img class="pic" src="img/a.png" />
<div class="table">
<div class="wel">超能力系统后台登录</div>
<div class="wel1">CHAO NENG LI XI TONG HUO TAI DENG LU</div>
<div class="user">
<div id="yonghu1" style=""><img src="img/yhm.png" /></div>
<input id="username" type="text" v-model="user.username" name="username" placeholder="用户名" />
</div>
<div class="password">
<div id="yonghu2"><img src="img/mm.png" /></div>
<input id="password" type="password" v-model="user.password" name="password" placeholder="●●●●●●"/>
</div>
<input class="btn" type="button" name="登录" @click="onlogin" value="登录" />
</div>
</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">
<script src="js/axios-0.18.0.js"></script>
<script>
new Vue({
el: "#app",
mounted() {
},
methods: {
onlogin(){
var _this=this
axios({
method:"post",
//http://localhost:8080/brand-case/user/select
url:""+window.location.protocol+"//"+window.location.host+"/"+"brand-case/user/select",
data:this.user
}).then(function (resq) {
if(resq.data=="success"){
//弹出消息提示
_this.$message({
showClose: true,
message: '恭喜你，登录成功',
type: 'success',
});
window.setTimeout(function () {
//"http://localhost:8080/brand-case/brand.html"
window.location.href = ""+window.location.protocol+"//"+window.location.host+"/"+"brand-case/brand.html"
},1500)
}else{
_this.$message({
showClose: true,
message: '登陆失败，账户或密码错误',
type: 'error'
});
window.setTimeout(function () {
window.location.reload();
},1500)
}
})
}
},
data() {
return {
user: {
username:"",
password:""
},
}
}
})
</script>
</body>
</html>5.品牌页面
对品牌的所有操作也是通过vue来请求servlet再访问数据库来进行操作的
brand.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
body {
background:url("./img/5.jpg");/*设置背景图片*/
background-repeat: no-repeat;
background-attachment: fixed;/*设置背景图不随网页滑动而改变*/
background-size: cover;
}
/*使表格变成透明色*/
.el-table, .el-table__expanded-cell{
background-color: transparent!important; /* 背景透明 */
}
.el-table th{
color: black;
font-weight: bold;
/*3f5c6d2c*/
background-color: #3f5f9d2d !important;/* 背景透明 */
}
.el-table tr, .el-table td{
color:brown; /* 字体颜色 */
font-weight: bold;
/*transparent 全透明*/
background-color: rgba(0, 0, 0, 0)!important;/* 背景透明 */
}
/*使页尾加上几个scdn，qq，邮箱的标志*/
.footer {
/*background-image: linear-gradient(rgba(211, 104, 29, 0.80), rgba(6, 82, 113, 0.8));*/
text-align: center;
margin-top:25px;
}
/*搜索框属性设置*/
.el-form-item label {
font-weight: bold;
font-size:15px;
color: black;
}
.demo-form-inline input {
background-color: transparent !important;
color: floralwhite;
}
/*分页工具条设置属性*/
.el-pagination .el-pager li {
/*对页数的样式进行修改*/
background-color: #3f5f9d2d !important;
color:white;
}
.el-pagination input{
background-color: transparent !important;
color: red;
}
.el-pagination .el-pagination__total{
color: red;
}
</style>
</head>
<body>
<div id="app">
<!--显示用户-->
<div align="center">
<abbr v-bind:title="users.userall">
<el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
</abbr>
<el-link type="warning" v-bind:href="register" target="_self"> 注销</el-link>
<!--<!– <a href="https://blog.csdn.net/qq_54705917" target="_blank" style="float:right">小康的博客</a>–>-->
</div>
<hr>
<!--搜索表单-->
<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-option label="所有" value=""></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="brand1" label-width="80px">
<el-form-item label="品牌名称:">
<el-input v-model="brand1.brandName"></el-input>
</el-form-item>
<el-form-item label="企业名称:">
<el-input v-model="brand1.companyName"></el-input>
</el-form-item>
<el-form-item label="排序:">
<el-input v-model="brand1.ordered"></el-input>
</el-form-item>
<el-form-item label="备注:">
<el-input type="textarea" v-model="brand1.description"></el-input>
</el-form-item>
<el-form-item label="状态:">
<el-switch v-model="brand1.status"
active-color="#13ce66"
inactive-color="#ff4949"
:active-value="1"
:inactive-value="0"
active-text="启用"
inactive-text="禁用">
></el-switch>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="addBrand">提交</el-button>
<el-button @click="dialogVisible = false">取消</el-button>
</el-form-item>
</el-form>
</el-dialog>
<!-- 修改数据对话框表单-->
<el-dialog
title="修改品牌"
:visible.sync="reviseVisible"
width="30%"
>
<el-form ref="form" :model="brand2" label-width="80px">
<el-form-item label="品牌名称:">
<el-input v-model="brand2.brandName"></el-input>
</el-form-item>
<el-form-item label="企业名称:">
<el-input v-model="brand2.companyName"></el-input>
</el-form-item>
<el-form-item label="排序:">
<el-input v-model="brand2.ordered"></el-input>
</el-form-item>
<el-form-item label="备注:">
<el-input type="textarea" v-model="brand2.description"></el-input>
</el-form-item>
<el-form-item label="状态:">
<!-- :active单项绑定 v-model是双向绑定-->
<!--当value为Number类型的时候active-value和inactive-value前边必须加：单项绑定一下才可以。-->
<el-switch
v-model="brand2.status"
active-color="#13ce66"
inactive-color="#ff4949"
:active-value="1"
:inactive-value="0"
active-text="启用"
inactive-text="禁用"
>
></el-switch>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="sumbitEditRow">确定</el-button>
<el-button @click="reviseVisible=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
label="序号"
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>
<el-table-column
prop="description"
align="center"
label="备注">
</el-table-column>
<el-table-column
prop="statusStr"
align="center"
label="当前状态">
</el-table-column>
<el-table-column
align="center"
label="操作">
<template slot-scope="scope">
<el-row>
<el-button type="primary"@click="updateBrand(scope.row)" >修改</el-button>
<el-button type="danger" @click="deleteBrand(scope.row)">删除</el-button>
</el-row>
</template>
</el-table-column>
</el-table>
</template>
<!--分页工具条-->
<!--background="true"-->
<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 class="footer">
<abbr title="小康的博客"><a href="https://blog.csdn.net/qq_54705917" target="_blank"><img class="someimg" src="./img/csdn.png" alt="" width="30"></a></abbr>
<abbr title="QQ账号：1111111"><img class="someimg" src="./img/QQ.png" alt="" width="30"></abbr>
<abbr title="邮箱：[email protected]"><img class="someimg" src="./img/mail.png" alt="" width="30"></abbr>
</div>
</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">
<script src="js/axios-0.18.0.js"></script>
<script>
new Vue({
el: "#app",
mounted(){
this.selectusername(),
this.selectAll()
},
methods: {
//查询用户名
selectusername(){
var _this=this
//当页面加载完成后，发送异步请求，获得数据
axios({
method:"get",
// ""+window.location.protocol+"//"+window.location.host+"/"+
// "http://localhost:8080/brand-case/user/loginusername"
url:""+window.location.protocol+"//"+window.location.host+"/"+"brand-case/user/loginusername",
}).then(function (resp){
//设置表格数据
_this.user=resp.data;
_this.users.username =_this.users.username+_this.user.username;
_this.users.sex =_this.users.sex+_this.user.sex;
_this.users.age =_this.users.age+_this.user.age;
_this.users.qq =_this.users.qq+_this.user.qq;
_this.users.tel =_this.users.tel+_this.user.tel;
_this.users.userall=_this.users.username+"\n"
+_this.users.sex+"\n"
+_this.users.age+"\n"
+ _this.users.qq+"\n"
+_this.users.tel;
})
},
//查询所有数据的方法
selectAll(){
// var _this=this
// //当页面加载完成后，发送异步请求，获得数据
// axios({
// method:"get",
// url:"http://localhost:8080/brand-case/brand/selectAll"
// }).then(function (resp){
// _this.tableData=resp.data;
// })
var _this=this
//当页面加载完成后，发送异步请求，获得数据
axios({
method:"post",
url:""+window.location.protocol+"//"+window.location.host+"/"+"brand-case/brand/selectByPageAndCondition?currentPage="+this.currentPage+"&pageSize="+this.pageSize+"",
data:this.brand
}).then(function (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 '';
},
// 复选框选中后执行的方法
handleSelectionChange(val) {
this.multipleSelection = val;
//console.log(this.multipleSelection)
},
// 查询方法
onSubmit() {
// console.log(this.brand);
this.selectAll();
},
// 添加数据
addBrand(){
var _this=this
//console.log(this.brand);
//发送请求
axios({
method:"post",
url:""+window.location.protocol+"//"+window.location.host+"/"+"brand-case/brand/add",
data:_this.brand1
}).then(function (resp) {
if(resp.data=="success"){
//添加成功
//关闭窗口
_this.dialogVisible = false
//重新去查询数据
_this.selectAll()
//弹出消息提示
_this.$notify({
title: '成功',
message: '恭喜你，添加成功！',
type: 'success'
});
}else{
_this.$notify.error({
title: '错误',
message: '请输入数据！'
});
}
})
},
//删除数据 row为一行的数据，index为索引
deleteBrand(row){
//console.log(row);
var _this=this
this.$confirm('你确定要永久删除这条数据么?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {;
axios({
method:"post",
url:""+window.location.protocol+"//"+window.location.host+"/"+"brand-case/brand/delete",
data:row
}).then(function (resp) {
if(resp.data=="success"){
//删除成功
//重新去查询数据
_this.selectAll()
//弹出消息提示
_this.$message({
showClose: true,
message: '删除成功',
type: 'success'
});
}
})
}).catch(() => {
this.$message({
showClose: true,
type: 'info',
message: '已取消删除'
});
});
//console.log(row);
},
//修改数据
updateBrand(row){
this.reviseVisible = true
this.brand2 =Object.assign({}, row); //重置对象
console.log(row)
console.log(this.brand2)
},
//提交修改数据
sumbitEditRow(){
var _this = this
console.log(this.brand2);
//发送请求
axios({
method:"post",
url:""+window.location.protocol+"//"+window.location.host+"/"+"brand-case/brand/update",
data:_this.brand2
}).then(function (resp) {
if(resp.data=="success"){
//添加成功
//关闭窗口
_this.reviseVisible = false
//重新去查询数据
_this.selectAll()
//弹出消息提示
_this.$message({
showClose: true,
message: '恭喜你，修改成功',
type: 'success'
});
}
})
},
//分页
handleSizeChange(val) {
//console.log(`每页 ${val} 条`);
//重新设置每页显示的条数
this.pageSize=val;
this.selectAll();
},
handleCurrentChange(val) {
// console.log(`当前页: ${val}`);
//重新设置当前页码
this.currentPage=val;
this.selectAll();
},
//批量删除
deleteByIds(){
//创建一个id数组,从this.multipleSelection获取
for (let i = 0; i <this.multipleSelection.length ; i++) {
let multipleSelectionElement = this.multipleSelection[i];
this.selectids[i]=multipleSelectionElement.id;
}
//发送AJAX请求
var _this=this
this.$confirm('你确定要永久删除这些数据么?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
//用户点击确定按钮
axios({
method:"post",
url:""+window.location.protocol+"//"+window.location.host+"/"+"brand-case/brand/deleteByIds",
data:_this.selectids
}).then(function (resp) {
if(resp.data=="success"){
//删除成功
//重新去查询数据
_this.selectAll()
//弹出消息提示
_this.$message({
showClose: true,
message: '删除成功',
type: 'success'
});
}
})
}).catch(() => {
//用户点击取消按钮
this.$message({
showClose: true,
type: 'info',
message: '已取消删除'
});
});
}
},
data() {
return {
//用户注销
register:""+window.location.protocol+"//"+window.location.host+"/"+"brand-case/user/loginout",
users:{
id:"",
username:'用户名：',
password:"",
sex:'性别：',
age:'年龄：',
qq:'qq：',
tel:'联系电话：',
userall:''
},
//登录人信息
user:{
id:"",
username:"123",
password:"",
sex:"",
age:"",
qq:"",
tel:""
},
//总记录数
totalCount:100,
// 当前页码
currentPage: 1,
//每页显示的条数
pageSize:5,
// 添加数据对话框是否展示的标记
dialogVisible: false,
// 查询模型数据
brand: {
status: "",
brandName: '',
companyName: '',
id:"",
ordered:"",
description:""
},
// 添加模型数据
brand1: {
status:"",
brandName: "",
companyName: "",
id:"",
ordered:"",
description:""
},
//修改模型数据
brand2: {
status:'',
brandName: '',
companyName: '',
id:"",
ordered:"",
description:""
},
//被选中的id数组
selectids:[],
// 复选框选中数据集合
multipleSelection: [],
// 表格数据
tableData: [{
brandName: '华为',
companyName: '华为科技有限公司',
description:"小小生活",
ordered: '100',
status: "1"
}, {
brandName: '华为',
companyName: '华为科技有限公司',
description:"小小生活",
ordered: '100',
status: "1"
}, {
brandName: '华为',
companyName: '华为科技有限公司',
description:"小小生活",
ordered: '100',
status: "1"
}, {
brandName: '华为',
companyName: '华为科技有限公司',
description:"小小生活",
ordered: '100',
status: "1"
}]
}
}
})
</script>
<!--点击屏幕就是小爱心-->
<script>
(function (window, document, undefined) {
var hearts = [];
window.requestAnimationFrame = (function () {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function (callback) {
setTimeout(callback, 1000 / 60);
}
})();
init();
function init() {
css(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: absolute;}.heart:after{top: -5px;}.heart:before{left: -5px;}");
attachEvent();
gameloop();
}
function gameloop() {
for (var i = 0; i < hearts.length; i++) {
if (hearts[i].alpha <= 0) {
document.body.removeChild(hearts[i].el);
hearts.splice(i, 1);
continue;
}
hearts[i].y--;
hearts[i].scale += 0.004;
hearts[i].alpha -= 0.013;
hearts[i].el.style.cssText = "left:" + hearts[i].x + "px;top:" + hearts[i].y + "px;opacity:" + hearts[i].alpha + ";transform:scale(" + hearts[i].scale + "," + hearts[i].scale + ") rotate(45deg);background:" + hearts[i].color;
}
requestAnimationFrame(gameloop);
}
function attachEvent() {
var old = typeof window.onclick === "function" && window.onclick;
window.onclick = function (event) {
old && old();
createHeart(event);
}
}
function createHeart(event) {
var d = document.createElement("div");
d.className = "heart";
hearts.push({
el: d,
x: event.clientX - 5,
y: event.clientY - 5,
scale: 1,
alpha: 1,
color: randomColor()
});
document.body.appendChild(d);
}
function css(css) {
var style = document.createElement("style");
style.type = "text/css";
try {
style.appendChild(document.createTextNode(css));
} catch (ex) {
style.styleSheet.cssText = css;
}
document.getElementsByTagName('head')[0].appendChild(style);
}
function randomColor() {
return "rgb(" + (~~(Math.random() * 255)) + "," + (~~(Math.random() * 255)) + "," + (~~(Math.random() * 255)) + ")";
}
})(window, document);
</script>
</body>
</html>6.mybatis配置
所画圈的东西必须跟我这个一样，不然有可能会报错mybatis-config.xml我会放到到网盘里到时候大家直接可以复制进去。