(一)页面原型展示
- 找到项目资源 -
产品原型 > 瑞吉外卖后台(管理端)- 登录.html
- 点开
登录.html
页面 - 登录页面有两个文本框需要用户输入用户名和密码,客户端要进行非空校验,单击【登录】按钮之后,表单数据以JSON格式通过AJAX请求方式发送到后台,后台控制器要编写相应的处理函数,对提交的数据进行业务处理,然后将处理结果返回给前端。
- 不妨看一看
login.html
页面代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>瑞吉外卖管理端</title> <link rel="shortcut icon" href="../../favicon.ico"> <!-- 引入样式 --> <link rel="stylesheet" href="../../plugins/element-ui/index.css" /> <link rel="stylesheet" href="../../styles/common.css"> <link rel="stylesheet" href="../../styles/login.css"> <link rel="stylesheet" href="../../styles/icon/iconfont.css" /> <style> .body{ min-width: 1366px; } </style> </head> <body> <div class="login" id="login-app"> <div class="login-box"> <img src="../../images/login/login-l.png" alt=""> <div class="login-form"> <el-form ref="loginForm" :model="loginForm" :rules="loginRules" > <div class="login-form-title"> <img src="../../images/login/logo.png" style="width:139px;height:42px;" alt="" /> </div> <el-form-item prop="username"> <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号" maxlength="20" prefix-icon="iconfont icon-user" /> </el-form-item> <el-form-item prop="password"> <el-input v-model="loginForm.password" type="password" placeholder="密码" prefix-icon="iconfont icon-lock" maxlength="20" @keyup.enter.native="handleLogin" /> </el-form-item> <el-form-item style="width:100%;"> <el-button :loading="loading" class="login-btn" size="medium" type="primary" style="width:100%;" @click.native.prevent="handleLogin"> <span v-if="!loading">登录</span> <span v-else>登录中...</span> </el-button> </el-form-item> </el-form> </div> </div> </div> <!-- 开发环境版本,包含了有帮助的命令行警告 --> <script src="../../plugins/vue/vue.js"></script> <!-- 引入组件库 --> <script src="../../plugins/element-ui/index.js"></script> <!-- 引入axios --> <script src="../../plugins/axios/axios.min.js"></script> <script src="../../js/request.js"></script> <script src="../../js/validate.js"></script> <script src="../../api/login.js"></script> <script> new Vue({ el: '#login-app', data() { return { loginForm:{ username: 'admin', password: '123456' }, loading: false } }, computed: { loginRules() { const validateUsername = (rule, value, callback) => { if (value.length < 1 ) { callback(new Error('请输入用户名')) } else { callback() } } const validatePassword = (rule, value, callback) => { if (value.length < 6) { callback(new Error('密码必须在6位以上')) } else { callback() } } return { 'username': [{ 'validator': validateUsername, 'trigger': 'blur' }], 'password': [{ 'validator': validatePassword, 'trigger': 'blur' }] } } }, created() { }, methods: { async handleLogin() { this.$refs.loginForm.validate(async (valid) => { if (valid) { this.loading = true let res = await loginApi(this.loginForm) if (String(res.code) === '1') { localStorage.setItem('userInfo',JSON.stringify(res.data)) window.location.href= '/backend/index.html' } else { this.$message.error(res.msg) this.loading = false } } }) } } }) </script> </body> </html>
- Vue对象通过
el
属性绑定了id
属性为login-app
的div
元素 - Vue对象通过
data()
方法绑定JSON数据loginForm
,通过computed
绑定校验规则loginRules
- Vue对象通过
methods
绑定对登录表单数据进行处理的异步方法handleLogin
- 在前端处理函数里,有后端处理函数返回的结果,保存在
res
变量里,里面有三个数据:res.code
、res.data
、res.msg
,这就要求后端处理函数返回JSON数据必须要包含这三项内容。
(二)登录页面展示
- 页面位置:
项目/resources/backend/page/login/login.html
- 为什么Vue对象里要绑定这个用户登录数据呢?
- 因为员工表
employee
里有一条数据:admin
与123456
(MD5加密之后就成了e10adc3949ba59abbe56e057f20f883e
) - 单击【登录】按钮,首先进行校验,如果校验通过,按钮标题就会变成
登录中……
,如果校验失败,按钮标题就依然是登录
(三)查看登录请求信息
- 按
F12
键进入浏览器的调试模式 - 说明单击登录按钮通过客户端校验之后,请求的URL:
http://localhost:8080/employee/login
- 后面我们会在雇员控制器里编写相应的处理函数
login()
@RestController // 交给Spring容器管理 @RequestMapping("/employee") public class EmployeeController { @PostMapping("/login") public R<Employee> login(HttpRequest request, @RequestBody Employee employee) { return null; } }
(四)数据模型 - 雇员表
- 查看雇员表结构
二、代码开发
- 开发流程图
(一)创建雇员实体类
- ORM(Object Relation Mapping)对象关系映射
- 雇员实体类(Employee)—— 雇员表(employee)
序号 |
实体属性名 |
关 |