后台管理系统的项目小结

后台管理系统的项目小结
写起来却触及到不少知识点，关于vue全家桶什么的都用到了
实现功能或者一些想记录的点

• 登录（axios实例和拦截器）
• 动态侧边栏和面包屑(this.$router.options.routes,meta路由元的使用)
• iconfont的使用
• 页面布局和可复用组件
• element-ui,js-cookie,一些工具方法的使用
• vuex模块化和抽离api接口
• es6/7和webpack的一些语法

  Read More...

vue后台管理系统权限验证的思路分析

在写后台管理系统时涉及到了权限验证，根据登录角色来设置用户权限.

实现思路

• 用户登录返回token,根据token去查询用户信息和用户角色;
• 在router.js中，区分需要权限的路由和不需要权限的路由，先挂载不需要权限的路由，例如登录页/首页这种;
• 在store里面过滤和动态添加路由，生成最后的路由表state.routers=constantRouterMap.concat(asyncRouterMap);
• 当页面刷新时;

  Read More...

vue实现登录和个人信息组件展示

最近在写一个重构node社区的小项目，碰到了登录的问题，实现思路如下：
① 获取用户表单信息，使用axios提交，提交成功后，把数据存在cookie,以便后续操作。

② 其中有个人信息的页面展示，获取cookie信息，判断用户是否登录，如果登录则显示内容，未登录则跳转到登录页面，所以个人信息的页面可以使用路由守卫
搜索资料时有看到这种写法，就是经过判断后去改变的动态路由来决定跳转到哪个组件，感觉稍显麻烦。

③ 退出操作，清除cookie
可以把操作cookie的代码放到一个单独的src/utils/cookie.js文件，utils这个文件夹可以放一些工具类的文件

Read More...

vue项目中使用vue-i18n实现国际化

vue-i18n

在src/目录下新建lang文件夹
lang/文件中有en.js,index.js,zh.js
例如en.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

export default{
    route:{
        'home':'home',
        'component':'component',
        'permission':'permission',
        'i18n':'i18n',
        'drag':'drag',
        'permission-instruction':'permission instruction',
        'permission-page':'permission page'
    },
    login:{
        'title':'admin-vue'
    }
   
}

Read More...

小程序框架mpvue初步

小程序原生

页面传值的三种方式

1.利用url
传值 url?params=data&params1=data1
取值 onLoad: function(option){option.params}

2.本地储存

3.全局的app对象

Read More...

了解JS中的函数防抖与函数节流的应用场景+vue实现滚动加载更多

函数节流

发现一个问题就是当浏览器到达底部时，会多次触发函数，为了解决这个问题，进行函数节流。

浏览器中某些计算和处理要比其他的昂贵很多。例如，DOM 操作比起非 DOM 交互需要更多的内存和 CPU 时间。连续尝试进行过多的 DOM相关操作可能会导致浏览器挂起，有时候甚至会崩溃。尤其在 IE 中使用 onresize 事件处理程序的时候容易发生，当调整浏览器大小的时候，该事件会连续触发。

Read More...

react学习笔记

1.资源文件位置 图片一般放在src/assets目录下
2.如何引入文件路径

1.可以使用create-react-app提供的yarn run eject 将所有内建的配置暴露出来，然后配置

2.Create React App 3可以使用绝对路径，参考官网或者网上一些文章，例如https://medium.com/@ktruong008/absolute-imports-with-create-react-app-4338fbca7e3d

Read More...