如何用angularjs编写后台管理系统的

JavaScript010

如何用angularjs编写后台管理系统的,第1张

前端

1) 安装IIS

2) 指定虚拟目录admin到client/

后端-Python

1) 安装soft/python-2.7.3.msi

2) 安装soft/Django-1.9.1.tar.gz (解压以后命令行执行 setup.py install)

3) 安装soft/django-rest-framework-master.zip (解压以后命令行执行 setup.py install)

4) 安装soft/django-cors-headers-master.zip (解压以后命令行执行 setup.py install)

5) server-python目录下执行 manage.py runserver

后端-PHP

1) 安装soft/vcredist_x64.exe (php要求的vc11运行环境)

2) 安装soft/php-5.6.16-Win32-VC11-x64.zip (解压即可)

3) 将php目录加入到系统环境变量Path中

4) server-php目录下执行 php -S 127.0.0.1:8000

注意,该PHP压缩包中的php.ini我做过了一些修改:

extension=php_pdo_sqlite.dll #增加sqlite支持  

always_populate_raw_post_data = -1 #新版PHP-win对于POST处理的旧函数有过期警告,会导致CORS中断,这里禁用该警告,linux下PHP5.6无此问题

date.timezone = ‘Asia/Shanghai’ #纠正时区

后端-Node.js

1) 安装soft/node-v5.0.0-x64.msi

2) server-nodejs目录下执行如下指令

>set PORT=8000

>npm start

项目首页由顶部导航栏,左侧导航栏,中间内容区构成,如图

在app.vue引入element-ui,然后就可以在其他任何页面中使用了

将app.vue改为以下内容

一般来说,一个管理后台的构建的基本流程是:

选择一个开发语言

选择一种数据库

选择一个开发轮子(framework)

在轮子上搭建前端框架

实现业务逻辑。 

一旦一个后台做出来以后,有了技术积累,以后其他的项目都是克隆版本,这样的流程的缺陷是:

开发语言选型被固化 

技术人员的招聘、团队协作开发都必须依赖开发语言统一。

业务逻辑的实现无法统一标准 

没有统一标准就很难书写规范的文档,技术人员离职很难做到顺利交接,同时系统里面的隐藏BUG很难通过标准测试发现。 

时下Web前端技术的发展风生水起,我们可以尝试用WebAPP的思想去构架后台,将后台的前后端分离,前端交给AngularJS,后端交给任何一种语言框架,前后端通过标准协议接口通讯,这样后台构架的流程将是这样:

业务流程的数据库建模

业务流程的协议文档制定

前后端工程师协作开发完成后台