• vue学习第五天（9月8号）

    前后端分离开发之前端Vue工程

    1. 安装ElementUI局部组件库

    npm install element-ui -S

    在入口文件main.js中全局导入ElementUI组件库

    1. import ElementUI from 'element-ui';
    2. import 'element-ui/lib/theme-chalk/index.css';
    3. Vue.use(ElementUI);

    1. 安装Axios (HTTP通信库)

    npm install axios -S

    Axios是一款HTTP通信的三方库, 作用与jQuery的ajax是一样的, 用于发起http请求后端, 并接受后端返回的响应数据，因为Vue工程中用不到jQuery技术, 因此用不了ajax，改用Axios技术

    因为ajax是早期的HTTP通信技术, 因此人们习惯将HTTP通信技术统称为ajax

    Axios与ajax是同一种类型的技术

    自己手动封装axios模块

    在src目录下创建http目录, 在http目录中创建index.js文件

    1. import axios from 'axios'
    2. import {Notification, Loading} from 'element-ui'
    3.  
    4. axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
    5.  
    6. const http = axios.create({
    7.     baseURL:'http://localhost:8888/api',
    8.     timeout: 15 * 1000
    9. })
    10.  
    11. let loading;
    12.  
    13. http.interceptors.request.use(config => {
    14.     loading = Loading.service({
    15.         lock: true,
    16.         text: 'Loading',
    17.         spinner: 'el-icon-loading',
    18.         background: 'rgba(0, 0, 0, 0.7)'
    19.     })
    20.     return config
    21. }, error => {
    22.     loading.close()
    23.     Notification({
    24.         type:'error',
    25.         title:'错误',
    26.         message:'请检查网络'
    27.     })
    28.     Promise.reject(error)
    29. })
    30.  
    31. http.interceptors.response.use(res => {
    32.     loading.close();
    33.     const code = res.data.code;
    34.     const msg = res.data.msg;
    35.     if (code !== '000000'){
    36.         Notification({
    37.             type:'error',
    38.             title:code,
    39.             message:msg
    40.         })
    41.         return Promise.reject(res)
    42.     }else {
    43.         return res.data.data
    44.     }
    45. }, error => {
    46.     loading.close()
    47.     Notification({
    48.         type:'error',
    49.         title:'错误',
    50.         message:'服务器没有响应'
    51.     })
    52.     return Promise.reject(error)
    53. })
    54. export default http

    在入口文件main.js中全局导入基于axios封装的http对象

    1. import http from './http';
    2. Vue.prototype.$http = http

    1. 从http目录的index.js文件中导入http对象

    2. 将http对象挂载在Vue原型对象上的$http属性上面

    3. 这样我们就可以在任意的Vue组件中使用this.$http对象来发起http请求了

    1. 创建Views组件

    在viiews目录中创建user目录, 与User相关的组件创建在这个目录中

    1. Login.vue 用户登录组件

    2. Register.vue 用户注册组件

    3. UserDetail 用户详细信息组件

    4. UserModify 编辑用户组件

    5. UserView 用户列表组件

    1. Home.vue 主页组件

    2. Dashboard.vue 主页中的控制面板组件

    省略其他组件..........

    1. Views组件注册路由

    在src/router/index.js路由配置文件中注册Views组件路由

    导入需要注册路由的组件

    1. import Vue from 'vue'
    2. import VueRouter from 'vue-router'
    3. import Home from "@/views/Home";
    4. import UserView from "@/views/user/UserView";

    注册路由

    1. Vue.use(VueRouter)
    2.  
    3. const routes = [
    4.   {
    5.     path:'/',
    6.     component:Home
    7.   },
    8.   {
    9.     path:'/user',
    10.     component:UserView
    11.   }
    12. ]

    1. 编写App.vue (设置布局)

    1. <template>
    2.   <div id="app">
    3.     <el-container style="height: 100%">
    4.       <el-header style="height: 6%">
    5.  
    6.       </el-header>
    7.       <el-container style="height: 94%">
    8.         <el-aside width="200px">
    9.           <el-menu
    10.               default-active="/dashboard"
    11.               class="el-menu-vertical-demo"
    12.               text-color="rgba(0,0,0,0.4)"
    13.               :router="true">
    14.             <el-menu-item index="/dashboard">主页</el-menu-item>
    15.             <el-menu-item index="/user">用户管理</el-menu-item>
    16.             <el-menu-item index="/product">商品管理</el-menu-item>
    17.             <el-menu-item index="/order">订单管理</el-menu-item>
    18.             <el-menu-item index="/comment">评论管理</el-menu-item>
    19.             <el-menu-item index="/category">分类管理</el-menu-item>
    20.             <el-menu-item index="/other">其他管理</el-menu-item>
    21.           </el-menu>
    22.         </el-aside>
    23.         <el-main style="padding: 10px;">
    24.           <div class="infinite-list"  style="overflow:auto">
    25.             <router-view/>
    26.           </div>
    27.         </el-main>
    28.       </el-container>
    29.     </el-container>
    30.   </div>
    31. </template>
    32.  
    33. <style>
    34. #app {
    35.   font-family: Avenir, Helvetica, Arial, sans-serif;
    36.   -webkit-font-smoothing: antialiased;
    37.   -moz-osx-font-smoothing: grayscale;
    38.   color: #2c3e50;
    39.   height: 100%;
    40. }
    41.  
    42. .el-header {
    43.   background-color: rgba(0,0,0,0.7);
    44.   color: white;
    45. }
    46.  
    47. .el-main {
    48.   background-color: rgba(0,0,0,0.1);
    49. }
    50.  
    51. .el-menu-item {
    52.   text-align: center;
    53.   font-size: 16px;
    54. }
    55.  
    56. .infinite-list {
    57.   background-color: white;
    58.   padding: 10px;
    59. }
    60. </style>

    1. 在index.html中设置style

    为什么在public/index.html里面做整个事情?

    因为这个html文件是项目全局唯一的网页文件，也是顶层的html代码

    这里做了两件事

    1. * 选择器设置了全局所有的内边距和外边距全部为0

    2. 设置html, body 的宽度和高度为当前设备上视口的100 %

    页面的宽度默认就是视口的100 %

    但是页面的高度会根据内容拉伸形成长页面, 这里将高度设置为100% , 页面就不会拉伸了

    我们可以在页面的局部使用滚动布局, 让局部支持滚动

    1. <style>
    2.   * {
    3.       padding: 0px;
    4.       margin: 0px;
    5.   }
    6.   html, body{
    7.       width: 100%;
    8.       height: 100%;
    9.   }
    10. style>

    1. 编写UserView组件

    在data中注册全局变量

    1. data(){
    2.     return {
    3.       total:100,
    4.       current: 1,
    5.       size: 10,
    6.       username:'',
    7.       idCode:'',
    8.       mobile:'',
    9.       userList:[]
    10.     }
    11. }

    在template中使用ElementUI提供的组件编写页面模板

    1. 使用el-card组件作为容器标签

    1. <template>
    2.   <el-card class="box-card">
    3.       <el-form :inline="true" class="demo-form-inline">
    4.           <el-form-item>
    5.             <el-input v-model="username" placeholder="请输入用户名"></el-input>
    6.           </el-form-item>
    7.           <el-form-item>
    8.             <el-input v-model="idCode" placeholder="请输入身份证号码"></el-input>
    9.           </el-form-item>
    10.           <el-form-item>
    11.             <el-input v-model="mobile" placeholder="请输入手机号码"></el-input>
    12.           </el-form-item>
    13.           <el-form-item>
    14.             <el-button type="primary" @click="getUserList">查询</el-button>
    15.           </el-form-item>
    16.       </el-form>
    17.       <el-empty description="暂无数据" v-show="userList == null || userList.length == 0"></el-empty>
    18.       <div v-show="userList != null && userList.length > 0">
    19.           <div style="margin-bottom: 20px">
    20.             <el-button size="mini" @click="toggleSelection(userList)">全选</el-button>
    21.             <el-button size="mini" @click="toggleSelection()">取消</el-button>
    22.             <el-button size="mini" type="danger" @click="toggleSelection()">批量删除(逻辑)</el-button>
    23.             <el-button size="mini" type="danger" @click="toggleSelection()">批量删除(物理)</el-button>
    24.             <el-button size="mini" type="primary" @click="toggleSelection()">导出excel</el-button>
    25.           </div>
    26.           <el-table
    27.               ref="multipleTable"
    28.               :data="userList"
    29.               tooltip-effect="dark"
    30.               style="width: 100%"
    31.               @selection-change="handleSelectionChange">
    32.             <el-table-column
    33.                 type="selection"
    34.                 width="55">
    35.             </el-table-column>
    36.             <el-table-column
    37.                 label="用户编号"
    38.                 prop="id"
    39.                 width="180">
    40.             </el-table-column>
    41.             <el-table-column
    42.                 label="用户名"
    43.                 prop="username"
    44.                 width="180">
    45.             </el-table-column>
    46.             <el-table-column
    47.                 label="性别"
    48.                 prop="sex"
    49.                 width="180">
    50.             </el-table-column>
    51.             <el-table-column
    52.                 label="手机号码"
    53.                 prop="mobile"
    54.                 width="180">
    55.             </el-table-column>
    56.             <el-table-column
    57.                 label="身份证号码"
    58.                 prop="idCode"
    59.                 width="200">
    60.             </el-table-column>
    61.             <el-table-column
    62.                 label="用户名"
    63.                 prop="username"
    64.                 width="180">
    65.             </el-table-column>
    66.             <el-table-column label="操作">
    67.               <template v-slot="scope">
    68.                 <el-button
    69.                     size="mini"
    70.                     type="primary"
    71.                     @click="handleDetail(scope.$index, scope.row)">详情</el-button>
    72.                 <el-button
    73.                     size="mini"
    74.                     @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
    75.                 <el-button
    76.                     size="mini"
    77.                     type="danger"
    78.                     @click="handleDelete(scope.$index, scope.row)">删除</el-button>
    79.               </template>
    80.             </el-table-column>
    81.           </el-table>
    82.           <div style="display: flex; justify-content: center;margin-top: 20px">
    83.             <el-pagination
    84.                 background
    85.                 @size-change="handleSizeChange"
    86.                 @current-change="handleCurrentChange"
    87.                 :current-page="current"
    88.                 :page-sizes="[5, 10, 20, 50, 100]"
    89.                 :page-size="size"
    90.                 :total="total"
    91.                 layout="total, sizes, prev, pager, next, jumper">
    92.             </el-pagination>
    93.           </div>
    94.       </div>
    95.   </el-card>
    96. </template>

    在methods中注册全局函数

    1. methods:{
    2.     toggleSelection(rows) {
    3.       if (rows) {
    4.         rows.forEach(row => {
    5.           this.$refs.multipleTable.toggleRowSelection(row);
    6.         });
    7.       } else {
    8.         this.$refs.multipleTable.clearSelection();
    9.       }
    10.     },
    11.     getUserList(){
    12.       this.$http.get('/user/list', {
    13.         params:{
    14.           current: this.current,
    15.           size:this.size,
    16.           username:this.username,
    17.           idCode:this.idCode,
    18.           mobile:this.mobile
    19.         }
    20.       }).then((data) =>{
    21.         if( data ){
    22.           this.total = data.total;
    23.           this.userList = data.records;
    24.         }
    25.       })
    26.     },
    27.     handleSelectionChange(val) {
    28.       this.multipleSelection = val;
    29.       console.log(val)
    30.     },
    31.     handleSizeChange(val){
    32.       this.size = val;
    33.       this.getUserList()
    34.     },
    35.     handleCurrentChange(val){
    36.       this.current = val;
    37.       this.getUserList()
    38.     },
    39.     handleDetail(index, row){
    40.  
    41.     },
    42.     handleEdit(index, row){
    43.  
    44.     },
    45.     handleDelete(index, row){
    46.  
    47.     }
    48. }

    编写mounted钩子函数

    注意: 钩子函数不是定义i在methods里面的, 而是和methods平级的

    1. mounted(){
    2.     this.getUserList();
    3. }

  • 相关阅读:
    实验六：频域图像增强方法
    医院项目-预约挂号-第三部分
    为什么我们需要企业架构？
    案例分析-金融业网络安全攻防
    C专家编程 第3章 分析C语言的声明 3.3 优先级规则
    Apple开发如何在设备中切换IAP(内购)沙盒测试账户？
    TrafficGPT: Viewing, Processing, and Interacting with Traffic Foundation Models
    德迅云安全和您聊聊关于DDOS高防ip的一些方面
    Git学习笔记
    深入理解通知服务NotificationListenerService原理
  • 原文地址：https://blog.csdn.net/qq_59592117/article/details/126771721