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

 

目录

前言

  Login页面

Index页面

个人中心部分

基本资料

重置密码

文章管理

文章类别

 文章列表​

发布文章


前言

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

  Login页面

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

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

Index页面

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

个人中心部分

基本资料

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

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

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

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

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

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

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

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

重置密码

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

文章管理

文章类别

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

 

 文章列表

发布文章

 

 总结

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

GitHub - weiyuyang213/Demo01: 大事件项目

  • 15
    点赞
  • 38
    收藏
  • 打赏
    打赏
  • 8
    评论
1、设计的目的 做个网站以怀念个人旅游的日子还有此刻的美丽,以及无限的未来向往 2、设计布局 主页设计布局是在网站的左上角是网站标题名称、当前在线人数等,有背景图引入,右上角有个人头像模态下拉框,点击出现下拉列表,包含我的旅游日记、个人中心、退出等链接,还有登录、注册按钮,点击登录按钮来到登录页面,网站设计初衷就是自己要登录后才能发布旅游日记,这样更能保证私密性网站中央是内容,包含三板块,分别是最热、最新、话题三个主题驿站,每个主题下面是列出5条内容日记的标题链接,点击对应链接跳转到日记详情页面,最热代表浏览次数最多,最新就是根据发布旅游日记的时间来排序,最新发的日记内容排在最前面,话题是根据这次发布旅游日记的主题来排序的网站尾部的左下角是网站设计目的简介,右下角分别是个人联系方式、合作方式、赞助商本人等点击名字会弹出图片 3、网站具体设计过程 首先选定 本网页制作工具是前端开发利器: WebStorm,创建前端项目工程,并创建相应的文件夹,存放各个cssjs,还有网页中用到的各种图片,以及除了主页面index.html之外的二级页面,其存放在html文件夹下,在各个二级页面与主页跳转的网页链接上采用相对路径而不是绝对路径,创建好的项目工程目录结构如下所示; 首先设计网站主页也就是核心内容index.html,所有的二级页面都可以从主页跳转过去,相应的二级页面也都有主页的链接,可以随时返回到主页面页面总体采用 CSS+DIV 布局,最外层DIV为框架,对重复页面代码进行抽取,比如网站头部用header.html来代替,网站底部用footer.html来代替,在各个要引用的网页上直接在其头部和尾部用iframe标签引入即可(),在背景图引入时采用(background-image:url("../pic/backpic.jpeg"); background-repeat: no-repeat; background-size:100% a)background-image标签进行操作在日记链接显示以及网站底部链接上采用ui、li标签,在中屏显示的最新、最热、话题等主题下的具体旅游日记标题

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:1024 设计师:我叫白小胖 返回首页
评论 8

打赏作者

小韦的案例小窝

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值