感觉是时候开始给博客写一个后端了.
一开始在考虑使用多页应用做后端还是单页应用做后端呢. 多页应用的话需要另开一个url做, 可以申请多一个域名或者用现用域名的新的资源路径. 但是我想这个博客也不大, 目前优化过后打包的大小才几十kb, 就干脆写在一个单页应用上好了.
然后我在博客的某一个私密的地方偷偷加了一个登录入口, 如果你找到了欢迎在contact页面联系我hhhhhh. 然后就是在路由上在加一个路由页面了, 这个路由url被看到了也无妨, 没有获得登录令牌的话是没有用处的.
# 那么以下是教程
# 1. 新建路由 修改router
如图, 新建新路由
该路由页面为管理主页面 同时新增子路由用于嵌套路由
(详见 vue-router : nested-routes (opens new window) )
# 2. 先编写主页面设计
还是使用element-ui的组件 作为布局容器, 做路由 aside 为导航栏 main 为子路由
<div class="f">
<el-container class="container">
<el-aside width="70px" class="aside">
<el-menu
default-active="write"
class="el-menu-vertical-demo"
:collapse="true"
:router="true">
<el-menu-item index="write">
<i class="el-icon-document"></i>
<span slot="title">写博客</span>
</el-menu-item>
<el-menu-item index="edit">
<i class="el-icon-setting"></i>
<span slot="title">编辑博客</span>
</el-menu-item>
</el-menu>
</el-aside>
<el-main>
<router-view></router-view>
</el-main>
</el-container>
</div>
效果如图
# 3. 新建博客页面
想的是需要一个实时预览的markdown编辑器. 现在先自己做一个简陋的.
布局一分为二 一边做编辑器 , 一边做预览器 两边各使用<el-card>做容器
<el-row :gutter="10">
<el-col :span="12"></el-col>
<el-col :span="12"></el-col>
</el-row>
左边编辑器暂时使用表单作为编辑器
<el-form class="edit-form">
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="标题">
<el-input v-model="form.title"
placeholder="标题">>
</el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="分类">
<el-input v-model="form.type"
placeholder="分类"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-form-item label="正文">
<el-input type="textarea"
:autosize="{ minRows: 5, maxRows: 10}"
placeholder="请输入内容"
v-model="form.content"></el-input>
</el-form-item>
</el-form>
然后添加监听器侦听form.content的变化 利用原来展示博客的markdown解析器解析内容并实时编译并显示
import HyperDown from 'hyperdown';
const parser = new HyperDown();
export default {
name: 'Write',
data() {
return {
htmlContent: '',
form: {
title: '',
type: '',
content: '',
},
};
},
watch: {
'form.content': function updateView(content) {
this.htmlContent = parser.makeHtml(content);
},
},
}
最后是预览的代码
<el-card class="card view-card" shadow="hover">
<el-scrollbar class="scrollbar" ref="scrollBar">
<div class="view-content">
<h1 v-text="form.title"></h1>
<p v-text="form.type === '' ? '' : '分类: '+ form.type"></p>
<div class="html-content" v-html="htmlContent" v-highlight></div>
</div>
</el-scrollbar>
</el-card>
使用了hightlight.js 作为高亮插件. 与vue 有冲突, 要用的话自行google解决
# 4. 最终效果图
