diff --git a/novel-front/src/main/java/com/java2nb/novel/controller/page/PageController.java b/novel-front/src/main/java/com/java2nb/novel/controller/page/PageController.java
index b6df1e9..2b71d4e 100644
--- a/novel-front/src/main/java/com/java2nb/novel/controller/page/PageController.java
+++ b/novel-front/src/main/java/com/java2nb/novel/controller/page/PageController.java
@@ -92,6 +92,47 @@ public class PageController extends BaseController {
         return ThreadLocalUtil.getTemplateDir() + "index";
     }
 
+    /**
+     * 登录页
+     */
+    @RequestMapping("user/login.html")
+    public String login() {
+        return ThreadLocalUtil.getTemplateDir() + "user/login";
+    }
+
+    /**
+     * 注册页
+     */
+    @RequestMapping("user/register.html")
+    public String register() {
+        return ThreadLocalUtil.getTemplateDir() + "user/register";
+    }
+
+    /**
+     * 用户中心页
+     */
+    @RequestMapping("user/userinfo.html")
+    public String userinfo() {
+        return ThreadLocalUtil.getTemplateDir() + "user/userinfo";
+    }
+
+    /**
+     * 我的书架页
+     */
+    @RequestMapping("user/favorites.html")
+    public String favorites() {
+        return ThreadLocalUtil.getTemplateDir() + "user/favorites";
+    }
+
+    /**
+     * 充值页
+     */
+    @RequestMapping("pay/index.html")
+    public String pay() {
+        return ThreadLocalUtil.getTemplateDir() + "pay/index.html";
+    }
+
+
     /**
      * 作品页
      */
diff --git a/novel-front/src/main/java/com/java2nb/novel/vo/BookShelfVO.java b/novel-front/src/main/java/com/java2nb/novel/vo/BookShelfVO.java
index 7573c0c..66faf6c 100644
--- a/novel-front/src/main/java/com/java2nb/novel/vo/BookShelfVO.java
+++ b/novel-front/src/main/java/com/java2nb/novel/vo/BookShelfVO.java
@@ -4,6 +4,7 @@ import com.fasterxml.jackson.annotation.JsonFormat;
 import com.java2nb.novel.entity.UserBookshelf;
 import lombok.Data;
 
