- 博客(24)
- 收藏
- 关注
RSS订阅原创 创新实训（二十四）
明天就要进行最后的答辩了，做了一个学期的项目也要画上句号了，在这里稍稍总结一下吧。这还是我第一次参加一个正式的项目开发。之前做的东西都是课设之类的，只需要一个人就能做完，也不需要什么前后端分离之类的事情。这次的项目前端都由我一个人负责，而在此之前我对vue毫无了解，对web开发的仅有的一点知识来自于大二时的网页制作课，那也是我此前唯一使用web开发的界面。在这次项目实训的过程中，我从零开始学习了vue与前端开发的知识，并且做出了还看得过去的页面。这其中的过程虽然遇到了很多很多的问题，但是在想办法解决了这
2021-06-09 12:49:16
97
1
原创 创新实训（二十三）
在测试时我们又发现了一个bug，就是在搜索景点时如果切换城市重新搜索，那么景点的名字和地址（页面直接传进去的部分）会改变，但是景点图片、评分和介绍（子组件自己调用方法的部分）不会改变。后来我发现这是因为我把子组件调用方法写在了组件创建时，而页面刷新时子组件并不会重新创建，也就不会重新调获取信息的方法。解决这个问题也不难，就是在子组件中加入监听器监听组件中地址属性的改变，改变时再次调用获取信息的方法即可。代码如下： methods: { getInfos() { this.load
2021-06-05 17:32:24
55
原创 创新实训（二十二）
在将前端打包并和后端连起来以后，我发现百度地图api的接口又不能用了，但之前明明是好的。查了一下发现，这还是跨域问题。之前解决的方法是设置了代理，但一旦进行了打包，代理就不再起作用了，因此要采用其他的方式解决。幸好百度地图api提供了这种方式，也就是在之前的接口链接最后加一个"&callback=方法"，其中方法是你接收到的返回数据进行处理的方法名，然后需要用的到jsonp插件，安装和引入方法和之前一样。使用方法如下：var url = "http://api.map.ba
2021-06-04 00:30:39
58
原创 创新实训（二十一）
美食信息的展示更为简单，因为它只有名称、图片、介绍三种信息。布局方式和之前还是一样，在介绍这一栏，我又添加上了之前使用的展开收起模块。HTML：<template> <div class="food"> <div class="lists"> <div class="item" id="canchange"> <div class="item_pic" fit="contain"> &
2021-06-02 23:12:40
60
原创 创新实训（二十）
优惠的信息显示和门票的类似，因为它们都没有图片，所以看起来单调了不少，但我也没想到什么更好的设计，就这样展示吧，应该也看得过去。优惠的价格中有一个原价和一个现价，我想对原价添加一道划线，可以直接添加css样式text-decoration: line-through;。HTML：<template> <div class="fooddiscount"> <div class="item_content" @click="jump">
2021-06-02 02:07:46
34
原创 创新实训（十九）
景点门票的展示页面和之前一样的思路。不过这次由于后端传给我的数据格式稍微复杂了那么一点点，所以对门票的数据处理多了几个步骤。HTML：<template> <div class="ticketinfos"> <navbar :activeIndex="4" :activeIndex2="4"></navbar> <div class="searchbar"> <el-col :span="4" :offse
2021-06-01 15:30:04
85
原创 创新实训（十八）
景点门票的数据有门票名称、类型、价格、来源，以及一些其他的信息。我想的布局方式依然是从上到下依次展示相关信息，但由于有些门票的详情过长，因此我需要写一个展开收起简介的方法。首先我要判断简介是否过长，如果过长则显示展开收起按钮。但由于简介中有部分含有换行符，并不能直接通过字符串的长度判断，因此我采用了获取div高度的方式来对是否过长进行判断，如果该div高于我的设定值，则显示按钮，没高则不用显示。接下来就是div高度的设定，在未展开状态，它的高度是固定的，并且不能使用滚动条，而在展开状态时，高度改
2021-05-31 01:20:15
55
原创 创新实训（十七）
在写路径规划界面的时候需要把酒店和所有景点之间的路径以轮图的形式画出来，单击相应的线可以跳转到对应的路线导航页面中去。我一开始想直接用百度地图api提供的静态图方法，它可以把线段直接画在地图上，还可以规定图片大小，感觉效果很好。但我很快发现这样只能实现把路径画出来的功能，完全不能实现单击跳转功能。于是我只好寻找其他方法。后来我发现可以利用百度地图在vue上的插件解决这个问题。使用npm安装好百度地图插件并引入之后，将地图组件放进需要的页面中，只要有点和线段两端的坐标，就可以在地图上画线了。对于跳转到路
2021-05-29 22:14:39
41
原创 创新实训（十六）
酒店结果展示界面要实现展示酒店搜索结果（单组或多组）、提供重新查询功能、返回上一页选择景点功能、排序功能。其他的功能实现都没有遇到什么问题，只有返回上一页选择景点功能出现了问题。一开始，我直接用了this.$router.go(-1);，但我发现这样返回只是返回了上个页面，上个页面的状态并没有被保留，而我想实现的效果是返回后页面还能保持离开时的状态。在尝试了多种方法以后，我最终还是老老实实地选择了路由传参跳转的方式，这样虽然麻烦一点，要在页面创建时判断是否有路由传参，但比较稳定。此页面跳转：retur
2021-05-28 10:32:17
56
原创 创新实训（十五）
由于用户搜索的景点距离可能较远，此时会返回多组酒店，因此我们需要在有多组酒店返回的情况下处理界面。我的尝试是用列表循环接收每组数据，一个li为一组，再在列表中循环添加单个酒店。尝试是成功的，但我又发现了新的问题，就是每组酒店都会返回20个结果，如果这样展示的话从第一组翻到第二组要很麻烦，因此我需要写一个能展开收起每组酒店的按钮。但由于我是使用循环绑定的数据，我不能将控制它们展开收起的判断绑在一个数据上，因此我尝试使用数据的index与当前展开的数据作比较为判断依据，一致则展开，不一致则收起。这样的结果是成
2021-05-27 22:06:25
43
原创 创新实训（十四）
写完了单个网站的展示以后，就可以把整个酒店的信息展示出来了。除了分网站的信息之外，酒店的信息还包括名字、图片，已经一个去往路线规划这个功能的按钮。我对酒店信息卡的设计思路与之前的景点信息卡类似，就是将图片放于左侧显示，右侧上方是酒店名称，下面是横列的各网站信息，路径规划按钮被放在了最右侧。我在写完布局测试的时候发现，各网站的信息被纵向显示了，但我的想法是让它横向展示的。后来我发现，这是因为我将网站信息放进了div里，而div是块级元素，默认为一个占一行，因此会出现这种情况。我将网站信息的css中添加了f
2021-05-26 23:17:47
41
原创 创新实训（十三）
在展示酒店信息时，由于一家酒店有来自多个网站的信息，于是我打算写个组件用来展示单个酒店的信息（类型、评分、评论数、价格、距离等）。该组件的构造很简单，就是这些信息从上到下依次展示出来即可。其中评分我做了一下小区分，根据评分的高低令其的颜色不同，更直观的表达出评分的高低。以下是代码：<template> <div class="web" > <!-- <a :href="link"> --> <div class="ite
2021-05-26 00:14:13
36
原创 创新实训（十二）
酒店查询界面应该是一个比较复杂的页面了，它需要先接受用户输入，进行景点的检索，并且显示搜索结果，接下来要处理用户对景点的选择并实时体现在界面上，在用户进行酒店的检索时还要确定用户当前选择的景点和用户当前在景点搜索框中选择的城市是否一致，不一致则传递用户选择景点的对应城市。部分方法代码如下: methods: { show() { if (this.province == "") { alert("请选择省份！"); } else {
2021-05-25 00:27:26
83
原创 创新实训（十一）
在写查询酒店的页面的时候，需要先让用户输入需要搜索的城市，再对相应的城市进行景点检索。由于百度地图api可接受的最大的城市级别为市（包括直辖市），因此需要两个选择框，先让用户选择省份（直辖市），再根据第一个选择框的内容确定第二个选择框的城市。每个省份的所有城市可以通过百度地图api得到。我的想法是为第一个选择框添加选择改变的时候会触发的方法，根据第一个输入框的内容判断第二个输入框是否可用（直辖市），再调用百度地图api的方法返回该省份的城市信息，并显示在第二个选择框中。但在我实际操作的时候，却发现将返回值
2021-05-21 12:19:49
46
原创 创新实训（十）
由于我们的酒店推荐需要根据用户选中的景点进行相应的推荐算法，因此我要在前端添加展示某城市所有景点以及搜索某城市详细景点的方法。这里为了得到城市的景点信息，我使用了百度地图API接口，使用了它的行政区划区域地点检索接口。接口的链接组装倒是很简单，只需要将用户输入的内容和接口的网址参数用字符串拼起来就行了，但在我尝试连接接口的时候，出现了问题。开始我并不知道要如何调用这个接口，于是直接用了我调用后端接口的方式——使用axios进行数据的传输与接收返回值，但是报错了，显示不允许访问该接口。在我确认了我的链接没有
2021-05-20 00:56:47
41
原创 创新实训（九）
景点信息的组件主要包含景点的以下几个信息：景点名称、景点排名、景点分数、景点地址、景点位置、景点图片、景点介绍。对于景点的布局，我将图片放在了整个信息卡的左边，除了景点介绍的其他信息放在右边从上到下依次排列，景点介绍放在悬浮框中，鼠标移到信息卡上时显示悬浮框。代码如下：<template> <div class="scenic"> <el-popover placement="bottom" title="景点简介" width="350"
2021-05-17 21:07:39
58
原创 创新项目实训（八）
写组件时要展示相应的信息，其中包括一张预览图片。之前在看携程的网站的时候看到它的搜索结果里鼠标移到图片上的时候会有一个放大的效果，于是自己也试了一下，效果还不错。要实现这个效果，需要有一个固定大小的容器（我使用的div），设置好它的高度和宽度，设置overflow为hidden（这步很重要，不然图片放大的时候可能会出现滚动条），然后将img标签放在这个div里，设置img的hover样式为transform: scale(1.1);，再为img添加样式transition: all 0.5s;添加变换时间
2021-05-12 23:48:13
98
原创 创新项目实训（七）
最近完成了网站主页的编写，风格有参考滴滴的首页。主要思路就是利用之前写好的视频背景，再在上面蒙一层颜色，让背景显得模糊，再来个圆形遮罩，写几个字，哎，高级~我还在圆形遮罩上加了一个鼠标移上时出现阴影的效果，本来想给文字加的，但是我为了好看把文字放在了圆形下面，hover事件就触发不了了，所以只能直接加在圆形上，但实际效果也还好。附上代码：<template> <section class="VideoBg"> <video autoplay loop mut
2021-05-11 20:38:47
65
原创 创新项目实训（六）
为了对界面进行优化，我决定使用视频作为网站首页的背景，这里就要面临一个如何将视频作为网页背景的问题。在此之前，我尝试过用图片做网页背景。当时我使用的方法是在div标签中嵌套img标签，并将此div以及包含了页面中其他内容的div的position设置为absolute，然后规定位置。所以我尝试了用同样的方法制作视频背景，只是将img标签换为了video标签。这个尝试是成功的，视频成功地出现在了其他页面内容下方。接下来只需要优化一下背景就可以了。...
2021-05-02 22:46:59
66
原创 创新项目实训（五）
在写搜索界面的过程中，我遇到了这样一个问题。我的搜索流程是在搜索界面输入完条件并点击搜索按钮后，会跳转到另一个页面显示结果，因此用户输入的数据被在记录第一个页面中，而前端对后端数据的请求会在另一个页面中。这也就意味着获取数据和请求数据的操作分别要在两个页面中进行，而这显然是不好实现的。为了将这两个操作合二为一，我需要在两个页面中传递参数。传参的方法并不难。首先，我尝试了param方式，也就是在跳转方法中加入param：this.$router.push({ name: "ticket
2021-04-22 01:25:12
77
原创 创新项目实训（四）
由于我们采用的是前后端分离的开发模式，因此我们需要进行前后端联调。我负责的是前端部分，因此我只需要完成前端需要进行的配置即可。我所使用的Vue框架现在比较主流的就是用axios模块进行网络请求，因此我就选择了这种方式。首先在命令行中进入项目所在的文件夹，接着执行如下命令安装axios：npm i axios -S根据我在官网找到的例子，完成这步以后就可以直接调用axios方法了，但在我实际使用中却发现产生了报错axios is not defined。经过查阅后发现，由于我安装的axios并不属于v
2021-04-19 23:53:34
110
原创 创新项目实训（三）
创新项目实训（三）在完成了所需要的框架等的安装与配置后，就要开始使用Vue写前端了。在Vue中一个非常重要的概念就是组件系统了。组件系统是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用，几乎任意类型的应用界面都可以抽象为一个组件树。因此，要用好vue，就要好好掌握组件这一概念。根据官方文档，在 Vue 里，一个组件本质上是一个拥有预定义选项的一个 Vue 实例。也就是说，它和页面一样，都可以写在**.vue**文件中，然后在需要的地方进行引用。这里贴一个导航栏组件的代码。<te
2021-04-19 00:21:10
101
原创 创新项目实训（二）
创新项目实训（二）由于Vue有着单页面的思想，就是把结构、样式与Js代码都写在一个文件里面，引入这个文件就可以把相应的结构、样式与代码全部加载出来，因此可以通过编写可重复利用的组件的方式使界面风格统一，同时还能使代码编写更为高效。由于需要编写的组件并不算很少，为了提高开发效率，我选择了使用安装一个现有的组件库——ElementUI，以此简化一些基本组件的开发。由于ElementUI是国内人员开发的（饿了么团队），因此它用起来更加方便简单。要安装Element也很简单，打开cmd，进入你的vue项目所在
2021-04-17 23:50:30
105
原创 创新实训记录（一）
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
2021-04-16 00:19:37
139
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人