1.技术架构
后端:
1.ssm+maven多模块
2.swagger文档描述(代码拷贝过来 就可以生成了)
3.postman测试
4.请求 put /get/post/patch/delete…
5.json
前端:
1.Nodejs 前端服务
2.npm: 管理js库 依赖关系
3.webpack:对静态资源打包
4.vuejs:MVVM(model view view Model 双向绑定)模式的开发js库
5.ElementUI:前端ui框架
6.vuecli:vue开发脚手架,能够快速搭建vue项目,里面包含了webpack的打包配置,服务器热启动.
2.后端crud实现
后端项目结构:
注意:pom.xml被忽略
现象: 导包没用,项目变灰
不能忽略这些,√都要取消
2.1 restfull概述
Restfull是http协议的扩展,它以资源为核心,通过url定位资源,以http协议不同请求方式表示操作(PUT,POST,GET,DELETE,PATCH,HEAD,OPTION)
请求示例,这只是一般情况,后面会进行优化,比如添加修改都用Put
1.添加:
PUT /employee
2.删除:
DELETE /employee/id
3.修改:
POST /employee
4.查询一个:
GET /employee/id
5.批量查询
PATCH/employee
2.2 后端接口实现
1.继承结构
domain继承BaseDomain
Mapper.java继承BaseMapper 自己的Mapper.xml
不要忘记了在Mapper.xml里面忘记了写对应的映射语句
IServie继承与IbaseService的基础接口方法
ServiceImpl基于BaseServiceImpl,里面实现基础接口实现.
以部门为例写一个crud接口
1.domain
public class Department extends BaseDomain {
private String name;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
@Override
public String toString() {
return "Department{" +
"name='" + name + '\'' +
", id=" + id +
'}';
}
}
2.mapper
public interface DepartmentMapper
extends BaseMapper<Department> {
}
mapper.xml
<!--方法的id最好与baseMapper里方法名保持一致-->
<!--查询所有-->
<select id="findAll" resultType="Department">
select * from t_department
</select>
<!--通过id查询一个-->
<select id="findOne" parameterType="long" resultType="Department">
select * from t_department where id = #{id}
</select>
<!--新增-->
<insert id="save" parameterType="Department">
insert into t_department(name) VALUES(#{name})
</insert>
<!--修改-->
<update id="update" parameterType="Department">
update t_department set name = #{name} where id = #{id}
</update>
<!--删除-->
<delete id="delete" parameterType="long">
delete from t_department where id = #{id}
</delete>
3.service
public interface IDepartmentService
extends IBaseService<Department> {
}
serviceImpl
@Service
public class DepartmentServiceImpl
extends BaseServiceImpl<Department>
implements IDepartmentService {
}
4.controller
@Controller
@RequestMapping("/department")
@CrossOrigin
public class DepartmentController {
@Autowired
private IDepartmentService departmentService;
/**
* equestMethod.PATCH 批量操作
* @return
*/
@RequestMapping(value = "/list",method = RequestMethod.PATCH)
@ResponseBody
public List<Department> findAll(){
return departmentService.findAll();
}
/**
* RequestMethod.GET 表示查询一个
* @param id
* @return
*/
@RequestMapping(value = "/{id}",method = RequestMethod.GET)
@ResponseBody
public Department findOne(@PathVariable Long id){
return departmentService.findOne(id);
}
/**
* RequestMethod.PUT 表示新增请求
* @param department
* @return
*/
@RequestMapping(method = RequestMethod.PUT)
@ResponseBody
public AjaxResult add(@RequestBody Department department){
try {
departmentService.save(department);
} catch (Exception e) {
e.printStackTrace();
return new AjaxResult("新增失败:"+e.getMessage());
}
return new AjaxResult();
}
/**
* RequestMethod.POST 修改请求
* @param department
* @return
*/
@RequestMapping(method = RequestMethod.POST)
@ResponseBody
public AjaxResult update(@RequestBody Department department){
try {
departmentService.update(department);
} catch (Exception e) {
e.printStackTrace();
return new AjaxResult("修改失败:"+e.getMessage());
}
return new AjaxResult();
}
/**
* RequestMethod.DELETE 删除请求
* @param id
* @return
*/
@RequestMapping(value = "/{id}",method = RequestMethod.DELETE)
@ResponseBody
public AjaxResult delete(@PathVariable Long id){
try {
departmentService.delete(id);
} catch (Exception e) {
e.printStackTrace();
return new AjaxResult("删除失败:"+e.getMessage());
}
return new AjaxResult();
}
}
到这一步,后台就准备完毕
3 前端项目准备
1.运行前端项目(之前网上下载的模板)
npm install 安装依赖前端js库
npm run dev 运行前端项目
npm run build 打包–先不管 发布时候使用
2.新建一个department.vue文件(可以copy模板自带的table.vue再进行修改)
3.配置路由
import department from './views/department/Department.vue'
{ path: '/department', component: department, name: '部门管理' },
4.实现crud
4.1 关闭Mock模拟数据,使用后台提供的真实数据
4.2 登录拦截先取消,后面再做登录相关
4.3 在main.js页面引入axios
import axios from 'axios'
//配置axios的全局基本路径
axios.defaults.baseURL='http://localhost/'
//全局属性配置,在任意组件内可以使用this.$http获取axios对象
Vue.prototype.$http = axios
4.4 修改department.vue里面的细节方法请求等
4.4.1模板的请求转为axios请求
//editUser(para).then((res) => {
this.$http.post("/department",para).then((res) =>
4.4.2 数据展示问题,根据实际情况
this.departments = res.data;
4.5 解决跨域问题
4.5.1-----spring版本4.2.5以上才支持注解
<!-- spring版本号 -->
<spring.version>4.2.5.RELEASE</spring.version>
4.5.2-----控制层加注解@CrossOrigin
@Controller
@RequestMapping("/department")
@CrossOrigin
public class DepartmentController {
其余解决方式
点击这里查看更多跨域问题解决方式