![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
等一杯清茶
一把陈壶,装上二月的新绿。岁月的炉火,烹煮云水涯。日子在茶中,波澜不惊。
展开
-
vue实现点击不同按钮展示不同内容
效果是:在同一个页面,点击不同按钮,展示不同内容(内容也是在同意页面)方法是:借助v-show渲染不同的class属性步骤:1.先写两个按钮<div class="right1"> <button class="btn_anniu" @click="change(0)" :class="{ newStyle:0===number}">地图</button> <button class="btn_原创 2021-12-13 13:52:37 · 10446 阅读 · 2 评论 -
解决post请求跨域请求第三方服务器
解决post请求跨域请求第三方服务器# 只是一个解决的方法,不是最完美的,但是能解决问题前端用vue,后端是django问题:将选择的参数数据,通过http通信,访问第三方服务器解决:按理说这是一个简单的http通信,只需要前端将参数数据,通过第三方服务器的API接口,发送过去就行了。 我遇到的问题是:首先这是一个post请求,需要解决跨域问题,因为平时都是通过后端引用corsheader第三方库设置解决跨域问题,但是这次访问的第三方的服务器,不是访问的django的后端服务器,导致这个方法原创 2021-10-21 14:53:43 · 1305 阅读 · 0 评论 -
记录一下使用vue进行前后端交互时出现的问题
记录一下使用vue进行前后端交互时出现的问题如果后端返回的是页面,比如render(),前端接收数据就要使用,比如tabeldata: {{ xxx | sate }}如果后端返回的是数据,比如json数据等,前端在声明时只需要为空,比如tabledata: []...原创 2021-09-16 17:29:03 · 320 阅读 · 0 评论 -
element实现列表中添加一个下拉框(下拉框内容不同)
element实现列表中添加一个下拉框(下拉框内容不同)tableDatas: [{ car_index: '201', car_type: '消杀', car_state: '运行', power: '10', chemical: '20', current_rout原创 2021-09-16 11:09:13 · 1094 阅读 · 0 评论 -
处理登录和首页是遇到的问题
处理登录和首页是遇到的问题技术:vue做的页面、python做的后端说明:后端没有借用django框架的登录逻辑,因为我设计的这个系统的用户角色多,而且自带的登录很繁杂问题1:(前端输入的信息,后端接收到为None)一定要看看,前端传的数据的格式是什么,后端根据前端规定的格式接收。我犯的问题是前端传递json,后端接收表单数据。 问题2:(为什么登录完成,页面不刷新) 我的问题是后端写好了,跳转的逻辑,但是前端没有写登录成功后的逻辑代码,导致不能跳转的首页。 问题3:(前后端传递和接原创 2021-07-13 15:49:26 · 270 阅读 · 0 评论 -
后台管理布局
后台管理布局结构一般分三个部分: 顶:标题、logo、用户窗口 左侧:菜单框 右侧:功能区简单写一个模板base.html<head> {% block title %} {% endblock %} {% block css %} <style> .header{ width: 100%; height: 50px; background-color:原创 2021-06-18 16:29:25 · 164 阅读 · 0 评论 -
js弹框的三种方法
js弹框的三种方法alert、confirm、promptalertalert()是将括号里的文本信息显示到弹框中,称为警示对话框。该对话框包含一个“确定”按钮,用户阅读完所显示的信息后,只需单击该按钮就可以关闭对话框。alert("我是人")confirmconfirm()也是将括号里的文本信息显示到弹框中,但是包含一个“取消”按钮,这种对话框称为确认对话框。con = confirm('你是人吗');if(con == true){}else{}promptprompt(原创 2021-05-25 17:04:22 · 3106 阅读 · 0 评论 -
vue入门
vue入门基本使用:导包构建HTML使用vue(实例化vue对象进行一系列操作)基本语法:操作数据:<div class="box">{{ content }}</div><script> var vm = new Vue({ el: '.box' data: { content: 'xxx' } });</script>修改属性:<div class="box">{{ content }}&l原创 2021-03-29 10:20:27 · 63 阅读 · 0 评论 -
vue的使用
vue的使用第一步:导包官方提供两个包:生产包、开发包开发包:vue.js生产包:vue.min.js<script src="/js/vue.js"></script>第二步:构建html<div class="box">{{ content }}</div>第三步:使用vuewindow.onload = function(){ var vm = new Vue({ el: '.box', data: { conte原创 2021-03-29 09:51:13 · 68 阅读 · 0 评论 -
点击左侧动态列表,在右侧动态生成内容
点击左侧动态列表,在右侧动态生成内容原本我打算在生成动态详情的时候,借助jQuery的ajax异步刷新机制,在指定的区域生成从后台获取到的动态数据,但是,在后台将数据传递给前端后,数据的类型改变了,实在是想不通,还有就是不知道怎么处理回调成功后获取到的数据(也就是不知道后台拿到的数据怎么写到模板里),导致我只能选择另一种方式iframe后台生成左侧的菜单列表数据def get_industry_list(request): """获取行业列表""" industry_list = I原创 2021-03-11 16:06:33 · 477 阅读 · 0 评论 -
django显示上传的图片
django显示上传的图片上传的图片和系统的静态文件中的图片还是不一样的STATIC_URL = '/static/' # 别名# 配置静态文件加载路径STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]STATIC_ROOT = os.path.join(BASE_DIR, "/static/")# 图片上传配置MEDIA_ROOT = os.path.join(BASE_DIR, 'media').replace("\\", "/原创 2021-02-25 16:50:02 · 284 阅读 · 0 评论 -
HTML中引用公共部分代码
HTML中引用公共部分代码将公共部分的代码转jshttp://tool.chinaz.com/Tools/Html_Js.aspx在需要引用公共代码的地方,引入新创建的js<script type="text/javascript" src="header.js"></script>原创 2021-02-19 16:44:59 · 1675 阅读 · 0 评论 -
jQuery实现点击菜单显示对应图片
jQuery实现点击菜单显示对应图片<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> a{ text-decoration: none; } .tab-a { display: inline-block; padding: 5px 0;原创 2021-02-19 13:40:44 · 1439 阅读 · 0 评论 -
css实现二级菜单
css实现二级菜单首先创建一级菜单<div class="nav"> <ul> <li><a herf=''>1</a></li> <li><a herf=''>2</a></li> <li><a herf=''>3</a></li> <li><a原创 2021-01-29 17:19:11 · 896 阅读 · 0 评论 -
jQuery
jQueryjQuery是一个js函数库作用和js一样,负责页面和用户之间的交互优点是对js进行封装,兼容主流浏览器,代码编写也更简单jQuery用法jQuery的引入js有三种使用方法: 行内式(标签内) 内嵌式(html内) 外链式(单独的js文件) jQuery的引入方式: <script src="js/jquery-1.12.4.min.js"></script>jQuery的入口函数原生的js函数:(因为代码从上往下执行,在写js代码的时候原创 2021-01-14 15:08:41 · 61 阅读 · 0 评论 -
js
js定义前端开发三大件之一,运行在浏览器端的脚本语言,负责网页与用户的交互效果三种使用方式行内式(标签内部使用) <input type="button" name="" onclick="alert('ok!');">内嵌式(HTML页面使用) <script type="text/javascript"> alert('ok!'); </script>外链式(独立的js文件,需要在HTML中引入) <script原创 2021-01-14 09:24:16 · 466 阅读 · 0 评论 -
css属性
元素文本对齐方式text-align:centertext-align:lefttext-align:right设置以百分比计的行高line-height:90%设置元素的四个内边距padding:2cm 4cm 3cm 4cm设置元素的四个外边距margin:10px 5px 15px 20px上右下左设置下边框样式border-bottom:5pxborder-style:dott...原创 2021-01-13 13:56:17 · 55 阅读 · 0 评论 -
前端之vue表格居中处理
表头内容居中方式一:在每个el-table-column标签上边设置header-align="center"<el-table-column prop="id" label="ID" header-align="center"></el-table-column>方式二:在el-table的标签添加一个属性方法::header-cell-style="headStyle"在methods中设置一原创 2021-01-07 15:42:03 · 5973 阅读 · 1 评论 -
django项目之csrf跨域问题
问题:Forbidden (CSRF token missing or incorrect.)原因:django,会对合法的跨域访问做这样的检验,cookies里面存储的’csrftoken’,和post的header里面的字段”X-CSRFToken’作比较,只有两者匹配,才能通过跨域检验。否则会返回这个错误:CSRF Failed: CSRF token missing or incorrect解决方法:1.直接将settings中’django.middleware.csrf.CsrfVie原创 2020-11-18 13:17:04 · 224 阅读 · 0 评论 -
前端element框架之日常问题解决方案
在methods的函数中调用另一个函数mothods:{ aaa(){ alter('000') }, bbb(){ this.aaa() alter('111') }}原创 2020-11-09 16:21:17 · 219 阅读 · 4 评论 -
前端element框架之vue使用v-if对表格数据进行判断展示
<el-table-column prop="businessState" label="当前状态" width="250px" show-overflow-tooltip align="center"> <template scope="scope"> <p v-if="scope.row.businessState=='0'">配置中</p> <p v-if="sc原创 2020-11-09 14:06:15 · 3586 阅读 · 1 评论 -
前端之ajax和axios详解
最进在学习前端,在进行和后端交互的时候,出现很多问题,其中一个就是怎么进行交互。因为我前端使用的是vue,我在网上看到好多方法,其中ajax和axios用的比较多。就讲一讲这二者的区别axios是通过promise实现对ajax技术的一种封装,就像jQuery实现ajax封装一样。简单来说: ajax技术实现了网页的局部数据刷新,axios实现了对ajax的封装。axios是ajax ajax不止axiosaxios:axios({ url: '/getUsers',原创 2020-11-09 11:49:57 · 818 阅读 · 2 评论 -
前端之axios的各种请求方式总结
最近在学习前端,在进行前后端交互的时候,难免要用到请求,我现在使用过两种请求,一是ajax,另一种是axios,具体区分我在另一篇放着,大家感兴趣可与去看看。原始的axios的请求方式//原始的Axios请求方式axios({ method: 'post', url: '/user/12345', data: { firstName: 'Fred', lastName: 'Flintstone' }, timeout: 1000, ...//其他相关配置}原创 2020-11-09 11:16:33 · 1289 阅读 · 1 评论 -
前端element框架之动态渲染后端传递的数据
最进在接触一些前端,在使用vue 的element ui 构建表格的时候,出现一些问题,其中一个问题就是接收到后端的数据,但是不能渲染,或者渲染失败。所以我整理总结一下主要的问题和解决方法。<el-table :data="tableData" height="400" border style="width: 700"> <el-table-column align="center" prop="file_name" label="日期" min-width="90/100"&g原创 2020-11-09 11:04:41 · 2108 阅读 · 1 评论 -
前端之vue的双向绑定和单向绑定
vue.js的特点是:响应式和数据驱动,也就是将model和view进行绑定单向绑定:把model绑定到view上,当vue实例化的对象改变属性时,相对应的view中的属性也发生改变双向绑定:把Model绑定到View的同时也将View绑定到Model上,这样不管是view的属性发生变化还是model实例化的对象的属性发生变化,都能同时改变。vue绑定数据有三种方式:传值传值也就是通过绑定变量直接绑定数据:{{ name }}<div id='a'> //view <原创 2020-11-04 14:04:31 · 520 阅读 · 0 评论