一. 后台发布系统技术选型
完成了后台接口的开发,现在开始准备开发后台发布系统,用户对象是管理员发布文章,管理用户,新增文章标签等。开发这个博客系统的初衷是希望从无到有开发出一个博客系统,然后就是希望借助这个系统进行一些前端技术的实战。光看demo和文档是很难学懂一个新技术的。
所以,这次的后台系统准备用angular4进行开发,之前学习的零碎的知识点要应用在一个小的项目中。
二.环境搭建
使用angular-cli搭建了第一个angular项目。步骤参照如下:
1.打开命令行,检查自己本机是否已经安装node和npm,确保node在6.0以上,以及npm在3.0以上。安装成功后的效果如下图所示:
2.在自己本机全局安装angular-cli:命令如下:npm install -g @angular/cli,安装好之后使用ng -v检查是否安装成功。安装成功后的截图如下所示:
5.启动服务:ng serve 或者 npm start,这时angular的项目将新建成功,浏览器访问http://localhost:4200将会出现欢迎界面。
6.环境搭建成功后的项目结构如下:
三. 开发过程是艰辛的但是值得
开发时间断断续续经历了一个月,终于遇到各种问题,因为之前从来没有用angular开发过项目,再加上ng4在国内的资料比较少,遇到问题百度基本上解决不了,在开发过程中最需要的就是一个用angular已经开发成功的的项目,这样遇到相同的功能性问题才可以去参考,但是当时没有找到一个开源的优秀代码,遇到问题只能自己去google搜索,要么就是查阅官方文档,开发过程中遇到的各种经典问题如下:
angular4的跨域问题解决、中间人组件通信的过程、刷新当前页面404的解决方法、如何实现一个编辑详情的功能、获得一组checkbox中哪个被选中等很多常见的问题。
下一篇文章会详细列出这些问题的解决方案,敬请期待哦。
四 第三方的故事
后台系统中用到了一些第三方的组件或者库。bootstrap所有UI用bootstrap实现,弹出框使用了bootstrap的弹出框。编辑框使用的是wangeditor的第三方组件。组件个人维护,UI不错,容易上手。