投稿
  1. 首页
  2. html-js-css

CRM-设计市场活动主页面以及页面后台

delicious是什么意思 • 2022-6-12 • html-js-css • 阅读 49

CRM-设计市场活动主页面以及页面后台,第1张

接上一篇：CRM-拦截器

1、要实现的页面


点击创建和修改d出模态框

2、市场活动主页面index.jsp 1. 路径

在src/main/webapp/WEB-INF/pages/workbench/activity/index.jsp

2. 标签 导入bootstrap的css和jsbootstrap是基于jquery的，所以还有导入jquery的js文件base标签 3. 标签

由要实现的页面可以看出：

需要查询相关的button按钮和input创建修改等 *** 作相关的button按钮table表格分页查询2个模态框


具体代码在最后

3、点击导航跳转到市场活动主页面

点击市场活动，这里显示刚刚写的市场活动主页面

3.1 如何显示在当前页面？ 上面图片显示的业务主页面代码如下

左侧导航栏宽度为18%，右侧工作区用一个iframe标签来显示其他页面，宽度为83%，left为18%iframe的name为workAreaFrame 3.1.1第一种方法显示


直接在导航栏里市场活动的a标签中href改为要访问的controller路径，并提交target属性
值为iframe标签的name值

3.1.2 第二种方法显示 我们在script标签中定义js代码，实现iframe标签显示市场活动主页面index.jsp

如上图，为导航栏里市场活动的li标签添加id为“activityId"
,为其添加点击事件在当前页面name为workAreaFrame的iframe标签打开，路径为什么是/workbench/activity/toIndex.do，我们要显示的是在WEB-INF目录下的资源，不能直接访问，所以要先写一个controller再跳转，把方法的访问路径给上面window.open()的url下面写这个controller 3.2 ActivityController

路径为com.lyx.workbench.web.controller代码如下 
@Controller
public class ActivityController {

    @Autowired
    private UserService userService;
    @RequestMapping("/workbench/activity/toIndex.do")
    public String toIndex(HttpServletRequest request){
        List<User> users = userService.queryAllUsers();
        request.setAttribute("users",users);
        return "workbench/activity/index";
    }
}
方法返回值给workbench/activity/index，视图解析器会自动添加前缀/WEB-INF/pages/和后缀.jsp代码里调用了service层的方法，这里是查tbl_user表的全部数据，查询结果保存再request作用域中，通过jstl的标签把user的uLoginAct登录名显示在模态框的下拉列表中下面来写dao和service层的代码以及模态框的下拉列表 4. dao和service层的代码 4.1 UserMapper.java

打开UserMapper接口类，并直接添加一个selectAllUsers()方法，返回值为List

4.2 UserMapper.xml

打开UserMapper.xml映射文件，并直接添加一个select标签，id为上面定义的方法名

    <select id="selectAllUsers" resultMap="BaseResultMap">
        select
        <include refid="Base_Column_List"/>
        from tbl_user
        where u_lock_state = '1'
    select>
4.3 UserService.java

打开UserService.java接口类，并直接添加一个queryAllUsers()方法，返回值为List

4.4 UserServiceImpl.java

打开UserServiceImpl.java类，该类implements UserService
@Override重写上面定义的queryAllUsers()方法

    @Override
    public List<User> queryAllUsers() {
        return userMapper.selectAllUsers();
    }
5. 模态框的下拉列表

如下代码所示，select标签


2. 标签循环显示保存在request作用域中的数据，jstl不要忘了添加

