创建login.html,并导入依赖(bootstrap、vue)
创建index.html,,并导入依赖(bootstrap、vue)
一、项目准备工作
1.1、添加依赖
boostrap依赖、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="asset/bootstrap-3.3.7-dist/css/bootstrap.min.css">
<script src="asset/jquery-3.5.1/jquery-3.5.1.min.js"></script>
<script src="asset/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<!-- 导入vue依赖-->
<script src="asset/vue.min-v2.5.16.js"></script>
<script src="asset/axios.min.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); font-size: 18px;color:white;font-weight:bold;text-align: center;line-height: 310px;">
蜗牛CRM管理系统
</div>
<!--显示表单的div-->
<div class="col-md-7">
<!-- div bootstrap 行-->
<div class="row" style="padding: 30px 0px 30px 0px;">
<div class="col-md-12" style="text-align: center;font-size: 18px;font-weight: bold;">
登录
</div>
</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>
<!-- 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>
<!-- 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="reset">重置</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
//创建Vue
new Vue({
el: '#app', //将id=app的管理权给vue
data: { //需要用到的数据
userName: null,//用户名
passwd: null,//密码
},
methods: { //所有方法的生命
doLogin() {//点击登录按钮后执行
//通过this.可以获取data中绑定的数据
if (this.userName == 'admin' && this.passwd == '123') {//登录成功
window.location.href = 'index.html';//跳转到主页index.html
} else {
alert("用户名或者密码错误");//弹窗警告
}
},
reset(){//点击重置按钮后执行
this.userName=null;
this.passwd=null;
},
},
created: function () {//页面加载完成后执行
}
});
</script>
</html>
运行效果如下:
2.2、首页开发
创建index.html,,并导入依赖(bootstrap、vue)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>首页</title>
<!-- 导入Bootstrap依赖-->
<link rel="stylesheet" href="asset/bootstrap-3.3.7-dist/css/bootstrap.min.css">
<script src="asset/jquery-3.5.1/jquery-3.5.1.min.js"></script>
<script src="asset/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<!-- 导入vue依赖-->
<script src="asset/vue.min-v2.5.16.js"></script>
<script src="asset/axios.min.js"></script>
<style>
/*默认样式*/
a:link{
font-size: 20px;
color: rgb(109,109,109);
}
/*访问过之后的颜色*/
a:visited{
font-size: 20px;
color: rgb(109,109,109);
}
/*鼠标悬浮链接上*/
/*text-decoration: none;不显示下划线*/
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;">
<!-- bootstrap行-->
<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="asset/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="changepassword.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; color: rgb(109,109,109);font-size: 18px;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;">
<!-- img-responsive图片自适应, center-block强制居中-->
<img src="asset/img/index.png" class="img-responsive center-block">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
运行效果:
2.3、添加用户页面开发
创建user_add.html,,并导入依赖(bootstrap、vue)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>添加用户</title>
<!-- 导入Bootstrap依赖-->
<link rel="stylesheet" href="asset/bootstrap-3.3.7-dist/css/bootstrap.min.css">
<script src="asset/jquery-3.5.1/jquery-3.5.1.min.js"></script>
<script src="asset/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<!-- 导入vue依赖-->
<script src="asset/vue.min-v2.5.16.js"></script>
<script src="asset/axios.min.js"></script>
<style>
/*默认样式*/
a:link {
font-size: 20px;
color: rgb(109, 109, 109);
}
/*访问过之后的颜色*/
a:visited {
font-size: 20px;
color: rgb(109, 109, 109);
}
/*鼠标悬浮链接上*/
/*text-decoration: none;不显示下划线*/
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;">
<!-- bootstrap行-->
<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="asset/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="changepassword.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; color: rgb(109,109,109);font-size: 18px;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;">
<!-- img-responsive图片自适应, center-block强制居中-->
<div class="row">
<div class="col-md-4 col-md-offset-4" style="margin-top: 20px;">
<label>用户名</label>
<input type="text" class="form-control"/>
</div>
</div>
<div class="row">
<div class="col-md-4 col-md-offset-4" style="margin-top: 20px;">
<label>昵称</label>
<input type="password" class="form-control"/>
</div>
</div>
<div class="row">
<div class="col-md-4 col-md-offset-4" style="margin-top: 20px;">
<label>手机号</label>
<input type="password" class="form-control"/>
</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"/>男
</label>
<label class="radio-inline">
<input type="radio" name="sex"/>女
</label>
</div>
</div>
<div class="row">
<div class="col-md-4 col-md-offset-4" style="margin-top: 20px;">
<label>生日</label>
<input type="password" class="form-control"/>
</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">添加</button>
<button class="btn btn-default" >重置</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</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="asset/bootstrap-3.3.7-dist/css/bootstrap.min.css">
<script src="asset/jquery-3.5.1/jquery-3.5.1.min.js"></script>
<script src="asset/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<!-- 导入vue依赖-->
<script src="asset/vue.min-v2.5.16.js"></script>
<script src="asset/axios.min.js"></script>
<style>
/*默认样式*/
a:link {
font-size: 20px;
color: rgb(109, 109, 109);
}
/*访问过之后的颜色*/
a:visited {
font-size: 20px;
color: rgb(109, 109, 109);
}
/*鼠标悬浮链接上*/
/*text-decoration: none;不显示下划线*/
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;">
<!-- bootstrap行-->
<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="asset/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="changepassword.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; color: rgb(109,109,109);font-size: 18px;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 表头-->
<thead>
<tr>
<th>ID</th>
<th>用户名</th>
<th>昵称</th>
<th>性别</th>
<th>生日</th>
<th>手机号</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>1001</td>
<td>奥利给</td>
<td>张三</td>
<td>男</td>
<td>2000-02-04</td>
<td>133345677654</td>
<td>
<button class="btn btn-link">修改</button>
<button class="btn btn-link">删除</button>
</td>
</tr>
<tr>
<td>1001</td>
<td>奥利给</td>
<td>张三</td>
<td>男</td>
<td>2000-02-04</td>
<td>133345677654</td>
<td>
<button class="btn btn-link">修改</button>
<button class="btn btn-link">删除</button>
</td>
</tr>
<tr>
<td>1001</td>
<td>奥利给</td>
<td>张三</td>
<td>男</td>
<td>2000-02-04</td>
<td>133345677654</td>
<td>
<button class="btn btn-link">修改</button>
<button class="btn btn-link">删除</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
效果如下:
2.5 修改密码页面效果
创建changepassword.html,并导入依赖(bootstrap、vue)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>修改密码</title>
<!-- 导入Bootstrap依赖-->
<link rel="stylesheet" href="asset/bootstrap-3.3.7-dist/css/bootstrap.min.css">
<script src="asset/jquery-3.5.1/jquery-3.5.1.min.js"></script>
<script src="asset/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<!-- 导入vue依赖-->
<script src="asset/vue.min-v2.5.16.js"></script>
<script src="asset/axios.min.js"></script>
<style>
/*默认样式*/
a:link {
font-size: 20px;
color: rgb(109, 109, 109);
}
/*访问过之后的颜色*/
a:visited {
font-size: 20px;
color: rgb(109, 109, 109);
}
/*鼠标悬浮链接上*/
/*text-decoration: none;不显示下划线*/
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;">
<!-- bootstrap行-->
<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="asset/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="changepassword.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; color: rgb(109,109,109);font-size: 18px;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;">
<!-- img-responsive图片自适应, center-block强制居中-->
<div class="col-md-12"
style="background-color: white;height: 730px;border:none;border-radius: 5px;">
<!-- img-responsive图片自适应, center-block强制居中-->
<div class="row">
<div class="col-md-4 col-md-offset-4" style="margin-top: 20px;">
<label>当前密码</label>
<input type="password" class="form-control"/>
</div>
</div>
<div class="row">
<div class="col-md-4 col-md-offset-4" style="margin-top: 20px;">
<label>确认密码</label>
<input type="password" class="form-control"/>
</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">添加</button>
<button class="btn btn-default" >重置</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
效果图如下: