zoukankan      html  css  js  c++  java
  • 个人博客项目总结(一)

    介绍

    前端采用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的理解,特别是各个生命周期钩子函数,解决了一些实际问题,当然,其中存在很多的不足,希望能一直进步。后期还要不断的完善。

  • 相关阅读:
    [leetcode]Reverse Words in a String
    [leetcode]ZigZag Conversion
    [leetcode]Gray Code
    [leetcode]Permutation Sequence
    [leetcode]Next Permutation
    [leetcode]PermutationsII
    [leetcode]Add Two Numbers
    Python与PHP通过XMLRPC进行通信
    最近发现了个js传图预览的函数和大家分享下
    百度地图api2.0体验
  • 原文地址:https://www.cnblogs.com/susantong/p/6882150.html
Copyright © 2011-2022 走看看