@Test
@DisplayName(“删除”)
public void testDelete(){
userMapper.deleteById(1);
}
}
至此前后端项目基本搭建完成,接下来开始进行功能开发。
====================================================================
1.1、登录界面
在前面访问页面的时候,有一个 V logo,看起来比较奇怪,我们先把它去掉,这个图片的引入是在根组件中——src\App.vue
,把下面一行注释或者去掉。
在src目录下新建文件夹views,在views下新建文件 login.vue
登录
用户名:
密码:
登录
1.2、添加路由
在 router\index.js
里添加路由,代码如下:
import Vue from ‘vue’
import Router from ‘vue-router’
import HelloWorld from ‘@/components/HelloWorld’
//导入登录页面组件
import Login from ‘@/views/login.vue’
Vue.use(Router)
export default new Router({
routes: [
{
path: ‘/’,
name: ‘HelloWorld’,
component: HelloWorld
},
//添加登录页面路由
{
path:‘/login’,
name: ‘Login’,
component: Login
}
]
})
OK,现在在浏览器里输入 http://localhost:8080/#/login
,就可以访问登录页面:
页面有点粗糙简陋对不对,没关系,我们可以引入ElmentUI
,使用ElementUI中已经成型的组件。
1.3、引入ElementUI美化界面
Element 的官方地址为 http://element-cn.eleme.io/#/zh-CN ,官方文档比较好懂,大部分组件复制粘贴即可。
1.3.1、安装Element UI
在vscode 中打开终端,运行命令npm i element-ui -S
,就安装了 element ui 最新版本—当前是 2.15.0
1.3.2、引入 Element
引入分为完整引入和按需引入两种模式,按需引入可以缩小项目的体积,这里我们选择完整引入。
根据文档,我们需要修改 main.js 为如下内容:
// 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’
import App from ‘./App’
import router from ‘./router’
//引入ElementUI
import ElementUI from ‘element-ui’
import ‘element-ui/lib/theme-chalk/index.css’
Vue.config.productionTip = false
/* eslint-disable no-new */
Vue.use(ElementUI)
new Vue({
el: ‘#app’,
router,
components: { App },
template: ‘’
})
1.3.3、使用ElementUI美化登录页面
现在开始使用 ElementUI和 css美化我们的登录界面,修改后的login.vue
代码如下:
系统登录
<el-input
type=“text”
v-model=“loginForm.loginName”
auto-complete=“off”
placeholder=“账号”
<el-input
type=“password”
v-model=“loginForm.password”
auto-complete=“off”
placeholder=“密码”
<el-button
type=“primary”
style=“width: 100%; border: none”
登录</el-button
需要注意:
-
在
src\assets
路径下新建一个一个文件夹img
,在 img 里放了一张网上找到的无版权图片作为背景图 -
App.vue
里删了一行代码,不然会有空白:
margin-top: 60px;
好了,看看我们修改之后的登录界面效果:
OK,登录界面的面子已经做好了,但是里子还是空的,没法和后台交互。
1.4、引入axios发起请求
相信大家都对 ajax 有所了解,前后端分离情况下,前后端交互的模式是前端发出异步式请求,后端返回 json 。
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,本质上也是对原生XHR的封装,只不过它是Promise的实现版本,符合最新的ES规范。在这里我们只需要知道它是非常强大的网络请求处理库,且得到广泛应用即可。
在项目目录下运行命令 npm install --save axios
,安装模块:
在 main.js
里全局注册 axios:
var axios = require(‘axios’)
// 全局注册,之后可在其他组件中通过 this.$axios 发送数据
Vue.prototype.$axios = axios
那么怎么使用 axios
发起请求呢?
在 login.vue
中添加方法:
methods: {
login () {
this.$axios
.post(‘/login’, {
loginName: this.loginForm.loginName,
password: this.loginForm.password
})
.then(successResponse => {
if (successResponse.data.code === 200) {
this.$router.replace({path: ‘/’})
}
})
.catch(failResponse => {
})
}
},
这个方法里通过 axios 向后台发起了请求,如果返回成功的结果就跳转到 /
路由下。
在登录按钮里触发这个方法:
<el-button
type=“primary”
style=“width: 100%; border: none”
@click=“login”
登录</el-button
那么现在就能向后台发起请求了吗?还没完。
1.5、前端相关配置
- 反向代理
修改 src\main.js
,添加反向代理的配置:
// 设置反向代理,前端请求默认发送到 http://localhost:8888/api
axios.defaults.baseURL = ‘http://localhost:8088/api’
这么一来,我们在前面写的登录请求,访问的后台地址实际就是 http://localhost:8088/api/login
- 跨域配置
前后端分离会带来一个问题—跨域,关于跨域,这里就不展开讲解。在 config\index.js
中,找到 proxyTable 位置,修改为以下内容:
proxyTable: {
‘/api’: {
target: ‘http://localhost:8088’,
changeOrigin: true,
pathRewrite: {
‘^/api’: ‘’
}
}
},
2.1、统一结果封装
这里我们创建了一个 Result 类,用于异步统一返回的结果封装。一般来说,结果里面有几个要素必要的
-
是否成功,可用 code 表示(如 200 表示成功,400 表示异常)
-
结果消息
-
结果数据
/**
-
@Author: 三分恶
-
@Date: 2021/1/17
-
@Description: 统一结果封装
**/
public class Result {
//相应码
private Integer code;
//信息
private String message;
//返回数据
private Object data;
//省略getter、setter、构造方法
}
实际上由于响应码是固定的,code
属性应该是一个枚举值,这里作了一些简化。
2.2、登录业务实体类
为了接收前端登录的数据,我们这里创建了一个登录用的业务实体类:
public class LoginDTO {
private String loginName;
private String password;
//省略getter、setter
}
2.3、控制层
LoginController,进行业务响应:
/**
-
@Author: 三分恶
-
@Date: 2021/1/17
-
@Description: TODO
**/
@RestController
public class LoginController {
@Autowired
LoginService loginService;
@PostMapping(value = “/api/login”)
@CrossOrigin //后端跨域
public Result login(@RequestBody LoginDTO loginDTO){
return loginService.login(loginDTO);
}
}
2.4、业务层
业务层进行实际的业务处理。
- LoginService:
public interface LoginService {
public Result login(LoginDTO loginDTO);
}
- LoginServiceImpl:
/**
-
@Author: 三分恶
-
@Date: 2021/1/17
-
@Description:
**/
@Service
public class LoginServiceImpl implements LoginService {
@Autowired
private UserMapper userMapper;
@Override
public Result login(LoginDTO loginDTO) {
if (StringUtils.isEmpty(loginDTO.getLoginName())){
return new Result(400,“账号不能为空”,“”);
}
if (StringUtils.isEmpty(loginDTO.getPassword())){
return new Result(400,“密码不能为空”,“”);
}
//通过登录名查询用户
QueryWrapper wrapper = new QueryWrapper();
wrapper.eq(“login_name”, loginDTO.getLoginName());
User uer=userMapper.selectOne(wrapper);
//比较密码
if (uer!=null&&uer.getPassword().equals(loginDTO.getPassword())){
return new Result(200,“”,uer);
}
return new Result(400,“登录失败”,“”);
}
}
启动后端项目:
访问登录界面,效果如下:
这样一个简答的登录就完成了,接下来,我们会对这个登录进一步