作为一个前端工程师，可能只会一门语言，那就是 JavaScript。但是想要搭建一个博客，就需要全栈的技术，那我们就利用这一门语言通吃前后端吧。
屏幕快照 2018-04-16 下午9.46.11.png
那么我就来说说我是如何用两天的时间搭建一个博客站，以及管理后台的吧。
首先，我们需要比较熟悉 js，其次我们需要一点后端和数据库的基础。后端我们利用 koa2 可以快速的构建一个 web 项目，因为博客站的需求很简单，只需要博客和评论两个模型就可以了。
分析好两个模型，利用 js 的 orm 框架 sequelize 可以很快的构建数据表和模型映射关系。至于sequelize怎么用，可以查看使用文档，简单的配置和增删操作应该还是很容易的。
以下是blog的模型：
const Sequelize = require('sequelize')
const sequelize = require('../db/sequelize')
let Blog = sequelize.define('blog',{
id:{type:Sequelize.INTEGER,autoIncrement:true,primaryKey:true,unique:true},
title:{type:Sequelize.STRING},
author:{type:Sequelize.STRING},
abstract:{type:Sequelize.STRING},
content:{type:Sequelize.TEXT}
});
module.exports = Blog
建立好模型之后就可以写 Api 路由了，在项目的routes目录下新建一个blog.js文件，这个文件可以参考下默认生成的 index.js ，然后引入我们 的 blog 的模型，就可以写create 路由了。
//新建
router.post('/create', async (ctx, next) => {
let blog = ctx.request.body.data;
if(blog&&blog.title&&blog.author&&blog.abstract&&blog.content){
try{
await Blog.create({
title:blog.title,
author:blog.author,
abstract:blog.abstract,
content:blog.content
});
ctx.body = {
code:200,
msg:"success"
}
}catch(error){
console.log(error);
ctx.body = {
code:100,
msg:"系统错误"
}
}
}else{
ctx.body = {
code:101,
msg:"参数验证不通过"
}
}
})
这是新建 blog 的api ，然后还有 list，update，get 的api 顺着写就好了。
API都写好了，我们需要构建前端展示页了。koa 支持 ejs 模板引擎，可能默认不是这个，但是因为 ejs 语法接近 html， 所以我推荐使用。routes目录下有个index.js 这里我们用作博客首页展示路由。
router.get('/', async (ctx, next) => {
let pageCount = 10, pageNo = 1;
let query = ctx.query;
if(query.pageCount&&query.pageCount>0){
pageCount = parseInt(query.pageCount);
}
if(query.pageNo&&query.pageNo>1){
pageNo = parseInt(query.pageNo);
}
try {
let result = await Blog.findAndCount({
order:[['id','DESC']],
offset: pageCount * (pageNo - 1),
limit:pageCount
});
await ctx.render('index', {
data: result,
pageNo :pageNo,
pageCount:pageCount
})
} catch (error) {
console.log(error);
}
})
然后还有一个博客详情页，这个可能需要些到blog.js 的路由里。
博客的api都写完之后，还有一个评论的api，基本都差不多，不过需要一个关联博客id，不需要做外键关联，程序关联就ok，毕竟单表也是很好的设计嘛。然后这个 api 在博客详情页通过 ajax 异步获取展示。
这里就做完了 api 和页面展示部分。我们还需要一个管理后台。这里我推荐用vue + elementUI 搭建一个后台管理。熟练的前端基本两个小时就可以搞定，非常简单。
最后，项目做完需要部署到服务器上，本人有一个很便宜的阿里云服务，所以在阿里云搭建好node环境，装上mysql，装上git，再装上pm2。
我把做好的两个项目推到git上，然后登录阿里云 拉下这两个项目，然后pm2 部署上就可以了。
预览地址:http://47.100.55.91:3000/
总结，即使是一个前端，也是需要了解下基本后端，其实不需要成为全栈，但是至少要知道整个项目是如何运行起来的，是如何一步一步搭建起来的。整个项目写完两天基本是够了，剩下的就是修修补补，改改样式。这样看来，一个人做项目，效率还是比较快的，沟通成本极低，这也是为什么全栈这个 Title 显得很牛逼的原因吧。
网友评论