admin 管理员组

文章数量: 1184232

看点资讯精选
模块大致分为四块：首页面、栏目模块、文章管理、用户管理。
首页面 ：简单使用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.运行 打开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="" 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=""></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')}elseif(text =='栏目管理'){$('.content-main').load('./pages/category.html')}elseif(text =='文章管理'){$('.content-main').load('./pages/articler.html')}elseif(text =='用户管理'){$('.content-main').load('./pages/user.html')}else{return;}})//首次加载默认选择第一项$('.container-left li:first').click()})

本文标签： 样式 系统 编程

版权声明：本文标题：SWF与Flash中心：Adobe Flash Player在前端技术中的新角色 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/p/1773591472a3563697.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。