一. 后台发布系统技术选型

完成了后台接口的开发,现在开始准备开发后台发布系统,用户对象是管理员发布文章,管理用户,新增文章标签等。开发这个博客系统的初衷是希望从无到有开发出一个博客系统,然后就是希望借助这个系统进行一些前端技术的实战。光看demo和文档是很难学懂一个新技术的。

所以,这次的后台系统准备用angular4进行开发,之前学习的零碎的知识点要应用在一个小的项目中。

二.环境搭建

使用angular-cli搭建了第一个angular项目。步骤参照如下:

1.打开命令行,检查自己本机是否已经安装node和npm,确保node在6.0以上,以及npm在3.0以上。安装成功后的效果如下图所示:

  

2.在自己本机全局安装angular-cli:命令如下:npm install -g @angular/cli,安装好之后使用ng -v检查是否安装成功。安装成功后的截图如下所示:

 

3.安装完成后,使用ng命令创建一个新项目:ng new  projectName(你的项目名)
4.进入到该项目目录:cd projectName 

5.启动服务:ng serve 或者 npm start,这时angular的项目将新建成功,浏览器访问http://localhost:4200将会出现欢迎界面。

6.环境搭建成功后的项目结构如下:

  

三. 开发过程是艰辛的但是值得

开发时间断断续续经历了一个月,终于遇到各种问题,因为之前从来没有用angular开发过项目,再加上ng4在国内的资料比较少,遇到问题百度基本上解决不了,在开发过程中最需要的就是一个用angular已经开发成功的的项目,这样遇到相同的功能性问题才可以去参考,但是当时没有找到一个开源的优秀代码,遇到问题只能自己去google搜索,要么就是查阅官方文档,开发过程中遇到的各种经典问题如下: 

angular4的跨域问题解决、中间人组件通信的过程、刷新当前页面404的解决方法、如何实现一个编辑详情的功能、获得一组checkbox中哪个被选中等很多常见的问题。

下一篇文章会详细列出这些问题的解决方案,敬请期待哦。

四 第三方的故事

后台系统中用到了一些第三方的组件或者库。bootstrap所有UI用bootstrap实现,弹出框使用了bootstrap的弹出框。编辑框使用的是wangeditor的第三方组件。组件个人维护,UI不错,容易上手。


本文转载:CSDN博客