Vue搭建个人博客概况
胡话
神说，老明明要有一个个人博客，于是便有了这个blog，来检验这段时间的学习成果
方案
- 前端：使用Vue.js的服务端渲染（SSR）框架Nuxt，SSR对于个人博客的意义就是能让搜索引擎搜索到你的文章，Nuxt还有优点就是是减少配置成本，且框架自动生成路由，无需自己配置。
- UI：懒惰是一种美德（借口），我选择Element.UI。
- 后台：理论上作为一个前端崽应该用Node.js的，但刚好Pyhoarm打开了，且之前就搭好了flask的环境，所以能最快地完成我的想法，我就用了python的flask框架了。
- 数据库：暂时没加，迟点应该是会用SQlite的，毕竟能嵌入python，比MySQL方便点
- 文章：用markdown写，然后通过python后台转html，前端请求获取文章
前端
1、安装Nuxt
先通过下面代码来安装vue脚手架
npm install -g vue-cli
为了便于大家快速使用，Nuxt.js提供了一个 starter 模板。
打开一个空文件夹
运行:
vue init nuxt-community/starter-template <project-name> //<project-name>自己定义
安装依赖:
npm install
有可能会因为prettier升级报缺少模块的错:
npm install prettier@~1.12.0 --save //安装之前的版本
然后就可以运行我们的Nuxt模板了:
npm run dev
2、动态路由配合axios获取文章
nuxt的动态路由是需要下横线_开头的
例如我在home.vue里的代码是这样：
<div v-for="(article,index) in articles" :key="index">
<nuxt-link class="link" :to="/articles/+index">{{article.title}}</nuxt-link>
</div>
那么在home.vue同级目录articles里的_id.vue代码则是如此：
let _id = this.$route.params.id; //获取传过来的参数
上述代码可以获取home.vue传过来的index
配合axios可以写成这样：
methods:{
request(){
axios.defaults.baseURL = 'http://127.0.0.1:5000/'; //基础接口地址
axios.create();
let _this = this;
let _id = this.$route.params.id; //获取传过来的参数
console.log(_id);
axios.get('/articles/'+ _id) //动态接口
.then(response =>
( _this.htmlContent =
_this.htmlContent
+ response.data
))
.catch(error => (
console.log(error)
)
);
}
},
mounted(){ //此处是自启动request函数
this.request();
}
如果后台和前端不是同一个域名，就要处理跨域问题，我是在后台配置跨域的，前端也可以，大家可以去试试
后端开发
python的flask框架提供动态接口获取文章
另起一篇讲吧
部署
先挖好坑
后续计划
- 完善后台，增加markdown文件上传
- 增加SQlite数据库
- 写一堆文章填满博客！！！
- 界面还是有点丑，要美化
参考
写在最后
laomingming博客初上线
