2020-12-10

## 大事件后台管理项目实现过程 第一天

一个纯前端项目来实现前台页面的交互

目标

理解什么叫纯前端项目
回顾ajax发起请求和接收响应
回顾模板模板引擎实现数据的动态渲染
掌握token实现转态保持的前台页面的实现过程
进一步的掌握和体会前台页面的交互，理解前台页面的处理流程
进一步的掌握ajax的其他使用方式

搭建后台环境

参阅笔记中的01-数据导入和服务器开启.md

要记得启动服务器

模态框的添加

相当于弹出框，可以取代alert进行用户提示
来自于bootstrap框架

<!-- 模态框做为body的直接子元素 -->（不然没有效果）
<div class="modal fade" id="myModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                                                                                  aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">友情提示</h4>
            </div>
            <div class="modal-body">
                <p class="logininfo">One fine body&hellip;</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary btnconfirm">确定</button>
            </div>
        </div>
    </div>
</div>

细节：模态框一定要做为body的直接子元素

http模块的封装

项目中需要引进的接口中服务器的资源地址比较多我们可以把他门封装起来比较方便需要时引入即可

(function (w) {
  var baseURL = 'http://127.0.0.1:8080/api/v1'
  w.itcast = {
    // 定义基准路径，所谓基准路径就是资源url前面那一坨
    baseURL: baseURL,//基地址
    user_login: baseURL + '/admin/user/login',//用户登录
    user_info: baseURL + '/admin/user/info',//用户信息
    user_detail: baseURL + '/admin/user/detail',//用户详情
    user_edit: baseURL + '/admin/user/edit',//用户编辑
    category_list: baseURL + '/admin/category/list',//文章类别查询
    category_add: baseURL + '/admin/category/add',//文章类别新增
    category_search: baseURL + '/admin/category/search',//文章类别搜索
    category_edit: baseURL + '/admin/category/edit',//文章类别编辑
    category_delete: baseURL + '/admin/category/delete',//文章类别删除
    article_query: baseURL + '/admin/article/query',//文章搜索
    article_publish: baseURL + '/admin/article/publish',//文章发布
    article_search: baseURL + '/admin/article/search',//文章信息查询
    article_edit: baseURL + '/admin/article/edit',//文章编辑
    article_delete: baseURL + '/admin/article/delete',//文章删除
    comment_search: baseURL + '/admin/comment/search',//文章评论列表
    comment_pass: baseURL + '/admin/comment/pass',//文章评论通过
    comment_reject: baseURL + '/admin/comment/reject',//文章评论不通过
    comment_delete: baseURL + '/admin/comment/delete',//文章评论删除
  }
})(window)

登录

admin>login.html admin>js>login.js
为按钮绑定事件
发起ajax请求

//实现登录
//用户登录
// 请求地址：/admin/user/login
// 请求方式：post
$('.input_sub').on('click', function () {
//serialiez:获取指定表单中拥有name属性的表单元素的value值（不能获取图片文件等name 的vuale值）
console.log($(".login_form").serialize())
$.ajax({
type:"post",
url:itcast.user_login,
data:$(".login_form").serialize()，
dataType:"json",
success:function(res){
consloe.log(res)
//页面上显示登录成功或失败
   $('.logininfo').text(res.msg)
if(res.code==200){
//将后台返回的token数据存储到本地
localStorage.setItem("bignews_token_58",res.token)
//模块框显示
 $('#myModal').modal('show')
  // hidden.bs.modal:在当前模态框被隐藏之后触发  $('#myModal').on('hidden.bs.modal', function (e) {
 location.href = './index.html'
                })
}else{
//模块框显示
 $('#myModal').modal('show')
}
}
})
//单击模态框中的确认，隐藏模态框
$('.btnconfirm').on('click', function () {
    $('#myModal').modal('hide')
})
}

添加ajax的全局函数

// 这里添加ajax的全局函数的配置

