开发笔记:大事件练习项目分享实现前后端交互

1
2

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

1 // 实现登陆
2 // 1、用户登录
3 // 请求地址：/admin/user/login
4 // 请求方式：post
5 $(‘.input_sub‘).on(‘click‘, function () {
6 // serialize:获取获取指定表单中拥有name属性的表单元素的value值
7 console.log($(‘.login_form‘).serialize())
8 $.ajax({
9 type: ‘post‘,
10 url: itcast.user_login,
11 data: $(‘.login_form‘).serialize(),
12 dataType: ‘json‘,
13 success: function (res) {
14 console.log(res)
15 $(‘.logininfo‘).text(res.msg)
16 if (res.code == 200) {
17 // 将后台返回的token数据存储到本地
18 localStorage.setItem(‘bignews_token_58‘, res.token)
19 $(‘#myModal‘).modal(‘show‘)
20 // hidden.bs.modal:在当前模态框被隐藏之后触发
21 $(‘#myModal‘).on(‘hidden.bs.modal‘, function (e) {
22 location.href = ‘./index.html‘
23 })
24 } else {
25 // alert(res.msg)
26 $(‘#myModal‘).modal(‘show‘)
27 }
28 }
29 })
30 })
31
32 // 单击模态框中的确定，隐藏模态框
33 $(‘.btnconfirm‘).on(‘click‘, function () {
34 $(‘#myModal‘).modal(‘hide‘)
35 })

1 // 这里添加ajax的全局函数的配置
2 $.ajaxSetup({
3 // 每个请求发送之前都会经过beforeSend,可以在这个回调进行请求头的统一设置
4 beforeSend: function (xhr) {
5 let token = localStorage.getItem(‘bignews_token_58‘)
6 if (token) {
7 xhr.setRequestHeader(‘Authorization‘, token)
8 }
9 },
10 // 添加统一的错误处理
11 error: function (xhr, status, error) {
12 console.log(xhr, status, error)
13 if (error == ‘Forbidden‘) {//用户未登录
14 alert(‘请先登录！‘)
15 window.location.href = ‘./login.html‘;//跳转登陆页面
16 };
17 }
18 })

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

// 动态渲染用户信息
// 2、获取用户信息
// 请求地址：/admin/user/info
// 请求方式：get
$.ajax({
url: allSite.user_info,
dataType: ‘json‘,
// beforeSend: function (xhr) {
// xhr.setRequestHeader(‘Authorization‘, localStorage.getItem(‘token_58‘))
// },
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}`)
$(‘.user_center_link>img‘).attr(‘src‘, res.data.userPic)
}
}
})

1 //主页左侧导航栏功能实现
2 $(‘.level01‘).on(‘click‘, function () {
3 $(this).addClass(‘active‘).siblings().removeClass(‘active‘)
4
5 if ($(this).next().hasClass(‘level02‘)) {
6 $(this).next().slideToggle()
7 $(this).find(‘b‘).toggleClass(‘rotate0‘)
8 } else {
9 $(‘.level02‘).slideUp()
10 $(‘.level02>li‘).removeClass(‘active‘)
11 }
12 })
13
14 $(‘.level02>li‘).on(‘click‘, function () {
15 $(this).addClass(‘active‘).siblings().removeClass(‘active‘)
16 })