<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
5. 完整代码 5.1 业务主页面index.jsp 
<%
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";
%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <base href="<%=basePath%>">
    <meta charset="UTF-8">
    <title>Titletitle>
    <link rel="stylesheet" href="jquery/bootstrap-3.4.1/dist/css/bootstrap.min.css">
    <script type="text/javascript" src="jquery/jquery-3.5.1.js">script>
    <script type="text/javascript" src="jquery/bootstrap-3.4.1/dist/js/bootstrap.min.js">script>
    <script type="text/javascript">
        $(function () {
            function logout() {
                window.location.href = "settings/qx/user/logout.do";
            }

            function closeModal() {
                $("#closeBtn").click();
            }

            $("#activityId").click(function () {
                window.open("/workbench/activity/toIndex.do", "workAreaFrame")
            })
            window.open("/workbench/main/index.do", "workAreaFrame")
        });
        window.onload = function () {
            var ps = document.getElementById("navigation").getElementsByTagName("li");
            for (var i in ps) {
                ps[i].onmouseover = function () {
                    this.setAttribute("class", "active");
                }
                ps[i].onmouseout = function () {
                    this.removeAttribute("class");
                }
            }
        }
    script>
head>
<body>
<div>
    <%--提示框，默认隐藏--%>
    <div id="isLogout" class="modal fade" tabindex="-1">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button id="closeBtn" type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×span>button>
                    <h4 class="modal-title">提示框h4>
                div>
                <div class="modal-body"><p>确定退出吗？p>div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal" onclick="logout();">退出button>
                    <button type="button" class="btn btn-primary" onclick="closeModal();">取消button>
                div>
            div>
        div>
    div>
    <%--顶部--%>
    <div style="background-color: #3c3c3c;width: 100%;height: 50px;margin-top: -20px">
        <div class="page-header" style="color: wheat;margin-top: 0px;">
            <h3>客户信息管理系统<small>@xmqsmall>h3>
            <%--下拉列表--%>
            <div class="btn-group" style="float: right;right:60px; top: -30px;width: 20px;">
                <button type="button" style="width: 70px;text-align: left;" class="btn btn-default dropdown-toggle"
                        data-toggle="dropdown" aria-haspopup="true"
                        aria-expanded="false"><span class="glyphicon glyphicon-user" aria-hidden="true">span>
                    ${sessionScope.sessionUser.uLoginAct}<span class="caret">span>
                button>
                <ul class="dropdown-menu">
                    <li><a>Actiona>li>
                    <li><a>hhha>li>
                    <li><a>登录a>li>
                    <li id="logout" data-target="#isLogout" data-toggle="modal"
                        style="text-align:left;left: 5px;"><a><span class="glyphicon glyphicon-off"
                                                                    aria-hidden="true">span>
                        退出a>li>
                ul>
            div>
        div>
    div>
    <%--中间--%>
    <div style="position: absolute;top:50px;bottom: 30px;left:0px;right: 0px;">
        <%--左侧导航栏--%>
        <div style="left:0px;width: 18%;height: 100%;position: relative;overflow: auto">
            <ul id="navigation" class="nav nav-pills nav-stacked">
                <li role="presentation" class="active"><a href="#">
                    <span class="glyphicon glyphicon-home" aria-hidden="true">span>
                    工作台a>li>
                <li role="presentation"><a href="#">
                    <span class="glyphicon glyphicon-tags" aria-hidden="true">span>
                    动态a>li>
                <li role="presentation"><a href="#">
                    <span class="glyphicon glyphicon-time" aria-hidden="true">span>
                    审批a>li>
                <li role="presentation"><a href="#">
                    <span class="glyphicon glyphicon-user" aria-hidden="true">span>
                    客户公海a>li>
                <li role="presentation" id="activityId"><a>
                    <span class="glyphicon glyphicon-bullhorn" aria-hidden="true">span>
                    市场活动a>li>
                <li role="presentation"><a>
                    <span class="glyphicon glyphicon-search" aria-hidden="true">span>
                    线索（潜在客户）a>li>
                <li role="presentation"><a>
                    <span class="glyphicon glyphicon-user" aria-hidden="true">span>
                    客户a>li>
                <li role="presentation"><a>
                    <span class="glyphicon glyphicon-earphone" aria-hidden="true">span>
                    联系人a>li>
                <li role="presentation"><a>
                    <span class="glyphicon glyphicon-yen" aria-hidden="true">span>
                    交易a>li>
                <li role="presentation"><a>
                    <span class="glyphicon glyphicon-phone-alt" aria-hidden="true">span>
                    售后回访a>li>
                <li role="presentation"><a>
                    <span class="glyphicon glyphicon-stats" aria-hidden="true">span>
                    统计图表a>li>
                <li role="presentation"><a href="#">
                    <span class="glyphicon glyphicon-file" aria-hidden="true">span>
                    报表a>li>
                <li role="presentation"><a href="#">
                    <span class="glyphicon glyphicon-list-alt" aria-hidden="true">span>
                    销售订单a>li>
                <li role="presentation"><a href="#">
                    <span class="glyphicon glyphicon-send" aria-hidden="true">span>
                    发货单a>li>
            ul>
        div>
        <%--右侧工作区--%>
        <div id="workArea" style="position:absolute;top:0px;left:18%;width:82%;height:100%;">
            <iframe style="border-width:0px;width:100%;height:100%;" name="workAreaFrame">
            iframe>
        div>
    div> div>
