一、实现登陆注册界面

1、前期准备

使用vue-cli构建SPA项目:

1. 进入你想创建项目的目录位置
2. 使用命令vue init webpack 项目名，构建一个vue项目

vue init webpack element_ui_spa

1. 
2. 使用命令npm install element-ui -S，添加Element-UI模块 编辑

1. npm install element-ui -S：后面有 -s，他们分别是：

1. -g：将依赖下载node_global全局依赖。
2. -d：下载依赖da到spa工程中，不会参与打包。
3. -s：下载依赖da到spa工程中，会参与打包。

3. 打开项目的package.json文件可查看具体添加模块信息。 编辑
4. 在src目录下创建views目录（该目录用于存放vue组件）。 编辑
5. 在main.js中引入element-ui模块 编辑

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
// 新添加1
import ElementUI from 'element-ui'
// 新添加2，避免后期打包样式不同，要放在import App from './App';之前
import 'element-ui/lib/theme-chalk/index.css'
import App from './App'
import router from './router'
// 新添加3----实例进行一个挂载
Vue.use(ElementUI)
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: {App},
  template: '<App/>'
})

1. 在指定位置!!!在指定位置!!!在指定位置!!!---添加三行代码
   

2、登录静态页实现

2.1、创建Vue组件

在我们src里面创建我们的登录注册的vue组件。

编辑

2.2、静态页面实现

设置我们的html样式，当然我们也可以在组件 | Element里面自己进行一个自定义

