常用js库和框架（vue&element ui与webpy）

Posted 2022-09-24 嵌入式-老费

【 声明：版权所有，欢迎转载，请勿用于商业用途。 联系信箱：feixiaoxing @163.com】

        编写前端代码的同学都知道，目前最火的前端代码是vue&element ui，而后端个人又比较喜欢用webpy，那么这两者是怎么配合的。现在都说要实现前后端分离，两者的json数据又是怎么交互的？正好可以花点时间交流下。

1、代码融合

        webpy代码比较简单，除了app.py之外，一般还有一个templates目录。这个templates目录就是mvc架构里面的v。而vue&element ui最终生成的是一个index.html加一个static目录，static目录中包含有js、css、fonts等子目录。所以，现在需要做的就是四步，

        第一步，将static拷贝到和app.py平级的目录，

        第二步，创建一个templates目录，将index.html文件拷贝到templates目录下，

        第三步，修改index.html文件，第一行添加如下内容，原有内容移到第二行，

$def with ()

        第四行，添加一个base.html文件，

$def with (page)

$:page

        有了这四步之后，前后端就可以整合在一起了。

2、api的使用

        既然前后端实现了分离，那么除了第一次index.html之外，其他前后端的交互基本上都是用api来完成的，数据部分基本也都是json。这个时候，就需要分成两种情况。第一种，调试的时候，使用代理来实现调试；第二种，部署的时候，直接调试。

        在分析两种使用场景之前，可以先看下js里面一般是怎么用axios访问数据的，

	methods:
		getdata:function()
			this.axios(
					method:'post',
					url:'/api',
					data:'key1=1&key2=2'
				).then(response=> 
					console.log(response.data)
				).catch(error=> 
					console.log(error)
				)
		
	

        这是一个典型的axios应用场景。访问的方法是api，输入的数据是key1和key2。

2.1 代理测试

        如果是代理测试，那么势必要进行代理配置。项目中有vue.config.js的话，一般proxy在这个文件里面。如果没有这个文件，项目工程使用vue init来实现的，那么代理配置在build/webpack.dev.conf下面，直接修改proxy部分，

	proxy: 
      '/api': 
        target: 'http://localhost:8086',
        pathRewrite:'^/api':'',
        ws: true,
        changeOrigin: true
      
    ,

        有了这个配置，我们在npm run dev启动前端代码后，就可以让js访问到另外一个ip&端口的后端。这样势必涉及到url跨域的问题，所以webpy的工程也要稍作修改，

#python api_web.py 8086
import web
import json
 
urls = (
    '/(.*)', 'hello'
)

app = web.application(urls, globals())
 
 
class hello:
    def GET(self,name):
        web.header("Access-Control-Allow-Origin", "*")
        data1 = web.data()
        print(data1)
        print type(data1)
        return json.dumps('status':'ok')

    def POST(self,name):
        web.header("Access-Control-Allow-Origin", "*")
        data1 = web.data()
        print(data1)
        print type(data1)
        return json.dumps('status':'ok')
        #json_data = json.loads(data1)
        #return json_data
 
 
if __name__ == "__main__":
    app.run()

          上述代码中最重要的部分就是web.header的设置，有了这句话，基本上就可以解决跨域问题。当然，如果我们的代码是部署在iis中，那么就要在iis中解决web server跨域的问题。

2.2 正常测试

        有了上面的代理测试，正常测试就比较容易。唯一一个需要修改的地方，就是参数的个数问题。同样是后端webpy，如果两者是正常组合测试，那么同样的功能后端的代码是这么写的，

import web
import json

urls = (
    '/', 'hello',
	'/api', 'api'
)

render = web.template.render("templates", base="base")
app = web.application(urls, globals())

class hello:
    def GET(self):
        return render.index()

class api:
	def POST(self):
		print web.data()
		return json.dumps('status':'ok')

if __name__ == "__main__":
    app.run()

        了解了上面这几点，基本上就可以掌握了前后端联调的方法了。