+import javax.annotation.Generated;
 import java.util.Date;
 
 /**
@@ -19,9 +20,19 @@ public class BookShelfVO extends UserBookshelf {
     private String lastIndexName;
     private String bookName;
 
-    @JsonFormat(timezone = "GMT+8", pattern = "MM/dd HH:mm:ss")
+
+    private String picUrl;
+
+    private Long authorId;
+
+    private String authorName;
+
+    private String bookDesc;
+
     private Date lastIndexUpdateTime;
 
+    private Byte bookStatus;
+
 
     @Override
     public String toString() {
diff --git a/novel-front/src/main/resources/mybatis/mapping/UserBookshelfMapper.xml b/novel-front/src/main/resources/mybatis/mapping/UserBookshelfMapper.xml
index 7870905..ad80d7d 100644
--- a/novel-front/src/main/resources/mybatis/mapping/UserBookshelfMapper.xml
+++ b/novel-front/src/main/resources/mybatis/mapping/UserBookshelfMapper.xml
@@ -4,7 +4,8 @@
 <mapper namespace="com.java2nb.novel.mapper.FrontUserBookshelfMapper">
 
     <select id="listBookShelf" parameterType="long" resultType="com.java2nb.novel.vo.BookShelfVO">
-        select t1.book_id,t1.pre_content_id,t2.book_name,t2.cat_id,t2.cat_name,t2.last_index_id,t2.last_index_name,t2.last_index_update_time
+        select t1.book_id,t1.pre_content_id,t2.book_name,t2.cat_id,t2.cat_name,t2.last_index_id,t2.last_index_name,t2.last_index_update_time,
+               t2.pic_url,t2.author_id,t2.author_name,t2.book_desc,t2.book_status
         from user_bookshelf t1 inner join book t2 on t1.book_id = t2.id and t1.user_id = #{userId}
         order by t1.create_time desc
 
diff --git a/novel-front/src/main/resources/static/mobile/js/common.js b/novel-front/src/main/resources/static/mobile/js/common.js
index a62d25c..214592f 100644
--- a/novel-front/src/main/resources/static/mobile/js/common.js
+++ b/novel-front/src/main/resources/static/mobile/js/common.js
@@ -1,3 +1,91 @@
+var needLoginPath = ['/user/favorites.html','/user/comment.html','/user/feedback.html',
+    '/user/feedback_list.html','/user/read_history.html','/user/set_name.html',
+    '/user/set_password.html','/user/set_sex.html','/user/setup.html','/user/userinfo.html',
+    "/pay/index.html," +
+    "/author/register.html","/author/index.html"];
+var isLogin = false;
+var url = window.location.search;
+//key(需要检索的键）
+function getSearchString(key) {
+    var str = url;
+    str = str.substring(1, str.length); // 获取URL中?之后的字符（去掉第一位的问号）
+    // 以&分隔字符串，获得类似name=xiaoli这样的元素数组
+    var arr = str.split("&");
+
+    for (var i = 0; i < arr.length; i++) {
+        var tmp_arr = arr[i].split("=");
+        if(tmp_arr[0] == key){
+            return decodeURIComponent(tmp_arr[1]);
+        }
+    }
+    return undefined;
+}
+var keyword = getSearchString("k");
+if(keyword != undefined) {
+    $("#searchKey").val(keyword);
+    $("#workDirection").remove();
+    $("#idGirl").remove();
+}
+
+function searchByK(k){
+    if(!k){
+        window.location.href='/book/bookclass.html?k='+encodeURIComponent(document.getElementById("searchKey").value)
+    }else{
+        window.location.href='/book/bookclass.html?k='+encodeURIComponent(k)
+    }
+}
+$("#searchKey").keypress(function (even) {
+    if (even.which == 13) {
+        even.stopPropagation();
+        //enter键按下
+        searchByK();
+    }
+});
+Array.prototype.indexOf = function (val) {
+    for (var i = 0; i < this.length; i++) {
+        if (this[i] == val) return i;
+    }
+    return -1;
+};
+
+jQuery.cookie = function (name, value, options) {
+    if (typeof value != 'undefined') {
+        options = options || {};
+        if (value === null) {
+            value = '';
+            options.expires = -1;
+        }
+        var expires = '';
+        if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {
+            var date;
+            if (typeof options.expires == 'number') {
+                date = new Date();
+                date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));
+            } else {
+                date = options.expires;
+            }
+            expires = '; expires=' + date.toUTCString();
+        }
+        var path = options.path ? '; path=' + options.path : '';
+        var domain = options.domain ? '; domain=' + options.domain : '';
+        var secure = options.secure ? '; secure' : '';
+        document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join('');
+    } else {
+        var cookieValue = null;
+        if (document.cookie && document.cookie != '') {
+            var cookies = document.cookie.split(';');
+            for (var i = 0; i < cookies.length; i++) {
+                var cookie = jQuery.trim(cookies[i]);
+                if (cookie.substring(0, name.length + 1) == (name + '=')) {
+                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
+                    break;
+                }
+            }
+        }
+        return cookieValue;
+    }
+};
+
 Array.prototype.indexOf = function (val) {
     for (var i = 0; i < this.length; i++) {
         if (this[i] == val) return i;
@@ -12,15 +100,54 @@ Array.prototype.remove = function (val) {
     }
 };
 
-var token = localStorage.getItem("token");
-if (token) {
-    $.get("/user/isLogin", {"token": token}, function (data) {
-        if (data.code != 1) {//未登录
-            localStorage.removeItem("token");
+var token = $.cookie('Authorization');
+if(!token){
+    if(needLoginPath.indexOf(window.location.pathname) != -1){
+        location.href = '/user/login.html?originUrl='+decodeURIComponent(location.href);
+    }
+
+    $(".user_link").html("<a href=\"/user/login.html\">登录</a>｜<a href=\"/user/register.html\">注册</a>");
+}else{
+    $.ajax({
+        type: "POST",
+        url: "/user/refreshToken",
+        data: {},
+        dataType: "json",
+        success: function(data){
+            if(data.code == 200){
+                $(".user_link").html("<a href=\"/user/userinfo.html\">"+(data.data.nickName.substring(0,3))+"...</a>&nbsp;&nbsp;<a href=\"javascript:logout()\">退出</a>");
+                ;
+                if("/user/login.html" == window.location.pathname){
+                    var orginUrl = getSearchString("originUrl");
+                    window.location.href = orginUrl == undefined || orginUrl.isBlank() ? "/" : orginUrl;
+                    return;
+                }
+                isLogin = true;
+                if(localStorage.getItem("autoLogin") == 1){
+                    $.cookie('Authorization', data.data.token, { expires: 7 ,path: '/'  });
+                }else {
+                    $.cookie('Authorization', data.data.token,{ path: '/'  });
+                }
+            }else{
+                if(needLoginPath.indexOf(window.location.pathname) != -1){
+                    location.href = '/user/login.html';
+                }
+                $(".user_link").html("<a href=\"/user/login.html\">登录</a>｜<a href=\"/user/register.html\">注册</a>");
+            }
+        },
+        error: function () {
+            layer.alert('网络异常');
         }
-    })
+
+    });
 }
 
+function logout() {
+    $.cookie('Authorization', null,{ path: '/'  });
+    location.reload();
+}
+
+
 
 function readHistory() {
 
@@ -45,5 +172,26 @@ function getQueryVariable(variable) {
     return (false);
 }
 
+String.prototype.isPhone = function () {
+    var strTemp = /^1[3|4|5|6|7|8|9][0-9]{9}$/;
+    if (strTemp.test(this)) {
+        return true;
+    }
+    return false;
+};
+
+String.prototype.isBlank = function () {
+    if(this == null || $.trim(this) == ""){
+        return true;
+    }
+    return false;
+};
+String.prototype.isNickName = function () {
+    var strTemp = /^[\u4E00-\u9FA5A-Za-z0-9_]+$/;
+    if (strTemp.test(this)) {
+        return true;
+    }
+    return false;
+};
 
 
diff --git a/novel-front/src/main/resources/static/mobile/layui/css/layui.css b/novel-front/src/main/resources/static/mobile/layui/css/layui.css
index a7258a3..7025606 100644
--- a/novel-front/src/main/resources/static/mobile/layui/css/layui.css
+++ b/novel-front/src/main/resources/static/mobile/layui/css/layui.css
@@ -1847,7 +1847,7 @@ a cite {
 }
 
 .layui-btn-primary:hover {
-    border-color: #009688;
+    border-color: #f80;
     color: #333
 }
 
@@ -2230,11 +2230,11 @@ a cite {
 }
 
 .layui-form-checked span, .layui-form-checked:hover span {
-    background-color: #5FB878
+    background-color: #f80
 }
 
 .layui-form-checked i, .layui-form-checked:hover i {
-    color: #5FB878
+    color: #f80
 }
 
 .layui-form-item .layui-form-checkbox {
@@ -2276,13 +2276,13 @@ a cite {
 }
 
 .layui-form-checkbox[lay-skin=primary]:hover i {
-    border-color: #5FB878;
+    border-color: #f80;
     color: #fff
 }
 
 .layui-form-checked[lay-skin=primary] i {
-    border-color: #5FB878;
-    background-color: #5FB878;
+    border-color: #f80;
+    background-color: #f80;
     color: #fff
 }
 
diff --git a/novel-front/src/main/resources/templates/mobile/common/js.html b/novel-front/src/main/resources/templates/mobile/common/js.html
index f53f536..e022d12 100644
--- a/novel-front/src/main/resources/templates/mobile/common/js.html
+++ b/novel-front/src/main/resources/templates/mobile/common/js.html
@@ -1,3 +1,3 @@
 <script th:fragment="js" src="/mobile/js/jquery-1.9.1.js"></script>
-<script th:fragment="js" src="/mobile/js/common.js"></script>
 <script th:fragment="js" src="/mobile/layui/layui.all.js"></script>
+<script th:fragment="js" src="/mobile/js/common.js"></script>
diff --git a/novel-front/src/main/resources/templates/mobile/index.html b/novel-front/src/main/resources/templates/mobile/index.html
index ec2ab3b..251ed03 100644
--- a/novel-front/src/main/resources/templates/mobile/index.html
+++ b/novel-front/src/main/resources/templates/mobile/index.html
@@ -40,6 +40,20 @@
             -webkit-transition: all .3s;
         }
 
+        .user_link{
+            position: relative;
+            display: inline-block;
+            vertical-align: middle;
+            line-height: 50px;
+            padding: 0 20px;
+            color: #fff;
+            float: right;
+        }
+        .user_link a{
+
+            color: #fff;
+        }
+
     </style>
 
 
@@ -85,7 +99,7 @@
             <dd><a href="/book/book_ranking.html?sortBy=visit_count&catId=7">女频小说</a></dd>
         </dl>
     </li>
-    <li class="layui-nav-item"><a href="/user/favorites.html">书架</a></li>
+    <li class="user_link"></li>
 
 </ul>
 <ul class="layui-nav pc" lay-filter="" style="padding:0 36px;text-align: center">
@@ -120,9 +134,12 @@
             <dd><a href="/book/book_ranking.html?sortBy=visit_count&catId=7">女频小说</a></dd>
         </dl>
     </li>
+    <li class="user_link"></li>
+
 
 </ul>
 
+
 <div class="layui-container">
     <div class="layui-row">
 
diff --git a/novel-front/src/main/resources/templates/mobile/pay/index.html b/novel-front/src/main/resources/templates/mobile/pay/index.html
new file mode 100644
index 0000000..4d35510
--- /dev/null
+++ b/novel-front/src/main/resources/templates/mobile/pay/index.html
@@ -0,0 +1,212 @@
+<!DOCTYPE html>
+<html lang="en">
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+    <title th:text="${application.website.name}+'列表'"></title>
+
+    <meta name="keywords"
+          th:content="${application.website.name}+',精品小说,弹幕网站,弹幕,弹幕小说网站,免费小说,小说阅读,小说排行,轻小说,txt小说下载,电子书下载,动漫轻小说,日本轻小说'">
+
+    <meta name="description"
+          th:content="${application.website.name}+'是国内优秀的小说弹幕网站,'+${application.website.name}+'提供海量热门网络小说,日本轻小说,国产轻小说,动漫小说,轻小说在线阅读和TXT小说下载,致力于网络精品小说的收集,智能计算小说评分,打造小说精品排行榜,致力于无广告无弹窗的小说阅读环境。'">
+
+
+    <div th:include="mobile/common/css :: css"></div>
+
+    <style type="text/css">
+
+
+        .line-limit-length {
+
+            overflow: hidden;
+
+            text-overflow: ellipsis;
+
+            white-space: nowrap;
+
+        }
+
+        .indexP p a {
+            color: #4c6978;
+        }
+
+        .Readarea {
+            font-size: 18px;
+            line-height: 35px;
+            padding: 10px;
+            color: #333;
+        }
+
+        div, p {
+            wrap-work: break-word;
+            word-break: break-all;
+            word-wrap: break-word;
+            word-break: normal;
+            -moz-box-sizing: border-box;
+            -webkit-box-sizing: border-box;
+            box-sizing: border-box;
+            -ms-box-sizing: border-box;
+        }
+
+        .indexDiv a {
+            margin-left: 20px;
+        }
+
+        img {
+            width: 130px;
+            height: 180px;
+        }
+        .payHead {
+            height: 36px;
+            line-height: 36px;
+            padding: 20px 0 50px;
+            margin: 0 24px;
+            font-size: 16px;
+            border-bottom: 1px solid #eaeaea;
+            zoom: 1;
+        }
+        .pay_way li {
+            text-align: center;
+            cursor: pointer;
+            border: 2px solid #eee;
+            margin: 20px 0px 3px 43px;
+            padding-top: 20px;
+            padding-bottom: 20px;
+        }
+
+    </style>
+</head>
+<body>
+
+
+<input type="hidden" id="limit" th:value="${limit}"/>
+<input type="hidden" id="curr" th:value="${curr}"/>
+<input type="hidden" id="total" th:value="${total}"/>
+<input type="hidden" id="ids" th:value="${ids}"/>
+<input type="hidden" id="bookStatus" th:value="${bookStatus}"/>
+<input type="hidden" id="token" th:value="${token}"/>
+<input type="hidden" id="keyword" th:value="${keyword}"/>
+<input type="hidden" id="catId" th:value="${catId}"/>
+<input type="hidden" id="sortBy" th:value="${sortBy}"/>
+<input type="hidden" id="sort" th:value="${sort}"/>
+
+<div style="height: 50px;line-height: 50px;text-align: center" class="layui-header header header-doc  layui-bg-cyan">
+
+    <div style="width:10%;float: left;margin-left: 10px">
+        <a href="javascript:history.go(-1)">
+            <i style="font-size: 20px;color: #fff;" class="layui-icon">&#xe65c;</i></a>
+    </div>
+    <b class="layui-icon">充值</b>
+    <div style="width:10%;float: right;margin-right: 10px"><a href="/">
+        <i style="font-size: 20px;color: #fff;" class="layui-icon">&#xe68e;</i>
+    </a>
+    </div>
+</div>
+<div id="body" class="layui-row">
+    <div class="payHead cf">
+        <div class="fl">
+            充值账号：<span class="user_name" id="my_name">13560421324</span>&nbsp;&nbsp;&nbsp;&nbsp;余额：<em style="color: #f80" id="accountBalance">10</em> 屋币<!--<em class="red">+0</em>代金券-->
+        </div>
+    </div>
+    <div id="payAmount" class="pay_way layui-row layui-col-space15" style="text-align: center;padding-top: 20px;">
+        <h5>选择充值金额</h5>
+        <li vals="10" class="layui-col-xs4 layui-col-sm3 layui-col-md2">
+            <div class="layui-panel">
+                <div ><strong>10元</strong><br><span class="pay_mn">1000屋币</span></div>
+            </div>
+        </li>
+        <li vals="30"  class="layui-col-xs4 layui-col-sm3 layui-col-md2">
+            <div class="layui-panel">
+                <div ><strong>30元</strong><br><span class="pay_mn">3000屋币</span></div>
+            </div>
+        </li>
+        <li vals="50" class="layui-col-xs4 layui-col-sm3 layui-col-md2">
+            <div class="layui-panel">
+                <div ><strong>50元</strong><br><span class="pay_mn">5000屋币</span></div>
+            </div>
+        </li>
+        <li vals="100" class="layui-col-xs4 layui-col-sm3 layui-col-md2">
+            <div class="layui-panel">
+                <div ><strong>100元</strong><br><span class="pay_mn">10000屋币</span></div>
+            </div>
+        </li>
+        <li vals="200" class="layui-col-xs4 layui-col-sm3 layui-col-md2">
+            <div class="layui-panel">
+                <div ><strong>200元</strong><br><span class="pay_mn">20000屋币</span></div>
+            </div>
+        </li>
+        <li vals="500" class="layui-col-xs4 layui-col-sm3 layui-col-md2">
+            <div class="layui-panel">
+                <div ><strong>500元</strong><br><span class="pay_mn">50000屋币</span></div>
+            </div>
+        </li>
+
+    </div>
+
+    <form action="/pay/aliPay" method="post" id="payform" name="payform">
+
+        <input type="hidden" id="pValue" name="payAmount"  />
+    </form>
+
+
+</div>
+<div th:replace="mobile/common/footer :: footer">
+</div>
+
+<a name="buttom"></a>
+</body>
+
+<div th:replace="mobile/common/js :: js"></div>
+
+<script>
+    $("#body").css("min-height",($(window).height() - 100)+"px")
+
+    //查询用户信息
+    $.ajax({
+        type: "get",
+        url: "/user/userInfo",
+        data: {},
+        dataType: "json",
+        success: function (data) {
+            if (data.code == 200) {
+                if(data.data.nickName){
+                    $("#my_name").html(data.data.nickName);
+                }else{
+                    $("#my_name").html(data.data.username);
+                }
+
+                $("#accountBalance").html(data.data.accountBalance);
+
+            } else if (data.code == 1001) {
+                //未登录
+                location.href = '/user/login.html?originUrl=' + decodeURIComponent(location.href);
+
+            } else {
+                layer.alert(data.msg);
+            }
+
+        },
+        error: function () {
+            layer.alert('网络异常');
+        }
+    })
+
+    $("#payAmount").find("li").click(function () {
+
+        $("#pValue").val($(this).attr("vals"));
+
+        $("#payform").submit();
+
+
+
+    });
+
+
+</script>
+
+
+
+</html>
\ No newline at end of file
diff --git a/novel-front/src/main/resources/templates/mobile/user/favorites.html b/novel-front/src/main/resources/templates/mobile/user/favorites.html
new file mode 100644
index 0000000..aba0bda
--- /dev/null
+++ b/novel-front/src/main/resources/templates/mobile/user/favorites.html
@@ -0,0 +1,268 @@
+<!DOCTYPE html>
+<html lang="en">
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+    <title th:text="${application.website.name}+'列表'"></title>
+
+    <meta name="keywords"
+          th:content="${application.website.name}+',精品小说,弹幕网站,弹幕,弹幕小说网站,免费小说,小说阅读,小说排行,轻小说,txt小说下载,电子书下载,动漫轻小说,日本轻小说'">
+
+    <meta name="description"
+          th:content="${application.website.name}+'是国内优秀的小说弹幕网站,'+${application.website.name}+'提供海量热门网络小说,日本轻小说,国产轻小说,动漫小说,轻小说在线阅读和TXT小说下载,致力于网络精品小说的收集,智能计算小说评分,打造小说精品排行榜,致力于无广告无弹窗的小说阅读环境。'">
+
+
+    <div th:include="mobile/common/css :: css"></div>
+
+    </div>
+
+    <style type="text/css">
+
+
+        .line-limit-length {
+
+            overflow: hidden;
+
+            text-overflow: ellipsis;
+
+            white-space: nowrap;
+
+        }
+
+        .indexP p a {
+            color: #4c6978;
+        }
+
+        .Readarea {
+            font-size: 18px;
+            line-height: 35px;
+            padding: 10px;
+            color: #333;
+        }
+
+        div, p {
+            wrap-work: break-word;
+            word-break: break-all;
+            word-wrap: break-word;
+            word-break: normal;
+            -moz-box-sizing: border-box;
+            -webkit-box-sizing: border-box;
+            box-sizing: border-box;
+            -ms-box-sizing: border-box;
+        }
+
+        .indexDiv a {
+            margin-left: 20px;
+        }
+
+        img {
+            width: 130px;
+            height: 180px;
+        }
+    </style>
+</head>
+<body>
+
+
+<input type="hidden" id="limit" th:value="${limit}"/>
+<input type="hidden" id="curr" th:value="${curr}"/>
+<input type="hidden" id="total" th:value="${total}"/>
+<input type="hidden" id="ids" th:value="${ids}"/>
+<input type="hidden" id="bookStatus" th:value="${bookStatus}"/>
+<input type="hidden" id="token" th:value="${token}"/>
+<input type="hidden" id="keyword" th:value="${keyword}"/>
+<input type="hidden" id="catId" th:value="${catId}"/>
+<input type="hidden" id="sortBy" th:value="${sortBy}"/>
+<input type="hidden" id="sort" th:value="${sort}"/>
+
+<div style="height: 50px;line-height: 50px;text-align: center" class="layui-header header header-doc  layui-bg-cyan">
+
+    <div style="width:10%;float: left;margin-left: 10px">
+        <a href="javascript:history.go(-1)">
+            <i style="font-size: 20px;color: #fff;" class="layui-icon">&#xe65c;</i></a>
+    </div>
+    <b class="layui-icon">我的书架</b>
+    <div style="width:10%;float: right;margin-right: 10px"><a href="/">
+        <i style="font-size: 20px;color: #fff;" class="layui-icon">&#xe68e;</i>
+    </a>
+    </div>
+</div>
+<div id="body">
+<div id="bookList">
+
+
+</div>
+
+
+<div id="books" style="text-align: center;"></div>
+
+</div>
+<div th:replace="mobile/common/footer :: footer">
+</div>
+
+<a name="buttom"></a>
+</body>
+
+<div th:replace="mobile/common/js :: js"></div>
+
+<script>
+    $("#body").css("min-height",($(window).height() - 110)+"px")
+
+    search(1,20);
+
+    function search(curr,limit) {
+
+
+        $.ajax({
+            type: "get",
+            url: "/user/listBookShelfByPage",
+            data: {'curr':curr,'limit':limit},
+            dataType: "json",
+            success: function (data) {
+                if (data.code == 200) {
+                    var bookList = data.data.list;
+                    var bookListHtml = "";
+                    for (var i = 0; i < bookList.length; i++) {
+                        var book = bookList[i];
+
+                        /*var end = book.bookDesc.indexOf("<");
+                        if(end != -1) {
+                            book.bookDesc = book.bookDesc.substring(0,end);
+                        }*/
+
+                        if(book.bookDesc){
+                            book.bookDesc = book.bookDesc.replace(/<[^>]+>/g,"").replace(/\s+/g,"").replace(/&nbsp;/g,"");
+                        }
+
+                        bookListHtml += ("<div class=\"layui-row\" style=\"margin-bottom:10px;padding:10px;background: #f2f2f2\">\n" +
+                            "        <a href='/book/"+book.bookId+"/"+book.preContentId+".html'>\n" +
+                            "            <div class=\"layui-col-xs6 layui-col-sm3 layui-col-md2 layui-col-lg2\" style=\"text-align: center\">\n" +
+                            "                <img style='width: 130px;height: 180px' align=\"center\"\n" +
+                            "                     src=\""+book.picUrl+"\"/>\n" +
+                            "\n" +
+                            "            </div>\n" +
+                            "        </a>\n" +
+                            "        <div style=\"padding: 10px\" class=\"layui-col-xs6 layui-col-sm8 layui-col-md8 layui-col-lg8\">\n" +
+                            "            <a href='/book/"+book.bookId+"/"+book.preContentId+".html'>\n" +
+                            "                <div class=\"line-limit-length\" style=\";color: #000;font-size: 15px\">"+book.bookName+"</div>\n" +
+                            "            </a>\n" +
+                            "            <div style=\";color: #4c6978;float: right;\"><i style=\"color: red\"></i></div>\n" +
+                            "            <a href='/book/"+book.bookId+"/"+book.preContentId+".html'>\n" +
+                            "                <div style=\";color: #a6a6a6;\" class=\"line-limit-length\">作者："+book.authorName+"</div>\n" +
+                            "            </a>\n" +
+                            "            <div style=\"margin-top: 5px;color: #a6a6a6;\">类别："+book.catName+"</div>\n" +
+                            "            <div style=\"margin-top: 5px;color: #a6a6a6;\">状态："+(book.bookStatus==0?'连载':'完结')+"</div>\n" +
+                            "            <div style=\"margin-top: 5px;color: #a6a6a6;\">更新：<i style='color: red'>"+book.lastIndexUpdateTime.substr(0,11)+"</i>\n" +
+                            "            </div>\n" +
+                            "            <div style=\"margin-top: 5px;color: #a6a6a6;\">简介："+(book.bookDesc?(book.bookDesc.length>15?(book.bookDesc.substr(0,15)+"..."):book.bookDesc):book.bookDesc)+"</div>\n" +
+                            "\n" +
+                            "\n" +
+                            "        </div>\n" +
+                            "\n" +
+                            "    </div>");
+                    }
+                    $("#bookList").html(bookListHtml);
+
+                    layui.use('laypage', function () {
+                        var laypage = layui.laypage;
+
+                        //执行一个laypage实例
+                        laypage.render({
+                            elem: 'books' //注意，这里的 test1 是 ID，不用加 # 号
+                            , count: data.data.total //数据总数，从服务端得到,
+                            , curr: data.data.pageNum
+                            , limit: data.data.pageSize
+                            , jump: function (obj, first) {
+
+
+                                //obj包含了当前分页的所有参数，比如：
+                                console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
+                                console.log(obj.limit); //得到每页显示的条数
+
+
+                                //首次不执行
+                                if (!first) {
+                                    search(obj.curr, obj.limit);
+                                } else {
+
+                                }
+                            }
+                        });
+                    });
+                } else {
+                    layer.alert(data.msg);
+                }
+
+            },
+            error: function () {
+                layer.alert('网络异常');
+            }
+        })
+
+    }
+
+
+    function searchByAllCondition(curr, limit, newKeyword) {
+        var toUrl = "/book/search?curr=" + curr + "&limit=" + limit;
+        var ids = $("#ids").val();
+        if (ids) {
+            toUrl += ("&historyBookIds=" + ids);
+        }
+        var token = $("#token").val();
+        if (token) {
+            toUrl += ("&token=" + token);
+        }
+        var keyword = $("#keyword").val();
+        if (newKeyword) {
+            toUrl += encodeURI("&keyword=" + newKeyword);
+        } else if (keyword) {
+            toUrl += encodeURI("&keyword=" + keyword);
+        }
+        var bookStatus = $("#bookStatus").val();
+        if (bookStatus) {
+            toUrl += ("&bookStatus=" + bookStatus);
+        }
+        var catId = $("#catId").val();
+        if (catId) {
+            toUrl += ("&catId=" + catId);
+        }
+
+        var sortBy = $("#sortBy").val();
+        if (sortBy) {
+            toUrl += ("&sortBy=" + sortBy);
+        }
+
+        var sort = $("#sort").val();
+        if (sort) {
+            toUrl += ("&sort=" + sort);
+        }
+
+        window.location.href = toUrl;
+    }
+
+    function searchBooks() {
+        var keywords = $("#title").val();
+        $("#keyword").val("");
+        searchByAllCondition(1, 20, keywords);
+    }
+
+</script>
+<script>
+
+
+
+
+    function toMyCollect() {
+        var token = localStorage.getItem("token");
+        if (token) {
+            window.location.href = "/book/search?token=" + token;
+        } else {
+            window.location.href = "/user/login.html";
+        }
+    }
+</script>
+
+
+</html>
\ No newline at end of file
diff --git a/novel-front/src/main/resources/templates/mobile/user/login.html b/novel-front/src/main/resources/templates/mobile/user/login.html
index c2048ac..5622acb 100644
--- a/novel-front/src/main/resources/templates/mobile/user/login.html
+++ b/novel-front/src/main/resources/templates/mobile/user/login.html
@@ -5,109 +5,114 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
-    <title>登录|注册</title>
-
-    <div th:include="common/css :: css"></div>
+    <title>登录</title>
 
