1. 题目
实现用户管理功能。

2. 目的
（1）理解Node.js程序的基本原理。

（2）掌握利用Node.js建立服务器程序的基本方法。

（3）理解Ajax 的工作原理。

（4）掌握编写Ajax程序的基本方法。

（5）会利用所学知识设计简单的应用程序。

3. 内容
设计程序能够对用户进行管理，实现查询、删除、注册、登录功能。

4. 要求
（1）用户管理界面，以列表的方式显示用户数据，并提供删除功能。

数据通过Ajax 请求服务器端程序，从数据库中获取。

（2）注册界面Ajax 请求服务器端程序能够将用户信息保存到数据库。

（3）注册界面在输入用户名时能实现动态验证的唯一性。

（4）登录功能通过数据库查询进行验证。

代码示例：
template>
<div class="common-table"><!--v-loading="config.loading" 表格加载状态-->
<el-table:data="tableData" height="100%" stripe v-loading="config.loading">
....
</el-table>
...
</el-pagination>
</div>
</template>
<template>
<div class="common-table">
<el-table>
....
<el-table-column label="操作" style="width: 100px">
.....
</el-table-column>
</el-table>
<!--:current-page.sync="config.page"同步父组件页数@current-change="changePage"触发事件改变页数，数据传递给父组件-->
<el-pagination class="pager" background layout="prev, pager, next" :total="config.total" :current-page.sync="config.page" @current-change="changePage"> </el-pagination>
</div>
</template>
<script>
export default {
....,
methods: {
....,
changePage(page) {
this.$emit('changePage',page);
}
}
}
</script>
<template>
<div class="manage">
....<!--@changePage="getList"接收子组件传递过来的page数-->
<Table:tableData="tableData" :tableLabel="tableLabel" :config="config" @changePage="getList"></Table>
</div>
</template>
<script>
....
export default {
....,
data(){
return {
tableData: [],
tableLabel: [
....,
{
prop: 'birth',
label: '出生日期',
width: 200
},
{
prop: 'addr',
label: '地址',
width: 300
},
],
....
},
methods: {
getList() {
this.config.loading = true;
this.$http.get('/api/user/getUser',{
params: {
page: this.config.page
}
}).then(res => {
this.tableData = res.data.list.map(item => {
item.sexLabel = item.sex === 0 ? '女' : '男';
return item
});
this.config.total = res.data.count;
this.config.loading = false;
})
}
},
created() {
this.getList()
}
}
</script>
<style scoped> </style>。