vue笔记

sizuka
229 阅读4分钟

npm命令

  • -S --save 安装到项目依赖中将模块写道dependencies节点下，初始化项目时，会将模块下载到项目目录下，项目运行必备的
  • @ 符号默认 表示scr目录
  • -D --save-dev 将模块依赖写入devDependencies节点，此节点下的模块是我们在开发时需要的，这些模块在我们项目部署后是不需要的

git命令

  • git init 初始化一个git仓库

文件介绍

  • node-sass 把sass编译成css
  • sass-loader 是webpack的一个loader

vue项目目录文件介绍

  • componenets 目录是用于放功能性组件的
  • views 是用于放页面级文件的
  • assets 用于存放图片
  • api 用于封装所有请求接口

ref

  • ref 表示DOM的引用

登录页面

  • npm i axios -S 向后台接口发送请求，axios请求
  • 用户名和密码都要进行表单校验
  • 点击登录按钮，为了防止用户什么都没有输入的情况，在发送请求之前要先进行数据校验 *

路由

根据一个路径，找到该路径对应的组件，渲染到页面

创建路由对象，在这个对象中去配置路由规则

// 通过routes属性，配置路由规则，它是一个数组，数组中放的是对象，每个对象对应一条规则，并且每个对象中包含(name==》路由规则的名称/path==》路径/component==》路径对应的组件)

new Router({
  routes: [{
	  path: '/login',
	  component: Login,
	  name: '',
	  hidden: true
    }]

router-view

<router-view></router-view>  // 路径匹配到的组件都会通过router-view渲染到页面

  • router-link 进行路由跳转，该标签有一个 to 属性 ，to属性的值必须和path中的路径对应

    • router-link 将来会被渲染成 a 标签，

  • 路由参数

    • 在path的路径中 /index/:参数名

  • 获取路由参数

    • 将路由的参数直接显示在页面中 $router.params.参数名

  • 监听路由参数的变化

    • watch:{
    '$router'(to,from) { // to表示要到达哪个路径，from从哪个路径来
        
    }
}

  • 嵌套属性和编程式导航

  • 路由跳转

    • this.$router.push({name:路由名字})

路由重定向

routers:[
    {name:'index',path:'/index',component:index},
    {name:'manage',path:'/manage/:id',component:manage},
    
    // 当用户输入的路由，和前面预定义好的路由都不匹配 * ,跳转到index页面
    {name:'default',path:'*',redirect:'/index'}
]

router.js

 routes: [
    {
      path: '/',
      name: 'Login',
      component: Login
    },
	{
	  path: '/manage',
	  name: 'Manage',
	  component: Manage,
	  rediret:{path:'/staffManage'}, // 重定向到 staffManage
		children:[{ // 子路由
			path: 'home', // 注意：子路由下面不能带 / 
			component: Home,
			meta: [],
		},{
			path: 'staffManage',
			component: StaffManage,
			meta: [],
		},{
			path: '/test',
			component: Test,
			meta: [],
		}]
	}
  ]

登录状态保存

  • cookie
    • 保存在客户端，数据量小，不安全
  • session
    • 保存在服务器端，相对来说安全，当访问量增多，占用服务器资源，如果服务器挂了，所保存的信息都丢失了
  • token
    • 服务器不存用户状态，定义通用算法
    • 客户端第一次登陆之后，服务器会生成一个token，返回给客户端

请求拦截器(在router.js)

axios.interceptors.request.use(function (config) {
    
    let token = localStorage.getItem('token'); // 获取本地存储中的token
    if(token) {
        config.headers['前后端约定好的key'] = token;
    }
    return config;
  }, function (error) {
    // Do something with request error
    return Promise.reject(error);
  });

路由全局守卫(main.js)

/** 注册一个全局守卫，作用是在路由跳转前，对路由进行判断，防止未登录的用户跳转到其它页面去 **/
router.beforeEach((to,from,next) => {
  let token = localStorage.getItem('token');
  if(token) { // 如果用户已经登录过了，不干预用户
    next();
  } else {
    if(to.path !== '/login') { // 判断用户即将要到达的页面是不是登录页面，如果不是登录页面，跳转到登录也爱你
      next({path:'/login'})
    } else {
     next(); 
    }
  }
})

ES6的Promise

接下来我们每天都要提供具体的进展报告。 • 做完哪些大模块 • 在处理什么功能 • 还缺什么大的功能

  • Dashboard首页相关数据，除柱状图外，动态渲染完毕
  • 正在处理柱状图数据渲染，
  • 首页数量显示存在bug、侧边栏页面存在bug
  • 还未做多语言处理，登录模块还未做，

Webpack介绍

定义

webpack是一个现代js应用程序的模块打包器，分析项目结构，找到js模块，以及其它的一些浏览器不能直接运行的拓展语言，将其转换和打包为合适的格式，供浏览器使用

avatar
文章
阅读
粉丝