+    <div th:include="mobile/common/css :: css"></div>
 
 
 </head>
-<body id="read" >
-
-</div>
+<body id="read">
 
 <div style="height: 50px;line-height: 50px;text-align: center" class="layui-header header header-doc  layui-bg-cyan">
 
-    <div style="float: left;margin-left: 10px">
+    <div style="width:10%;float: left;margin-left: 10px">
         <a href="javascript:history.go(-1)">
-            <i style="font-size: 20px;color: #92B8B1;" class="layui-icon">&#xe65c;</i></a>
+            <i style="font-size: 20px;color: #fff;" class="layui-icon">&#xe65c;</i></a>
     </div>
-    <b class="layui-icon">登录|注册</b>
-    <div style="float: right;margin-right: 10px"><a href="/">
-        <i style="font-size: 20px;color: #92B8B1;" class="layui-icon">&#xe68e;</i>
+    <b class="layui-icon">登录</b>
+    <div style="width:10%;float: right;margin-right: 10px"><a href="/">
+        <i style="font-size: 20px;color: #fff;" class="layui-icon">&#xe68e;</i>
     </a>
     </div>
 </div>
-
-<form style="height: 500px;margin-top: 50px" class="layui-form" action="">
+<form lay-filter="loginForm" id="form1" style="height: 500px;padding-top:30px;padding-right: 20px" class="layui-form" action="">
     <input type="hidden" id="bookIdHidden" name="bookId" th:value="${bookId}"/>
     <div class="layui-form-item">
