使用bootstrap制作CRM管理系统

于 2022-11-08 18:54:38 发布
阅读量110 收藏
点赞数
文章标签： bootstrap javascript 前端
原文链接：https://juejin.cn/post/7163563100422012965
版权

一、项目准备工作

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="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>
复制代码

运行效果

作者：大坏蛋_
链接：https://juejin.cn/post/7163550770023907342
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

Lara(✪ω✪)
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
基于Bootstrap的图书后台管理系统：增+删+改+上下翻页功能
m0_71824048的博客
04-06 1072
批量删除时，首先存放选择的数据编号deletArr,获取删除选中的类名delBtn,设点击事件，获取选中的值进行数据循环遍历，attr() 方法设置被选元素的属性selectValue'，push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度，再返回数据信息，接下来进行if语句条件判断，在无状态下点击删除按钮，模态框显示，text()方法返回文本数据到类名为deleteModalBody的模态框。=，请求类型为get请求，发送请求的数据类型为 JSON，接收响应的数据类型为 JSON；
CRM 客户管理系统 基于 thinkphp 源码
02-28
基于thinkphp开发的CRM客户管理系统，全部源码开源，无加密，能进行运维。也适合php开发者学习参考。
crm系统bootstrap模板.zip_bootstrap_bootstrap模板_crm页面模板_html5模板_up81d
07-14
基于bootstrap和html5的crm系统完整页面模板
使用BootStrap制作CRM管理系统
m0_74795259的博客
11-08 375
重置修改修改修改修改
后台管理系统示例：bootstrap快速搭建html页面，jQuery实现选择菜单切换内容
qq_39231899的博客
04-07 5939
后台管理系统示例：通过bootstrap快速搭建html页面，jQuery实现选择菜单切换内容
基于bootstrap的酒店管理系统
06-13
基于bootstrap的酒店管理系统，本项目采用java技术，MYSQL数据库，基于B/S架构，SSM框架，采用自顶向下的结构化的系统分析方法，阐述了一个功能全面的酒店管理系统的开发过程以及操作流程，介绍了系统核心的技术。...
spring boot+Bootstrap实现的人事管理系统
05-24
本人事管理系统项目可以部署运行，项目实现功能十分全面，文件包含了部署方法和需要的idea环境配置文件，包括maven+jdk......
bootstrap后台管理系统
01-15
非常牛的bootstrap后台管理系统，非常酷炫，物有所值。
bootstrap+php 图书管理系统
06-20
bootstrap响应式布局+php5.4 +mysql5.5，2015年一个实习项目发布只为了留念
elite admin（6套响应web管理界面框架_bootstrap后台模板_crm后台模板eliteadmin）
04-22
6套响应web管理界面框架_bootstrap后台模板_crm后台模板eliteadmin
Uplon-admin后台模板_Bootstrap4后台框架_响应crm后台模板
12-13
uplon是完全响应的Web UI工具包bootstrapV4的库。它配备了超级干净的用户界面，许多现成的使用和高度可定制的组件和部件。SASS和简单的代码允许开发人员把这个主题融入到实际的Web应用。 国外收费站点： http://preview.themeforest.net/item/uplon-responsive-bootstrap-4-web-app-kit/full_screen_preview/16607656 备注：由于文件较大我用360高压缩方式的，如果解压不了可以使用360解压，谢谢
基于bootstrap的后台管理系统
11-29
这是私有代码。只做存储谢谢，是基于bootstrap 的后台管理系统框架
一套很酷的bootstrap后台管理系统静态页面
04-28
一套很酷的bootstrap后台管理系统静态页面
bootstrap后台管理系统前后台实现(含数据库)
pengyufight的博客
07-01 3万+
撰写本文档目的是让后续开发者在理解该系统架构的基础上遵循一定规范保持系统架构的合理性；同时也能够达到允许没有开发经验仅有web基础的入门开发者能够通过复制粘贴的方式仿照demo示例进行开发的目的。 目 录 1 案例调研与选取... 2 1.1 案例调研... 2 1.2 UI选取... 3 2 系统实现... 3 2.1 实...
【程序源代码】CRM客户关系管理系统
程序源代码
10-05 5224
关键字：java 管理系统 crm 客户关系正文|内容01—【概述】悟空CRM-基于Spring Cloud Alibaba微服务架构 +vue ElementUI的前后端分离CR...
【小河今学 | Bootstrap-v3】响应式后台管理系统网页制作【纯布局】（上）
LB_laber的博客
07-31 1832
Bootstrap-v3制作响应式后台管理系统网页，布局
使用bootstrap搭建后台管理系统页面《一》
热门推荐
空空说技术的博客
03-24 5万+
1. 使用bootstrap搭建后台管理系统页面《一》 一般的后台管理系统页面主体包括四个部分，顶部导航栏，左侧菜单栏，中间正文页和底部的页脚。 其中左侧和顶部使用的是bootstrap的导航和下拉菜单组件，主体页面为了演示方便，使用了iframe框架。 1.1 nav组件 接下...
使用bootstrap搭建管理系统
最新发布
04-28
使用 Bootstrap 搭建管理系统非常方便，以下是一个简单的步骤： 1. 下载 Bootstrap 首先，你需要从官方网站下载 Bootstrap。你可以下载最新版的 Bootstrap，也可以下载旧版的 Bootstrap。 2. 创建 HTML 文件 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值