做自己的第一个网站(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;"> </div>
<script type="text/javascript">
//方法用于向指定元素添加事件句柄 window.addEventListener("load", () => { //创建和初始化地图函数: function initMap() { createMap();//创建地图 setMapEvent();//设置地图事件 addMapControl();//向地图添加控件 } //创建地图函数: function createMap() { var map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图 var point = new BMap.Point(116.621623, 30.262393);//定义一个中心点坐标 map.centerAndZoom(point, 12);//设定地图的中心点和坐标并将地图显示在地图容器中 window.map = map;//将map变量存储在全局 } //地图事件设置函数: function setMapEvent() { map.enableDragging();//启用地图拖拽事件,默认启用(可不写) map.enableScrollWheelZoom();//启用地图滚轮放大缩小 map.enableDoubleClickZoom();//启用鼠标双击放大,默认启用(可不写) map.enableKeyboard();//启用键盘上下左右键移动地图 } //地图控件添加函数: function addMapControl() { //向地图中添加缩放控件 var ctrl_nav = new BMap.NavigationControl({ anchor: BMAP_ANCHOR_TOP_LEFT, type: BMAP_NAVIGATION_CONTROL_LARGE }); map.addControl(ctrl_nav); //向地图中添加缩略图控件 var ctrl_ove = new BMap.OverviewMapControl({ anchor: BMAP_ANCHOR_BOTTOM_RIGHT, isOpen: 1 }); map.addControl(ctrl_ove); //向地图中添加比例尺控件 var ctrl_sca = new BMap.ScaleControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT }); map.addControl(ctrl_sca); } initMap();//创建和初始化地图 }) </script>
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>
具体逻辑实现
<script> //配置文件 window.server_url = "/odoo14"; </script>
<script> $(function () { $(".hx-btn-submit").click(function () { // let name = $("#name").val(); let email = $("#email").val(); let subject = $("#subject").val(); let message = $("#message").val(); var submit_btn = $("#form-submit"); var str_value = { name: name, email: email, subject: subject, messages: message }; var url = window.server_url+'/hx/visitor/order/api' // axios({ // url: url, // headers:{ // 'Content-Type':'text/plain' // }, // method: 'post', // data:JSON.stringify(str_value), // }).then( (response)=> { // submit_btn.text("发送成功"); // submit_btn.css("background","green"); // console.log(response); // }) // .catch(function (error) { // console.log(error); // }); axios({ url: url, method: 'post', params:{ name:name, email:email, subject:subject, message:message } }).then( (response)=> { submit_btn.text("发送成功"); submit_btn.css("background","green"); setTimeout(()=>{ console.log("------------------"); submit_btn.text("发送"); submit_btn.css("background","#45489a"); // $("#name").val(" "); // $("#email").val(" "); // $("#subject").val(" "); // $("#message").val(" "); // $("#name").attr("placeholder","名字.."); },2000); }) .catch(function (error) { //按钮的文字存下 var btnTextData = submit_btn.innerText; submit_btn.text("发送失败"); submit_btn.css("background","#f00"); setTimeout(()=>{ console.log("------------------"); submit_btn.text("发送"); submit_btn.css("background","#45489a"); name='' },2000); }); }) }) </script>
这么做的的话会遇到跨域问题,怎么解决跨域问题:通过nginx来解决跨域问题
具体解决办法如下:然后用nginx启动服务,在调用时用:
<script> //配置文件 window.server_url = "/odoo14"; </script>
最后后端
标签:JQuery,map,name,odoo14,Bootscrapt,地图,submit,btn,email 来源: https://www.cnblogs.com/1314520xh/p/15643249.html