本文详细记录了使用Vue.js和Element UI搭建用户列表应用的过程，包括初始化项目、配置路由、请求用户数据、解决跨域问题、安装Element UI、使用axios、自定义渲染、表单验证、用户增删功能、导航跳转、数据加载效果等关键步骤。通过该项目，读者可以掌握Vue项目的基本构建和常见组件的运用。
vue实战——笔记整理——黑马用户列表案例
目录
6.点击按钮展示添加用户的Dialog组件——用了ElementUI
16.2 能够知道如何在项目中安装和配置element-ui
16.5 知道如何配置proxy代理（手动查看2.3 解决跨域请求限制）
该项目页面截图
所涉及的知识的：
- vue-cli创建vue2项目
- element ui 组件库
- axios拦截器
- proxy跨域接口代理
- vuer-router路由
整体实现步骤
①.初始化项目
②.渲染用户表格的数据
③.基于全局过滤器处理时间格式
④.实现添加用户的操作
⑤.实现删除用户的操作
⑥.通过路由跳转到详情页，再通过编程式导航跳转到列表页面
1.初始化项目
- 安装vue脚手架（仅第一次执行），cmd命令，全局安装@vue/cli：npm install -g @vue/cli
- 切换到要创建项目的目录中，使用cmd命令创建项目：vue create xxxxxx
- 启动项目：npm run serve
- 可配置npm淘宝镜像：npm config set registry https://registry.npm.taobao.org
1.1 梳理项目结构
- 基于vue-cli运行命令，创建vue2.x的项目。shift+鼠标右键打开powershell窗口，在powershell窗口中输入：vue create users
得到一下文件
- 重置App.vue组件中的代码：
<template>
<div>
<h1>App组件</h1>
</div>
</template>
<script>
export default {
name:'MyApp'
}
</script>
<style lang="" scoped>
</style>- 删除components目录下的HelloWorld.vue组件
1.2 修改项目的开发调试配置
- 在根目录新建vue.config.js配置文件。
- 在vue.config.js配置文件中，通过derServer节点添加如下配置项：
module.exports={
devServer:{
//修改dev期间的端口号
port:3000,
//自动打开浏览器
open:true
}
}1.3 初始化路由
- 1.在vue2.x项目中安装vue-router，运行命令：
npm install vue-router@3.4.9 -S- 2.在src目录下新建router/idnex.js路由模块
//路由模块
import Vue from "vue";
import VueRouter from 'vue-router'
//安装路由插件
Vue.use(VueRouter)
//创建路由实例对象
const router = new VueRouter({
//路由规则
routes: []
})
//向外共享路由实例对象
export default router- 3.在main.js模块中导入并挂载路由模块：
import Vue from 'vue'
import App from './App.vue'
//导入路由模块
import router from './router'
Vue.config.productionTip = false
new Vue({
//挂载router
router,
render: h => h(App),
}).$mount('#app')1.4 使用路由渲染UserList组件
- 1.在components目录下新建UserList.vue组件：
<template>
<div>
UserList
</div>
</template>
<script>
export default {
name:'UserList'
}
</script>
<style>
</style>- 2.导入UserList.vue组件，在router/idnex.js路由模块中新增路由规则：
//导入UserList组件
import UserList from '../components/UserList.vue'
//创建路由实例对象
const router = new VueRouter({
//路由规则
routes: [
//路由重定向
{ path: '/', redirect: '/users' }, //如果请求的是根路径，则重定向到users
//用户列表的路由规则
{ path: '/users', component: UserList } //如果请求的是users地址，则展示UserList组件
]
})- 3.在App.vue中声明vouter-view路由占位符：
<template>
<div>
<!-- 路由占位符 -->
<router-view></router-view>
</div>
</template>
<script>
export default {
name:'MyApp'
}
</script>2.渲染用户列表组件
2.1 安装并配置axios
- 1.在项目中安装axios：
npm install axios@0.21.1 -S- 2.在main.js中导入并配置axios：
import Vue from 'vue'
import App from './App.vue'
import router from './router'
//导入axios
import axios from 'axios'
Vue.config.productionTip = false
//全局配置axios，请求根路径https://www.escook.cn
axios.defaults.baseURL = 'https://www.escook.cn'
//挂载为vue原型自定义身上的属性
Vue.prototype.$http = axios
new Vue({
router,
render: h => h(App),
}).$mount('#app')2.2 请求用户列表的数据
- 1.在.UserList.vue组件中声明data数据节点：
data(){
return{
//用户列表数据，默认为空数组
userList:[],
}
},- 2.在created生命周期函数中预调用.getUserList方法：
created(){
//调用此方法请求用户列表数据，可发起ajax请求获取用户数据
this.getUserList()
},- 3.在methods中声明.getUserList方法：
methods:{
//请求用户列表的数据
getUserList(){
//解构出的data属性重命名为res
const {data:res}=await this.$http.get('/api/users')
//ajax中，res.status等于0时，表示数据请求成功，否则请求失败！
if(res.status!==0)
return console.log('数据请求失败')
this.userList = res.data
}
}此时存在CORS跨域问题，可用proxy代理解决。
<
最低0.47元/天 解锁文章
797
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
