vue2基础案例---用户列表案例

1、运行结果展示

一进入页面，会出现loading加载效果

展示用户列表

添加新用户

表单验证

用户详情

2、用到的知识点

• vue-router路由
• axios全局配置、axios拦截器
• proxy代理来解决跨域请求
• elemen-ui常见组件的用法

3、整体实现步骤

3.1创建一个工程化的vue项目

安装vue-cli
npm i vue-cli -g
之后创建一个工程化的vue项目
vue create code-users

创建工程化的vue项目步骤如下图：

3.2初始化项目结构

1. 创建完项目后，重置App.vue组件， 删除 components 目录下的 HelloWorld.vue 组件
2. 修改项目vue.config.js中的配置

module.exports = {
  devServer: {
    // 修改 dev 期间的端口号
    port: 3000,
    // 自动打开浏览器
    open: true
 }
}

3. 初始化路由

npm install vue-router@3.4.9 -S

注意：vue2对应的时vue-router 3.x版本，而vue3对应vue-router 4.x版本
在 src 目录下新建 router/index.js 路由模块：

// 路由模块
import Vue from 'vue'
import VueRouter from 'vue-router'
// 安装路由插件
Vue.use(VueRouter)
// 创建路由实例对象
const router = new VueRouter({
  // 路由规则
  routes: [],
})
// 向外共享路由实例对象
export default router

在 main.js 模块中导入并挂载路由模块：

import Vue from 'vue'
import App from './App.vue'
// 导入路由模块
import router from './router'
Vue.config.productionTip = false
new Vue({
  // 挂载路由
  router,
  render: h => h(App),
}).$mount('#app')

使用路由渲染 UserList 组件， 并在 router/index.js 路由模块中新增如下的路由规则：

// 创建路由实例对象
const router = new VueRouter({
  // 路由规则
  routes: [
    // 路由重定向
   { path: '/', redirect: '/users', },
    // 用户列表的路由规则
   { path: '/users', component: UserList }
 ],
})

在 App.vue 中声明 router-view 路由占位符：

<template>
  <div>
    <!-- 路由占位符 -->
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  name: 'MyApp',
}
</script>

4.通过axios发起请求，得到用户列表并渲染

npm install axios@0.21.1 -S

在 main.js 中导入并配置 axios

// 导入 axios
import axios from 'axios'

// 全局配置 axios
axios.defaults.baseURL = 'https://www.escook.cn'
Vue.prototype.$http = axios

在 UserList.vue 组件中声明如下的 data 数据节点

data() {
  return {
    // 用户列表数据，默认为空数组
    userList: [],
 }
}

在 methods 中声明 getUserList 方法

methods: {
  // 请求用户列表的数据
  async getUserList() {
    const { data: res } = await this.$http.get('/api/users')
    // res.status 等于 0 表示数据请求成功，否则，请求失败！
    if (res.status !== 0) return console.log('用户列表数据请求失
败！')
    this.userList = res.data
 },
}

在 created 生命周期函数中预调用 getUserList 方法

created() {
  // 调用此方法，请求用户列表数据
  this.getUserList()
}

5.通过proxy代理解决跨域请求限制
由于 API 接口服务器并没有开启 CORS 跨域资源共享，因此终端会提示错误
解决方案:
通过 vue.config.js 中的 devServer.proxy 即可在开发环境下将 API 请求代理到 API 服务器。

module.exports = {
  devServer: {
    port: 3000,
    open: true,
    // 当前项目在开发调试阶段，
    // 会将任何未知请求 (没有匹配到静态文件的请求) 代理到https://www.escook.cn
    proxy: 'https://www.escook.cn'
 }
}

同时，在 main.js 入口文件中，需要把 axios 的根路径改造为开发服务器的根路径

// 全局配置 axios
Vue.prototype.$http = axios
axios.defaults.baseURL = 'http://localhost:3000'

devServer.proxy 提供的代理功能，仅在开发调试阶段生效。项目上线发布时，依旧需要API 接口服务器开启 CORS 跨域资源共享
6.安装并配置element-ui组件库

npm i element-ui -S

注意：vue2对应的组件库时element-ui，而vue3对应的组件库时element-plus
在 main.js 中配置 element-ui

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import axios from 'axios'
// 1. 导入 element-ui
import ElementUI from 'element-ui'
// 2. 导入 element-ui 的样式表
import 'element-ui/lib/theme-chalk/index.css'
Vue.config.productionTip = false
// 3. 将 ElementUI 安装为 vue 的插件
Vue.use(ElementUI)
Vue.prototype.$http = axios
axios.defaults.baseURL = 'http://localhost:3000'
new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

上面是完整引入elementui，而本案例由于用到的组件比较少，按需引入需要对babel.config.js有所修改，样式才能生效

//babel.config.js
module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

3.3源码

源码gitee地址