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代理解决。
<