创新实训记录
qq_41998718
这个作者很懒,什么都没留下…
展开
-
[14][创新实训记录]Vue跨域问题
Vue跨域问题前后端分离常见问题——跨域问题首先什么是跨域?由于浏览器同源策略,凡是发送请求url的协议、域名、端口三者之间任意一个与当前页面地址不同即为跨域。跨域通常是一下情况组成的处在不同的IP下处在同一IP下的不同端口网络协议不一致域名不同或子域名不同出现跨域问题,跨域问题尤其是体现在Vue前端通过axios进行HTTP请求的时候展现出来的跨域问题。出现跨域问题可以通过配置config中的index.js中的proxyTable来实现dev: { env: req原创 2020-07-01 22:33:09 · 138 阅读 · 0 评论 -
[13][创新实训记录]Vue向数组中添加对象
Vue向数组中添加对象问题出现由于在显示个人的信息的时候我想要使用表格进行展示,iView的表格组件中需要传递的是一个数组,里面包含着每一个具体的对象。但是我通过HTTP的GET请求获取的是一个JSON对象,因此我面临了一个问题,如何将对象添加到数组中。问题解决data中定义的表格数组data是data : [],我通过axios的GET请求获取的对象存储在了object: {},中,如果我想要将object添加到data中,要注意data和object都是data中定义的变量,一次调用原创 2020-07-01 22:29:13 · 2221 阅读 · 0 评论 -
[12][创新实训记录]Vue父组件向子组件传值
Vue父组件向子组件传值我们知道在vue中我们会常常用到组件模块化的思想,也就是我们常常会把一个部分包装秤一个组件来使用,但有的时候我们父组件获取的值,需要传递到子组件中继续使用问题提出当前用户已经登录的情况下,我在student的组件中已经获取到了当前用户的信息,但是我student的子组件是没有获取到用户信息的,在子组件中进行学生的一些数据搜索我们要在请求一遍学生信息数据吗?并不是!当然是通过父组件传递给子组件中了问题解决父组件:首先需要在data中定义数据,我这边定义了Info对象用来原创 2020-07-01 22:28:32 · 75 阅读 · 0 评论 -
[11][创新实训记录]iView表格内容渲染
iView表格内容渲染问题提出由于得到的接口数据不一定与最终的数据渲染到前端的样式是相匹配的表面上在表格中最终显示的是这个学生在组内的角色,但实际上请求接口中存储的值确实0和1,其中1代表队长,0代表队员。还有分数的显示亦是如此,在没有打分的时候,默认值是-1,这样的话我们只要遇到-1就可以在前端显示未公布分数的字样。那么iView表格中如何渲染数据?问题解决前往iview官网的表格组件中可以发现,有render方法支持渲染我这里就重点介绍我常用的一种渲染方法代表表格表头的hea原创 2020-07-01 22:26:46 · 204 阅读 · 0 评论 -
[10][创新实训记录]Vue的变量赋值后双向绑定问题
Vue的变量赋值后双向绑定问题问题提出在指定一个表单的时候,我本来的想法是通过设置一个空对象对原本中途停止填写的表格进行格式化,也就是如果提交一个新表格的时候回事全部为空的情况。因此我使用了this.formItem = this.formItem1但最终的结果让我大跌眼镜我原本设置的formItem1是空的,填写表格的时候对formItem进行动态赋值,但点击取消重新再点击想要新增公告的时候,我希望将空的值赋予formItem,我发现打开的表单总是保留着上次填写留下的数据,那这是为什么呢?经原创 2020-07-01 22:24:09 · 474 阅读 · 1 评论 -
[09][创新实训记录]iView的表单验证
iView的表单验证iView表单组件iView提供了丰富的组件,其中制作精美并且功能齐全的表单验证就是我们本次创新实训中前端的重要部分,当然在其中也踩了不少坑我们使用表单的地方有新建或修改某一数据的时候登录界面iView中的表单验证以及丰富的Api可以实现很多的功能踩坑首先讲一下iView的表单组件的组成html部分<Form v-if="Modal" ref="Form" :model="formItem" :label-width="100" :rule原创 2020-07-01 22:22:29 · 124 阅读 · 0 评论 -
[08][创新实训记录]Vue中scoped的原理与scoped使用
Vue中scoped的原理与scoped使用scoped作用与功能实现组件的私有化,不对全局造成样式污染,表示当前style的属性样式只属于当前模块。这个方法很方便,但网上很多人表示这个也会对我们使用公共组件造成很多困难,我们需要先从scoped实现原理开始了解问题发现:由于出现了在父页面使用style中和子组件中定义了一样的class发现渲染出的页面很奇怪,并没有按照自己在<style>中定义的css进行表现。最终发现了vue会有全局样式污染这一点。最终通过学习了scoped实现了原创 2020-07-01 22:17:12 · 90 阅读 · 0 评论 -
[07][创新实训记录]SSH本地端口映射到公网IP
这里写目录标题SSH本地端口映射到公网IP实现目的正向转发&反向转发正向端口转发反向端口转发配置过程SSH本地端口映射到公网IP实现目的为了实现接口对接的顺利进行,能够获取后端同学写好的Api,我们小组需要通过SSH通过本地端口映射到公网IP上来让小组内的其他成员访问,也就是通过反向端口转发实现端口映射。正向转发&反向转发正向端口转发在本地启动端口,把本地端口数据转发到远端。也就是所谓的让本地访问到远端的端口反向端口转发让远端启动端口,把远端端口数据转发到本地。也就是能原创 2020-06-28 09:56:55 · 588 阅读 · 0 评论 -
[06][创新实训记录]Vue获取当前时间与Vue的html标签如何获取变量
Vue获取时间功能问题提出我们做的是有关学校的项目实训管理系统在想要记录实训年级的时候,我想不应该单纯地写死数据,而是能够通过当前的年份将包括今年的前五年都放到年级的选择栏中。由于上半年的话是不包括今年的前四个年级是在校的,如果是处在下半年的话学校中是包括今年在内的前四年的四个年级。当然我这里直接显示了前五个年级,亦可以增加一个判断是否是处在上半年还是下半年问题解决export function getNowDate() { let date = new Date(); let y原创 2020-06-28 09:08:11 · 252 阅读 · 0 评论 -
[05][创新实训记录]Vue组件选择性可视化
Vue的组件选择性可视化问题提出在实现后台管理页面的时候有一个页面需要实现:管理员对数据库进行备份开启和关闭的页面。我当时的就想到了,如果开启备份,那么需要设置一些相应的配置,例如备份间隔时间、备份信息、备份开启的时间段。那么这个该如何实现就成了一个问题解决思路我使用的是iview组件库,采取一个switch用来控制当前是否处于备份状态。而这个状态是要从数据库里获取的。那么要实现选择性可视化,就要实现switch开启的时候,显示备份间隔时间、备份信息、备份开启的时间段三个信息,如果switch关闭的原创 2020-06-23 23:45:16 · 155 阅读 · 0 评论 -
[03][创新实训记录]iview实现侧栏和页面的关联
iView实现侧栏和显示页面的关联iview是什么利用iview实现管理界面侧栏功能布局侧边栏Sider与内容Content关联刷新后侧边栏高亮保持不变iview是什么iview是一套基于Vue.js的高质量UI组件库,里面组件齐全、组件美观,是一套适合开发界面管理系统的UI组件库,因此我们选择其作为开发项目实训管理系统的参考。利用iview实现管理界面侧栏功能布局iview提供了各种形式的Layout,我们可以在其中选择适合自己开发的项目的后台布局,实现相应的侧边栏功能。我这里选择的是顶部-侧原创 2020-06-19 10:07:44 · 540 阅读 · 0 评论