一.主体部分包括：表格、新增按钮、导入按钮、导出按钮、分页、查询输入框、查询按钮。
二.在views/Home.vue文件中添加如下代码
1 <template>
2 <!--功能区域-->
3 <div style="width: 83.5%; margin-left: 205px; margin-top: -750px">
4 <el-button type="primary" @click="add">新增</el-button>
5 <el-button type="primary">导入</el-button>
6 <el-button type="primary">导出</el-button>
7 <el-input v-model="search" placeholder="请输入查询的昵称" style="width: 180px; margin-left: 790px; padding: 1px" clearable/>
8 <el-button type="primary" @click="load">查询</el-button>
9 </div>
10 <!--主体表格-->
11 <div style="padding: 5px">
12 <el-table :data="tableData" border style="width: 87%; margin-left: 198px" stripe>
13 <el-table-column prop="id" label="ID" width="80" sortable />
14 <el-table-column prop="username" label="用户名" width="130"/>
15 <el-table-column prop="password" label="密码" width="130"/>
16 <el-table-column prop="nikeName" label="昵称" width="130"/>
17 <el-table-column prop="age" label="年龄" width="80" sortable/>
18 <el-table-column prop="sex" label="性别" width="80"/>
19 <el-table-column prop="address" label="地址" width="500"/>
20 <el-table-column prop="Operation" label="操作">
21 <template #default="scope">
22 <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
23 <el-popconfirm title="确认删除这条记录么?" @confirm="handleDelete(scope.row.id)">
24 <template #reference>
25 <el-button size="small" type="danger">删除</el-button>
26 </template>
27 </el-popconfirm >
28 </template>
29 </el-table-column>
30 </el-table>
31 <!--分页-->
32 <div style="margin-left: 200px">
33 <span class="demonstration"></span>
34 <!--currentPage对应下面的currentPage:1、pageSize对应下面的pageSize:10-->
35 <el-pagination
36 @size-change="handleSizeChange"
37 @current-change="handleCurrentChange"
38 :current-page="currentPage"
39 :page-sizes="[5,10,20]"
40 :page-size="pageSize"
41 layout="total, sizes, prev, pager, next, jumper"
42 :total="total"
43 >
44 </el-pagination>
45
46 <!--新增按钮的弹窗，dialogVisible：用于控制弹窗的显示和隐藏-->
47 <el-dialog v-model="dialogVisible" title="新增用户" width="30%">
48 <el-form :model="form" label-width="80px">
49 <el-form-item label="用户名">
50 <el-input v-model="form.username"></el-input>
51 </el-form-item>
52 <el-form-item label="昵称">
53 <el-input v-model="form.nikeName"></el-input>
54 </el-form-item>
55 <el-form-item label="年龄">
56 <el-input v-model="form.age"></el-input>
57 </el-form-item>
58 <el-form-item label="性别">
59 <el-radio v-model="form.sex" label="男" size="large">男</el-radio>
60 <el-radio v-model="form.sex" label="女" size="large">女</el-radio>
61 <el-radio v-model="form.sex" label="未知" size="large">未知</el-radio>
62 </el-form-item>
63 <el-form-item label="地址">
64 <el-input type="textarea" v-model="form.address"></el-input>
65 </el-form-item>
66 </el-form>
67 <template #footer>
68 <span class="dialog-footer">
69 <el-button @click="dialogVisible = false">取消</el-button>
70 <el-button type="primary" @click="save">确认</el-button>
71 </span>
72 </template>
73 </el-dialog>
74 </div>
75 </div>
76 </template>
77
78 <script>
79
80 import request from "@/utils/request";
81
82 export default {
83 name: 'Home',
84 components: {
85
86 },
87 data(){
88 return{
89 form:{
90
91 },
92 dialogVisible:false,
93 search: '',
94 currentPage:1,
95 pageSize:10,
96 total: 0,
97 tableData:[]
98 }
99 },
100 created() {
101 this.load()
102 },
103 methods:{
104 load(){
105 request.get("http://localhost:9876/api/user", {
106 params:{
107 pageNum: this.currentPage,
108 pageSize: this.pageSize,
109 search: this.search
110 }
111 }).then(res=>{
112 console.log(res)
113 this.tableData=res.data.records
114 this.total=res.data.total
115 })
116 },
117 //新增按钮的弹窗
118 add(){
119 this.dialogVisible=true,
120 //用于清空data()-》return-》form表单里面的内容
121 this.form={}
122 },
123 //点击新增表单的确认按钮后，将数据提交到后台的函数
124 save(){
125 if(this.form.id){
126 //如果有这个id执行更新操作
127 request.put("/user",this.form).then(res=>{
128 console.log(res)
129 if(res.code=='0'){
130 this.$message({
131 type:"success",
132 message:"更新成功"
133 })
134 }else{
135 this.$message({
136 type:"error",
137 message:res.msg
138 })
139 }
140 //刷新页面，关闭弹窗
141 this.load()
142 this.dialogVisible=false
143 })
144 }else{
145 //如果没有这个id执行新增操作
146 //这里可以放axios，ajax等请求，这里我放axios
147 //request.post中有两个参数，一个是请求的url，一个是请求的参数
148 //其中this.form是与上面的新增用户的表单的json数据绑定的,将结果返回给res
149 //这样就实现了将前台的请求结果发送给了后台
150 request.post("/user",this.form).then(res=>{
151 console.log(res)
152 if(res.code=='0'){
153 this.$message({
154 type:"success",
155 message:"新增成功"
156 })
157 }else{
158 this.$message({
159 type:"error",
160 message:res.msg
161 })
162 }
163 //刷新页面，关闭弹窗
164 this.load()
165 this.dialogVisible=false
166 })
167 }
168 },
169 handleEdit(row){
170 //将这一行的数据可以放置到form表单里边
171 this.form=JSON.parse(JSON.stringify(row))
172 //打开form表单
173 this.dialogVisible=true
174 },
175 handleDelete(id){
176 request.delete("/user/"+id,this.form).then(res=>{
177 if(res.code=='0'){ //如果请求成功返回0，判断当返回码为0的时候执行里边的语句
178 this.$message({
179 type:"success",
180 message:"删除成功"
181 })
182 }else{
183 this.$message({
184 type:"error",
185 message:res.msg
186 })
187 }
188 console.log(res)
189 })
190 this.load()
191 },
192 handleSizeChange(pageSize){
193 this.pageSize=pageSize
194 this.load()
195 },
196 handleCurrentChange(pageNum){
197 this.currentPage=pageNum
198 this.load()
199 }
200 }
201 }
202 </script>
三.新建一个utils文件夹，将前面文章中提供的request.js文件放到这里来，这个文件是用来封装aixos请求的（代码中有注释解释）
四.将前面文章中提供的vue.config.js文件复制到src目录下，这个文件用来解决跨域问题的（代码中有注释解释）
五.完整的main.js文件中的代码
1 import { createApp } from 'vue'
2 import App from './App.vue'
3 import router from './router'
4 import store from './store'
5 import ElementPlus from 'element-plus'
6 import 'element-plus/dist/index.css'
7 import 'dayjs/locale/zh-cn'
8 import locale from 'element-plus/lib/locale/lang/zh-cn'
9
10 import './assets/CSS/global.css';
11
12
13 createApp(App).use(store).use(router).use(ElementPlus,{locale}).mount('#app')
六.至此前端部分设计完毕，运行程序，效果如下