企业网站的建立如何带来询盘,网站开发赚钱,域名不备案能用吗,基本建设程序数据管理平台项目 文章目录 数据管理平台项目业务1-登录验证代码步骤#xff1a; token 技术token的使用代码步骤 axios 请求拦截器语法代码示例 axios响应拦截器优化axios响应结果发布文章-富文本编辑器发布文章-频道列表发布文章-封面设置发布文章-收集并保存内容管理-文章列…数据管理平台项目 文章目录 数据管理平台项目业务1-登录验证代码步骤 token 技术token的使用代码步骤 axios 请求拦截器语法代码示例 axios响应拦截器优化axios响应结果发布文章-富文本编辑器发布文章-频道列表发布文章-封面设置发布文章-收集并保存内容管理-文章列表展示代码示例 内容管理-筛选功能代码示例 内容管理-分页功能内容管理-删除功能内容管理-编辑文章内容管理-编辑-保存文章退出登录 业务1-登录验证 功能 完成验证码登录后端设置验证码默认为246810
代码步骤
在utils/request.js配置 axios 请求基地址提取公共前缀地址配置后axios请求时都会baseURL url。收集手机号码验证数据基于axios调用验证码登录接口使用Bootstrap的Alert警告框反馈结果给用户. ##### 业务代码
在utils/request.js配置 axios 请求基地址提取公共前缀地址配置后axios请求时都会baseURL url。
// axios 公共配置
// 基地址
axios.defaults.baseURL http://geek.itheima.net收集手机号码验证数据
document.querySelector(.btn).addEventListener(click, () {const form document.querySelector(.login-form)const data serialize(form ,{hash: true, empty: true})console.log(data)
基于axios调用验证码登录接口 // 1.3 基于 axios 调用验证码登录接口axios({url: /v1_0/authorizations,method: POST,data}).then(result {console.log(result)// 1.4 使用 Bootstrap 的 Alert 警告框反馈结果给用户// 自己封装好了一个弹框插件直接调用即可myAlert(true,登录成功)}).catch(error {console.dir(error.response.data.message)myAlert(false,error.response.data.message)})
})自己封装好的弹框插件
// 弹窗插件
// 需要先准备 alert 样式相关的 DOM
/*** BS 的 Alert 警告框函数2秒后自动消失* param {*} isSuccess 成功 true失败 false* param {*} msg 提示消息*/
function myAlert(isSuccess, msg) {const myAlert document.querySelector(.alert)myAlert.classList.add(isSuccess ? alert-success : alert-danger)myAlert.innerHTML msgmyAlert.classList.add(show)setTimeout(() {myAlert.classList.remove(isSuccess ? alert-success : alert-danger)myAlert.innerHTML myAlert.classList.remove(show)}, 2000)
}验证码登录流程
输入手机号点击发送验证码。携带手机号调用服务器发送短信验证码接口为此手机号生成验证码记录生成的时间并存在服务器服务器携带手机号验证码调用运营商接口运营商通过基站给指定的手机号发送验证码短信运营商返回结果响应给服务端发送成功服务端在将响应的结果返回给前端根据手机短信填入验证码在此携带手机号验证码调用验证码登录接口服务器接收手机号和验证码与之前用户输入的的记录对比并且判断是否在有效期内。从而得出是否能够登录成功。 token 技术 token访问权限的令牌本质上是一串字符串
创建 在正确的登录后由后端签发并返回。
作用判断是否有登录状态控制访问权限。 token的使用 在登录状态时是否能够访问内容页面
目标1访问权限控制
代码步骤
判断无 token 令牌字符串则强制跳转到登录页·
const token localStorage.getItem(token)
if(!token) {location.href ../login/index.html
}登录成功后保存 token 令牌字符串到本地并跳转到内容列表页面
localStorage.setItem(token,result.data.data.token)
然后通过令牌跳转页面
// 延迟时间跳转,停留提示后
setTimeout(() {
// 登录成功能够通过令牌权限后进行跳转到内容页location.href ../content/index.html},1500)axios 请求拦截器 axios请求拦截器在发起请求之前触发的配置函数对请求参数进行额外的配置。
语法
问题很多接口都需要携带 token 令牌字符串。
解决在请求拦截器统一设置公共样式headers选项。
axios({//因为我们给axios配置了基地址url: 目标资源路径,headers: {Authorization:Bearer${localStorage.getItem(token)}}
})代码示例
// 添加请求拦截器
axios.interceptors.request.use(function (config) {// 在发送请求之前做些什么// 统一携带 token 令牌字符串在请求头上const token localStorage.getItem(token)// 本地有token的话则在配置对象中配置token令牌权限token (config.headers.Authorization Bearer ${token})return config;}, function (error) {// 对请求错误做些什么return Promise.reject(error);}); axios响应拦截器 axios 响应拦截器响应回到then / catch之前 触发的拦截函数对响应结果统一处理 例如身份验证失败统一做出判断并处理身份验证失败我们就直接就将关闭权限 // 添加响应拦截器
axios.interceptors.response.use(function (response) {// 2xx 范围内的状态码都会触发该函数。// 对响应数据做点什么return response;
}, function (error) {// 超出 2xx 范围的状态码都会触发该函数。// 对响应错误做点什么例如401 身份验证失败情况做出处理console.dir(error)if (error?.response?.status 401) {alert(身份验证失败请重新登录)localStorage.clear()location.href ../login/index.html}return Promise.reject(error);
});对响应的结果做出处理 优化axios响应结果 axios直接接受服务器返回的响应结果 // 2xx 范围内的状态码都会触发该函数。// 对响应数据做点什么.例如直接返回服务器的响应结果对象const result response.datareturn result;
这样result response.data 我们再写的时候可以省略这部分。 发布文章-富文本编辑器 富文本带样式多格式的文本在前端一般使用标签配合内联样式实现。
准备HTML标签结构 !-- 富文本编辑器位置 --div ideditor—wrapperdiv idtoolbar-container!-- 工具栏 --/divdiv ideditor-container!-- 编辑器 --/div/div!-- 记录富文本内容-用于表单收集 --textarea namecontent classpublish-content hidden/textarea
引入对应的js和css的插件在准备相应的样式根据文档引入核心的js代码
文档https://www.wangeditor.com/ 发布文章-频道列表 步骤
获取频道列表数据展示到下拉菜单中
代码示例
// 1.1 获取频道列表数据
async function setChannleList() {const res await axios({url: /v1_0/channels})console.log(res)// 1.2 展示到下拉菜单中const htmlStr option value selected请选择文章频道/option res.data.channels.map(item option value${item.id}${item.name}/option).join()console.log(htmlStr)document.querySelector(.form-select).innerHTML htmlStr
}
setChannleList()
事先考虑是否需要复用需要则使用函数配和async和await来修饰。 发布文章-封面设置 步骤
准备标签结构样式选择文件并保存在FormData单独好上传图片并得到图片url地址回显并切换img标签展示隐藏 号 上传标签
注意图片地址临时存储在img标签上并未和文章关联保存。 // 2.1 准备标签结构和样式
// 2.2 选择文件并保存在 FormData
document.querySelector(.img-file).addEventListener(change,async e {const file e.target.files[0]const fd new FormData()fd.append(image,file)// 2.3 单独上传图片并得到图片 URL 网址const res await axios({url: /v1_0/upload,method: POST,data: fd})console.log(res)// 2.4 回显并切换 img 标签展示隐藏 号上传标签const imgURL res.data.urldocument.querySelector(.rounded).src imgURL// 显示图片添加showdocument.querySelector(.rounded).classList.add(show)// 隐藏基础的 号 上传标签 添加hide类document.querySelector(.place).classList.add(hide)
})// 优化点击 img 可以重新切换封面
// 思路img 点击 用 js 方式触发文件选择元素 click 事件方法
document.querySelector(.rounded ).addEventListener(click, () {// 调用click()方法可以模拟用户触发该类绑定的点击事件。通过调用click()方法就相当于以编程方式触发了与该类相关联的点击事件。document.querySelector(.img-file).click()
}) 发布文章-收集并保存 步骤
基于 form-serialize 插件收集表单数据对象基于 axios 提交到服务器保存调用 Alert 警告框反馈结果给用户置表单并跳转到列表页 // 3.1 基于 form-serialize 插件收集表单数据对象
document.querySelector(.send).addEventListener(click, async e {const form document.querySelector(.art-form)const data serialize(form, { hash: true, empty: true })//发布文章的时候才不需要 id 属性所以可以删除掉id 为了后续做编辑使用delete data.idconsole.log(data)// 自己收集封面图片地址并保存到 data 对象中data.cover {type: 1,images: [document.querySelector(.rounded).src]}// 3.2 基于 axios 提交到服务器保存try {const result await axios({url: /v1_0/mp/articles,method: POST,data})// 3.3 调用 Alert 警告框反馈结果给用户myAlert(true, 发布成功)// 3.4 重置表单并跳转到列表页form.reset()// 封面需要手动重置document.querySelector(.rounded).src document.querySelector(.rounded).classList.remove(show)document.querySelector(.place).classList.remove(hide)// 富文本编辑器editor.setHtml()setTimeout(() {location.href ../content/index.html},1500)} catch(error) {myAlert(false, error.response.data.message)}
}) 内容管理-文章列表展示 实现步骤
* 1.1 准备查询参数对象
* 1.2 获取文章列表数据
* 1.3 展示到指定的标签结构中
注意查询参数不能封装到函数里面因为他不是永远固定的然后再将获取和渲染封装到函数里面后面很多操作都需要使用到获取和渲染方便我们操作下次直接调用函数即可。
代码示例
// 1.1 准备查询参数对象
const queryObj {status: , //文章的状态 1-待审核 2-通过审核 空字符串全部channel_id: , //文章频道 id 空字符串全部page: 1, //当前页码per_page: 2 //当前页面的条数
}
// 1.2 获取文章列表数据
async function setArtileList() {const res await axios({url: /v1_0/mp/articles,params: queryObj})console.log(res)// 1.3 展示到指定的标签结构中const htmlStr res.data.results.map(item trtdimg src${item.cover.type 0 ? https://img2.baidu.com/it/u2640406343,1419332367amp;fm253amp;fmtautoamp;app138amp;fJPEG?w708amp;h500 : item.cover.images[0]} alt/tdtd${item.title}/tdtd${item.status 1 ? span classbadge text-bg-success待审核/span : span classbadge text-bg-primary审核通过/span}/tdtdspan${item.pubdate}/span/tdtdspan${item.read_count}/span/tdtdspan${item.comment_count}/span/tdtdspan${item.like_count}/span/tdtdi classbi bi-pencil-square edit/ii classbi bi-trash3 del/i/td/tr).join()document.querySelector(.art-list).innerHTML htmlStr
}
setArtileList() 内容管理-筛选功能 * 2.1 设置频道列表数据 * 2.2 监听筛选条件改变保存查询信息到查询参数对象 * 2.3 点击筛选时传递查询参数对象到服务器 * 2.4 获取匹配数据覆盖到页面展示
代码示例
// 2.1 设置频道列表数据
async function setChannleList() {const res await axios({url: /v1_0/channels})console.log(res)// 1.2 展示到下拉菜单中 const htmlStr option value selected请选择文章频道/option res.data.channels.map(item option value${item.id}${item.name}/option).join()console.log(htmlStr)document.querySelector(.form-select).innerHTML htmlStr
}
setChannleList()// 2.2 监听筛选条件改变保存查询信息到查询参数对象
// 筛选状态标记数字 - change 事件 - 绑定到查询参数对象上
document.querySelectorAll(.form-check-input).forEach(radio {radio.addEventListener(change, e {queryObj.status e.target.value})
})
// 筛选频道的 id - change 事件 - 绑定到查询参数对象上
document.querySelector(.form-select).addEventListener(change, e {queryObj.channel_id e.target.value
})// 2.3 点击筛选时传递查询参数对象到服务器
document.querySelector(.sel-btn).addEventListener(click, () {// 2.4 获取匹配数据覆盖到页面展示setArtileList()
}) 内容管理-分页功能 * 3.1 保存并设置文章总条数
* 3.2 点击下一页做临界值判断并切换页码参数并请求最新数据
* 3.3 点击上一页做临界值判断并切换页码参数并请求最新数据
* 3.1 保存并设置文章总条数
let totalCount 0 //保存文章总条数
// 3.1 保存并设置文章总条数const totalStr totalCount res.data.total_count// 将获取到的返回数据个数插入到页面中document.querySelector(.total-count).innerHTML 共${totalStr}条
// 3.1 保存并设置文章总条数// 3.2 点击下一页做临界值判断并切换页码参数并请求最新数据
document.querySelector(.next).addEventListener(click, () {// 当前页码小于最大页码数才能翻页if (queryObj.page Math.ceil(totalCount / queryObj.per_page)) {// 当前页增加queryObj.pagedocument.querySelector(.page-now).innerHTML 第${queryObj.page}页// 调用函数渲染最新数据setArtileList()}
})
// 3.3 点击上一页做临界值判断并切换页码参数并请求最新数据
document.querySelector(.page-link).addEventListener(click, () {// 判断当前页码大于1的时候才能够执行if (queryObj.page 1) {queryObj.page--document.querySelector(.page-now).innerHTML 第${queryObj.page}页// 调用函数渲染最新数据setArtileList()}
})内容管理-删除功能 4.1 关联文章 id 到删除图标4.2 点击删除时获取文章 id4.3 调用删除接口传递文章 id 到服务器4.4 重新获取文章列表并覆盖展示4.5 删除最后一页的最后一条需要自动向前翻页
// 4.1 关联文章 id 到删除图标td data-id${item.id}i classbi bi-pencil-square edit/ii classbi bi-trash3 del/i/td
// 4.2 点击删除时获取文章 id
document.querySelector(.art-list).addEventListener(click,async e {//判断点击的是否为删除元素if (e.target.classList.contains(del)) {const delId e.target.parentNode.dataset.idconsole.log(delId)// 4.3 调用删除接口传递文章 id 到服务器const res await axios({url: /v1_0/mp/articles/${delId},method: DELETE,})// 4.5 删除最后一页的最后一条需要自动向前翻页const children document.querySelector(.art-list).childrenif (children.length 1 queryObj.page ! 1) {queryObj.page--document.querySelector(.page-now).innerHTML 第${queryObj.page}页}// 4.4 重新获取文章列表并覆盖展示setArtileList()}}) 内容管理-编辑文章 \* 4.1 页面跳转传参URL 查询参数方式
* 4.2 发布文章页面接收参数判断共用同一套表单
* 4.3 修改标题和按钮文字
* 4.4 获取文章详情数据并回显表单 //跨页面传参 传递id值// 点击编辑时获取文章 id跳转到发布文章页面传递文章 id 过去(使用事件委托)
document.querySelector(.art-list).addEventListener(click, e {// 判断用户点击的是哪一个标签对象if (e.target.classList.contains(edit)) {// 拿到事件对象父级中的自定义属性 id值const artId e.target.parentNode.dataset.idlocation.href ../publish/index.html?id${artId}}
})
// 4.1 页面跳转传参URL 查询参数方式 立即执行函数自己调用自己防止变量污染
;(function () {// console.log(location.search)//查看查询参数字符串就是?号后面的// 4.2 发布文章页面接收参数判断共用同一套表单const paramsStr location.searchconst params new URLSearchParams(paramsStr) //分隔网址后面的查询参数params.forEach(async (value,key) {// console.log(value,key)// 4.3 修改标题和按钮文字if (key id) {// 当前有要编辑的文章 id 被传入过来document.querySelector(.title span).innerHTML 修改文章document.querySelector(.send).innerHTML 修改// 4.4 获取文章详情数据并回显表单const res await axios({url: /v1_0/mp/articles/${value},})console.log(res)// ***组织我需要的数据对象我后续遍历回显到页面上做铺垫const dataObj {channel_id: res.data.channel_id,title: res.data.title,rounded: res.data.cover.images[0],//封面图content: res.data.content,id: res.data.id}// ***遍历数据对象属性映射到页面元素上快速赋值Object.keys(dataObj).forEach(key {console.log(key)if (key rounded) {// 封面设置if (dataObj[key]) {document.querySelector(.rounded).src dataObj[key]document.querySelector(.rounded).classList.add(show)document.querySelector(.place).classList.add(hide)} } else if (key content) {// 富文本内容editor.setHtml(dataObj[key])} else {// 用数据对象属性名作为标签 name 属性选择器值来找到匹配的标签document.querySelector([name${key}]).value dataObj[key]}})}})})(); 内容管理-编辑-保存文章 * 5.1 判断按钮文字区分业务因为共用一套表单
* 5.2 调用编辑文章接口保存信息到服务器
* 5.3 基于 Alert 反馈结果消息给用户 document.querySelector(.send).addEventListener(click, async e {// 5.1 判断按钮文字区分业务因为共用一套表单if (e.target.innerHTML ! 修改) return// 修改文章逻辑// 5.2 调用编辑文章接口保存信息到服务器try {const form document.querySelector(.art-form)const data serialize(form, { hash: true, empty: true })console.log(data)const res await axios({url: /v1_0/mp/articles/${data.id},method: PUT,data: {...data,cover: {type: document.querySelector(.rounded).src ? 1 : 0,images: [document.querySelector(.rounded).src]}}})console.log(res)myAlert(true,修改文章成功)} catch (error) {myAlert(false,error.response.data.message)}
}) 退出登录 \* 3.1 绑定点击事件
* 3.2 清空本地缓存跳转到登录页面
// 3.1 绑定点击事件
document.querySelector(.quit).addEventListener(click, e {// 3.2 清空本地缓存跳转到登录页面localStorage.clear()location.href ../login/index.html
})
