Springboot与Vue实现的前后端分离demo如何制作？

2026-05-22 06:451阅读0评论SEO资讯

内容介绍
文章标签
相关推荐

本文共计8657个文字，预计阅读时间需要35分钟。

1. 创建Vue项目

2.安装Element UI

3.在package.json中配置

4.引入Element UI到main.js

5.使用Element UI，设置大小为small

1 创建vue

1.1 安装element

npm i element-ui -S

PackgeJson中

2 引入elementui

放main.js中

import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI,{size:"small"});//small 让控件小一点

Vue后台主体框架搭建效果图

elementui复制面向cv编程

<template> <div > <el-container style="height: 500px; border: 1px solid #eee"> <el-aside width="200px" style="background-color: rgb(238, 241, 246)"> <el-menu :default-openeds="['1', '3']"> <el-submenu index="1"> <template slot="title"><i class="el-icon-message"></i>导航一</template> <el-menu-item-group> <template slot="title">分组一</template> <el-menu-item index="1-1">选项1</el-menu-item> <el-menu-item index="1-2">选项2</el-menu-item> </el-menu-item-group> <el-menu-item-group title="分组2"> <el-menu-item index="1-3">选项3</el-menu-item> </el-menu-item-group> <el-submenu index="1-4"> <template slot="title">选项4</template> <el-menu-item index="1-4-1">选项4-1</el-menu-item> </el-submenu> </el-submenu> <el-submenu index="2"> <template slot="title"><i class="el-icon-menu"></i>导航二</template> <el-menu-item-group> <template slot="title">分组一</template> <el-menu-item index="2-1">选项1</el-menu-item> <el-menu-item index="2-2">选项2</el-menu-item> </el-menu-item-group> <el-menu-item-group title="分组2"> <el-menu-item index="2-3">选项3</el-menu-item> </el-menu-item-group> <el-submenu index="2-4"> <template slot="title">选项4</template> <el-menu-item index="2-4-1">选项4-1</el-menu-item> </el-submenu> </el-submenu> <el-submenu index="3"> <template slot="title"><i class="el-icon-setting"></i>导航三</template> <el-menu-item-group> <template slot="title">分组一</template> <el-menu-item index="3-1">选项1</el-menu-item> <el-menu-item index="3-2">选项2</el-menu-item> </el-menu-item-group> <el-menu-item-group title="分组2"> <el-menu-item index="3-3">选项3</el-menu-item> </el-menu-item-group> <el-submenu index="3-4"> <template slot="title">选项4</template> <el-menu-item index="3-4-1">选项4-1</el-menu-item> </el-submenu> </el-submenu> </el-menu> </el-aside> <el-container> <el-header style="text-align: right; font-size: 12px"> <el-dropdown> <i class="el-icon-setting" style="margin-right: 15px"></i> <el-dropdown-menu slot="dropdown"> <el-dropdown-item>查看</el-dropdown-item> <el-dropdown-item>新增</el-dropdown-item> <el-dropdown-item>删除</el-dropdown-item> </el-dropdown-menu> </el-dropdown> <span>王小虎</span> </el-header> <el-main> <el-table :data="tableData"> <el-table-column prop="date" label="日期" width="140"> </el-table-column> <el-table-column prop="name" label="姓名" width="120"> </el-table-column> <el-table-column prop="address" label="地址"> </el-table-column> </el-table> </el-main> </el-container> </el-container> </div> </template> <script> export default { name: 'Home', components: { }, data(){ const item = { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }; return{ tableData: Array(20).fill(item) } } } </script>

改变全局css设置

html,body,div{ margin: 0; padding: 0; } html body{ height: 100%; }

导入main.js

import './assets/gloable.css'

高度style设置为100%

App.vue

<template> <div id="app"> <router-view/> </div> </template> <style> #app{ height:100%; } </style>

初始页面完成

Vue后台布局完善

页面还是存在白边需要修改样式

修改globale.css文件

*{ margin: 0; padding: 0; box-sizing: border-box; }

*就是让所有标签都生效
设置app.vue

<template> <div id="app"> <router-view/> </div> </template> <style> #app{ min-height: 100vh; } </style>

100vh是整个窗口为100vh