<template><divclass="Login"><el-formclass="login-container"><h1class="title">用户登录</h1><el-form-itemlabel=""><el-inputtype="text"v-model="username"placeholder="登录账号"autocomplete="off"></el-input></el-form-item><el-form-itemlabel=""><el-inputtype="password"v-model="password"placeholder="登录密码"autocomplete="off"></el-input></el-form-item><el-form-item><el-buttontype="primary"style="width:100%;"@click="doSubmit()">提交</el-button></el-form-item><el-rowstyle="text-align: center;margin-top:-10px"><el-linktype="primary">忘记密码</el-link><el-linktype="primary"@click="gotoRegister()">用户注册</el-link></el-row></el-form></div></template><script>exportdefault {
name: "Login",
data() {
return {
msg: "登录界面",
username: "",
password: ""    }
  },
methods: {
gotoRegister() {
this.$router.push("/Register");
    },
doSubmit() {
    }
  }
}
</script><stylescoped>.login-wrap {
box-sizing: border-box;
width: 100%;
height: 100%;
padding-top: 10%;
background-image: url(https://pic4.zhimg.com/v2-c5880f5a6d44766feb085c3ae94899c7_r.jpg);
  //background-image: url();
background-repeat: no-repeat;
background-position: centerright;
background-size: 100%;
}
.login-container {
border-radius: 10px;
margin: 0pxauto;
width: 350px;
padding: 30px35px15px35px;
background: #fff;
border: 1pxsolid#eaeaea;
text-align: left;
box-shadow: 0020px2pxrgba(0, 0, 0, 0.1);
}
.title {
margin: 0pxauto40pxauto;
text-align: center;
color: #505458;
}
</style>

2.3、配置路由

在router/index.js中修改vue项目默认显示路由

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Login from '@/views/Login'
Vue.use(Router)
export default new Router({
  routes: [
    {
      path: '/Login',
      name: 'Login',
      component: Login
    }
  ]
})

2.4、更改App.vue样式

更改原有</span>样式</div><div><span><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2Fdyj5p5nxzd5i2_d6e7cc73a6ee424b8c7543f3fb575c37.png%22%2C%22originWidth%22%3A1577%2C%22originHeight%22%3A850%2C%22size%22%3A0%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A1200%2C%22height%22%3A647%7D"></span><span><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2Fdyj5p5nxzd5i2_d2a77a8384f34fd98b7a2c1c70a7bcf8.gif%22%2C%22originWidth%22%3A1%2C%22originHeight%22%3A1%2C%22name%22%3A%22image.gif%22%2C%22size%22%3A43%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A1%2C%22height%22%3A1%7D"></span></span><span>编辑</span></span></div></blockquote><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22html%22%2C%22code%22%3A%22%3Ctemplate%3E%5Cn%20%20%3Cdiv%20id%3D%5C%22app%5C%22%3E%5Cn%20%20%20%20%3C!--%20%20%20%20%3Cimg%20src%3D%5C%22.%2Fassets%2Flogo.png%5C%22%3E%3Cbr%3E--%3E%5Cn%20%20%20%20%3Cbr%3E%5Cn%20%20%20%20%3Crouter-view%2F%3E%5Cn%20%20%3C%2Fdiv%3E%5Cn%3C%2Ftemplate%3E%5Cn%3Cscript%3E%5Cnexport%20default%20%7B%5Cn%20%20name%3A%20'App'%5Cn%7D%5Cn%3C%2Fscript%3E%5Cn%3Cstyle%3E%5Cnhtml%2C%5Cnbody%20%7B%5Cn%20%20width%3A%20100%25%3B%5Cn%20%20height%3A%20100%25%3B%5Cn%20%20box-sizing%3A%20border-box%3B%5Cn%20%20padding%3A%200px%3B%5Cn%20%20margin%3A%200px%3B%5Cn%7D%5Cn%23app%20%7B%5Cn%20%20font-family%3A%20%5C%22Avenir%5C%22%2C%20Helvetica%2C%20Arial%2C%20sans-serif%3B%5Cn%20%20-webkit-font-smoothing%3A%20antialiased%3B%5Cn%20%20-moz-osx-font-smoothing%3A%20grayscale%3B%5Cn%20%20color%3A%20%232c3e50%3B%5Cn%20%20widows%3A%20100%25%3B%5Cn%20%20height%3A%20100%25%3B%5Cn%7D%5Cn%3C%2Fstyle%3E%22%2C%22id%22%3A%22FpwT8%22%2C%22autoWrap%22%3Atrue%7D"></div><blockquote><span><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2Fdyj5p5nxzd5i2_92f428f79e6840058bf7c38d06f9ed4f.gif%22%2C%22originWidth%22%3A1%2C%22originHeight%22%3A1%2C%22name%22%3A%22image.gif%22%2C%22size%22%3A43%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A1%2C%22height%22%3A1%7D"></span></span></blockquote><h3>2.5、效果</h3><div><span><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2Fdyj5p5nxzd5i2_d47ed835335e4889969818f2e13450a3.png%22%2C%22originWidth%22%3A934%2C%22originHeight%22%3A601%2C%22size%22%3A0%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A934%2C%22height%22%3A601%7D"></span><span><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2Fdyj5p5nxzd5i2_46afe2cab41e46709145ae49d38549bc.gif%22%2C%22originWidth%22%3A1%2C%22originHeight%22%3A1%2C%22name%22%3A%22image.gif%22%2C%22size%22%3A43%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A1%2C%22height%22%3A1%7D"></span></span><span>编辑</span></span></div><h2>3、注册静态页实现</h2><blockquote><div>在登陆的基础上实现一样的操作</div></blockquote><h3>3.1、静态页面实现</h3><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22html%22%2C%22code%22%3A%22%3Ctemplate%3E%5Cn%20%20%3Cdiv%20class%3D%5C%22Register%5C%22%3E%5Cn%20%20%20%20%3Cel-form%20class%3D%5C%22login-container%5C%22%3E%5Cn%20%20%20%20%20%20%3Ch1%20class%3D%5C%22title%5C%22%3E%E7%94%A8%E6%88%B7%E6%B3%A8%E5%86%8C%3C%2Fh1%3E%5Cn%20%20%20%20%20%20%3Cel-form-item%20label%3D%5C%22%5C%22%3E%5Cn%20%20%20%20%20%20%20%20%3Cel-input%20type%3D%5C%22text%5C%22%20v-model%3D%5C%22username%5C%22%20placeholder%3D%5C%22%E6%B3%A8%E5%86%8C%E8%B4%A6%E5%8F%B7%5C%22%20autocomplete%3D%5C%22off%5C%22%3E%3C%2Fel-input%3E%5Cn%20%20%20%20%20%20%3C%2Fel-form-item%3E%5Cn%20%20%20%20%20%20%3Cel-form-item%20label%3D%5C%22%5C%22%3E%5Cn%20%20%20%20%20%20%20%20%3Cel-input%20type%3D%5C%22password%5C%22%20v-model%3D%5C%22password%5C%22%20placeholder%3D%5C%22%E6%B3%A8%E5%86%8C%E5%AF%86%E7%A0%81%5C%22%20autocomplete%3D%5C%22off%5C%22%3E%3C%2Fel-input%3E%5Cn%20%20%20%20%20%20%3C%2Fel-form-item%3E%5Cn%20%20%20%20%20%20%3Cel-form-item%3E%5Cn%20%20%20%20%20%20%20%20%3Cel-button%20type%3D%5C%22primary%5C%22%20style%3D%5C%22width%3A100%25%3B%5C%22%20%40click%3D%5C%22doSubmit()%5C%22%3E%E6%8F%90%E4%BA%A4%3C%2Fel-button%3E%5Cn%20%20%20%20%20%20%3C%2Fel-form-item%3E%5Cn%20%20%20%20%20%20%3Cel-row%20style%3D%5C%22text-align%3A%20center%3Bmargin-top%3A-10px%5C%22%3E%5Cn%20%20%20%20%20%20%20%20%3Cel-link%20type%3D%5C%22primary%5C%22%3E%E5%BF%98%E8%AE%B0%E5%AF%86%E7%A0%81%3C%2Fel-link%3E%5Cn%20%20%20%20%20%20%20%20%3Cel-link%20type%3D%5C%22primary%5C%22%20%40click%3D%5C%22gotoLogin()%5C%22%3E%E7%94%A8%E6%88%B7%E6%B3%A8%E5%86%8C%3C%2Fel-link%3E%5Cn%20%20%20%20%20%20%3C%2Fel-row%3E%5Cn%20%20%20%20%3C%2Fel-form%3E%5Cn%20%20%3C%2Fdiv%3E%5Cn%3C%2Ftemplate%3E%5Cn%3Cscript%3E%5Cnexport%20default%20%7B%5Cn%20%20name%3A%20%5C%22Register%5C%22%2C%5Cn%20%20data()%20%7B%5Cn%20%20%20%20return%20%7B%5Cn%20%20%20%20%20%20msg%3A%20%5C%22%E6%B3%A8%E5%86%8C%E7%95%8C%E9%9D%A2%5C%22%2C%5Cn%20%20%20%20%20%20username%3A%20%5C%22%5C%22%2C%5Cn%20%20%20%20%20%20password%3A%20%5C%22%5C%22%5Cn%20%20%20%20%7D%5Cn%20%20%7D%2C%5Cn%20%20methods%3A%20%7B%5Cn%20%20%20%20gotoLogin()%20%7B%5Cn%20%20%20%20%20%20this.%24router.push(%5C%22%2FLogin%5C%22)%3B%5Cn%20%20%20%20%7D%2C%5Cn%20%20%20%20doSubmit()%20%7B%5Cn%20%20%20%20%7D%5Cn%20%20%7D%5Cn%7D%5Cn%3C%2Fscript%3E%5Cn%3Cstyle%20scoped%3E%5Cn.login-wrap%20%7B%5Cn%20%20box-sizing%3A%20border-box%3B%5Cn%20%20width%3A%20100%25%3B%5Cn%20%20height%3A%20100%25%3B%5Cn%20%20padding-top%3A%2010%25%3B%5Cn%20%20background-image%3A%20url()%3B%5Cn%20%20background-repeat%3A%20no-repeat%3B%5Cn%20%20background-position%3A%20center%20right%3B%5Cn%20%20background-size%3A%20100%25%3B%5Cn%7D%5Cn.login-container%20%7B%5Cn%20%20border-radius%3A%2010px%3B%5Cn%20%20margin%3A%200px%20auto%3B%5Cn%20%20width%3A%20350px%3B%5Cn%20%20padding%3A%2030px%2035px%2015px%2035px%3B%5Cn%20%20background%3A%20%23fff%3B%5Cn%20%20border%3A%201px%20solid%20%23eaeaea%3B%5Cn%20%20text-align%3A%20left%3B%5Cn%20%20box-shadow%3A%200%200%2020px%202px%20rgba(0%2C%200%2C%200%2C%200.1)%3B%5Cn%7D%5Cn.title%20%7B%5Cn%20%20margin%3A%200px%20auto%2040px%20auto%3B%5Cn%20%20text-align%3A%20center%3B%5Cn%20%20color%3A%20%23505458%3B%5Cn%7D%5Cn%3C%2Fstyle%3E%22%2C%22id%22%3A%22slqpP%22%2C%22autoWrap%22%3Atrue%7D"></div><div><span><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2Fdyj5p5nxzd5i2_35d39427851d4dc4a1c7db7b5d3086c1.gif%22%2C%22originWidth%22%3A1%2C%22originHeight%22%3A1%2C%22name%22%3A%22image.gif%22%2C%22size%22%3A43%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A1%2C%22height%22%3A1%7D"></span></span></div><h3>3.2、配置路由</h3><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22vue%22%2C%22code%22%3A%22import%20Vue%20from%20'vue'%5Cnimport%20Router%20from%20'vue-router'%5Cnimport%20HelloWorld%20from%20'%40%2Fcomponents%2FHelloWorld'%5Cnimport%20Login%20from%20'%40%2Fviews%2FLogin'%5Cnimport%20Register%20from%20'%40%2Fviews%2FRegister'%5CnVue.use(Router)%5Cnexport%20default%20new%20Router(%7B%5Cn%20%20routes%3A%20%5B%5Cn%20%20%20%20%7B%5Cn%20%20%20%20%20%20path%3A%20'%2FLogin'%2C%5Cn%20%20%20%20%20%20name%3A%20'Login'%2C%5Cn%20%20%20%20%20%20component%3A%20Login%5Cn%20%20%20%20%7D%2C%5Cn%20%20%20%20%7B%5Cn%20%20%20%20%20%20path%3A%20'%2FRegister'%2C%5Cn%20%20%20%20%20%20name%3A%20'Register'%2C%5Cn%20%20%20%20%20%20component%3A%20Register%5Cn%20%20%20%20%7D%5Cn%20%20%5D%5Cn%7D)%22%2C%22id%22%3A%22ciYwr%22%2C%22autoWrap%22%3Atrue%7D"></div><div><span><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2Fdyj5p5nxzd5i2_c84b4cc330634c4c8a645b2c25433714.gif%22%2C%22originWidth%22%3A1%2C%22originHeight%22%3A1%2C%22name%22%3A%22image.gif%22%2C%22size%22%3A43%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A1%2C%22height%22%3A1%7D"></span></span></div><h3>3.3、效果</h3><div><span><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2Fdyj5p5nxzd5i2_9a14ba07340244a99bcfb23b9349628d.gif%22%2C%22originWidth%22%3A746%2C%22originHeight%22%3A568%2C%22size%22%3A0%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A746%2C%22height%22%3A568%7D"></span><span><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2Fdyj5p5nxzd5i2_038d7c7599a24d43b2f3f371e71f8213.gif%22%2C%22originWidth%22%3A1%2C%22originHeight%22%3A1%2C%22name%22%3A%22image.gif%22%2C%22size%22%3A43%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A1%2C%22height%22%3A1%7D"></span></span><span>编辑</span></span></div><h1>二、axios</h1><blockquote><div>使用SSM项目构建Java后台，模拟提供一个用户登录的action地址，Vue通过请求指定的用户登录接口。</div></blockquote><h2 id="TqdwP">1、前期准备</h2><h3>1.1、准备项目</h3><blockquote><div>需要准备自己做好的一个项目，<strong>比如SSM的项目、maven项目、SpringMVC的项目都可</strong>，如果不会写可以参考我以前的博客内容<span><a href="https://blog.csdn.net/weixin_74383330/category_12449746.html?spm=a2c6h.13046898.publish-article.77.61b56ffaCYzegK" target="_blank">spring系列_无法自律的人的博客-CSDN博客</a></span>，</div></blockquote><h3>1.2、安装axios</h3><blockquote><div>进入项目里面CMD窗口进行下载，<strong>必须要在你的项目文件路径里面进行CMD的窗口</strong>。</div></blockquote><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22npm%20i%20axios%20-S%22%2C%22id%22%3A%22VFPch%22%7D"></div><div><span><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2Fdyj5p5nxzd5i2_517ebd90e1f74fee809b601032f683b7.gif%22%2C%22originWidth%22%3A1%2C%22originHeight%22%3A1%2C%22name%22%3A%22image.gif%22%2C%22size%22%3A43%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A1%2C%22height%22%3A1%7D"></span></span></div><div><span><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2Fdyj5p5nxzd5i2_d2192f383cbb4a2781e26344b64a0005.png%22%2C%22originWidth%22%3A1374%2C%22originHeight%22%3A130%2C%22size%22%3A0%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A1200%2C%22height%22%3A114%7D"></span><span><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2Fdyj5p5nxzd5i2_279b13b997a7482bb6012b43fe70fd0b.gif%22%2C%22originWidth%22%3A1%2C%22originHeight%22%3A1%2C%22name%22%3A%22image.gif%22%2C%22size%22%3A43%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A1%2C%22height%22%3A1%7D"></span></span><span>编辑</span></span></div><blockquote><div>在我们的<span style="color: #fe2c24;">package.json</span>里面可以看到我们下载的</div></blockquote><div><span><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2Fdyj5p5nxzd5i2_8b3e837cd4a642dbbf8291ca90076528.png%22%2C%22originWidth%22%3A1738%2C%22originHeight%22%3A861%2C%22size%22%3A0%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A1200%2C%22height%22%3A594%7D"></span><span><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2Fdyj5p5nxzd5i2_917d85f3ed5240db9a51b3d7f3b81a83.gif%22%2C%22originWidth%22%3A1%2C%22originHeight%22%3A1%2C%22name%22%3A%22image.gif%22%2C%22size%22%3A43%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A1%2C%22height%22%3A1%7D"></span></span><span>编辑</span></span></div><h3>1.3、更改端口</h3><blockquote><div>在<strong><span style="color: #fe2c24;">config/index.js</span></strong>目录下修改vue项目运行端口</div><div><span><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2Fdyj5p5nxzd5i2_f1e21fcc22f74970819251ba0d428677.png%22%2C%22originWidth%22%3A1747%2C%22originHeight%22%3A614%2C%22size%22%3A0%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A1200%2C%22height%22%3A422%7D"></span><span><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2Fdyj5p5nxzd5i2_e0b565ab1d7d42f2a50c2acaf7cc0549.gif%22%2C%22originWidth%22%3A1%2C%22originHeight%22%3A1%2C%22name%22%3A%22image.gif%22%2C%22size%22%3A43%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A1%2C%22height%22%3A1%7D"></span></span><span>编辑</span></span></div></blockquote><h2 style="background-color: transparent;">2、GET请求</h2><h3>2.1、导入axios</h3><blockquote><div>在登录的vue文件里面导入我们需要的axios。</div></blockquote><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22import%20axios%20from%20'axios'%22%2C%22id%22%3A%22qAt9A%22%7D"></div><blockquote><span><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2Fdyj5p5nxzd5i2_f22f1985508846d4be0eab25b487364e.gif%22%2C%22originWidth%22%3A1%2C%22originHeight%22%3A1%2C%22name%22%3A%22image.gif%22%2C%22size%22%3A43%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A1%2C%22height%22%3A1%7D"></span></span><div><span><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2Fdyj5p5nxzd5i2_344bac368aa44a67821af90fb7568b4e.png%22%2C%22originWidth%22%3A998%2C%22originHeight%22%3A937%2C%22size%22%3A0%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A998%2C%22height%22%3A937%7D"></span><span><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2Fdyj5p5nxzd5i2_064b0c4e01b54ef5ac6a741d409a4bb1.gif%22%2C%22originWidth%22%3A1%2C%22originHeight%22%3A1%2C%22name%22%3A%22image.gif%22%2C%22size%22%3A43%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A1%2C%22height%22%3A1%7D"></span></span><span>编辑</span></span></div></blockquote><h3>2.2、编写get请求</h3><blockquote><div>测试的时候记得开启你的项目</div></blockquote><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22javascript%22%2C%22code%22%3A%22%2F%2F%E6%8F%90%E4%BA%A4%E4%BA%8B%E4%BB%B6%5Cn%20%20%20%20doSubmit()%20%7B%5Cn%20%20%20%20%20%20%2F%2F%E8%AE%BE%E7%BD%AE%E7%99%BB%E5%BD%95%E8%AE%BF%E9%97%AE%E5%9C%B0%E5%9D%80%5Cn%20%20%20%20%20%20let%20url%20%3D%20%5C%22http%3A%2F%2Flocalhost%3A8080%2Fssm%2Fuser%2FuserLogin%5C%22%3B%5Cn%20%20%20%20%20%20%2F%2F%20%E4%BD%BF%E7%94%A8json%E6%A0%BC%E5%BC%8F%E8%BF%9B%E8%A1%8C%E4%BC%A0%E5%80%BC%5Cn%20%20%20%20%20%20let%20params%20%3D%20%7B%5Cn%20%20%20%20%20%20%20%20username%3A%20this.username%2C%5Cn%20%20%20%20%20%20%20%20password%3A%20this.password%5Cn%20%20%20%20%20%20%7D%5Cn%2F%2Fget%E8%AF%B7%E6%B1%82%5Cn%20%20%20%20%20%20axios.get(url%2C%20%7Bparams%3A%20params%7D).then(r%20%3D%3E%20%7B%5Cn%20%20%20%20%20%20%20%20console.log(r)%3B%5Cn%20%20%20%20%20%20%20%20if%20(r.data.success)%20%7B%2F%2F%E5%88%A4%E6%96%ADsuccess%E6%98%AF%E5%90%A6%E4%B8%BAtrue%5Cn%20%20%20%20%20%20%20%20%20%20%2F%2F%20%E4%B8%BAtrue%E7%BB%99%E4%B8%80%E4%B8%AA%E6%8F%90%E7%A4%BA%E6%A1%86%5Cn%20%20%20%20%20%20%20%20%20%20this.%24message(%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%2F%2Fmessage%3A%20'%E7%99%BB%E9%99%86%E6%88%90%E5%8A%9F'%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20message%3A%20r.data.msg%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20type%3A%20'success'%5Cn%20%20%20%20%20%20%20%20%20%20%7D)%3B%5Cn%20%20%20%20%20%20%20%20%7D%20else%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20this.%24message(%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%2F%2Fmessage%3A%20'%E7%99%BB%E9%99%86%E5%A4%B1%E8%B4%A5'%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20message%3A%20r.data.msg%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20type%3A%20'warning'%5Cn%20%20%20%20%20%20%20%20%20%20%7D)%3B%5Cn%20%20%20%20%20%20%20%20%7D%5Cn%20%20%20%20%20%20%7D).catch(e%20%3D%3E%20%7B%5Cn%20%20%20%20%20%20%20%20%2F%2F%20console.log(e)%3B%5Cn%20%20%20%20%20%20%7D)%3B%5Cn%20%20%20%20%7D%22%2C%22id%22%3A%22UToYT%22%2C%22autoWrap%22%3Atrue%7D"></div><div><span><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2Fdyj5p5nxzd5i2_ec52aa09a0934b309886aed002ec7586.gif%22%2C%22originWidth%22%3A1%2C%22originHeight%22%3A1%2C%22name%22%3A%22image.gif%22%2C%22size%22%3A43%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A1%2C%22height%22%3A1%7D"></span></span></div><div><span><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2Fdyj5p5nxzd5i2_958030e484864653acf7773188fbe94e.gif%22%2C%22originWidth%22%3A670%2C%22originHeight%22%3A540%2C%22size%22%3A0%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A670%2C%22height%22%3A540%7D"></span><span><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2Fdyj5p5nxzd5i2_b966666f27884469a8d8ee9fd589547d.gif%22%2C%22originWidth%22%3A1%2C%22originHeight%22%3A1%2C%22name%22%3A%22image.gif%22%2C%22size%22%3A43%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A1%2C%22height%22%3A1%7D"></span></span><span>编辑</span></span></div><h2>3、POST请求</h2><h3>3.1、get、post的区别</h3><blockquote><div>GET 请求和 POST 请求是两种常见的 HTTP 请求方法，它们的区别：</div><ol data-lake-indent="1"> </ol><ol><li><span style="background-color: #ffd900;">数据传输方式</span>：GET 请求通过 URL 参数传输数据，而 POST 请求通过请求体传输数据。<span style="background-color: #38d8f0;">GET 请求的数据会附加在 URL 的末尾，<span style="color: #fe2c24;">可见</span>于 URL 地址栏</span>，<span style="background-color: #4da8ee;">而 POST 请求的数据则被放置在请求体中，<span style="color: #fe2c24;">不会</span>在 URL 中暴露</span>。</li><li><span style="background-color: #ffd900;">数据长度限制</span>：由于 GET 请求的数据附加在 URL 中，URL 的长度有限制，一般约为 2048 个字符，超过该限制会导致 URL 过长，而 POST 请求则没有明确的数据长度限制。</li><li><span style="background-color: #ffd900;">安全性</span>：GET 请求的参数以明文形式附加在 URL 上，因此不适合传输敏感信息，而 POST 请求的数据放置在请求体中，相对而言更安全。</li><li><span style="background-color: #ffd900;">缓存</span>：GET 请求可以被浏览器缓存下来，可以被重复使用，而 POST 请求对浏览器不可缓存，每次都需要重新发送请求。</li><li><span style="background-color: #ffd900;">特殊字符处理</span>：GET 请求会对特殊字符进行 URL 编码，如空格会被替换为 "%20"，而 POST 请求不会对特殊字符进行编码。</li><li>幂等性：GET 请求是幂等的，即多次相同的<span style="background-color: #ffd900;"> GET 请求不会对服务器产生副作用</span>，而 POST 请求不具有幂等性，每次 <span style="background-color: #ffd900;">POST 请求都可能有副作用</span>，如创建资源或修改数据。</li></ol></blockquote><h3>3.2、导入qs</h3><blockquote><div>如上面的请求一样，怎么导入axios的，我们照样导入qs。</div></blockquote><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22import%20qs%20from%20'qs'%22%2C%22id%22%3A%22kTvFA%22%7D"></div><blockquote><span><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2Fdyj5p5nxzd5i2_65c1106cf7e04a9d87db7629da1d443d.gif%22%2C%22originWidth%22%3A1%2C%22originHeight%22%3A1%2C%22name%22%3A%22image.gif%22%2C%22size%22%3A43%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A1%2C%22height%22%3A1%7D"></span></span><div><span><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2Fdyj5p5nxzd5i2_633165aece1a49cba7fb712fba4016f3.png%22%2C%22originWidth%22%3A1282%2C%22originHeight%22%3A588%2C%22size%22%3A0%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A1200%2C%22height%22%3A550%7D"></span><span><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2Fdyj5p5nxzd5i2_f81f321d0b2d4be0afdb1c6c56b8451d.gif%22%2C%22originWidth%22%3A1%2C%22originHeight%22%3A1%2C%22name%22%3A%22image.gif%22%2C%22size%22%3A43%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A1%2C%22height%22%3A1%7D"></span></span><span>编辑</span></span></div></blockquote><h3>3.3、编写post请求</h3><blockquote><div>唯一和get请求不一样的是</div><ul data-lake-indent="1"> </ul><ul><li>get：axios.get(url, <span style="background-color: #ffd900;">{params: params}</span>).then(r => {}).catch(e => {<span style="color: #4f4f4f;">});</span></li><li><span style="color: #4f4f4f;">post:</span>axios.get(url,<span style="background-color: #ffd900;">qs.stringify(params)</span>).then(r => {}).catch(e => {<span style="color: #4f4f4f;">});</span></li></ul></blockquote><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22javascript%22%2C%22code%22%3A%22%2F%2F%E6%8F%90%E4%BA%A4%E4%BA%8B%E4%BB%B6%5Cn%20%20%20%20doSubmit()%20%7B%5Cn%20%20%20%20%20%20%2F%2F%E8%AE%BE%E7%BD%AE%E7%99%BB%E5%BD%95%E8%AE%BF%E9%97%AE%E5%9C%B0%E5%9D%80%5Cn%20%20%20%20%20%20let%20url%20%3D%20%5C%22http%3A%2F%2Flocalhost%3A8080%2Fssm%2Fuser%2FuserLogin%5C%22%3B%5Cn%20%20%20%20%20%20%2F%2F%20%E4%BD%BF%E7%94%A8json%E6%A0%BC%E5%BC%8F%E8%BF%9B%E8%A1%8C%E4%BC%A0%E5%80%BC%5Cn%20%20%20%20%20%20let%20params%20%3D%20%7B%5Cn%20%20%20%20%20%20%20%20username%3A%20this.username%2C%5Cn%20%20%20%20%20%20%20%20password%3A%20this.password%5Cn%20%20%20%20%20%20%7D%5Cn%2F%2Fpost%E8%AF%B7%E6%B1%82%5Cn%20%20%20%20%20%20axios.post(url%2C%20qs.stringify(params)).then(r%20%3D%3E%20%7B%5Cn%20%20%20%20%20%20%20%20console.log(r)%3B%5Cn%20%20%20%20%20%20%20%20if%20(r.data.success)%20%7B%2F%2F%E5%88%A4%E6%96%ADsuccess%E6%98%AF%E5%90%A6%E4%B8%BAtrue%5Cn%20%20%20%20%20%20%20%20%20%20%2F%2F%20%E4%B8%BAtrue%E7%BB%99%E4%B8%80%E4%B8%AA%E6%8F%90%E7%A4%BA%E6%A1%86%5Cn%20%20%20%20%20%20%20%20%20%20this.%24message(%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%2F%2Fmessage%3A%20'%E7%99%BB%E9%99%86%E6%88%90%E5%8A%9F'%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20message%3A%20r.data.msg%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20type%3A%20'success'%5Cn%20%20%20%20%20%20%20%20%20%20%7D)%3B%5Cn%20%20%20%20%20%20%20%20%7D%20else%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20this.%24message(%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%2F%2Fmessage%3A%20'%E7%99%BB%E9%99%86%E5%A4%B1%E8%B4%A5'%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20message%3A%20r.data.msg%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20type%3A%20'warning'%5Cn%20%20%20%20%20%20%20%20%20%20%7D)%3B%5Cn%20%20%20%20%20%20%20%20%7D%5Cn%20%20%20%20%20%20%7D).catch(e%20%3D%3E%20%7B%5Cn%20%20%20%20%20%20%20%20%2F%2F%20console.log(e)%3B%5Cn%20%20%20%20%20%20%7D)%3B%5Cn%20%20%20%20%7D%22%2C%22id%22%3A%2259mTa%22%2C%22autoWrap%22%3Atrue%7D"></div><blockquote><span><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2Fdyj5p5nxzd5i2_4cf1e5c75a854c21b6a0fca1d3bad5b9.gif%22%2C%22originWidth%22%3A1%2C%22originHeight%22%3A1%2C%22name%22%3A%22image.gif%22%2C%22size%22%3A43%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A1%2C%22height%22%3A1%7D"></span></span></blockquote><h3>3.4、优化处理</h3><h4>3.4.1、下载安装vue-axios</h4><blockquote><div>在CMD命令窗口进行下载vue-axios。</div><div><span><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2Fdyj5p5nxzd5i2_9534537dbf2b4df192d38ed1fc87e41f.png%22%2C%22originWidth%22%3A1680%2C%22originHeight%22%3A208%2C%22size%22%3A0%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A1200%2C%22height%22%3A149%7D"></span><span><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2Fdyj5p5nxzd5i2_eb203689b00d434a93e551ecc9553830.gif%22%2C%22originWidth%22%3A1%2C%22originHeight%22%3A1%2C%22name%22%3A%22image.gif%22%2C%22size%22%3A43%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A1%2C%22height%22%3A1%7D"></span></span><span>编辑</span></span></div></blockquote><h4>3.4.2、写入api模块添加全局配置</h4><blockquote><div>在src目录下新建api文件夹，在下面建立两个文件<strong>action.js</strong>、<strong>http.js</strong>。</div></blockquote><h5>3.4.2.1、action.js</h5><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22javascript%22%2C%22code%22%3A%22%2F**%5Cn%20*%20%E6%96%87%E4%BB%B6%E6%8E%A5%E5%8F%A3%E5%9C%B0%E5%9D%80%E5%AE%9A%E4%B9%89%E6%96%87%E4%BB%B6%5Cn%20*%20%E5%AF%B9%E5%90%8E%E5%8F%B0%E8%AF%B7%E6%B1%82%E7%9A%84%E5%9C%B0%E5%9D%80%E7%9A%84%E5%B0%81%E8%A3%85%EF%BC%8CURL%E6%A0%BC%E5%BC%8F%E5%A6%82%E4%B8%8B%EF%BC%9A%5Cn%20*%20%E6%A8%A1%E5%9D%97%E5%90%8D_%E5%AE%9E%E4%BD%93%E5%90%8D_%E6%93%8D%E4%BD%9C%5Cn%20*%2F%5Cnexport%20default%20%7B%5Cn%20%20'SERVER'%3A%20'http%3A%2F%2Flocalhost%3A8080%2Fssm'%2C%20%2F%2F%E6%9C%8D%E5%8A%A1%E5%99%A8%E8%AE%BF%E9%97%AE%E5%9C%B0%E5%9D%80%5Cn%20%20'SYSTEM_USER_DOLOGIN'%3A%20'%2Fuser%2FuserLogin'%2C%20%2F%2F%E7%99%BB%E9%99%86%E8%AF%B7%E6%B1%82%5Cn%20%20'SYSTEM_USER_DOREG'%3A%20'%2Fuser%2FuserRegister'%2C%20%2F%2F%E6%B3%A8%E5%86%8C%E8%AF%B7%E6%B1%82%5Cn%20%20'getFullPath'%3A%20k%20%3D%3E%20%7B%20%2F%2F%E8%8E%B7%E5%BE%97%E8%AF%B7%E6%B1%82%E7%9A%84%E5%AE%8C%E6%95%B4%E5%9C%B0%E5%9D%80%EF%BC%8C%E7%94%A8%E4%BA%8Emockjs%E6%B5%8B%E8%AF%95%E6%97%B6%E4%BD%BF%E7%94%A8%5Cn%20%20%20%20return%20this.SERVER%20%2B%20this%5Bk%5D%3B%5Cn%20%20%7D%5Cn%7D%22%2C%22id%22%3A%224od6a%22%2C%22autoWrap%22%3Atrue%7D"></div><div><span><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2Fdyj5p5nxzd5i2_beeadcf0ab2d47288c1eae181249da38.gif%22%2C%22originWidth%22%3A1%2C%22originHeight%22%3A1%2C%22name%22%3A%22image.gif%22%2C%22size%22%3A43%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A1%2C%22height%22%3A1%7D"></span></span></div><h5>3.4.2.2、http.js</h5><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22javascript%22%2C%22code%22%3A%22%2F**%5Cn%20*%20vue%E9%A1%B9%E7%9B%AE%E5%AF%B9axios%E7%9A%84%E5%85%A8%E5%B1%80%E9%85%8D%E7%BD%AE%5Cn%20*%2F%5Cnimport%20axios%20from%20'axios'%5Cnimport%20qs%20from%20'qs'%5Cn%2F%2F%E5%BC%95%E5%85%A5action%E6%A8%A1%E5%9D%97%EF%BC%8C%E5%B9%B6%E6%B7%BB%E5%8A%A0%E8%87%B3axios%E7%9A%84%E7%B1%BB%E5%B1%9E%E6%80%A7urls%E4%B8%8A%5Cnimport%20action%20from%20'%40%2Fapi%2Faction'%5Cnaxios.urls%20%3D%20action%5Cn%2F%2F%20axios%E9%BB%98%E8%AE%A4%E9%85%8D%E7%BD%AE%5Cnaxios.defaults.timeout%20%3D%2010000%3B%20%2F%2F%20%E8%B6%85%E6%97%B6%E6%97%B6%E9%97%B4%5Cn%2F%2F%20axios.defaults.baseURL%20%3D%20'http%3A%2F%2Flocalhost%3A8080%2Fj2ee15'%3B%20%2F%2F%20%E9%BB%98%E8%AE%A4%E5%9C%B0%E5%9D%80%5Cnaxios.defaults.baseURL%20%3D%20action.SERVER%3B%5Cn%2F%2F%E6%95%B4%E7%90%86%E6%95%B0%E6%8D%AE%5Cn%2F%2F%20%E5%8F%AA%E9%80%82%E7%94%A8%E4%BA%8E%20POST%2CPUT%2CPATCH%EF%BC%8CtransformRequest%60%20%E5%85%81%E8%AE%B8%E5%9C%A8%E5%90%91%E6%9C%8D%E5%8A%A1%E5%99%A8%E5%8F%91%E9%80%81%E5%89%8D%EF%BC%8C%E4%BF%AE%E6%94%B9%E8%AF%B7%E6%B1%82%E6%95%B0%E6%8D%AE%5Cnaxios.defaults.transformRequest%20%3D%20function(data)%20%7B%5Cn%5Ctdata%20%3D%20qs.stringify(data)%3B%5Cn%5Ctreturn%20data%3B%5Cn%7D%3B%5Cn%2F%2F%20%E8%AF%B7%E6%B1%82%E6%8B%A6%E6%88%AA%E5%99%A8%5Cnaxios.interceptors.request.use(function(config)%20%7B%5Cn%5Ctreturn%20config%3B%5Cn%7D%2C%20function(error)%20%7B%5Cn%5Ctreturn%20Promise.reject(error)%3B%5Cn%7D)%3B%5Cn%2F%2F%20%E5%93%8D%E5%BA%94%E6%8B%A6%E6%88%AA%E5%99%A8%5Cnaxios.interceptors.response.use(function(response)%20%7B%5Cn%5Ctreturn%20response%3B%5Cn%7D%2C%20function(error)%20%7B%5Cn%5Ctreturn%20Promise.reject(error)%3B%5Cn%7D)%3B%5Cnexport%20default%20axios%3B%22%2C%22id%22%3A%22yHOy0%22%2C%22autoWrap%22%3Atrue%7D"></div><div><span><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2Fdyj5p5nxzd5i2_bf53f97ae24c490fafbd4c0bd05b0621.gif%22%2C%22originWidth%22%3A1%2C%22originHeight%22%3A1%2C%22name%22%3A%22image.gif%22%2C%22size%22%3A43%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A1%2C%22height%22%3A1%7D"></span></span></div><h4>3.4.3、main.js配置vue-axios</h4><blockquote><div>在<strong>main.js</strong>文件中引入<strong>api</strong>模块和<strong>vue-axios</strong>模块</div></blockquote><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22javascript%22%2C%22code%22%3A%22import%20axios%20from%20'%40%2Fapi%2Fhttp'%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%5Cnimport%20VueAxios%20from%20'vue-axios'%20%5CnVue.use(VueAxios%2Caxios)%22%2C%22id%22%3A%22CP4Bq%22%7D"></div><div><span><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2Fdyj5p5nxzd5i2_f834e2acda9a48aba62e6b39e5d099f2.gif%22%2C%22originWidth%22%3A1%2C%22originHeight%22%3A1%2C%22name%22%3A%22image.gif%22%2C%22size%22%3A43%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A1%2C%22height%22%3A1%7D"></span></span></div><div><span><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2Fdyj5p5nxzd5i2_31d612e48fdd4e458d87463b39b5e702.png%22%2C%22originWidth%22%3A1013%2C%22originHeight%22%3A890%2C%22size%22%3A0%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A1013%2C%22height%22%3A890%7D"></span><span><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2Fdyj5p5nxzd5i2_7e59b07c8cc24d86acb2eac1aac306f5.gif%22%2C%22originWidth%22%3A1%2C%22originHeight%22%3A1%2C%22name%22%3A%22image.gif%22%2C%22size%22%3A43%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A1%2C%22height%22%3A1%7D"></span></span><span>编辑</span></span></div><h4>3.4.3、使用封装后的axios发送请求</h4><blockquote><div>从<strong>Login.vue</strong>组件中<strong>移除导入的axios和qs模块</strong></div></blockquote><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22import%20axios%20from%20'axios'%5Cnimport%20qs%20from%20'qs'%22%2C%22id%22%3A%22uBdoq%22%7D"></div><div><span><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2Fdyj5p5nxzd5i2_73b8b2df004b4ea3a5b7c50816b66cf5.gif%22%2C%22originWidth%22%3A1%2C%22originHeight%22%3A1%2C%22name%22%3A%22image.gif%22%2C%22size%22%3A43%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A1%2C%22height%22%3A1%7D"></span></span></div><h4>3.4.4、修改后的提交事件</h4><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22javascript%22%2C%22code%22%3A%22doSubmit()%20%7B%5Cn%20%20%20%20%20%20%2F%2F%E8%AE%BE%E7%BD%AE%E7%99%BB%E5%BD%95%E8%AE%BF%E9%97%AE%E5%9C%B0%E5%9D%80%5Cn%20%20%20%20%20%20let%20url%20%3D%20this.axios.urls.SYSTEM_USER_DOLOGIN%3B%5Cn%20%20%20%20%20%20%2F%2F%20%E4%BD%BF%E7%94%A8json%E6%A0%BC%E5%BC%8F%E8%BF%9B%E8%A1%8C%E4%BC%A0%E5%80%BC%5Cn%20%20%20%20%20%20let%20params%20%3D%20%7B%5Cn%20%20%20%20%20%20%20%20username%3A%20this.username%2C%5Cn%20%20%20%20%20%20%20%20password%3A%20this.password%5Cn%20%20%20%20%20%20%7D%5Cn%20%20%20%20%20%20this.axios.post(url%2C%20params).then(r%20%3D%3E%20%7B%5Cn%20%20%20%20%20%20%20%20console.log(r)%3B%5Cn%20%20%20%20%20%20%20%20if%20(r.data.success)%20%7B%2F%2F%E5%88%A4%E6%96%ADsuccess%E6%98%AF%E5%90%A6%E4%B8%BAtrue%5Cn%20%20%20%20%20%20%20%20%20%20%2F%2F%20%E4%B8%BAtrue%E7%BB%99%E4%B8%80%E4%B8%AA%E6%8F%90%E7%A4%BA%E6%A1%86%5Cn%20%20%20%20%20%20%20%20%20%20this.%24message(%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20message%3A%20r.data.msg%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20type%3A%20'success'%5Cn%20%20%20%20%20%20%20%20%20%20%7D)%3B%5Cn%20%20%20%20%20%20%20%20%7D%20else%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20this.%24message(%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20message%3A%20r.data.msg%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20type%3A%20'warning'%5Cn%20%20%20%20%20%20%20%20%20%20%7D)%3B%5Cn%20%20%20%20%20%20%20%20%7D%5Cn%20%20%20%20%20%20%7D).catch(e%20%3D%3E%20%7B%5Cn%20%20%20%20%20%20%7D)%3B%5Cn%20%20%20%20%7D%22%2C%22id%22%3A%22bMXC3%22%2C%22autoWrap%22%3Atrue%7D"></div><div><span><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2Fdyj5p5nxzd5i2_c46165673e584c8293e41d6704f07ea4.gif%22%2C%22originWidth%22%3A1%2C%22originHeight%22%3A1%2C%22name%22%3A%22image.gif%22%2C%22size%22%3A43%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A1%2C%22height%22%3A1%7D"></span></span></div><div><span><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2Fdyj5p5nxzd5i2_e4c6769985524ee28bf496b79fd4fcca.gif%22%2C%22originWidth%22%3A678%2C%22originHeight%22%3A513%2C%22size%22%3A0%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A678%2C%22height%22%3A513%7D"></span><span><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2Fdyj5p5nxzd5i2_c062c867df1943118a658619ff4a7af5.gif%22%2C%22originWidth%22%3A1%2C%22originHeight%22%3A1%2C%22name%22%3A%22image.gif%22%2C%22size%22%3A43%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A1%2C%22height%22%3A1%7D"></span></span><span>编辑</span></span></div><h2 id="dT7O2">4、注册功能实现</h2><h3 id="rKMnv">4.1、页面实现</h3><blockquote><div>当然可以根据自己的数据库和自己的需求来定义自己的页面</div></blockquote><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22html%22%2C%22code%22%3A%22%3Ctemplate%3E%5Cn%20%20%3Cdiv%20class%3D%5C%22Register%5C%22%3E%5Cn%20%20%20%20%3Cel-form%20class%3D%5C%22login-container%5C%22%3E%5Cn%20%20%20%20%20%20%3Ch1%20class%3D%5C%22title%5C%22%3E%E7%94%A8%E6%88%B7%E6%B3%A8%E5%86%8C%3C%2Fh1%3E%5Cn%20%20%20%20%20%20%3Cel-form-item%20label%3D%5C%22%5C%22%3E%5Cn%20%20%20%20%20%20%20%20%3Cel-input%20type%3D%5C%22text%5C%22%20v-model%3D%5C%22username%5C%22%20placeholder%3D%5C%22%E8%BE%93%E5%85%A5%E8%B4%A6%E5%8F%B7%5C%22%20autocomplete%3D%5C%22off%5C%22%3E%3C%2Fel-input%3E%5Cn%20%20%20%20%20%20%3C%2Fel-form-item%3E%5Cn%20%20%20%20%20%20%3Cel-form-item%20label%3D%5C%22%5C%22%3E%5Cn%20%20%20%20%20%20%20%20%3Cel-input%20type%3D%5C%22password%5C%22%20v-model%3D%5C%22password%5C%22%20placeholder%3D%5C%22%E8%BE%93%E5%85%A5%E5%AF%86%E7%A0%81%5C%22%20show-password%20autocomplete%3D%5C%22off%5C%22%3E%3C%2Fel-input%3E%5Cn%20%20%20%20%20%20%3C%2Fel-form-item%3E%5Cn%20%20%20%20%20%20%3Cel-form-item%20label%3D%5C%22%E8%B4%A6%E5%8F%B7%E5%90%8D%E7%A7%B0%5C%22%20label-width%3D%5C%2280px%5C%22%20style%3D%5C%22margin-left%3A%205px%3B%5C%22%20prop%3D%5C%22name%5C%22%3E%5Cn%20%20%20%20%20%20%20%20%3Cel-input%20v-model%3D%5C%22realname%5C%22%3E%3C%2Fel-input%3E%5Cn%20%20%20%20%20%20%3C%2Fel-form-item%3E%5Cn%20%20%20%20%20%20%3Cel-form-item%20label%3D%5C%22%E6%80%A7%E5%88%AB%5C%22%20style%3D%5C%22margin-left%3A%2020px%3B%5C%22%3E%5Cn%20%20%20%20%20%20%20%20%3Cel-radio-group%20v-model%3D%5C%22sex%5C%22%3E%5Cn%20%20%20%20%20%20%20%20%20%20%3Cel-radio%20label%3D%5C%221%5C%22%3E%E7%94%B7%3C%2Fel-radio%3E%5Cn%20%20%20%20%20%20%20%20%20%20%3Cel-radio%20label%3D%5C%222%5C%22%3E%E5%A5%B3%3C%2Fel-radio%3E%5Cn%20%20%20%20%20%20%20%20%20%20%3Cel-radio%20label%3D%5C%223%5C%22%3E%E5%85%B6%E4%BB%96%3C%2Fel-radio%3E%5Cn%20%20%20%20%20%20%20%20%3C%2Fel-radio-group%3E%5Cn%20%20%20%20%20%20%3C%2Fel-form-item%3E%5Cn%20%20%20%20%20%20%3Cel-form-item%20label%3D%5C%22%E8%BA%AB%20%E4%BB%BD%20%E8%AF%81%5C%22%20label-width%3D%5C%2280px%5C%22%20style%3D%5C%22margin-left%3A%200px%3B%5C%22%20prop%3D%5C%22name%5C%22%3E%5Cn%20%20%20%20%20%20%20%20%3Cel-input%20v-model%3D%5C%22idcard%5C%22%3E%3C%2Fel-input%3E%5Cn%20%20%20%20%20%20%3C%2Fel-form-item%3E%5Cn%20%20%20%20%20%20%3Cel-input%20type%3D%5C%22textarea%5C%22%20%3Arows%3D%5C%222%5C%22%20placeholder%3D%5C%22%E8%AF%B7%E8%BE%93%E5%85%A5%E5%9C%B0%E5%9D%80%5C%22%20v-model%3D%5C%22address%5C%22%3E%5Cn%20%20%20%20%20%20%3C%2Fel-input%3E%5Cn%20%20%20%20%20%20%3Cel-form-item%20style%3D%5C%22margin-top%3A%2030px%3B%5C%22%3E%5Cn%20%20%20%20%20%20%20%20%3Cel-button%20type%3D%5C%22primary%5C%22%20style%3D%5C%22width%3A100%25%3B%5C%22%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%40click%3D%5C%22Register()%5C%22%3E%E6%B3%A8%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%E5%86%8C%5Cn%20%20%20%20%20%20%20%20%3C%2Fel-button%3E%5Cn%20%20%20%20%20%20%3C%2Fel-form-item%3E%5Cn%20%20%20%20%20%20%3Cel-row%20style%3D%5C%22text-align%3A%20center%3Bmargin-top%3A-10px%5C%22%3E%5Cn%20%20%20%20%20%20%20%20%3Cel-link%20type%3D%5C%22primary%5C%22%3E%E5%BF%98%E8%AE%B0%E5%AF%86%E7%A0%81%3C%2Fel-link%3E%5Cn%20%20%20%20%20%20%20%20%3Cel-link%20type%3D%5C%22primary%5C%22%20%40click%3D%5C%22Login()%5C%22%3E%E7%94%A8%E6%88%B7%E7%99%BB%E5%85%A5%3C%2Fel-link%3E%5Cn%20%20%20%20%20%20%3C%2Fel-row%3E%5Cn%20%20%20%20%3C%2Fel-form%3E%5Cn%20%20%3C%2Fdiv%3E%5Cn%3C%2Ftemplate%3E%5Cn%3Cscript%3E%5Cnexport%20default%20%7B%5Cn%20%20name%3A%20'Register'%2C%5Cn%20%20data()%20%7B%5Cn%20%20%20%20return%20%7B%5Cn%20%20%20%20%20%20username%3A%20%5C%22%5C%22%2C%5Cn%20%20%20%20%20%20password%3A%20%5C%22%5C%22%2C%5Cn%20%20%20%20%20%20realname%3A%20''%2C%5Cn%20%20%20%20%20%20sex%3A%200%2C%5Cn%20%20%20%20%20%20idcard%3A%20''%2C%5Cn%20%20%20%20%20%20address%3A%20''%2C%5Cn%20%20%20%20%20%20msg%3A%20'%E5%97%A8%EF%BC%81%E5%97%A8%EF%BC%81%E5%97%A8%EF%BC%81'%2C%5Cn%20%20%20%20%20%20rules%3A%20%7B%5Cn%20%20%20%20%20%20%20%20realname%3A%20%5B%7B%5Cn%20%20%20%20%20%20%20%20%20%20required%3A%20true%2C%5Cn%20%20%20%20%20%20%20%20%20%20message%3A%20'%E8%AF%B7%E8%BE%93%E5%85%A5%E8%B4%A6%E5%8F%B7%E5%90%8D%E7%A7%B0'%2C%5Cn%20%20%20%20%20%20%20%20%20%20trigger%3A%20'blur'%5Cn%20%20%20%20%20%20%20%20%7D%2C%5Cn%20%20%20%20%20%20%20%20%20%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20min%3A%203%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20max%3A%2018%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20message%3A%20'%E9%95%BF%E5%BA%A6%E5%9C%A8%203%20%E5%88%B0%2018%20%E4%B8%AA%E5%AD%97%E7%AC%A6'%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20trigger%3A%20'blur'%5Cn%20%20%20%20%20%20%20%20%20%20%7D%5Cn%20%20%20%20%20%20%20%20%5D%5Cn%20%20%20%20%20%20%7D%5Cn%20%20%20%20%7D%5Cn%20%20%7D%2C%5Cn%20%20methods%3A%20%7B%5Cn%20%20%20%20Login()%20%7B%5Cn%20%20%20%20%20%20this.%24router.push('%2FLogin')%3B%5Cn%20%20%20%20%7D%2C%5Cn%20%20%20%20Register()%20%7B%5Cn%20%20%20%20%20%20let%20params%20%3D%20%7B%5Cn%20%20%20%20%20%20%20%20username%3A%20this.username%2C%5Cn%20%20%20%20%20%20%20%20password%3A%20this.password%2C%5Cn%20%20%20%20%20%20%20%20realname%3A%20this.realname%2C%5Cn%20%20%20%20%20%20%20%20sex%3A%20this.sex%2C%5Cn%20%20%20%20%20%20%20%20idcard%3A%20this.idcard%2C%5Cn%20%20%20%20%20%20%20%20address%3A%20this.address%5Cn%20%20%20%20%20%20%7D%3B%5Cn%20%20%20%20%20%20%2F%2F%E5%AE%9A%E4%B9%89%E5%90%8E%E7%AB%AF%E9%83%BD%E8%AF%B7%E6%B1%82%E5%9C%B0%E5%9D%80%5Cn%20%20%20%20%20%20var%20url%20%3D%20this.axios.urls.SYSTEM_USER_DOREG%3B%5Cn%20%20%20%20%20%20console.log(params)%3B%5Cn%20%20%20%20%20%20console.log(url)%3B%5Cn%20%20%20%20%20%20%2F%2F%E4%BB%A5%E4%B8%8B%E6%98%AFpost%E8%AF%B7%E6%B1%82%E5%8F%8A%E6%95%B4%E5%90%88%E8%B5%84%E6%BA%90%5Cn%20%20%20%20%20%20%2F%2F%E9%80%9A%E8%BF%87qs%E4%B8%AD%E7%9A%84stringify%E6%96%B9%E6%B3%95%E8%BF%9B%E8%A1%8C%E6%A0%BC%E5%BC%8F%E8%BD%AC%E6%8D%A2%5Cn%20%20%20%20%20%20%2F%2F%E6%B3%A8%E6%84%8F%E6%95%B0%E6%8D%AE%E6%98%AF%E4%BF%9D%E5%AD%98%E5%88%B0json%E5%AF%B9%E8%B1%A1%E7%9A%84params%E5%B1%9E%E6%80%A7%5Cn%20%20%20%20%20%20this.axios.post(url%2C%20params).then(r%20%3D%3E%20%7B%5Cn%20%20%20%20%20%20%20%20console.log(r)%3B%5Cn%20%20%20%20%20%20%20%20%2F%2F%E5%A6%82%E6%9E%9C%E6%90%BA%E5%B8%A6%E7%9A%84%E5%8F%82%E6%95%B0%E6%95%B0%E6%8D%AE%E8%B7%9F%E5%90%8E%E7%AB%AF%E6%95%B0%E6%8D%AE%E5%AF%B9%E5%BA%94%E6%AD%A3%E7%A1%AE%EF%BC%8C%E8%AF%B4%E6%98%8E%E7%99%BB%E5%85%A5%E6%88%90%E5%8A%9F%EF%BC%8C%E6%8F%90%E7%A4%BA%5Cn%20%20%20%20%20%20%20%20if%20(r.data.success)%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20this.%24message(%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20showClose%3A%20true%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20message%3A%20r.data.msg%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20type%3A%20'success'%5Cn%20%20%20%20%20%20%20%20%20%20%7D)%3B%5Cn%20%20%20%20%20%20%20%20%20%20%2F%2F%E6%B3%A8%E5%86%8C%E5%AE%8C%E6%88%90%E5%90%8E%E8%87%AA%E5%8A%A8%E8%BF%9B%E5%85%A5%E7%99%BB%E5%85%A5%E7%95%8C%E9%9D%A2%5Cn%20%20%20%20%20%20%20%20%20%20this.%24router.push('%2FLogin')%3B%5Cn%20%20%20%20%20%20%20%20%7D%20else%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20%2F%2F%E5%A6%82%E6%9E%9C%E6%90%BA%E5%B8%A6%E7%9A%84%E5%8F%82%E6%95%B0%E6%95%B0%E6%8D%AE%E8%B7%9F%E5%90%8E%E7%AB%AF%E6%95%B0%E6%8D%AE%E5%AF%B9%E5%BA%94%E9%94%99%E8%AF%AF%EF%BC%8C%E8%AF%B4%E6%98%8E%E7%99%BB%E5%85%A5%E5%A4%B1%E8%B4%A5%EF%BC%8C%E6%8F%90%E7%A4%BA%5Cn%20%20%20%20%20%20%20%20%20%20this.%24message.error(r.data.msg)%3B%5Cn%20%20%20%20%20%20%20%20%7D%5Cn%20%20%20%20%20%20%7D).catch(e%20%3D%3E%20%7B%5Cn%20%20%20%20%20%20%20%20console.log(e)%3B%5Cn%20%20%20%20%20%20%7D)%3B%5Cn%20%20%20%20%7D%5Cn%20%20%7D%5Cn%7D%5Cn%3C%2Fscript%3E%5Cn%3Cstyle%20scoped%3E%5Cn.login-wrap%20%7B%5Cn%20%20padding-top%3A%2030px%3B%5Cn%20%20box-sizing%3A%20border-box%3B%5Cn%20%20width%3A%20100%25%3B%5Cn%20%20height%3A%20100%25%3B%5Cn%20%20background-image%3A%20url()%3B%5Cn%20%20background-repeat%3A%20no-repeat%3B%5Cn%20%20background-position%3A%20center%20right%3B%5Cn%20%20background-size%3A%20100%25%3B%5Cn%7D%5Cn.login-container%20%7B%5Cn%20%20border-radius%3A%2010px%3B%5Cn%20%20margin%3A%200px%20auto%3B%5Cn%20%20width%3A%20350px%3B%5Cn%20%20padding%3A%2030px%2035px%2015px%2035px%3B%5Cn%20%20background%3A%20%23fff%3B%5Cn%20%20border%3A%201px%20solid%20%23eaeaea%3B%5Cn%20%20text-align%3A%20left%3B%5Cn%20%20box-shadow%3A%200%200%2020px%202px%20rgba(0%2C%200%2C%200%2C%200.1)%3B%5Cn%7D%5Cn.title%20%7B%5Cn%20%20margin%3A%200px%20auto%2040px%20auto%3B%5Cn%20%20text-align%3A%20center%3B%5Cn%20%20color%3A%20%23505458%3B%5Cn%7D%5Cn%3C%2Fstyle%3E%22%2C%22id%22%3A%22aoz9C%22%7D"></div><div><span><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2Fdyj5p5nxzd5i2_c9f30a1d96924fa5a3b49c91850188cf.gif%22%2C%22originWidth%22%3A1%2C%22originHeight%22%3A1%2C%22name%22%3A%22image.gif%22%2C%22size%22%3A43%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A1%2C%22height%22%3A1%7D"></span></span></div><h3 id="4SFcp">4.2、定义接口、接口实现类</h3><div><strong>接口</strong></div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22int%20insertSelective(User%20record)%3B%22%2C%22id%22%3A%225keqD%22%7D"></div><div><span><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2Fdyj5p5nxzd5i2_1fb416af9d5848f884789f5e9148ceb8.gif%22%2C%22originWidth%22%3A1%2C%22originHeight%22%3A1%2C%22name%22%3A%22image.gif%22%2C%22size%22%3A43%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A1%2C%22height%22%3A1%7D"></span></span></div><div><strong>接口实现</strong></div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22java%22%2C%22code%22%3A%22%40Override%5Cn%20%20%20%20public%20int%20insertSelective(User%20record)%20%7B%5Cn%20%20%20%20%20%20%20%20return%20userMapper.insertSelective(record)%3B%5Cn%20%20%20%20%7D%22%2C%22id%22%3A%22x8Grj%22%2C%22autoWrap%22%3Atrue%7D"></div><div><span><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2Fdyj5p5nxzd5i2_4d44d775042d4d299acd406764692943.gif%22%2C%22originWidth%22%3A1%2C%22originHeight%22%3A1%2C%22name%22%3A%22image.gif%22%2C%22size%22%3A43%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A1%2C%22height%22%3A1%7D"></span></span></div><h3 id="s0pDq">4.3、Controller层</h3><blockquote><div>在Controller编写方法，需要一定springmvc的基础</div></blockquote><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22java%22%2C%22code%22%3A%22%40RequestMapping(%5C%22%2FuserRegister%5C%22)%5Cn%20%20%20%20%40ResponseBody%5Cn%20%20%20%20public%20JsonResponseBody%3C%3F%3E%20userRegister(UserVo%20userVo%2C%20HttpServletResponse%20response)%20%7B%5Cn%20%20%20%20%20%20%20%20%2F%2F%E7%8A%B6%E6%80%81%E6%96%B0%E6%B3%A8%E5%86%8C%E9%BB%98%E8%AE%A4%E4%B8%BA0%5Cn%20%20%20%20%20%20%20%20userVo.setStatus(%5C%220%5C%22)%3B%5Cn%20%20%20%20%20%20%20%20%2F%2F%E5%9B%A0%E4%B8%BAID%E4%B8%BAString%E7%B1%BB%E5%9E%8B%E9%9C%80%E8%A6%81%E6%89%8B%E5%8A%A8%E8%AE%BE%E7%BD%AE%EF%BC%8C%E5%BD%93%E7%84%B6%E5%8F%AF%E4%BB%A5%E6%A0%B9%E6%8D%AE%E8%87%AA%E5%B7%B1%E7%9A%84%E9%9C%80%E8%A6%81%E6%94%B9%E4%B8%BAInt%E7%B1%BB%E5%9E%8B%5Cn%20%20%20%20%20%20%20%20userVo.setId(%5C%226%5C%22)%3B%5Cn%20%20%20%20%20%20%20%20int%20i%20%3D%20userService.insertSelective(userVo)%3B%5Cn%20%20%20%20%20%20%20%20if%20(i%20%3E%200)%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20return%20new%20JsonResponseBody%3C%3E(%5C%22%E7%94%A8%E6%88%B7%E6%B3%A8%E5%86%8C%E5%AE%8C%E6%88%90%EF%BC%81%E5%BF%AB%E5%8E%BB%E7%99%BB%E5%85%A5%E5%90%A7%EF%BC%81%5C%22%2C%20true%2C%200%2C%20null)%3B%5Cn%20%20%20%20%20%20%20%20%7D%20else%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20return%20new%20JsonResponseBody%3C%3E(%5C%22%E7%94%A8%E6%88%B7%E6%B3%A8%E5%86%8C%E5%A4%B1%E8%B4%A5%EF%BC%81%E9%87%8D%E6%96%B0%E8%BE%93%E5%85%A5%E3%80%82%5C%22%2C%20false%2C%200%2C%20null)%3B%5Cn%20%20%20%20%20%20%20%20%7D%5Cn%20%20%20%20%7D%22%2C%22id%22%3A%22t1bty%22%2C%22autoWrap%22%3Atrue%7D"></div><div><span><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2Fdyj5p5nxzd5i2_1ca3920b41d8425f9620d16b39e46a2b.gif%22%2C%22originWidth%22%3A1%2C%22originHeight%22%3A1%2C%22name%22%3A%22image.gif%22%2C%22size%22%3A43%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A1%2C%22height%22%3A1%7D"></span></span></div><h3 id="aq7T9">4.4、测试</h3><div><span><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2Fdyj5p5nxzd5i2_b4b48d31001040e99d85d4270d99ce8f.gif%22%2C%22originWidth%22%3A654%2C%22originHeight%22%3A905%2C%22size%22%3A0%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A654%2C%22height%22%3A905%7D"></span><span><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2Fdyj5p5nxzd5i2_2279c136622a41f8be56a6279eb37cd6.gif%22%2C%22originWidth%22%3A1%2C%22originHeight%22%3A1%2C%22name%22%3A%22image.gif%22%2C%22size%22%3A43%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A1%2C%22height%22%3A1%7D"></span></span><span>编辑</span></span></div><h1>三、跨域</h1><h2>1、什么是跨域问题</h2><blockquote><div>        <strong>跨域问题（Cross-Origin Resource Sharing，CORS）</strong>指的是在浏览器端，由于安全策略限制，<strong>不同源（域/协议/端口）之间的网页（或者Ajax请求）无法直接进行交互或访问对方的资源</strong>。同源策略是浏览器的一种安全机制，用于保护用户信息和防止恶意攻击。</div><div>        同源策略要求网页只能与相同源的资源进行交互，源（Origin）由协议、域名和端口号组成。当源不一致时，浏览器会阻止跨域的请求。例如，一个网页在域A中运行，试图通过JavaScript向域B发送AJAX请求，此时就会触发跨域问题。</div></blockquote><h2 style="background-color: transparent;">2、解决跨域问题</h2><blockquote><div>在你的项目里编写跨域过滤器<strong>CorsFilter2</strong>。</div></blockquote><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22java%22%2C%22code%22%3A%22package%20com.zking.ssm.util%3B%5Cnimport%20java.io.IOException%3B%5Cnimport%20javax.servlet.Filter%3B%5Cnimport%20javax.servlet.FilterChain%3B%5Cnimport%20javax.servlet.FilterConfig%3B%5Cnimport%20javax.servlet.ServletException%3B%5Cnimport%20javax.servlet.ServletRequest%3B%5Cnimport%20javax.servlet.ServletResponse%3B%5Cnimport%20javax.servlet.http.HttpServletResponse%3B%5Cn%2F**%5Cn%20*%20%E9%85%8D%E7%BD%AEtomcat%E5%85%81%E8%AE%B8%E8%B7%A8%E5%9F%9F%E8%AE%BF%E9%97%AE%5Cn%20*%20%5Cn%20*%20%40author%20Administrator%5Cn%20*%5Cn%20*%2F%5Cnpublic%20class%20CorsFilter2%20implements%20Filter%20%7B%5Cn%5Ct%40Override%5Cn%5Ctpublic%20void%20init(FilterConfig%20filterConfig)%20throws%20ServletException%20%7B%5Cn%5Ct%7D%5Cn%5Ct%40Override%5Cn%5Ctpublic%20void%20doFilter(ServletRequest%20servletRequest%2C%20ServletResponse%20servletResponse%2C%20FilterChain%20filterChain)%5Cn%5Ct%5Ct%5Ctthrows%20IOException%2C%20ServletException%20%7B%5Cn%5Ct%5CtHttpServletResponse%20httpResponse%20%3D%20(HttpServletResponse)%20servletResponse%3B%5Cn%5Ct%5Ct%2F%2F%20Access-Control-Allow-Origin%E5%B0%B1%E6%98%AF%E6%88%91%E4%BB%AC%E9%9C%80%E8%A6%81%E8%AE%BE%E7%BD%AE%E7%9A%84%E5%9F%9F%E5%90%8D%5Cn%5Ct%5Ct%2F%2F%20Access-Control-Allow-Headers%E8%B7%A8%E5%9F%9F%E5%85%81%E8%AE%B8%E5%8C%85%E5%90%AB%E7%9A%84%E5%A4%B4%E3%80%82%5Cn%5Ct%5Ct%2F%2F%20Access-Control-Allow-Methods%E6%98%AF%E5%85%81%E8%AE%B8%E7%9A%84%E8%AF%B7%E6%B1%82%E6%96%B9%E5%BC%8F%5Cn%5Ct%5CthttpResponse.setHeader(%5C%22Access-Control-Allow-Origin%5C%22%2C%20%5C%22*%5C%22)%3B%2F%2F%20*%2C%E4%BB%BB%E4%BD%95%E5%9F%9F%E5%90%8D%5Cn%5Ct%5CthttpResponse.setHeader(%5C%22Access-Control-Allow-Headers%5C%22%2C%20%5C%22responseType%2COrigin%2C%20X-Requested-With%2C%20Content-Type%2C%20Accept%5C%22)%3B%5Cn%5Ct%5CthttpResponse.setHeader(%5C%22Access-Control-Allow-Methods%5C%22%2C%20%5C%22POST%2C%20GET%2C%20PUT%2C%20DELETE%5C%22)%3B%5Cn%5Ct%5Ct%2F%2F%E5%85%81%E8%AE%B8%E5%AE%A2%E6%88%B7%E7%AB%AF%E5%A4%84%E7%90%86%E4%B8%80%E4%B8%AA%E6%96%B0%E7%9A%84%E5%93%8D%E5%BA%94%E5%A4%B4jwt%5Cn%5Ct%5Ct%2F%2FhttpResponse.setHeader(%5C%22Access-Control-Expose-Headers%5C%22%2C%20%5C%22jwt%2CContent-Disposition%5C%22)%3B%5Cn%5Ct%5CtfilterChain.doFilter(servletRequest%2C%20servletResponse)%3B%5Cn%5Ct%7D%5Cn%5Ct%40Override%5Cn%5Ctpublic%20void%20destroy()%20%7B%5Cn%5Ct%7D%5Cn%7D%22%2C%22id%22%3A%22JsZCM%22%2C%22autoWrap%22%3Atrue%7D"></div><div><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2Fdyj5p5nxzd5i2_fde500edd51f4f38a868f79f5e148d4b.gif%22%2C%22originWidth%22%3A1%2C%22originHeight%22%3A1%2C%22name%22%3A%22image.gif%22%2C%22size%22%3A43%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A1%2C%22height%22%3A1%7D"></span></div><blockquote><div>在web.xml里面添加过滤器的配置，然后就能解决我的跨域问题了。</div></blockquote><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22xml%22%2C%22code%22%3A%22%3C!--CrosFilter%E8%B7%A8%E5%9F%9F%E8%BF%87%E6%BB%A4%E5%99%A8--%3E%5Cn%20%20%3Cfilter%3E%5Cn%20%20%20%20%3Cfilter-name%3EcorsFilter%3C%2Ffilter-name%3E%5Cn%20%20%20%20%3Cfilter-class%3Ecom.zking.ssm.util.CorsFilter2%3C%2Ffilter-class%3E%5Cn%20%20%3C%2Ffilter%3E%5Cn%20%20%3Cfilter-mapping%3E%5Cn%20%20%20%20%3Cfilter-name%3EcorsFilter%3C%2Ffilter-name%3E%5Cn%20%20%20%20%3Curl-pattern%3E%2F*%3C%2Furl-pattern%3E%5Cn%20%20%3C%2Ffilter-mapping%3E%22%2C%22id%22%3A%22ClQxc%22%2C%22autoWrap%22%3Atrue%7D"></div><div><span><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2Fdyj5p5nxzd5i2_29db0b239336477686c2c232d47cdf05.gif%22%2C%22originWidth%22%3A1%2C%22originHeight%22%3A1%2C%22name%22%3A%22image.gif%22%2C%22size%22%3A43%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A1%2C%22height%22%3A1%7D"></span></span></div><div>我的分享就到这里，欢迎各位大佬在评论区讨论！！！</div><div><br /></div>