@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,“登录失败”,“”);
}
}
启动后端项目：
访问登录界面，效果如下：
这样一个简答的登录就完成了，接下来，我们会对这个登录进一步完善。
最低0.47元/天 解锁文章
645
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