-        <label class="layui-form-label">登录名</label>
-        <div class="layui-input-block">
-            <input type="text" id="loginName" name="loginName" required  lay-verify="required" placeholder="请输入登录名" autocomplete="off" class="layui-input">
+        <label class="layui-form-label">手机号码</label>
+        <div class="layui-input-inline">
+            <input name="txtUName" type="text" id="txtUName"  placeholder="请输入手机号"
+                   autocomplete="off" class="layui-input">
         </div>
     </div>
     <div class="layui-form-item">
         <label class="layui-form-label">密码</label>
         <div class="layui-input-inline">
-            <input id="password" type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
+            <input name="txtPassword" type="password" id="txtPassword"  placeholder="请输入密码"
+                   autocomplete="off" class="layui-input">
         </div>
-        <div class="layui-form-mid layui-word-aux">如果登录名不存在，则直接注册！</div>
+
     </div>
     <div class="layui-form-item">
         <div class="layui-input-block">
-            <button class="layui-btn" lay-submit lay-filter="formDemo">登录|注册</button>
+            <input id="autoLogin" type="checkbox" lay-skin="primary" title="下次自动登录">
+        </div>
+    </div>
+    <div class="layui-form-item">
+        <div class="layui-input-block">
+            <input type="button" value="登录" id="btnLogin" class="layui-btn" />
             <button type="reset" class="layui-btn layui-btn-primary">重置</button>
         </div>
     </div>
 </form>
 
 
