天天看点

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

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

Aside.vue文件(侧边栏)

<!--放菜单栏-->
<template>
  <!--  侧边栏必须有的两个函数handleOpen,handleClose-->
  <div>
    <el-menu
        style="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"
        border
        style="width: 100%"
        :default-sort="{prop: 'date', order: 'descending'}">
      <el-table-column
          prop="id"
          label="ID"
          sortable>
      </el-table-column>
      <el-table-column
          prop="userId"
          label="用户Id">
      </el-table-column>
      <el-table-column
          prop="userPwd"
          label="用户密码">
      </el-table-column>
      <el-table-column
          prop="nickName"
          label="昵称">
      </el-table-column>
      <el-table-column
          prop="age"
          label="年龄">
      </el-table-column>
      <el-table-column
          prop="sex"
          label="性别">
      </el-table-column>
      <el-table-column
          prop="address"
          label="地址">
      </el-table-column>
      <el-table-column
          fixed="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 {
    //弹窗一直的都是打开的先设置false
      dialogVisible:false,
      form: {
      },
      //关键字  传给后台
      search:'',
      //变量当前页 默认1  传后
      currentPage: 1,
      pageSize:10,
      total: 0,
      //对应表格的data
      tableData: []
    }

  },
  //页面加载的方法
  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赋值就ok
          this.form = JSON.parse(JSON.stringify(row))
          this.dialogVisible = true;  //打开弹窗
    },
    //当你改变每页个数的时候
    handleSizeChange(pageSize) {  //改变当前每的个数触发页
      //后端定义的是pageSize  传给前端定义的pageSize
    this.pageSize = pageSize;
      this.load();
    },
    //改变当前页
    handleCurrentChange(pageNum) { //改变当前页码触发
      //后端定义的是pageNum  传给前端定义的currentPage
      this.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 -S

import 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 debug
        return 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项目(前端)

继续阅读