springboot/element-ui登陆操作/前后端分离 （文字版）

#springboot/element-ui登陆操作/前后端分离 （文字版）

---

##1.1流程（前端） 1使用vue-cli脚手架创建vue项目
2在终端输入命令 安装axios 和 element-ui
3 在main.js中引入element-ui和ajax
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
import axios from "axios"
Vue.prototype.$ajax=axios
3在main.js中设置baseUrl属性
axios.defaults.baseURL="http://localhost:8090
4在login.vue中引入element.ui表单样式
5定义 submit方法 发送使用this.$ajax 发送post请求（get请求不能除url拼接参数外提交数据）
-----这里引入ES6中异步发送axios请求的方式
async 方法名（）{
let {data}=await this.$axios.get(url)
//这里将返回值直接当作变量data处理
this.xxx=data.data
}
好处:代码结构更清晰，有更好的语义，写复杂业务的时候阅读起来更快更爽。
##1.2 流程（后端）
1 mysql创建数据库
2 idea新建项目，导入pom依赖，配置application.properties
3 创建domain，dao，service，web层，实现MVC分层架构
4 根据数据库表字段定义实体类，定义通用Mapper接口
5 定义service，注意
@Service 用于标记业务层组件，使spring可以扫描到
@Transactional 开启事务，因为springboot已经帮我们配置好了xml，所以在业务
层直接定义注解即可
6 在web层定义对应的用户controller
注意：这里使用
@RestController 使spring可以扫描到（待完善）
@RequestMapping 用于映射请求
@CrossOrigin 解决跨域问题（之后会在阶段杂谈中详细讨论跨域问题的解决）

 @PostMapping("/login")
   
//前台传来的数据使标准的json字符串，所以需要@RequestBody注解进行封装
public ResponseEntity loginIn(@RequestBody Student stu) {
    /**
     * 这里将结果信息封装成了对象
     * basecode 0 失败 1 成功
     * basemsg 传递请求信息
     * Object basedata 用于存储返回数据
     */
    BaseResult baseResult = new BaseResult();
    Student student = studentService.loginIn(stu.getStuid());
    if (student == null) {
        /**
         * 这里将basecode封装成了commonUtil 中的一个静态成员变量
         */
        baseResult.setCode(CommonUtil.FILE);
        baseResult.setErrmsg("用户名不存在");
    } else if (!student.getPassword().equals(stu.getPassword())) {
        baseResult.setCode(CommonUtil.FILE);
        baseResult.setErrmsg("密码错误");
    } else {
        baseResult.setCode(CommonUtil.SUUCESS);
        baseResult.setErrmsg("登录成功");
    }
    return new ResponseEntity<>(baseResult, HttpStatus.OK);
}

##前端注意事项

##后端注意事项
1 在比较用户名和密码的时候，初学者往往会使用通用Mapper selectAll 但在实际的开发环境下，数据库的数据往往会很庞大，这样查询时间会过长，造成用户体验差。
解决方案：

	public Student loginIn(Integer stuid) {
    	Example example = new Example(Student.class);
    	example.createCriteria().andEqualTo("stuid",stuid);
    	List students = studentMapper.selectByExample(example);
    	//这里不考虑stuid重复问题
    	return students.size()==0?null:students.get(0);
	}  

这种方式较适合在实际开发中使用 ，但建议使用shiro 更加安全可靠