一、项目准备工作

 

1.1、添加依赖

boostrap依赖、jQuery依赖、vue的依赖

1.2、项目中用到的图片资源

二、前端开发

2.1、登录页面开发

创建login.html，并导入依赖（bootstrap、vue）

    <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>

<!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;">
                <!-- 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">
                        <!-- 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"/>
                            </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"/>
                            </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>

 

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/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;">
                <!-- 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="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="#">修改密码</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">
                        >&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>

 

1.3、添加用户页面开发

创建user_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/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;">
            <!-- 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="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="#">修改密码</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">
                    >&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: 50px">
                            <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="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="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="text" 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"/>男
                            </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">重置</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

 

1.5、用户管理页面效果

创建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/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;">
            <!-- 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="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="#">修改密码</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">
                    >&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;">
                    <!-- 使用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>
                                <td>1001</td>
                                <td>zhangSan</td>
                                <td>张三</td>
                                <td>男</td>
                                <td>2000-02-04</td>
                                <td>13345677654</td>
                                <td>
                                    <button class="btn btn-link">修改</button>
                                    <button class="btn btn-link">删除</button>
                                </td>
                            </tr>
                            <tr>
                                <td>1001</td>
                                <td>zhangSan</td>
                                <td>张三</td>
                                <td>男</td>
                                <td>2000-02-04</td>
                                <td>13345677654</td>
                                <td>
                                    <button class="btn btn-link">修改</button>
                                    <button class="btn btn-link">删除</button>
                                </td>
                            </tr>
                            <tr>
                                <td>1001</td>
                                <td>zhangSan</td>
                                <td>张三</td>
                                <td>男</td>
                                <td>2000-02-04</td>
                                <td>13345677654</td>
                                <td>
                                    <button class="btn btn-link">修改</button>
                                    <button class="btn btn-link">删除</button>
                                </td>
                            </tr>
                            <tr>
                                <td>1001</td>
                                <td>zhangSan</td>
                                <td>张三</td>
                                <td>男</td>
                                <td>2000-02-04</td>
                                <td>13345677654</td>
                                <td>
                                    <button class="btn btn-link">修改</button>
                                    <button class="btn btn-link">删除</button>
                                </td>
                            </tr>
                            <tr>
                                <td>1001</td>
                                <td>zhangSan</td>
                                <td>张三</td>
                                <td>男</td>
                                <td>2000-02-04</td>
                                <td>13345677654</td>
                                <td>
                                    <button class="btn btn-link">修改</button>
                                    <button class="btn btn-link">删除</button>
                                </td>
                            </tr>
                            <tr>
                                <td>1001</td>
                                <td>zhangSan</td>
                                <td>张三</td>
                                <td>男</td>
                                <td>2000-02-04</td>
                                <td>13345677654</td>
                                <td>
                                    <button class="btn btn-link">修改</button>
                                    <button class="btn btn-link">删除</button>
                                </td>
                            </tr>
                            <tr>
                                <td>1001</td>
                                <td>zhangSan</td>
                                <td>张三</td>
                                <td>男</td>
                                <td>2000-02-04</td>
                                <td>13345677654</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>

 1.7、修改密码页面

<!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>
        .boxleft a{
            text-decoration: none;
            font-size:20px ;
            color: rgb(109,109,109);
        }
        .boxleft a:visited{
            font-size:20px ;
            color: rgb(109,109,109);
        }
        .boxleft a:hover{
            font-size:20px ;
            color: white;
        }
    </style>

</head>
<body>
<div class="container" id="app">
    <div class="row">
        <div class="col-md-3 boxleft" style="height: 802px;background-color: rgb(0,21,41)">
            <div class="row">
                <div class="col-md-12"
                     style="color: white;text-align: center;font-size: 25px;line-height: 70px;height: 70px;font-weight: bold">
                    <img src="assets/img/logo.png" style="width: 30px">
                    蜗牛CRM管理系统
                </div>
            </div>
            <div class="row">
                <div class="col-md-12" style="text-align: center; padding: 20px 0px;">
                    <a href="index.html">进入首页</a>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12" style="text-align: center; padding: 20px 0px;">
                    <a href="userlist.html">用户管理</a>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12" style="text-align: center; padding: 20px 0px;">
                    <a href="useradd.html">添加用户</a>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12" style="text-align: center; padding: 20px 0px;">
                    <a href="#">客户管理</a>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12" style="text-align: center; padding: 20px 0px;">
                    <a href="#">添加客户</a>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12" style="text-align: center; padding: 20px 0px;">
                    <a href="updatepwd.html">修改密码</a>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12" style="text-align: center; padding: 20px 0px;">
                    <a href="login.html">退出登陆</a>
                </div>
            </div>

        </div>
        <div class="col-md-9" style="border:1px solid gray;background-color: ghostwhite;height: 802px;">
            <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: 8px">
                    <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>
</body>
</html>

 

# bootstrap # vue.js # javascript
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Vue里echarts根据页面大小动态调整/自适应

Vue里echarts根据页面大小动态调整/自适应

avatar Vue