官网：https://panjiachen.github.io/vue-element-admin-site/zh/guide/#%E5%8A%9F%E8%83%BD

环境：

• vscode
• node.js
• 后台代码就是简单的基于springboot的增删改查

安装nodejs，在vscode工作空间目录命令行里安装依赖，启动  npm run dev

修改框架路径：vue-admin-template-master\vue-admin-template-master\.env.development文件

# just a flag
ENV = 'development'

# base api
# VUE_APP_BASE_API = '/dev-api'
VUE_APP_BASE_API = 'http://localhost:8001'

简单登录

修改login和info路径

export function login(username,password) {
  return request({
    url: '/qyc/user/login',
    method: 'post',
    data:{
      username,
      password
    }
  })
}

export function getInfo(token) {
  return request({
    url: '/qyc/user/info',
    method: 'get',
    params: { token }
  })
}

跨域：

（1）添加@CrossOrigin

@RestController
@RequestMapping("/qyc/user")
@CrossOrigin
public class UserController {
    @PostMapping("login")
    public R login(){
        R r = R.ok();
        r.data("token","admin");
        return r;
    }
    @GetMapping("info")
    public R info(){
        R r = R.ok();
        r.data("roles","admin").data("name","qyc").data("avatar","\n" +
                "https://qyc-oostest.oss-cn-beijing.aliyuncs.com/20200624/X%7D7%5B4M399C%2821K%5DUV42%40J%7DN.png");
        return r;
    }
}

路由

路由

vue-admin-template-master\src\router\index.js

// 添加菜单  路由

  {
    path: '/usermenu',
    component: Layout,
    redirect: '/usermenu/show',  //默认路由
    name: '用户管理',
    meta: { title: '用户管理', icon: 'el-icon-s-help' },
    children: [
      {
        path: 'show',
        name: '用户列表',
        //转到页面
        component: () => import('@/views/user/show'),
        meta: { title: '用户列表', icon: 'table' }
      },
      {
        path: 'save',
        name: '添加用户',
        component: () => import('@/views/user/save'),
        meta: { title: '添加用户', icon: 'el-icon-circle-plus-outline' }
      },
      {
        path:'seid/:id',
        name:'修改',
        component: ()=> import('@/views/user/save'),
        meta:{title:'编辑',noCache:true},
        hidden:true //隐藏
      }
    ]
  },

api

vue-admin-template-master\src\api\listUser.js

import request from '@/utils/request'

// 第一步  定义接口
export default{
  show(num,size,user) {
  return request({
    //   用飘``
    url: `user/list/show/${num}/${size}`,
    method: 'post',
    data: user
  })
},
delete(id){
  return request({
    url: `user/list/delete/${id}`,
    method: 'delete',
  })
}
}

vue-admin-template-master\src\api\save.js

import request from '@/utils/request'
// 一个请求对应一个api
export default{
    add(user){
        return request({
            url:`user/list/add`,
            method:'post',
            data: user
        })
    }, 
    update(user){
        return request({
            url:`user/list/update`,
            method:'post',
            data: user
        })
    },
    selectByid(id){
        return request({
            url:`user/list/select/${id}`,
            method:'get',
        })
    }
}

view

vue-admin-template-master\src\views\user\show.vue

<template>
    
<div class="app-container">

<el-form :inline="true" :model="formInline" class="demo-form-inline">
  <el-form-item >
    <el-input v-model="user.name" placeholder="姓名"></el-input>
  </el-form-item>
  <el-form-item >
    <el-date-picker
      v-model="user.gmtCreate"
      align="right"
      type="date"
      placeholder="选择日期"
      :picker-options="pickerOptions">
    </el-date-picker>
   
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="showList()">查询</el-button>
    <el-button type="default" @click="clear()">清空</el-button>
  </el-form-item>
</el-form>



  <el-table
    :data="pagelist"
    stripe
    style="width: 100%"
    :row-class-name="tableRowClassName">
    <el-table-column
      prop="id"
      label="ID"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="age"
      label="年龄">
    </el-table-column>
    <el-table-column label="年龄层">
        <template slot-scope="u">
            {{u.row.age > 18?'青年':'未成年'}}
        </template>
    </el-table-column>
    
    <el-table-column label="加入时间">
        
        <template slot-scope="t">
            {{t.row.gmtCreate}}
        </template>
    </el-table-column>
    <!-- <el-table-column
      prop="gmtCreate"
      label="加入时间">
    </el-table-column> -->
    <el-table-column
      prop="gmtModified"
      label="修改时间">
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
          <!-- 路由 -->
        <router-link :to="'/usermenu/seid/'+scope.row.id">
            <el-button
          size="mini"
          @click="handleEdit(scope.row.id)">编辑</el-button>
        </router-link>
        <el-button
          size="mini"
          type="danger"
          @click="deleteU(scope.row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <span style="text-align: center;display:block;">
  <el-pagination
      :current-page="num"
      :total="total" 
      :page-size="size"
      @current-change="showList"
     
      layout="total, prev, pager, next, jumper"
    >
    </el-pagination>
    </span>
</div>

  

</template>
<script>
  export default {
    data() {
      return {
        formInline: {
          user: '',
          region: ''
        }
      }
    },
    methods: {
      onSubmit() {
        console.log('submit!');
      }
    }
  }
</script>
<style>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</style>

