vue简单注册登入

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

---

前言

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

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

---

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

一、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)