提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

前言

提示：这里可以添加本文要记录的大概内容：

例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。

提示：以下是本篇文章正文内容，下面案例可供参考

一、vue是什么？

vue是一个用于创建用户界面的开源JavaScript框架，也是一个创建单页应用的Web应用框架

二、跨域

代码如下（示例）：

// 跨域文件

module.exports = {
    devServer:{
        proxy:('https://major.usemock.com/')
    }
}

二、封装代码

代码如下（示例）：

// 封装
import Axios from "axios";

// 获取数据
export function get(url,params){
    return Axios.get(url,params)
}

// 登入注册

export function post(url,params){
    return Axios.post(url,params)
}

// 删除
export function del(url,params){
    return Axios.delete(url,params)
}


// 修改
export function put(url,params){
    return Axios.put(url,params)
}

三、注册

1.注册代码

代码如下（示例）：

<template>
    <h3>注册页面</h3>
    <!-- 创建注册  的框架  双向绑定-->
    <p>账号：<input type="text" v-model="zhang"></p>
    <p>密码：<input type="password" v-model="mima"></p>
    <button @click="zhu">注册</button>
</template>

<script>
import { mapState } from 'vuex'
import {post} from '../utils/reqest'
export default {
    data(){
        return{
            zhang:'',
            mima:'',
        }
    },
    methods:{
        zhu(){
            // 请求接口，点击注册转换到登入页面！！
            post('/register')
            .then((see)=>{
                console.log(see)
                // 直接引用vuex里方法
                this.$store.commit('zhang2',this.zhang)
                this.$store.commit('mima2',this.mima)
                if(this.zhang1 == '' || this.mima1 == ''){
                    alert('账号或密码为空！！！')
                }else{
                    alert('注册成功！！！')
                    this.$router.push('/about')
                }
            }).catch((err)=>{
                console.log(err)
            })
        }
    },
    // 映射的方式传递vuex数据
    computed:{
        ...mapState(['zhang1','mima1'])
    }

}
</script>

2.账号密码存入vuex的代码

代码如下（示例）：

import { createStore } from 'vuex'

export default createStore({
  state: {
    zhang1:'',
    mima1:''
  },
  getters: {
  },
  mutations: {
    zhang2(state,da){
      state.zhang1 = da
    },
    mima2(state,da1){
      state.mima1 = da1
    }
  },
  actions: {
  },
  modules: {
  }
})

该处使用的url网络请求的数据。

四、登入

1.登入代码

代码如下（示例）：

<template>
  <h3>登入页面</h3>
  <!-- 登入页面框架  双向绑定 -->
    <p>账号：<input type="text" v-model="zhangd"></p>
    <p>密码：<input type="password" v-model="mimad"></p>
    <button @click="deng">登入</button>
</template>

<script>
import { mapState } from 'vuex'
import { post } from '@/utils/reqest'
export default {
  data(){
    return{
      zhangd:'',
      mimad:'',
    }
  },
  // 当未注册时自动跳转到注册页面
  mounted(){
    if(this.zhang1 == '' || this.mima1 == ''){
            alert('账号或密码不可为空！！')
            this.$router.push('/')
        }
  },
  methods:{
    // 请求接口,点击登入进入首页
    deng(){
      post('/login')
      .then((see)=>{
        console.log(see)
        if(this.zhangd == '' || this.mimad == ''){
          alert('账号或密码不可为空!!')
        }else if(this.zhangd == this.zhang1 && this.mimad == this.mima1){
          alert('登入成功！！！')
          this.$router.push('/shou')
        }else{
          alert('账号或密码错误！！！')
        }
      }).catch((err)=>{
        console.log(err)
      })
    }
  },
  // 映射的方式传递vuex数据
  computed:{
    ...mapState(['zhang1','mima1'])
  }

}
</script>

五、获取接口数据

1.首页数据

代码如下（示例）：

<template>
    <h3>首页</h3>
    <!-- 获取数据创建表格 -->
    <table border="1px" align="center" width="600px">
        <tr>
            <td>编号</td>
            <td>专业</td>
            <td>人数</td>
            <td>周期</td>
            <td>操作</td>
        </tr>
        <tr v-for="(x,i) in shu" :key="i">
            <td>{{x.id}}</td>
            <td>{{x.name}}</td>
            <td>{{x.count}}</td>
            <td>{{x.period}}</td>
            <td>
                <button @click="shan(i)">删除</button>
                <button @click="xiu(i)">修改</button>
            </td>
        </tr>
    </table>
    <p>添加</p>
    <p>专业：<input type="text" v-model="id2"></p>
    <p>人数：<input type="text" v-model="id3"></p>
    <p>周期：<input type="text" v-model="id4"></p>
    <button @click="tian">确认添加</button>
    <p>修改</p>
    <p>编号：<input type="text" v-model="wad.id"></p>
    <p>专业：<input type="text" v-model="wad.name"></p>
    <p>人数：<input type="text" v-model="wad.count"></p>
    <p>周期：<input type="text" v-model="wad.period"></p>
    <button @click="gai">确认修改</button>
</template>

<script>
import { mapState } from 'vuex'
import { del, get, post, put } from '@/utils/reqest'
export default {
    data(){
        return{
            shu:[],
            id1:6,
            id2:'',
            id3:'',
            id4:'',
            wad:{}
        }
    },
    mounted(){
        // 挂载请求数据,运行时获取接口的数据
        get('/getall')
        .then((see)=>{
            console.log(see)
            this.shu = see.data
        }).catch((err)=>{
            console.log(err)
        })
        if(this.zhang1 == '' || this.mima1 == ''){
            alert('账号或密码不可为空！！')
            this.$router.push('/about')
        }
    },
    methods:{
        // 请求删除接口,删除数据
        shan(i){
            del('/delete')
            .then((see)=>{
                console.log(see)
                this.shu.splice(i,1)
            }).catch((err)=>{
                console.log(err)
            })
        },
        // 修改数据
        xiu(i){
            this.wad = this.shu[i]
        },
        // 求情接口确认修改
        gai(){
            put('/update')
            .then((see)=>{
                console.log(see)
                alert('修改成功！！！')
            }).catch((err)=>{
                console.log(err)
            })
        },
        // 求情添加接口,添加数据
        tian(){
            var obj = {id:this.id1,name:this.id2,count:this.id3,period:this.id4}
            post('/add',obj)
            .then((see)=>{
                console.log(see)
                this.shu.push(obj)
                this.id1++
            }).catch((err)=>{
                console.log(err)
            })
        }
    },
    // 映射的方式传递vuex数据
    computed:{
        ...mapState(['zhang1','mima1'])
    }
    

}
</script>

<style>

</style>

总结

提示：vue简单注册、登入、数据获取。
例如：以上就是今天要讲的内容，本文仅仅简单介绍了注册、登入、数据获取的使用，而vue中提供了大量能使我们快速便捷地写作网页，运行速度快，简单易学。