【odoo16】odoo.js概念外部api通过controller层访问数据

昨天看到了一个视频:前端单独写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水平有限。

猜你喜欢

转载自blog.csdn.net/ONLYSRY/article/details/129880525
今日推荐