目录

前言

  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: 大事件项目