定义整体样式（这样做是为了方便我们套用官方组件）

关于box-size：border-box参考：https://zhuanlan.zhihu.com/p/163113887
导入

定义整体布局App。vue

侧边组件

主体数据表

注意这里面的js书写部分

<template><el-table :data="tableData" stripe border style="width: 100% ;padding: 10px " ><el-table-column prop="date" label="数据"  /><el-table-column prop="name" label="名字"  sortable/><el-table-column prop="address" label="地址" /><el-table-column label="Operations"><template #default="scope"><el-button size="small" @click="handleEdit(scope.$index, scope.row)">Edit</el-button><el-buttonsize="small"type="danger"@click="handleDelete(scope.$index, scope.row)">Delete</el-button></template></el-table-column></el-table></template><script >
// @ is an alias to /srcexport default {name: 'HomeView',components: {},data(){return{tableData}},methods : {handleEdit(){},handleDelete(){},}}const tableData = [{date: '2016-05-03',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},{date: '2016-05-02',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},{date: '2016-05-04',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},{date: '2016-05-01',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},
]
</script>

最终效果

后端项目spring boot

快速生成地址：https://start.spring.io/

整合

将下载好的demo替换生成的moudle

再新建一个普通文件夹，把vue相关都放在里面最终形成如下目录

pom文件可能爆红

添加指定版本号即可，保持一致

完善结构

可以删掉test文件夹

配置数据库mysql

对应宝塔的设置

配置mybatis-plus

这比mybatis还要简便
官网：https://baomidou.com/

分页数据（需要mybatis-plus）

package com.example.demo.common;import com.baomidou.mybatisplus.annotation.DbType;
import com.baomidou.mybatisplus.extension.plugins.MybatisPlusInterceptor;
import com.baomidou.mybatisplus.extension.plugins.inner.PaginationInnerInterceptor;
import org.mybatis.spring.annotation.MapperScan;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;@Configuration
@MapperScan("com.example.demo.mapper")//注意这里要扫描包
public class MybatisPlusConfig {@Beanpublic MybatisPlusInterceptor mybatisPlusInterceptor() {MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL));return interceptor;}
}

编写Result工具类

package com.example.demo.common;
//定义一个结果类code是状态码，msg是返回给前台的反馈信息
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 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();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;}
}

定义User

package com.example.demo.entity;import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;@TableName("user")
public class User {@TableId(type = IdType.AUTO)private Integer id;private String number;private String username;private String password;private String sex;public Integer getId() {return id;}public void setId(Integer id) {this.id = id;}public String getNumber() {return number;}public void setNumber(String number) {this.number = number;}public String getUsername() {return username;}public void setUsername(String username) {this.username = username;}public String getPassword() {return password;}public void setPassword(String password) {this.password = password;}public String getSex() {return sex;}public void setSex(String sex) {this.sex = sex;}
}

编写Mapper

package com.example.demo.mapper;import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.example.demo.entity.User;public interface UserMapper extends BaseMapper<User> {}

编写Service

编写UserContoller

package com.example.demo.controller;import com.example.demo.common.Result;
import com.example.demo.entity.User;
import com.example.demo.mapper.UserMapper;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;import javax.annotation.Resource;@RestController
@RequestMapping("/user")
public class UserController {@ResourceUserMapper userMapper;@PostMappingpublic Result<?> save(@RequestBody User user){userMapper.insert(user);return Result.success();}
}

为前端添加对应

为按钮添加点击事件

使用axios实现数据交互

安装axios

接着书写相应css文件
https://blog.csdn.net/xqnode/article/details/118325868

【毕业设计-vue02】相关推荐

基于颜色特征，形状特征和纹理特征的数字图像的检索（Digital Image Retrieval）MATLAB GUI实现（本科毕业设计）
该程序实现的功能为:检索出指定的图像文件,并从检索出的图像中检索出指定的物体 . 1,主程序为Recognition和Recognition. 2.颜色特征,形状特征,纹理特征为对应的各子程序. 3. ...
24/4毕业设计小记
折腾了很久了,关于我的毕业设计,一直就没有时间来写博客,今天感冒了,趁着思路不太好的时候就写一篇博客吧!写什么好呢,就写基于vlc sdk的播放器开发吧! 我的项目是关于windows和linux两个 ...
基于jsp的图书管理系统_计算机毕业设计基于JSP书籍租阅管理系统的设计与实现...
系统总业务流程图: 普通用户业务流程图: 管理员业务流程图: 系统功能需求设计: 1.系统用户管理:超级管理员和普通管理员都需要对系统用户进行管理,包括添加.删除.修改和查询普通管理员,修改管理员密码 ...
qpsk调制解调matlab_本科毕业设计课题—QPSK相干解调的MATLAB仿真（3）
继续讲解! 给出参考文章! <全数字BPSKQPSK接收机同步技术研究> 模拟中频信号经过模数转换后形成数字中频信号,解调时首先经数字下变频器DDC(digita down-convert ...
计算机论文工作进程记录,毕业设计进程记录
本频道涵盖与毕业设计和进程和记录有关的论文范例,免费给你学习毕业设计进程记录怎么写提供相关文献资料. [摘要]结合中国矿业大学工程技术学院应用型人才的培养目标,针对安全专业的特点,通过分析近年毕业设计 ...
qudpsocket 丢包线程解决_服装毕业设计一站式解决方案——线下amp;线上辅导课程...
毕业季来了!真的来了! 服装人准备好了嘛? 勤勤恳恳努努力力做着毕业设计的你是否会遇到以下问题: 1.有设计想法,可是不知道该怎么实现? 2.有效果图,但不知道怎么与自己的设计灵感扯上关系? 3.想法 ...
python爬虫怎么做毕业设计_python语言爬虫做成毕业设计的话，怎样答辩演示，或者怎样把爬虫复杂化？...
作为一名IT行业的从业者,同时也是一名计算机专业的教育工作者,我来回答一下这个问题. 对于计算机专业的学生来说,如果想把毕业设计定位在爬虫上,虽然从技术选型上是完全可以的,但是通过爬虫来获取数据本身还 ...
linux界面设计论文,毕业设计（论文）-基于linux的云校园桌面虚拟化系统的设计与实现.doc...
毕业设计(论文)-基于linux的云校园桌面虚拟化系统的设计与实现.doc 还剩 67页未读, 继续阅读下载文档到电脑,马上远离加班熬夜! 亲,很抱歉,此页已超出免费预览范围啦! 如果喜欢就下载吧, ...
毕业设计：基于Springboot实现求职招聘，校园招聘系统
作者主页:编程指南针简介:Java领域优质创作者.CSDN博客专家 Java项目.简历模板.学习资料.面试题库.技术互助文末获取源码目录一.项目概述..................... ...

【毕业设计-vue02】