前端项目热点资讯01

最新推荐文章于 2024-07-10 10:14:49 发布

weixin_45838353

最新推荐文章于 2024-07-10 10:14:49 发布

阅读量325

点赞数 1

文章标签： js css jquery javascript

本文链接：https://blog.csdn.net/weixin_45838353/article/details/107349213

版权

看点资讯精选
模块大致分为四块：首页面、栏目模块、文章管理、用户管理。
首页面：简单使用eCharts展示一些数据
栏目管理：栏目显示、栏目新增或修改、栏目删除
文章管理：文章查询、文章审核、文章删除、文章发布与修改
用户管理：编辑管理、管理员管理、会员管理
规划；
1.用户需求
2.根据需求设计原型图
3.拿到原型图，设计静态界面
4.数据对接
5.测试
6.维护

项目所需工具：VSC、mysql、Navicat、swagger、以及阿里云服务器
项目所需：bootstrap-3.3.7、后台jar包、数据库文件
采用技术:js,jQuery、css

看点咨询swagger本地搭建
1.打开Navicat for MySQL 在阿里云连接中新建cms数据库，右键cms，选择运行sql文件，把sql文件选中，导入成功后关闭
2.在用户里新建用户用户名：密码：权限全部打开
3.打开终端或者xshell 运行 java -jar (jar包路径)
4.在阿里云进行端口号配置
5.将后端jar包上传到阿里云，并开启
6.运行http://139.192.196.92:8888/swagger-ui.html 打开swagger

首页面框架搭建：
index.html;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 导入css -->
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
    <!-- 导入BootStr的Css -->
    <link href="./CSS/bootstrap-3.3.7/css/bootstrap-theme.min.css" rel="stylesheet">
    <link href="./CSS/index.css" rel="stylesheet">

    <!-- 引入jquery -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
    <!-- 引入js -->
    <script src="./css/bootstrap-3.3.7/js/bootstrap.js"></script>
    <script src="./JS/index.js"></script>
</head>
<body>
    <div class="container-parent">
        <!-- 左侧区域 -->
        <div class="container-left">
            <!-- 左侧logo -->
            <div class="header-logo">
                <!-- 图标 -->
                    <img src="./images/logo.png" width="30px" height="30px" alt>
                <!-- 标题 -->
                <span>看点资讯</span>
            </div>
            <!-- 左侧菜单栏 -->
            <nav>
                <ul>
                
                    <li><i class="fa fa-home"></i><span>首页</span></li>
                    <li><i class="fa fa-clone"></i><span>栏目管理</span></li>
                    <li><i class="fa fa-map-o"></i><span>文章管理</span></li>
                    <li><i class="fa fa-user-circle"></i><span>用户管理</span></li>
                   
                </ul>
            </nav>
        </div>

        <!-- 右侧区域 -->
        <!-- 右侧区域 -->
        <div class="container-right">
            <!-- 右侧头部 -->
            <div class="header-right">
                <!-- 右侧头部图标 -->
                <i class="fa fa-bars"></i>
                <!-- 文字标题 -->
                <span class="header-title">首页</span>
                <!-- 头像 -->
                <span class="header-user">
                    <img src="./images/user.gif" width="40px" height="40px" alt="">
                </span>
            </div>
            <!-- 右侧内容区 -->
            <div class="container-content">
                <div class="content-main">
                    首页面
                </div>
            </div>
        </div>


    </div>
</body>
</html>

index.css

*{
    padding: 0;
    margin: 0;
}

html,body{
    height: 100%;
}


/*整体区域高度*/
.container-parent{
    height: 100%;
}

.container-left{
    height: 100%;
    width: 220px;
    background-color: rgb(49,66,85);
    float: left;
    color: white;
}
.container-left .header-logo{
    text-align: center;
    height: 50px;
    line-height: 50px;
    background-color: rgb(2,41,76);
    font-size: 18px;
    font-weight: bold;
}

.container-left .header-logo span{
    margin-left: 5px;
}

/*左侧菜单栏样式*/
.container-left nav{
    height: cal(100%-50px);
    padding-top: 20px;
}
/*左侧菜单栏选项的样式*/
.container-left nav li{
    line-height: 40px;
    font-size: 16px;
    padding-left: 20px;
    cursor: pointer;
}
/*菜单栏选项hover样式*/
.container-left nav li:hover{
    background-color: white;
    color:rgb(49,66,85) ;
}
/*菜单栏图标样式*/
.container-left nav i{
    font-size: 20px;
}

/*菜单栏字体样式*/
.container-left nav span{
    margin-left: 20px;
}
/*右侧区域样式设置*/ 
.container-right{
    width: calc(100% - 220px);
    height: 100%;
    float: left;  
   
}
/*右侧头部区域样式*/
.container-right .header-right{
    background-color: white;

    line-height: 49px;
    padding: 0 10px 0 20px;
    font-size: 16px;  
    border-bottom: 1px solid #e2e2e2;

}
/*右侧标题样式*/
.header-title{
    color: rgb(95,95,95);
    margin-left: 5px;

}
/*右侧头像样式*/
.header-user{
    float: right； 
}
/*右边内容区样式*/
.container-content{
    height: calc(100% - 50px);
    background-color: rgb(235,235,235);
    padding: 10px;
}
/*右侧内容区域主界面样式*/
.content-main{
    height: 100%;
    background-color:white;
    padding: 10px;
}
.content-main>div{
    height: 100%;
}

index.js

//界面跳转管理
$(function(){
    $('.container-left li').click(function(){
        //获取当前点击菜单的标题内容
        var text = $(this).text() 

        //设定样式变化之前，重置所有的样式
        $('.container-left li').css({
            backgroundColor:'rgb(49,66,85)',
            color:'white'
        })

        //thsi
        $(this).css({
            backgroundColor:'white',
            color:'rgb(49,66,85)'
        })

        //设置header-title动态边框
        $('.header-title').text(text)

        //通过标题内容 加载相应的界面
        if(text == '首页'){
            $('.content-main').load('./pages/home.html')
        }else if(text == '栏目管理'){
            $('.content-main').load('./pages/category.html')
        }
        else if(text == '文章管理'){
            $('.content-main').load('./pages/articler.html')
        }
        else if(text == '用户管理'){
            $('.content-main').load('./pages/user.html')
        }else{
            return;
        }

        
    })
    //首次加载默认选择第一项
        $('.container-left li:first').click()
   
})

weixin_45838353

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
前端项目热点资讯01

看点资讯精选模块大致分为四块：首页面、栏目模块、文章管理、用户管理。首页面：简单使用eCharts展示一些数据栏目管理：栏目显示、栏目新增或修改、栏目删除文章管理：文章查询、文章审核、文章删除、文章发布与修改用户管理：编辑管理、管理员管理、会员管理规划；1.用户需求2.根据需求设计原型图3.拿到原型图，设计静态界面4.数据对接5.测试6.维护项目所需工具：VSC、mysql、Navicat、swagger、以及阿里云服务器项目所需：bootstrap-3.3.7、后台jar包、数
复制链接

扫一扫