springboot+vue+element+mybatisplus项目(前端)

Aside.vue文件(侧边栏)

<!--放菜单栏-->
<template><!--  侧边栏必须有的两个函数handleOpen，handleClose--><div><el-menustyle="width: 200px;min-height: calc(100vh - 50px)"default-active="2"default-openeds="1"class="el-menu-vertical-demo"><!--      @open="handleOpen"--><!--      @close="handleClose">--><el-submenu index="1"><template #title>系统管理</template><el-menu-item index="user">用户管理</el-menu-item></el-submenu></el-menu></div>
</template><script>
export default {name: "Aside"
}
</script><style scoped></style>

Header.vue文件(导航栏)

<template><!--  写的-》头部  左中右三个布局--><div style="height: 50px;line-height: 50px; border-bottom: 1px solid #ccc;display: flex"><!-- 左--><div style="width: 200px;padding-left: 30px;font-weight: bold; color: dodgerblue">后台管理系统</div><!-- 中--><div style="flex: 1"></div><!--    右   下拉菜单--><div style="width: 100px"><el-dropdown><span class="el-dropdown-link">小周周<i class="el-icon-arrow-down el-icon--right"></i></span><!--      选项--><template #dropdown><el-dropdown-menu><el-dropdown-item>个人信息</el-dropdown-item><el-dropdown-item>退出系统</el-dropdown-item></el-dropdown-menu></template></el-dropdown></div></div>
</template><script>
</script>

Home.vue文件(内容文件)