-<div th:replace="common/footer :: footer">
+<div th:replace="mobile/common/footer :: footer">
 </div>
-
-<a name="buttom"></a>
 </body>
-<div th:replace="common/js :: js"></div>
-
-<script>
-    $.get("/book/addVisit",{"bookId":$("#bookIdHidden").val()},function(){});
-
-</script>
-
-<script>
-    //Demo
-    layui.use('form', function(){
-        var form = layui.form;
-
-        //监听提交
-        form.on('submit(formDemo)', function(){
-            $.post("/user/loginOrRegist",{"bookId":$("#bookIdHidden").val(),"loginName":$("#loginName").val(),"password":$("#password").val()},function (data) {
-                if(data.code == 1 || data.code == 2){
-                    localStorage.setItem("token",data.token);
-                    layer.alert(data.desc);
-                    setTimeout(function () {
-                        var bookId = $("#bookIdHidden").val();
-                        if(bookId){
-                            //加入书架
-                            window.location.href="/book/"+bookId+".html";
-                        }else{
-                            //我的书架
-                            window.location.href="/book/search?token="+data.token;
-                        }
-                    },3000)
-
-                }else{
-                    layer.alert(data.desc);
-                }
-            });
-            return false;
-        });
-    });
-</script>
-<script>
-
-
-
-    function toMyCollect(){
-        var token = localStorage.getItem("token");
-        if(token) {
-            window.location.href = "/book/search?token=" + token;
-        }else{
-            window.location.href = "/user/login.html";
-        }
+<div th:replace="mobile/common/js :: js">
+</div>
+<script type="text/javascript">
+    $("#form1").css("min-height",($(window).height() - 140)+"px")
+    if(localStorage.getItem("autoLogin")==1){
+        $("#autoLogin").prop("checked",'true');
+        layui.form.render('checkbox','loginForm');
+    }else{
+        $("#autoLogin").removeAttr("checked");
     }
+    $("#btnLogin").click(function () {
+        var username = $("#txtUName").val();
+        if(username.isBlank()){
+            layer.alert("手机号不能为空！");
+            return;
+        }
+        if(!username.isPhone()){
+            layer.alert("手机号格式不正确！");
+            return;
+        }
+        var password = $("#txtPassword").val();
+        if(password.isBlank()){
+            layer.alert("密码不能为空！");
+            return;
+        }
+        $.ajax({
+            type: "POST",
+            url: "/user/login",
+            data: {"username": username, "password": password},
+            dataType: "json",
+            success: function (data) {
+                if (data.code == 200) {
+                    if($("#autoLogin").is(':checked')){
+                        $.cookie('Authorization', data.data.token, { expires: 7 ,path: '/'  });
+                        localStorage.setItem("autoLogin","1");
+                    }else {
+                        $.cookie('Authorization', data.data.token,{ path: '/'  });
+                        localStorage.setItem("autoLogin","0");
+                    }
+                    var orginUrl = getSearchString("originUrl");
+                    window.location.href = orginUrl == undefined || orginUrl.isBlank() ? "/" : orginUrl;
+                } else {
+                    layer.alert(data.msg);
+                }
+
+            },
+            error: function () {
+                layer.alert('网络异常');
+            }
+        })
+
+    })
 </script>
 
 
+
 </html>
\ No newline at end of file
diff --git a/novel-front/src/main/resources/templates/mobile/user/register.html b/novel-front/src/main/resources/templates/mobile/user/register.html
new file mode 100644
index 0000000..343606d
--- /dev/null
+++ b/novel-front/src/main/resources/templates/mobile/user/register.html
@@ -0,0 +1,122 @@
+<!DOCTYPE html>
+<html lang="en">
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+    <title>注册</title>
+
+    <div th:include="mobile/common/css :: css"></div>
+
+
+</head>
+<body id="read">
+
+<div style="height: 50px;line-height: 50px;text-align: center" class="layui-header header header-doc  layui-bg-cyan">
+
+    <div style="width:10%;float: left;margin-left: 10px">
+        <a href="javascript:history.go(-1)">
+            <i style="font-size: 20px;color: #fff;" class="layui-icon">&#xe65c;</i></a>
+    </div>
+    <b class="layui-icon">注册</b>
+    <div style="width:10%;float: right;margin-right: 10px"><a href="/">
+        <i style="font-size: 20px;color: #fff;" class="layui-icon">&#xe68e;</i>
+    </a>
+    </div>
+</div>
+<form lay-filter="loginForm" id="form1" style="height: 500px;padding-top:30px;padding-right: 20px" class="layui-form" action="">
+    <input type="hidden" id="bookIdHidden" name="bookId" th:value="${bookId}"/>
+
+    <div class="layui-form-item">
+        <label class="layui-form-label">手机号码</label>
+        <div class="layui-input-inline">
+            <input name="txtUName" type="text" id="txtUName"  placeholder="请输入手机号"
+                   autocomplete="off" class="layui-input">
+        </div>
+    </div>
+    <div class="layui-form-item">
+        <label class="layui-form-label">密码</label>
+        <div class="layui-input-inline">
+            <input name="txtPassword" type="password" id="txtPassword"  placeholder="请输入密码"
+                   autocomplete="off" class="layui-input">
+        </div>
+
+    </div>
+    <div class="layui-form-item ">
+        <label class="layui-form-label">验证码</label>
+        <div class="layui-input-inline">
+            <input name="txtUName" type="text" id="TxtChkCode"  placeholder="请输入验证码"
+                   autocomplete="off" class="layui-input">
+        </div>
+        <div class="layui-input-inline"><img
+                style="border: 1px solid #eee" class="code_pic" src="" id="chkd"
+                onclick="getVerify(this);"/></div>
+    </div>
+    <div class="layui-form-item">
+        <div class="layui-input-block">
+            <input type="button" value="注册" id="btnRegister" class="layui-btn" />
+            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
+        </div>
+    </div>
+</form>
+
+
+<div th:replace="mobile/common/footer :: footer">
+</div>
+</body>
+<div th:replace="mobile/common/js :: js">
+</div>
+<script type="text/javascript">
+    $("#form1").css("min-height",($(window).height() - 140)+"px")
+    $("#chkd").click();
+   
+    $("#btnRegister").click(function () {
+        var username = $("#txtUName").val();
+        if (username.isBlank()) {
+            layer.alert("手机号不能为空！");
+            return;
+        }
+        if (!username.isPhone()) {
+            layer.alert("手机号格式不正确！");
+            return;
+        }
+        var password = $("#txtPassword").val();
+        if (password.isBlank()) {
+            layer.alert("密码不能为空！");
+            return;
+        }
+        var velCode = $("#TxtChkCode").val();
+        if (velCode.isBlank()) {
+            layer.alert("验证码不能为空！");
+            return;
+        }
+        $.ajax({
+            type: "POST",
+            url: "/user/register",
+            data: {"username": username, "password": password,"velCode":velCode},
+            dataType: "json",
+            success: function (data) {
+                if (data.code == 200) {
+                    $.cookie('Authorization', data.data.token, {path: '/'});
+                    window.location.href="/";
+                } else {
+                    layer.alert(data.msg);
+                }
+
+            },
+            error: function () {
+                layer.alert('网络异常');
+            }
+        })
+
+    })
+    //获取验证码
+    function getVerify(obj) {
+        obj.src = "/file/getVerify?" + Math.random();
+    }
+</script>
+
+
+
+</html>
\ No newline at end of file
diff --git a/novel-front/src/main/resources/templates/mobile/user/userinfo.html b/novel-front/src/main/resources/templates/mobile/user/userinfo.html
new file mode 100644
index 0000000..b0d198e
--- /dev/null
+++ b/novel-front/src/main/resources/templates/mobile/user/userinfo.html
@@ -0,0 +1,221 @@
+<!DOCTYPE html>
+<html>
+<head>
+
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+
+
+    <title th:text="${application.website.name}"></title>
+
+    <meta name="keywords" th:content="${application.website.keyword}"/>
+    <meta name="description"
+          th:content="${application.website.description}"/>
+
+
+    <div th:include="mobile/common/css :: css"></div>
+
+    <style>
+
+        .line-limit-length {
+
+            overflow: hidden;
+
+            text-overflow: ellipsis;
+
+            white-space: nowrap;
+
+        }
+
+        .layui-nav .layui-nav-item {
+            position: relative;
+            display: inline-block;
+            vertical-align: middle;
+            line-height: 50px;
+        }
+
+        body ul.layui-nav li.layui-nav-item a {
+            display: block;
+            transition: all .3s;
+            -webkit-transition: all .3s;
+        }
+
+        .user_link{
+            position: relative;
+            display: inline-block;
+            vertical-align: middle;
+            line-height: 50px;
+            padding: 0 20px;
+            color: #fff;
+            float: right;
+        }
+        .user_link a{
+
+            color: #fff;
+        }
+        .user_big_head {
+            width: 80px;
+            height: 80px;
+            border-radius: 50%;
+        }
+
+    </style>
+
+
+</head>
+<body>
+<div id="body">
+
+<!-- 你的HTML代码 -->
+<div style="height: 50px;line-height: 50px;text-align: center" class="layui-header header header-doc  layui-bg-cyan">
+
+    <div style="width:10%;float: left;margin-left: 10px">
+        <a href="javascript:history.go(-1)">
+            <i style="font-size: 20px;color: #fff;" class="layui-icon">&#xe65c;</i></a>
+    </div>
+    <b class="layui-icon">用户中心</b>
+    <div style="width:10%;float: right;margin-right: 10px"><a href="/">
+        <i style="font-size: 20px;color: #fff;" class="layui-icon">&#xe68e;</i>
+    </a>
+    </div>
+</div>
+
+    <div class="layui-colla-item">
+
+        <div class="layui-container" style="padding: 50px;text-align: center">
+            <img id="imgLogo" class="user_big_head" src="/images/man.png">
+            <div id="my_name" style="padding: 10px;font-size: 18px">梦入神机</div>
+            <div style="padding: 5px;">账户余额：<span id="accountBalance" style="color: #f80">3000</span> 屋币</div>
+
+        </div>
+    </div>
+
+
+
+<div style="clear: both"></div>
+<a
+        href="/pay/index.html">
+
+    <blockquote class="layui-elem-quote" style="border-left:0px;margin-bottom: 0px;text-align: left;padding:15px 10px;color: #000;background-color:#fafafa;font-size: 18px">
+        <i style="font-size: 25px;padding-right: 20px;color:#f80"
+           class="layui-icon">&#xe659;</i>
+        充值
+        <div style="float: right; margin-right: 20px"><i style="font-size: 14px;color:#666"
+                                                         class="layui-icon">&#xe602;</i>
+        </div>
+    </blockquote>
+</a>
+
+<a
+        href="/user/favorites.html">
+
+    <blockquote class="layui-elem-quote" style="background-color:#fafafa;border-left:0px;margin-bottom: 0px;text-align: left;padding:15px 10px;color: #000;font-size: 18px">
+        <i style="font-size: 25px;padding-right: 20px;color:#f80"
+           class="layui-icon">&#xe705;
+        </i>
+        我的书架
+        <div style="float: right; margin-right: 20px"><i style="font-size: 14px;color:#666"
+                                                         class="layui-icon">&#xe602;</i>
+        </div>
+    </blockquote>
+</a>
+
+<a
+        href="/user/comment.html">
+
+    <blockquote class="layui-elem-quote" style="background-color:#fafafa;border-left:0px;margin-bottom: 0px;text-align: left;padding:15px 10px;color: #000;font-size: 18px">
+        <i style="font-size: 25px;padding-right: 20px;color:#f80"
+           class="layui-icon">&#xe611;
+        </i>
+        我的书评
+        <div style="float: right; margin-right: 20px"><i style="font-size: 14px;color:#666"
+                                                         class="layui-icon">&#xe602;</i>
+        </div>
+    </blockquote>
+</a>
+
+
+<a
+        href="/user/setup.html">
+
+    <blockquote class="layui-elem-quote" style="background-color:#fafafa;border-left:0px;margin-bottom: 0px;text-align: left;padding:15px 10px;color: #000;font-size: 18px">
+        <i style="font-size: 25px;padding-right: 20px;color:#f80"
+           class="layui-icon">&#xe716;
+        </i>
+        账户设置
+        <div style="float: right; margin-right: 20px"><i style="font-size: 14px;color:#666"
+                                                         class="layui-icon">&#xe602;</i>
+        </div>
+    </blockquote>
+</a>
+
+</div>
+
+<div th:replace="mobile/common/footer :: footer">
+</div></body>
+
+<div th:replace="mobile/common/js :: js">
+</div>
+
+
+
+<script>
+    $("#body").css("min-height",($(window).height() - 50)+"px")
+
+    //查询用户信息
+    $.ajax({
+        type: "get",
+        url: "/user/userInfo",
+        data: {},
+        dataType: "json",
+        success: function (data) {
+            if (data.code == 200) {
+                if(data.data.userPhoto){
+                    $("#imgLogo").attr("src",data.data.userPhoto);
+                }
+                if(data.data.nickName){
+                    $("#my_name").html(data.data.nickName);
+                }else{
+                    $("#my_name").html(data.data.username);
+                }
+
+                $("#accountBalance").html(data.data.accountBalance);
+
+            } else if (data.code == 1001) {
+                //未登录
+                location.href = '/user/login.html?originUrl=' + decodeURIComponent(location.href);
+
+            } else {
+                layer.alert(data.msg);
+            }
+
+        },
+        error: function () {
+            layer.alert('网络异常');
+        }
+    })
+
+
+    function moreNewBooks(event) {
+        window.location.href = "/book/book_ranking.html?sortBy=last_index_update_time";
+    }
+
+    function searchBooks() {
+        var keywords = $("#title").val();
+        window.location.href = "/book/book_ranking.html?keyword=" + encodeURI(keywords);
+    }
+
+    function toMyCollect() {
+        var token = localStorage.getItem("token");
+        if (token) {
+            window.location.href = "/book/book_ranking.html?token=" + token;
+        } else {
+            window.location.href = "/user/login.html";
+        }
+    }
+
+</script>
+
+
+</body>
+</html>
\ No newline at end of file