项目-CRM员工管理系统-前台用户操作页面(bootsrap/vue/jQuery)

三太子哪吒_
90 阅读2分钟

​

CRMSys员工管理系统

​

添加依赖/插件


    <!--依赖--> 
    <!-- servlet-->
    <dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>javax.servlet-api</artifactId>
      <version>3.1.0</version>
    </dependency>
​
    <!-- MySQL -->
    <dependency>
      <groupId>mysql</groupId>
      <artifactId>mysql-connector-java</artifactId>
      <version>8.0.30</version>
    </dependency>
​
    <!-- fastjson -->
    <dependency>
      <groupId>com.alibaba</groupId>
      <artifactId>fastjson</artifactId>
      <version>1.2.79</version>
    </dependency>
​
​
​
<!--插件-->
<!--导入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/vue.min-v2.5.16.js"></script>
    <script src="assets/axios.min.js"></script>

登录

源代码Login.html

  • font-weight:bold 字体加粗
  • solid 实线 dashed 虚线 dotted 点状
  • border-radius 边框平滑
<!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/vue.min-v2.5.16.js"></script>
    <script src="assets/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;border-radius: 10px">
            <!--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; border-radius: 10px">
                    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-size: 18px;font-weight: bold;">
                            登录
                        </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" placeholder="请输入用户名">
                        </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" placeholder="请输入密码">
                        </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">登录</button>
                            <button class="btn btn-default">重置</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

登录页效果图

image-20221108134050992

首页

源代码index.html

  • a:link 链接自未点击上去时候
  • a:visited 链接已经点击过的
  • a:hover鼠标放在链接上未点击
  • a:active 是介于hover visited 之间的一个状态，可以说是链接被按下时候的状态
  • img-responsive center-block 响应式图片水平居中
<!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/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">
​
    <!--bootstrap行-->
    <div class="row">
        <!--显示导航-->
        <div class="col-md-3" style="background-color: rgb(0,21,41); height: 800px">
            <div class="row">
                <!--bootstrap行-->
                <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 ">
                    <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="#">进入首页</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="#">客户管理</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="#">退出登录</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; ">
                    >&nbsp;&nbsp;首页
                </div>
            </div>
​
            <div class="row">
                <!--显示提示位置-->
                <div class="col-md-12" style="background-color: rgb(240,242,245);height: 730px;padding: 20px;">
                    <img src="assets/img/index.png" class="img-responsive center-block">
​
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

首页效果图

image-20221108134415843

用户添加

源代码user_add.html

<!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/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">
​
    <!--bootstrap行-->
    <div class="row">
        <!--显示导航-->
        <div class="col-md-3" style="background-color: rgb(0,21,41); height: 800px">
            <div class="row">
                <!--bootstrap行-->
                <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 ">
                    <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="#">进入首页</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="#">客户管理</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="#">退出登录</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; ">
                    >&nbsp;&nbsp;添加用户
                </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: 20px">
                            <label>用户名</label>
                            <input type="text" class="form-control" placeholder="请输入用户名">
                        </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" placeholder="请输入用户名">
                        </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" placeholder="请输入用户名">
                        </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" placeholder="请输入用户名">
                        </div>
                    </div>
​
                    <div class="row">
                        <div class="col-md-4 col-md-offset-4" style="margin-top: 20px">
                            <label style="margin-right: 20px;">性别</label>
                            <label class="radio-inline">
                                <input type="radio">男
                            </label>
                            <label class="radio-inline">
                                <input type="radio">女
                            </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">添加</button>
                            <button class="btn btn-default" style="margin-left: 8px">重置</button>
                        </div>
                    </div>
​
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

用户添加页面

image-20221108152315224

修改密码

源代码updatePassword.html

<!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/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">
​
  <!--bootstrap行-->
  <div class="row">
    <!--显示导航-->
    <div class="col-md-3" style="background-color: rgb(0,21,41); height: 800px">
      <div class="row">
        <!--bootstrap行-->
        <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 ">
          <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="#">进入首页</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="#">客户管理</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="#">退出登录</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; ">
          >&nbsp;&nbsp;修改密码
        </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: 20px">
              <label>当前密码</label>
              <input type="text" class="form-control" placeholder="请输入当前密码">
            </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" placeholder="请输入确认要修改的密码">
            </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: 5px">修改</button>
              <button class="btn btn-default" style="margin-left: 5px">重置</button>
            </div>
          </div>
​
        </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>

修改密码页面

image-20221108155918775

用户列表-管理

源代码User_List.html

<!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/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">
​
    <!--bootstrap行-->
    <div class="row">
        <!--显示导航-->
        <div class="col-md-3" style="background-color: rgb(0,21,41); height: 800px">
            <div class="row">
                <!--bootstrap行-->
                <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 ">
                    <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="#">进入首页</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="#">客户管理</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="#">退出登录</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; ">
                    >&nbsp;&nbsp;用户管理
                </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;">
                    <table class="table table-striped" style="margin-top: 20px">
                        <!--表格描述-->
                        <caption>用户管理-用户列表</caption>
                        <!--表头-->
                        <thead>
                        <tr>
                            <th align="center">id</th>
                            <th>用户名</th>
                            <th>昵称</th>
                            <th>性别</th>
                            <th>生日</th>
                            <th>手机号</th>
                            <th>操作</th>
                        </tr>
                        </thead>
​
                        <!--表格内容-->
                        <tbody>
                        <tr>
                            <td>1001</td>
                            <td>zhangsan</td>
                            <td>张三</td>
                            <td>男</td>
                            <td>2000-02-03</td>
                            <td>12221111</td>
                            <td>
                                <button class="btn btn-link">修改</button>
                                <button class="btn btn-link">删除</button>
                            </td>
                        </tr>
                        <tr>
                            <td>1001</td>
                            <td>zhanghsan</td>
                            <td>张三</td>
                            <td>男</td>
                            <td>2000-02-03</td>
                            <td>12221111</td>
                            <td>
                                <button class="btn btn-link">修改</button>
                                <button class="btn btn-link">删除</button>
                            </td>
                        </tr>
                        <tr>
                            <td>1001</td>
                            <td>zhanghsan</td>
                            <td>张三</td>
                            <td>男</td>
                            <td>2000-02-03</td>
                            <td>12221111</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>

用户列表页面图

image-20221108162542973

avatar
文章
阅读
粉丝