昨天看到了一个视频:前端单独写web层、后端用odoo也是可行的,通过controller层就可以拿到前端数据,进行数据库的增删改查、还挺有趣。视频中只做了一个案例、就是前端vue+axios拿到了odoo的设置界面最下边的一个版本号信息:就是这个(视频中是v14.0版本的)
正好比较闲我就写了个示例测试一下controller层好不好用(登录以及权限的问题先不管)
视频链接如下:感兴趣可以自己去看
odoojs 公开课1 前端如何连接 odoo_哔哩哔哩_bilibili
简单的写一下:
一、测试一下get请求:
# get请求的demo(helloWorld)
class HelloWorld(http.Controller):
@http.route('/hello_world', type='http', auth='public', website=True, csrf=False)
# 可接受任何类型的参数 所以使用 **kwargs
def hello_world(self, **kw):
response = "Hello, world!"
return http.Response(response, headers={'Access-Control-Allow-Origin': '*'})
@http.route('/hello/<string:name>', type='http', auth='public', website=True, csrf=False)
def hello_name(self, name, **kw):
response = "Hello, %s!" % name
return http.Response(response, headers={'Access-Control-Allow-Origin': '*'})
这里写了两个对外接口一个是auth都是公开,type类型为http、第一个就返回一个helloworld另一个也一样加一个自己在data里定一个name而已。
testtwo () {
axios.get('/api/hello_world')
.then(response => {
this.helloWorldMessage = response.data;
})
.catch(error => {
console.log(error);
});
},
testthree () {
axios.get(`/api/hello/${this.name}`)
.then(response => {
this.helloNameMessage2 = response.data;
})
.catch(error => {
console.log(error);
});
},
这里使用axios来发送请求,跨域问题已解决、/api为我的odoo服务路径所以我发送请求时直接/api/接口名即可(前端基本技能、默认大家都会)
proxyTable: {
"/api": {
// target: "https://www.vue-js.com",
target: "http://192.168.3.92:8069", // 你请求的第三方接口
changeOrigin: true, //是否改变源地址。
pathRewrite: {
// 路径重写,
"^/api": " " // 替换target中的请求地址,也就是说以后你在请求http://api.jisuapi.com/XXXXX这个地址的时候直接写成/api即可。
}
}
},
我们来看看请求响应:都是200请求成功,响应数据也渲染到了页面上。get请求没问题。
二、测试一下【前端查询请求->odoo处理请求->postsql数据库查询记录->返回给前端->渲染到页面】:
# 数据库中检索所有产品的demo接口
class ProductController(http.Controller):
@http.route('/products', auth='public', type='http', methods=['GET'], csrf=False)
def get_products(self, **kw):
products = request.env['product.template'].sudo().search([])
# 定一个一个数组ps_all
ps_all = []
for p in products:
ps_all.append(p.name)
# json.dumps(data,指定文字字符,可防止乱码)
response = json.dumps(ps_all, ensure_ascii=False)
# return http.request.make_response(products.read(), headers=[('Content-Type', 'application/json')])
# 使用 make_response方法将它们转换为JSON格式的响应
return http.request.make_response(response, headers={'Access-Control-Allow-Origin': '*'})
这是查询一下产品表中的产品名称、我添加了三条数据:
postsql中product.template表的数据如下:我select了一下表中的name字段,查到三条信息
前端vue中直接调用处理好的数据即可、也拿到了相应的信息:
testfour () {
axios.get('/api/products')
.then(response => {
this.products = response.data;
console.log(response);
})
.catch(error => {
console.log(error);
})
},
三、测试一下post请求:
这次我们写一个添加用户、模拟用户注册的接口:
class LogonController(http.Controller):
# 用户注册的接口
@http.route('/add_user', auth='public', type='json', methods=['POST'], csrf=False, save_session=True)
def add_user(self, **post):
# 接受到前端传过来的json数据
front_data = request.httprequest.data.decode("utf-8")
# 使用json.loads解析一下json数据(分开写更容易看懂)
data_dict = json.loads(front_data)
# 输出解析后的字典数据
print("字典数据", data_dict)
# 访问字典中的具体值
user = data_dict['user']
pwd = data_dict['pwd']
print(user)
print(pwd)
if not user or not pwd:
print("post", post)
print(user)
print(pwd)
return {'code': 1, 'msg': '参数不全'}
# 创建新用户
try:
print('进入创建用户这一步')
new_user = request.env['mydemo.mydemo'].sudo().create({'user': user, 'pwd': pwd})
return {'code': 0, 'msg': '添加用户成功',
'data': {'id': new_user.id, 'user': new_user.user, 'pwd': new_user.pwd}}
except Exception as e:
return {'code': 1, 'msg': '添加用户失败:%s' % e}
我自己自定义个了一个模块、相当简单、表名为mydemo。接口逻辑就是往这个表中添加一条数据:
from odoo import models, fields, api, http
class mydemo(models.Model):
_name = 'mydemo.mydemo'
_description = 'mydemo.mydemo'
user = fields.Char()
pwd = fields.Integer()
前端中我们写两个input框一个按钮即可、点击button然后获取input框内容->后端进行注册->返回一个注册成功或者Erro:
gologon () {
// 定义请求参数
const data = {
user: 'username',
pwd: 123
};
// 发起post请求
axios.post('/api/add_user', data,
{ headers: { 'Content-Type': 'application/json', 'charset': 'utf-8' } })
.then(response => {
console.log(response.data);
})
.catch(error => {
console.log(error);
});
console.log("提交了");
console.log(this.user);
console.log(this.pwd);
}
},
看一下结果:前端发送json请求->>>odoo后端
后端这边处理完后insert到了数据库中:整体来看没什么问题
这样的话就可以让odoo前后端分离,实现前端程序员用vue或者react直接写即可、写表单功能逻辑、然后odoo后端依旧写逻辑层、然后调接口即可、实现自己的ERP做到取其精华去其糟粕的阶段、完全定制(当然权限问题能解决的话、我感觉如果auth=‘user’的话肯定就拿不到数据、要不然也太不安全了)。
写到最后:至于肯定有人要说odoo明明给的有view层、这不是多此一举吗?我只能表示xml写起来还挺麻烦的、而且语法很难上手、专属的owl更是没看懂啥意思、还是vue好写、以上为个人拙见勿喷。本人只是一个2022年才毕业的初级前端QWQ水平有限。