<template> <el-container style="min-height: 100vh"> <el-aside :width="sideWidth + 'px'" style="background-color: rgb(238, 241, 246); box-shadow: 2px 0 6px rgb(0 21 41 / 35%);"> <el-menu :default-openeds="['1', '3']" style="min-height: 100%; overflow-x: hidden" background-color="rgb(48, 65, 86)" text-color="#fff" active-text-color="#ffd04b" :collapse-transition="false" :collapse="isCollapse" >  <div style="height: 60px; line-height: 60px; text-align: center"> <img src="../assets/logo02.png" alt="" style="width: 40px; position: relative; top: 5px; margin-right: 5px"> <b style="color: orange" v-show="logoTextShow">后台管理系统</b> </div> <el-submenu index="1"> <template slot="title"> <i class="el-icon-message"></i> <span slot="title">导航一</span> </template> <el-menu-item-group> <template slot="title">分组一</template> <el-menu-item index="1-1">选项1</el-menu-item> <el-menu-item index="1-2">选项2</el-menu-item> </el-menu-item-group> <el-menu-item-group title="分组2"> <el-menu-item index="1-3">选项3</el-menu-item> </el-menu-item-group> <el-submenu index="1-4"> <template slot="title">选项4</template> <el-menu-item index="1-4-1">选项4-1</el-menu-item> </el-submenu> </el-submenu> <el-submenu index="2"> <template slot="title"> <i class="el-icon-menu"></i> <span slot="title">导航二</span> </template> <el-menu-item-group> <template slot="title">分组一</template> <el-menu-item index="2-1">选项1</el-menu-item> <el-menu-item index="2-2">选项2</el-menu-item> </el-menu-item-group> <el-menu-item-group title="分组2"> <el-menu-item index="2-3">选项3</el-menu-item> </el-menu-item-group> <el-submenu index="2-4"> <template slot="title">选项4</template> <el-menu-item index="2-4-1">选项4-1</el-menu-item> </el-submenu> </el-submenu> <el-submenu index="3"> <template slot="title"> <i class="el-icon-setting"></i> <span slot="title">导航三</span> </template> <el-menu-item-group> <template slot="title">分组一</template> <el-menu-item index="3-1">选项1</el-menu-item> <el-menu-item index="3-2">选项2</el-menu-item> </el-menu-item-group> <el-menu-item-group title="分组2"> <el-menu-item index="3-3">选项3</el-menu-item> </el-menu-item-group> <el-submenu index="3-4"> <template slot="title">选项4</template> <el-menu-item index="3-4-1">选项4-1</el-menu-item> </el-submenu> </el-submenu> </el-menu> </el-aside> <el-container> <el-header style="font-size: 12px; border-bottom: 1px solid #ccc; line-height: 60px; display: flex"> <div style="flex: 1; font-size: 20px"> <span :class="collapseBtnClass" style="cursor: pointer" @click="collapse"></span> </div> <el-dropdown style="width: 70px; cursor: pointer"> <span>王小虎</span><i class="el-icon-arrow-down" style="margin-left: 5px"></i> <el-dropdown-menu slot="dropdown"> <el-dropdown-item>个人信息</el-dropdown-item> <el-dropdown-item>退出</el-dropdown-item> </el-dropdown-menu> </el-dropdown> </el-header> <el-main> <el-table :data="tableData"> <el-table-column prop="date" label="日期" width="140"> </el-table-column> <el-table-column prop="name" label="姓名" width="120"> </el-table-column> <el-table-column prop="address" label="地址"> </el-table-column> </el-table> </el-main> </el-container> </el-container> </template> <script> export default { name: 'Home', data() { const item = { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }; return { tableData: Array(10).fill(item), collapseBtnClass: 'el-icon-s-fold',//收缩按钮 isCollapse: false, //默认展开的收缩按钮 sideWidth: 200, logoTextShow: true } }, methods: { collapse() { // 点击收缩按钮触发 this.isCollapse = !this.isCollapse if (this.isCollapse) { // 收缩 this.sideWidth = 64 this.collapseBtnClass = 'el-icon-s-unfold' this.logoTextShow = false } else { // 展开 this.sideWidth = 200 this.collapseBtnClass = 'el-icon-s-fold' this.logoTextShow = true } } } } </script>

效果展示

分页查询实现

定义常用样式

*{ margin: 0; padding: 0; box-sizing: border-box; } .ml-5 { margin-left: 5px; } .mr-5 { margin-right: 5px; } .pd-10 { padding: 10px 0; }

main.js修改成mini

Vue.use(ElementUI,{size:"mini"});

效果展示

后端springnboot(部分)

设计技术点 mybatisplus +springboot

设置大概如下

简化

在Usercontroller层来实现页面跳转

写一下配置类

返回Json格式的结果类以及分页插件

分页插件配置类

@Configuration

@MapperScan("com.qj.springboottest.mapper")

public class MybatisPlusConfig {

@Bean

//分页插件

public MybatisPlusInterceptor mybatisPlusInterceptor(){

MybatisPlusInterceptor interceptor=new MybatisPlusInterceptor();

interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL));//数据库类型

interceptor.addInnerInterceptor(new OptimisticLockerInnerInterceptor());//添加乐观锁插件

return interceptor;

}

结果类

public class Result<T> {

private String code;

private String msg;

private T data;

public String getCode() {

return code;

}

public void setCode(String code) {

this.code = code;

}

public String getMsg() {

return msg;

}

public void setMsg(String msg) {

this.msg = msg;

}

public T getData() {

return data;

}

public void setData(T data) {

this.data = data;

}

public Result() {

}

public Result(T data) {

this.data = data;

}

public static Result success() {

Result result = new Result<>();

result.setCode("0");

result.setMsg("成功");

return result;

}

public static <T> Result<T> success(T data) {

Result<T> result = new Result<>(data);

result.setCode("0");

result.setMsg("成功");

return result;

}

public static Result error(String code, String msg) {

Result result = new Result();

result.setCode(code);

result.setMsg(msg);

return result;

}

controller层

对数据的增删改查以及分页查询

其中的方法都是mybatisplus中在service层封装的我们只是调用并没有自己写

@RestController

@CrossOrigin

@RequestMapping("/user")

@ResponseBody

public class UserController {

@Resource

private UserMapper userMapper ;

@Autowired

private UserService userService;

// 添加或者新增数据

@PostMapping

public Result<?> save(@RequestBody User user){

userService.saveOrUpdate(user);

return Result.success();

}

// 查询数据

@GetMapping

public Result<?>findAll(){

userService.list();

return Result.success();

}

// 根据id删除数据

@DeleteMapping("{id}")

public Result<?>deleteById(@PathVariable Long id){

userService.removeById(id);

return Result.success();

}

//分页查询

@GetMapping ("/page") //pageNum 当前第几页 pageSize 每页多少条模糊查询

public Result<?> findPage(@RequestParam(defaultValue = "") Integer pageNum,

@RequestParam (defaultValue = "")Integer pageSize,

@RequestParam (defaultValue = "")String username,

@RequestParam (defaultValue = "")String nickname,

@RequestParam (defaultValue = "")String address){

IPage<User> page=new Page<>(pageNum,pageSize);

QueryWrapper<User> queryWrapper=new QueryWrapper<>();

if (!"".equals(username)){

queryWrapper.like("username",username);

}

if (!"".equals(nickname)) {

queryWrapper.like("nickname", nickname);

}if (!"".equals(address)){

queryWrapper.like("address", address);

}

IPage<User> userIPage = userService.page(page, queryWrapper);

return Result.success(userIPage);

}

其中我们对分页查询实行的是一个模糊查询查询的是用户名地址等来查询

实现分页查询

在postman中测试分页功能查询到具体数据

其中可以看出data是表格中需要的数据分页数据和表格数据产生了联动(tableData)

我们知道表格中的数据在实际开发中是数据库中数据并不是我们在Home.vue中写死的数据 ,我们需要将数据库的数据放在表格中.

我们在springboot的端口号和vue的端口号是不同的所以我们需要实现跨域这样我们才能实现两者数据互通

实现跨域设置

跨域实现由多种

有前端跨域 ,后端跨域

后端跨域

//后端实现跨域

@Configuration

public class CorsConfig {

// 当前跨域请求最大有效时长。这里默认1天

private static final long MAX_AGE = 24 * 60 * 60;

@Bean

public CorsFilter corsFilter() {

UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();

CorsConfiguration corsConfiguration = new CorsConfiguration();

corsConfiguration.addAllowedOrigin("*"); // 1 设置访问源地址

corsConfiguration.addAllowedHeader("*"); // 2 设置访问源请求头

corsConfiguration.addAllowedMethod("*"); // 3 设置访问源请求方法

corsConfiguration.setMaxAge(MAX_AGE);

source.registerCorsConfiguration("/**", corsConfiguration); // 4 对接口配置跨域设置

return new CorsFilter(source);

}

前端

npm i axios -S

request.js封装

import axios from 'axios'

//请求数据

const request = axios.create({

baseURL: '/api', // 注意！！这里是全局统一加上了 '/api' 前缀，也就是说所有接口都会加上'/api'前缀在，页面里面写接口的时候就不要加 '/api'了，否则会出现2个'/api'，类似 '/api/api/user'这样的报错，切记！！！

timeout: 50000

})

// request 拦截器

// 可以自请求发送前对请求做一些处理

// 比如统一加token，对请求参数统一加密

request.interceptors.request.use(config => {

config.headers['Content-Type'] = 'application/json;charset=utf-8';

// config.headers['token'] = user.token; // 设置请求头

return config

}, error => {

return Promise.reject(error)

});

// response 拦截器

// 可以在接口响应后统一处理结果

request.interceptors.response.use(

response => {

let res = response.data;

// 如果是返回的文件

if (response.config.responseType === 'blob') {

return res

}

// 兼容服务端返回的字符串数据

if (typeof res === 'string') {

res = res ? JSON.parse(res) : res

}

return res;

},

error => {

console.log('err' + error) // for debug

return Promise.reject(error)

}

)

export default request

在main.js中添加修改配置

import request from "@/utils/request";

.........

Vue.prototype.request=request

修改vue.config.js

// 跨域配置

module.exports = {

devServer: { //记住，别写错了devServer//设置本地默认端口选填

port: xxxx,

proxy: { //设置代理，必须填

'/api': { //设置拦截器拦截器格式斜杠+拦截器名字，名字可以自己定

target: 'localhost:9090' , //代理的目标地址

changeOrigin: true, //是否设置同源，输入是的

pathRewrite: { //路径重写

'^/api': '' //选择忽略拦截器里面的内容

}

配置完以后开始分析

实现分页设置我们需要用到那些变量

pageSize 每页多少条

pageNum 当前多少页

total 共几条

首先先修改一下表格数据

tabledata 放入 data中一般是一个空数组

data() {

return {

tableData: [],

}

<el-table :data="tableData" border stripe :header-cell-class-name="headerBg"> <el-table-column prop="id" label="ID" width="80"></el-table-column> <el-table-column prop="username" label="用户名" width="140"></el-table-column> <el-table-column prop="nickName" label="昵称" width="120"></el-table-column> <el-table-column prop="sex" label="性别" width="120"></el-table-column> <el-table-column prop="age" label="年龄" width="120"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> <el-table-column label="操作" width="200" align="center"> <template slot-scope="scope"> <el-button type="success">编辑 <i class="el-icon-edit"></i></el-button> <el-button type="danger">删除 <i class="el-icon-remove-outline"></i></el-button> </template> </el-table-column>

这是分页部分的代码需要绑定 pagesize total 还有两个方法 currentpage

<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum" :page-sizes="[2, 5, 10, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination>

在method()中实现分页的模糊查询

load() { this.request.get("/user/page", { params: { pageNum: this.pageNum, pageSize: this.pageSize, username: this.username, nickName: this.nickName, address: this.address, } }).then(res => { console.log(res) this.tableData = res.data.records this.total = res.data.total }) }, handleSizeChange(pageSize) { console.log(pageSize) this.pageSize = pageSize this.load() }, handleCurrentChange(pageNum) { console.log(pageNum) //打印出来了具体页数 this.pageNum = pageNum //每次请求页码的时候都重新请求 this.load() } }

实现查询功能

查询 username

<div style="margin: 10px 0"> <el-input style="width: 200px" placeholder="请输入名称" suffix-icon="el-icon-search" v-model="username"></el-input> <el-input style="width: 200px" placeholder="请输入昵称" suffix-icon="el-icon-message" class="ml-5" v-model="nickName"></el-input> <el-input style="width: 200px" placeholder="请输入地址" suffix-icon="el-icon-position" class="ml-5" v-model="address"></el-input> <el-button class="ml-5" type="primary" @click="load">搜索</el-button> </div>

data中写入为空的字符串

data() { return { tableData: [], total: 0, pageNum: 1, pageSize: 4, username: "", nickName:"", address:"", }

在加到上文所提到的load方法中

点击搜索按钮会触发函数load()来查询

<el-button class="ml-5" type="primary" @click="load">搜索</el-button>

效果显示

再加一个重置按钮

<el-button type="warning" @click="reset">重置</el-button>

写一个reset方法把我们模糊查询的数据清空再重新加载一下load(其实就是重新查询一遍恢复原样)

reset(){//吧模糊查询清空 this.username="" this.address="" this.nickName="" this.load(); },

页面增删改

<el-button type="primary" @click="handleadd">新增 <i class="el-icon-circle-plus-outline"></i></el-button>

确定需要加一个事件

save() { // 新增把form对象传到后台需要与一个api进行数据操作ajax axios this.request.post("/user",this.form).then(res=>{ console.log(res) if (res.code==='0'){ this.$message({ type:"success", message:"新增成功" }) }else { this.$message({ type:"error", message:res.msg }) } this.load()//刷新表格数据 this.dialogFormVisible=false//关闭弹窗 })//通过request对象把数据发送给对象

页面编辑

scope相当于一行的数据，scope.row相当于当前行的数据对象。这里就是用插槽拿到当前行row是个内置的属性，vueslot的scope传递值是父作用域中的源数据改变，值会同步改变。

<el-button type="success" @click="handleEdit(scope.row)">编辑 <i class="el-icon-edit"></i></el-button>

handleEdit(row) {

this.form = row //把行内数据赋予到弹窗中

this.dialogFormVisible = true

},

做一个深拷贝

handleEdit(row) {

// this.form = row

this.form=JSON.parse(JSON.stringify(row)) //深拷贝

this.dialogFormVisible = true

},

删除功能

删除需要二次确认

<el-popconfirm

class="ml-5"

confirm-button-text='确定'

cancel-button-text='我再想想'

icon="el-icon-info"

icon-color="red"

title="您确定删除吗？"

@confirm="del(scope.row.id)"

>

<el-button type="danger" slot="reference">删除 <i class="el-icon-remove-outline"></i></el-button>

</el-popconfirm>

del(id) {

this.request.delete("/user/" + id).then(res => {

if (res) {

this.$message.success("删除成功")

this.load()

} else {

this.$message.error("删除失败")

}

})

},

批量删除

加一个删除选择框

<el-table-column type="selection" width="55"></el-table-column>

<el-popconfirm

class="ml-5"

confirm-button-text='确定'

cancel-button-text='我再想想'

icon="el-icon-info"

icon-color="red"

title="您确定批量删除这些数据吗？"

@confirm="delBatch"

>

<el-button type="danger" slot="reference">批量删除 <i class="el-icon-remove-outline"></i></el-button>

</el-popconfirm>

date

multipleSelection:[],

//批量删除的配套事件

handleSelectionChange(val) {

console.log(val)

this.multipleSelection = val

},

//二次确定的批量删除方法

delBatch() {

let ids = this.multipleSelection.map(v => v.id) // [{}, {}, {}] => [xxxx] 把对象数组变成纯id数组

this.request.post("/user/del/batch", ids).then(res => {

//delete方法不能传对象这里使用post

if (res) {

this.$message.success("批量删除成功")

this.load()

} else {

this.$message.error("批量删除失败")

}

})

},

综上完成一个页面最基本的增删改查功能

最终效果展示

实现的是利用vue对页面的编写以及增删改查四个框的功能实现

附代码

Home.vue

<template> <el-container style="min-height: 100vh"> <el-aside :width="sideWidth + 'px'" style="box-shadow: 2px 0 6px rgb(0 21 41 / 35%);"> <el-menu :default-openeds="['1', '3']" style="min-height: 100%; overflow-x: hidden" background-color="rgb(48, 65, 86)" text-color="#fff" active-text-color="#ffd04b" :collapse-transition="false" :collapse="isCollapse" > <div style="height: 60px; line-height: 60px; text-align: center"> <img src="../assets/logo02.png" alt="" style="width: 50px; position: relative; top: 5px; right: 5px"> <b style="color: orange" v-show="logoTextShow">后台管理系统</b> </div> <el-submenu index="1"> <template slot="title"> <i class="el-icon-message"></i> <span slot="title">导航一</span> </template> <el-menu-item-group title="分组2"> <el-menu-item index="1-3">选项3</el-menu-item> </el-menu-item-group> <el-submenu index="1-4"> <template slot="title">选项4</template> <el-menu-item index="1-4-1">选项4-1</el-menu-item> </el-submenu> </el-submenu> <el-submenu index="2"> <template slot="title"> <i class="el-icon-menu"></i> <span slot="title">导航二</span> </template> <el-submenu index="2-4"> <template slot="title">选项4</template> <el-menu-item index="2-4-1">选项4-1</el-menu-item> </el-submenu> </el-submenu> <el-submenu index="3"> <template slot="title"> <i class="el-icon-setting"></i> <span slot="title">导航三</span> </template> <el-submenu index="3-4"> <template slot="title">选项4</template> <el-menu-item index="3-4-1">选项4-1</el-menu-item> </el-submenu> </el-submenu> </el-menu> </el-aside> <el-container> <el-header style="font-size: 12px; border-bottom: 1px solid #ccc; line-height: 60px; display: flex"> <div style="flex: 1; font-size: 20px"> <span :class="collapseBtnClass" style="cursor: pointer" @click="collapse"></span> </div> <el-dropdown style="width: 70px; cursor: pointer"> <span>行歌</span><i class="el-icon-arrow-down" style="margin-left: 5px"></i> <el-dropdown-menu slot="dropdown" > <el-dropdown-item style="font-size: 14px; padding: 5px 0">个人信息</el-dropdown-item> <el-dropdown-item style="font-size: 14px; padding: 5px 0">退出</el-dropdown-item> </el-dropdown-menu> </el-dropdown> </el-header> <el-main> <div style="margin-bottom: 30px"> <el-breadcrumb separator="/"> <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item> <el-breadcrumb-item>用户管理</el-breadcrumb-item> </el-breadcrumb> </div> <div style="margin: 10px 0"> <el-input style="width: 200px" placeholder="请输入名称" suffix-icon="el-icon-search" v-model="username"></el-input> <el-input style="width: 200px" placeholder="请输入昵称" suffix-icon="el-icon-message" class="ml-5" v-model="nickName"></el-input> <el-input style="width: 200px" placeholder="请输入地址" suffix-icon="el-icon-position" class="ml-5" v-model="address"></el-input> <el-button class="ml-5" type="primary" @click="load">搜索</el-button> <el-button type="warning" @click="reset">重置</el-button> </div> <div style="margin: 10px 0"> <el-button type="primary" @click="handleAdd">新增 <i class="el-icon-circle-plus-outline"></i></el-button> <el-popconfirm class="ml-5" confirm-button-text='确定' cancel-button-text='我再想想' icon="el-icon-info" icon-color="red" title="您确定批量删除这些数据吗？" @confirm="delBatch" > <el-button type="danger" slot="reference">批量删除 <i class="el-icon-remove-outline"></i></el-button> </el-popconfirm> <el-button type="primary" class="ml-5">导入 <i class="el-icon-bottom"></i></el-button> <el-button type="primary">导出 <i class="el-icon-top"></i></el-button> </div> <el-table :data="tableData" border stripe :header-cell-class-name="headerBg" @selection-change="handleSelectionChange"> <el-table-column type="selection" width="55"></el-table-column> <el-table-column prop="id" label="ID" width="80"></el-table-column> <el-table-column prop="username" label="用户名" width="140"></el-table-column> <el-table-column prop="nickName" label="昵称" width="120"></el-table-column> <el-table-column prop="sex" label="性别" width="120"></el-table-column> <el-table-column prop="age" label="年龄" width="120"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> <el-table-column label="操作" width="200" align="center"> <template slot-scope="scope"> <el-button type="success" @click="handleEdit(scope.row)">编辑 <i class="el-icon-edit"></i></el-button> <el-popconfirm class="ml-5" confirm-button-text='确定' cancel-button-text='我再想想' icon="el-icon-info" icon-color="red" title="您确定删除吗？" @confirm="del(scope.row.id)" > <el-button type="danger" slot="reference">删除 <i class="el-icon-remove-outline"></i></el-button> </el-popconfirm> </template> </el-table-column> </el-table> <div style="padding: 10px 0"> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum" :page-sizes="[ 5, 10, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination> </div> <el-dialog title="用户信息" :visible.sync="dialogFormVisible" width="30%" > <el-form label-width="80px" size="small"> <el-form-item label="用户名"> <el-input v-model="form.username" autocomplete="off"></el-input> </el-form-item> <el-form-item label="昵称"> <el-input v-model="form.nickName" autocomplete="off"></el-input> </el-form-item> <el-form-item label="性别"> <el-radio v-model="form.sex" label="男" size="large">男</el-radio> <el-radio v-model="form.sex" label="女" size="large">女</el-radio> <el-radio v-model="form.sex" label="未知" size="large">未知</el-radio> </el-form-item> <el-form-item label="年龄"> <el-input v-model="form.age" autocomplete="off"></el-input> </el-form-item> <el-form-item label="地址"> <el-input v-model="form.address" autocomplete="off"></el-input> </el-form-item> </el-form> <div slot="footer" class="dialog-footer"> <el-button @click="dialogFormVisible = false">取消</el-button> <el-button type="primary" @click="save">确定</el-button> </div> </el-dialog> </el-main> </el-container> </el-container> </template> <script> import request from "@/utils/request"; export default { name: 'Home', data() { return { tableData: [], total: 0, pageNum: 1, pageSize: 5, username: "", nickName:"", address:"", form:{}, multipleSelection:[], dialogFormVisible:false, collapseBtnClass: 'el-icon-s-fold', isCollapse: false, sideWidth: 200, logoTextShow: true, headerBg: 'headerBg' } }, created() { // 请求分页查询数据 this.load() }, methods: { collapse() { // 点击收缩按钮触发 this.isCollapse = !this.isCollapse if (this.isCollapse) { // 收缩 this.sideWidth = 64 this.collapseBtnClass = 'el-icon-s-unfold' this.logoTextShow = false } else { // 展开 this.sideWidth = 200 this.collapseBtnClass = 'el-icon-s-fold' this.logoTextShow = true } }, load() { this.request.get("/user/page", { params: { pageNum: this.pageNum, pageSize: this.pageSize, username: this.username, nickName: this.nickName, address: this.address, } }).then(res => { console.log(res) this.tableData = res.data.records this.total = res.data.total }) }, reset(){//吧模糊查询清空 this.username="" this.address="" this.nickName="" this.load(); }, save() { // 新增把form对象传到后台需要与一个api进行数据操作ajax axios this.request.post("/user",this.form).then(res=>{ console.log(res) if (res.code==='0'){ this.$message({ type:"success", message:"新增成功" }) }else { this.$message({ type:"error", message:res.msg }) } this.load()//刷新表格数据 this.dialogFormVisible=false//关闭弹窗 })//通过request对象把数据发送给对象 }, //添加按钮的打开以及打开之后把之前的信息清空 handleAdd() { this.dialogFormVisible = true this.form = {} }, //编辑 handleEdit(row) { // this.form = row this.form=JSON.parse(JSON.stringify(row)) //深拷贝 this.dialogFormVisible = true }, //删除 del(id) { this.request.delete("/user/" + id).then(res => { if (res) { this.$message.success("删除成功") this.load() } else { this.$message.error("删除失败") } }) }, //批量删除的配套事件 handleSelectionChange(val) { console.log(val) this.multipleSelection = val }, //二次确定的批量删除方法 delBatch() { let ids = this.multipleSelection.map(v => v.id) // [{}, {}, {}] => [xxxx] 把对象数组变成纯id数组 this.request.post("/user/del/batch", ids).then(res => { //delete方法不能传对象这里使用post if (res) { this.$message.success("批量删除成功") this.load() } else { this.$message.error("批量删除失败") } }) }, handleSizeChange(pageSize) { console.log(pageSize) this.pageSize = pageSize this.load() }, handleCurrentChange(pageNum) { console.log(pageNum) //打印出来了具体页数 this.pageNum = pageNum //每次请求页码的时候都重新请求 this.load() } } } </script> <style> .headerBg { background: #eee!important; } </style>

标签：前后端分离 dem

本文共计8657个文字，预计阅读时间需要35分钟。

1. 创建Vue项目

2.安装Element UI

3.在package.json中配置

4.引入Element UI到main.js

5.使用Element UI，设置大小为small

1 创建vue

1.1 安装element

npm i element-ui -S

PackgeJson中

2 引入elementui

放main.js中

import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI,{size:"small"});//small 让控件小一点

Vue后台主体框架搭建效果图

elementui复制面向cv编程

改变全局css设置

html,body,div{ margin: 0; padding: 0; } html body{ height: 100%; }

导入main.js

import './assets/gloable.css'

高度style设置为100%

App.vue

<template> <div id="app"> <router-view/> </div> </template> <style> #app{ height:100%; } </style>

初始页面完成

Vue后台布局完善

页面还是存在白边需要修改样式

修改globale.css文件

*{ margin: 0; padding: 0; box-sizing: border-box; }

*就是让所有标签都生效
设置app.vue

<template> <div id="app"> <router-view/> </div> </template> <style> #app{ min-height: 100vh; } </style>

100vh是整个窗口为100vh

效果展示

分页查询实现

定义常用样式

*{ margin: 0; padding: 0; box-sizing: border-box; } .ml-5 { margin-left: 5px; } .mr-5 { margin-right: 5px; } .pd-10 { padding: 10px 0; }

main.js修改成mini

Vue.use(ElementUI,{size:"mini"});

效果展示

后端springnboot(部分)

设计技术点 mybatisplus +springboot

设置大概如下

简化

在Usercontroller层来实现页面跳转

写一下配置类

返回Json格式的结果类以及分页插件

分页插件配置类

@Configuration

@MapperScan("com.qj.springboottest.mapper")

public class MybatisPlusConfig {

@Bean

//分页插件

public MybatisPlusInterceptor mybatisPlusInterceptor(){

MybatisPlusInterceptor interceptor=new MybatisPlusInterceptor();

interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL));//数据库类型

interceptor.addInnerInterceptor(new OptimisticLockerInnerInterceptor());//添加乐观锁插件

return interceptor;

}

结果类

public class Result<T> {

private String code;

private String msg;

private T data;

public String getCode() {

return code;

}

public void setCode(String code) {

this.code = code;

}

public String getMsg() {

return msg;

}

public void setMsg(String msg) {

this.msg = msg;

}

public T getData() {

return data;

}

public void setData(T data) {

this.data = data;

}

public Result() {

}

public Result(T data) {

this.data = data;

}

public static Result success() {

Result result = new Result<>();

result.setCode("0");

result.setMsg("成功");

return result;

}

public static <T> Result<T> success(T data) {

Result<T> result = new Result<>(data);

result.setCode("0");

result.setMsg("成功");

return result;

}

public static Result error(String code, String msg) {

Result result = new Result();

result.setCode(code);

result.setMsg(msg);

return result;

}

controller层

对数据的增删改查以及分页查询

其中的方法都是mybatisplus中在service层封装的我们只是调用并没有自己写

@RestController

@CrossOrigin

@RequestMapping("/user")

@ResponseBody

public class UserController {

@Resource

private UserMapper userMapper ;

@Autowired

private UserService userService;

// 添加或者新增数据

@PostMapping

public Result<?> save(@RequestBody User user){

userService.saveOrUpdate(user);

return Result.success();

}

// 查询数据

@GetMapping

public Result<?>findAll(){

userService.list();

return Result.success();

}

// 根据id删除数据

@DeleteMapping("{id}")

public Result<?>deleteById(@PathVariable Long id){

userService.removeById(id);

return Result.success();

}

//分页查询

@GetMapping ("/page") //pageNum 当前第几页 pageSize 每页多少条模糊查询

public Result<?> findPage(@RequestParam(defaultValue = "") Integer pageNum,

@RequestParam (defaultValue = "")Integer pageSize,

@RequestParam (defaultValue = "")String username,

@RequestParam (defaultValue = "")String nickname,

@RequestParam (defaultValue = "")String address){

IPage<User> page=new Page<>(pageNum,pageSize);

QueryWrapper<User> queryWrapper=new QueryWrapper<>();

if (!"".equals(username)){

queryWrapper.like("username",username);

}

if (!"".equals(nickname)) {

queryWrapper.like("nickname", nickname);

}if (!"".equals(address)){

queryWrapper.like("address", address);

}

IPage<User> userIPage = userService.page(page, queryWrapper);

return Result.success(userIPage);

}

其中我们对分页查询实行的是一个模糊查询查询的是用户名地址等来查询

实现分页查询

在postman中测试分页功能查询到具体数据

其中可以看出data是表格中需要的数据分页数据和表格数据产生了联动(tableData)

我们知道表格中的数据在实际开发中是数据库中数据并不是我们在Home.vue中写死的数据 ,我们需要将数据库的数据放在表格中.

我们在springboot的端口号和vue的端口号是不同的所以我们需要实现跨域这样我们才能实现两者数据互通

实现跨域设置

跨域实现由多种

有前端跨域 ,后端跨域

后端跨域

//后端实现跨域

@Configuration

public class CorsConfig {

// 当前跨域请求最大有效时长。这里默认1天

private static final long MAX_AGE = 24 * 60 * 60;

@Bean

public CorsFilter corsFilter() {

UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();

CorsConfiguration corsConfiguration = new CorsConfiguration();

corsConfiguration.addAllowedOrigin("*"); // 1 设置访问源地址

corsConfiguration.addAllowedHeader("*"); // 2 设置访问源请求头

corsConfiguration.addAllowedMethod("*"); // 3 设置访问源请求方法

corsConfiguration.setMaxAge(MAX_AGE);

source.registerCorsConfiguration("/**", corsConfiguration); // 4 对接口配置跨域设置

return new CorsFilter(source);

}

前端

npm i axios -S

request.js封装

import axios from 'axios'

//请求数据

const request = axios.create({

timeout: 50000

})

// request 拦截器

// 可以自请求发送前对请求做一些处理

// 比如统一加token，对请求参数统一加密

request.interceptors.request.use(config => {

config.headers['Content-Type'] = 'application/json;charset=utf-8';

// config.headers['token'] = user.token; // 设置请求头

return config

}, error => {

return Promise.reject(error)

});

// response 拦截器

// 可以在接口响应后统一处理结果

request.interceptors.response.use(

response => {

let res = response.data;

// 如果是返回的文件

if (response.config.responseType === 'blob') {

return res

}

// 兼容服务端返回的字符串数据

if (typeof res === 'string') {

res = res ? JSON.parse(res) : res

}

return res;

},

error => {

console.log('err' + error) // for debug

return Promise.reject(error)

}

)

export default request

在main.js中添加修改配置

import request from "@/utils/request";

.........

Vue.prototype.request=request

修改vue.config.js

// 跨域配置

module.exports = {

devServer: { //记住，别写错了devServer//设置本地默认端口选填

port: xxxx,

proxy: { //设置代理，必须填

'/api': { //设置拦截器拦截器格式斜杠+拦截器名字，名字可以自己定

target: 'localhost:9090' , //代理的目标地址

changeOrigin: true, //是否设置同源，输入是的

pathRewrite: { //路径重写

'^/api': '' //选择忽略拦截器里面的内容

}

配置完以后开始分析

实现分页设置我们需要用到那些变量

pageSize 每页多少条

pageNum 当前多少页

total 共几条

首先先修改一下表格数据

tabledata 放入 data中一般是一个空数组

data() {

return {

tableData: [],

}

这是分页部分的代码需要绑定 pagesize total 还有两个方法 currentpage

在method()中实现分页的模糊查询

实现查询功能

查询 username

data中写入为空的字符串

data() { return { tableData: [], total: 0, pageNum: 1, pageSize: 4, username: "", nickName:"", address:"", }

在加到上文所提到的load方法中

点击搜索按钮会触发函数load()来查询

<el-button class="ml-5" type="primary" @click="load">搜索</el-button>

效果显示

再加一个重置按钮

<el-button type="warning" @click="reset">重置</el-button>

写一个reset方法把我们模糊查询的数据清空再重新加载一下load(其实就是重新查询一遍恢复原样)

reset(){//吧模糊查询清空 this.username="" this.address="" this.nickName="" this.load(); },

页面增删改

<el-button type="primary" @click="handleadd">新增 <i class="el-icon-circle-plus-outline"></i></el-button>

确定需要加一个事件

页面编辑

<el-button type="success" @click="handleEdit(scope.row)">编辑 <i class="el-icon-edit"></i></el-button>

handleEdit(row) {

this.form = row //把行内数据赋予到弹窗中

this.dialogFormVisible = true

},

做一个深拷贝

handleEdit(row) {

// this.form = row

this.form=JSON.parse(JSON.stringify(row)) //深拷贝

this.dialogFormVisible = true

},

删除功能

删除需要二次确认

<el-popconfirm

class="ml-5"

confirm-button-text='确定'

cancel-button-text='我再想想'

icon="el-icon-info"

icon-color="red"

title="您确定删除吗？"

@confirm="del(scope.row.id)"

>

<el-button type="danger" slot="reference">删除 <i class="el-icon-remove-outline"></i></el-button>

</el-popconfirm>

del(id) {

this.request.delete("/user/" + id).then(res => {

if (res) {

this.$message.success("删除成功")

this.load()

} else {

this.$message.error("删除失败")

}

})

},

批量删除

加一个删除选择框

<el-table-column type="selection" width="55"></el-table-column>

<el-popconfirm

class="ml-5"

confirm-button-text='确定'

cancel-button-text='我再想想'

icon="el-icon-info"

icon-color="red"

title="您确定批量删除这些数据吗？"

@confirm="delBatch"

>

<el-button type="danger" slot="reference">批量删除 <i class="el-icon-remove-outline"></i></el-button>

</el-popconfirm>

date

multipleSelection:[],

//批量删除的配套事件

handleSelectionChange(val) {

console.log(val)

this.multipleSelection = val

},

//二次确定的批量删除方法

delBatch() {

let ids = this.multipleSelection.map(v => v.id) // [{}, {}, {}] => [xxxx] 把对象数组变成纯id数组

this.request.post("/user/del/batch", ids).then(res => {

//delete方法不能传对象这里使用post

if (res) {

this.$message.success("批量删除成功")

this.load()

} else {

this.$message.error("批量删除失败")

}

})

},

综上完成一个页面最基本的增删改查功能

最终效果展示

实现的是利用vue对页面的编写以及增删改查四个框的功能实现

附代码

Home.vue

标签：前后端分离 dem

相关推荐

相关推荐