HTML+CSS+JS网页设计期末课程大作业 web前端开发技术 web课程设计 后台管理系统。

 

目录

前言

  Login页面

Index页面

个人中心部分

基本资料

重置密码

文章管理

文章类别

 文章列表​

发布文章

前言

花了几天事件依葫芦画瓢,写了一个后台管理系统,大概长下面这张图这样。用到的技术有html5,css3,javascript,jquery,echarts,ajax,template,layui。没有能力开发一个后端接口,所以直接用了黑马老师提供的接口以及接口文档。

  Login页面

《HTML+CSS+JS网页设计期末课程大作业 web前端开发技术 web课程设计 后台管理系统。》

右小角的注册账号,绑定了点击事件,实现,通过块的none block完成登录和注册的页面切换。

注册和登录通过了ajax向服务器发起请求,完成认证,用户名和密码表单通过layui添加了pwd username的验证机制。完成认证 登录到index页面,如果失败则layer.msg返回错误理由

Index页面

《HTML+CSS+JS网页设计期末课程大作业 web前端开发技术 web课程设计 后台管理系统。》

头像,id 通过向服务器请求数据,获得头像和nickname 和username 如果 nickname 为空 则讲username渲染到页面上,如果用户未上传头像则将头像部分渲染为一个圆。主页中的数据可视化 通过iframe 直接复制上去的,echarts部分就不多说了,然后将首页绑定点击事件 完成跳转 设置target属性指向iframe 实现跳转。

个人中心部分

基本资料

《HTML+CSS+JS网页设计期末课程大作业 web前端开发技术 web课程设计 后台管理系统。》

这里就挨个给每个表单添加一个name属性 通过ajax请求依此渲染就好了。

提交按钮同理 绑定点击事件,阻止默认行为,向服务器提交数据,然后再调用一下 渲染左上角和右上角头像 name的函数就完事。重置按钮 reset。

第一个表单是username 不希望被用户修改,所以添加一个redonly就好了

《HTML+CSS+JS网页设计期末课程大作业 web前端开发技术 web课程设计 后台管理系统。》

 这里没话说,直接搬cropper,高端的编码方式往往只采用最朴素的cv。

上传这个按钮 是不能实现文件上传行为的,这里的上传功能是通过,创建了一个属性为file的表单

通过隐藏的方式 然后 通过绑定点击事件 来实现input的点击实现文件上传。

确定btn不多说了 确定完 获取base64位的图片 然后发送数据给服务器,重新渲染index

此处因为是子页面调用父页面的方法 所以window.parent.初始化方法();

重置密码

《HTML+CSS+JS网页设计期末课程大作业 web前端开发技术 web课程设计 后台管理系统。》

这里有啥好说的呢,这里没啥好说的,懂得都懂了。

文章管理

文章类别

《HTML+CSS+JS网页设计期末课程大作业 web前端开发技术 web课程设计 后台管理系统。》

《HTML+CSS+JS网页设计期末课程大作业 web前端开发技术 web课程设计 后台管理系统。》

剩下的大部分都没啥好说的了,基本都是获取元素绑定事件跟服务器交互然后渲染数据

 

 文章列表《HTML+CSS+JS网页设计期末课程大作业 web前端开发技术 web课程设计 后台管理系统。》

发布文章

《HTML+CSS+JS网页设计期末课程大作业 web前端开发技术 web课程设计 后台管理系统。》 

 总结

学习到前后端交互阶段,做了一些案例发现大部分ui布局都是直接基于框架快速开发。更多需要实现的用户交互的体验。本次案例遇到了跨域问题,困扰我若干天,才疏学浅,只能使用jsonp解决跨域问题,奈何jsonp只能使用get请求,我人麻了,最后将此案例上传到了github,接下来源码奉上,供大佬们参考学习。

GitHub – weiyuyang213/Demo01: 大事件项目

    原文作者:小韦的案例小窝
    原文地址: https://blog.csdn.net/weiyuyang250/article/details/121025982
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