• 个人博客项目总结(一)


    介绍

    前端采用vue2.0+es6+webpack+axios
    后端采用express+nodejs+es6+restful api+mongodb

    简单博客系统,实现基本的增删改查文章,以及箴言。目前的功能比较少,能适应基本的需求,后期会增加更多的功能。这个博客从后端到前端共花费21天,除了上课,就在完成这个项目。暂时还没上线,界面。。。似乎略丑(我有什么办法,我也很无奈~)。更多代码细节可查看:https://github.com/susantong/blogSystem

    1.后端(blogSystem_server)
    主要有manager、mongo、router、public文件夹以及入口文件app.js,mongo文件夹存储mongoose连接细节以及发布schema模版(发布的模板包括article,maxim,articleType),router文件夹存储主要路由),manager存储更多函数的细节,public/images存储前端上传图片文件。数据库的操作借助于mongoose实现。
    文件结构:

    2.前端
    主要有assets文件夹存储静态文件,components存储模版,getCGI发起请求数据,routers主要路由。
    文件结构:

    踩的坑以及解决办法:
    1.发表新文章和编辑新文章公用的同一个组件editArticle.vue,出现的问题是:当我点击某一篇文章的编辑后,再点击“新文章”,这个路由从地址上来看进行切换,但是界面并不刷新。原来,公用组件时,组件只会在第一次加载时创建(mounted函数只调用一次),通过查询,发现可以通过监听路由变化来改变数据,最终解决了不刷新的问题。

    2.有点棘手的莫过于对图片的处理了。前端想要对图片进行剪裁,并实现上传。这个问题想的比较久,最后是前端用jquery的jcrop插件,去约束裁减范围,缩放比例等参数,有一个图片预览的功能,这里用canvas去实现图片,当我前端裁剪完成并提交后,将canvas的图片路径转换为base64格式。后端接收到路径后,用fs模块将其写入文件夹内,删除时,也需要用fs删除图片文件。

    总结:通过这个项目,加深了对vue的理解,特别是各个生命周期钩子函数,解决了一些实际问题,当然,其中存在很多的不足,希望能一直进步。后期还要不断的完善。

  • 相关阅读:
    mysql表设计的一些面试题
    sqlserver统一给所有表添加字段
    领域知识层次
    3年经验的java程序员面试应该具备的基本技能
    bootstraptable前端分页
    could not find setter for
    el-table表格单选按钮
    use of the same entity name twice
    《CSS核心技术详解》
    遇见未知的CSS
  • 原文地址:https://www.cnblogs.com/susantong/p/6882150.html
Copyright © 2020-2023  润新知