body>
html>
5.2 市场活动主页面index.jsp 
<%
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";
%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <base href="<%=basePath%>">
    <title>Titletitle>
    <link rel="stylesheet" href="jquery/bootstrap-3.4.1/dist/css/bootstrap.min.css">
    <script type="text/javascript" src="jquery/jquery-3.5.1.js">script>
    <script type="text/javascript" src="jquery/bootstrap-3.4.1/dist/js/bootstrap.min.js">script>
    <script type="text/javascript">script>
head>
<body>


<div class="modal fade" id="create-ActivityModel" tabindex="-1">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">×span>button>
                <h4 class="modal-title" id="myModalLabel">创建市场活动h4>
            div>
            <form class="form-inline">
                <div class="modal-body col-md-12">
                    <div class="form-group">
                        <label class="col-md-2 control-label">所有者<span style="color: red;">*span>label>
                        <div class="col-md-10">
                            <select class="form-control">
                                <c:forEach items="${requestScope.users}" var="u">
                                    <option value="${u.userId}">${u.uLoginAct}option>
                                c:forEach>
                            select>
                        div>
                        <label class="col-md-2 control-label">名称<span style="color:red">*span>label>
                        <div class="col-md-10"><input type="text" class="form-control"/>div>

                    div>
                    <div class="form-group col-md-12">
                        <label>开始日期label>
                        <input type="text" class="form-control"/>
                        <label>结束日期label>
                        <input type="text" class="form-control"/>
                    div>
                    <div class="form-group col-md-12">
                        <label>成本label>
                        <input type="text" class="form-control"/>
                    div>
                    <div class="form-group col-md-12">
                        <label>描述label>
                        <textarea class="form-control" rows="3">textarea>
                    div>
                div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭button>
                    <button type="button" class="btn btn-primary">保存button>
                div>
            form>
        div>
    div>
div>

<div class="modal fade" id="edit-ActivityModel" tabindex="-1">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">×span>button>
                <h4 class="modal-title">修改市场活动h4>
            div>
            <form class="form-inline">
                <div class="modal-body col-md-12">
                    <div class="form-group">
                        <label class="col-md-2 control-label">所有者<span style="color: red;">*span>label>
                        <div class="col-md-10">
                            <select class="form-control">
                                <c:forEach items="${requestScope.users}" var="u">
                                    <option value="${u.userId}">${u.uLoginAct}option>
                                c:forEach>
                            select>
                        div>
                        <label class="col-md-2 control-label">名称<span style="color:red">*span>label>
                        <div class="col-md-10"><input type="text" class="form-control"/>div>

                    div>
                    <div class="form-group col-md-12">
                        <label>开始日期label>
                        <input type="text" class="form-control"/>
                        <label>结束日期label>
                        <input type="text" class="form-control"/>
                    div>
                    <div class="form-group col-md-12">
                        <label>成本label>
                        <input type="text" class="form-control"/>
                    div>
                    <div class="form-group col-md-12">
                        <label>描述label>
                        <textarea class="form-control" rows="3">textarea>
                    div>


                div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭button>
                    <button type="button" class="btn btn-primary">保存button>
                div>
            form>
        div>
    div>
