前言学习前端有一段时间了。让我们建立一个个人博客。就把这段时间的所学总结和实践一下吧。这段时间学习的文章很长，分成三篇来讲项目。GitHub地址：https://github.com/ssevenk/ss。..效果后台管理系统：前端页面：架构可以看出，在整个项目中，没有页面跳转，只有前后端数据交换，所有的页面更新都是组件更新和数据更新。后端只是对数据库进行增删改查，并接受前端的异步请求返回数据，所以本质上这是一个单页面应用。所有的焦点都在前端文件目录：data。我的网站内容分为三个部分。文章：关于前端知识的个人原创内容：畅所欲言，不一定是前端相关的个人内容收藏：别人的优秀文章，收藏，点击直接跳转到相应网站链接同理，我们需要首先定义它。我用的数据库是mongodb，比较灵活，配合node使用更简洁。安装配置mongodb的过程这里不再赘述。在Internet上很容易找到教程。如果安装卡死，安装时不要勾选左下角的compass（可视化工具），然后在项目中安装mongodb的第三方运行库mongoosenpmimongoose。新建curd.js文件导入mongoose并连接数据库（第一次连接没有这个数据库会自动帮我们创建）//curd.jsconstmongoose=require('mongoose')mongoose.connect('mongodb://localhost/gblog')定义三个数据的结构//curd.jsconstMonBlog=mongoose.model('monblog',{title:{type:String,required:true//表示这个属性是必须的},content:{type:String,required:true},date:{type:String,required:true},评论:[]})constMonEssay=mongoose.model('monessay',{title:{type:String,required:true},content:{type:String,required:true},date:{type:String,required:true},评论：[]})constMonArticle=mongoose.model('monarticle',{title:{type:String,required:true},link:{type:String,required:true},date:{type:String,required:true}})添加新数据时，mongodb会自动添加后为每个数据生成一个_id，你可以使用这个唯一的_id来查找操作数据，然后将这三个数据模型导出到服务器使用//curd.jsmodule.exports={MonBlog:MonBlog,MonEssay:MonEssay,MonArticle:MonArticle}服务器端配置使用Node构建我们的服务器，安装express框架，添加body-parser中间件来解析传入的请求体，将路由写在另一个模块router.js中，并导入//app.jsconstexpress=require('express')constbodyParser=require('body-parser')constrouter=require('./router')constapp=express()app.use(bodyParser.urlencoded({extended:false}))app.use(bodyParser.json())app.use('/',router)监听7000端口app.listen(7000)跨域这里的server你可能注意到了端监听7000端口，但是前端页面访问的其实是8080端口。为了实现跨域请求，我们需要对config文件夹下的index.js文件做一些修改，增加一个跨域访问规则到proxyTable。/data开头的请求可以跨域访问7000端口的服务器。增删查改配置路由模块，引入curd.js导出的三种数据模型//router.jsconstexpress=require('express')constcurd=require('./curd')varrouter=express.Router()constMonBlog=curd.MonBlogconstMonEssay=curd.MonEssayconstMonArticle=curd.MonArticle然后我们可以使用mongoose提供的API来添加，删除、查看、修改，例如我们使用前端post信息添加数据router.post('/data/blog/new',(req,res)=>{newMonBlog(req.body).save((err)=>{if(err)res.send(err)})})发送所有文章数据到前端router.get('/data/blog',function(req,res){MonBlog.find((err,data)=>{if(err){res.send(err)return}res.send(data)})})想修改对应的数据router.post('/data/blog/:id',(req,res)=>{MonBlog.findByIdAndUpdate(req.body.id,{title:req.body.title,content:req.body.content,comments:req.body.comments},function(err,data){if(err)res.send(err)})})删除数据router.delete('/data/essay/:id',(req,res)=>{MonEssay.findByIdAndDelete(req.params.id,function(err,data){if(err)res.send(err)})}))到目前为止，我们已经完成了项目的这一部分我们将要开始前端部分的制作。我打算分两部分来说说后台管理系统和前端页面。敬请期待下一篇，第二篇已更新：https://segmentfault.com/a/11...第三篇已更新：https://segmentfault.com/a/11...
