官网：https://panjiachen.github.io/vue-element-admin-site/zh/guide/#功能

环境：

vscodenode.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}7[4M399C(21K]UV42@J}N.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>