$.ajaxSetup({
//每一个请求发送之前都会经过beforeSend，可以在这个回调进行请求头的统一设置
beforeSend: function (xhr) {
        let token = localStorage.getItem('bignews_token_58')
        if (token) {
            xhr.setRequestHeader('Authorization', token)
        }
    },
    // 添加统一的错误处理
    error: function (xhr, status, error) {
        console.log(xhr, status, error)
        if (error == 'Forbidden') {//用户未登录
            alert('请先登录！')
            window.location.href = './login.html';//跳转登陆页面
        };
    }
})

细节
将登录按钮的type属性从submit修改为button因为submit会有默认值
参数获取不到，我们需要人为设置表单元素name，值一定要按照后台接口–400
请求时需要给url设置完整路径，所以需要在前面拼接http://localhost:8080/api/v1
请求没错，又没有报错，重启服务器

token的本地存储和传递

在登录成功之后将token存储到本地
后续请求传递token
为简化操作，使用$.ajaxSetup进行统一的处理

// 将后台返回的token数据存储到本地
localStorage.setItem('bignews_token_58', res.token)

ajax全局函数的添加

// 这里添加ajax的全局函数的配置
// 所有请求都会经过的函数
$.ajaxSetup({
    // 每个请求发送之前都会经过beforeSend,可以在这个回调进行请求头的统一设置
    beforeSend: function (xhr) {
        let token = localStorage.getItem('bignews_token_58')
        if (token) {
            xhr.setRequestHeader('Authorization', token)
        }
    },
    // 添加统一的错误处理
    error: function (xhr, status, error) {
        console.log(xhr, status, error)
        if (error == 'Forbidden') {//用户未登录
            alert('请先登录！')
            window.location.href = './login.html';//跳转登陆页面
        };
    }
})

首页

用户信息的动态渲染–token
首页主体内容页面的 展示–iframe
左侧菜单的功处理–jq
顶部栏的个人中心和退出

用户信息的动态渲染

// 动态渲染用户信息
// 2、获取用户信息
// 请求地址：/admin/user/info
// 请求方式：get
$.ajax({
url:itcast.user_info,
dataType:"json",
success:function(res){
console.log(res)
if(res.code==200){
//进行页面渲染
$(".user_info>img").attr("src",res.data.userPic）
$(".user_info>span").html(`欢迎  ${res.data.nickname}`)
}
}
})

首页主体内容页面的展示

使用iframe浮动框架，页称为页中页
使用方式
1添加浮动框架，为浮动框架设置name属性
2设置超链接的target属性值为iframe的name属性值

<!-- 右侧主体内容 -->
<div class="main" id="main_body">
    <!-- 添加一个浮动框架 -->
    <iframe class="myframe" src="./main_count.html" frameborder="0" name='main_frame'></iframe>
    -------------------------------------------------
<div class="level01 active">
    <a href="./main_count.html" target="main_frame">
        <i class="iconfont icon-yidiandiantubiao04"></i>
        <span>首页</span>
    </a>
</div>
</div>

左侧菜单的功能

使用jq来实现菜单的展开和合并

//实现左侧菜单的展开和合并
$(".level02).on("click",function()
{
    //排他法实现类名的天极爱
 $(this).addClass('active').siblings().removeClass('active')
    // 判断当前被单击的菜单项的下一个兄弟元素是否有level02样式，如果是说明单击了文章管理，那么就要让子项展开
if($(this).next().hasClass("level02")){
 slideToggle:展开和合并的切换
$(this).next().slideToggle()
}else{
//不管之前的菜单是否展开，都收起来
$(".level02").slideUp()
//清除之前子项可能添加的active
$('.level02>li').removeClass('active')
}
//单击子项，让子项添加active样式
// 单击子项，让子项添加active样式
$('.level02>li').on('click', function () {
    $(this).addClass('active').siblings().removeClass('active')
})
})

顶部栏的个人中心

单击顶部的个人中心需要跳转到个人中心页

主要原理是当点击顶部的个人中心是让左侧的个人中心进行点击一次在html处添加οnclick=’$("#user").onclick()’

<a href="./user.html" target="main_frame" onclick='$("#user").click()'>个人中心</a>

退出

删除之前存储的token
重新跳转到登录页面

//退出
$(".logout").on("click",function(){
// 清除token
localStorage.removeItem('bignews_token_58')
location.href="./login.html"
}