<script>
import listUser from '@/api/listUser'
export default {
    data(){
        return{
            pagelist:null,
            num:1,
            size:5,
            total:0,
            pages:10,
            user:{
                name:'',
                gmtCreate:''
            } //条件
        }
    },
    created(){
        this.showList();
    }, 
    methods:{
        showList(page=1){
            this.num = page
            console.log(this.num)
            listUser.show(this.num,this.size,this.user)
            .then(responce =>{
                //请求成功
                console.log(responce.data)
                //注意有this
                this.pagelist = responce.data.pagelist.records
                this.num = responce.data.num;
                this.total = responce.data.pagelist.total
        
            })
            .cache(error =>{
                alert("错误")
            })
        },
        clear(){
            this.user = {}
            this.showList()
        },
        // 删除 
        deleteU(id){
            this.$confirm("此操作将永久删除记录，是否继续？",'提示',{
                confirmButtonText:'确定',
                cancelButtonText:'取消',
                type:'waring'
            }).then(() => {
                listUser.delete(id).then(response => {
                    this.$message({
                    type:'success',
                    message:'删除成功'
                });
                this.showList()
                })
                
            }).cache(error=>{
                this.$message({
                    type:'error',
                    message:'删除失败'
            })
        })
    }
}
}
</script>

vue-admin-template-master\src\views\user\save.vue

跳转

<template>
    <div class="app-container">
<div style="margin: 20px;"></div>
<el-form :label-position="labelPosition" label-width="80px"  :model="formLabelAlign">
  <el-form-item label="姓名">
    <el-input v-model="userinfos.name" style="width: 20%;"></el-input>
  </el-form-item>
  <el-form-item label="年龄">
    <el-input v-model="userinfos.age" style="width: 20%;"></el-input>
  </el-form-item>
 <el-form-item>
     <!-- 注意有括号 -->
    <el-button type="primary" @click="uors()">提交</el-button>
  </el-form-item>
</el-form>
    </div>
</template>

// 第三步  接收数据
<script>
import adduser from '@/api/save'
export default {
    data(){
        return{
            userinfos:{
                name:'',
                age:''
            }
        }
    },
    created(){ 
            //获取id
            if(this.$route.params && this.$route.params.id){
                const id = this.$route.params.id
                this.select(id)
            }else{
                //清空表单
                this.userinfos={}
            }
    },
    methods:{
       addusers(){
            adduser.add(this.userinfos)
            .then(response => {
                //添加成功  路由跳转
                this.$message({
                    type:'success',
                    message:'添加成功'
                });
                this.$router.push({path:'/usermenu/show'})
            })
            .cache(error => {
                
            })
       },
       select(id){
           adduser.selectByid(id).then(response =>{
               this.userinfos = response.data.userInfo
           }).cache(error=>{

           })
       },
       uors(){
           if(this.userinfos.id){
               console.log(this.userinfos.id)
               this.updates(this.userinfos)
           }else{
               this.addusers(this.userinfos)
           }
       },
       updates(){
            console.log(this.userinfos.name)
           adduser.update(this.userinfos)
           .then(response => {
               //修改成功 跳转
                this.$message({
                    type:'success',
                    message:'修改成功'
                });
                this.$router.push({path:'/usermenu/show'})
           }).cache(error=>{
                this.$message({
                    type:'error',
                    message:'修改失败'
                });
           })
       }
    }
}
</script>

注意：

vscode提示不怎么牛逼，注意别敲错字母

long类型转换json会出现精度丢失：解决办法 在bean的long类型上面  @JsonSerialize

@JsonSerialize(using = ToStringSerializer.class)
    @TableId(value = "id", type = IdType.ID_WORKER)
    private Long id;

效果：

与nginx整合：

nginx配置：

server{
        listen 7001;
        server_name 192.168.32.129;

        location ~ /user/ {
        proxy_pass http://192.168.32.1:8001;
}
        location ~ /oss/ {
        proxy_pass http://192.168.32.1:9001;
}
} 

vue-admin-template-master\.env.development

VUE_APP_BASE_API = 'http://192.168.32.129:7001'

上传OSS

在save.vue添加方法

       //上传成功回调函数
       cropSuccess(data){
        this.imagecropperShow=false
        this.userinfos.headPath = data.url
        console.log(data)
        //上传成功后重新打开上传组件时初始化组件
        this.imagekey = this.imagekey+1
       },
       //关闭上传组件
       close(){
           this.imagecropperShow=false
           this.imagekey = this.imagekey+1
       }
    }

样式：

注意在data配置:

apisss: process.env.VUE_APP_BASE_API, //接口API地址

<!-- 上传 -->
<el-form-item label="头像">

<!-- 头像缩略图 -->
<pan-thumb :image="userinfos.headPath"></pan-thumb>
<!-- 文件上传按钮 -->
<el-button type="primary" icon="el-icon-upload" @click="imagecropperShow=true">上传头像</el-button>
<image-cropper
    v-show="imagecropperShow"
    :width="300"
    :height="300"
    :key="imagekey"
    :url="apisss+'/oss/add/storage'"
    field="file"
    @close="close"
    @crop-upload-success="cropSuccess"
></image-cropper>

</el-form-item>

显示头像

样式：

注意：用template slot-scope取值  

<el-table-column label="头像" width="80">
    <template slot-scope="scopes">
      <el-row class="demo-avatar demo-basic">
    <el-col :span="12"> 
     
      <div class="sub-title"></div>
      <div class="demo-basic--circle">
         <div class="block"><el-avatar :size="50" :src="scopes.row.headPath"></el-avatar></div>
      </div>
    </el-col>
    </el-row>
    </template>
    </el-table-column>