登录页

登录页面我简单实现了一个单页面程序

代码如下：

<template>

<div id="login">

<vue-Header></vue-Header>

<div id="inputlogin">

<div class="username">用户名：</div>

<div class="inputusername">

<input type="text" name="userName" value v-model="userName" placeholder="请输入用户名">

</div><br>

<div class="password">

<span>密码：</span>

</div>

<div class="inputpassword">

<input type="password" name="password" value v-model="password" placeholder="请输入密码">

</div>

<div>

<input type="button" value="登录" @click="login">

<br>

</div>

<div>

登录情况：

<span style="color:red;font-size:13px;">{{responseResult}}</span>

</div>

</div>

<vue-Footer></vue-Footer>

</div>

</template>

js代码：

export default {

//导出组件

components: { vueFooter, vueHeader },

//将模块引出在其他地方使用

name: "Login",

data() {

//data即使不需要传数据，亦必须return,否则报错

return {

message: "返回的",

userName: "",

password: "",

responseResult:[],

};

},

methods:{

login(){

this.$axios.post('/login',{

userName:this.userName,

password:this.password,

}).then(successResponse=>{

if(successResponse.data.code=='200'){

debugger;

this.$router.replace({path:'/index'});

}else{

this.responseResult=successResponse.data.message;

}

}).catch(failResoponse=>{})

}

}

};

main.js 增加

var axios=require('axios');

axios.defaults.baseURL='http://localhost:8081'

Vue.prototype.$axios=axios;

Vue.config.productionTip = false

Vue.use(Element)

这里需要安装axios包， npm install axios，axios是vue与服务端通讯用的工具包。

config/index.js增加对跨域的支持

assetsSubDirectory: 'static',

assetsPublicPath: '/',

//路由代理配置

proxyTable: {

'/':{

target:'http://localhost:8081',

changeOrigin:true,

pathRewrite:{

'^/':''

}

}

}

后台springboot代码

package com.fire.controller;

import java.util.Objects;

import javax.validation.Valid;

import org.springframework.stereotype.Controller;

import org.springframework.validation.BindingResult;

import org.springframework.web.bind.annotation.CrossOrigin;

import org.springframework.web.bind.annotation.RequestBody;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.RequestMethod;

import org.springframework.web.bind.annotation.ResponseBody;

import com.fire.model.Result;

import com.fire.model.VueLoginInfo;

import com.fire.tools.ResultFactory;

@Controller

public class VueLoginController {

/**

* 登录控制器，前后端分离用的不同协议和端口，所以需要加入@CrossOrigin支持跨域。

* 给VueLoginInfoVo对象加入@Valid注解，并在参数中加入BindingResult来获取错误信息。

* 在逻辑处理中我们判断BindingResult知否含有错误信息，如果有错误信息，则直接返回错误信息。

* @CrossOrigin(origins = "http://domain2.com", maxAge = 3600)

*/

@CrossOrigin

@RequestMapping(value="/login",method=RequestMethod.POST,produces="application/json; charset=UTF-8")

@ResponseBody

public Result login(@Valid@RequestBody VueLoginInfo loginInfo,BindingResult bindingResult){

if(bindingResult.hasErrors()){

String message = String.format("登陆失败，详细信息[%s]。", bindingResult.getFieldError().getDefaultMessage());

return ResultFactory.buildFailResult(message);

}

if (!Objects.equals("javalsj", loginInfo.getUserName()) || !Objects.equals("123456", loginInfo.getPassword())) {

String message = String.format("登陆失败，详细信息[用户名、密码信息不正确]。");

return ResultFactory.buildFailResult(message);

}

return ResultFactory.buildSuccessResult("登陆成功。");

}

}

这里有一点需要注意：@CrossOrigin增加跨域注解，增加对跨域的支持。

package com.fire.tools;

import com.fire.model.Result;

public class ResultFactory {

public static Result buildSuccessResult(Object data){

return buidResult(ResultCode.success,"成功",data);

}

public static Result buildFailResult(String message) {

return buidResult(ResultCode.FAIL, message, null);

}

public static Result buidResult(ResultCode resultCode,String message,Object data){

return buidResult(resultCode.code, message, data);

}

public static Result buidResult(int resultCode, String message, Object data) {

return new Result(resultCode, message, data);

}

}

package com.fire.tools;

public enum ResultCode {

/**

* 成功

*/

success(200),

/**

* 失败

*/

FAIL(400),

/**

* 未知

*/

UNAUTHORIZED(401),

/**

* 未找到服务器

*/

NOT_FOUND(404),

/**

* 服务器内部错误

*/

INTERNAL_SERVER_ERROR(500);

public int code;

public int getCode() {

return code;

}

public void setCode(int code) {

this.code = code;

}

ResultCode(int code){

this.code=code;

}

}

到此，vue+springboot实现前后台分离登录已经完成，当然正常的项目比这要复杂几百倍，这个只是一个思路仅供参考。

谢谢！！！