做自己的第一个网站（Bootscrapt、odoo14作、JQuery）
今天发布自己的第一个网站，网站内容是关于自己家乡的美景，效果图如下：网站地址是：http://hxmelon.com/
二、技术篇
1、在这里网站用的是Bootscrapt框架作为网站开发模板、前端语言用了JQuery、 axios；
2、部署用到了nginx；
3、后端存储留言公告信息，用到了odoo14社区版；
三、重要技术点的实现
1、在网站里面插入百度地图，提供拖拽，效果图如下：
具体代码实现：
html里面添加一块区域用来展示地图代码如下：
<div id="dituContent" style="height: 600px;width: 920px;margin-left: 60px;margin-right: 10px;">
2、网站前端数据通过接口传到后端odoo里面实现
1、后端接口接收数据，http格式
# -*- coding: utf-8 -*- from odoo import http import os from jinja2 import Environment, FileSystemLoader import json from odoo import api, fields, models, _ from odoo import SUPERUSER_ID, tools from odoo.http import request, route import logging _logger = logging.getLogger(__name__) class HxVisitorOrder(http.Controller): @http.route('/hx/visitor/order/api', type="http", auth="public", csrf=False, cors='*') def hx_visitor_order_api(self, **kw): """该api用来 执行化验结果 同步""" # data = json.loads(request.httprequest.data) print ('-----------------kw--------------',kw) obj = request.env['hx.melon.order'] res = obj.sudo().create({ 'name': kw.get('name') or '', 'email': kw.get('email') or '', 'subject': kw.get('subject') or '', 'notes': kw.get('messages') or '' }) a = {"result": "success"} return json.dumps(a)
2.前端发送数据格式
<div class="section-content"> <form id="contact"> <div class="row"> <div class="col-md-4"> <fieldset> <input name="name" type="text" class="form-control" id="name" placeholder="名字..." required=""> fieldset> div> <div class="col-md-4"> <fieldset> <input name="email" type="email" class="form-control" id="email" placeholder="邮箱..." required=""> fieldset> div> <div class="col-md-4"> <fieldset> <input name="subject" type="text" class="form-control" id="subject" placeholder="主题" ..." required=""> fieldset> div> <div class="col-md-12"> <fieldset> <textarea name="message" rows="6" class="form-control" id="message" placeholder="内容..." required>textarea> fieldset> div> <div class="col-md-12"> <fieldset> <button type="button" id="form-submit" class="hx-btn-submit">发送button> fieldset> div> div> form> div>
具体逻辑实现
这么做的的话会遇到跨域问题，怎么解决跨域问题：通过nginx来解决跨域问题
具体解决办法如下：然后用nginx启动服务，在调用时用：
最后后端