目录
创建login.html,并导入依赖(bootstrap,vue)
创建index.html,,并导入依赖(bootstrap、vue)
创建user_add.html,,并导入依赖(bootstrap、vue)
创建user_list.html,并导入依赖(bootstrap、vue)
创建user_list.html,并导入依赖(bootstrap、vue)
一 项目准备工作
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</title> <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> <script src="assets/vue.min-v2.5.16.js"></script> <script src="assets/axios.min.js"></script> </head> <body> <div class="container" id="app"> <!--1画框--> <div class="row"> <div class="col-md-6 col-md-offset-3" style="height: 310px;border:1px solid black;margin-top: 80px"> <div class="row"> <!--2显示标题的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> <!--3显示内容--> <div class="col-md-7"> <!--4bootstap画hang--> <div class="row"> <div class="col-md-12" style="text-align: center;font-size: 18px;font-weight: bold;padding:30px 0 30px 0;"> 登录 </div> </div> <!--5bootstap画账号的行--> <div class="row" style="height: 60px;margin-bottom: 20px;"> <div class="col-md-8 col-md-offset-2"> <lable>用户名</lable> <input type="text" class="form-control" v-model="username"/> </div> </div> <!--6bootstap画密码的行--> <div class="row" style="height: 60px; margin-bottom: 20px;"> <div class="col-md-8 col-md-offset-2"> <lable>密码</lable> <input type="possword" class="form-control" v-model="posswd"/> </div> </div> <!--7bootstap画按钮的行--> <div class="row" style="height: 60px;"> <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="doRest">重置</button> </div> </div> </div> </div> </div> </div> </div>
运行效果
2.2首页开发
创建index.html,,并导入依赖(bootstrap、vue)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <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> <script src="assets/vue.min-v2.5.16.js"></script> <script src="assets/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);} a:hover{font-size: 20px;color:white;text-decoration:none; } </style> </head> <body> <div class="container" id="app"> <div class="row"> <!--导航--> <div class="col-md-3" style="background-color: rgb(0,21,41);height: 600px;"> <!--行--> <div class="row"> <div class="col-md-12" style="background-color: rgb(0,40,77);text-align: center;line-height: 70px;height: 70px;font-size: 20px;color: white;font-weight: bold;"> <!--添加蜗牛logo图片并设置大小--> <img src="assets/img/logo.png" style="width:30px;height: 30px;margin-right: 8px;"/> 蜗牛GRC管理系统 </div> </div> <div class="row"> <div class="col-md-12" style="text-align: center;padding:20px 8px 20px 8px;"> <a href="index.html">进入首页</a> </div> </div> <div class="row"> <div class="col-md-12" style="text-align: center;padding:20px 8px 20px 8px;"> <a href="user_list.html">用户管理</a> </div> </div> <div class="row"> <div class="col-md-12" style="text-align: center;padding:20px 8px 20px 8px;"> <a href="user_add.html">添加用户</a> </div> </div> <div class="row"> <div class="col-md-12" style="text-align: center;padding:20px 8px 20px 8px;">