vue
东林牧之
这个作者很懒,什么都没留下…
展开
-
99:15 error Component name “Login“ should always be multi-word vue/multi-word-component-names
1、说明你的组件名不是多个单词组成的,你要把组件改成多个单词,将Login改成LoginView。2、或者可以禁用vue的严格模式。在项目根目录下的vue.config.js文件中const { defineConfig } = require('@vue/cli-service')module.exports = defineConfig({ transpileDependencies: true, lintOnSave: false //加上这个配置})...原创 2022-03-23 16:33:17 · 3696 阅读 · 0 评论 -
vue实现全局过滤器,使用elementUI中的table,格式化后端传递过来的时间对象。
1、在vue中的main.js配置文件中全局过滤器import moment from 'moment'; Vue.filter('dataFMT', (input, formatString = "YYYY-MM-DD") => { //es5函数参数设置默认值 //const lastFormatString = formatString || // moment(input) 把时间字符串转成时间对象 // format(formatString)原创 2022-03-22 00:41:36 · 460 阅读 · 0 评论 -
vue使用Moment.js格式化时间,先计算时间差,再进行格式化,后端是django。
使用场景1、要写一个功能,关于出差申请的功能2、出差中:要有出差开始时间、出差结束时间、出差天数等。3、使用elementui的时间选择器,拿到的时间,在django的后端要使用DateTimeField字段来写。后面要传递给前端显示的时候,就会出现格式的问题,不好处理。后来就想着在前端先计算出两个时间差,获得出差天数。再通过moment格式化成YYY-MM-DD格式,就可以存到DateField字段了。安装:npm install moment --save在main.js中原创 2022-03-17 14:56:38 · 1264 阅读 · 0 评论 -
django日志文件读取,迭代读取固定数量的最新日志内容。
写一个生成器函数读取日志文件:def log_data(filename): from logs.logs_path import LOG_DIR ''' :param filename: 要读取的日志文件名 ''' fp = open(os.path.join(LOG_DIR, filename), 'rb') for line in fp.readlines(): try: line = str(line.de原创 2022-03-13 17:48:09 · 1333 阅读 · 0 评论 -
django+vue+elementui实现文件下载功能
django文件下载、vue文件下载、elementui文件下载;django和vue实现文件下载原创 2022-03-13 16:37:55 · 3163 阅读 · 0 评论 -
elementui手动上传文件、upload手动上传文件,限制上传的文件格式、限制上传的文件大小
1、前端效果2、前端代码 <el-upload class="upload-demo" ref="upload" action="https://jsonplaceholder.typicode.com/posts/" :file-list="fileobj" :http-request="httpRequest" :auto-upload="false"> <div class="el-icon-upload" styl.原创 2022-03-13 00:28:51 · 2938 阅读 · 0 评论 -
vue使用echarts是,动态获取数据,动态更新图表数据。
vue使用echarts实现数据可视化,动态更新echarts上的数据,动态更新图表数据,vue和echarts结合,动态获取数据。原创 2022-03-07 23:58:20 · 17007 阅读 · 1 评论 -
vue使用echarts时,初始化数据到eacharts时,数据显示不出来,将异步请求改成同步,获取promise中数据
应用背景mounted(){ get_data(){}, set_echarts(){ //在这里面需要用到get_data()中获取的后端数据 },}问题是axios请求时异步请求,在请求响应回来前,echarts就已经完成了创建了。此时请求还没有回来,所以图表就没有数据了。解决的方法就是让获取数据请求变成同步的,拿到数据后在创建echarts图表对象。例子1、图表指定标签 <div id="first-lin原创 2022-03-07 22:24:41 · 2657 阅读 · 1 评论 -
vue中数组对象的元素更新后,vue没有捕获到,没有重新渲染。
问题复现:data{return { options:[] }}在后端将要显示的数据赋值给options后面要对数据进行修改,修改后重新获取数据赋值给options,但是vue捕获不到,没有重新渲染。解决方法:在重新赋值的时候 var arr=[] this.$set(arr,0,值) this.$set(arr,1,值) #这种方式,能够被vue捕获到。 this.options = arr...原创 2022-03-07 18:18:50 · 511 阅读 · 0 评论 -
如何给elementui中表格的行设置样式
动态给表格每行添加样式,给elementui的表格每行添加样式,表格动态样式原创 2022-03-07 11:48:38 · 3169 阅读 · 0 评论 -
django+vue+elementui(upload):实现文件上传
前端elementui的upload:<el-uploadclass="avatar-uploader":action="img_url":show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload"> <img v-if="img_url" :src="img_url" class="avatar" style="height: 80px;原创 2022-03-04 22:44:29 · 1060 阅读 · 0 评论 -
vue请求url出乱码:[object%20PointerEvent] ,PointerEvent {isTrusted: true, pointerId: 1, width: 1, height:
报错信息在后台中console.log url中携带的参数数据1、代码函数methods:{ //获取用户数据,带分页功能 get_data (page = 1) { console.log(page) console.log(this.ruleForm.part) this.$axios({ url: this.$settings.base_url + `/user/usermessag.原创 2022-03-02 23:22:46 · 3337 阅读 · 0 评论 -
Response to preflight request doesn‘t pass access control check: Redirect is not allowed for a pref
Access to XMLHttpRequest at 'xxx' from origin 'http://localhost:8082' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request.1、后端已经解决了跨域问题2、有些请求不会出现问题,单独一两个请求解原创 2022-03-02 11:31:14 · 5841 阅读 · 0 评论 -
请求响应控制:vue请求响应拦截器 【用户权限四】
1、登录成功后,后端返回的数据格式{ "code": 100, "msg": "登录成功", "role": 1, "token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VyX2lkIjoxLCJ1c2VybmFtZSI6ImFkbWluIiwiZXhwIjoxNjQ2NzI3NDkzLCJlbWFpbCI6IiJ9.9cBPqkkTxXS2aAjwRadcWuQLc5wgHdAG_YeRc82hGz0", "原创 2022-03-01 18:10:59 · 583 阅读 · 0 评论 -
按钮控制:vue,根据用户权限,控制按钮的显示和隐藏
1、登录成功后,后端返回的数据格式{"code":100,"msg":"登录成功","role":1,"token":"eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VyX2lkIjoxLCJ1c2VybmFtZSI6ImFkbWluIiwiZXhwIjoxNjQ2NzI3NDkzLCJlbWFpbCI6IiJ9.9cBPqkkTxXS2aAjwRadcWuQLc5wgHdAG_YeRc82hGz0",...原创 2022-03-01 16:37:51 · 14128 阅读 · 1 评论 -
vue实现动态路由:根据用户权限,给用户动态添加其有权限访问的路由。菜单控制【用户权限三】
1、登录成功后,后端需要返回的数据格式{ "code": 100, "msg": "登录成功", "role": 1, "token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VyX2lkIjoxLCJ1c2VybmFtZSI6ImFkbWluIiwiZXhwIjoxNjQ2NjYzODg3LCJlbWFpbCI6IiJ9.PXBahru1kjfWxT9EITieiV72SVTkABZgCanEc1IjQoA",原创 2022-03-01 11:04:47 · 2299 阅读 · 0 评论 -
vuex的使用:存储组件间共享的数据【用户权限一】
1、如何动态生成侧边菜单。就是根据用户权限,动态给用户不同的侧边菜单。2、后端返回的数据格式{"token":"eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VyX2lkIjoxLCJ1c2VybmFtZSI6ImFkbWluIiwiZXhwIjoxNjQ2NjYzODg3LCJlbWFpbCI6IiJ9.PXBahru1kjfWxT9EITieiV72SVTkABZgCanEc1IjQoA","data":{"us...原创 2022-02-28 23:20:20 · 247 阅读 · 0 评论 -
vue2.6安装vuex失败
报错信息:执行:npm install vuex@3.6.2 -S到package.json查看vuex是否存在原创 2022-02-28 15:34:01 · 881 阅读 · 0 评论 -
Vue的路由导航守卫:【用户权限二】界面控制
1、配置位置,可以在vue的主配置文件js中进行配置router.beforeEach((to, from, next)=>{ if(to.path==='/login'){ //去登录的界面,直接放行 next() }else { //取出token let token = window.$cookies.get('oatoken') if (token){ //有token原创 2022-02-27 18:31:21 · 278 阅读 · 0 评论 -
vue中路由携带参数
1、query一、query参数<router-link to='/home/message?id=555&message="hhhh"'> 重要:如何在路由中携带js的变量。<!--路由跳转携带query参数,to的字符串写法--><router-link :to='`/home/message?id=${m.id}&mes=${m.name}`'> 1、给to加v-bind,简写是冒号 : 2、给路由加模板字符串...原创 2022-02-24 11:04:26 · 2272 阅读 · 0 评论 -
Vue上写一个全局的请求函数,将响应的数据return出函数。会得到Promise格式,响应的数据存放到[[PromiseResult]]中。如何从Promise中获取响应数据?
1、在main.js中写一个全局请求函数Vue.prototype.CuerrentUser = function () { return new Promise((resolve, reject) => { axios({ url: this.$settings.base_url + '/user/currentuser/', method: 'get', headers: {原创 2022-02-24 10:11:14 · 3413 阅读 · 0 评论 -
vue中使用axios发送请求
axios({ method:请求方式, url:请求地址, data:设置请求的数据(post和put的数据), params:设置请求的参数(get请求和delete请求), headers:{'token':'ssws34fdshrw'},#请求头中的数据从这里传输 }).then(function(res){ console.log(res) res拿成功的结果 #要拿到后端的数据,需要 res.data //因为axio.原创 2022-02-23 15:18:02 · 1814 阅读 · 0 评论 -
vue如何使用elementui分页器,前端分页器
这里是展示的表格,将后端的数据以表格的形式展示出来<el-table :data="tableDatas" style="width: 500px"> <el-table-column style="height: 100px" prop="username" label="职工号" width="120"> ..原创 2022-02-23 13:39:24 · 2349 阅读 · 0 评论 -
vue+elementui实现侧边导航,select菜单激活回调函数实现路由跳转
1、系统页面布局采用的是elementui布局<el-container> <el-aside width="200px"> <el-menu @select="menuClick"><!-- select是菜单激活回调--> <el-submenu index="1">原创 2022-02-21 11:49:44 · 5096 阅读 · 0 评论 -
前端常用网站:
1、渐变样式网站:https://www.grabient.com/https://www.grabient.com/2、动画网站:Animate中文网 – Animate安装、Animate使用、Animate下载http://www.animate.net.cn/3、时间处理模块:Moment.js 中文网Moment.js 是一个 JavaScript 日期处理类库,用于解析、检验、操作、以及显示日期http://momentjs.cn/4、vue-axiosvue-a..原创 2022-01-09 16:47:37 · 311 阅读 · 0 评论 -
vue-如何设置基础地址:将http://127.0.0.1:8000存到一个变量中。
在开发阶段的后端基址一般是:http://127.0.0.1:8000到了上线阶段肯定要改成公网地址,这时,我们前端在向后端发送请求的时候,如果都是直接使用http://127.0.0.1:8000,这样在上线前就要改很多的地址。所以在vue开发阶段前,我们要设置好配置,用变量来承载基址http://127.0.0.1:8000,到时候要改地址,只需要改一个地址就可以了。1、在src--assets下创建js文件夹,在js下创建settings.js: export defau原创 2022-01-05 13:19:55 · 1820 阅读 · 0 评论 -
vue:登录成功后如何保存token
vue-cookies1、安装:npm install vue-cookies2、main.js中配置//cookies配置import cookies from 'vue-cookies'Vue.prototype.$cookies=cookies;登录成功后,将后端传递过来的token取出保存到浏览器的cookie中 methods: { submitForm() { this.$axios({ method:'post',原创 2022-01-05 13:09:00 · 5031 阅读 · 0 评论 -
vue: 路由导航
触发式导航:1、格式:<router-link to='/index'> 首页</router-link>2、在浏览器中被渲染成a标签3、需要手动点击才能触发路由跳转功能4、应用场景:明面的路由跳转都使用它编程式导航:1、格式:this.$router.push('/home')2、使用场景:在触发某个条件后,自动跳转。 如:登录成功,自动跳转到首页 methods: { submitForm() {...原创 2022-01-05 13:00:24 · 463 阅读 · 0 评论