ssm与前后端分离
ssm框架项目以及前后端分离模式练习-day1
一.搭建后台代码的模块
二.使用restfull发送请求
2.1restfull的概述
Restfull是http协议的扩展,它以资源为核心,通过url定位资源,以http协议不同请求方式表示操作
| 请求方式 | 作用 |
|---|---|
| put | 新增 |
| post | 修改 |
| PATCH | 查询所有 |
| delete | 删除 |
| get | 条件查询/查询单个 |
2.2代码呈现
在这里插入代码片@Controller
@RequestMapping("/employee")
//解决ajax(我们后台用的是axiso也就是封装了ajax请求的另外一种方式)异域请求
@CrossOrigin
public class EmoloyeeController {
@Autowired
private IEmployeeService iEmployeeService;
//@RequestMapping("/list") PATCH resultful风格中的查询所有
@RequestMapping(method = RequestMethod.PATCH)
@ResponseBody
public List list(){
return iEmployeeService.queryAll();
}
//json格式过来 @RequestBody 接收json数据
@ResponseBody
@RequestMapping(value="/save",method = RequestMethod.PUT)
public AjaxResult save(@RequestBody Employee employee){
try {
iEmployeeService.save(employee);
} catch (Exception e) {
e.printStackTrace();
return AjaxResult.me().setMsg("操作失败").setSuccess(false);
}
return AjaxResult.me();
}
@ResponseBody
@RequestMapping(value="/update",method = RequestMethod.POST)
//@RequestBody 前台传过来的是json格式数据，我们需要接受请求封装成对象
public AjaxResult update(@RequestBody Employee employee){
try {
iEmployeeService.update(employee);
} catch (Exception e) {
e.printStackTrace();
return AjaxResult.me().setMsg("操作失败").setSuccess(false);
}
return AjaxResult.me();
}
// /employee/id=1 /employee/1
// 编译的问题
//@PathVariable获取上面requestMapping中接受的id值赋值给Long id
@RequestMapping(value="{id}",method = RequestMethod.DELETE)
@ResponseBody
public AjaxResult delete(@PathVariable("id") Long id){
try {
iEmployeeService.delete(id);
} catch (Exception e) {
e.printStackTrace();
return AjaxResult.me().setMsg("操作失败").setSuccess(false);
}
return AjaxResult.me();
}
//resultful风格中查询一条数据的传值方法
@RequestMapping(value="{id}",method = RequestMethod.GET)
@ResponseBody
public AjaxResult findOne(@PathVariable("id") Long id){
try {
Employee employee = iEmployeeService.queryOne(id);
} catch (Exception e) {
e.printStackTrace();
return AjaxResult.me().setMsg("操作失败").setSuccess(false);
}
return AjaxResult.me();
}
三.前台代码使用网上现成的别人写好的代码模块（使用脚手架）
—>下载地址
3.1 运行前端项目
npm install 安装依赖前端js库
npm run dev 运行前端项目
npm run build 打包–先不管 发布时候使用
3.2 实现crud
关闭mock
注释登录
在main.js页面引入axios
import axios from 'axios'
//配置axios的全局基本路径
axios.defaults.baseURL='http://localhost/'
//全局属性配置，在任意组件内可以使用this.$http获取axios对象
Vue.prototype.$http = axios
3.3前台代码显示数据的执行流程
3.4前台代码CRUD
- 页面表格回显部分
<el-table :data="employees" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
<el-table-column type="selection" width="55">
el-table-column>
<el-table-column type="index" width="60">
el-table-column>
<el-table-column prop="name" label="姓名" width="120" sortable>
el-table-column>
<el-table-column prop="sex" label="性别" width="100" :formatter="formatSex" sortable>
el-table-column>
<el-table-column prop="age" label="年龄" width="100" sortable>
el-table-column>
<el-table-column prop="birth" label="生日" width="120" sortable>
el-table-column>
<el-table-column prop="addr" label="地址" min-width="180" sortable>
el-table-column>
<el-table-column label="操作" width="150">
<template scope="scope">
<el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑el-button>
<el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除el-button>
template>
el-table-column>
el-table>
- js代码部分
//获取用户列表
data() {
return {
filters: {
name: ''
},
employees: [],
total: 0,
page: 1,
listLoading: false,
sels: [],//列表选中列
editFormVisible: false,//编辑界面是否显示
editLoading: false,
editFormRules: {
name: [
{ required: true, message: '请输入姓名', trigger: 'blur' }
]
},
methods: {
//性别显示转换
formatSex: function (row, column) {
return row.sex == 1 ? '男' : row.sex == 0 ? '女' : '未知';
},
handleCurrentChange(val) {
this.page = val;
this.getEmployees();
},
//获取用户列表
getEmployees() {
let para = {
page: this.page,
name: this.filters.name
};
//刷新效果
this.listLoading = true;
//NProgress.start();
//发送axios请求 res是返回数据
this.$http.patch("/employee",para).then(res=>{
console.debug(res)
//getUserListPage(para).then((res) => {
//this.total = res.data.total;
this.total = 50;
this.employees = res.data;
this.listLoading = false;
//NProgress.done();
});
},
//删除
handleDel: function (index, row) {
this.$confirm('确认删除该记录吗?', '提示', {
type: 'warning'
}).then(() => {
this.listLoading = true;
this.$http.delete('/employee/'+row.id).then((res)=>{
console.debug(res);
this.listLoading = false;
if(res.data.success){
this.$message({
message: res.data.msg,
type: 'success'
});
console.debug(2)
//这一步是为了重新加载数据(相当于刷新页面)
}else {
this.$message({
message: res.data.msg,
type: 'error'
});
}
this.getEmployees();
});
}).catch(() => {
//这里是取消删除选项后做的操作
});
},
mounted() {
this.getEmployees();
}
}
3.5crud部分
//删除
handleDel: function (index, row) {
this.$confirm('确认删除该记录吗?', '提示', {
type: 'warning'
}).then(() => {
this.listLoading = true;
this.$http.delete('/employee/'+row.id).then((res)=>{
console.debug(res);
this.listLoading = false;
if(res.data.success){
this.$message({
message: res.data.msg,
type: 'success'
});
console.debug(2)
//这一步是为了重新加载数据(相当于刷新页面)
}else {
this.$message({
message: res.data.msg,
type: 'error'
});
}
this.getEmployees();
});
}).catch(() => {
//这里是取消删除选项后做的操作
});
},
//显示编辑界面
handleEdit: function (index, row) {
this.employeeVisible = true;
this.employee = Object.assign({}, row);
},
//显示新增界面
handleAdd: function () {
this.employeeVisible = true;
this.employee = {
name: ''
};
},
//编辑
editSubmit: function () {
this.$refs.employeeFrom.validate((valid) => {
if (valid) {
this.$confirm('确认提交吗？', '提示', {}).then(() => {
this.editLoading = true;
//复制一份数据 用于修改时回显用的 因为我们前面的页面用的v-model双向绑定 若不用模板我们在修改时不保存前台数据也会变化
let para = Object.assign({}, this.employee);
let url = "/employee/save";
if (para.id) {
url = "/employee/update";
}
this.$http.put(url, para).then((res) => {
this.editLoading = false;
if (res.data.succsess) {
this.$message({
message: res.data.msg,
type: 'success'
});
} else {
this.$message({
message: res.data.msg,
type: 'error'
});
}
//重置表单为null 清空表单
this.$refs['employeeFrom'].resetFields();
//关闭对话框
this.employeeVisible = false;
this.getEmployees();
});
});
}
});
},