【vue】vue-express-mongoose-全栈c

1.说明

• 距离上次更新是三周了。中间忙公司项目，又断断续续敲了这个项目，大概时间使用了2周多一点吧。
• 前端用vue框架组件式开发，确实刚开始的感觉到有点繁琐，到了后面多个组件重用时，才感觉到什么叫方便和快捷。
• webpack在原来的基础上又优化了。更适合现在自己的开发工程目录。
• 后台开发继续用mongoose数据库，express>4.0版本进行搭建。

---

• 前端用到了上次全栈开发的粒子背景，MD5加密，滚动条优化，session前端设置，把经常修改的配置为公共文件，全局API文件，然后就是element-UI
• vue用到组件之间传递数据，全局挂载$http的axios，vue-router,vuex状态机管理导航显示和加载CSS的显示。
• 后台还是express搭的服务，用cors设置跨域。
• 还有个坑就是在服务端设置session一直没有成功。

---

• 总体来说两周多的时间踩了自己以前不知道坑，更了解vue一些用法。

2.前端

2.1跨域：

• .vue:由于前段使用.vue组件文件进行开发，这样在前端本身就是需要webpack配置开发模式的服务器，在一个端口下。
• 而后台提供服务，需要在另外一个端口下开发，这样后台就需要设置跨域。

• 前端配置跨域：

2.2 前端组件划分：

• 默认显示login组件，隐藏导航。

{
  path: '*',
  redirect: '/login'
}

• 【坑1】在每一个路由组件内部控制导航组件的显示与否：

2.3 登录成功

• 登录成功后向导航组件发出数据，设置session。

2.4 导航响应

• 导航组件自己不控制自己的显示与否，由路由组件控制。导航是负责响应到数据或拿到session的导航数据进行渲染。

2.5 App.vue组件watch

• 在根组件下判断路由的转跳进行视图区的样式设置

2.6 挂载axios

• vue原型上挂载axios对象

3.问题

3.1 eleUI-nav

• eleUI导航需要开启router=true模式进行挂载路由。点击的样式自己加上去的，在改变浏览器路由地址，需要相应到相应的路由项，然后加上当前的类名，这里用jq了，不想一层一层的找了。

3.2 用户--编辑权限

• 用户编辑权限的反选：

3.3 filter

3.4 绑定报错

• 注意这个报错是要求绑定的函数必须都在method下面，我原来写面向对象喜欢绑定在一个对象下面，然后遍历对象绑定到this上，但是调用的时候说找不到函数。

3.5 map加载

• 点击按钮添加位置，需要渲染地图，需要用到$nextTick，因为dom加载是异步的。

3.6 vue组件内部变量

• 内部初始化变量不允许下划线 _ 开头

3.7 google浏览器

• 测试的过程中发现：google浏览器发出请求两次。其中一次为OPTION;

• 比较好的解释

3.8 mongoose分页查询

4.项目

4.1 login

• 支持：登录、注册、游客模式

• 超级管理员登录，有全部权限；

• 游客模式和超级管理员有的权限一样，但是不能改变用户和设备数据；

4.1 用户列表

• 可以对用户进行增删改查，绑定解绑设备。绑定的设备不能被其他绑定，没有绑定设备的不能解绑。
• 列表可以显示绑定设备的情况。

4.2 我的设备

• 进入这个模块，开始进行浏览器定位，若支持则会定位成功，且保存当前登录者的地址。定位不成功，定位默认定位。

• 显示围栏：点击进行该设备的围栏数据请求。进行显示，鼠标放上围栏，会显示围栏的信息。

• 开始追踪：前端控制点会随机运动，进行一系列的轨迹点，停止追踪，会保存该条轨迹信息。在轨迹回放中可以看到。且在运动的过程中，如果进入围栏内部可以进行判断是否进入围栏且进行通知提醒。

4.3 设备列表

• 可以对设备进行增删改查，添加设备的时候可以在地图上拖动选点。
• 列表中可以显示设备的绑定情况和位置信息。
• 所有的设备在全局监控中可以看到。

4.3 围栏设置

• 可以对设备进行围栏的设置，是多围栏设置。显示原有的围栏信息。

• 新增围栏：支持圆和多边形：

• 对围栏可以进行编辑和删除：

4.4 全局监控

• 可以看到所有的设备：如果有很多人登录的话，可以看到所有用户地点位置。后期考虑可以帮对话加入。

4.5 轨迹回放

• 可以看到当前设备在【我的设备】中追踪的所有的轨迹线，可以进行模拟导航路线。

5.小结

• 别犹豫，去按照自己的想法敲就行了。