在开发项目中前端往往会做很多的事情，特别是对于一个大型的项目的研发，下面是本人在一个自主创建的一个开发小组（自主研发开发框架）里面做前端的一些心得和主要工作内容。

分为以下几部：

第一、clone git

通过gitcafe上面clone下来的documentation文件夹，在里面打开原型设计，开始编写静态网页。

第二、建立开发框架上的文件夹

在自己的项目目录下面建立几个与前端相关的文件夹，包括：

moders  >>写一些后端所需要的模型，在后端封装一个对象的时候需要用到。

static     >>写一些静态文件，比如css、js、images、file...

template >>在pages写好以后，需要改模板，这样后端才能认识，具体的改发还要看后端是什么语言。

pagetest  >>写一些前端的测试文件，相当于模拟一个后端。

pages     >>拿到原型设计以后写的静态html文件放在此处。

第三、写静态页面

开始写静态页面，放在pages文件下面，主要用于平面设计的css最初的修改。在编写html文件的过程中，注意尽量做到每一个标签、按钮都加上ID和name，便于后端的自动化测试和平面设计的界面优化（直接在css文件里面写对应的css即可）；

静态页面写好以后，需要加上一些css或者js，最好是采用外联的文件，对应的css写在/static/css/或/static/js文件夹中便于管理。

第四、修改模板

在第三步写好了静态html文件以后，还需要把静态页面修改为模板，修改的方式有很多，可以参考：

http://my.oschina.net/jiemachina/blog/205416

第五：前端测试

 前端的单元测试是特别重要的一步，如果没有进行测试就提交代码的话会让后端的集成测试的别多bug，而且做完前端的单元测试也会对后端有一定的理解，自己也能明白怎么一回事。所谓前端的单元测试呢，就是模拟一个后端，将前端的代码嵌套到后端去。具体做法如下（后端为python tonador）：

下面是前端测试的主文件pagetestmain.py，测试时需要启动该文件，命令（在你确定安装了python的情况下）：python3 pagetestmain.py。

1 # 此文件为前端单元测试启动文件 2  3 import os.path 4 import uuid 5 import tornado.ioloop 6 import tornado.web 7 from tornado.options import define, options 8  9 #-----------------不同功能的测试放到pagetest目录的不同文件中，并在此引入10 from pagetest import pagestest11 12 13 define("port", default=9003, help="run on the given port", type=int)14 15 16 class Application(tornado.web.Application):17 18     def __init__(self):19         handlers = [20             (r"/user_login_temp", pagestest.Userloginrpl),    #在此处添加路由21           22         ]  # 在此列表中追加新的路由cal23         settings = dict(24             cookie_secret=str(uuid.uuid4()),25             template_path=os.path.join(os.path.dirname(__file__), "templates"),26             static_path=os.path.join(os.path.dirname(__file__), "static"),27             xsrf_cookies=True,28             login_url="/",29             debug=True30         )31         tornado.web.Application.__init__(self, handlers, **settings)32 33 34 if __name__ == "__main__":35     app = Application()36     app.listen(options.port)37     tornado.ioloop.IOLoop.current().start()

然后在pagestest.py里面添加路由对应的类：

1 import json2 import tornado.web3 from models import books    #在外面引用的模型4 5 6 class Userloginrpl(tornado.web.RequestHandler):7 8     def get(self):9         self.render("User_login.html")    #读模板

针对于前端的测试，一般分为两种，一种是selft.render("")：读模板，另外一种是self.write("")：写回操作信息，或者其他返回信息；

在读模板的过程中要把模板上所有的变量都赋值，至于for循环的需要用列表去查看models里面的对应模型文件来写如下：

首先HTNL文件（改好的模板）里面的for循环：

1   {%for account in accountlist%}2 3 {
    {account.account_name}}（{
    {account.account_nickname}}）4 5     {%end%}

models文件夹里面的模型文件account.py:

1 class Account: 2  3     def __init__(self, account_id, account_name, account_nickname): 4         self.account_id = account_id 5         self.account_name = account_name 6         self.account_nickname = account_nickname 7  8     def __str__(self): 9         return str(self.account_id) + "#" + \10             str(self.account_name) + "#" + \11             str(self.account_nickname) 12 13     def objtodict(self):14         return {
   'account_id': self.account_id,15                 'account_name': self.account_name,16                 'account_nickname': self.account_nickname17                 }

同样的方法在pagetestmain.py里面添加路由：

1 # 此文件为前端单元测试启动文件 2  3 import os.path 4 import uuid 5 import tornado.ioloop 6 import tornado.web 7 from tornado.options import define, options 8  9 #-----------------不同功能的测试放到pagetest目录的不同文件中，并在此引入10 from pagetest import pagestest11 12 13 define("port", default=9003, help="run on the given port", type=int)14 15 16 class Application(tornado.web.Application):17 18     def __init__(self):19         handlers = [20             (r"/user_login_temp", pagestest.Userloginrpl),21             (r"/manage_account_temp", pagestest.Manageaccountrpl),22           23         ]  # 在此列表中追加新的路由cal24         settings = dict(25             cookie_secret=str(uuid.uuid4()),26             template_path=os.path.join(os.path.dirname(__file__), "templates"),27             static_path=os.path.join(os.path.dirname(__file__), "static"),28             xsrf_cookies=True,29             login_url="/",30             debug=True31         )32         tornado.web.Application.__init__(self, handlers, **settings)33 34 35 if __name__ == "__main__":36     app = Application()37     app.listen(options.port)38     tornado.ioloop.IOLoop.current().start()

然后在pagestest.py里面加上该路由对应的类名：

class Manageaccountrpl(tornado.web.RequestHandler):    def get(self):                accountlist = [account.Account(            "1", "李四", "lisi"), account.Account(            "2", "张三", "zhangsan"), account.Account(            "3", "王三", "wangsan"),account.Account(            ]        self.render(            "Manage_account.html", accountlist=accountlist)

如果是ajax对应的操作路径的话，当然也需要在主函数里面加上路径，pagestest.py里面的类不一样：

1 class Addaccountrpl(tornado.web.RequestHandler):2 3     def post(self):4         acc_reson = self.get_argument("acc_reson")5         print(acc_reson)6         obj = {7             "returnedjson": {
   "infostatus": "T", "infomsg": "添加成功"}}8         a = json.dumps(obj)9         self.write(a)

这样在返回给ajax回显到页面上提醒用户。

 

第六、测试完成，提交代码

把前端对应的文件提交到git服务器上去，以便后端可以去克隆。提交完成以后发卡片给后端，让其完成相应的工作内容。