<template><!--写的表格--><div style="padding: 10px"><div style="margin: 10px 0"><!--      功能区域--><!--      按钮标签--><el-button type="primary" @click="add">新增</el-button><el-button type="primary">导入</el-button><el-button type="primary">导出</el-button></div><!--    搜索区域--><div style="margin: 10px 0"><el-input v-model="search" placeholder="请输入内容" style="width: 20%" clearable></el-input><el-button style="margin-left: 10px" type="primary" @click="load">查询</el-button></div><el-table:data="tableData"borderstyle="width: 100%":default-sort="{prop: 'date', order: 'descending'}"><el-table-columnprop="id"label="ID"sortable></el-table-column><el-table-columnprop="userId"label="用户Id"></el-table-column><el-table-columnprop="userPwd"label="用户密码"></el-table-column><el-table-columnprop="nickName"label="昵称"></el-table-column><el-table-columnprop="age"label="年龄"></el-table-column><el-table-columnprop="sex"label="性别"></el-table-column><el-table-columnprop="address"label="地址"></el-table-column><el-table-columnfixed="right"label="操作"width="300"><template #default="scope"><el-row><el-button @click="handleEdit(scope.row)" type="primary" size="1px">编辑</el-button><el-popconfirm title="这是一段内容确定删除吗？" @confirm="handleDelete(scope.row.id)"><template #reference><el-button type="danger">删除</el-button></template></el-popconfirm></el-row></template></el-table-column></el-table><!--   表格下放个分页组件--><div style="margin: 10px 0"><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="currentPage":page-sizes="[5, 10, 20, 30]":page-size="pageSize"layout="total, sizes, prev, pager, next, jumper":total="total"> <!--total写成一个变量后台去获取--></el-pagination><el-dialog title="提示" v-model="dialogVisible" width="30%"><!--        新增按钮的窗口-->
<!--        form变量--><el-form :model="form" label-width="80px"><el-form-item label="用户名">
<!--           弹窗里面的文本框--><el-input v-model="form.userId"></el-input></el-form-item><el-form-item label="密码"><!--           弹窗里面的文本框--><el-input v-model="form.userPwd"></el-input></el-form-item><el-form-item label="昵称"><!--           弹窗里面的文本框--><el-input v-model="form.nickName"></el-input></el-form-item><el-form-item label="年龄"><!--           弹窗里面的文本框--><el-input v-model="form.age"></el-input></el-form-item><el-form-item label="性别"><!--           单选框按钮--><el-radio v-model="form.sex" label="男">男</el-radio><el-radio v-model="form.sex" label="女">女</el-radio><el-radio v-model="form.sex" label="未知">未知</el-radio></el-form-item><el-form-item label="地址"><!--           弹窗里面的文本框--><el-input v-model="form.address"></el-input></el-form-item></el-form><template #footer><span class="dialog-footer"><el-button @click="dialogVisible = false">取 消</el-button><el-button type="primary" @click="save">确 定</el-button></span></template></el-dialog></div></div>
</template><script>import request from "@/utils/request";
export default {name: 'Home',components: {},data() {return {//弹窗一直的都是打开的先设置falsedialogVisible:false,form: {},//关键字  传给后台search:'',//变量当前页 默认1  传后currentPage: 1,pageSize:10,total: 0,//对应表格的datatableData: []}},//页面加载的方法created() {this.load()},methods: {load() {request.get("/api/user",{params: {pageNum: this.currentPage,pageSize: this.pageSize,search: this.search}}).then(res => {console.log(res);//赋值后就可以显示this.tableData = res.data.records;this.total = res.data.total;})},add() {//打开弹窗 设置它的显示和隐藏this.dialogVisible = true//情况form里面的值，不然点击取消里面的值还在this.form = {}},//新增事件save() {// // 请求地址   参数form跟其它属性进行绑定了的,form存了值     .then是es6的语法前面执行之后会将返回结果放到.then里面// request.post("/api/user",this.form).then(res => {//   console.log(res);//// })//如果有id就更新没有就新增if (this.form.id){  //更新request.put("/api/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.dialogVisible = false  //关闭弹窗})}else {//新增request.post("/api/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.dialogVisible = false  //关闭弹窗})}},//编辑按钮  row是一个对象handleEdit(row) {//数据回显   因为弹窗跟form是进行绑定的直接给form赋值就okthis.form = JSON.parse(JSON.stringify(row))this.dialogVisible = true;  //打开弹窗},//当你改变每页个数的时候handleSizeChange(pageSize) {  //改变当前每的个数触发页//后端定义的是pageSize  传给前端定义的pageSizethis.pageSize = pageSize;this.load();},//改变当前页handleCurrentChange(pageNum) { //改变当前页码触发//后端定义的是pageNum  传给前端定义的currentPagethis.currentPage = pageNum;this.load();},//删除handleDelete(id){console.log(id);request.delete("/api/user/" + id).then(res => {if (res.code === '0'){this.$message({type:"success",message: "删除成功"})} else {this.$message({type: "error",message: res.msg})}this.load();})}}
}
</script>

request.js文件(axios封装请求文件)

// 本地安装axios  使用axios实现前后端分离
//npm i axios -Simport axios from 'axios'//第一步通过axios创建请求对象
const request = axios.create({timeout: 5000
})// 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 debugreturn Promise.reject(error)}
)export default request

App.vue文件(就用来布局)

<template><div><!--    需要导入自己的标签才能显示--><!--    头部--><Header/><!--  主体--><div style="display: flex"><!--      侧边栏--><Aside/><!--      内容区域  在router包下的index.js布局了Home.vue文件--><router-view style="flex: 1"/>  </div></div></template><style></style><!--引入components的头部-->
<script>import Header from "./components/Header";
import Aside from "./components/Aside";export default {name: "Layout",components: {Header, //导航栏Aside //侧边栏}
}
</script>

main.js文件(配置需要的css样式框架国际化样式框架等等) element vue都在里面

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// 引入css
import '@/assets/css/global.css'
// 引入Element   +use(ElementPlus)
import ElementPlus from 'element-plus';
// 引入Element的css
import 'element-plus/lib/theme-chalk/index.css';
// 国际化   + use(ElementPlus,{ locale })
import 'dayjs/locale/zh-cn'
import locale from 'element-plus/lib/locale/lang/zh-cn'//添加use(ElementPlus)
createApp(App).use(store).use(router).use(ElementPlus,{ locale, size:'small' }).mount('#app') //size:'small'设置尺寸

vue.config.js文件(跨域)
跨域就是指前后端的端口号不一致，同时运行两个端口，前端需要跨域传数据给后端。

// 跨域配置
module.exports = {devServer: {                //记住，别写错了devServer//设置本地默认端口  选填port: 9876,proxy: {                 //设置代理，必须填'/api': {              //设置拦截器  拦截器格式   斜杠+拦截器名字，名字可以自己定target: 'http://localhost:9090',     //代理的目标地址changeOrigin: true,              //是否设置同源，输入是的pathRewrite: {                   //路径重写'/api': ''                     //选择忽略拦截器里面的单词}}}}
}// 以上是解决跨域问题的代码

总体分析

springboot+vue+element+mybatisplus项目(前端)相关推荐

springboot+vue+element+mybatisplus项目(后端)
后端来说的话毕竟只进行了CRUD所以代码量还是很少,很简单的,后端有一些需要特别注意的点! 首页第一步连接数据库配置myabatisPlus需要导入的pom依赖是: <!-- mybatis-p ...
实验管理系统springboot+vue+element ui项目开发
实验管理系统某学院实验老师长期采用人工的形式完成药品试剂的入库.查询.出库的流程.但这种方式存在诸多问题和不便: 1. 在仓库运行流程中效率不高,容易出错. 2. 管理人员不能方便的了解每种物品的状 ...
Maynor手把手教你完成一个SpringBoot+Vue+Element实现的SPA商品管理系统(增删改查)
Maynor手把手教你完成一个SpringBoot+Vue+Element实现的SPA商品管理系统(增删改查) 前言完整代码三连后私信我获取~ 撸了一上午完成的SPA商品管理系统,求三连! B站演 ...
SpringBoot+Vue博客项目中遇到的坑
shiro整合jwt,用于用户登录逻辑流程: 登录流程: 用户登录:输入用户名和密码–>后端校验: –>有异常:处理异常 –>正常,生成jwt 访问接口时,统一被jwtFilter, ...
《菜狗商城》Springboot+Vue电商项目
菜狗商城一介绍菜狗商城一款Springboot+Vue前后端分离架构的网络电商平台购物系统,包括用户登录,商品推荐,商品搜索,用户评价,购物车,添加订单,收货地址及微信支付等功能. 涉及技术: ...
电影购票系统（小小影院），SpringBoot+vue 结构启动项目（带源码，不收费）
文章目录功能简介部署须知可能遇到的错误部分运行截图参考文档功能简介 SpringBoot+SpringSecurity+MyBatis-Plus 框架的前后端电影项目,前端使用vue+el ...
Springboot+Vue实现简单的前端后分离数据交互
目录一,前后端分离介绍二,与传统单体结构的比较 2.1,传统单体结构开发 2.2,前后端分离结构开发三,简单实现前后端数据交互 1,准备的环境及工具 2,开发步骤 2.1,后端部分 2.2,前端 ...
springboot+vue博客项目(码神之路博客项目)
写在最前:b站中博客项目除了这个还有一个三更草堂的博客项目也是不错的,三更草堂会比这个完善些,但是码神这个项目也非常好,看完这个再去看三更的,互相补充.(这两个博客项目应该是目前b站最好的了,而且时间 ...
阿里首推的“SpringBoot+Vue全栈项目”有多牛X？
Spring Boot致力于简化开发配置并为企业级开发提供一系列非业务性功能, 而Vue则采用数据驱动视图的方式将程序员从繁琐的DOM操作中解救出来.利用Spring Boot+Vue,我们可以快速开 ...

springboot+vue+element+mybatisplus项目(前端)

springboot+vue+element+mybatisplus项目(前端)相关推荐

最新文章

热门文章