Vue2.5的系统学习（二）

1.vue全家桶介绍

1.1.vue全家桶所用到的技术栈

1.项目构建工具vue-cli

2.路由vue-router

3.状态管理vuex

4.http请求工具axios

1.2.前后端联调必备技术之Mock讲解

1.3.安装环境

1.安装webpack

运行npm install webpack -g【-g是全局安装】【这个命令安装好像不行】

试下cnpm install webpack -g安装【可行】

这里是vue-cli 2.x的安装

继续运行cnpm install vue-cli -g【可行】

创建项目vue init webpack + 项目名（项目名不能用中文）

点击回车即可，选项如下

【注意：官方建议使用脚手架来搭建项目，不建议手动搭建，手动搭建要配置很多东西，容易出错】

这里是vue-cli 3.x的安装

运行cnpm install @vue/cli -g 进行安装

创建项目

vue create + 项目名（注意不要使用中文）

自定义配置如下：

后续：不选择package.json配置，不保存配置

接下来的项目使用vue-cli 3.x进行搭建

1.4.深度介绍vuecli2.x和vue-cli3.x的项目架构【自行了解就行了】

1.5.ui库的选择【看来又要学习pc端的ElenentUI了】

1.6.这里选择cube-ui

安装cube-ui: vue add cube-ui

1.7.安装步骤一样，但是我的就是出不了，奇奇怪怪，导入别人的课件代码之后成功运行了，可能是我的配置出了点问题吧，继续学吧 

2.注册登录页面开发实战

2.1.vue页面的跳转，关键是路由的跳转，其他的开发没什么特别的难度，就是一个熟练度的问题

2.2.vue.config.js配置mock数据接口

configureWebpack:{
    devServer:{
      //Mock接口编写的地方
      //每次更改配置文件的时候，都必须要重启项目才会生效
      before(app){
        // app.get('请求地址',(req,res)=>{
        //   res.json({
        //     信息
        //   })
        // })


        //用户信息池
        let userpool=[
          {username:'aaa',password:'111'},
          {username:'bbb',password:'222'},
          {username:'ccc',password:'333'},
          {username:'ddd',password:'444'}
        ]
        //注册接口
        app.get('/api/register',(req,res)=>{
          const {username,password}=req.query
          const userlength=userpool.filter(v=>v.username==username).length
          if(userlength>0){
            res.json({
              success:false,
              message:'用户名已存在'
            })
          }else{
            res.json({
              success:true,
              message:'注册成功'
            })
          }
        })
      }
    }
  },

这个注册接口的写法有点不是很清楚

比如这个req.query以及哪个filter的箭头写法（es6规范要好好学下）

理一下流程：

1.首先创建一个数据池，存入模拟用户的信息

2.开发接口，这里的req.query接收输入的姓名和密码

3.过滤器的作用是判断数据池里面是否存在用户信息，有的话就返回一个长度

4.判断一下长度情况，若有长度则说明用户名已存在，反之则不存在

安装axios

命令cnpm install axios

2.3.登录接口的实践

理一下流程：

1.首先是login.vue页面的编写，这个跟注册页面差不多，需要经常使用才能掌握

2.其次是vue.config.js里面的模拟登录接口的设置，这个主要就是要搞一个token

3.登陆的时候需要验证一下token，这个result.data.token可以浏览器开发者模式查看数据

=================复盘一下==================

这个学起来有点懵，最主要是没有接触过相关的操作流程，每一步都是未知

开始复盘这一章（注册登录实战）

1.首先是给项目引入cube-ui的依赖 vue add cube-ui

2.然后是新建登录和注册的vue组件

创建好组件后需要在路由也就是（router.js）里面修改一下路径

3.首先是注册组件的开发

注册组件使用cube-ui开发

我们只需要选择我们需要的属性即可

通过浏览器抓包就可以理解下api的写法了

N.接着是配置Mock模拟数据的配置

configureWebpack: {
        devServer: {
            //Mock接口编写的地方
            //每次更改配置文件的时候，都必须要重启项目才会生效
            before(app) {
                // app.get('请求地址',(req,res)=>{
                //   res.json({
                //     信息
                //   })
                // })


                //用户信息池
                let userpool = [
                    {username: 'aaa', password: '111'},
                    {username: 'bbb', password: '222'},
                    {username: 'ccc', password: '333'},
                    {username: 'ddd', password: '444'}
                ]
                //注册接口
                app.get('/api/register', (req, res) => {
                    const {username, password} = req.query
                    const userlength = userpool.filter(v => v.username == username).length
                    if (userlength > 0) {
                        res.json({
                            success: false,
                            message: '用户名已存在'
                        })
                    } else {
                        res.json({
                            success: true,
                            message: '注册成功'
                        })
                    }
                })

                //登录接口
                let tokenkey = 'yzclass'
                app.get('/api/login', (req, res) => {
                    const {username, password} = req.query
                    if ((username == 'aaa' && password == '111') || (username == 'bbb' && password == '222')){
                           res.json({
                               code:0,
                               message:'登录成功',
                               token:tokenkey+'-'+username+'-'+(new Date().getTime()+60*60*1000)
                           })
                    }else{
                        res.json({
                            code:1,
                            message:'账号或密码错误',
                        })
                    }
                })


            }
        }
    },

预设了用户的信息，以及登录和注册接口

再接着就是用axios和vuex对token的一个管理操作，大致流程如此

小结一下：学这个还是需要大量实践，光理论不实践等于白搞