• 做一个幸福的人,读书,旅行,努力工作,关心身体和心情。
  • 不管有没有人爱,也要努力做一个可爱的人。不埋怨谁,不嘲笑谁,也不羡慕谁,阳光下灿烂,风雨中奔跑,做自己的梦,走自己的路。

我的书签开发备忘录 01

产品 lcq 2年前 (2016-10-18) 732次浏览 0个评论

前言

之前,说要开发一个书签备忘录的,最近这段时间工作有点闲,打算开始干了,想通过开发这个应用熟悉一下一个web开发项目的流程。可能有一系列的文章记录我自己的开发过程,由于是新手,可能价值不大,仅仅只是记录一下自己遇到的问题,供以后自己开发做参考。这是第一篇,“我的书签开发备忘录 01”。我希望最后一篇不是“我的书签开发备忘录 99”。。。。。。

项目相关

列举一下我参考的项目:

Bookmarkly :这个是个外国人使用NodeJS + Backbone + Express + Redis 写的书签应用。由于年代比较久远,可能用的版本都是比较低的。而且他提供的网站没维护已经打不开了。自己clone下来,很容易就能部署好的,但是获取网页预览图片的代码作者没有释放出来。我基本大部分的UI交互跟创意都是来自这个网站。

express-angular-starter:这个是一个种子项目。我代码的组织方式基本是跟据这个项目来的。

express:后台的一个框架。

MySql: 后台数据库。

Semantic UI:这个是我使用的UI。自己写的UI要做的漂亮肯定要花很多时间。考虑过使用bootstrap,主要是因为bootstrap资料比较多,而且Semantic UI有的时候效果用类组合之后不会出现自己的效果感觉比较坑。但是部门好像当前在用Semantic UI。对我来说其实都差不多,所以用了这个。

AngularJS:这个是我用来做前端MVC框架的。这个项目最重要的框架。

AngularJS实战视频:大漠穷秋讲的,我觉得挺不错的,做项目之前快速浏览了一遍。这个视频很清晰,也不要交钱就可以看到。是AngularJS学习视频我目前认为是最好的。

用AngularJS开发下一代Web应用:大漠穷秋翻译的。因为看了他的视频,对他有信用,所以买了一本,目前还没看。

差不多涉及的资料是这些了吧。以后想起来了再加

Github地址

本来就是打算开源的,所以托管在Github上,项目地址为:https://github.com/luchenqun/my-bookmark。我会在master分支上面开发我的项目。你可以任意clone下来修改我的代码不要经过我的同意。。。你爱怎么折腾就怎么折腾。当然,如果觉得这个项目对你有一定的帮助,希望你能给我这个项目打个星星。。。

项目初始化

通过应用生成器工具 express 可以快速创建一个应用的骨架。

通过如下命令安装:$ npm install express-generator -g

-h 选项可以列出所有可用的命令行选项:$ express -h

例如,下面的示例就是在当前工作目录下创建一个命名为 my-bookmars 的应用。$ express my-bookmars -e ( -e 表示使用ejs模板)

然后根据生产的文件夹,根据上面的种子项目,再改改就差不多了。

具体请参考 Express 应用生成器

项目启动

将我的项目clone下来之后,先安装好NodeJs环境,使用npm install 之后,再执行npm start;在浏览器输入127.0.0.1:2000应该就可以看到效果了。当然这是目前的进度,后面可能加了数据库之类的,还需要部署数据库。我是使用包supervisor 启动项目的,有个好处就是你修改了代码他会自动帮你启动项目。

完成进度

使用 git reset --hard 2136ecb8701aa3a9a2fe903f641764a95642c071 就可以切换到这篇博文的进度啦!

1、框架的基本搭建,将需要的文件基本引入进来了。

2、前后台通讯,前台请求,后台返回一个json数据包。然后前台收到,渲染到前台。

无图无真相,进度展示如下:
1

问题记录

我点击我的书签请求后台的时候,angularjs 请求后端接口请求了两次。后面查到是因为在在state当中定义了一次,又在模板中定义了一次。具体查阅:angularjs 请求后端接口请求了两次


乐趣公园 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明我的书签开发备忘录 01
喜欢 (2)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址