实训过程总结
2018年10月26日至2018年11月9日期间进行网站设计实训，实训模板为北风师兄（化名）自己的项目——投票系统（网址：http://vote.beifengtz.com/login.html）。在本次实训中本人负责的是前端的页面的实现，虽然期间有部分功能不是很会实现由师兄指导，之后的由本人书写，修改。
一、登录页面
页面的效果：背景图片的轮播，使用了图标（推荐网站：http://www.fontawesome.com.cn/ http://www.iconfont.cn/?spm=a313x.7781069.1998910419.d4d0a486a），美化radio类型，将背景图片进行高斯模糊，并进行轮播，将div的透明度改变。
1.美化radio类型
本次我使用的是纯css对radio类型进行美化，可以通过百度去查找相关的资料。推荐博文：https://www.cnblogs.com/sakura-panda/p/7065449.html http://www.htmleaf.com/css3/ui-design/201708164687.html https://blog.csdn.net/connie_0217/article/details/80264183
2.高斯模糊
这个页面最开始的时候用的是CSS将背景图片高斯模糊，但是由于页面四周会出现一圈白线，就直接用ps将图片高斯模糊，然后通过js加入图片轮播效果（代码如下）。
.blur {
-webkit-filter: blur(10px);
-moz-filter: blur(10px);
-ms-filter: blur(10px);
filter: blur(10px);
}//通过css将图片进行高斯模糊
$(function () {
changeImg();
})
function changeImg() {
setInterval(function () {
var i = Math.floor(Math.random()*4);
$(".back").attr("style","background:url('../images/"+i+".png') 50% 50% no-repeat;background-size:cover;");
},3000);
}//图片轮播效果
3.div的透明度
可以在CSS中指定需要透明化的地方，放置如下语句。
opacity: 0.9;
filter: alpha(opacity=90);调整透明度
二、管理员界面
主要总结一下，这里前端怎样和后端进行数据交互。
/**
* 渲染用户列表函数
* @param data 得到的用户对象
* */
function renderUserTable(data) {
$("#userTableBody").empty();//清除userTableBody的所有子DOM
for (var i = 0; i // 在userTableBody的尾部追加内容（DOM） $("#userTableBody").append(" " " " " " " \n" + " \n" + " " \n" +
");"+data.users[i].id+" \n" +
"+data.users[i].username+" \n" +
"+data.users[i].realname+" \n" +
"+data.users[i].email+" \n" +
\n" +
\n" +
}
}
/**
* 删除某个用户
* @param index 当前用户索引
* */
function deleteUser(index) {
var result= confirm("你确定删除吗？")
if(result){
$.ajax({
url:"http://10.4.208.198:80/admin/deleteUser",
type:"get",
data:{
id:userList[index].id
},
//服务器传回来的数据接收类型
dataType:"json",
success:function(res){
console.log(res)
if (res.code==1)
{
location.reload()//重新加载页面
} else{
alert("删除失败")
}
},
error:function (res) {
console.log(res.status)//status表示失败的时候的状态码
}
})
}
}
/**
* 修改用户数据
* */
function modify(index) {
$.ajax({
url:"http://10.4.208.198:80/admin/getOneUser",
type:"get",
data:{
id:userList[index].id
},
async:false,
dataType:"json",
success:function(res){
console.log(res)
if (res.code==1)
{
location.href= "../../pages/admin/modify.html?uid="+userList[index].id+"&password="+userList[index].password+"&real_name="+userList[index].realname+"&email="+userList[index].email+"&is_teacher="+userList[index].isTeacher ;//成功传出id就跳转页面
} else{
alert("进入修改失败")
}
},
error:function (res) {
console.log(res.status)//status表示失败的时候的状态码
}
})
}
$("").append()是jQuery的一种方法，在被选元素的结尾插入指定内容。在被选元素的开头插入指定内容是jQuery中的prepend()方法。
ajax中get和post的区别：https://www.cnblogs.com/ranyonsue/p/5888692.html
https://www.cnblogs.com/jianying/p/7992561.html