一、项目准备工作
1.1、添加依赖
bootstrap依赖、jQuery依赖、vue依赖
1.2、项目中用到的图片资源
二、前端开发
2.1、登陆页面开发
创建login.html，并导入依赖（bootstrap、vue）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录</title>
<!-- 导入bootstrap依赖 -->
<link rel="stylesheet" href="assets/bootstrap-3.3.7-dist/css/bootstrap.min.css">
<script src="assets/jquery-3.5.1/jquery-3.5.1.min.js"></script>
<script src="assets/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<!-- 导入vue依赖 -->
<script src="assets/axios.min.js"></script>
<script src="assets/vue.min-v2.5.16.js"></script>
</head>
<body>
<div class="container" id="app">
<!-- bootstrap行 -->
<div class="row">
<!-- bootstrap列,6个栅格的宽度 -->
<div class="col-md-6 col-md-offset-3" style="height: 310px;border: 1px solid black;margin-top: 80px">
<!-- bootstrap行 -->
<div class="row">
<!-- 显示文章标题的div -->
<div class="col-md-5"
style="height: 310px;background-color:rgb(43,136,223);text-align: center;line-height: 310px;font-size:18px;color: white;font-weight: bold ">
蜗牛CRM管理系统
</div>
<!-- 显示表单的div -->
<div class="col-md-7">
<!-- bootstrap行 -->
<div class="row" style="padding: 30px 0px 30px 0px">
<div class="col-md-12" style="text-align: center;font-weight: bold;font-size: 18px;">
登录
</div>
</div>
<!-- bootstrap行 -->
<div class="row" style="height: 60px;margin-bottom: 20px">
<div class="col-md-8 col-md-offset-2">
<label>用户名</label>
<input type="text" class="form-control" v-model="userName"/>
</div>
</div>
<!-- bootstrap行 -->
<div class="row" style="height: 60px;margin-bottom: 20px">
<div class="col-md-8 col-md-offset-2">
<label>密码</label>
<input type="password" class="form-control" v-model="passwd"/>
</div>
</div>
<!-- bootstrap行 -->
<div class="row" style="height: 60px;margin-bottom: 20px">
<div class="col-md-8 col-md-offset-2" style="text-align: center">
<button class="btn btn-primary" style="margin-right: 8px" @click="doLogin">登录</button>
<button class="btn btn-default" @click="doReset">重置</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
// 创建vue实例
new Vue({
el: '#app', //将id为app的div的管理权交给vue
data: { //需要绑定的数据
userName: null, //用户名
passwd: null //密码
},
methods: { //所有声明的函数
doLogin() { //点击登录按钮后执行
//通过this.可以获取data中绑定的数据
// 通过axios发送请求到UserLoginServlet
var url = "http://localhost:8080/login?user_name=" + this.userName + "&passwd=" + this.passwd;
axios.get(url).then(response => {
if (response.data == '登录成功') {//登录成功
window.location.href = 'index.html';//跳转到主页index.html
} else {//登录失败
alert("用户名或密码错误!!!");//弹窗警告
}
})
},
doReset() {//重置内容
this.userName = null;
this.passwd = null;
}
},
created: function () { //页面加载完成后执行
}
});
</script>
</body>
</html>
运行效果
2.2、首页开发
创建index.html，并导入依赖（bootstrap、vue）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>首页</title>
<!-- 导入bootstrap依赖 -->
<link rel="stylesheet" href="assets/bootstrap-3.3.7-dist/css/bootstrap.min.css">
<script src="assets/jquery-3.5.1/jquery-3.5.1.min.js"></script>
<script src="assets/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<!-- 导入vue依赖 -->
<script src="assets/axios.min.js"></script>
<script src="assets/vue.min-v2.5.16.js"></script>
<style>
a:link{font-size: 20px;color: rgb(109,109,109);}
a:visited{font-size: 20px;color: rgb(109,109,109);}
a:hover{font-size: 20px;color: white;text-decoration: none}
</style>
</head>
<body>
<div class="container" id = "app">
<!-- bootstrap行 -->
<div class="row">
<!-- 显示导航 -->
<div class="col-md-3" style="background-color: rgb(0,21,41);height: 800px">
<div class="row">
<div class="col-md-12" style="background-color: rgb(0,40,77);text-align: center;height: 70px;line-height: 70px;font-size: 20px;color: white;font-weight: bold">
<img src="assets/img/logo.png" style="width: 30px;height: 30px;margin-right: 8px"/>
蜗牛CRM管理系统
</div>
</div>
<div class="row">
<div class="col-md-12" style="text-align: center;padding: 20px 0px 20px 0px;">
<a href="index.html">进入首页</a>
</div>
</div>
<div class="row">
<div class="col-md-12" style="text-align: center;padding: 20px 0px 20px 0px;">
<a href="user_list.html">用户管理</a>
</div>
</div>
<div class="row">
<div class="col-md-12" style="text-align: center;padding: 20px 0px 20px 0px;">
<a href="user_add.html">添加用户</a>
</div>
</div>
<div class="row">
<div class="col-md-12" style="text-align: center;padding: 20px 0px 20px 0px;">
<a href="customer_list.html">客户管理</a>
</div>
</div>
<div class="row">
<div class="col-md-12" style="text-align: center;padding: 20px 0px 20px 0px;">
<a href="customer_add.html">添加客户</a>
</div>
</div>
<div class="row">
<div class="col-md-12" style="text-align: center;padding: 20px 0px 20px 0px;">
<a href="user_alert.html">修改密码</a>
</div>
</div>
<div class="row">
<div class="col-md-12" style="text-align: center;padding: 20px 0px 20px 0px;">
<a href="login.html">退出登录</a>
</div>
</div>
</div>
<!-- 显示内容 -->
<div class="col-md-9" style="border: 1px solid gray;height: 800px">
<div class="row">
<!-- 显示提示位置 -->
<div class="col-md-12" style="height: 70px ;font-size: 18px;color: rgb(109,109,109);line-height: 70px;font-weight: bold;padding-left: 20px">
> 首页
</div>
</div>
<div class="row">
<!-- 显示内容 -->
<div class="col-md-12" style="background-color: rgb(240,242,245);height: 730px;padding:20px">
<!-- class="img-responsive center-block"动态管理页面图片 -->
<img src="assets/img/index.png" class="img-responsive center-block"/>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
运行效果
2.3添加用户页面开发
创建uesr_add.html，并导入依赖（bootstrap、vue）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>添加用户</title>
<!-- 导入bootstrap依赖 -->
<link rel="stylesheet" href="assets/bootstrap-3.3.7-dist/css/bootstrap.min.css">
<script src="assets/jquery-3.5.1/jquery-3.5.1.min.js"></script>
<script src="assets/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<!-- 导入vue依赖 -->
<script src="assets/axios.min.js"></script>
<script src="assets/vue.min-v2.5.16.js"></script>
<style>
a:link{font-size: 20px;color: rgb(109,109,109);}
a:visited{font-size: 20px;color: rgb(109,109,109);}
a:hover{font-size: 20px;color: white;text-decoration: none}
</style>
</head>
<body>
<div class="container" id = "app">
<!-- bootstrap行 -->
<div class="row">
<!-- 显示导航 -->
<div class="col-md-3" style="background-color: rgb(0,21,41);height: 800px">
<div class="row">
<div class="col-md-12" style="background-color: rgb(0,40,77);text-align: center;height: 70px;line-height: 70px;font-size: 20px;color: white;font-weight: bold">
<img src="assets/img/logo.png" style="width: 30px;height: 30px;margin-right: 8px"/>
蜗牛CRM管理系统
</div>
</div>
<div class="row">
<div class="col-md-12" style="text-align: center;padding: 20px 0px 20px 0px;">
<a href="index.html">进入首页</a>
</div>
</div>
<div class="row">
<div class="col-md-12" style="text-align: center;padding: 20px 0px 20px 0px;">
<a href="user_list.html">用户管理</a>
</div>
</div>
<div class="row">
<div class="col-md-12" style="text-align: center;padding: 20px 0px 20px 0px;">
<a href="user_add.html">添加用户</a>
</div>
</div>
<div class="row">
<div class="col-md-12" style="text-align: center;padding: 20px 0px 20px 0px;">
<a href="#">客户管理</a>
</div>
</div>
<div class="row">
<div class="col-md-12" style="text-align: center;padding: 20px 0px 20px 0px;">
<a href="#">添加客户</a>
</div>
</div>
<div class="row">
<div class="col-md-12" style="text-align: center;padding: 20px 0px 20px 0px;">
<a href="user_alert.html">修改密码</a>
</div>
</div>
<div class="row">
<div class="col-md-12" style="text-align: center;padding: 20px 0px 20px 0px;">
<a href="login.html">退出登录</a>
</div>
</div>
</div>
<!-- 显示内容 -->
<div class="col-md-9" style="border: 1px solid gray;height: 800px">
<div class="row">
<!-- 显示提示位置 -->
<div class="col-md-12" style="height: 70px ;font-size: 18px;color: rgb(109,109,109);line-height: 70px;font-weight: bold;padding-left: 20px">
> 添加用户
</div>
</div>
<div class="row" style="background-color: rgb(240,242,245);height: 730px;padding:20px">
<!-- 显示内容 -->
<div class="col-md-12" style="background-color: white;height: 730px;border: none;border-radius: 5px">
<div class="row">
<div class="col-md-4 col-md-offset-4" style="margin-top: 50px">
<label>用户名</label>
<input type="text" class="form-control" v-model="userName"/>
</div>
</div>
<div class="row">
<div class="col-md-4 col-md-offset-4" style="margin-top: 20px">
<label>昵称</label>
<input type="text" class="form-control" v-model="nickName"/>
</div>
</div>
<div class="row">
<div class="col-md-4 col-md-offset-4" style="margin-top: 20px">
<label>手机号</label>
<input type="text" class="form-control" v-model="phone"/>
</div>
</div>
<div class="row">
<div class="col-md-4 col-md-offset-4" style="margin-top: 20px">
<label>生日</label>
<input type="text" class="form-control" v-model="birth"/>
</div>
</div>
<div class="row">
<div class="col-md-4 col-md-offset-4" style="margin-top: 20px">
<label style="margin-right: 15px">性别</label>
<label class="radio-inline">
<input type="radio" name="sex" value="0" v-model="sex"/>男
</label>
<label class="radio-inline">
<input type="radio" name="sex" value="1" checked="true" v-model="sex"/>女
</label>
</div>
</div>
<div class="row">
<div class="col-md-4 col-md-offset-4" style="margin-top: 20px ;text-align: center;">
<button class="btn btn-primary" style="margin-right: 8px" @click="doAdd">添加</button>
<button class="btn btn-default" @click="doReset">重置</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
new Vue({
el:'#app',
data:{
userName:null,
nickName:null,
phone:null,
birth:null,
sex:null
},
methods:{
doAdd(){
// 通过axios发送请求到UserLoginServlet
var url = "http://localhost:8080/add?user_name=" + this.userName + "&nick_name=" + this.nickName + "&phone=" + this.phone + "&birth=" + this.birth + "&sex=" + this.sex;
axios.get(url).then(response => {
if (response.data == '添加成功') {//添加成功
window.location.href = 'user_list.html';//跳转到主页user_list.html
} else {//添加失败
alert("输入有误!!!");//弹窗警告
}
})
},
doReset(){
this.userName = null;
this.nickName = null;
this.phone = null;
this.birth = null;
this.sex = null
}
},
created:function(){
}
})
</script>
</body>
</html>
运行效果
2.4、用户管理页面效果
创建user_list.html，并导入依赖（bootstrap、vue）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户管理</title>
<!-- 导入bootstrap依赖 -->
<link rel="stylesheet" href="assets/bootstrap-3.3.7-dist/css/bootstrap.min.css">
<script src="assets/jquery-3.5.1/jquery-3.5.1.min.js"></script>
<script src="assets/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<!-- 导入vue依赖 -->
<script src="assets/axios.min.js"></script>
<script src="assets/vue.min-v2.5.16.js"></script>
<style>
a:link{font-size: 20px;color: rgb(109,109,109);}
a:visited{font-size: 20px;color: rgb(109,109,109);}
a:hover{font-size: 20px;color: white;text-decoration: none}
</style>
</head>
<body>
<div class="container" id = "app">
<!-- bootstrap行 -->
<div class="row">
<!-- 显示导航 -->
<div class="col-md-3" style="background-color: rgb(0,21,41);height: 800px">
<div class="row">
<div class="col-md-12" style="background-color: rgb(0,40,77);text-align: center;height: 70px;line-height: 70px;font-size: 20px;color: white;font-weight: bold">
<img src="assets/img/logo.png" style="width: 30px;height: 30px;margin-right: 8px"/>
蜗牛CRM管理系统
</div>
</div>
<div class="row">
<div class="col-md-12" style="text-align: center;padding: 20px 0px 20px 0px;">
<a href="index.html">进入首页</a>
</div>
</div>
<div class="row">
<div class="col-md-12" style="text-align: center;padding: 20px 0px 20px 0px;">
<a href="user_list.html">用户管理</a>
</div>
</div>
<div class="row">
<div class="col-md-12" style="text-align: center;padding: 20px 0px 20px 0px;">
<a href="user_add.html">添加用户</a>
</div>
</div>
<div class="row">
<div class="col-md-12" style="text-align: center;padding: 20px 0px 20px 0px;">
<a href="#">客户管理</a>
</div>
</div>
<div class="row">
<div class="col-md-12" style="text-align: center;padding: 20px 0px 20px 0px;">
<a href="#">添加客户</a>
</div>
</div>
<div class="row">
<div class="col-md-12" style="text-align: center;padding: 20px 0px 20px 0px;">
<a href="user_alert.html">修改密码</a>
</div>
</div>
<div class="row">
<div class="col-md-12" style="text-align: center;padding: 20px 0px 20px 0px;">
<a href="login.html">退出登录</a>
</div>
</div>
</div>
<!-- 显示内容 -->
<div class="col-md-9" style="border: 1px solid gray;height: 800px">
<div class="row">
<!-- 显示提示位置 -->
<div class="col-md-12" style="height: 70px ;font-size: 18px;color: rgb(109,109,109);line-height: 70px;font-weight: bold;padding-left: 20px">
> 用户管理
</div>
</div>
<div class="row" style="background-color: rgb(240,242,245);height: 730px;padding:20px">
<!-- 显示内容 -->
<div class="col-md-12" style="background-color: white;height: 730px;border: none;border-radius: 5px">
<!-- 使用bootstrap表格斑马线样式 -->
<table class="table table-striped" style="margin-top: 20px">
<!-- 表格描述 -->
<caption>用户管理-用户列表</caption>
<!-- 表头 -->
<thead>
<tr>
<th>ID</th>
<th>用户名</th>
<th>昵称</th>
<th>性别</th>
<th>生日</th>
<th>手机号</th>
<th>操作</th>
</tr>
</thead>
<!-- 表格内容 -->
<tbody>
<tr v-for="u in users">
<td>{{u.id}}</td>
<td>{{u.userName}}</td>
<td>{{u.nickName}}</td>
<td>{{u.sex == 0? '男':'女'}}</td>
<td>{{u.birth}}</td>
<td>{{u.phone}}</td>
<td>
<button class="btn btn-link" @click="doAlert(u.id)">修改</button>
<button class="btn btn-link" @click="doDelete(u.id)">删除</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<script>
new Vue({
el:'#app',
data:{
users:null
},
methods:{
doAlert(id){//点击修改按钮后触发
window.location.href = 'user_update.html?id='+id;
},
// 删除用户,根据id
doDelete(id){
axios.get("delete?id="+id).then(response=>{
if (response.data == '删除成功') {//删除成功
// 刷新用户列表
// window.location.href = 'user_list.html';
this.requestUserList();
} else {//删除失败
alert("输入有误!!!");//弹窗警告
}
})
},
requestUserList(){ // 请求用户列表
axios.get("user_list").then(response=>{
this.users = response.data;
})
}
},
created:function(){
// 调用请求用户列表的函数
this.requestUserList();
}
});
</script>
</body>
</html>
运行效果
267
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
