vue项目从0到1
文章平均质量分 83
围绕着实现一个五脏俱全的vue项目,从创建项目目录开始,一步步完成、一点点完善一个前后端分离的vue项目。前端样式框架为element-ui,后台语言为.net,包含大量基于arcgis js api的地图功能。后面基于地图的功能基本都放在这个下面
木卯彳亍
无论我在生活中试图做什么,都全力以赴地做好它;无论我献身于什么事业,都毫无保留地献身于它;无论做大事还是做小事,我总是一丝不苟、兢兢业业。我始终认为,任何天生或后生的才干,若不与坚韧不拔、谦逊踏实和埋头苦干的品质相结合,就不可能有所成就
展开
-
从零开始的VUE项目–01(前期准备和前台vue搭建)
前端:VUE (2.9.6) (编码工具:Visual Studio Code)后台:ASP.NET Web API (编码工具:Visual Studio 2019)数据库:MYSQL (可视化工具:MYSQL-Front)基本框架:Element UI前期准备:①已安装好npm,②已全局安装webpack和vue-cli,③在线arcgis js api(我用的是3.14,这个文件是用nginx1.19.1发布的),发布很简单,将链接:https://pan.baidu.com/s/18Eewl原创 2022-04-13 11:50:50 · 4501 阅读 · 2 评论 -
从零开始的VUE项目-02(创建后台ASP.NET Web API项目和连接数据库)
今天我们来创建后台和数据库1,创建ASP.NET Web API项目生成完毕,项目结构:运行看一下2,数据库建表我们对数据库的操作就在Controllers里的文件里,想一想这一篇原来是要做读取数据库数据生成菜单和登录登出的,所以要开始创建数据库了,菜单一张表,用户一张表,先做这两张表吧菜单表的数据用户表的数据3,后台构建在Controllers文件夹里新建MenuController.cs文件(新建控制器),代码:using Newtonsoft.Json;using S原创 2022-04-14 09:54:42 · 2792 阅读 · 0 评论 -
从零开始的VUE项目-03(数据的增删改查)
这一篇中,我们要实现的基本就是这么个东西这个页面就是我们创建的DataManagement.vue页面,我们的主要代码将写在这里面,这个表格我们将用Element-UI的table组件来实现组件地址:https://element.eleme.cn/#/zh-CN/component/table我们先用这个基础表格看看效果,点击表格下面的显示代码,我们把这些代码复制粘贴到我们的DataManagement.vue里,运行看看效果这时有人可能会问,我地图没有啊,来,让我们运行ng原创 2022-04-18 09:47:42 · 4962 阅读 · 0 评论 -
从零开始的VUE项目-04(echart基本使用,Swager后台api在线接口文档,前后端的发布
1,字段X,Y,Num都为数值类型,所以我们要限制输入,用el-input组件的属性,像X就变为:<el-input v-model="addForm.X" type="number" step="0.001" maxlength="11" auto-complete="off" size="mini"><.原创 2022-04-18 10:01:32 · 897 阅读 · 0 评论 -
从零开始的VUE项目-05(记住密码功能和表格的行点击定位)
1,我们来实现登录界面的记住密码功能,效果如下:实现功能:1.记住密码勾选,点登陆时,将账号和密码保存到cookie,下次登陆自动显示到表单内2.不勾选,点登陆时候则清空之前保存到cookie的值,下次登陆需要手动输入思路:通过存/取/删cookie实现的;每次进入登录页,先去读取cookie,如果浏览器的cookie中有账号信息,就自动填充到登录框中,存cookie是在登录成功之后,判断当前用户是否勾选了记住密码,如果勾选了,则把账号信息存到cookie当中Login.v.原创 2022-04-18 10:22:15 · 725 阅读 · 0 评论 -
从零开始的VUE项目-06(字符拦截和地图功能:点聚集、热力图)
今天先改一下错,1,查看一下后台的所有Controller.ce文件,看一下下面代码里面string sqlCconnStr = "server=localhost;port=xxx;user=zydbuser;password=xxx; database=xxx;charset=utf8";charset=utf8是否加上了,没加上的话要加上,不然在查询或是新增时会出现结果为空。2,第二点是之前做的字符拦截,是对用户输入判断,特殊字符变为空,可是如果用户不输入,直接在.原创 2022-04-18 10:29:49 · 488 阅读 · 0 评论 -
从零开始的VUE项目-07(围绕地图做一些功能:恢复默认地图、键盘导航、放大,缩小、清除临时图层、图层管理,通过周期函数模拟实时Echart曲线变化)
这一篇我们继续来围绕地图做一些功能。我们来做一下地图工具恢复默认地图、键盘导航、放大,缩小、清除临时图层、图层管理图层管理里有这么几个图层:其中,模拟实时数据,通过周期函数(setInterval)+随机数,模拟了一下实时数据曲线需要的一些图片在里面:链接:https://pan.baidu.com/s/1sevu45p9-Tiho-OPNJ6viQ提取码:gkjs在components文件夹里新建tool.vue文件,代码如下:<!--地图工具.原创 2022-04-18 14:59:04 · 798 阅读 · 0 评论 -
从零开始的VUE项目-08(el-upload做文件上传)
这一篇中我们利用el-upload来做文件上传,效果如下:el_upload组件文档地址:https://element.eleme.cn/#/zh-CN/component/upload1,在数据库的data表里加一个附件字段Attachment2,在api后台文件夹的根目录新建Img文件夹3,Data.cs添加附件字段,变为:using System;using System.Collections.Generic;using System.Linq.原创 2022-04-18 15:23:13 · 2908 阅读 · 0 评论 -
从零开始的VUE项目-09(vue-alipayer-v视频播放)
这一篇来说视频,使用的是基于 Alipayer封装的组件vue-alipayer-v2,地址效果图:现在是直播模式,应该是可以播放监控摄像头的,但我没有能用的监控摄像头IP。还记得我们之前的模拟实时数据监测图层吗?这里有个在线视频,之前是放上个视频播放,现在来改一下。1,首先运行命令安装vue-aliplayer-v2组件npm install vue-aliplayer-v22,将下面的文件解压缩后放到src文件夹里链接:https://p.原创 2022-04-18 15:26:16 · 2358 阅读 · 2 评论 -
从零开始的VUE项目-10(使用sqlsugar连接数据库)
这一篇中,我们将修改数据库操作方式,使用sqlsugar这一款ORM框架来进行数据库操作。1,程序NuGet引入两个类库sqlsugar和Newtonsoft.Json,2,Controllers文件夹下新建Helper.cs类Helper.cs全部内容如下:using SqlSugar;using System;using System.Collections.Generic;using System.Linq;using System.Web;namespac.原创 2022-04-18 15:29:17 · 2855 阅读 · 0 评论 -
从零开始的VUE项目-11(轨迹回放)
实现结果:小车按轨迹移动原创 2022-04-20 17:50:34 · 1560 阅读 · 3 评论 -
从零开始的VUE项目-12(sqlsugar一些常用的查询使用)
这里接着文章10来说明一下sqlsugar一些常用的查询使用原创 2022-06-08 17:11:42 · 1018 阅读 · 0 评论 -
从零开始的VUE项目-13(字典数据管理)
字典管理原创 2022-07-27 11:39:22 · 2429 阅读 · 0 评论