![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
项目实训
文章平均质量分 59
缓缓-
这个作者很懒,什么都没留下…
展开
-
项目实训(十)词云的制作
echarts官网下架了词云图,从网上找到不同的属性修改。2、代码设置颜色在自定义数组中随机选取设置字体大小从15-60,翻转角度从-45-90原创 2022-06-05 22:21:47 · 892 阅读 · 1 评论 -
项目实训(九)关于页面中的帮助
目录一、帮助组件1、代码2、展示效果设计一个可以展开问题和答案的组件,插入到【关于】页面,实现帮助功能。2、展示效果 点击展开,左右可以分别展开一个答案。原创 2022-06-05 17:22:52 · 335 阅读 · 0 评论 -
项目实训(八)分类界面的展示
目录一、Swiper插件1、安装swiper2、导入css中二、分类界面设计1、左侧side部分代码2、右侧详细内容3、成果展示Swiper是纯javascript打造的滑动特效插件,面向手机、平板电脑等移动终端,以及PC端网站。能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。二、分类界面设计1、左侧side部分代码2、右侧详细内容3、成果展示 其中点击左侧、滑动右侧内容、点击翻页按钮都可以实现翻页效果。...原创 2022-06-05 16:45:23 · 253 阅读 · 0 评论 -
项目实训(七)上下文展开与导出界面
同样的,在点击【展开】时,带着参数段落id,跳转到显示上下文的页面。二、上下文的段落展示1、代码通过展示每个段落的中、英文,并循环展示在一个div中。每个段落之间加一个回车,展示更加清晰。mounted()交互代码:2、结果展示在展示上下文中,用户可以点击导出文本txt形式3、在main.js中全文引入4、设置导出方法在导出按钮上设置事件属性,调用saveAs方法,设置导出的格式和名字5、结果展示 由于展开上下文,用户点击可以回到上一个页面的原创 2022-06-03 16:29:55 · 170 阅读 · 0 评论 -
项目实训(六)段落查询设计
目录一、关键词检索跳转到段落检索1、vue中$route传参2、将属性携带在页面跳转过程中二、段落查询的页面展示1、循环div显示段落2、成果展示3、通过复选框选择书籍范围4、二次查询的实现5、查询框展示通过router-link标签:接收参数: params传参接收参数:2、将属性携带在页面跳转过程中要求在关键词检索完毕后,可以通过中文(简体)跳转到含有对应关键词的段落查询中。在段落展示页面接收参数:二、段落查询的页面展示1、循环div显示段落原创 2022-06-03 16:14:34 · 155 阅读 · 0 评论 -
项目实训(五)关键词查询的交互
一、选择器初始化1、默认选择在检索关键词时,默认选择中—>英,可以根据created()方法实现。 created() { this.searchvalue = this.options[0].value },在el-select中设置v-model为searchvalue,实现双向绑定。于是在js中可将searchvalue的值更改,初始化为“中—>英”。2、浏览器渲染过程构建DOM树 构建css规则树,执行解析js文件 构建渲染树Re..原创 2022-05-30 00:16:40 · 200 阅读 · 0 评论 -
项目实训(四)检索页面的设计
一、页面布局1、页头面包屑页面为导航栏中“检索”的下级菜单“关键词查询”,检索包括关键词查询和段落查询。所以设计一个区域,显示当前页面的路径,方便用户快速返回之前的任意页面。代码如下: <!-- Start Page Title Banner --> <section class="inner-page-banner" data-background="static/img/面包屑.png"> <div class="container原创 2022-05-29 21:54:34 · 585 阅读 · 1 评论 -
项目实训(三)CSS样式与动画
一、div倾斜样式通过查找资料,发现可以给div设置随着鼠标移动倾斜的样式,美化页面。<script src="static/js/vanilla-tilt.min.js"></script>导入vanilla-tilt.min.js,提供了这个方法,在元素后面添加 data-tilt即可。<div class="col-lg-4 col-md-6" data-tilt> <div class="feature-content原创 2022-05-29 17:58:46 · 184 阅读 · 0 评论 -
项目实训(二)首页搭建
(一)路径配置将indexOne.vue的路径配置到二级路由中,再将默认路由改为首页。(二)indexOne.vue@import '../../public/static/css/bootstrap.min.css';@import '../../public/static/css/all.min.css';@import '../../public/static/css/animate.min.css' ;@import '../../public/static/css/sw原创 2022-05-29 16:31:23 · 510 阅读 · 0 评论 -
项目实训(一)前端框架的搭建
一、搭建前端框架首先选定使用的前端框架为Vue,先通过组件和导航路由确定了网页界面的大致框架二、设计简单的页面三、导入js和css样式框架,修改样式原创 2022-05-22 16:53:50 · 3110 阅读 · 0 评论