项目综合练习 --- 数据管理后台
1. 公共配置
1. 公共前缀地址
utils/request.js
axios.defaults.baseURL = "http://geek.itheima.net"
2. 警示框插件
utils/alert.js
function myAlert(isSuccess,message) {
const myAlert = document.querySelector(".alert")
myAlert.classList.add(isSuccess ? "alert-success" : "alert-danger")
myAlert.innerHTML = message
myAlert.classList.add("show")
setTimeout(()=>{
myAlert.classList.remove(isSuccess ? "alert-success" : "alert-danger")
myAlert.innerHTML = ""
myAlert.classList.remove("show")
},2000)
}
3. 判断登录状态
除登录页面其他页面都要导入 auth.js 来校验登录状态
utils/auth.js
const token = localStorage.getItem('token')
if (!token){
// 强制跳转 登录页面
location.href = '../login/index.html'
}
4. 添加请求拦截器,配置请求头
utils/request.js
// 添加请求拦截器,配置请求头
axios.interceptors.request.use(function (config) {
// 每次发送请求,携带令牌在请求头中
const token = localStorage.getItem('token')
token && (config.headers.Authorization = `Bearer ${localStorage.getItem('token')}`)
return config
}, function (error) {
return Promise.reject(error)
})
5. 添加响应拦截器,处理错误
对身份验证失败,统一判断并处理
utils/request.js
// 添加请求拦截器,配置请求头
axios.interceptors.response.use(function (response) {
// 2xx 状态码的请求会触发这个函数
// 可以将响应数据对象在这里取出来,将来axios请求成功的result对象就是这里取出来的数据对象
const result = response.data
return result
}, function (error) {
// ?.response 是可选链式操作符,当 error 有值才 调用.response
if (error?.response?.status === 401){
alert('登录状态过期,请重新登录')
localStorage.clear()
location.href = "../login/index.html"
}
return Promise.reject(error)
})
2. 登录
1. 布局
page/login/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数据管理后台</title>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.3/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="./index.css">
</head>
<body>
<!-- 警告框 -->
<div class="alert info-box">
</div>
<!-- 登录页面 -->
<div class="login-wrap">
<h2 class="title">数据管理后台</h2>
<form class="login-form">
<div class="message">
<input type="text" name="mobile" placeholder="请输入手机号" value="13888888888">
<input type="text" name="code" placeholder="默认验证码246810" value="246810">
</div>
<button type="button" class="btn btn-primary">提交</button>
</form>
</div>
<!-- 引入axios.js -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- 引入bootstrap.js -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.3/js/bootstrap.min.js"></script>
<!-- 快速收集 from 数据的插件 -->
<script src="https://cdn.jsdelivr.net/npm/form-serialize@0.7.2/index.min.js"></script>
<!-- 公共前缀地址 -->
<script src="../../utils/request.js"></script>
<!-- alert.js -->
<script src="../../utils/alert.js"></script>
<!-- 核心逻辑,放在最下面 -->
<script src="./index.js"></script>
</body>
</html>
page/login/index.css
body{
background-color: aqua;
}
.login-wrap{
width: 400px;
height: 250px;
background-color: white;
text-align: center;
margin: 220px auto;
}
.info-box{
margin: 0 auto;
}
.login-wrap .message input{
width: 360px;
height: 35px;
display: block;
margin: 30px auto;
}
.login-wrap .login-form .btn-primary{
width: 360px;
}
.info-box .message-toast{
position: absolute;
top: 120px;
left: 360px;
z-index: 10;
}
2. 验证码校验
page/login/index.js
/*
* 功能一: 手机号验证码登录
* */
document.querySelector(".btn").addEventListener("click", () => {
// 1. 使用 form-serialize 收集 Form 表单中的手机号和验证码的输入数据
const loginForm = document.querySelector(".login-form")
const loginObj = serialize(loginForm, {hash: true, empty: true})
// 将手机号和验证码提交到后台验证
axios({
url: "/v1_0/authorizations",
method: "post",
data: loginObj
}).then(result => {
if (result.status === 201) {
// 将服务器返回的 token 保存在 localstorage 中
localStorage.setItem('token', result.data.data.token)
// 请求成功,使用 alert 提示信息
myAlert(true, "登录成功")
// 延时跳转
setTimeout(()=>{
// 跳转至内容列表页
location.href = "../content/index.html"
},1500)
}
}).catch(error => {
// 请求失败,使用 alert 提示信息
myAlert(false, error.message.data.message)
})
})
3. 个人信息
utils/auth.js
// 获取个人信息
axios({
url: '/v1_0/user/profile'
}).then(result => {
if (result.status === 200) {
const username = result.data.data.name
document.querySelector('.nick-name').innerHTML = username
}
})
4. 首页
1. 布局
page/content/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数据管理后台</title>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.3/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="./index.css">
<style>
.page{
display: flex;
}
.page .menu{
width: 260px;
height: 910px;
background-color: midnightblue;
color: white;
margin-right: 1400px;
}
.page .content .top{
display: flex;
}
.page .content .top .nick-name{
margin-right: 30px;
}
</style>
</head>
<body>
<div class="page">
<!-- 左边菜单栏 -->
<div class="menu">
<div class="content">
<h2>数据管理后台</h2>
<div class="item">
<div>内容管理</div>
<div>发布文章</div>
</div>
</div>
</div>
<!-- 右边内容区 -->
<div class="content">
<div class="top">
<div class="nick-name"></div>
<div>退出</div>
</div>
<div class="content">
</div>
</div>
</div>
<!-- 引入axios.js -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- 引入bootstrap.js -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.3/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/form-serialize@0.7.2/index.min.js"></script>
<!-- 快速收集 from 数据的插件 -->
<!-- 公共前缀地址 -->
<script src="../../utils/request.js"></script>
<!-- alert.js -->
<script src="../../utils/alert.js"></script>
<!-- 校验登录状态 -->
<script src="../../utils/auth.js"></script>
<!-- 核心逻辑,放在最下面 -->
<script src="./index.js"></script>
</body>
</html>
2. 集成富文本编辑器
1. 官方网址
https://www.wangeditor.com/
2. 引入 wangEditor 插件
<link href="https://cdn.bootcdn.net/ajax/libs/wangeditor5/5.1.23/css/style.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/wangeditor5/5.1.23/index.min.js"></script>
3. 简单使用
1. DOM 节点
<div id="editor—wrapper">
<div id="toolbar-container"><!-- 工具栏 --></div>
<div id="editor-container"><!-- 编辑器 --></div>
</div>
2. utils/editor.js
// 创建编辑器和工具栏的函数
const { createEditor, createToolbar } = window.wangEditor
// 编辑器的配置对象
const editorConfig = {
// 文本域中的提示文字
placeholder: 'Type here...',
// 编辑器内容变化时的回调函数
onChange(editor) {
// 编辑器中富文本输入的内容
const html = editor.getHtml()
// 为了后续快速收集整个表单的内容,将富文本的内容同步给隐藏的 textarea 标签中
document.querySelector(".publish-content").value = html
}
}
// 创建编辑器
const editor = createEditor({
// 编辑器生成的位置
selector: '#editor-container',
// 输入框的默认内容
html: '<p><br></p>',
// 配置项
config: editorConfig,
// default 全部模式,simple 简洁模式
mode: 'default', // or 'simple'
})
// 工具栏配置对象
const toolbarConfig = {}
// 创建工具栏
const toolbar = createToolbar({
// 为指定的编辑器创建工具栏
editor,
// 工具栏生成的位置
selector: '#toolbar-container',
config: toolbarConfig,
// default 全部模式,simple 简洁模式
mode: 'default', // or 'simple'
})
python防脱发技巧
浙公网安备 33010602011771号