免安装版的
前言
使用免安装版的Vue就只是需要导入相关的依赖
Vue是一个框架做的打底
Element UI 做一个装饰 就是复制粘贴
后端程序员做后端就是照猫画虎 复制粘贴
比如EasyUI等等
常用的前端脚本
Vue初始化的关键元素
- el：选中父 div 节点
- methods：定义方法
- created/mounted：初始化方法
- data：定义数据
前后端交互
前后端交互，使用 axios，他是对 Ajax 的封装
Vue 中的数据展示，首先定义一个对象，跟组件进行绑定
1、定义对象
2、绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
<el-table
:data="array"
border
stripe
style="relative;top: 0px;">
<el-table-column
fixed
prop="id"
label="ID"
width="260">
</el-table-column>
<el-table-column
prop="username"
label="用户名"
width="320">
</el-table-column>
<el-table-column
prop="password"
label="密码"
width="320">
</el-table-column>
<el-table-column
prop="role"
label="角色"
width="320">
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button
size="mini"
type="info"
icon="el-icon-edit"
@click="edit(scope.row)">修改</el-button>
<el-button
size="mini"
type="danger"
icon="el-icon-delete"
@click="del(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination style="margin-top: 20px;float: right;position: relative;top: 0px;"
background
layout="prev, pager, next"
:page-size="size"
:total="total"
:current-page.sync="page"
@current-change="change">
</el-pagination>
</div>
</body>
<script src="js/vue.js"></script>
<script src="js/elementui.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
new Vue({
el: '#app',
methods: {
change(currentPage){
let _this = this
axios.get('http://localhost:8080/list?page='+currentPage+'&size='+_this.size).then(function (resp) {
_this.array = resp.data.list
_this.total = resp.data.total
})
}
},
mounted: function () {
let _this = this
axios.get('http://localhost:8080/list?page='+_this.page+'&size='+_this.size).then(function (resp) {
_this.array = resp.data.list
_this.total = resp.data.total
})
},
data(){
return {
array:'',
page:1,
size:2,
total:''
}
}
})
</script>
</html>
package com.southwind.controller;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.southwind.entity.Account;
import com.southwind.service.AccountService;
import com.southwind.vo.PageVO;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RestController;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
/**
* <p>
* 前端控制器
* </p>
*
* @author 张三
* @since 2024-12-30
*/
@RestController
public class AccountController {
@Autowired
private AccountService accountService;
@GetMapping("/list")
public Map list(Integer page, Integer size){
Page<Account> pageModel = new Page<>(page,size);
Page<Account> resultPage = this.accountService.page(pageModel);
long total = resultPage.getTotal();
List<Account> list = resultPage.getRecords();
Map map = new HashMap();
map.put("total", total);
map.put("list", list);
return map;
}
}
浙公网安备 33010602011771号