前端显示
在之前三天我们后端的接口已经粗略的完成了几个功能，在此基础之上，借用前端技术来显示。
显示用户的信息
在第四天番外篇的基础上进行接下来的学习。
修改域名
在番外篇，登录的时候，发生错误，是由于服务器的设置问题，我们进行修改即可。
在config文件夹下，有一个dev.env.js和一个prod.env.js，分别代表了开发环境和实际上线环境。
将其中的BASE_API换为本机地址和实际端口后，我们之前开发后端用到的端口号是8001.替换结果如下（dev和prod都换）：
BASE_API: '"http://localhost:8001"',
修改完记得保存。
后端登录方法
在后端controller包下，创建新的类McsLoginController，写出登录方法和登陆成功后获取用户的信息（头像，一个动图）。
package com.atnanning.servicemcs.controller;
import com.atnanning.commomutils.R;
import org.springframework.web.bind.annotation.*;
@RestController //类交给springboot管理
@RequestMapping("/mcsservice/user")
@CrossOrigin //解决跨域问题,或者通过网关来解决跨域问题
public class McsLoginController {
//login
@PostMapping("login")
public R login() {
return R.ok().data("token","admin");
}
//info
@GetMapping("info")
public R info() {
return R.ok().data("roles","[admin]").data("name","admin").data("avatar","https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif");
}
}
修改api
在src - ->api下有一个login.js和一个table.js，打开login.js，修改url。
修改为：
url: '/mcsservice/user/info',
登录
再次使用npm run dev命令。
后端也需要启动。
登录成功
设置路由
在vue-admin-template-master中，找到src- ->router- ->index.js。增添新的路径。复制下面的代码，并黏贴到index.js中。
{
path: '/mcsuser',
component: Layout,
redirect: '/mcsuser/table',
name: '用户管理',
meta: { title: '用户管理', icon: 'example' },
children: [
{
path: 'table',
name: '用户列表',
component: () => import('@/views/mcs/mcsuser/list'),
meta: { title: '用户列表', icon: 'table' }
},
{
path: 'save',
name: '添加用户',
component: () => import('@/views/mcs/mcsuser/save'),
meta: { title: '添加用户', icon: 'tree' }
}
]
},
上述代码并不需要手敲，仔细观察即可发现，index.js中有模板存在，复制下来修改名称和关键路径即可。
接着在views下，创建文件夹mcs，并在mcs下创建文件夹mcsuser，在mcsuser下创建list.vue和save.vue两个文件，与上文的路径设置遥相呼应。
显示用户信息
在前一步中我们设置了路由，创建了两个文件，为我们接下来的工作的做好了铺垫。
为了减少代码书写的工作量，我们传授一种小技巧，每个界面的框架格式都是固定的，可以复制已有的页面在进行修改；也可以设置一个代码片段，在今后的书写中，使用快捷键自动生成，今天我们学习后一种方法。
在VScode中点击文件- -> 首选项- ->用户片段- ->新建全局代码片段文件，起好名字。复制以下内容即可（这个代码有点小问题，想在vue中使用，需要把scope的值html为修改为vue）：
{
"vue htm": {
"scope": "html",
"prefix": "vuehtml",
"body": [
"<!DOCTYPE html>",
"<html lang=\"en\">",
"",
"<head>",
" <meta charset=\"UTF-8\">",
" <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
" <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
" <title>Document</title>",
"</head>",
"",
"<body>",
" <div id=\"app\">",
"",
" </div>",
" <script src=\"vue.min.js\"></script>",
" <script>",
" new Vue({",
" el: '#app',",
" data: {",
" $1",
" }",
" })",
" </script>",
"</body>",
"",
"</html>",
],
"description": "my vue template in html"
}
}
其中prefix就是我们的关键字，在空白文件中敲下vuehtml就会出来提示，按回车即可生成模板。
在第一次使用的过程中使用都正常，可是在后面的使用中，我创建了一个空白的后缀为vue的文件，按下关键字并没有出现设置好的模板，而新建一个html文件，就可以出现提示，我反复百度，找遍了各大平台（花了我一晚上的时间在十教），发现是自己太愚蠢了，在prefix上面有一个scope，里面明确写了html，相当于一个起作用的范围，我们可以把里面的值换为vue，或者是直接删掉这个范围，以便在各个范围都可以使用。
分页列表
下面进入代码书写工作。
1.定义api
创建src/api/mcs/user.js.
import request from '@/utils/request'
export default {
getUserListPage(current,limit,userQuery) {
return request({
//url: '/servicemcs/mcsuser/pageUserCondition/'+current+"/"+limit,
url:`/servicemcs/mcsuser/pageUserCondition/${current}/${limit}`,
method: 'post',
//userQuery条件对象，后端使用RequestBody获取数据
//data表示把对象转换成json传递到接口里面
data:userQuery
})
}
}
2.初始化vue组件
src/views/mcs/user/list.vue
<template>
<div class="app-container">
用户列表
</div>
</template>
<script>
import user from '@/api/mcs/user'
export default {
data() {// 定义数据
return {}
},
created() { // 当页面加载时获取数据
this.getList()
},
methods: {
fetchData() { // 调用api层获取数据库中的数据
console.log('加载列表')
}
}
}
</script>
3.定义data
data() {//定义变量和初始值
return{
list:null,//查询之后接口返回集合
page:1,//当前页
limit:10,//每页数量
total:0,//记录数
teacherQuery:{}//条件封装对象
}
},
4.定义methods
取数据，分页提取数据，page代表当前页，limit代表每页的数据量，比如总共有100个数据，limit是10，那么就会有10页，浏览完第一页，点击下一页进行切换，userQuery就是数据体。
methods: {
getList(page=1) {
this.page = page
user.getUserListPage(this.page,this.limit,this.userQuery)
.then(response =>{
// console.log(response)
this.list = response.data.rows
this.total = response.data.total
})
.catch(error =>{
console.log(error)
})
}
}
5.表格渲染
数据是以一个表格的形式显示的，直接复制以下模板即可。放在div标签中。
<el-table-column
label="序号"
width="70"
align="center">
<template slot-scope="scope">
{{ (page - 1) * limit + scope.$index + 1 }}
</template>
</el-table-column>
<el-table-column prop="name" label="名称" width="80" />
<el-table-column prop="gmtCreate" label="添加时间" width="160"/>
<el-table-column label="操作" width="200" align="center">
<template slot-scope="scope">
<router-link :to="'/edu/teacher/edit/'+scope.row.id">
<el-button type="primary" size="mini" icon="el-icon-edit">修改</el-button>
</router-link>
<el-button type="danger" size="mini" icon="el-icon-delete" @click="removeDataById(scope.row.id)">删除</el-button>
</template>
</el-table-column>
</el-table>
6.分页组件
这个是已经封装好的组件，直接复制，放在表格渲染（第五点代码的下面，这两段代码都在div标签中）的下面即可。
<el-pagination
:current-page="page"
:page-size="limit"
:total="total"
style="padding: 30px 0; text-align: center;"
layout="total, prev, pager, next, jumper"
@current-change="fetchData"
/>
7.后端分页查询接口
在entity/vo下,新建包vo。
在vo/UserQuery下，新建类UserQuery。
代码如下：
package com.atnanning.servicemcs.entity.vo;
import io.swagger.annotations.ApiModelProperty;
import lombok.Data;
@Data
public class UserQuery {
@ApiModelProperty(value = "用户名称，模糊查询")
private String name;
@ApiModelProperty(value = "查询开始时间",example = "2019-01-01 10:10:10")
private String begin;
@ApiModelProperty(value = "查询结束时间",example = "2019-21-01 10:10:10")
private String end;
}
在McsUserController类中添加方法如下：
@PostMapping("pageUserCondition/{current}/{limit}")
public R pageUserCondition(@PathVariable long current,@PathVariable long limit,@RequestBody (required = false) UserQuery userQuery){
Page<McsUser> pageUser = new Page<>(current,limit);
QueryWrapper<McsUser> wrapper = new QueryWrapper<>();
String name = userQuery.getName();
String begin = userQuery.getBegin();
String end = userQuery.getEnd();
if(!StringUtils.isEmpty(name)){
wrapper.like("name",name);
}
if(!StringUtils.isEmpty(begin)){
wrapper.ge("gmt_create",begin);
}
if(!StringUtils.isEmpty(end)){
wrapper.le("gmt_modified",end);
}
mcsUserService.page(pageUser,wrapper);
long total = pageUser.getTotal();
List<McsUser> records = pageUser.getRecords();
return R.ok().data("total",total).data("rows",records);
}
8.关闭Eslint
eslint是为了在项目组中规范代码的书写，方便其他项目组成员查看代码，对空格要求较为严格。我们是自学记录项目，为了方便，可以选择关闭。
在config/index.js中将以下值修改为false。
useEslint: false,
如果不想关闭，则要查看相关文档，规范自己的书写，否则会报错。
之后运行后端和前端。登陆后出现以下界面即为成功（页面样式没有调整好）。同时注意跨域问题，在McsUserController添加标签@CrossOrigin
扫一扫
5283
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
