Vue前后端分离示例

一.账号密码登录

1.前端:

(1)HTML部分

 <el-form-item prop="username">
                  <el-input
                      type="text"
                      v-model="formLogin.username"
                      placeholder="用户名">
                    <i slot="prepend" class="el-icon-user"></i>
                  </el-input>
   </el-form-item>
 <el-form-item prop="password">
                  <el-input
                      type="password"
                      v-model="formLogin.password"
                      placeholder="密码">
                    <i slot="prepend" class="el-icon-lock"></i>
                  </el-input>
   </el-form-item>

(2)JS部分 

用axios的前提是要配置跨域 参考文章

Vue解决跨域问题_翁炜强的博客-CSDN博客

      this.$axios({ //用axios请求 前提要配置跨域
        method: 'post',
        url: '/api/demo/SPALogin', //请求后端接口
        params: {
          username: that.formLogin.username, //传入参数
          password: that.formLogin.password,
          id: 'login'
        }
      }).then(
          response => {
             //response.data 即为后端向前端发送的数据
          },
          error => {

          }
      )

2.后端(Java Servlet部分):

(1)获取参数

if (request.getParameter("username") != null && request.getParameter("password") != null) {
				userName = request.getParameter("username").toString(); //获取传入的参数值
				passWord = request.getParameter("password").toString();
			}

(2)向前端返回json数据 

String json = new Gson().toJson("登录成功");
out.write(json);