- 博客(12)
- 收藏
- 关注
RSS订阅原创 山东大学项目实训-地图圈系统-web开发-终章
山东大学项目实训-地图圈系统-web开发-终章通过这一个学期的项目实训，极大的增强了我写代码的能力，使我充分了解了前端与后端的交互操作。同时，我也极大的加深了对vue的理解，加强了页面的逻辑分析能力与设计能力。上面的是对项目实训提高了我对代码的认知水平，但是项目实训更多的还是小组内成员的相互协作方面。个人的力量是有限的，但是团队的力量是无限的。这个项目是个大项目，包含了APP、微信小程序、后台管理网站三个前端开发者，以及一个后端开发者四位成员。我是做后台管理网站的，数据虽然是从数据库里获得的，但是数据却
2021-06-01 17:22:52
155
2
原创 山东大学项目实训-地图圈系统-web开发（10）
山东大学项目实训-地图圈系统-web开发（10）一、项目介绍网站——主页二、项目介绍网站——关于我们三、项目介绍网站——滑动效果展示四、项目介绍网站——代码部分一、项目介绍网站——主页本实验的项目介绍网站，我打算从两个部分来写，分别是主页和关于我们两个部分。主页部分我打算用echarts以及echarts-gl做一个3D地球，并将其作为主页的主体部分，再配上简约的文字，使整个页面看起来比较立体。关于我们这一个部分，我就会把地图圈APP、地图圈微信小程序、地图圈后台管理系统这三部分做一个简单的功能介绍。
2021-06-01 16:51:57
345
1
原创 山东大学项目实训-地图圈系统-web开发（9）
山东大学项目实训-地图圈系统-web开发（9）一、足迹页面——用户端二、足迹页面——管理员端三、足迹页面数据分析——管理员端一、足迹页面——用户端目前，用户端和管理员端两部分已经基本告一段落。最后的足迹页面也结束了，下面我展示一下足迹也页面：包含起点、终点、运动时间以及记录时间。点击操作上第一个按钮，可以查看轨迹回放：这个页面在前面的文章中有过介绍，这里就不做过多赘述了。搜索框支持对起点和终点进行搜索：点击搜索，就会显示该条信息。如果搜索不到，则：代码如下：<template
2021-06-01 15:34:54
150
原创 山东大学项目实训-地图圈系统-web开发（8）
山东大学项目实训-地图圈系统-web开发（8）一、管理员后台页面设计二、数据分析页面设计三、其他主要页面一、管理员后台页面设计相比于用户页面，管理员能查看所有人的信息，也能修改所有人的信息；可以将普通用户升为管理员，可以删除所有动态以及评论等等权限。管理员页面还可以查看数据分析页面，包括用户数据分析、收藏数据分析等等。由于具体对应的页面太多，下面就拿收藏页面举个例子。这是用户收藏页面，在这里可以查看所有用户的收藏地点，以及该地点对应的经纬度。相比于用户端，这里实现了分页功能，以及根据地点的查询功
2021-05-27 17:26:18
124
1
原创 山东大学项目实训-地图圈系统-web开发（7）
山东大学项目实训-地图圈系统-web开发（7）一、动态页面——页面设计二、动态页面——删除动态/评论设计三、动态页面——九宫格图片设计四、动态页面——动态加载以及返回顶部一、动态页面——页面设计作为一个具有交际圈功能的系统，用户是可以在其中发布自己的动态的。动态的内容包括文字、图片等等，具体发布是在移动端上进行发布。对于web端来说，虽然用户无法在上面发布动态，但是可以查看动态、发布评论以及查看评论、点赞和取消点赞等操作。首先上成果图：在这里可以查看内容区、图片、点赞区和评论区。这里目前来说已经
2021-05-27 16:52:52
108
原创 山东大学项目实训-地图圈系统-web开发（6）
山东大学项目实训-地图圈系统-web开发（6）一、高德地图的引入二、收藏地址的地图展示三、用户足迹的回放一、高德地图的引入本项目基于高德地图API来开发，在web端中，用户可以查看收藏的地点的具体位置，以及足迹的回放过程，因此需要引入高德地图。访问高德地图开放平台（https://lbs.amap.com/）点击应用管理：点击创建新应用，就会创建一个新的应用。在应用中，可以通过点击添加按钮：在其中自定义key名称以及需要使用的服务，来获取key值。key值比较关键，以后所有需要使用高德地
2021-05-17 13:07:18
165
原创 山东大学项目实训-地图圈系统-web开发——月总结
山东大学项目实训-地图圈系统-web开发——月总结一、创建vue项目的过程：二、vue MVVM架构：三、ajax与axios区别：四、vue ref：五、请求设置请求头：该月总结主要是总结项目开题一个月以来，我在开发web页面上所踩过的坑与填坑过程。与大家共勉。一、创建vue项目的过程：关于创建vue项目，如果了解命令行，可以直接在idea里创建vue项目。这样做，如果需要额外的依赖，可以在下方terminal中直接以命令行的形式安装所需插件以及依赖。但是由于以前没有进行过vue项目的开发，依赖的
2021-04-21 17:16:42
169
原创 山东大学项目实训-地图圈系统-web开发（5）
山东大学项目实训-地图圈系统-web开发（5）一、管理员主页的设计二、用户主页的设计三、用户_操作信息页面设计四、用户_个人信息页面设计一、管理员主页的设计本次文章先来填上次挖的坑……以管理员身份登录进入主页：上次文章讲到，本主页设计是由顶部栏-侧边栏-内容主体三部分组成。顶部栏具有主页说明，即管理员端说明，以及一个退出按钮。点击登录时，会在本地的sessionStorage中存储token、username等信息，而点击退出，会清空掉目前所有存储在sessionStorage的变量。代码如下
2021-04-21 15:37:27
224
原创 山东大学项目实训-地图圈系统-web开发（4）
山东大学项目实训-地图圈系统-web开发（4）一、多种身份的登录二、token的使用以及路由守卫三、注册时注意的问题四、管理员用户登录主页面一、多种身份的登录在实际网页应用开发中，我们常常会遇到多种身份登录的问题。身份不同，意味着权限不同。不同身份的用户登录，所呈现的主页面是完全不同的。比如管理员和普通用户，他们登录到页面之后，管理员身份可以查看并且修改一些信息，但是用户身份却只能查看个人信息等等，这都体现了他们的不同。针对此，我设置了管理员和用户两种身份进行登录（修改了登录页面）：这个登录页面相
2021-04-14 16:57:49
226
原创 山东大学项目实训-地图圈系统-web开发（3）
山东大学项目实训-地图圈系统-APP（3）一、后台管理系统登录页面的类比二、后台管理系统登录页面的表单设计一、后台管理系统登录页面的类比首先呢，本项目需要使用vue+elementUI完成登录页面的设计，由于我只有html设计的经验，故先用html设计一个登录页面的简单demo：<head> <title>登录页面demo</title> <style type="text/css"> input { margin-lef
2021-04-07 11:51:08
219
1
原创 山东大学项目实训-地图圈系统-web开发（2）
山东大学项目实训-地图圈系统-APP（2）一、关于element-ui：二、测试element-ui：一、关于element-ui：关于element-ui，element-Ui是基于vue封装的组件库，简化了常用组件的封装，提高了重用性原则。由于使用Vue开发网页时，需要不断的进行组件的底层处理和组装，而阿里巴巴旗下的饿了吗团队就基于此开发了element-ui组件，简化了常用组件的组装，使得开发者在开发网页时可以较为方便的进行组件间的封装，降低了开发难度。我们可以去element-ui官网去查找e
2021-03-31 09:52:16
321
原创 山东大学项目实训-地图圈系统-web开发（1）
山东大学项目实训-地图圈系统-APP（1）一、Vue.js的安装：二、创建一个Vue项目：三、将该Vue项目导入到IDEA中：一、Vue.js的安装：本项目使用Vue进行网页端开发，故首先需要安装Vue.js。使用NPM安装方法：1.Node.js安装：从node.js官网下载并安装node，安装过程比较简单，故不在此赘述。使用win+r运行cmd，输入node -v命令：出现了版本号，证明node.js安装成功。本项目安装Vue使用npm进行安装，但是npm资源不全在国内，导致安装无法正
2021-03-21 20:37:43
253
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人