一,用户UI显示和接口获取用户信息
htm代码
<div class="div_header_layout">
<div class="div_header"></div>
<div class="div_name">
<p id="username">张三</p>
<p>锄禾日当午,汗滴禾下土</p>
</div>
</div>
/**
* display: flex;弹性盒子用作子view水平布局
*/
.div_content .div_header_layout {
padding: 0.6rem;
display: flex;
}
/**
* flex-shrink 属性定义了项目的缩小比例,默认为1
* 即如果空间不足,该项目将缩小,它还有另外一个值,就是0
* 如果在子元素的 css 样式中添加 flex-shrink 属性, 然后把值改为 0
* flex-shrink:0 ,那么当前元素就不会被其他子元素挤压
*/
.div_content .div_header_layout .div_header {
width: 4rem;
height: 4rem;
background: url("../images/test2.jpg") no-repeat center center #ffffff;
border-radius: 4rem;
flex-shrink: 0;
}
/**
* margin: auto 0;
* 程序会自动计算剩余上下两部分的空白长度,把其等分再作为div左右的外边距,使得div垂直居中。
*/
.div_content .div_header_layout .div_name {
margin: auto 0;
margin-left: 0.6rem;
}
const HTTP = "http://";// 协议
// const HOST = "localhost"; //本地域名
const HOST = "tang.dongfangdashu.top"; //远程域名
const BASEURL = HTTP+HOST+"/api/"; //根路径
/**
* @param {Object} obj
* @param {Object} successfun
* @param {Object} errFun
* XMLHttpRequest请求封装
*/
function httpRequest(obj, successfun, errFun) {
var xmlHttp = null;
//创建 XMLHttpRequest 对象,老版本的 Internet Explorer (IE5 和 IE6)
//使用 ActiveX 对象:xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")
if (window.XMLHttpRequest) {
//code for all new browsers
xmlHttp = new XMLHttpRequest;
} else if (window.ActiveXObject) {
//code for IE5 and IE6
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//判断是否支持请求
if (xmlHttp == null) {
alert("浏览器不支持xmlHttp");
return;
}
//请求方式, 转换为大写
var httpMethod = (obj.method || "Get").toUpperCase();
//数据类型
var httpDataType = obj.dataType || 'json';
//url
var httpUrl = obj.url || '';
//异步请求
var async = true;
//post请求时参数处理
if (httpMethod == "POST") {
requestData = JSON.stringify(obj.data)
console.log(requestData);
}
//请求接口
if (httpMethod == 'GET') {
xmlHttp.open("GET", httpUrl, async);
xmlHttp.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
xmlHttp.send(null);
} else if (httpMethod == "POST") {
xmlHttp.open("POST", httpUrl, async);
xmlHttp.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
xmlHttp.send(requestData);
}
//onreadystatechange 是一个事件句柄。它的值 (state_Change) 是一个函数的名称,
//当 XMLHttpRequest 对象的状态发生改变时,会触发此函数。
//状态从 0 (uninitialized) 到 4 (complete) 进行变化。仅在状态为 4 时,我们才执行代码
xmlHttp.onreadystatechange = function () {
//complete
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
//请求成功执行的回调函数
successfun(xmlHttp.responseText);
} else {
//请求失败的回调函数
errFun;
}
}
}
}
$(function(){
userAjaxRequest(1);
})
/**
* jquery ajax 获取用户信息
* 获取用户信息
*/
function userAjaxRequest(uid){
$.ajax({
url: BASEURL+'user',//接口地址
data: {uid: uid},
async: true,
type: 'GET',
contentType: 'application/x-www-form-urlencoded', // 传参格式(默认为表单application/x-www-form-urlencoded) json为application/json
//dataType: 'json',//期望后端返回的数据类型
success: function (res) {
var resObj=JSON.parse(res);
if(resObj.code==1){
serUser(resObj.data);
}else{
alert(resObj.msg);
}
},
error: function (err) {
alert(err);
}
});
}
/**
* @param {Object} user
* 设置用户信息
*/
function serUser(user){
$("#username").text(user.username);
}
二,数据本地存储和返回箭头
html源码
<body>
<header class="tc">
<a href="javascript:history.go(-1)"></a>
关于我们
</header>
<div id="privacy">
<span>隐私政策</span>
<img src="images/icon_create_dialog_rightarrow_night.png" />
</div>
<div id="logout">
<button οnclick="logout()">退出登录</button>
</div>
</body>
/**
* line-height: 44px;行内高度固定,来进行垂直居中
* text-align: center;行内元素水平居中
* position: fixed;固定在顶部,不存滑动而动
* z-index属性是用来设置元素的堆叠顺序或者叫做元素层级,z-index的值越大,元素的层级越高。当元素发生重叠时,层级高的元素会覆盖在层级低的元素的上面,使层级低的元素的重叠部分被遮盖住
*/
header{
width:100%;
height: 44px;
line-height: 44px;
color:#333;
background: #fff;
position: fixed;
text-align: center;
top:0;
z-index: 99;
}
/**
* background 设置图片,不在同级目录必须加两个点,表示回退上级目录
* width: 30px; height: 30px;该用法必须同时设置固定宽高,和背景宽高
* float: left; 必须设置做浮动,否则箭头不会出现
*/
header a{
width: 24px;
height: 24px;
background: url('../images/icon_left_grey.png');
background-size:24px 24px;
margin-top:10px;
margin-left: 5px;
float: left;
}
body{
padding-top: 40px;
background: #eee;
}
#privacy{
height: 40px;
background-color: white;
margin-top: 20px;
padding-left: 10px;
padding-right: 10px;
}
#privacy span{
height: 40px;
line-height: 40px;
}
#privacy img{
height: 20px;
text-align: center;
float: right;
margin-top: 10px;
}
#logout{
margin-top: 20px;
text-align: center;
}
#logout button{
padding-left: 12px;
padding-right: 12px;
padding-top: 6px;
padding-bottom: 6px;
margin: 0 auto;
}
window.onload=function(){
var uid=window.localStorage.getItem("uid");
var currentUrl=window.location.href;
if(uid==null&¤tUrl.endsWith('index.html')==false){
toLogin()
return;
}
}
/**
* 跳转登录
*/
function toLogin(){
window.history.replaceState(null, "", './login.html');
window.history.go(0);
}
function logout(){
if(confirm("确定退出登录")){
localStorage.clear();
toLogin();
}
}