实训总结，第⼀次vue+SpringBoot前后端分离开发，实现前后端分离登录注册
及单表CRUD
⽂章⽬录
⼀. 前⾔
花了两天时间完成了这次实训，因为是第⼀次做前后端分离，碰到不少问题，由于只涉及到单表的CRUD，所以⼤部分都是前端的问题，在这⾥记录⼀下⾃⼰的⼼得，以及⼀些问题的总结。
另外在项⽬中同时使⽤了SpringDataJpa以及MyBatis是因为这次实训本来是两个⼈⼀组做的，且要突出各⾃所做的部分，所以就⼲脆admin表相关都使⽤SpringDataJpa，user表相关都使⽤的MyBatis。
整体界⾯的设计参考：
前后端分离以及SpringDataJpa相关操作参考：
⼆. 课题简介
1. 课题任务
根据，学习如何初始化vue项⽬和spring boot来完成⼀个完整的登录注册案例以及实现⼀个⽤户表的CRUD功能。
2. 课题要求
通过实训中对项⽬的搭建，将本学期所学到过的知识融会贯通起来，开发⼀个具有前后台的B/S业务系统，能实现⼀定的业务功能。作品包含但不限于SpringBoot后台、Vue前端技术、mybatis、mysql数据库…
3. 开发环境
JDK 1.8 + IntelliJ IDEA 2019.3 + MySQL 8.0.17 + maven
4. 项⽬技术
SpringBoot + MyBatis + SpringDataJpa + Vue + element UI
三. 实现功能
本次项⽬是⼀个⼩型的登录注册系统，然后再在登录注册的基础上实现⽤户的增删查改功能，使得系统具备⼀定的业务能⼒，具体功能如下：
1. 管理员⽤户
登录注册相关功能：
注册功能：实现管理员⽤户的注册
登录功能：输⼊⽤户名密码登⼊系统
修改密码：修改当前管理员⽤户密码
退出登录：退出当前⽤户登录状态
2. ⽤户管理（CRUD）
管理员⽤户登录系统后对⽤户的增删改查：
编辑功能：修改⽤户信息
分页查询：查询⽤户列表分页显⽰
添加功能：添加⽤户进⼊⽤户表
删除⽤户：删除单个⽤户以及批量删除⽤户
四. 遇到的问题及解决⽅法
1. 跨域问题
在前端⽆法直接访问到后端的数据接⼝，来实现前后端数据交互，前后端都可以解决跨域问题，在当前项⽬中，采⽤的是后端解决⽅案，在后端通过编写配置类实现WebConfigurer接⼝，并重写该接⼝中的addCrosMapping()⽅法来解决跨域问题。
代码如下：
/**
* 跨域问题解决
*/
@Configuration
public class CrosConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry){
registry.addMapping("/**")
.allowedOrigins("*")
.allowedMethods("GET","POST","PUT","DELETE","OPTION")
.allowCredentials(true)
.maxAge(3600)
.allowedHeaders("*");
}
}
2. 路由遍历
遍历Index下的⼦路由在侧边栏容器Aside中⽣成侧边栏
路由配置：
const routes = [
{
path: '/Index',
name: '⽤户管理',
component: Index,
children: [
{
path: '/FindAll',
name: '所有⽤户',
component: FindAll
},
{
path: '/AddUser',
name: '添加⽤户',
component: AddUser
}
]
spring mvc和boot区别}
];
遍历⽣成侧边栏：
<el-aside width="200px" >
<el-menu router :default-openeds="['0']">
<el-submenu index="0">
<template slot="title"><i class="el-icon-menu"></i>{{$utes[0].name}}</template>                        <el-menu-item v-for="item in $utes[0].children"
:class="$route.path===item.path ? 'is-active':''"
:index="item.path">{{item.name}}
</el-menu-item>
</el-submenu>
</el-menu>
</el-aside>
效果图：
3. 页⾯间传递数据
实现主界⾯当前管理员⽤户名回显，以及修改密码，需要登录时的⽤户名和密码，再次访问数据库⽐较⿇烦，所以这⾥选择直接在前端页⾯间传递
最开始使⽤的是query⽅式传递数据，但是这样会在浏览器地址栏直接带上传递的数据，不符合我的业务需求（我需要传递的是⽤户名密码），所以后⾯选择了params⽅式
query⽅式与params⽅式的区别：
1. query⽅式会显式地将页⾯跳转时携带的数据附带在跳转的url后，⽽params⽅式不会
2. query⽅式是根据在路由中配置的path属性值跳转页⾯，⽽params是根据在路由中配置的name属性值跳转页⾯
query⽅式效果图如下：
query⽅式数据传递及获取：
/**
* 在Login页⾯跳转到Index页⾯的同时携带⽤户名密码数据
*/
this.$router.push({
path: '/Index',
query: {
username: _this.form.username,
password: _this.form.password
}
});
/**
* 在Index页⾯获取⽤户名密码数据
*/
this.username = this.$route.query.username;
this.password = this.$route.query.password;
params⽅式效果图如下：
params⽅式数据传递及获取：
/**
* 在Login页⾯跳转到Index页⾯的同时携带⽤户名密码数据
*/
this.$router.push({
name: '⽤户管理',
params: {
username: _this.form.username,
password: _this.form.password
}
});
/**
* 在Index页⾯获取⽤户名密码数据
*/
this.username = this.$route.params.username;
this.password = this.$route.params.password;
4. elementUI编辑及删除表格当前⾏
通过给elementUI表格当前操作相关列添加slot-scope="scope"属性，就可以在⽅法中，通过参数scope.$w获取当前⾏相关数据，然后进⾏操作
前端代码：
<el-table-column
label="操作"
width="100">
<template slot-scope="scope">
<el-button @click="edit(scope.$w)" type="text"
size="small">编辑
</el-button>
<el-button type="text" size="small" @click="del(scope.$w)">删除
</el-button>
</template>
</el-table-column>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。