vue 增删改查初体验

公司最近要使用vue框架开发移动端应用，自己也积极响应公司安排，又将vue拾起来，边学边练，制作了一个vue-curd的demo，在此记录下学习内容，希望对你也有所帮助。

例子是一个费用报销单报销增删改查，内容有些不是很全，有时间慢慢补充。

demo源码的git地址：https://github.com/git407949480/vue-fybxd-mock-curd

一、vue脚手架

1、全局安装vue-cli

npm i -g vue-cli

2、vue脚手架搭建vue工程

vue脚手架官网

vue create hello-world

cd hello-world

npm run serve，执行该命令时无需指定端口号，如果有冲突，会自动修改端口号

指定端口号：npm run serve -- --port 5000

有问题，如can not find module，执行npm i --verbose，安装对应的包

二、vue mock数据

更多mock相关的操作，请参照 mockjs官网

1、安装mockjs

install mockjs --save

// 安装到devDependencies

2、在src目录下，新建mock文件夹，然后新建mock.js，然后在mock.js填入如下

import Mock from 'mockjs'
const Random = Mock.Random
// mock需要给三个参数,url(与axios请求是传的url一致)

// 请求类型: get post...其他看文档

// 数据处理函数,函数需要return数据

// 这样就构件了一个服务端api接口

Mock.mock('http://localhost:8080/login/login', 'get', (res) => {

    console.log(res);

    return 11;

})

……

// 其他根据自己小自行添加

3、在入口文件main.ts中，引入我们的mock.js

……

import './mock/mock.js'

……

三、本地请求json数据（即本地json文件）

相关的json文件放入public目录下，大坑

https://blog.csdn.net/qq407949480/article/details/111236646

四、安装及使用axios\vue-axios

更多axios相关，请参照 使用 axios 访问 API

1、安装axios\vue-axios

npm install --save axios vue-axios

2、在入口文件main.ts中，引入axios\vue-axios

import Axios from 'axios'
import Vue from 'vue'
import VueAxios from 'vue-axios'
……

Vue.use(VueAxios, Axios);

3、具体使用，目前只用到get请求

this.axios.get("/data.json")
        .then((res) => {
          console.log(res);
        })
        .catch((error) => {
          console.log(error);
        });

4、请求拦截器、响应拦截器（没深入研究，暂时记录）

请求拦截器：该类拦截器的作用是在请求发送前统一执行某些操作，比如在请求头中添加 token 字段。

响应拦截器：该类拦截器的作用是在接收到服务器响应后统一执行某些操作，比如发现响应状态码为 401 时，自动跳转到登录页。

五、路由

这里使用的是vue-router库，更多vue路由相关，请参照 vue-router库

1、简介

route：首先它是个单数，译为路由，即我们可以理解为单个路由或者某一个路由；  

routes：它是个复数，表示多个的集合才能为复数；即我们可以理解为多个路由的集合，JS中表示多种不同状态的集合的形式只有数组和对象两种，事实上官方定义routes是一个数组；所以我们记住了，routes表示多个数组的集合；  

router：译为路由器，上面都是路由，这个是路由器，我们可以理解为一个容器包含上述两个或者说它是一个管理者，负责管理上述两个；举个常见的场景的例子：当用户在页面上点击按钮的时候，这个时候router就会去routes中去查找route，就是说路由器会去路由集合中找对应的路由； 

2、路由入口

路由入口: 'src/router/index.ts' ,通过vue脚手架搭建的工程，我们选择配置是将路由选项选上，脚手架会帮我们自动注册路由。

手动注册可参照下面，先安装vue-router

npm install vue-router

 在main.ts中注册vue-router

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

路由占位符：<router-view></router-view>

3、路由跳转方式

<router-link to="/">Home</router-link>  

路由名称无参数<router-link :to="{name:'home'}"> Home</router-link>  

路由路径无参数<router-link :to="{path:'/home'}">Home</router-link>  

路由名称带参数<router-link :to="{name:'home', params: {id:1}}"> Home</router-link>  

路由路径带参数<router-link :to="{name:'home', query: {id:1}}"> Home</router-link>  

 

query类似 get, 跳转之后页面 url后面会拼接参数,类似?id=1, 非重要性的可以这样传, 密码之类还是用params，刷新页面该传参方式的id还在。  

params类似 post, 跳转之后页面 url后面不会拼接参数 , 但是刷新页面id 会消失。  

 

编程式跳转：

this.$router.push('/home')

this.$router.push({name:'home'})

this.$router.push({path:'/home'})

this.$router.push({name:'home',query: {id:'1'}})

this.$router.push({path:'/home',query: {id:'1'}})

//只能用 name，不能使用path

this.$router.push({name:'home',params: {id:'1'}})

路由参数接受：

this.$route.params.id

this.$route.query.id

4、路由守卫

当一个导航触发时，全局前置守卫按照创建顺序调用。守卫是异步解析执行，此时导航在所有守卫 resolve 完之前一直处于 等待中。

本实例，路由守卫的主要作用是未登录，禁止访问其他页面

router.beforeEach((to, from, next) => {
    //我在这里模仿了一个获取用户信息的方法
    let isLogin = window.sessionStorage.getItem('sessionId');
    if (isLogin) {
        //如果用户信息存在则往下执行。
        next()
    } else {
        //如果用户token不存在则跳转到login页面
        if (to.path === '/login') {
            next()
        } else {
            next('/login')
        }
    }
})

六、vuex状态

更多vue状态管理相关，请参照 vuex相关简介

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

vuex的注册方式可参照上一步

export default new Vuex.Store({
    state: {
        sessionId: '',
        userName: ''
    },

    mutations: {
        modifySessionId(state, playload) {
            state.sessionId = playload;
        },
        modifyUserName(state, playload){
            state.userName = playload;
        }
    },
    actions: {

    },

    modules: {

    }
})

七、生命周期

更多vue生命周期相关，请参照 vue生命周期相关

八、vue.config.js

主要是用到configureWebpack devtool source-map，运行起来在调试的时候，是压缩版本，不好调试，所以讲启用sourc-map

vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。

更多webpack相关，请参照[webpack相关简介](https://www.webpackjs.com/)

vue.config.js配置F12调试的时候是非压缩版

module.exports = {
    ......

    configureWebpack: {
        devtool: 'source-map'
    }
    ...
}

九、vue双向绑定问题中，不能实现及时更新的问题：

1、不在data中显式声明的对象不能及时更新  

2、在form中，经过v-model的变量 或 在其他html标签中 使用v-bind:方法的变量才能及时更新  

3、vue不能检测到对象属性的增加，修改，删除， 不能及时触发DOM的更新，需要借用其他的更新。   

4、vue不能检测数组的项修改（根据index）、length修改（仅此而已，可直接对数组重新赋值，如使用filter、map、concat、slice等方式生成新数组对其赋值）