This system is mainly aimed at bloggers who are beginners in javaweb, and it is used for practice.
Because this system is background management, there is no registration function, and bloggers who need it can add it by themselves. I will put the Baidu network disk link of the source code of this system under the comment, and you can get it yourself if you need it.
Functions of the system: 1. add, delete, modify and check all brands; 2. can delete brand information in batches; 3. can query brands by condition, query brands fuzzily, and query brands according to status;
Easter eggs of the system: 1. put the mouse on the user avatar after login to display the user's information;
1. Development environment: jdk11+win11+mysql 8.0.25+IDEA+tomcat 8.5.77+maven 3.6.3+mybatis (add dependencies directly to maven)
2. Dependencies and plug-ins imported under the maven project (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. Database design
(1) tb_brand_user table
(2) tb_brand table
4. Login page
When the account password is entered and the login is clicked, a request will be sent to the servlet of the web server through Vue technology, and then the servlet container is accessing the database. If there is the user's information, then the user's information is written into the session for subsequent logout. Finally, the data is responded to vue, and then the page jumps to the brand page.
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. Brand Page
All operations on the brand are also performed by requesting the servlet through vue and then accessing the database
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 configuration
The circled thing must be the same as mine, otherwise it may report an error mybatis-config.xml. I will put it in the network disk and then you can copy it directly.