web前端期末大作业 基于HTML+CSS+JavaScript角色管理(带增删改查功能)
2024-05-30 13:12:50
⛵ 源码获取 文末联系 ✈
Web前端开发技术
描述 网页设计题材，DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 学生管理系统网页设计 | OA管理系统 | 后台管理模板 | 智能停车系统 | 等网站的设计与制作 | HTML期末大学生网页设计作业，Web大学生网页
HTML：结构
CSS：样式
在操作方面上运用了html5和css3，
采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为
文章目录
- 前端学习路线
- 网页基本结构
- 网页演示
- HTML结构代码
- 学的反而越迷茫
- 学习更多
前端学习路线
（1）html文件：其中index.html是首页、其他html为二级页面；
（2）css文件：css全部页面样式,文字滚动, 图片放大等；
（3）js文件：js实现动态轮播特效, 表单提交, 点击事件等等（网页中运用到js代码）
网页基本结构
(1)首页：进入网页中看到的第一个页面(LOGO、公司名称、导航、banner、新闻、相关信息、底部信息、banner一般是5个
(2)二级页面：从首页点击进入之后的页面叫做二级页面
(3)三级页面：从二级页面点击进入的页面
网页html：网页是构成网站的基本元素，是承载各种网站应用的平台。通俗地说，网站就是由网页组成的
首页网站：首页是一个网站的入口网页，故往往会被编辑得易于了解该网站多数作为首页的文件名是index加上扩展名
导航菜单：是指位于页面顶部或者侧边区域的，也称之为导航栏，它起着链接站点或者软件内的各个页面的作用.
网页页脚：是网页中每个页面的底部的区域。常用于显示附加信息。如作者、备案号等。
网页演示
HTML结构代码
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"><head><meta charset="UTF-8"><title>管理系统</title><!--引用的一些样式--><link rel="stylesheet" href="js/reset.css" type="text/css" /><link rel="stylesheet" href="css/elementUi.css" type="text/css" /><link rel="stylesheet" href="css/styles.css"><link rel="stylesheet" href="css/base.css" type="text/css" /><link rel="stylesheet" href="css/main.css" type="text/css" /><link rel="stylesheet" href="css/bootstrap.min.css"><!--引用的vue 和elementui组建库--><script src="js/vue.js"></script><script src="js/elementUi.js"></script><script src="js/jquery.min.js"></script><script type="text/javascript" src="js/echarts.js"></script><!--这是样式--><style>#tianjia {margin-bottom: 20px;}#tianjia>input {margin-right: 20px;}.title {padding: 10px;border-bottom: 1px solid #00ffff;}.mask {width: 300px;height: 250px;background: rgba(255, 255, 255, 1);position: absolute;left: 0;top: 0;right: 0;bottom: 0;margin: auto;z-index: 47;border-radius: 5px;}#mask {background: rgba(0, 0, 0, .5);width: 100%;height: 100%;position: fixed;z-index: 4;top: 0;left: 0;}.el-header {background-color: #B3C0D1;color: #333;line-height: 60px;}.el-aside {color: #333;}#demo {/* 必须设置宽高*/width: 1000;height: 600px;}</style></head><body><div id="one" align="center" style="display: flex;"><el-container style="height: 100vh; border: 1px solid #eee"><el-aside width="200px" style="background-color: rgb(238, 241, 246)"><el-menu :default-openeds="['1', '3']"><el-submenu index="1"><template slot="title"><i class="el-icon-message"></i>角色管理</template><el-menu-item-group><template slot="title">角色管理</template><el-menu-item index="1-1">角色管理</el-menu-item><el-menu-item index="1-2">角色管理</el-menu-item></el-menu-item-group></el-submenu></el-menu></el-aside><el-container><el-header style="text-align: right; font-size: 12px"><el-dropdown><i class="el-icon-setting" style="margin-right: 15px"></i><el-dropdown-menu slot="dropdown"><el-dropdown-item>查看</el-dropdown-item><el-dropdown-item>新增</el-dropdown-item><el-dropdown-item>删除</el-dropdown-item></el-dropdown-menu></el-dropdown><span>王小虎</span></el-header><el-main><el-form align="center" style="margin-left:20px"><!--第一行 标题--><el-row style="display:flex"><font size="50px" color="black">角色管理</font></el-row><!--这是新增的查询功能--><input type="text" placeholder="请输入要查询的条件"style="width:45%;display:flex;margin-top: 20px;height: 34px;" v-model="search"v-on:input="searchFn"><!--第二行 添加按钮 --><div id="tianjia" style="display:flex;margin-top: 20px;"><input type="text" name="id" v-model="addDetail.id" value="" placeholder="请输入公司代号"style="width:20%"><input type="text" name="name" v-model="addDetail.name" value="" placeholder="请输入公司名称"style="width:20%"><input type="text" name="adress" v-model="addDetail.adress" value="" placeholder="请输入公司地址"style="width:20%"><el-button type="success" size="big" round="true" @click.native.prevent="adddetail()"><font color="#f0f8ff" size="2px">添加</font></el-button></div><!--第三行 展示数据区域--><el-form><el-table :data="newsList" style="width:100%"><el-table-column prop="id" label="公司代号"></el-table-column><el-table-column prop="name" label="公司名称"></el-table-column><el-table-column prop="adress" label="公司地址"></el-table-column><!--增加 操作 菜单 以及旗下的子菜单 增加 修改--><el-table-column label="操作" width="150"><template slot-scope="scope"><!--修改按钮--><el-button @click.native.prevent="editdetail(scope.$index,newsList)" type="info"size="small">修改</el-button><!--删除按钮--><el-button @click.native.prevent="deletedetail(scope.$index,newsList)"type="danger" size="small">删除</el-button></template></el-table-column></el-table></el-form><div id="demo"></div><!--编辑弹框部分--><div><el-dialog title="编辑" :visible.sync="dialogFormVisible" width="30%":before-close="handleClose" append-to-body="true"><!--这就是一个表格--><el-form :model="form"><!--公司ID--><el-form-item label="公司ID"><el-input v-model="form.id" autocomplete="off"></el-input></el-form-item><!--公司名称--><el-form-item label="公司名称"><el-input v-model="form.name" autocomplete="off"></el-input></el-form-item><!--公司地址--><el-form-item label="公司地址"><el-input v-model="form.adress" autocomplete="off"></el-input></el-form-item></el-form><!--确定, 取消 按钮--><div><el-button type="primary" @click.native.prevent="editSubForm" :loading="addLoading">确定</el-button><el-button @click.native.prevent="dialogFormVisible=false">取消</el-button></div></el-dialog></div></el-form><!-- <el-table :data="tableData"><el-table-column prop="date" label="日期" width="140"></el-table-column><el-table-column prop="name" label="姓名" width="120"></el-table-column><el-table-column prop="address" label="地址"></el-table-column></el-table> --></el-main></el-container></el-container></div></body><script>var _index;new Vue({el: "#one",/*定义的数据*/data: {clonenewsList: [],checked: true,tableform: [],formLabeWidth: '120px',dialogFormVisible: false,editForm: [],selectList: {},search: "",currentPage: 1,addDetail: {},editList: false,editDetail: {},radio: 1,form: {id: "",name: "",adress: ""},/*表格中写死的数据*/newsList: [{id: "001",name: "阿里巴巴",adress: "杭州湖畔花园",}, {id: "002",name: "工银科技",adress: "北京朝阳区天源祥泰大厦"}, {id: "003",name: "IBM",adress: "海淀区中关村软件园"},]/*写死的数据结束*/},methods: {/*添加方法*/adddetail: function () {this.$confirm('确认进行添加', '是否继续?', '提示', {confirmButtonText: '确定',confirmButtonText: '取消',}).then(() => {this.newsList.push({id: this.addDetail.id,name: this.addDetail.name,adress: this.addDetail.adress,}),/*成功添加之后的提示信息*/this.$message({type: 'success',message: '添加成功',})}).catch((err) => {this.$message({type: 'error',message: err})})},/*删除方法*/deletedetail: function (index, rows) {this.$confirm('此操作将删除数据,', '是否继续?', '提示', {confirmButtonText: '确定',confirmButtonText: '取消',type: 'warning'}).then(() => {this.newsList.splice(index, 1)this.$message({type: 'success',message: '删除成功',})}).catch((err) => {this.$message({type: 'error',message: err})})},/*修改方法*/editdetail: function (index, rows) {this.dialogFormVisible = truethis.selected = index;this.form = JSON.parse(JSON.stringify(this.newsList))[index];},/*提交修改*/editSubForm: function () {Vue.set(this.newsList, this.selected, this.form);this.getShowData(this.newsList);this.dialogFormVisible = false;},/*查询方法*/searchFn: function (e) {var key = e.target.value;/*查询公司ID*/if (key) {var serchArray = [];this.newsList.forEach(function (item) {if (item.id.indexOf(key) > -1) {serchArray.push(item);}/*name查询*/if (item.name.indexOf(key) > -1) {serchArray.push(item);}/*地址查询*/if (item.adress.indexOf(key) > -1) {serchArray.push(item);}});this.getShowData1(serchArray);} else {this.getShowData1(this.newsList);}},/*获取需要渲染到页面中的数据*/getShowData: function (arr) {this.clonenewsList = JSON.parse(JSON.stringify(arr));},/*专门为查询写的渲染数据*/getShowData1: function (arr) {this.newsList = JSON.parse(JSON.stringify(arr));},/*分页功能代码*/handleSizeChange(val) {console.log(`每页${val}条`);},handleCurrentChange(val) {console.log(`当前页:$(val)`);},handleOpen(key, keyPath) {console.log(key, keyPath);},handleClose(key, keyPath) {console.log(key, keyPath);}}})let myChart = echarts.init(document.getElementById("demo"))// var chartDom = document.getElementById('main');var option;option = {xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{data: [120, 200, 150, 80, 70, 110, 130],type: 'bar',showBackground: true,backgroundStyle: {color: 'rgba(180, 180, 180, 0.2)'}}]};option && myChart.setOption(option);</script></html>学的反而越迷茫
有这种感觉很正常，因为你还没有真正去公司里面待过，也不清楚自己到底要学多少东西才能胜任公司里面给你分配的活。我从你的表述来看，你的基础应该还是很扎实的。跟着网上那种全套的视频教程学肯定没有问题。
当你以后真正进入公司，发现工作的难度和量大约只有你学习时期的大约20%，你可能就会发出一声叹息:原来工作也不过如此嘛。
这是很正常的，因为大部分公司是招你进去去干活的，写业务的，不是让你一个新人去研发公司架构的。都是现成的东西，你要做的就是在别人的教导下，手把手的指挥下去添砖加瓦。到时候你恐怕要惊呼:就这？
所以，放松心态吧，好好享受大学时光
—————————————————
学习更多
关注我 | 点赞博文 | 每天带你涨知识
web前端期末大作业 基于HTML+CSS+JavaScript角色管理(带增删改查功能)相关推荐
- web前端期末大作业——基于HTML+CSS+JavaScript仿蘑菇街时尚服装购物商城
常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 服装. 体育. 化妆品. 物流. 环保. 书籍. 婚纱. 游戏. 节日. ...
- web前端期末大作业基于html+css+javascript+jquery制作家乡主题风景网页设计与实现——张家口
家乡旅游景点网页作业制作 网页代码运用了DIV盒子的使用方法,如盒子的嵌套.浮动.margin.border.background等属性的使用,外部大盒子设定居中,内部左中右布局,下方横向浮动排列,大 ...
- web前端期末大作业——基于HTML+CSS+JavaScript实现中国茶文化(30页)
- web前端期末大作业 基于HTML+CSS+JavaScript学生宿舍管理系统
- web前端期末大作业 基于HTML+CSS+JavaScript程序员个人博客模板(web学生作业源码)
- web前端期末大作业——基于HTML+CSS+JavaScript蓝色的远程监控设备系统后台管理界面模板
- web前端期末大作业——基于html+css+javascript学生宿舍管理系统网站
- web前端期末大作业——基于html+css+javascript+jquery+bootstarp响应式的出国旅游定制公司官网 (17页)
- web前端期末大作业 基于HTML+CSS+JavaScript绿色的在线教育平台网站响应式企业网站模板
最新文章
- 分布式服务框架 Zookeeper -- 管理分布式环境中的数据
- Node.js模块系统
- python识别文字并且提示_python脚本:检测字符串标识符
- 团队项目第二阶段冲刺站立会议01
- y电容如何选型_常用电子元器件分类选型以及单端反激正激变压器设计 (MOS管、电感部分)...
- JZOJ 3739. 【TJOI2014】匹配
- 搞科研，从好好读论文开始：沈向洋带你读论文了
- CCF 201409-1 相邻数对
- 计算机组织与结构实验,计算机组织与结构实验报告 CQUPT
- tensorflow版本及其对应环境
- linux 内核高端内存意义,Linux内核高端内存管理
- Oracle 官宣：腾讯 JDK 18 国内第一！
- 我的R 之路： R最常见的小基础。。。。。。。。
- 【元胞自动机】基于matlab元胞自动机图像处理【含Matlab源码 234期 】
- JXLS for循环
- 飞跃微信小程序一一新风口新模式，你所了解到的小程序有多少？
- 键盘上所有特殊符号的英文读法
- 诗与远方：无题（九十四）
- 不知道RabbitMQ中Exchange类型Internal是什么意思？这边来~
- 根据起始时间，获取之间所有的时间（基于momentjs）