div>

<div>
    
    <div>
        <h2>市场活动列表h2>
        <hr/>
        <div>
            <div class="row">
                <div class="col-xs-2">
                    <div class="input-group">
                            <span class="input-group-btn">
                                <button class="btn btn-default" type="button">名称button>
                            span>
                        <input type="text" class="form-control">
                    div>
                div>
                <div class="col-xs-2">
                    <div class="input-group">
                            <span class="input-group-btn">
                                <button class="btn btn-default" type="button">所有者button>
                            span>
                        <input type="text" class="form-control">
                    div>
                div>
                <div class="col-xs-2">
                    <div class="input-group">
                            <span class="input-group-btn">
                                <button class="btn btn-default" type="button">开始日期button>
                            span>
                        <input type="text" class="form-control">
                    div>
                div>
                <div class="col-xs-2">
                    <div class="input-group">
                            <span class="input-group-btn">
                                <button class="btn btn-default" type="button">结束日期button>
                            span>
                        <input type="text" class="form-control">
                    div>
                div>
                <div class="col-xs-2">
                    <button type="button" class="btn btn-sm btn-success">查询button>
                div>
            div>


        div>
    div>
    <br/><br/>
    
    <div class="btn-group" role="group">
        <button type="button" style="pointer-events:auto" class="btn btn-primary" data-toggle="modal"
                data-target="#create-ActivityModel">
            <span class="glyphicon glyphicon-plus" aria-hidden="true">span>
            创建
        button>
        <button type="button" class="btn btn-default" data-toggle="modal" data-target="#edit-ActivityModel">
            <span class="glyphicon glyphicon-pencil" aria-hidden="true">span>
            修改
        button>
        <button type="button" class="btn btn-warning">
            <span class="glyphicon glyphicon-minus" aria-hidden="true">span>删除
        button>
        <div class="btn-group" role="group">
            <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-import"
                                                                aria-hidden="true">span>上次到列表数据（导入）
            button>
            <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-export"
                                                                aria-hidden="true">span>下载戴列表数据（批量导入）
            button>
            <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-export"
                                                                aria-hidden="true">span>下载列表数据（选择导出）
            button>
        div>
    div>
    
    <table class="table table-striped text-left">
        <thead>
        <tr>
            <th><input type="checkbox">th>
            <th>名称th>
            <th>所有者th>
            <th>开始日期th>
            <th>结束日期th>
        tr>
        thead>
        <tbody>
        <tr>
            <td><input type="checkbox">td>
            <td>hhhtd>
            <td>hhhtd>
            <td>hhhtd>
            <td>hhhtd>
        tr>
        tbody>
    table>
    
    <div class="col-md-12">
        <button class="btn btn-default col-md-1">共xx条数据button>
        <div class="btn-group  col-md-4" role="group" aria-label="...">
            <button class="btn btn-default">显示button>
            <div class="btn-group" role="group">
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
                        aria-haspopup="true" aria-expanded="false">
                    10
                    <span class="caret">span>
                button>
                <ul class="dropdown-menu">
                    <li><a href="#">10a>li>
                    <li><a href="#">20a>li>
                ul>
            div>
            <button class="btn btn-default">条/页button>
        div>
        <div class="col-md-4">
            <nav aria-label="Page navigation">
                <ul class="pagination">
                    <li>
                        <a href="#" aria-label="Previous">
                            <span aria-hidden="true">«span>
                        a>
                    li>
                    <li><a href="#">1a>li>
                    <li><a href="#">2a>li>
                    <li><a href="#">3a>li>
                    <li><a href="#">4a>li>
                    <li><a href="#">5a>li>
                    <li>
                        <a href="#" aria-label="Next">
                            <span aria-hidden="true">»span>
                        a>
                    li>
                ul>
            nav>
        div>
    div>
div>
body>
html>

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1321259.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
delicious是什么意思 delicious是什么意思 一级用户组
0 0
上一篇 2022-06-12
下一篇 2022-06-12

发表评论

登录后才能评论

评论列表（0条）

保存