开发项目前端的主要工作目录

最新推荐文章于 2024-05-11 13:17:38 发布

weixin_30810239

最新推荐文章于 2024-05-11 13:17:38 发布

阅读量382

点赞数

文章标签：前端后端 python ViewUI

原文链接：http://www.cnblogs.com/jlj9520/articles/4907853.html

版权

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

分为以下几部：

第一、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 pagestest
11 
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         ]  # 在此列表中追加新的路由cal
23         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=True
30         )
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 json
2 import tornado.web
3 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 <option value="{{account.account_name}}" name="acc_name2" title="{{account.account_name}}（{{account.account_nickname}}" >
3 {{account.account_name}}（{{account.account_nickname}}）
4 </option>
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_nickname
17                 }

同样的方法在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 pagestest
11 
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         ]  # 在此列表中追加新的路由cal
24         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=True
31         )
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)